starting mancala game, board drawing

slior · Aug 31, 2020 · 0f71c1e · 0f71c1e
1 parent 44be231
commit 0f71c1e
Show file tree

Hide file tree

Showing 6 changed files with 173 additions and 0 deletions.
diff --git a/mancala/dist/index.html b/mancala/dist/index.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Mancala</title>
+    <style type="text/css">
+      canvas {
+        align : center;
+      }
+
+      textarea {
+        border: 1px solid black;
+      }
+
+      body {
+        font-family : Arial;
+      }
+
+      #gameOverMsg {
+        font-size: xx-large;
+        color: red;
+        border : 2px solid red;
+      }
+
+      </style>
+      <script src="main.js"></script>
+      <script>
+
+        function $(id) { return document.getElementById(id); }
+
+        var cnvs = null; 
+
+        function setup()
+        {
+          //cnvs = main.initCanvas('cnvsMain')
+          main.initGame('cnvsMain');
+        }
+      </script>
+  </head>
+  <body onload="setup();">
+
+    <div width="100%" align="center">
+      <canvas id="cnvsMain" width="850" height="500">
+
+      </canvas>
+    </div>
+  </body>
+</html>
diff --git a/mancala/package.json b/mancala/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "mancala",
+  "version": "1.0.0",
+  "description": "",
+  "private": "true",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "fabric": "^3.6.3"
+  },
+  "devDependencies": {
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12"
+  }
+}
diff --git a/mancala/src/drawing.js b/mancala/src/drawing.js
@@ -0,0 +1,70 @@
+const {fabric} = require("fabric")
+const {range} = require("./util.js")
+
+function initCanvas(canvasEl)
+{
+  let ret = canvasEl && (new fabric.Canvas(canvasEl));
+  if (ret)
+  {
+    ret.line = (x1,y1,x2,y2,c) => drawLineOn(ret,x1,y1,x2,y2,c);
+  }
+  return ret;
+}
+
+function drawLineOn(cnvs,x1,y1,x2,y2,color)
+{
+  let l = new fabric.Line([x1,y1,x2,y2], {
+    stroke: color || 'black',
+    strokeWidth: 1,
+    selectable: false
+  });
+  cnvs.add(l);
+
+}
+
+function drawBoard(cnvs)
+{
+    let CELL_SIZE = 50;
+    let CELL_COUNT = 14;
+
+    let TOP_LEFT = { x : 50, y : 50};
+
+    let playerCellCount = CELL_COUNT/2-1;
+    let boardWidthInCells = playerCellCount+2 //for the side cells (player homes)
+    let boardHeightInCells = 3;
+
+    //frame
+    horizLine(TOP_LEFT.x,TOP_LEFT.y,boardWidthInCells * CELL_SIZE); //top left to top right
+    verticalLine(TOP_LEFT.x,TOP_LEFT.y,CELL_SIZE*boardHeightInCells); //top left to bottom left
+    horizLine(TOP_LEFT.x,TOP_LEFT.y + CELL_SIZE*boardHeightInCells,boardWidthInCells * CELL_SIZE); // bottom left to bottom right
+    verticalLine(TOP_LEFT.x + boardWidthInCells * CELL_SIZE,TOP_LEFT.y,CELL_SIZE * boardHeightInCells); //top right to bottom right
+
+    //home cells
+    verticalLine(TOP_LEFT.x + CELL_SIZE,TOP_LEFT.y,CELL_SIZE*boardHeightInCells)
+    verticalLine(TOP_LEFT.x + CELL_SIZE*(boardWidthInCells-1),TOP_LEFT.y,CELL_SIZE*boardHeightInCells)
+
+    //cell horizontal lines
+    let upperCellY = TOP_LEFT.y + CELL_SIZE;
+    let lowerCellY = TOP_LEFT.y + CELL_SIZE*2;
+    let lineLen = (boardWidthInCells-2)*CELL_SIZE;
+
+    horizLine(TOP_LEFT.x + CELL_SIZE,upperCellY,lineLen)
+    horizLine(TOP_LEFT.x + CELL_SIZE,lowerCellY,lineLen)
+
+    //cell borders
+    range(2,CELL_COUNT/2).map(cellNum => { 
+        verticalLine(TOP_LEFT.x + cellNum*CELL_SIZE,TOP_LEFT.y,CELL_SIZE)
+        verticalLine(TOP_LEFT.x + cellNum*CELL_SIZE,TOP_LEFT.y+CELL_SIZE*(boardHeightInCells-1),CELL_SIZE)
+      } )
+
+    function verticalLine(x,y,len) { cnvs.line(x,y,x,y+len); }
+
+    function horizLine(x,y,len) { cnvs.line(x,y,x+len,y); } 
+
+}
+
+module.exports = {
+    drawLineOn : drawLineOn
+    , drawBoard : drawBoard
+    , initCanvas : initCanvas
+  }
diff --git a/mancala/src/index.js b/mancala/src/index.js
@@ -0,0 +1,14 @@
+
+
+const {initCanvas,drawBoard} = require("./drawing.js")
+
+
+function initGame(cnvsELID)
+{
+
+  drawBoard(initCanvas(cnvsELID));
+}
+
+module.exports = {
+  initGame : initGame
+}
diff --git a/mancala/src/util.js b/mancala/src/util.js
@@ -0,0 +1,11 @@
+
+function range(start,finish) 
+{ // TODO: validate 'target'
+  let ret = [start]
+  for (var i = start+1; i <= finish; i++) ret.push(i)
+  return ret;
+}
+
+module.exports = {
+    range : range
+  }
diff --git a/mancala/webpack.config.js b/mancala/webpack.config.js
@@ -0,0 +1,11 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    filename: 'main.js',
+    path: path.resolve(__dirname, 'dist'),
+    library : 'main',
+    libraryTarget : 'var'
+  },
+};