From 021cffe6c7771d0b5d7286c330c3642422eb050b Mon Sep 17 00:00:00 2001
From: Clifton Palmer <clifton.james.palmer@protonmail.com>
Date: Sun, 12 Sep 2021 13:00:39 -0500
Subject: [PATCH 1/1] Initial commit

---
 docker-compose.yml |   8 ++++
 htdocs/go.js       | 117 +++++++++++++++++++++++++++++++++++++++++++++
 htdocs/index.html  |   4 ++
 readme.txt         |   1 +
 4 files changed, 130 insertions(+)
 create mode 100644 docker-compose.yml
 create mode 100644 htdocs/go.js
 create mode 100644 htdocs/index.html
 create mode 100644 readme.txt

diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
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
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
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
index 0000000..68e4045
--- /dev/null
+++ b/readme.txt
@@ -0,0 +1 @@
+JavaScript implementation of Go to play with friends online
-- 
2.47.2