Optimize UI with a single call to get the whole board

Author: barlock

packages/stratego-four/contracts/Stratego4.sol

@@ -3,6 +3,10 @@ pragma solidity ^0.5.0;
 contract Stratego4 {
   enum GameState { Joining, AddingPieces, InProgress, Finished }
 
+  event PieceMoved (
+    bytes32 rankHash
+  );
+
   struct Piece {
     uint8 x;
     uint8 y;
@@ -65,12 +69,6 @@ contract Stratego4 {
     return game.playerAddresses;
   }
 
-  function playerPieces(address playerAddress) public view returns(bytes32[] memory) {
-    Game storage game = _currentGame(playerAddress);
-
-    return game.players[playerAddress].pieceRankHashes;
-  }
-
   function isPlayersTurn(address playerAddress) public view returns(bool) {
     Game storage game = _currentGame(playerAddress);
 
@@ -98,6 +96,8 @@ contract Stratego4 {
     game.pieceLocations[x][y] = rankHash;
     piece.x = x;
     piece.y = y;
+
+    emit PieceMoved(rankHash);
   }
 
   function addPiece(address playerAddress, uint8 x, uint8 y, bytes32 rankHash, bool isFlagCarrier) public {
@@ -141,4 +141,36 @@ contract Stratego4 {
 
     return (piece.x, piece.y, piece.isFlagCarrier, piece.rank, rankHash);
   }
+
+  function getGamePieces(address playerAddress) public view
+    returns(uint8[80] memory, uint8[80] memory, bool[80] memory, uint8[80] memory, bytes32[80] memory, address[80] memory)
+  {
+    uint8[80] memory xs;
+    uint8[80] memory ys;
+    bool[80] memory isFlagCarriers;
+    uint8[80] memory ranks;
+    bytes32[80] memory rankHashes;
+    address[80] memory players;
+    Game storage game = _currentGame(playerAddress);
+
+    for (uint i = 0; i < game.playerAddresses.length; i += 1) {
+      address playerIAddress = game.playerAddresses[i];
+      Player storage player = game.players[playerIAddress];
+
+      for (uint j = 0; j < player.pieceRankHashes.length; j += 1) {
+        bytes32 rankHash = player.pieceRankHashes[j];
+        Piece storage piece = player.pieces[rankHash];
+        uint returnIndex = i * 20 + j;
+
+        xs[returnIndex] = piece.x;
+        ys[returnIndex] = piece.y;
+        isFlagCarriers[returnIndex] = piece.isFlagCarrier;
+        ranks[returnIndex] = piece.rank;
+        rankHashes[returnIndex] = rankHash;
+        players[returnIndex] = playerIAddress;
+      }
+    }
+
+    return (xs, ys, isFlagCarriers, ranks, rankHashes, players);
+  }
 }

packages/stratego-four/docker-compose.yml

@@ -31,7 +31,7 @@ services:
     image: trufflesuite/ganache-cli
     ports:
       - 8545:8545
-      - 8546:8546
+      - 8546:8545
     command:
       - --gasPrice=0
 

packages/stratego-four/src/game/gameSaga.js

@@ -10,8 +10,7 @@ import {
   selectAccounts,
   selectPlayerColor,
   selectPlayer,
-  selectCurrentPlayerColors,
-  selectGameCache
+  selectPieces
 } from './gameSelectors';
 import defaultPieceSetup from './defaultPieceSetup';
 
@@ -61,6 +60,13 @@ function* initializePlayer({ player }) {
       stratego4.methods.isPlayersTurn.cacheCall(player, { ...ops })
     )
   );
+
+  yield put(
+    setCacheKey(
+      'getGamePieces',
+      stratego4.methods.getGamePieces.cacheCall(player, { ...ops })
+    )
+  );
 }
 
 /**
@@ -105,81 +111,29 @@ export function* initializePlayerPieces() {
     );
   });
 }
-
-/**
- * Update the piece cache for a player
- *
- * @param {Array<string>} pieces - Array of piece rank hashes
- * @param {string} playerAddress - Address of player to update
- */
-export function* updatePieceCache(pieces, playerAddress) {
-  const ops = yield defaultTxOps();
-  const playerColors = yield select(selectCurrentPlayerColors);
-  const gameCache = yield select(selectGameCache);
-  const player = playerColors.find(player => player.address === playerAddress);
-
-  if (!player) {
-    // Skip if a player isn't found. Happens when changing to a new game
-    return;
-  }
-
-  const gameCacheKey = `getPiece-${player.color}`;
-  const currentPieceCache = gameCache[gameCacheKey] || [];
-
-  yield put(
-    setCacheKey(
-      gameCacheKey,
-      pieces.map(piece => {
-        const args = [playerAddress, piece, { ...ops }];
-        const cacheKey = stratego4.generateArgsHash(args);
-
-        if (!currentPieceCache.includes(cacheKey)) {
-          stratego4.methods.getPiece.cacheCall(...args);
-        }
-
-        return cacheKey;
-      })
-    )
-  );
-}
-
 /**
  * Handle when drizzle receives player piece rank hashes
  *
  * @param {Object} action - redux action
  */
-export function* handleGotPlayerPieces(action) {
+export function* handleGotGamePieces(action) {
   const player = yield select(selectPlayer);
   const actionPlayer = action.args[0];
   const playerColor = yield select(selectPlayerColor);
-  const pieces = action.value;
-  const isAlreadySetup = pieces.length > 0;
+  const gamePieces = yield select(selectPieces);
 
   const isCurrentPlayer = actionPlayer === player;
 
   if (!playerColor) {
     return;
   }
 
+  const pieces = gamePieces[playerColor];
+  const isAlreadySetup = pieces.length > 0;
+
   if (isCurrentPlayer && !isAlreadySetup) {
     yield initializePlayerPieces();
   }
-
-  yield updatePieceCache(pieces, actionPlayer);
-}
-
-/**
- * Handle when drizzle receives current player addresses
- *
- * @param {Object} action - Redux action
- */
-export function* handleGotCurrentPlayers(action) {
-  const ops = yield defaultTxOps();
-  const currentPlayers = action.value;
-
-  currentPlayers.forEach(player =>
-    stratego4.methods.playerPieces.cacheCall(player, { ...ops })
-  );
 }
 
 /**
@@ -189,19 +143,14 @@ export function* handleGotCurrentPlayers(action) {
  */
 export function* handleGotContractVar(action) {
   switch (action.variable) {
-    case 'playerPieces':
-      yield handleGotPlayerPieces(action);
-      break;
-
-    case 'currentPlayers':
-      yield handleGotCurrentPlayers(action);
+    case 'getGamePieces':
+      yield handleGotGamePieces(action);
       break;
 
     default:
       break;
   }
 }
-
 /**
  * A player has joined the a game
  *

packages/stratego-four/src/game/gameSelectors.js

@@ -56,40 +56,10 @@ const selectCacheValue = key =>
     }
   );
 
-/**
- * Create a selector for a player color's pieces
- *
- * @param {string} color - The player color
- * @returns {Function} - Cache selector
- */
-const selectPlayerPieces = color =>
-  createSelector(
-    selectGameCache,
-    selectContract,
-    (gameCache, contract) => {
-      const pieceCacheKeys = gameCache[`getPiece-${color}`] || [];
-
-      return pieceCacheKeys
-        .map(cacheKey => contract.getPiece[cacheKey])
-        .filter(cache => cache)
-        .map(({ value }) => ({
-          x: value[0],
-          y: value[1],
-          isFlagCarrier: value[2],
-          rank: value[3],
-          rankHash: value[4]
-        }));
-    }
-  );
-
 export const selectCurrentGameId = selectCacheValue('currentGame');
 export const selectCurrentPlayers = selectCacheValue('currentPlayers');
 export const selectIsPlayersTurn = selectCacheValue('isPlayersTurn');
-
-export const selectRedPlayerPieces = selectPlayerPieces('red');
-export const selectGreenPlayerPieces = selectPlayerPieces('green');
-export const selectBluePlayerPieces = selectPlayerPieces('blue');
-export const selectYellowPlayerPieces = selectPlayerPieces('yellow');
+export const selectGamePieces = selectCacheValue('getGamePieces');
 
 const playerColors = new Map([
   [-1, ''],
@@ -117,10 +87,46 @@ export const selectPlayerColor = createSelector(
     (players.find(player => player.address === playerAddress) || {}).color
 );
 
+/**
+ * Create an initial empty board state
+ *
+ * @returns {Object} An Empty board
+ */
+const initialBoard = () => ({
+  red: [],
+  green: [],
+  blue: [],
+  yellow: []
+});
+
 export const selectPieces = createSelector(
-  selectRedPlayerPieces,
-  selectGreenPlayerPieces,
-  selectBluePlayerPieces,
-  selectYellowPlayerPieces,
-  (red, green, blue, yellow) => ({ red, green, blue, yellow })
+  selectGamePieces,
+  selectCurrentPlayerColors,
+  (gamePieces, playerColors) => {
+    if (!gamePieces) {
+      return initialBoard();
+    }
+
+    return gamePieces[0]
+      .map((x, index) => ({
+        x: gamePieces[0][index],
+        y: gamePieces[1][index],
+        isFlagCarrier: gamePieces[2][index],
+        rank: gamePieces[3][index],
+        rankHash: gamePieces[4][index],
+        player: gamePieces[5][index]
+      }))
+      .filter(piece => piece.x !== '0')
+      .reduce((board, piece) => {
+        const color = (
+          playerColors.find(player => player.address === piece.player) || {}
+        ).color;
+
+        if (color) {
+          board[color].push(piece);
+        }
+
+        return board;
+      }, initialBoard());
+  }
 );

packages/stratego-four/src/store/drizzleOptions.js

@@ -4,7 +4,7 @@ const mnemonic =
 
 export default {
   contracts: [require('../build/contracts/Stratego4')],
-
+  events: ['PieceMoved'],
   web3: {
     web3: {
       customProvider: pantheonProvider(mnemonic)