Fix issues #3 (Ambient Shadow) and #6 (Cursor issues)

FreezingMoon · Mar 6, 2012 · 2375472 · 2375472
1 parent b7ee5e4
commit 2375472
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 16 deletions.
diff --git a/game/Application.js b/game/Application.js
@@ -1,9 +1,7 @@
 function Application() {
 	this.cursorOffset = new Vertex(32, -2);
 	$("#message").remove();
-	$("canvas").each(function() {
-		$(this).css({"display": "block"});
-	});
+	$("#container").css({"display": "block"});
 	/*
 	$(window).mousemove(function(e){
 		mouseX = e.clientX - ($(window).width() - gameWidth) / 2;

diff --git a/game/arenas/CanvasRenderer.js b/game/arenas/CanvasRenderer.js
@@ -81,10 +81,10 @@ CanvasRenderer.prototype.resizeCanvas = function(size, isWidth) {
 	this.unitsPerColumn = this.unitsPerRow / this.gameWidth * this.gameHeight;
 	this.pixelsPerUnit  = this.gameWidth / this.unitsPerRow;
 
-	$(this.canvas).css({
-		"width": this.gameWidth + "px",
-		"height": this.gameHeight + "px",
-		"margin": (this.gameHeight / -2) + "px 0px 0px " + (this.gameWidth / -2) + "px",
+	$(this.canvas).parent().css({
+		"width": (this.gameWidth + 64) + "px",
+		"height": (this.gameHeight + 64) + "px",
+		"margin": ((this.gameHeight + 64) / -2) + "px 0px 0px " + ((this.gameWidth + 64) / -2) + "px",
 	});
 	$(this.canvas)[0].getContext("2d").canvas.width  = this.gameWidth;
 	$(this.canvas)[0].getContext("2d").canvas.height = this.gameHeight;

diff --git a/game/index.html b/game/index.html
@@ -10,13 +10,20 @@
 <script type="text/javascript" src="arenas/CanvasRenderer.js"></script>
 <script type="text/javascript" src="arenas/Arena.js"></script>
 <style type="text/css">
-canvas {
+#container {
+	display: none;
 	margin: 0px;
 	padding: 0px;
-	display: none;
-	position: absolute;
 	left: 50%;
 	top: 50%;
+	position: absolute;
+}
+canvas {
+	margin: 32px;
+	padding: 0px;
+	position: absolute;
+	width: 100%
+	height: 100%;
 }
 #message {
 	color: black;
@@ -32,22 +39,80 @@
 	left: 50%;
 	opacity: 0.65;
 }
+.shadow {
+	opacity: 0.9;
+	position: absolute;
+	z-index: 0;
+}
+#shadow-top {
+	background: transparent url("shadow-top.png") repeat;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 32px;
+}
+#shadow-left {
+	background: transparent url("shadow-left.png") repeat;
+	top: 0px;
+	left: 0px;
+	width: 32px;
+	height: 100%;
+}
+#shadow-right {
+	background: transparent url("shadow-left.png") repeat;
+	-webkit-transform: rotate(180deg);
+	-moz-transform: rotate(180deg);
+	-ms-transform: rotate(180deg);
+	-o-transform: rotate(180deg);
+	top: 0px;
+	right: 0px;
+	width: 32px;
+	height: 100%;
+}
+#shadow-bottom {
+	background: transparent url("shadow-top.png") repeat;
+	-webkit-transform: rotate(180deg);
+	-moz-transform: rotate(180deg);
+	-ms-transform: rotate(180deg);
+	-o-transform: rotate(180deg);
+	bottom: 0px;
+	left: 0px;
+	width: 100%;
+	height: 32px;
+}
 .cursorPointer:hover{cursor:url("cursor/pointer.png"), auto;}
 body {
 	background: black url('../images/bg.jpg') repeat;
 	margin: 0px;
 	padding: 0px;
 	overflow: hidden;
 }
-html {cursor:url("cursor/default.png"), default;}
+#body {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	left: 0px;
+	top: 0px;
+	margin: 0px;
+	padding: 0px;
+	cursor: url("cursor/default.png"), default;
+}
 a:hover {cursor:url("cursor/pointer.png"), auto;}
 </style>
 </head>
 <body>
-	<canvas id="tiles" style="z-index: 3;"></canvas>
-	<canvas id="arena" style="z-index: 2;"></canvas>
-	<canvas id="menu" style="z-index: 1;"></canvas>
-	<canvas id="items" style="z-index: 2;"></canvas>
-	<div id="message">Your browser either does not support <strong>HTML5 canvas</strong> or <strong>Javascript</strong>.<br><br>Please use another browser or enable Javascript.</div>
+	<div id="body">
+		<div id="container">
+			<canvas id="tiles" style="z-index: 3;"></canvas>
+			<canvas id="arena" style="z-index: 2;"></canvas>
+			<canvas id="menu" style="z-index: 1;"></canvas>
+			<canvas id="items" style="z-index: 2;"></canvas>
+			<div class="shadow" id="shadow-top"></div>
+			<div class="shadow" id="shadow-right"></div>
+			<div class="shadow" id="shadow-bottom"></div>
+			<div class="shadow" id="shadow-left"></div>
+		</div>
+		<div id="message">Your browser either does not support <strong>HTML5 canvas</strong> or <strong>Javascript</strong>.<br><br>Please use another browser or enable Javascript.</div>
+	</div>
 </body>
 </html>
diff --git a/game/shadow-left.png b/game/shadow-left.png
diff --git a/game/shadow-top.png b/game/shadow-top.png