Added border on active Tile

elj · elj · commit d7527c009b1d · 2010-11-06T22:01:38.000-07:00
diff --git a/gridmaze-tiles.js b/gridmaze-tiles.js
@@ -447,13 +447,13 @@ function AnimatedRotateRight(ctx) {
 
 function setClickedTileActive(t) {
 
-	//var oldCanvasID = Tiles[activeTileID].getCanvas().id;
-	//document.getElementById(oldCanvasID).style = "border:0px";
+	var oldCanvasID = Tiles[activeTileID].getCanvas().id;
+	document.getElementById(oldCanvasID).style.border = "3px solid white";
 	
 	activeTileID = t;
 	
-	//var newCanvasID = Tiles[activeTileID].getCanvas().id;
-	//document.getElementById(newCanvasID).style = "border:2px solid red";
+	var newCanvasID = Tiles[activeTileID].getCanvas().id;
+	document.getElementById(newCanvasID).style.border = "3px dotted red";
 	
 	
 	print('output', "Clicked Tile = " + t);
diff --git a/gridmaze.css b/gridmaze.css
@@ -1,3 +1,14 @@
 body {	background-color: #FFFFFF;
 		padding: 0; }
+		
+canvas {
+    margin:-2px;
+    padding:0px;
+    border:3px solid white;
+    outline:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+
 		
diff --git a/index.html b/index.html
@@ -6,9 +6,9 @@
     </head>
     <body onload="setMultigridEnvironment()">
     	
-        <canvas id="canvas00" width="201" height="201" margin="0" padding="0" border="0"></canvas>
-        <canvas id="canvas10" width="201" height="201" margin="0" padding="0" border="0"></canvas>
-        <canvas id="canvas20" width="201" height="201" margin="0" padding="0" border="0"></canvas>
+        <canvas id="canvas00" width="201" height="201"></canvas>
+        <canvas id="canvas10" width="201" height="201"></canvas>
+        <canvas id="canvas20" width="201" height="201"></canvas>
         <br />
         <canvas id="canvas01" width="201" height="201"></canvas>
         <canvas id="canvas11" width="201" height="201"></canvas>
