Initial commit

diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644 (file)
index 0000000..6c7bfd6
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,8 @@
+version: '3'
+services:
+    httpd:
+        image: httpd:2.4
+        volumes:
+        - ./htdocs:/usr/local/apache2/htdocs
+        ports:
+        - 8100:80

diff --git a/htdocs/go.js b/htdocs/go.js
new file mode 100644 (file)
index 0000000..6c69223
--- /dev/null
+++ b/htdocs/go.js
@@ -0,0 +1,117 @@
+var canvas = document.getElementById("game-canvas");
+var context = canvas.getContext("2d");
+
+var boardSize = 19;
+var border = canvas.width / 10;
+var boardWidth = canvas.width - (border * 2);
+var boardHeight = canvas.height - (border * 2);
+
+var cellWidth = boardWidth / (boardSize - 1);
+var cellHeight = boardHeight / (boardSize - 1);
+
+var lastX;
+var lastY;
+
+drawGrid();
+
+function drawGrid()
+{      
+       var backgroundColor = '#F5DEB3';
+       var gridColor = '#8B4513';
+       
+       context.fillStyle = backgroundColor;
+       context.fillRect(0, 0, canvas.width, canvas.height);
+       
+    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';
+    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));
+       }
+}
+
+canvas.addEventListener('mousedown', function(evt) 
+{
+    if (lastX && lastY) {
+        placeStone((lastX * cellWidth) + border, (lastY * cellWidth) + border, 'rgba(0, 0, 0, 1)');
+    }
+});
+
+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;             
+});
+
+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;
+}
+
+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
+       };
+}

diff --git a/htdocs/index.html b/htdocs/index.html
new file mode 100644 (file)
index 0000000..8c25bb1
--- /dev/null
+++ b/htdocs/index.html
@@ -0,0 +1,4 @@
+<center>
+<canvas id = "game-canvas" width="600" height="600"></canvas>
+</center>
+<script src="go.js"></script>

diff --git a/readme.txt b/readme.txt
new file mode 100644 (file)
index 0000000..68e4045
--- /dev/null
+++ b/readme.txt
@@ -0,0 +1 @@
+JavaScript implementation of Go to play with friends online