Redact Log Events (#268)

Author: Stefan-Hanke

docs/api/Game.md

@@ -31,8 +31,10 @@ game state and the moves. The moves are converted to a
     Code to run at the end of a move.
   * `flow.movesPerTurn` (_number_): Ends the turn automatically if a certain number
     of moves have been made.
-  * `flow.undoableMoves` (_array_): Enables undo and redo of listed moves.
-  Leave `undefined` if all moves should be undoable.
+  * `flow.undoableMoves` (_array_): Enables undo and redo of listed moves.  Leave `undefined` if all moves should be undoable.
+  * `flow.redactedMoves` (_array_): List of moves to redact from the log.
+  * `flow.optimisticUpdate` (_function_): _(G, ctx, move) => boolean_
+    Return `false` to disable optimistic execution of a particular move on the client.
   * `flow.phases` (_object_): Optional spec of game phases. See
     [Phases](/phases) for more information.
 

examples/react/redacted-move/board.css

@@ -0,0 +1,14 @@
+/*
+ * Copyright 2018 The boardgame.io Authors
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+.secret-state section {
+  text-align: left;
+  padding: 10px;
+  margin-bottom: 20px;
+  background: #eee;
+}

examples/react/redacted-move/board.js

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2017 The boardgame.io Authors.
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './board.css';
+
+const Board = ({ G, ctx, moves, playerID, log }) => (
+  <div className="secret-state">
+    <section>
+      <strong>G</strong>
+      <pre>{JSON.stringify(G, null, 2)}</pre>
+
+      <strong>log</strong>
+      <pre>{JSON.stringify(log, null, 2)}</pre>
+      {playerID && (
+        <button
+          onClick={() =>
+            moves.clickCell({ secret: G.players[ctx.currentPlayer] })
+          }
+        >
+          Click Cell
+        </button>
+      )}
+    </section>
+  </div>
+);
+
+Board.propTypes = {
+  G: PropTypes.any.isRequired,
+  ctx: PropTypes.any.isRequired,
+  moves: PropTypes.any.isRequired,
+  playerID: PropTypes.any,
+  log: PropTypes.any,
+};
+
+export default Board;

examples/react/redacted-move/game.js

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2018 The boardgame.io Authors
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import { Game, PlayerView, TurnOrder } from 'boardgame.io/core';
+
+const RedactedMoves = Game({
+  name: 'secret-state',
+
+  setup: () => ({
+    other: {},
+    players: {
+      0: 'player 0 state',
+      1: 'player 1 state',
+    },
+  }),
+
+  moves: {
+    /* eslint-disable no-unused-vars */
+    clickCell(G, ctx, secretstuff) {
+      return { ...G };
+    },
+    /* eslint-enable no-unused-vars */
+  },
+
+  flow: {
+    redactedMoves: ['clickCell'],
+    turnOrder: TurnOrder.ANY,
+  },
+
+  playerView: PlayerView.STRIP_SECRETS,
+});
+
+export default RedactedMoves;

examples/react/redacted-move/index.js

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2018 The boardgame.io Authors.
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import Multiview from './multiview';
+
+const routes = [
+  {
+    path: '/redacted_move',
+    text: 'Example',
+    component: Multiview,
+  },
+];
+
+export default { routes };

examples/react/redacted-move/multiview.js

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2018 The boardgame.io Authors.
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import React from 'react';
+import { Client } from 'boardgame.io/react';
+import Game from './game';
+import Board from './board';
+
+const App = Client({
+  game: Game,
+  numPlayers: 2,
+  board: Board,
+  debug: false,
+  multiplayer: { local: true },
+});
+
+const Multiview = () => (
+  <div style={{ padding: 50 }}>
+    <h1>Redacted Moves</h1>
+    <p>
+      This examples demonstrates the use of redacted moves. Using redacted moves
+      allows for secret information to be stripped from the log for other
+      players.
+    </p>
+    <p>
+      Clicking the button on one of the players, you should see complete log
+      event for that player but a redacted one for everyone else.
+    </p>
+    <div className="runner">
+      <div className="run">
+        <App gameID="redacted-move" playerID="0" />
+        &lt;App playerID=&quot;0&quot;/&gt;
+      </div>
+      <div className="run">
+        <App gameID="redacted-move" playerID="1" />
+        &lt;App playerID=&quot;1&quot;/&gt;
+      </div>
+      <div className="run">
+        <App gameID="redacted-move" />
+        &lt;App/&gt;
+      </div>
+    </div>
+  </div>
+);
+
+export default Multiview;

examples/react/routes.js

@@ -14,6 +14,7 @@ import random from './random';
 import turnorder from './turnorder';
 import ui from './ui';
 import threejs from './threejs';
+import redacted_move from './redacted-move';
 
 const routes = [
   {
@@ -40,6 +41,10 @@ const routes = [
     name: 'Secret State',
     routes: secret_state.routes,
   },
+  {
+    name: 'Redacted Move',
+    routes: redacted_move.routes,
+  },
   {
     name: 'UI',
     routes: ui.routes,

examples/react/secret-state/board.js

@@ -10,16 +10,28 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './board.css';
 
-const Board = ({ G }) => (
+const Board = ({ G, ctx, moves, playerID }) => (
   <div className="secret-state">
     <section>
       <pre>{JSON.stringify(G, null, 2)}</pre>
+      {playerID && (
+        <button
+          onClick={() =>
+            moves.clickCell({ secret: G.players[ctx.currentPlayer] })
+          }
+        >
+          Click Cell
+        </button>
+      )}
     </section>
   </div>
 );
 
 Board.propTypes = {
   G: PropTypes.any.isRequired,
+  ctx: PropTypes.any.isRequired,
+  moves: PropTypes.any.isRequired,
+  playerID: PropTypes.any,
 };
 
 export default Board;

examples/react/secret-state/game.js

@@ -20,6 +20,12 @@ const SecretState = Game({
     },
   }),
 
+  moves: {
+    clickCell(G) {
+      return { ...G };
+    },
+  },
+
   playerView: PlayerView.STRIP_SECRETS,
 });
 

examples/react/secret-state/multiview.js

@@ -16,7 +16,7 @@ const App = Client({
   numPlayers: 3,
   board: Board,
   debug: false,
-  multiplayer: true,
+  multiplayer: { local: true },
 });
 
 const Multiview = () => (