Add some TODOs, some refactoring, first test for a future hexagonal board with canvas

[vchess.git] / hexaboard_test.html
diff --git a/hexaboard_test.html b/hexaboard_test.html

new file mode 100644 (file)

index 0000000..800e189
--- /dev/null
+++ b/hexaboard_test.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title> Chess Board</title>
+</head>
+
+<body>
+
+<canvas id="myCanvas" width="560" height="560" style="border:2px solid #d3d3d3;">
+Your browser does not support the HTML5 canvas tag.
+TODO: describe chessboard ?
+</canvas>
+
+<script>
+
+// TODO: draw hexagonal board, allow click and drag pieces
+// ==> work with coordinates and current board size as a parameter
+
+var c=document.getElementById("myCanvas");
+var ctx=c.getContext("2d");
+
+for(i=0;i<8;i++)
+{for(j=0;j<8;j++)
+{ctx.moveTo(0,70*j);
+ctx.lineTo(560,70*j);
+ctx.stroke();
+
+ctx.moveTo(70*i,0);
+ctx.lineTo(70*i,560);
+ctx.stroke();
+var left = 0;
+for(var a=0;a<8;a++) {
+    for(var b=0; b<8;b+=2) {
+      startX = b * 70;
+      if(a%2==0) startX = (b+1) * 70;
+      ctx.fillRect(startX + left,(a*70) ,70,70);
+       }}
+}}
+
+var img = new Image();
+img.onload = function() {
+           ctx.drawImage(img, 0, 0, 60, 60);
+}
+img.src = "public/images/pieces/wb.svg";
+
+       
+</script>
+
+</body>
+</html>