Merge branch 'master' of github.com:AdrianGaudebert/tetwis

Conflicts: lib/game.js
adngdb · Jul 31, 2011 · 46f48ea · 46f48ea
2 parents 53f0f0e + 3dd83b5
commit 46f48ea
Show file tree

Hide file tree

Showing 32 changed files with 1,162 additions and 283 deletions.
diff --git a/client/css/main.css b/client/css/main.css
@@ -2,20 +2,60 @@
  * Main.css
  **********************************************************************/
 
-#content {
-    width: 400px;
+button {
+	cursor: pointer;
+}
+
+.clear {
+	clear: both;
+}
+
+#body {
+	margin: auto;
+	width: 900px;
+}
+
+#information {
+    width: 290px;
     float: right;
 }
-    #content h1,
-    #content h2 {
+    #information h1,
+    #information h2 {
         margin: 0;
         text-align: center;
     }
-    #content h1 {
-        font-size: 6.5em;
+    #information h1 {
+        font-size: 4.5em;
         margin: 0;
     }
 
+#content {
+	text-align: center;
+}
+	#content .games-list {
+		width: 600px;
+	}
+		#content .games-list ul {
+			margin: 0;
+			padding: 0;
+		}
+			#content .games-list ul li {
+				background-color: #ff9;
+				border: 1px solid #f90;
+				border-radius: 3px;
+				list-style-type: none;
+				list-style-position: outside;
+				padding: 5px 10px;
+				margin: 5px 0;
+			}
+				#content .games-list ul li p {
+					margin: 3px 0;
+				}
+		#content .games-list .join-game {
+			float: right;
+			padding: 9px 18px;
+		}
+
 #players {
     border: 1px solid black;
     background: black;

diff --git a/client/game.conf b/client/game.conf
@@ -10,6 +10,6 @@
     },
     "server": {
         "host": null,
-        "port": "80"
+        "port": 9309
     }
 }
diff --git a/client/index.html b/client/index.html
@@ -7,30 +7,37 @@
     </head>
 
     <body>
-        <div id="content">
-            <header>
-                <h1>TetWis</h1>
-                <h2>Multiplayer Web Tetris Game</h2>
-            </header>
+		<div id="body">
+			<div id="information">
+				<header>
+					<h1>TetWis</h1>
+					<h2>Multiplayer Web Tetris Game</h2>
+				</header>
 
-            <p>
-                You are <span id="whoami">not connected</span>.
-            </p>
-            <p>
-                Ingame: <span id="ingame-number">0</span>
-            </p>
-            <p>
-                Awaiting: <span id="awaiting-number">0</span>
-            </p>
-        </div>
+				<div id="player-state">
+					<p>
+						You are <span id="whoami">not connected</span>.
+					</p>
+				</div>
+				<div id="game-state">
+					<p>
+						Ingame: <span id="ingame-number">0</span>
+					</p>
+					<p>
+						Awaiting: <span id="awaiting-number">0</span>
+					</p>
+				</div>
+			</div>
 
-        <div id="players">
-            <span id="p1">Player 1</span>
-            <span id="p2">Player 2</span>
-            <span id="p3">Player 3</span>
-            <span id="p4">Player 4</span>
-        </div>
-        <div id="map"><img src="images/loader.gif" id="loader" alt="Loading..." /><p id="loading-state">Loading configuration...</p></div>
+			<div id="content">
+				<div class="login">
+					<img src="images/loader.gif" id="loader" alt="Loading..." />
+					<p id="loading-state">Loading...</p>
+				</div>
+			</div>
+
+			<div class="clear"></div>
+		</div>
 
         <footer>
             <p>
@@ -42,11 +49,17 @@ <h2>Multiplayer Web Tetris Game</h2>
 
         <ul id="log"></ul>
 
-        <script src="http://cdn.socket.io/stable/socket.io.js"></script>
+        <!--<script src="http://cdn.socket.io/stable/socket.io.js"></script>-->
+
+        <script>var tetwis = {};</script>
+        <script src="js/libs/load.js"></script>
+        <script src="js/login.js"></script>
 
+<!--
         <script src="js/libs/jquery.min.js"></script>
         <script src="js/libs/jquery.timers.js"></script>
         <script src="js/libs/json2.js"></script>
+        <script src="js/libs/socket.io.min.js"></script>
         <script src="js/core/config.js"></script>
         <script src="js/core/cell.js"></script>
         <script src="js/core/brick.js"></script>
@@ -57,5 +70,6 @@ <h2>Multiplayer Web Tetris Game</h2>
         <script src="js/core/socket.js"></script>
         <script src="js/core/game.js"></script>
         <script src="js/main.js"></script>
+-->
     </body>
 </html>
diff --git a/client/js/core/brick.js b/client/js/core/brick.js
@@ -2,7 +2,7 @@
  * Class Brick
  * Represents a brick that can be moved
  */
-function Brick(data) {
+tetwis.Brick = function(data) {
     this.x = data.x;
     this.y = data.y;
     this.color = data.color;
@@ -11,9 +11,9 @@ function Brick(data) {
 
     for (var i = 0; i < this.cells.length; i++) {
         var cell = this.cells[i];
-        this.cells[i] = new Cell(cell);
+        this.cells[i] = new tetwis.Cell(cell);
     }
 }
 
-Brick.prototype = {
+tetwis.Brick.prototype = {
 }
diff --git a/client/js/core/cell.js b/client/js/core/cell.js
@@ -1,8 +1,8 @@
-function Cell(data) {
+tetwis.Cell = function(data) {
     this.x = data.x;
     this.y = data.y;
     this.color = data.color;
 }
 
-Cell.prototype = {
+tetwis.Cell.prototype = {
 }
diff --git a/client/js/core/config.js b/client/js/core/config.js
@@ -1,6 +1,4 @@
-function Config(game) {
-    this.game = game;
-
+tetwis.Config = function() {
     // TODO couper au dernier slash, si on appelle index.html par exemple
     this.configFile = window.location.href + "game.conf";
 
@@ -9,20 +7,20 @@ function Config(game) {
     this.players = null;
 };
 
-Config.prototype = {
+tetwis.Config.prototype = {
 
-    load: function() {
-        log("Loading configuration");
+    load: function(callback) {
+        tetwis.log("Loading configuration");
         var instance = this;
         $.getJSON(this.configFile, function(data) {
-            log("Configuration loaded");
+            tetwis.log("Configuration loaded");
 
-            instance.server = data.server;
-            instance.map = data.map;
-            instance.players = data.players;
+            this.server = data.server;
+            this.map = data.map;
+            this.players = data.players;
 
-            instance.game.launch();
-        });
+            callback();
+        }.bind(this));
         return this;
     },
 

diff --git a/client/js/core/displayer.js b/client/js/core/displayer.js
@@ -5,20 +5,25 @@
  * @author Adrian Gaudebert - adrian@gaudebert.fr
  * @constructor
  */
-function Displayer(map, delay) {
-    this.map = map;
+tetwis.Displayer = function() {
+	this.mapElt = null;
+	this.contentElt = $('#content');
 
-    this.htmlElt = $('#map');
-    this.cellSize = this.map.cellSize;
-    this.cellSizeCSS = this.cellSize - 1;
-
-    this.delay = delay;
+    this.delay = 100; // TODO move to the config file (see Game)
     this.intervalId = null;
 }
 
-Displayer.prototype = {
+tetwis.Displayer.prototype = {
+
+	setMap: function(map) {
+		this.map = map;
+
+		this.cellSize = this.map.cellSize;
+		this.cellSizeCSS = this.cellSize - 1;
+	},
 
     start: function() {
+		this.mapElt = $('#map');
         this.intervalId = window.setInterval(this.display.bind(this), this.delay);
         return this;
     },
@@ -30,22 +35,40 @@ Displayer.prototype = {
 
     display: function() {
         // Reset current map
-        this.htmlElt.empty();
+        this.mapElt.empty();
 
         // Displaying map
         for (var i = 0, size = this.map.cells.length; i < size; i++) {
             var cell = this.map.cells[i];
-            this.htmlElt.append('<div class="cell" style="top: '+ cell.y * this.cellSize +'px; left: '+ cell.x * this.cellSize +'px; background-color: '+ cell.color +'; width: '+this.cellSizeCSS+'px; height: '+this.cellSizeCSS+'px;"></div>');
+            this.mapElt.append('<div class="cell" style="top: '+ cell.y * this.cellSize +'px; left: '+ cell.x * this.cellSize +'px; background-color: '+ cell.color +'; width: '+this.cellSizeCSS+'px; height: '+this.cellSizeCSS+'px;"></div>');
         }
 
         for (var k = 0, nb = this.map.bricks.length; k < nb; k++) {
             var currentBrick = this.map.bricks[k];
             for (var i = 0, size = currentBrick.cells.length; i < size; i++) {
                 var cell = currentBrick.cells[i];
-                this.htmlElt.append('<div class="cell" style="top: '+ (currentBrick.y + cell.y) * this.cellSize +'px; left: '+ (currentBrick.x + cell.x) * this.cellSize +'px; background-color: '+ cell.color +'; width: '+this.cellSizeCSS+'px; height: '+this.cellSizeCSS+'px;"></div>');
+                this.mapElt.append('<div class="cell" style="top: '+ (currentBrick.y + cell.y) * this.cellSize +'px; left: '+ (currentBrick.x + cell.x) * this.cellSize +'px; background-color: '+ cell.color +'; width: '+this.cellSizeCSS+'px; height: '+this.cellSizeCSS+'px;"></div>');
             }
         }
 
         return this;
     },
+
+    displayTemplate: function(templateURI, data, callback) {
+		this.contentElt.empty();
+
+		$.get(templateURI, function(tpl) {
+
+			$.tmpl(tpl, data).appendTo(this.contentElt);
+
+			if (callback != null) {
+				callback();
+			}
+
+		}.bind(this));
+	},
+
+	setState: function(state) {
+		$('#loading-state').text(state);
+	},
 };