docs: Update snippets with new debug panel (#792)

* docs(snippets): Align snippets with tutorial code * docs(snippets): Indicate whose turn it is in multiplayer demo * docs(snippets): Rebuild snippets * docs(tutorial): Update reference to debug panel end turn button
boardgameio · Sep 1, 2020 · a94e838 · a94e838
1 parent 35d2ce4
commit a94e838
Show file tree

Hide file tree

Showing 31 changed files with 1,172 additions and 1,102 deletions.
diff --git a/docs/documentation/snippets/example-1.adbb7371.js b/docs/documentation/snippets/example-1.adbb7371.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,2 @@
-<!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.adbb7371.js"></script>
+<!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>
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.daaad0af.js b/docs/documentation/snippets/example-2.daaad0af.js
diff --git a/docs/documentation/snippets/example-2/index.html b/docs/documentation/snippets/example-2/index.html
@@ -1,2 +1,2 @@
-<!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.daaad0af.js"></script>
+<!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>
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.7ccfd673.js b/docs/documentation/snippets/example-3.7ccfd673.js
diff --git a/docs/documentation/snippets/example-3/index.html b/docs/documentation/snippets/example-3/index.html
@@ -1,2 +1,2 @@
-<!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.7ccfd673.js"></script>
+<!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>
diff --git a/docs/documentation/snippets/multiplayer.3a1a6797.js b/docs/documentation/snippets/multiplayer.3a1a6797.js
diff --git a/docs/documentation/snippets/multiplayer.55f6ac37.js b/docs/documentation/snippets/multiplayer.55f6ac37.js
diff --git a/docs/documentation/snippets/multiplayer/index.html b/docs/documentation/snippets/multiplayer/index.html
@@ -1,2 +1,2 @@
-<!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.55f6ac37.js"></script>
+<!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>
diff --git a/docs/documentation/snippets/phases-1.40bcf781.js b/docs/documentation/snippets/phases-1.40bcf781.js
diff --git a/docs/documentation/snippets/phases-1.801c49df.js b/docs/documentation/snippets/phases-1.801c49df.js
diff --git a/docs/documentation/snippets/phases-1.9bffb833.css b/docs/documentation/snippets/phases-1.9bffb833.css
diff --git a/docs/documentation/snippets/phases-1.a50a89ba.css b/docs/documentation/snippets/phases-1.a50a89ba.css
diff --git a/docs/documentation/snippets/phases-1/index.html b/docs/documentation/snippets/phases-1/index.html
@@ -1,2 +1,2 @@
-<!DOCTYPE html><html><link rel="stylesheet" href="/documentation/snippets/phases-1.a50a89ba.css"><body> <div id="app"></div> <script type="text/javascript" src="/documentation/snippets/phases-1.801c49df.js"></script>
+<!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>
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.74deaa71.js b/docs/documentation/snippets/phases-2.74deaa71.js
diff --git a/docs/documentation/snippets/phases-2.ccd3f983.css b/docs/documentation/snippets/phases-2.ccd3f983.css
diff --git a/docs/documentation/snippets/phases-2.f9cd3ae7.css b/docs/documentation/snippets/phases-2.f9cd3ae7.css
diff --git a/docs/documentation/snippets/phases-2/index.html b/docs/documentation/snippets/phases-2/index.html
@@ -1,2 +1,2 @@
-<!DOCTYPE html><html><link rel="stylesheet" href="/documentation/snippets/phases-2.ccd3f983.css"><body> <div id="app"></div> <script type="text/javascript" src="/documentation/snippets/phases-2.74deaa71.js"></script>
+<!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>
diff --git a/docs/documentation/snippets/stages-1.7e8f7869.js b/docs/documentation/snippets/stages-1.7e8f7869.js
diff --git a/docs/documentation/snippets/stages-1.91ea74d8.js b/docs/documentation/snippets/stages-1.91ea74d8.js
diff --git a/docs/documentation/snippets/stages-1.ba1ca5f9.css b/docs/documentation/snippets/stages-1.ba1ca5f9.css
diff --git a/docs/documentation/snippets/stages-1.f67a9865.css b/docs/documentation/snippets/stages-1.f67a9865.css
diff --git a/docs/documentation/snippets/stages-1/index.html b/docs/documentation/snippets/stages-1/index.html
@@ -1,2 +1,2 @@
-<!DOCTYPE html><html><link rel="stylesheet" href="/documentation/snippets/stages-1.ba1ca5f9.css"><body> <div id="app"></div> <script type="text/javascript" src="/documentation/snippets/stages-1.91ea74d8.js"></script>
+<!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>
diff --git a/docs/documentation/tutorial.md b/docs/documentation/tutorial.md
@@ -216,7 +216,7 @@ Debug Panel, entering a number between `0` and `8`, and pressing
 cell. The number you enter is the `id` passed to the `clickCell` function as
 the first argument after `G` and `ctx`. Notice how the
 `cells` array on the Debug Panel updates as you make moves. You
-can end the turn using the `endTurn` button and the next call to
+can end the turn by clicking `endTurn` and pressing **Enter**. The next call to
 `clickCell` will result in a “1” in the chosen cell instead of a “0”.
 
 ```react

diff --git a/examples/snippets/src/example-2/index.js b/examples/snippets/src/example-2/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Client } from 'boardgame.io/react';
 import { Debug } from 'boardgame.io/debug';
+import { INVALID_MOVE } from 'boardgame.io/core';
 
 function IsVictory(cells) {
   const positions = [
@@ -28,12 +29,15 @@ const TicTacToe = {
 
   moves: {
     clickCell(G, ctx, id) {
-      if (G.cells[id] === null) {
-        G.cells[id] = ctx.currentPlayer;
+      if (G.cells[id] !== null) {
+        return INVALID_MOVE;
       }
+      G.cells[id] = ctx.currentPlayer;
     },
   },
 
+  turn: { moveLimit: 1 },
+
   endIf: (G, ctx) => {
     if (IsVictory(G.cells)) {
       return { winner: ctx.currentPlayer };
@@ -46,14 +50,7 @@ const TicTacToe = {
 
 class TicTacToeBoard extends React.Component {
   onClick(id) {
-    if (this.isActive(id)) {
-      this.props.moves.clickCell(id);
-      this.props.events.endTurn();
-    }
-  }
-
-  isActive(id) {
-    return this.props.isActive && this.props.G.cells[id] == null;
+    this.props.moves.clickCell(id);
   }
 
   render() {

diff --git a/examples/snippets/src/example-3/index.js b/examples/snippets/src/example-3/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Client } from 'boardgame.io/react';
 import { Debug } from 'boardgame.io/debug';
+import { INVALID_MOVE } from 'boardgame.io/core';
 
 function IsVictory(cells) {
   const positions = [
@@ -28,9 +29,10 @@ const TicTacToe = {
 
   moves: {
     clickCell(G, ctx, id) {
-      if (G.cells[id] === null) {
-        G.cells[id] = ctx.currentPlayer;
+      if (G.cells[id] !== null) {
+        return INVALID_MOVE;
       }
+      G.cells[id] = ctx.currentPlayer;
     },
   },
 
@@ -60,13 +62,7 @@ const TicTacToe = {
 
 class TicTacToeBoard extends React.Component {
   onClick(id) {
-    if (this.isActive(id)) {
-      this.props.moves.clickCell(id);
-    }
-  }
-
-  isActive(id) {
-    return this.props.isActive && this.props.G.cells[id] == null;
+    this.props.moves.clickCell(id);
   }
 
   render() {

diff --git a/examples/snippets/src/multiplayer/index.js b/examples/snippets/src/multiplayer/index.js
@@ -80,7 +80,7 @@ class TicTacToeBoard extends React.Component {
         );
     }
 
-    const cellStyle = {
+    const cellStyle = id => ({
       cursor: 'pointer',
       border: '1px solid #555',
       width: '50px',
@@ -90,15 +90,16 @@ class TicTacToeBoard extends React.Component {
       fontFamily: 'monospace',
       fontSize: '20px',
       fontWeight: 'bold',
-    };
+      background: this.isActive(id) ? '#eeffe9' : 'transparent',
+    });
 
     let tbody = [];
     for (let i = 0; i < 3; i++) {
       let cells = [];
       for (let j = 0; j < 3; j++) {
         const id = 3 * i + j;
         cells.push(
-          <td style={cellStyle} key={id} onClick={() => this.onClick(id)}>
+          <td style={cellStyle(id)} key={id} onClick={() => this.onClick(id)}>
             {this.props.G.cells[id]}
           </td>
         );
@@ -108,6 +109,10 @@ class TicTacToeBoard extends React.Component {
 
     return (
       <div>
+        Player {this.props.playerID}
+        {this.props.isActive && (
+          <span style={{ float: 'right' }}>Your turn!</span>
+        )}
         <table id="board">
           <tbody>{tbody}</tbody>
         </table>
@@ -127,12 +132,10 @@ var TicTacToeClient = Client({
 const App = () => (
   <div>
     <div style={{ float: 'left' }}>
-      Player 0
       <TicTacToeClient playerID="0" />
     </div>
 
     <div style={{ float: 'right' }}>
-      Player 1
       <TicTacToeClient playerID="1" />
     </div>
   </div>