Merge branch 'jorbascrumps/feat/phase-next-fn' of github.com:jorbascr…

…umps/boardgame.io into jorbascrumps/feat/phase-next-fn
boardgameio · Aug 3, 2021 · cdb7358 · cdb7358
2 parents 37bbd90 + 233681b
commit cdb7358
Show file tree

Hide file tree

Showing 44 changed files with 1,862 additions and 1,263 deletions.
diff --git a/README.md b/README.md
@@ -93,11 +93,6 @@ docs can be edited by clicking the “Edit on GitHub” link at the top right.
 💸 **Want to support the project financially?**  
 We accept donations via [GitHub Sponsors][sponsors] and on [Open Collective][collective].
 
-[
-![Open Collective Sponsors](https://opencollective.com/boardgameio/tiers/sponsor.svg?width=600&button=false&avatarHeight=75)
-![OpenCollective Backers](https://opencollective.com/boardgameio/tiers/backer.svg?width=600&avatarHeight=50)
-][collective]
-
 [new-issue]: https://github.com/boardgameio/boardgame.io/issues/new/choose
 [gitter]: https://gitter.im/boardgame-io/General
 [discussions]: https://github.com/boardgameio/boardgame.io/discussions

diff --git a/docs/documentation/CHANGELOG.md b/docs/documentation/CHANGELOG.md
@@ -1,3 +1,27 @@
+### v0.46.1
+
+#### Bugfixes
+
+* [[f0bc8b9](https://github.com/boardgameio/boardgame.io/commit/f0bc8b9)] flow: Run `turn.endIf` hook after updating stages
+
+## v0.46.0
+
+#### Features
+
+* [[91cf25e](https://github.com/boardgameio/boardgame.io/commit/91cf25e)] Events Plugin: Don’t leak stage events across turns & allow self-ending turns/phases ([#957](https://github.com/boardgameio/boardgame.io/pull/957))
+* [[afee0b7](https://github.com/boardgameio/boardgame.io/commit/afee0b7), [1e435c2](https://github.com/boardgameio/boardgame.io/commit/1e435c2), [1078b13](https://github.com/boardgameio/boardgame.io/commit/1078b13)] Allow plugins to declare an action invalid ([#963](https://github.com/boardgameio/boardgame.io/pull/963), [#970](https://github.com/boardgameio/boardgame.io/pull/970))
+* [[262d867](https://github.com/boardgameio/boardgame.io/commit/262d867)] Server: Decouple player view calculation from Master ([#966](https://github.com/boardgameio/boardgame.io/pull/966))
+
+#### Bugfixes
+
+* [[dcaca7f](https://github.com/boardgameio/boardgame.io/commit/dcaca7f)] types: Remove `turn.moves` from `Game` type
+* [[b753094](https://github.com/boardgameio/boardgame.io/commit/b753094), [2aa9db5](https://github.com/boardgameio/boardgame.io/commit/2aa9db5)] Update dependencies ([#965](https://github.com/boardgameio/boardgame.io/pull/965), [#968](https://github.com/boardgameio/boardgame.io/pull/968))
+
+#### Other
+
+* [[be63602](https://github.com/boardgameio/boardgame.io/commit/be63602)] Update development dependencies ([#969](https://github.com/boardgameio/boardgame.io/pull/969))
+* [[4efec1a](https://github.com/boardgameio/boardgame.io/commit/4efec1a)] Update linter tooling & refactor errors ([#967](https://github.com/boardgameio/boardgame.io/pull/967))
+
 ### v0.45.2
 
 #### Bugfixes

diff --git a/docs/documentation/index.html b/docs/documentation/index.html
@@ -45,7 +45,7 @@
 
   @media only screen and (max-device-width: 500px) {
     iframe.react {
-      display: none;
+      max-height: 60vh;
     }
   }
   </style>

diff --git a/docs/documentation/snippets/example-1.46f74a00.js b/docs/documentation/snippets/example-1.46f74a00.js
diff --git a/docs/documentation/snippets/example-1.c00bf6c8.js b/docs/documentation/snippets/example-1.c00bf6c8.js
diff --git a/docs/documentation/snippets/example-1/index.html b/docs/documentation/snippets/example-1/index.html
@@ -1,2 +1 @@
-<!DOCTYPE html><html><head><style>body{padding:20px}.msg{position:absolute;bottom:0;left:20px;color:#aaa;font-size:12px;margin-bottom:20px}</style></head><body> <div class="msg">interactive (not an image)</div> <div id="app"></div> <script type="text/javascript" src="/documentation/snippets/example-1.c00bf6c8.js"></script>
-</body></html>
+<!DOCTYPE html><html><head><style>body{padding:20px}.msg{position:absolute;bottom:0;left:20px;color:#aaa;font-size:12px;margin-bottom:20px}</style></head><body> <div class="msg">interactive (not an image)</div> <div id="app"></div> <script type="text/javascript" src="/documentation/snippets/example-1.46f74a00.js"></script> </body></html>
diff --git a/docs/documentation/snippets/example-2.5076e8bb.js b/docs/documentation/snippets/example-2.5076e8bb.js
diff --git a/docs/documentation/snippets/example-2.5f113740.js b/docs/documentation/snippets/example-2.5f113740.js
diff --git a/docs/documentation/snippets/example-2/index.html b/docs/documentation/snippets/example-2/index.html
@@ -1,2 +1 @@
-<!DOCTYPE html><html><head><style>body{padding:20px}.msg{position:absolute;bottom:0;left:20px;color:#aaa;font-size:12px;margin-bottom:20px}</style></head><body> <div class="msg">interactive (not an image)</div> <div id="app"></div> <script type="text/javascript" src="/documentation/snippets/example-2.5076e8bb.js"></script>
-</body></html>
+<!DOCTYPE html><html><head><style>body{padding:20px}.msg{position:absolute;bottom:0;left:20px;color:#aaa;font-size:12px;margin-bottom:20px}</style></head><body> <div class="msg">interactive (not an image)</div> <div id="app"></div> <script type="text/javascript" src="/documentation/snippets/example-2.5f113740.js"></script> </body></html>
diff --git a/docs/documentation/snippets/example-3.1a5b9fe4.js b/docs/documentation/snippets/example-3.1a5b9fe4.js
diff --git a/docs/documentation/snippets/example-3.62e8f11a.js b/docs/documentation/snippets/example-3.62e8f11a.js
diff --git a/docs/documentation/snippets/example-3/index.html b/docs/documentation/snippets/example-3/index.html
@@ -1,2 +1 @@
-<!DOCTYPE html><html><head><style>body{padding:20px}.msg{position:absolute;bottom:0;left:20px;color:#aaa;font-size:12px;margin-bottom:20px}</style></head><body> <div class="msg">interactive (not an image)</div> <div id="app"></div> <script type="text/javascript" src="/documentation/snippets/example-3.1a5b9fe4.js"></script>
-</body></html>
+<!DOCTYPE html><html><head><style>body{padding:20px}.msg{position:absolute;bottom:0;left:20px;color:#aaa;font-size:12px;margin-bottom:20px}</style></head><body> <div class="msg">interactive (not an image)</div> <div id="app"></div> <script type="text/javascript" src="/documentation/snippets/example-3.62e8f11a.js"></script> </body></html>
diff --git a/docs/documentation/snippets/multiplayer.2f764476.js b/docs/documentation/snippets/multiplayer.2f764476.js
diff --git a/docs/documentation/snippets/multiplayer.3a1a6797.js b/docs/documentation/snippets/multiplayer.3a1a6797.js
diff --git a/docs/documentation/snippets/multiplayer/index.html b/docs/documentation/snippets/multiplayer/index.html
@@ -1,2 +1 @@
-<!DOCTYPE html><html><head><style>body{padding:20px}.msg{position:absolute;bottom:0;left:20px;color:#aaa;font-size:12px;margin-bottom:20px}</style></head><body> <div id="app"></div> <script type="text/javascript" src="/documentation/snippets/multiplayer.3a1a6797.js"></script>
-</body></html>
+<!DOCTYPE html><html><head><style>body{padding:1.25rem}.msg{position:absolute;bottom:0;left:1.25rem;color:#aaa;font-size:.75rem;margin-bottom:1.25rem}@media screen and (max-width:420px){:root{font-size:75%}}</style></head><body> <div id="app"></div> <script type="text/javascript" src="/documentation/snippets/multiplayer.2f764476.js"></script> </body></html>
diff --git a/docs/documentation/snippets/phases-1.40bcf781.js b/docs/documentation/snippets/phases-1.40bcf781.js
diff --git a/...umentation/snippets/phases-1.9bffb833.css → ...umentation/snippets/phases-1.490dcd4c.css b/...umentation/snippets/phases-1.9bffb833.css → ...umentation/snippets/phases-1.490dcd4c.css
diff --git a/docs/documentation/snippets/phases-1.cb840e94.js b/docs/documentation/snippets/phases-1.cb840e94.js
diff --git a/docs/documentation/snippets/phases-1/index.html b/docs/documentation/snippets/phases-1/index.html
@@ -1,2 +1 @@
-<!DOCTYPE html><html><link rel="stylesheet" href="/documentation/snippets/phases-1.9bffb833.css"><body> <div id="app"></div> <script type="text/javascript" src="/documentation/snippets/phases-1.40bcf781.js"></script>
-</body></html>
+<!DOCTYPE html><html><link rel="stylesheet" href="/documentation/snippets/phases-1.490dcd4c.css"><body> <div id="app"></div> <script type="text/javascript" src="/documentation/snippets/phases-1.cb840e94.js"></script> </body></html>
diff --git a/docs/documentation/snippets/phases-2.65256dd9.js b/docs/documentation/snippets/phases-2.65256dd9.js
diff --git a/docs/documentation/snippets/phases-2.de500121.js b/docs/documentation/snippets/phases-2.de500121.js
diff --git a/...umentation/snippets/phases-2.f9cd3ae7.css → ...umentation/snippets/phases-2.fa21cb61.css b/...umentation/snippets/phases-2.f9cd3ae7.css → ...umentation/snippets/phases-2.fa21cb61.css
diff --git a/docs/documentation/snippets/phases-2/index.html b/docs/documentation/snippets/phases-2/index.html
@@ -1,2 +1 @@
-<!DOCTYPE html><html><link rel="stylesheet" href="/documentation/snippets/phases-2.f9cd3ae7.css"><body> <div id="app"></div> <script type="text/javascript" src="/documentation/snippets/phases-2.65256dd9.js"></script>
-</body></html>
+<!DOCTYPE html><html><link rel="stylesheet" href="/documentation/snippets/phases-2.fa21cb61.css"><body> <div id="app"></div> <script type="text/javascript" src="/documentation/snippets/phases-2.de500121.js"></script> </body></html>
diff --git a/docs/documentation/snippets/stages-1.5636fa1b.js b/docs/documentation/snippets/stages-1.5636fa1b.js
diff --git a/docs/documentation/snippets/stages-1.7e8f7869.js b/docs/documentation/snippets/stages-1.7e8f7869.js
diff --git a/...umentation/snippets/stages-1.f67a9865.css → ...umentation/snippets/stages-1.bcf7ab84.css b/...umentation/snippets/stages-1.f67a9865.css → ...umentation/snippets/stages-1.bcf7ab84.css
diff --git a/docs/documentation/snippets/stages-1/index.html b/docs/documentation/snippets/stages-1/index.html
@@ -1,2 +1 @@
-<!DOCTYPE html><html><link rel="stylesheet" href="/documentation/snippets/stages-1.f67a9865.css"><body> <div id="app"></div> <script type="text/javascript" src="/documentation/snippets/stages-1.7e8f7869.js"></script>
-</body></html>
+<!DOCTYPE html><html><link rel="stylesheet" href="/documentation/snippets/stages-1.bcf7ab84.css"><body> <div id="app"></div> <script type="text/javascript" src="/documentation/snippets/stages-1.5636fa1b.js"></script> </body></html>
diff --git a/docs/documentation/testing.md b/docs/documentation/testing.md
@@ -113,29 +113,31 @@ it('multiplayer test', () => {
 ### Integration Tests
 
 Test the application end-to-end from the UI layer's point of view.
-In this case we mount our React component and look for the TicTacToe board inside of it.
-We then check the board's props and invoke callbacks in order to see that the props changed accordingly.
+
+In this case we use [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
+to mount our React component and look for the TicTacToe board inside of it.
+We then check the board is rendered and responds to user interaction as expected.
 
 ```js
 import React from 'react';
-import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 import App from './app';
 
-Enzyme.configure({ adapter: new Adapter() });
-
-test('should place marker', () => {
-  const game = Enzyme.mount(<App />);
-  const board = game.find('TicTacToeBoard').instance();
-  const cells = Array(9).fill(null);
-
-  expect(board.props.G).toEqual({ cells });
-  expect(board.props.ctx.gameover).toEqual(undefined);
-
-  board.props.moves.clickCell(5);
-
-  expect(board.props.G).toEqual({
-    cells: [null, null, null, null, null, '0', null, null, null],
+describe('Tic-Tac-Toe', () => {
+  const { container } = render(<App />);
+  const cells = container.querySelectorAll('td');
+
+  test('board is empty initially', () => {
+    expect(cells).toHaveLength(9);
+    for (const cell of cells) {
+      expect(cell).toBeEmptyDOMElement();
+    }
+  });
+
+  test('clicking a cell places player 0’s marker', () => {
+    fireEvent.click(cells[5]);
+    expect(cells[5]).toHaveTextContent('0');
   });
 });
 ```
diff --git a/examples/snippets/.gitignore b/examples/snippets/.gitignore
@@ -0,0 +1 @@
+package-lock.json
diff --git a/examples/snippets/README.md b/examples/snippets/README.md
@@ -0,0 +1,28 @@
+# snippets
+
+This directory contains the source code for the embedded demos
+found in boardgame.io’s documentation.
+
+To work with the snippets, `cd` to this directory and install
+the required dependencies:
+
+```sh
+cd examples/snippets
+npm install
+```
+
+## Available commands
+
+### `npm start`
+
+Run a local development server with each snippet on its own
+page.
+
+Each snippet will be available at
+`https://localhost:1234/<snippet-name>/index.html`.
+
+### `npm run update-docs`
+
+Builds the snippets and installs them at the appropriate places
+in the docs. Be careful not to let Prettier "un-minify" the
+bundled JS while committing the change.
diff --git a/examples/snippets/package.json b/examples/snippets/package.json
@@ -2,6 +2,7 @@
   "name": "snippets",
   "scripts": {
     "start": "parcel src/*/index.html",
+    "update-docs": "./install.sh",
     "build": "parcel build --no-source-maps --public-url /documentation/snippets src/*/index.html",
     "build:opt": "parcel build --experimental-scope-hoisting --no-source-maps --public-url /documentation/snippets src/*/index.html"
   },

diff --git a/examples/snippets/src/multiplayer/index.html b/examples/snippets/src/multiplayer/index.html
@@ -4,15 +4,21 @@
 <head>
 <style>
 body {
-  padding: 20px;
+  padding: 1.25rem;
 }
 .msg {
   position: absolute;
   bottom: 0;
-  left: 20px;
+  left: 1.25rem;
   color: #aaa;
-  font-size: 12px;
-  margin-bottom: 20px;
+  font-size: 0.75rem;
+  margin-bottom: 1.25rem;
+}
+
+@media screen and (max-width: 420px) {
+  :root {
+    font-size: 75%;
+  }
 }
 </style>
 </head>

diff --git a/examples/snippets/src/multiplayer/index.js b/examples/snippets/src/multiplayer/index.js
@@ -83,12 +83,12 @@ class TicTacToeBoard extends React.Component {
     const cellStyle = (id) => ({
       cursor: 'pointer',
       border: '1px solid #555',
-      width: '50px',
-      height: '50px',
-      lineHeight: '50px',
+      width: '3.125rem',
+      height: '3.125rem',
+      lineHeight: '3.125rem',
       textAlign: 'center',
       fontFamily: 'monospace',
-      fontSize: '20px',
+      fontSize: '1.25rem',
       fontWeight: 'bold',
       background: this.isActive(id) ? '#eeffe9' : 'transparent',
     });
@@ -109,14 +109,20 @@ class TicTacToeBoard extends React.Component {
 
     return (
       <div>
-        Player {this.props.playerID}
-        {this.props.isActive && (
-          <span style={{ float: 'right' }}>Your turn!</span>
-        )}
+        <p
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            flexWrap: 'wrap',
+          }}
+        >
+          <span>Player {this.props.playerID}</span>
+          {this.props.isActive && <span>Your turn!</span>}
+        </p>
         <table id="board">
           <tbody>{tbody}</tbody>
         </table>
-        {winner}
+        <p>{winner}</p>
       </div>
     );
   }
@@ -130,14 +136,11 @@ var TicTacToeClient = Client({
 });
 
 const App = () => (
-  <div>
-    <div style={{ float: 'left' }}>
-      <TicTacToeClient playerID="0" />
-    </div>
-
-    <div style={{ float: 'right' }}>
-      <TicTacToeClient playerID="1" />
-    </div>
+  <div
+    style={{ display: 'flex', justifyContent: 'space-around', gap: '1.25rem' }}
+  >
+    <TicTacToeClient playerID="0" />
+    <TicTacToeClient playerID="1" />
   </div>
 );
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "boardgame.io",
-  "version": "0.45.2",
+  "version": "0.46.1",
   "description": "library for turn-based games",
   "repository": "https://github.com/boardgameio/boardgame.io",
   "scripts": {