Dice rolling

working on indicating what you rolled

Signed-off-by: James Ketrenos <james.p.ketrenos@intel.com>

src/App.css

@@ -36,6 +36,10 @@ body {
   margin-left: -4.5em;
 }
 
+.Hand {
+  min-height: calc(7.2em + 0.5em);
+}
+
 .Hand:hover .Stack:hover > *:not(:first-child) {
   margin-left: -2em;
 }

src/Board.js

@@ -4,7 +4,18 @@ const hexagonRatio = 1.1547005,
   tileHeight = 0.16,
   tileWidth = tileHeight * hexagonRatio,
   roadSize = tileHeight * 0.5 * (5. / 8.),
-  settlementSize = tileHeight * 0.5 - roadSize;
+  settlementSize = tileHeight * 0.5 - roadSize,
+  diceSize = 0.05,
+  diceMargin = diceSize * 0.5 * Math.sqrt(2),
+  dice = [ {
+    pips: 0,
+    jitter: 0,
+    angle: 0
+  }, {
+    pips: 0,
+    jitter: 0,
+    angle: 0
+  } ];
 
 const Tiles = (board) => {
   const tiles = [ {
@@ -65,7 +76,7 @@ const Tiles = (board) => {
     image.addEventListener("error", (event) => {
       alert(`Error loading ${file}`);
     });
-    image.src = `assets/original/${file}`;
+    image.src = `assets/gfx/${file}`;
   });
 
   return tiles;
@@ -104,7 +115,7 @@ const Pips = (board) => {
   image.addEventListener("error", (event) => {
     alert(`Error loading ${file}`);
   });
-  image.src = `assets/original/${file}`;
+  image.src = `assets/gfx/${file}`;
 
   return {
     image: image,
@@ -122,7 +133,7 @@ const Border = (board, border) => {
   image.addEventListener("error", (event) => {
     alert(`Error loading ${file}`);
   });
-  image.src = `assets/original/${file}`;
+  image.src = `assets/gfx/${file}`;
   return border;
 };
 
@@ -135,7 +146,7 @@ const Table = (board) => {
   image.addEventListener("error", (event) => {
     alert(`Error loading ${file}`);
   });
-  image.src = `assets/original/${file}`;
+  image.src = `assets/gfx/${file}`;
   return image;
 };
 
@@ -165,7 +176,7 @@ class Placard extends React.Component {
   render() {
     return (
       <div className="Placard"
-        style={{backgroundImage:`url(assets/original/placard-${this.props.type}.png)`}}>
+        style={{backgroundImage:`url(assets/gfx/placard-${this.props.type}.png)`}}>
       </div>
     );
   }
@@ -179,7 +190,7 @@ class Development extends React.Component {
     const array = [];
     for (let i = 0; i < this.props.count; i++) {
       if (this.props.type.match(/-$/)) {
-        array.push(Math.ceil(Math.random() * this.props.max));
+        array.push(i + 1);//Math.ceil(Math.random() * this.props.max));
       } else {
         array.push("");
       }
@@ -188,7 +199,7 @@ class Development extends React.Component {
       <div className="Stack">
         { React.Children.map(array, i => (
           <div className="Development"
-            style={{backgroundImage:`url(assets/original/card-${this.props.type}${i}.png)`}}>
+            style={{backgroundImage:`url(assets/gfx/card-${this.props.type}${i}.png)`}}>
           </div>
         )) }
       </div>
@@ -201,15 +212,19 @@ class Resource extends React.Component {
     super(props);
   }
   render() {
-    const array = new Array(Number(this.props.count));
+    const array = new Array(Number(this.props.count ? this.props.count : 0));
     return (
-      <div className="Stack">
+      <>
+      { array.length > 0 && 
+        <div className="Stack">
         { React.Children.map(array, i => (
           <div className="Resource"
-            style={{backgroundImage:`url(assets/original/card-${this.props.type}.png)`}}>
+            style={{backgroundImage:`url(assets/gfx/card-${this.props.type}.png)`}}>
           </div>
         )) }
       </div>
+      }
+      </>
     );
   }
 };
@@ -217,13 +232,24 @@ class Resource extends React.Component {
 class Board extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      total: 0,
+      wood: 0,
+      sheep: 0,
+      brick: 0,
+      stone: 0,
+      wheat: 0
+    };
     this.componentDidMount = this.componentDidMount.bind(this);
     this.updateDimensions = this.updateDimensions.bind(this);
     this.drawFrame = this.drawFrame.bind(this);
     this.drawBorders = this.drawBorders.bind(this);
     this.drawPips = this.drawPips.bind(this);
+    this.drawDie = this.drawDie.bind(this);
+    this.keyUp = this.keyUp.bind(this);
     this.mouseMove = this.mouseMove.bind(this);
     this.randomize = this.randomize.bind(this);
+    this.throwDice = this.throwDice.bind(this);
 
     this.mouse = { x: 0, y: 0 };
     this.radius = 0.317;
@@ -271,6 +297,64 @@ class Board extends React.Component {
     window.requestAnimationFrame(this.drawFrame);
   }
 
+  keyUp(event) {
+    if (event.keyCode == 78) { /* n */
+      this.randomize();
+      return;
+    }
+
+    if (event.keyCode == 32) { /* space */
+      this.throwDice();
+      return;
+    }
+  }
+
+  throwDice() {
+    for (let i = 0; i < 2; i++) {
+      dice[i] = {
+        pips: Math.ceil(Math.random() * 6),
+        angle: Math.random() * Math.PI * 2,
+        jitter: (Math.random() - 0.5) * diceSize * 0.125
+      }
+    }
+    window.requestAnimationFrame(this.drawFrame);
+
+    const sum = dice[0].pips + dice[1].pips;
+    if (sum == 7) { /* Robber! */
+      if (this.state.total > 7) {
+        let half = Math.ceil(this.state.total * 0.5);
+        this.state.total -= half;
+        while (half) {
+          switch (Math.floor(Math.random() * 5)) {
+          case 0: if (this.state.wood) { this.state.wood--; half--; } break;
+          case 1: if (this.state.sheep) { this.state.sheep--; half--; } break;
+          case 2: if (this.state.stone) { this.state.stone--; half--; } break;
+          case 3: if (this.state.brick) { this.state.brick--; half--; } break;
+          case 4: if (this.state.wheat) { this.state.wheat--; half--; } break;
+          }
+        }
+      }
+    } else {
+      this.tiles.forEach((tile) => {
+        if (tile.pip.roll != sum) {
+          return;
+        }
+        this.state[tile.type]++;
+        this.state.total++;
+      });
+    }
+
+    this.setState({
+      total: this.state.total,
+      wood: this.state.wood,
+      sheep: this.state.sheep,
+      stone: this.state.stone,
+      brick: this.state.brick,
+      wheat: this.state.wheat
+    });
+  }
+
+
   mouseMove(event) {
     const rect = this.canvas.parentElement.getBoundingClientRect();
     let x, y;
@@ -371,6 +455,9 @@ class Board extends React.Component {
      * 
      * If the view is wider than taller, then 
      */
+    const tableLeft = 32 * this.table.width / 1080,
+      tableRight = 1010 * this.table.width / 1080,
+      tableLeaf = 978 * this.table.width / 1080;
 
     /* If view is taller than wide, tile the table vertically */
     ctx.save();
@@ -399,17 +486,17 @@ class Board extends React.Component {
       const tableWidth = this.canvas.height * this.table.width / this.table.height;
       ctx.drawImage(this.table,
         0, 0,
-        1010, this.table.height,
+        tableRight, this.table.height,
         0, 0, 
-        this.canvas.height * 1010 / this.table.height, this.canvas.height);
+        this.canvas.height * tableRight / this.table.height, this.canvas.height);
-      let left = this.canvas.height * 1010 / this.table.height;
+      let left = this.canvas.height * tableRight / this.table.height;
       while (left < this.canvas.width) {
         ctx.drawImage(this.table,
-          32, 0,
+          tableLeft, 0,
-          978, this.table.height,
+          tableLeaf, this.table.height,
           left, 0, 
-          this.canvas.height * 978 / this.table.height, this.canvas.height);
+          this.canvas.height * tableLeaf / this.table.height, this.canvas.height);
-        left += this.canvas.height * 978 / this.table.height;
+        left += this.canvas.height * tableLeaf / this.table.height;
       }
     }
     ctx.restore();
@@ -491,6 +578,101 @@ class Board extends React.Component {
       ctx.fill();
     }
 
+    ctx.save();
+    {
+      ctx.translate(tileWidth * -2.5, -tileWidth * 2);
+      ctx.rotate(Math.PI * -0.25)
+      
+      if (dice[0].pips) {
+        ctx.translate(-0.5 * (diceSize + diceMargin), 0);
+        this.drawDie(ctx, dice[0]);
+      }
+
+      if (dice[1].pips) {
+        ctx.translate(diceSize + diceMargin, 0);
+        this.drawDie(ctx, dice[1]);
+      }
+    }
+    ctx.restore();
+
+    ctx.restore();
+  }
+
+  drawDie(ctx, die) {
+    const radius = diceSize * 0.125,
+      offset = diceSize * 0.5 - radius,
+      pips = die.pips;
+
+    ctx.save();
+    ctx.rotate(die.angle);
+    ctx.translate(die.jitter, 0);
+  
+    ctx.strokeStyle = "#666";
+    ctx.fillStyle = "#444";
+
+    ctx.beginPath();
+    ctx.arc(-offset, -offset, radius, Math.PI, Math.PI * 1.5);
+    ctx.arc(+offset, -offset, radius, Math.PI * 1.5, 0);
+    ctx.arc(+offset, +offset, radius, 0, Math.PI * 0.5);
+    ctx.arc(-offset, +offset, radius, Math.PI * 0.5, Math.PI);
+    ctx.closePath();
+    ctx.fill();
+    ctx.stroke();
+
+    ctx.strokeStyle = "#bbb";
+    ctx.fillStyle = "#ddd";
+    /* center pip */
+    if (pips == 1 || pips == 3 || pips == 5) {
+      ctx.beginPath();
+      ctx.arc(0, 0, diceSize * 0.0625, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.stroke();
+    }
+
+    /* upper left pip */
+    if (pips == 2 || pips == 3 || pips == 4 || pips == 5 || pips == 6) {
+      ctx.beginPath();
+      ctx.arc(-diceSize * 0.250, -diceSize * 0.250, diceSize * 0.0625, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.stroke();
+    }
+
+    /* upper right pip */
+    if (pips == 4 || pips == 5 || pips == 6) {
+      ctx.beginPath();
+      ctx.arc(+diceSize * 0.250, -diceSize * 0.250, diceSize * 0.0625, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.stroke();
+    }
+
+    /* lower right pip */
+    if (pips == 2 || pips == 3 || pips == 4 || pips == 5 || pips == 6) {
+      ctx.beginPath();
+      ctx.arc(+diceSize * 0.250, +diceSize * 0.250, diceSize * 0.0625, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.stroke();
+    }
+
+    /* lower left pip */
+    if (pips == 4 || pips == 5 || pips == 6) {
+      ctx.beginPath();
+      ctx.arc(-diceSize * 0.250, +diceSize * 0.250, diceSize * 0.0625, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.stroke();
+    }
+
+    /* middle left and right pip */
+    if (pips == 6) {
+      ctx.beginPath();
+      ctx.arc(-diceSize * 0.250, 0, diceSize * 0.0625, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.arc(+diceSize * 0.250, 0, diceSize * 0.0625, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.stroke();
+    }
+
     ctx.restore();
   }
 
@@ -533,7 +715,7 @@ class Board extends React.Component {
 
     let angle,
       radius = this.radius,
-      index = 1, pip;
+      index = 1, pip, roll = dice[0].pips + dice[1].pips;
 
     /* Outer row */
     angle = 0;
@@ -544,8 +726,15 @@ class Board extends React.Component {
       } else {
         pip = this.pips.pips[index++];
       }
+      this.tiles[i].pip = pip;
       drawTile(this.tiles[i], angle, radius - (i % 2) * 0.04);
+      if (roll == pip.roll) {
+        ctx.scale(1.25, 1.25);
+      }
       drawPip(pip, angle, radius - (i % 2) * 0.04, this.tiles[i].jitter);
+      if (roll == pip.roll) {
+        ctx.scale(0.8, 0.8);
+      }
     }
 
     /* Middle row */
@@ -558,8 +747,15 @@ class Board extends React.Component {
       } else {
         pip = this.pips.pips[index++];
       }
+      this.tiles[i].pip = pip;
       drawTile(this.tiles[i], angle, radius);
+      if (roll == pip.roll) {
+        ctx.scale(1.25, 1.25);
+      }
       drawPip(pip, angle, radius, this.tiles[i].jitter);
+      if (roll == pip.roll) {
+        ctx.scale(0.8, 0.8);
+      }
     }
 
     /* Center */
@@ -569,8 +765,15 @@ class Board extends React.Component {
     } else {
       pip = this.pips.pips[index++];
     }
+    this.tiles[i].pip = pip;
     drawTile(this.tiles[i], 0, 0);
+    if (roll == pip.roll) {
+      ctx.scale(1.25, 1.25);
+    }
     drawPip(pip, 0, 0, this.tiles[i].jitter);
+    if (roll == pip.roll) {
+      ctx.scale(0.8, 0.8);
+    }
   }
 
   drawBorders(ctx) {
@@ -594,7 +797,7 @@ class Board extends React.Component {
   componentDidMount() {
     this.start = new Date();
 
-    window.addEventListener("mousedown", this.randomize);
+    document.addEventListener("keyup", this.keyUp);
     window.addEventListener("touchmove", this.mouseMove);
     window.addEventListener("mousemove", this.mouseMove);
     window.addEventListener("resize", this.updateDimensions);
@@ -607,7 +810,7 @@ class Board extends React.Component {
       clearTimeout(this.updateSizeTimer);
       this.updateSizeTimer = 0;
     }
-    window.removeEventListener("mousedown", this.randomize);
+    document.removeEventListener("keyup", this.keyUp);
     window.removeEventListener("mousemove", this.mouseMove);
     window.removeEventListener("touchmove", this.mouseMove);
     window.removeEventListener("resize", this.updateDimensions);
@@ -620,11 +823,11 @@ class Board extends React.Component {
         <div className="Cards">
           <div>In hand</div>
           <div className="Hand">
-            <Resource type="wood" count="0"/>
+            <Resource type="wood" count={this.state.wood}/>
-            <Resource type="wheat" count="3"/>
+            <Resource type="wheat" count={this.state.wheat}/>
-            <Resource type="stone" count="8"/>
+            <Resource type="stone" count={this.state.stone}/>
-            <Resource type="brick" count="2"/>
+            <Resource type="brick" count={this.state.brick}/>
-            <Resource type="sheep" count="5"/>
+            <Resource type="sheep" count={this.state.sheep}/>
           </div>
           <div>Available to play</div>
           <div className="Hand">
@@ -651,7 +854,7 @@ class Board extends React.Component {
             <div>Stats</div>
             <div>
               <div>Points: 7</div>
-              <div>Cards: 8</div>
+              <div>Cards: {this.state.total} </div>
               <div>Roads remaining: 4</div>
               <div>Longest road: 7</div>
               <div>Cities remaining: 4</div>