var canvas = document.getElementById("game-canvas");
var context = canvas.getContext("2d");
+var backgroundColor = '#F5DEB3';
+var gridColor = '#8B4513';
var boardSize = 19;
+
var border = canvas.width / 10;
var boardWidth = canvas.width - (border * 2);
var boardHeight = canvas.height - (border * 2);
var lastX;
var lastY;
-drawGrid();
+/* state of pieces
+ 0: empty
+ 1: white
+ 2: black
+*/
+var session = 0;
+var playerStone;
+
+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 = window.location.port;
+ const socketUrl = `${socketProtocol}//${window.location.hostname}:${port}/ws/`
+
+ // Define socket
+ socket = new WebSocket(socketUrl);
+
+ socket.onopen = (e) => {
+ // 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;
+ });
+ drawGrid();
+ break;
+ case "new":
+ for (var i = 0; i < boardSize; i++) {
+ for (var j = 0; j < boardSize; j++) {
+ state[i][j] = 0;
+ }
+ }
+ drawGrid();
+ 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
+}
+
+// finish grid
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;
-
- 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";
-
- 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)
{
- if (lastX && lastY) {
- placeStone((lastX * cellWidth) + border, (lastY * cellWidth) + border, 'rgba(0, 0, 0, 1)');
+ try {
+ // push state change to backend
+ if(isOpen(socket)) {
+ socket.send(JSON.stringify({
+ "type":"move",
+ "data": {
+ "session":session,
+ "x":lastX,
+ "y":lastY,
+ "state":state[lastX][lastY] > 0 ? 0 : playerStone
+ }
+ }));
+ } else {
+ console.log("Websocket is closed");
+ }
+ } catch(e) {
+ console.log(e);
}
});
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)
{
- 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)
{
- 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
+document.getElementById("new").onclick = function () {
+ // new game, new session, etc
+ socket.send(JSON.stringify({
+ "type":"new",
+ "data": {
+ "session":session
+ }
+ }));
+};
+
+const stones = document.getElementById("stones");
+playerStone = stones.selectedIndex;
+stones.onchange = function () {
+ // let player pick stone type
+ playerStone = stones.selectedIndex;
+ console.log(`Player changed stone to ${playerStone}`);
+};
+
+connect();
projects / go.git / blobdiff