Creating the MancalaGame class. Adding Player indication. fixing home…

… to be not clickable
slior · Sep 9, 2020 · 6835c79 · 6835c79
1 parent 25763d3
commit 6835c79
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 37 deletions.
diff --git a/mancala/dist/index.html b/mancala/dist/index.html
@@ -27,13 +27,18 @@
 
         function $(id) { return document.getElementById(id); }
 
-        var cnvs = null; 
+        var game = null;
 
         function setup()
         {
-          //cnvs = main.initCanvas('cnvsMain')
-          main.initGame('cnvsMain');
+          game = new main.MancalaGame('cnvsMain',updateCurrentGame);
         }
+
+        function updateCurrentGame(player)
+        {
+          $('spnPlayer').innerText = player.toString();
+        }
+
       </script>
   </head>
   <body onload="setup();">
@@ -42,6 +47,10 @@
       <canvas id="cnvsMain" width="850" height="500">
 
       </canvas>
+      <div>
+        Player: <span id="spnPlayer"></span>
+      </div>
     </div>
+
   </body>
 </html>
diff --git a/mancala/src/drawing.js b/mancala/src/drawing.js
@@ -85,7 +85,7 @@ function drawBoard(cnvs,cellCount)
 
 
 
-function drawBoardState(cnvs,board,boardClickHandler)
+function drawBoardState(cnvs,board,controller)
 {
   dbg("--- drawing board state --- ")
   let FONT_SIZE = 20;
@@ -94,10 +94,10 @@ function drawBoardState(cnvs,board,boardClickHandler)
     let stonesInCell = board.stonesIn(boardCell);
     switch (true)
     {
-      case board.isPlayer1Home(boardCell) : drawOrRemove(boardCell,stonesInCell,(_,stoneCount) => { drawPlayer1Home(stoneCount); }); break;
-      case board.isPlayer2Home(boardCell) : drawOrRemove(boardCell,stonesInCell,(_,stoneCount) => { drawPlayer2Home(stoneCount); }); break;
+      case board.isPlayer1Home(boardCell) : drawOrRemove(boardCell,stonesInCell,(_,stoneCount) => { drawPlayer1Home(stoneCount); },false); break;
+      case board.isPlayer2Home(boardCell) : drawOrRemove(boardCell,stonesInCell,(_,stoneCount) => { drawPlayer2Home(stoneCount); },false); break;
       case board.isPlayer1Cell(boardCell) || board.isPlayer2Cell(boardCell): 
-        drawOrRemove(boardCell,stonesInCell,(bc,stoneCount) => { drawCell(bc,stoneCount); }); 
+        drawOrRemove(boardCell,stonesInCell,(bc,stoneCount) => { drawCell(bc,stoneCount); },true);
         break;
       default : ERR ("Invalid board cell when drawing state: " + boardCell); break;
     }
@@ -107,16 +107,18 @@ function drawBoardState(cnvs,board,boardClickHandler)
   {
     rememberUIObj(board.player1Home(),
                   drawStones(stoneCount,
-                              TOP_LEFT.x + CELL_SIZE / 2 - FONT_SIZE/2-MARGIN,
-                              TOP_LEFT.y + CELL_SIZE * 1.5 - FONT_SIZE/2-MARGIN));
+                      /* left = */ TOP_LEFT.x + CELL_SIZE / 2 - FONT_SIZE/2-MARGIN,
+                      /* top = */  TOP_LEFT.y + CELL_SIZE * 1.5 - FONT_SIZE/2-MARGIN,
+                      /* clickable = */ false));
   }
 
   function drawPlayer2Home(stoneCount)
   {
     rememberUIObj(board.player2Home(), 
                   drawStones(stoneCount,
                     /* left = */TOP_LEFT.x + boardWidthInCells(board.totalCellCount()) * CELL_SIZE - CELL_SIZE/2 - FONT_SIZE/2-MARGIN, 
-                    /* top = */TOP_LEFT.y + CELL_SIZE*1.5-FONT_SIZE/2-MARGIN));
+                    /* top = */TOP_LEFT.y + CELL_SIZE*1.5-FONT_SIZE/2-MARGIN,
+                    /* clickable = */ false));
 
   }
 
@@ -136,16 +138,16 @@ function drawBoardState(cnvs,board,boardClickHandler)
         break;
       default : ERR("Invalid board cell: must be either player 1 or player 2 cell");
     }
-    rememberUIObj(boardCell,drawStones(stoneCount,TOP_LEFT.x + left,TOP_LEFT.y + top));
+    rememberUIObj(boardCell,drawStones(stoneCount,TOP_LEFT.x + left,TOP_LEFT.y + top,true));
   }
 
-  function drawOrRemove(boardCell,stoneCount,drawFunc)
+  function drawOrRemove(boardCell,stoneCount,drawFunc,drawClickable)
   {
     if (stoneCount > 0)
     { 
       removeDrawingAt(boardCell);
-      drawFunc(boardCell,stoneCount);
-      uiObjAt(boardCell).ifPresent(uiObj => {uiObj.on('mousedown', _ => { boardClickHandler(boardCell); })})
+      drawFunc(boardCell,stoneCount,drawClickable);
+      if (drawClickable) uiObjAt(boardCell).ifPresent(uiObj => {uiObj.on('mousedown', _ => { controller.handleCellClick(boardCell); })})
 
     }
     else removeDrawingAt(boardCell);
@@ -159,11 +161,11 @@ function drawBoardState(cnvs,board,boardClickHandler)
     });
   }
 
-  function drawStones(stoneCount,left,top)
+  function drawStones(stoneCount,left,top,isClickable)
   {
     let c = new fabric.Circle({originX : 'center',originY : 'center', radius : FONT_SIZE/2+MARGIN, fill : 'white',stroke : 'blue'})
     let t = new fabric.Text(stoneCount+'',{fontSize : FONT_SIZE, originX : 'center',originY : 'center', selectable : false});
-    let g = new fabric.Group([c,t], {left : left, top : top, selectable : false,hoverCursor : 'pointer'});
+    let g = new fabric.Group([c,t], {left : left, top : top, selectable : false,hoverCursor : isClickable ? 'pointer' : 'default'});
     cnvs.add(g);
     return g;
   }

diff --git a/mancala/src/game.js b/mancala/src/game.js
@@ -2,32 +2,56 @@
 
 const {initCanvas,drawBoard,drawBoardState,initDrawingElements} = require("./drawing.js")
 const {Board} = require("./board.js")
-const {dbg, None,maybe} = require("./util.js")
+const {maybe,requires} = require("./util.js")
 
 const CELL_COUNT = 14;
 
-let board = new Board(CELL_COUNT)
-var canvas = None;
-
-function initGame(cnvsELID)
+const PLAYER = { 
+  one : {
+    toString : () => "ONE"
+    , theOtherOne : () => PLAYER.two
+  }
+  , two : {
+    toString : () => "TWO"
+    , theOtherOne : () => PLAYER.one
+  } }
+
+class MancalaGame
 {
-  canvas = maybe(initCanvas(cnvsELID));
-  canvas.ifPresent(cnvs => {
-    initDrawingElements(board.totalCellCount());
-    drawBoard(cnvs,CELL_COUNT);
-    drawBoardState(cnvs,board,boardClickHandler);
-  })
-}
-
-function boardClickHandler(boardCell)
-{
-  board.playCell(boardCell);
-  canvas.ifPresent(cnvs => {
-    drawBoardState(cnvs,board,boardClickHandler)
-  })
-
+  constructor(cnvsELID,_updatePlayerCallback)
+  {
+    requires(_updatePlayerCallback != null,"Must have a player update callback")
+
+    this.board = new Board(CELL_COUNT);
+    this.player = PLAYER.one;
+    this.updatePlayerCallback = _updatePlayerCallback;
+    this.updatePlayerCallback(this.player);
+
+    this.canvas = maybe(initCanvas(cnvsELID));
+    this.canvas.ifPresent(cnvs => {
+      initDrawingElements(this.board.totalCellCount());
+      drawBoard(cnvs,CELL_COUNT);
+      drawBoardState(cnvs,this.board,this);
+    })
+  }
+
+  handleCellClick(boardCell)
+  {
+    this.board.playCell(boardCell);
+    this.updatePlayerCallback(this.togglePlayer());
+
+    this.canvas.ifPresent(cnvs => {
+      drawBoardState(cnvs,this.board,this)
+    })
+  }
+
+  togglePlayer()
+  {
+    this.player = this.player.theOtherOne();
+    return this.player;
+  }
 }
 
 module.exports = {
-  initGame : initGame
+  MancalaGame
 }
diff --git a/mancala/src/util.js b/mancala/src/util.js
@@ -11,6 +11,18 @@ function ERR(msg) { throw new Error(msg); }
 
 function dbg(msg) { console.log(msg || 'MISSING DBG MSG') }
 
+/**
+ * Small syntactic sugar for coding assertions.
+ * 
+ * @param {Boolean} pred The result of evaluating the requirement
+ * @param {String} msg The message to show as part of the error
+ */
+function requires(pred,msg)
+{
+  if (!pred) ERR(msg);
+}
+
+///--- Small Option implementation
 let None = {}
 None.map = f => None;
 None.ifPresent = f => {} //do nothing
@@ -52,5 +64,6 @@ module.exports = {
     , dbg : dbg
     , maybe : maybe
     , None : None
+    , requires : requires
   }