a few style modifications to the canvas and the surroundings

cobexer · Apr 8, 2012 · da35146 · da35146
1 parent b87d978
commit da35146
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -7,14 +7,24 @@
 	<head>
 		<title>5 in a row</title>
 		<script src="lib/jquery-1.7.1.js"></script>
+		<script src="lib/jquery-ui/jquery-ui-1.8.18.js"></script>
+		<script src="lib/cobexer.chat.js"></script>
 		<script src="src/utils.js"></script>
 		<script src="src/ui.js"></script>
 		<script src="src/net.js"></script>
 		<script src="src/app.js"></script>
+		<link rel="stylesheet" href="lib/jquery-ui/jquery-ui-1.8.18.css" />
+		<link rel="stylesheet" href="lib/cobexer.chat.css" />
 		<link rel="stylesheet" href="style/5-in-a-row.css" />
 	</head>
-	<body onload="init();">
+	<body>
-		<canvas id="background" width="2000" height="1200"></canvas>  
+		<div id="content-wrapper">
-		<canvas id="game_array" width="2000" height="1200"></canvas>
+			<h1>5 in a row!</h1>
+			<div id="game-container">
+				<canvas id="background" width="640" height="480"></canvas>  
+				<canvas id="game_array" width="640" height="480"></canvas>
+			</div>
+			<footer>Copyright &copy; 2012 Obexer Christoph, Watzinger Dietmar. All rights reserved.</footer>
+		</div>
 	</body>
 </html>
diff --git a/src/app.js b/src/app.js
@@ -4,5 +4,8 @@
  *
  * Released under the MIT and GPL licenses.
  */
-
+$(function() {
-
+	init();
+	$('<div id="ingame-chat"></div>')
+		.chat({ channels: ['Lobby'] });
+})
diff --git a/src/ui.js b/src/ui.js
@@ -7,30 +7,28 @@
 
 
 
-var x_size_array = 10;
+var x_size_array = 20;
-var y_size_array = 5;
+var y_size_array = 15;
-var field_size = 50;
+var field_size = 32;
-var x_offset = 50;
+var x_offset = 0;
-var y_offset = 50;
+var y_offset = 0;
 
 var color = "green";
 var name = "Corni";
 
 var array = new Array(x_size_array);
 var animation_counter;
 
-var background_window;
 var array_window;
+var game_array;
 
 function init()
 {
-	background = document.getElementById("background");
-	background_window = background.getContext('2d');
 	drawBackground();
 
-	game_array = document.getElementById("game_array");
+	game_array = $("#game_array");
-	array_window = game_array.getContext('2d');
+	array_window = game_array[0].getContext('2d');
-	game_array.addEventListener('click', clickField, false);
+	game_array.on('click', clickField);
 
 	for(var i=0; i<array.length; i++)
 	{
@@ -40,6 +38,8 @@ function init()
 
 function drawBackground()
 {
+	var background = $("#background")[0];
+	var background_window = background.getContext('2d');
 	var img = new Image();  
 	img.onload = function()
 	{
@@ -145,8 +145,9 @@ function getCursorPosition(e)
       y = e.clientY + document.body.scrollTop +
            document.documentElement.scrollTop;
     }
-	x -= game_array.offsetLeft;
+    var offset = game_array.offset();
-	y -= game_array.offsetTop;
+	x -= offset.left;
+	y -= offset.top;
 
 	if(x<x_offset || x>(x_offset + x_size_array*field_size) || y<y_offset || y>(y_offset + y_size_array*field_size))
 	{

diff --git a/style/5-in-a-row.css b/style/5-in-a-row.css
@@ -4,9 +4,39 @@
  * Released under the MIT and GPL licenses.
  */
 
-#background {
+body {
-	position: fixed;
+	font-family: Verdana,sans-serif;
+	background-color: #BDBDBD;
 }
-#game_array {
+
-	position: fixed;
+h1 {
+	text-align: center;
+}
+
+#content-wrapper {
+	width: 900px;
+	margin: 0 auto;
+}
+
+#game-container {
+	position: relative;
+	width: 640px;
+	height: 480px;
+	margin: 0 auto;
+	box-shadow: 0 0 15px black;
+	border-radius: 3px;
+}
+
+#game-container > canvas {
+	position: absolute;
+	top: 0;
+	left: 0;
+	padding: 0;
+	margin: 0;
 }
+
+#content-wrapper footer {
+	padding-top: .8em;
+	font-size: 75%;
+	text-align: center;
+}