Permalink
Browse files

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

Conflicts:
	lib/game.js
  • Loading branch information...
2 parents 53f0f0e + 3dd83b5 commit 46f48ea4bba4239e7a1e171cc39a29cf4063a17f @adngdb committed Jul 31, 2011
View
@@ -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;
View
@@ -10,6 +10,6 @@
},
"server": {
"host": null,
- "port": "80"
+ "port": 9309
}
}
View
@@ -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>
View
@@ -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 = {
}
View
@@ -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 = {
}
View
@@ -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;
},
@@ -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);
+ },
};
Oops, something went wrong.

0 comments on commit 46f48ea

Please sign in to comment.