Added board state background (#1)

[go.git] / htdocs / go.js

diff --git a/htdocs/go.js b/htdocs/go.js
index 6c69223e42dbb53f98674430dbc42d667c16c268..d02e55d25f9a007b213f2eeb534f1dc9845bb232 100644 (file)
--- a/htdocs/go.js
+++ b/htdocs/go.js
@@ -1,7 +1,10 @@
 var canvas = document.getElementById("game-canvas");
 var context = canvas.getContext("2d");
 
 var canvas = document.getElementById("game-canvas");
 var context = canvas.getContext("2d");
 

+var backgroundColor = '#F5DEB3';
+var gridColor = '#8B4513';

 var boardSize = 19;
 var boardSize = 19;

+

 var border = canvas.width / 10;
 var boardWidth = canvas.width - (border * 2);
 var boardHeight = canvas.height - (border * 2);
 var border = canvas.width / 10;
 var boardWidth = canvas.width - (border * 2);
 var boardHeight = canvas.height - (border * 2);


@@ -11,107 +14,292 @@ var cellHeight = boardHeight / (boardSize - 1);
 
 var lastX;
 var lastY;
 
 var lastX;
 var lastY;

+var playCount = 0;
+
+/* state of pieces 
+    0: empty
+    1: white
+    2: black
+*/
+function getStone(i) {
+    switch (i) {
+        case 1:
+            return 'white';
+        case 2:
+            return 'black';
+        default:
+            return 'empty';
+    }
+}
+
+var session = 0;
+var state = [];
+for (var i = 0; i < boardSize; i++)
+{
+    state[i] = [];
+    for (var j = 0; j < boardSize; j++)
+    {
+        state[i][j] = 0;
+    }
+}
+
+// @connect
+// Connect to the websocket
+var socket;
+const connect = function() {
+    return new Promise((resolve, reject) => {
+        const socketProtocol = (window.location.protocol === 'https:' ? 'wss:' : 'ws:')
+        const port = 3000;
+        const socketUrl = `${socketProtocol}//${window.location.hostname}:${port}/ws/`
+
+        // Define socket
+        socket = new WebSocket(socketUrl);
+
+        socket.onopen = (e) => {
+            // Send a little test data, which we can use on the server if we want
+            // Resolve the promise - we are connected
+            resolve();
+        }
+
+        socket.onmessage = (msg) => {
+            // Any data from the server can be manipulated here.
+            let parsed = JSON.parse(msg.data);
+            switch (parsed.type) {
+                case "board":
+                    console.log("Setting board state");
+                    parsed.data.forEach( function (move, index) {
+                        state[move.x][move.y] =
+                            move.state === 'white' ? 1 :
+                            move.state === 'black' ? 2 :
+                            0;
+                    });
+                    drawGrid();
+                    break;
+                default:
+                    console.log(msg);
+            }
+        }
+
+        socket.onerror = (e) => {
+            // Return an error if any occurs
+            console.log(e);
+            resolve();
+            // Try to connect again
+            connect();
+        }
+    });
+}
+
+// @isOpen
+// check if a websocket is open
+const isOpen = function(ws) {
+    console.log(ws.readyState);
+    return ws.readyState === ws.OPEN
+}

 
 

-drawGrid();

 
 

+// finish grid

 function drawGrid()
 function drawGrid()

-{      
-       var backgroundColor = '#F5DEB3';
-       var gridColor = '#8B4513';
-       
-       context.fillStyle = backgroundColor;
-       context.fillRect(0, 0, canvas.width, canvas.height);
-       
+{    
+    
+    /* draw board square */
+    context.fillStyle = backgroundColor;
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    
+    /* draw board grid */

     context.fillStyle = gridColor;
     context.fillStyle = gridColor;

-
-       for (var i = 0; i < boardSize - 1; i++)
-       {
-               for (var j = 0; j < boardSize - 1; j++)
-               {
-                       context.fillRect(i * cellWidth + border, j * cellHeight + border, cellWidth - 1, cellHeight - 1);
-               }
-       }
-       
-       var quater = Math.floor((boardSize - 1) / 4);
-       var markerSize = 8;
-       var markerMargin = (markerSize / 2) + 0.5;
-       
-       context.fillStyle = backgroundColor;
-       
-       if (!!(boardSize % 2))
-       {
-               context.fillRect((((boardSize - 1) / 2) * cellWidth) + border - markerMargin, (((boardSize - 1) / 2) * cellWidth) + border - markerMargin, markerSize, markerSize);
-       }
-       
-       context.fillRect((quater * cellWidth) + border - markerMargin, (quater * cellWidth) + border - markerMargin, markerSize, markerSize);
-       context.fillRect((((boardSize - 1) - quater) * cellWidth) + border - markerMargin, (quater * cellWidth) + border - markerMargin, markerSize, markerSize);
-       
-       context.fillRect((((boardSize - 1) - quater) * cellWidth) + border - markerMargin, (((boardSize - 1) - quater) * cellWidth) + border - markerMargin, markerSize, markerSize);
-       context.fillRect((quater * cellWidth) + border - markerMargin, (((boardSize - 1) - quater) * cellWidth) + border - markerMargin, markerSize, markerSize);
-       
-       var size = canvas.width / 40;
-       var textSpacing = 10;
-       context.fillStyle = '#000000';
+    for (var i = 0; i < boardSize - 1; i++)
+    {
+        for (var j = 0; j < boardSize - 1; j++)
+        {
+            context.fillRect(
+                i * cellWidth + border, 
+                j * cellHeight + border, 
+                cellWidth - 1, 
+                cellHeight - 1
+            );
+        }
+    }
+    
+    /* draw quarter marks and center mark on grid */
+    var quarter = Math.floor((boardSize - 1) / 4);
+    var markerSize = 8;
+    var markerMargin = (markerSize / 2) + 0.5;
+    
+    context.fillStyle = backgroundColor;
+    if (!!(boardSize % 2))
+    {
+        context.fillRect(
+            (((boardSize - 1) / 2) * cellWidth) + border - markerMargin, 
+            (((boardSize - 1) / 2) * cellWidth) + border - markerMargin,
+            markerSize, 
+            markerSize
+        );
+    }
+    context.fillRect(
+        (quarter * cellWidth) + border - markerMargin, 
+        (quarter * cellWidth) + border - markerMargin, 
+        markerSize, 
+        markerSize
+    );
+    context.fillRect(
+        (((boardSize - 1) - quarter) * cellWidth) + border - markerMargin, 
+        (quarter * cellWidth) + border - markerMargin, 
+        markerSize, 
+        markerSize
+    );
+    context.fillRect(
+        (((boardSize - 1) - quarter) * cellWidth) + border - markerMargin, 
+        (((boardSize - 1) - quarter) * cellWidth) + border - markerMargin, 
+        markerSize, 
+        markerSize
+    );
+    context.fillRect(
+        (quarter * cellWidth) + border - markerMargin,
+        (((boardSize - 1) - quarter) * cellWidth) + border - markerMargin,
+        markerSize, 
+        markerSize
+    );
+    
+    /* draw text labels for grid */
+    var size = canvas.width / 40;
+    var textSpacing = 10;
+    context.fillStyle = '#000000';

     context.font = size + "px Arial";
     context.font = size + "px Arial";

-       
-       for (i = 0; i < boardSize; i++)
-       {
-               context.fillText((i + 1), textSpacing, ((canvas.height - border) - (i * cellHeight)) + (size / 3));
-               context.fillText((i + 1), canvas.width - (size + textSpacing), ((canvas.height - border) - (i * cellHeight)) + (size / 3));     
-
-               context.fillText((String.fromCharCode(97 + i)), (border + (i * cellHeight) + (size / 3)) - (size / 1.5), textSpacing + size);           
-               context.fillText((String.fromCharCode(97 + i)), (border + (i * cellHeight) + (size / 3)) - (size / 1.5), canvas.height - (textSpacing * 2));
-       }
+    
+    for (i = 0; i < boardSize; i++)
+    {
+        context.fillText(
+            (i + 1), textSpacing, 
+            ((canvas.height - border) - (i * cellHeight)) + (size / 3)
+        );
+        context.fillText(
+            (i + 1), canvas.width - (size + textSpacing), 
+            ((canvas.height - border) - (i * cellHeight)) + (size / 3)
+        );
+
+        context.fillText(
+            (String.fromCharCode(97 + i)),
+            (border + (i * cellHeight) + (size / 3)) - (size / 1.5), 
+            textSpacing + size
+        );
+        context.fillText(
+            (String.fromCharCode(97 + i)), 
+            (border + (i * cellHeight) + (size / 3)) - (size / 1.5), 
+            canvas.height - (textSpacing * 2)
+        );
+    }
+
+    drawPieces();
+}
+
+function drawPieces() {
+    /* draw pieces */
+    for (var i = 0; i < boardSize; i++)
+    {
+        for (var j = 0; j < boardSize; j++)
+        {
+            switch(state[i][j]) {
+                case 1:
+                    placeStone(
+                        (i * cellWidth) + border, 
+                        (j * cellWidth) + border, 
+                        'rgba(255, 255, 255, 1)'
+                    );
+                    break;
+                case 2:
+                    placeStone(
+                        (i * cellWidth) + border, 
+                        (j * cellWidth) + border, 
+                        'rgba(0, 0, 0, 1)'
+                    );
+                    break;
+                default:
+            }
+        }
+    }

 }
 
 canvas.addEventListener('mousedown', function(evt) 
 {
 }
 
 canvas.addEventListener('mousedown', function(evt) 
 {

-    if (lastX && lastY) {
-        placeStone((lastX * cellWidth) + border, (lastY * cellWidth) + border, 'rgba(0, 0, 0, 1)');
+    try {
+        // push state change to backend
+        if(isOpen(socket)) {
+            var stone;
+            if (state[lastX][lastY] === 0) {
+                stone = playCount++ % 2 + 1;
+            } else {
+                stone = 0;
+            }
+            socket.send(JSON.stringify({
+                "type":"move",
+                "data": {
+                    "session":session,
+                    "x":lastX,
+                    "y":lastY,
+                    "state":getStone(stone)
+                }
+            }));
+        } else {
+            console.log("Websocket is closed");
+        }
+    } catch(e) {
+        console.log(e);

     }
 });
 
 canvas.addEventListener('mousemove', function(evt) 
 {
     }
 });
 
 canvas.addEventListener('mousemove', function(evt) 
 {

-       var position = getGridPoint(evt);
-       
-       if ((position.x != lastX) || (position.y != lastY))
-       {
-               drawGrid();
-
-               if (((position.x >=0) && (position.x < boardSize)) && ((position.y >=0) && (position.y < boardSize)))
-               {
-                                       placeStone((position.x * cellWidth) + border, (position.y * cellWidth) + border, 'rgba(0, 0, 0, 0.2)');                                 
-               }
-       }
-       
-       lastX = position.x;
-       lastY = position.y;             
+    var position = getGridPoint(evt);
+
+    if ((position.x != lastX) || (position.y != lastY))
+    {
+        drawGrid();
+        if (
+            ((position.x >=0) && (position.x < boardSize)) && 
+            ((position.y >=0) && (position.y < boardSize))
+        ) {
+            placeStone(
+                (position.x * cellWidth) + border, 
+                (position.y * cellWidth) + border, 
+                'rgba(0, 0, 0, 0.2)'
+            );
+        }
+    }
+    lastX = position.x;
+    lastY = position.y;        

 });
 
 function placeStone(x, y, color)
 {
 });
 
 function placeStone(x, y, color)
 {

-       var radius = cellWidth / 2;
-       
-       context.beginPath();
-       context.arc(x, y, radius, 0, 2 * Math.PI, false);
-       context.fillStyle = color;      
-       context.fill();
-       context.lineWidth = 5;
+    var radius = cellWidth / 2;
+    
+    context.beginPath();
+    context.arc(x, y, radius, 0, 2 * Math.PI, false);
+    context.fillStyle = color;    
+    context.fill();
+    context.lineWidth = 5;

 }
 
 function getGridPoint(evt)
 {
 }
 
 function getGridPoint(evt)
 {

-       var rect = canvas.getBoundingClientRect();
-               
-       var x = Math.round((evt.clientX-border-rect.left)/(rect.right-2*border-rect.left)* boardWidth);
-       var y = Math.round((evt.clientY-border-rect.top)/(rect.bottom-2*border-rect.top)* boardHeight);
-       
-       var roundX = Math.round(x / cellWidth);
-       var roundY = Math.round(y / cellHeight);
-       
-       return {
-         x: roundX,
-         y: roundY
-       };
+    var rect = canvas.getBoundingClientRect();
+        
+    var x = Math.round(
+        (evt.clientX-border-rect.left) / (rect.right-2*border-rect.left) * boardWidth
+    );
+    var y = Math.round(
+        (evt.clientY-border-rect.top) / (rect.bottom-2*border-rect.top) * boardHeight
+    );
+    
+    var roundX = Math.round(x / cellWidth);
+    var roundY = Math.round(y / cellHeight);
+    
+    return {
+        x: roundX,
+        y: roundY
+    };

 }
 }

+
+// finish
+connect();