Tile, pip, and border ordering is working!

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

client/src/Board.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import "./Board.css";
 
 const base = process.env.PUBLIC_URL;   
@@ -15,23 +15,19 @@ const Board = ({ game }) => {
     let row = 0, rowCount = 0;
     let y = center.y - rows.length * 0.5 * 67,
       x = center.x - (rows[row] - 1) * 0.5 * 77.5;
-    let divs = [], count = 19;
-    for (let i = 0; i < count; i++) {
-      let code = (i === (count - 1))
-        ? 'robber'
-        : String.fromCharCode(65 + i);
-      divs.push(
-        <div
-          key={`pip-${(i).toString(16)}`}
-          className="Pip"
-          style={{
-            top: `${y}px`,
-            left: `${x}px`,
-            backgroundImage: `url(${assetsPath}/gfx/pip-numbers.png)`,
-            backgroundPositionX: `${ 100. * (i % 6) / 5.}%`,
-            backgroundPositionY: `${ 100 * Math.floor(i / 6) / 5. }%`
-          }}/>
-      );
+    return game.pipOrder.map(order => {
+      const pip = game.pips[order];
+      const div = <div
+        key={`pip-${order}`}
+        className="Pip"
+        style={{
+          top: `${y}px`,
+          left: `${x}px`,
+          backgroundImage: `url(${assetsPath}/gfx/pip-numbers.png)`,
+          backgroundPositionX: `${ 100. * (order % 6) / 5.}%`,
+          backgroundPositionY: `${ 100 * Math.floor(order / 6) / 5. }%`
+        }}
+      />;
         
       if (++rowCount === rows[row]) {
         row++;
@@ -41,98 +37,68 @@ const Board = ({ game }) => {
       } else {
         x += 77.5;
       }
-    }
-    return divs;
+
+      return div;
+    });
   };
 
   const generateTiles = () => {
     let row = 0, rowCount = 0;
     let y = center.y - rows.length * 0.5 * 67,
       x = center.x - (rows[row] - 1) * 0.5 * 77.5;
+    return game.tileOrder.map(order => {
+      const tile = game.tiles[order];
+      let div = <div
+        key={`${tile.type}-${tile.card}`}
+        className="Tile"
+        style={{
+          top: `${y}px`,
+          left: `${x}px`,
+          backgroundImage: `url(${assetsPath}/gfx/tiles-${tile.type}.png)`,
+          backgroundPositionY: `-${tile.card*77.5}px`
+        }}
+      />;
      
-    return [ "wood", "wheat", "stone", "sheep", "brick", "robber" ].map((type) => {
-      let count;
-      switch (type) {
-        case "robber":
-          count = 1;
-          break;
-        case "brick":
-          count = 3;
-          break;
-        case "wood":
-          count = 4;
-          break;
-        case "sheep":
-          count = 4;
-          break;
-        case "stone":
-          count = 3;
-          break;
-        case "wheat":
-          count = 4;
-          break;
-        default:
-          console.error(`Invalid type: ${type}`);
-          break;
-      }
-      let divs = [];
-
-      for (let i = 0; i < count; i++) {
-        divs.push(
-          <div
-            key={`${type}-${(i).toString(16)}`}
-            className="Tile"
-            style={{
-              top: `${y}px`,
-              left: `${x}px`,
-              backgroundImage: `url(${assetsPath}/gfx/tiles-${type}.png)`,
-              backgroundPositionY: `-${i*77.5}px`
-            }}/>
-        );
-
-        if (++rowCount === rows[row]) {
-          row++;
-          rowCount = 0;
-          y += 67;
-          x = center.x - (rows[row] - 1) * 0.5 * 77.5;
-        } else {
-          x += 77.5;
-        }
+      if (++rowCount === rows[row]) {
+        row++;
+        rowCount = 0;
+        y += 67;
+        x = center.x - (rows[row] - 1) * 0.5 * 77.5;
+      } else {
+        x += 77.5;
       }
     
-      return divs;
+      return div;
     });
   };
 
   const generateBorders = () => {
-    const divs = [],
-     radius = 77.5 * 2;
-    const sides = 6;
-    for (let side = 0; side < sides; side++) {
+    const radius = 77.5 * 2,
+     sides = 6;
+    let index = 0;
+    return game.borderOrder.map(order => {
+//      const border = game.borders[order];
+      const side = order;
       let x = center.x + Math.sin(Math.PI - side / sides * 2. * Math.PI) * radius,
         y = -33.5 + center.y + Math.cos(Math.PI - side / sides * 2. * Math.PI) * radius;
-      let prev = (side == 0) ? 6 : side;
+      let prev = (side === 0) ? 6 : side;
       const file = `borders-${side+1}.${prev}.png`;
-      divs.push(<div
-        key={`border-${side.toString(16)}`}
+      index++;
+      return <div
+        key={`border-${index}}`}
         className="Border"
         style={{
           top: `${y}px`,
           left: `${x}px`,
           transform: `rotate(${side*(360/sides)}deg) translate(89px, 0) scale(-1, -1)`,
           backgroundImage: `url(${assetsPath}/gfx/${file} )`
-        }}>{side}</div>);
-    }
-    return divs;
+        }}
+      />;
+    });
   };
 
-  const updateBorders = () => {
-    for (let i = 0; i < 6; i++) {
-
-    }
-  }
   useEffect(() => {
-    if (game && game.signature != signature) {
+    if (game && game.signature !== signature) {
       console.log(`Generate for ${game.signature}`);
       setPips(generatePips);
       setBorders(generateBorders);
@@ -143,7 +109,17 @@ const Board = ({ game }) => {
         console.log(`No game in Board`);
       }
     }
-  }, [ setPips, setBorders, setTiles, setSignature, game]);
+  }, [
+    setPips, 
+    setBorders, 
+    setTiles, 
+    setSignature, 
+    generatePips, 
+    generateBorders, 
+    generateTiles, 
+    game,
+    signature
+  ]);
 
   return (
     <div className="Board" style={{backgroundImage: `url(${assetsPath}/gfx/tabletop.png)`}}>

server/routes/games.js

@@ -36,25 +36,25 @@ function shuffle(array) {
 
 const assetData = {
   tiles: [
-    "wood",
-    "wood",
-    "wood",
-    "wood",
-    "wheat",
-    "wheat",
-    "wheat",
-    "wheat",
-    "stone",
-    "stone",
-    "stone",
-    "sheep",
-    "sheep",
-    "sheep",
-    "sheep",
-    "brick",
-    "brick",
-    "brick",
-    "robber"
+    { type: "robber", card: 0 },
+    { type: "wood", card: 0 },
+    { type: "wood", card: 1 },
+    { type: "wood", card: 2 },
+    { type: "wood", card: 3 },
+    { type: "wheat", card: 0 },
+    { type: "wheat", card: 1 },
+    { type: "wheat", card: 2 },
+    { type: "wheat", card: 3 },
+    { type: "stone", card: 0 },
+    { type: "stone", card: 1 },
+    { type: "stone", card: 2 },
+    { type: "sheep", card: 0 },
+    { type: "sheep", card: 1 },
+    { type: "sheep", card: 2 },
+    { type: "sheep", card: 3 },
+    { type: "brick", card: 0 },
+    { type: "brick", card: 1 },
+    { type: "brick", card: 2 }
   ],
   pips: [
     { roll:  7, pips: 0 },
@@ -681,11 +681,11 @@ const shuffleBoard = (game) => {
   for (let i = 0, p = 0; i < sequence.length; i++) {
     const target = sequence[i];
     /* If the target tile is the desert (18), then set the
-     * pip value to the robber (0) otherwise set
+     * pip value to the robber (18) otherwise set
      * the target pip value to the currently incremeneting
      * pip value. */ 
-    if (game.tileOrder[target] === 18) {
-      game.pipOrder[target] = 0;
+    if (game.tiles[game.tileOrder[target]].type === 'robber') {
+      game.pipOrder[target] = 18;
     } else {
       game.pipOrder[target] = p++;
     }