Started to work on the ingame, chat is fully implemented now!

Chris Day 2 years ago
parent
commit
191f39f371

BIN
images/background.png


BIN
images/ico.png


BIN
images/loading-foot.png


BIN
images/loading-head.png


BIN
images/logo.png


BIN
images/progress-bar.png


BIN
images/rada_bg.png


+ 3 - 1
index.html

@@ -5,6 +5,8 @@
5 5
     <link rel="stylesheet" type="text/css" href="css/style.css">
6 6
     <link rel="stylesheet" type="text/css" href="css/mobile.css">
7 7
     <meta name="viewport" content="width=device-width, initial-scale=1">
8
+    <link rel="icon" type="image/png" href="images/ico.png" />
9
+
8 10
 </head>
9 11
 <body>
10 12
 
@@ -16,7 +18,7 @@
16 18
             <ul>
17 19
                 <li data-execute-module="index">Home</li>
18 20
                 <li data-execute-module="forum">Forum</li>
19
-                <li>Play</li>
21
+                <li data-execute-module="game">Play</li>
20 22
             </ul>
21 23
         </div>
22 24
 

+ 15 - 0
js/app.js

@@ -12,9 +12,11 @@ Game.prototype = {
12 12
     user: {
13 13
         timers: {}
14 14
     },
15
+    initialGameModule: "gameMap",
15 16
     loadedModules: {},
16 17
     lastExecuted: {},
17 18
     mainArea: null,
19
+    gameArea: null,
18 20
     handelbars: null,
19 21
     socketURL: "",
20 22
     secondInterval: null,
@@ -148,6 +150,13 @@ Game.prototype = {
148 150
     },
149 151
 
150 152
     updateUser: function (property, value) {
153
+        var self = this;
154
+        if (typeof property == "object") {
155
+            for (var obj in property) {
156
+                self.updateUser(obj, property[obj]);
157
+            }
158
+            return;
159
+        }
151 160
         $("[data-user-info-content='"+property+"']").html(value);
152 161
         $("[data-user-info-attr='"+property+"']").attr("data-user-info-"+property, value);
153 162
     },
@@ -178,6 +187,7 @@ Game.prototype = {
178 187
         $.ajax({
179 188
             url: files.shift(),
180 189
             dataType: "script",
190
+            cache: false,
181 191
             complete: function () {
182 192
                 if (files.length == 0) {
183 193
                     if (typeof callback == "function") callback();
@@ -204,6 +214,7 @@ Game.prototype = {
204 214
 
205 215
         $.ajax({
206 216
             url: template,
217
+            cache: false,
207 218
             complete: function (data) {
208 219
                 self.handelbars.append(data.responseText);
209 220
                 $("[data-partial]").each(function () {
@@ -216,6 +227,7 @@ Game.prototype = {
216 227
                 $.ajax({
217 228
                     url: script,
218 229
                     dataType: "script",
230
+                    cache: false,
219 231
                     complete: function () {
220 232
                         eval("var module = new " + moduleName + "();");
221 233
                         if (typeof module.includes == "object") {
@@ -308,10 +320,13 @@ Game.prototype = {
308 320
 
309 321
     api: function (path, data, callback, method) {
310 322
         var self = this;
323
+
324
+
311 325
         if (typeof data == "function" && typeof callback == "undefined") {
312 326
             callback = data;
313 327
         }
314 328
         var httpMethod = (method != undefined) ? method.toUpperCase() : "GET";
329
+        if (callback === undefined) callback = function () {};
315 330
 
316 331
         $.ajax({
317 332
             method: httpMethod,

+ 256 - 0
modules/game/game.css

@@ -0,0 +1,256 @@
1
+.window{
2
+	border: 1px solid #333;
3
+	background-color: #000;
4
+	position: relative;
5
+}    
6
+
7
+.window .tilebar {
8
+	font-family: sans-serif;
9
+	color: #fff;
10
+	background-color: #202E54;
11
+	line-height: 28px;
12
+	padding-left: 15px;
13
+}
14
+
15
+.window .tilebar .action {
16
+	background-color: rgba(255, 255, 255, 0.2);
17
+	float: right;
18
+	padding: 0px 10px;
19
+}
20
+
21
+.window .body {
22
+	position: absolute;
23
+	top: 28px;
24
+	left: 0px;
25
+	right: 0px;
26
+	bottom: 0px;
27
+	overflow: auto;
28
+}
29
+
30
+.game {
31
+	z-index: 1000;
32
+	display: none;
33
+	width: 1200px;
34
+	margin-left: -600px;
35
+	height: 725px;
36
+	margin-top: -363px;
37
+	position: absolute;
38
+	top: 50%;
39
+	left: 50%;
40
+	background-image: url(../../images/background.png);
41
+	background-size: cover;
42
+	background-position: top center;
43
+}
44
+
45
+.loading-head {
46
+	line-height: 128px;
47
+	color: #fff;
48
+	text-align: center;
49
+	font-size: 32px;
50
+	background-image:url(../../images/loading-head.png);
51
+	background-repeat: repeat-x;
52
+	text-shadow: 0px 0px 5px rgba(255, 255, 255, 1);
53
+}
54
+
55
+.loading-logo {
56
+	text-align: center;
57
+	margin-top: 175px;
58
+}
59
+
60
+.loading-foot {
61
+	position: absolute;
62
+	left: 0px;
63
+	right: 0px;
64
+	bottom: 0px;
65
+	height: 84px;
66
+	background-image:url(../../images/loading-foot.png);
67
+	background-repeat: repeat-x;
68
+	text-align: center;
69
+	color: #fff;
70
+	font-weight: 300;
71
+	font-size: 13px;
72
+}
73
+
74
+.loading-foot p {
75
+	font-family: sans-serif;
76
+	margin: 0px;
77
+	margin-top: 20px;
78
+	line-height: 15px;
79
+	font-size: 10px;
80
+}
81
+
82
+.loading-foot .progress {
83
+	width: 642px;
84
+	height: 19px;
85
+	border: 1px solid #333;
86
+	display: inline-block;
87
+	margin-top: 10px;
88
+}
89
+.loading-foot .progress .bar {
90
+	background-image: url(../../images/progress-bar.png);
91
+	height: 17px;
92
+}
93
+
94
+.user-stats, 
95
+.chat-new-message,
96
+.module-loader .menu,
97
+.module-loader .chat-tabs,
98
+.module-loader .game-modules,
99
+.module-loader .chat {
100
+	border: 1px solid #333;
101
+	position: absolute;
102
+	font-family: sans-serif;
103
+	font-size: 12px;
104
+	color: #fff;
105
+	background-color: rgba(0, 0, 0, 0.75);
106
+}
107
+
108
+.module-loader .game-modules {
109
+	top: 65px;
110
+	left: 10px;
111
+	right: 330px;
112
+	bottom: 57px;
113
+	font-size: 12px;
114
+}
115
+
116
+.module-loader .chat {
117
+	padding: 10px;
118
+	top: 95px;
119
+	width: 310px;
120
+	right: 10px;
121
+	bottom: 57px;
122
+	color: #999;
123
+	display: none;
124
+	overflow: auto;
125
+}
126
+.module-loader .game-menu {
127
+	top: 10px;
128
+	left: 10px;
129
+	right: 10px;
130
+	height: 45px;
131
+	color: #bbb;
132
+	margin: 0px;
133
+	padding: 0px;
134
+}
135
+
136
+.module-loader .chat-tabs li,
137
+.module-loader .game-menu li {
138
+	display: block;
139
+	float: left;
140
+	width: 20%;
141
+	padding: 0px;
142
+	margin: 0px;
143
+	line-height: 45px;
144
+	list-style: none; 
145
+	text-align: center;
146
+	background-color: rgba(111, 111, 111, 0.2);
147
+	cursor: pointer;
148
+}
149
+.module-loader .chat-tabs li:hover,
150
+.module-loader .game-menu li:hover {
151
+	background-color: rgba(111, 111, 200, 0.25);
152
+	color: #ccc;
153
+}
154
+.module-loader .chat-tabs li.active,
155
+.module-loader .game-menu li.active {
156
+	background-color: #202E54;
157
+	color: #fff;
158
+}
159
+
160
+.module-loader .chat table {
161
+	width: 100%;
162
+}
163
+.module-loader .chat table td {
164
+	vertical-align: top;
165
+}
166
+
167
+.module-loader .chat .system {
168
+	color: #333;
169
+}
170
+
171
+.module-loader .chat > strong {
172
+	display: inline-block;
173
+	width: 100px;
174
+}
175
+
176
+.user-stats, 
177
+.chat-new-message {
178
+	position: absolute;
179
+	bottom: 10px;
180
+	top: 647px;
181
+}
182
+
183
+.user-stats {   
184
+	left: 10px;
185
+	right: 330px;
186
+	padding: 0px;
187
+	margin: 0px;
188
+}
189
+
190
+.user-stats li {
191
+	width: 25%;
192
+	display: block;
193
+	line-height: 38px;
194
+	float: left;
195
+	text-align: center;
196
+}   
197
+
198
+.chat-new-message {
199
+	right: 10px;
200
+	width: 310px;
201
+}
202
+.chat-new-message input{
203
+	position: absolute;
204
+	top: 0px;
205
+	bottom: 0px;
206
+	left: 0px;
207
+	right:0px;
208
+	line-height: 100%;
209
+	border-radius: 0px;
210
+	margin-bottom: 0px;
211
+}
212
+
213
+.module-loader .chat-tabs {
214
+	padding: 10px;
215
+	top: 65px;
216
+	width: 310px;
217
+	right: 10px;
218
+	height: 30px;
219
+	padding: 0px;
220
+	margin: 0px;
221
+	border-bottom: none;
222
+}
223
+
224
+.module-loader .chat-tabs li {
225
+	width: 50%;
226
+	line-height: 30px;
227
+}
228
+
229
+.chat table tr td:nth-child(1) {
230
+	text-align: right;
231
+	width: 70px;
232
+}
233
+
234
+.chat.active {
235
+	display: block;
236
+}
237
+
238
+.module-loader .chat-tabs li.new {
239
+	-webkit-animation-name: newMessage;
240
+	-webkit-animation-duration: 1s;
241
+	-webkit-animation-iteration-count: infinite;
242
+	-webkit-animation-timing-function: linear;
243
+	-webkit-animation-delay: 0s;
244
+}
245
+
246
+@-webkit-keyframes newMessage {
247
+	0% {
248
+		color: inherit;
249
+	}
250
+	50% {
251
+		color: #f00;
252
+	}
253
+	100% {
254
+		color: inherit;
255
+	}
256
+}

+ 62 - 15
modules/game/module.game.html

@@ -1,16 +1,63 @@
1
-<script id="User-Info" type="text/x-handlebars-template">
2
-    <div class="col">
3
-        {{name}}<strong>Name</strong>
4
-    </div>
5
-    <div class="col">
6
-        {{team}}<strong>Army</strong>
7
-    </div>
8
-    <div class="col">
9
-        {{rank}}<strong>Rank</strong>
10
-    </div>
11
-    <div class="user-links">
12
-        <a href="#">My Account</a> |
13
-        <a href="#">Forum</a> |
14
-        <a href="#" class="logout">Logout</a>
15
-    </div>
1
+<script id="Game-Container" type="text/x-handlebars-template">
2
+	<div class="window game">
3
+		<Link href="modules/game/game.css" rel="stylesheet" />
4
+		<div class="tilebar">
5
+			<span class="title">The Battlefield</span>
6
+			<span class="action close-game">Close</span>
7
+		</div>
8
+		<div class="body loading-page">
9
+			<div class="loading-head">Loading The Battlefield ... </div>
10
+
11
+			<div class="loading-logo">
12
+				<img src="images/logo.png" width="175px" alt="Loading Logo" />
13
+			</div>
14
+
15
+			<div class="loading-foot">
16
+				<p>
17
+					Loading Game Assets ...
18
+				</p>
19
+				<div class="progress">
20
+					<div class="bar" style="width: 0%"></div>
21
+				</div>
22
+			</div>
23
+		</div>
24
+		<div class="body module-loader">
25
+			<ul class="game-menu menu">
26
+				<li class="active">Map Overview</li>
27
+				<li>Soldier Stats</li>
28
+				<li>Inventory</li>
29
+				<li>Alliance Center</li>
30
+				<li>Rankings / Logs</li>
31
+			</ul>
32
+			<div class="game-modules"></div>
33
+
34
+			<ul class="chat-tabs">
35
+				<li class="active" data-show-chat="all">Everyone</li>
36
+				<li data-show-chat="team">Alliance</li>
37
+			</ul>
38
+
39
+			<div class="chat all active">
40
+				<table></table>
41
+			</div>
42
+			<div class="chat team">
43
+				<table></table>
44
+			</div>
45
+			<ul class="user-stats">
46
+				<li><strong>Location:</strong> <span data-user-info-content="x"></span>-<span data-user-info-content="y"></span></li>
47
+				<li><strong>Moves:</strong> <span data-user-info-content="moves"></span>/150</li>
48
+				<li><strong>Health:</strong> 76.05%</li>
49
+				<li><strong>Inventory:</strong> 100/100</li>
50
+			</ul>
51
+			<div class="chat-new-message">
52
+				<input type="text" placeholder="Message Game Chat ......." />
53
+			</div>
54
+		</div>
55
+	</div>
16 56
 </script>
57
+
58
+<script id="Chat-Message" type="text/x-handlebars-template">
59
+	<tr>
60
+		<td><strong>{{username}}:</strong></td>
61
+		<td>{{message}}</td>
62
+	</tr>
63
+</script>

+ 146 - 20
modules/game/module.game.js

@@ -1,27 +1,153 @@
1 1
 var game = function () {};
2 2
 
3 3
 game.prototype = {
4
-    defaultLandingModule: "map",
5
-    construct: function () {
6
-        var self = this;
7
-        app.api("/user/info", function (data) {
8
-            if (data.error == undefined && data.team != null) {
9
-                app.parseTemplate("User-Info", $(".header .user-info"), data);
10
-                self.userInfoBinds();
11
-                app.mainArea = $('.module-container');
12
-                app.executeModule(self.defaultLandingModule);
13
-                app.user = data;
14
-            } else {
15
-                return document.location = "index.html";
16
-            }
17
-        });
18
-    },
4
+	defaultLandingModule: "map",
5
+	construct: function () {
6
+		var self = this;
7
+
8
+		if (!app.user) return $(".login button").click();
9
+
10
+		self.load();
11
+		self.socketBinds();
12
+		this.binds();
13
+	},
14
+
15
+	loading: false,
16
+
17
+	loadTime: 100,
18
+
19
+	load: function () {
20
+		var self = this;
21
+
22
+		if (self.loading) return;
23
+
24
+		self.loading = true;
25
+
26
+		$(".window.game").remove();
27
+
28
+		app.parseTemplate("Game-Container", $("body"), {}, false, true);
29
+
30
+		app.gameArea = $(".game-modules");
31
+		
32
+		setTimeout(function () {
33
+			$(".window.game").fadeIn(500);
34
+		
35
+			$(".body.module-loader").hide();
36
+
37
+			self.updateLoadingBar("Loading chat history ...", 0);
38
+
39
+			self.getChatHistory(function () {
40
+				self.updateLoadingBar("Loading chat history ...", 20);
41
+
42
+				setTimeout(function () {
43
+					self.updateLoadingBar("Loading map data ...", 40);
44
+				}, (self.loadTime * 2));
45
+
46
+				setTimeout(function () {
47
+					self.updateLoadingBar("Loading timers ...", 60);
48
+				}, (self.loadTime * 3));
19 49
 
20
-    userInfoBinds: function () {
21
-        var self = this;
22
-        $(".header .logout").unbind().bind("click", function () {
23
-            app.logout();
50
+				setTimeout(function () {
51
+					self.updateLoadingBar("Syncing server info ...", 80);
52
+				}, (self.loadTime * 4));
53
+
54
+				setTimeout(function () {
55
+					self.updateLoadingBar("Setting up game ...", 100);
56
+				}, (self.loadTime * 5));
57
+
58
+				setTimeout(function () {
59
+					self.showGame();
60
+					self.loading = false;
61
+				}, (self.loadTime * 6));
62
+				
63
+			});
64
+
65
+			
66
+		}, 100);
67
+	},
68
+
69
+	getChatHistory: function (callback) {
70
+		var self = this;
71
+		app.apiGET("/chat/all", function (data) { 
72
+			for (var i = 0; i < data.length; i++) {
73
+				self.newChatMessage(data[i]);
74
+			};
75
+
76
+			app.apiGET("/chat/team", function (data) { 
77
+				for (var i = 0; i < data.length; i++) {
78
+					self.newChatMessage(data[i]);
79
+				};
80
+				if (typeof callback == "function") callback();
81
+			});
82
+		});
83
+	},
84
+
85
+	newChatMessage: function (data) {
86
+		
87
+		var maxHeight = $('.chat.'+data.room).innerHeight() + $('.chat.'+data.room).scrollTop();
88
+		var scrollHeight = $('.chat.'+data.room)[0].scrollHeight;
89
+
90
+		var scroll = false;
91
+		if (maxHeight == scrollHeight) {
92
+			scroll = true;
93
+		}
94
+		app.parseTemplate("Chat-Message", $(".chat."+data.room+" table"), data, false, true);
95
+		$(".chat-tabs [data-show-chat='"+data.room+"']:not(.active)").addClass("new");
96
+
97
+		if (scroll) $('.chat.'+data.room).scrollTop($('.chat.'+data.room)[0].scrollHeight);
98
+
99
+	},
100
+
101
+	updateLoadingBar: function (text, percent) {
102
+		var self = this;
103
+		$(".loading-foot p").text(text);
104
+		$(".loading-foot .bar").animate({
105
+			width: percent + "%"
106
+		}, self.loadTime - 10);
107
+	},
108
+
109
+	showGame: function () {
110
+		$(".window .body.module-loader").show();
111
+		$(".window .body.loading-page").hide();
112
+		app.executeModule(app.initialGameModule);
113
+		app.updateUser(app.user);
114
+	},
115
+
116
+	binds: function () {
117
+		var self = this;
118
+		$("[data-show-chat]").unbind().bind("click", function () {
119
+			$("[data-show-chat]").removeClass("active");
120
+			$(this).addClass("active").removeClass("new");
121
+			$(".chat").hide();
122
+			$(".chat."+$(this).attr("data-show-chat")).show();
123
+		}); 
124
+		$('.chat-new-message input').keypress(function (e) {
125
+			if (e.which == 13) {
126
+				var text = $(this).val();
127
+				$(this).val("");
128
+				app.apiPOST("/chat/" + $("[data-show-chat].active").attr("data-show-chat"), {
129
+					message: text
130
+				});
131
+			}
132
+		});
133
+		$(".close-game").unbind().bind("click", function () {
134
+			self.closeGame();
135
+		});
136
+	}, 
137
+	socketBinds: function () {
138
+		var self = this;
139
+		app.socket.on("chat_message", function(data) {
140
+            self.newChatMessage(data);
24 141
         });
25
-    },
142
+	}, 
143
+
144
+	closeGame: function () {
145
+
146
+		$(".window.game").fadeOut(500);
147
+		setTimeout(function () {
148
+			$(".window.game").remove();
149
+		}, 500);
150
+		app.executeModule("index");			
151
+	},
26 152
 
27 153
 };

+ 110 - 0
modules/gameMap/assets.js

@@ -0,0 +1,110 @@
1
+var AssetLoader = function () {
2
+	this.assets = {};
3
+};
4
+
5
+AssetLoader.prototype = {
6
+
7
+	assets: {},
8
+
9
+	loadAssets: function (assetsToLoad, callback) {
10
+		var self = this;
11
+		
12
+		if (assetsToLoad.length == 0) {
13
+			if (typeof callback == "function") {
14
+				callback(self.assets);
15
+				self.assets = {}; 
16
+				return;
17
+			}
18
+		}
19
+
20
+		var assetURL = assetsToLoad.shift();
21
+		var name = assetURL.replace(/0\.png/g, '');
22
+		name = name.replace(/\.png/g, '');
23
+		name = name.replace(/\//g, ' ');
24
+		name = name.replace(/\-/g, ' ');
25
+		name = name.replace(/\_/g, ' ');
26
+		name = name.replace(/\./g, ' ');
27
+		name = name.replace(/images map tiles/g, '');
28
+		name = name.replace(/images map /g, '');
29
+		name = name.trim();
30
+
31
+		if (typeof assetURL == "string") {
32
+
33
+			var asset = new Image();
34
+			asset.onload = function () {
35
+				self.assets[name] = asset;
36
+				self.loadAssets(assetsToLoad, callback);
37
+			};
38
+
39
+			asset.src = assetURL;
40
+		}
41
+
42
+	},
43
+
44
+	terrain: [
45
+		"images/map/tiles/shallow-deep0/curve_in/270/0.png",
46
+		"images/map/tiles/shallow-deep0/curve_in/90/0.png",
47
+		"images/map/tiles/shallow-deep0/curve_in/180/0.png",
48
+		"images/map/tiles/shallow-deep0/curve_in/0/0.png",
49
+		"images/map/tiles/shallow-deep0/straight/270/0.png",
50
+		"images/map/tiles/shallow-deep0/straight/90/0.png",
51
+		"images/map/tiles/shallow-deep0/straight/180/0.png",
52
+		"images/map/tiles/shallow-deep0/straight/0/0.png",
53
+		"images/map/tiles/shallow-deep0/curve_out/270/0.png",
54
+		"images/map/tiles/shallow-deep0/curve_out/90/0.png",
55
+		"images/map/tiles/shallow-deep0/curve_out/180/0.png",
56
+		"images/map/tiles/shallow-deep0/curve_out/0/0.png",
57
+		"images/map/tiles/beach-shallow0/curve_in/270/0.png",
58
+		"images/map/tiles/beach-shallow0/curve_in/90/0.png",
59
+		"images/map/tiles/beach-shallow0/curve_in/180/0.png",
60
+		"images/map/tiles/beach-shallow0/curve_in/0/0.png",
61
+		"images/map/tiles/beach-shallow0/straight/270/0.png",
62
+		"images/map/tiles/beach-shallow0/straight/90/0.png",
63
+		"images/map/tiles/beach-shallow0/straight/180/0.png",
64
+		"images/map/tiles/beach-shallow0/straight/0/0.png",
65
+		"images/map/tiles/beach-shallow0/curve_out/270/0.png",
66
+		"images/map/tiles/beach-shallow0/curve_out/90/0.png",
67
+		"images/map/tiles/beach-shallow0/curve_out/180/0.png",
68
+		"images/map/tiles/beach-shallow0/curve_out/0/0.png",
69
+		"images/map/tiles/grass0/straight/0/0.png",
70
+		"images/map/tiles/grass2/straight/0/0.png",
71
+		"images/map/tiles/grass3/straight/0/0.png",
72
+		"images/map/tiles/grass1/straight/0/0.png",
73
+		"images/map/tiles/grass4/straight/0/0.png",
74
+		"images/map/tiles/grass-beach0/curve_in/270/0.png",
75
+		"images/map/tiles/grass-beach0/curve_in/90/0.png",
76
+		"images/map/tiles/grass-beach0/curve_in/180/0.png",
77
+		"images/map/tiles/grass-beach0/curve_in/0/0.png",
78
+		"images/map/tiles/grass-beach0/straight/270/0.png",
79
+		"images/map/tiles/grass-beach0/straight/90/0.png",
80
+		"images/map/tiles/grass-beach0/straight/180/0.png",
81
+		"images/map/tiles/grass-beach0/straight/0/0.png",
82
+		"images/map/tiles/grass-beach0/curve_out/270/0.png",
83
+		"images/map/tiles/grass-beach0/curve_out/90/0.png",
84
+		"images/map/tiles/grass-beach0/curve_out/180/0.png",
85
+		"images/map/tiles/grass-beach0/curve_out/0/0.png",
86
+		"images/map/tiles/grass5/straight/0/0.png",
87
+		"images/map/tiles/beach0/straight/0/0.png",
88
+		"images/map/tiles/deep0/straight/0/0.png",
89
+		"images/map/tiles/shallow0/straight/0/0.png",
90
+	], 
91
+
92
+	items: [
93
+		"images/map/tree.png",
94
+		"images/map/tree2.png",
95
+		"images/map/tree3.png",
96
+		"images/map/bush.png",
97
+		"images/map/bush2.png",
98
+		"images/map/bush3.png",
99
+		"images/map/antitank.png",
100
+		"images/map/outpost.png",
101
+		"images/map/Base1.png",
102
+		"images/map/Base2.png",
103
+		"images/map/Base3.png",
104
+		"images/map/Bunker.png",
105
+		"images/map/OilMine.png",
106
+		"images/map/Outpost.png",
107
+		"images/map/Outpostwithspace.png",
108
+		"images/map/Tower.png",
109
+	]
110
+};

modules/map/assets.json → modules/gameMap/assets.json


+ 1 - 1
modules/map/map.html

@@ -7,7 +7,7 @@
7 7
     </head>
8 8
     <body>
9 9
         <br />
10
-        <canvas id="map" width="900px" height="600px"></canvas>
10
+        <canvas id="map" width="878px" height="600px"></canvas>
11 11
 
12 12
         <div class="key">
13 13
             <table>

+ 11 - 63
modules/map/map.js

@@ -1,13 +1,13 @@
1 1
 var Grid = function () {
2 2
 	var self = this;
3
-	this.element = document.getElementById("map")
4
-	this.setup(function () {
3
+	self.element = document.getElementById("map")
4
+	self.setup(function () {
5 5
 		self.draw();
6 6
 	});
7 7
 };
8 8
 
9 9
 Grid.prototype = {
10
-
10
+	
11 11
 	rows: 20,
12 12
 	columns: 30,
13 13
 
@@ -39,7 +39,6 @@ Grid.prototype = {
39 39
 	setup: function (callback) {
40 40
 		this.ctx = this.element.getContext("2d");
41 41
 		this.fillGrid();
42
-		this.loadAssets(callback);
43 42
 		this.height = this.element.height - 1;
44 43
 		this.width = this.element.width - 1;
45 44
 		this.zoom = {
@@ -54,6 +53,7 @@ Grid.prototype = {
54 53
 		};
55 54
 		this.ctx.translate(0.5, 0.5);
56 55
 		this.binds();
56
+		this.loadAssets(callback);
57 57
 	},
58 58
 
59 59
 	fillGrid: function () {
@@ -73,26 +73,11 @@ Grid.prototype = {
73 73
 
74 74
 	loadAssets: function (callback) {
75 75
 		var self = this;
76
-		var finished = true;
77
-		for (var obj in this.assetsToLoad) {
78
-			var assetURL = this.assetsToLoad[obj];
79
-			if (typeof assetURL == "string") {
80
-
81
-				var asset = new Image();
82
-				asset.onload = function () {
83
-					self.assets[obj] = asset;
84
-					delete self.assetsToLoad[obj];
85
-					self.loadAssets(callback);
86
-				};
87
-
88
-				asset.src = assetURL;
89
-				var finished = false;
90
-			}
91
-			break;
92
-		}
93
-		if (finished) {
76
+		var assetLoader = new AssetLoader();
77
+		assetLoader.loadAssets(assetLoader.terrain, function (assets) {
78
+			self.assets = assets;
94 79
 			if (typeof callback == "function") callback();
95
-		}
80
+		});
96 81
 	},
97 82
 
98 83
 	binds: function () {
@@ -202,8 +187,6 @@ Grid.prototype = {
202 187
 		var percLeft = event.x / this.width;
203 188
 		var percTop = event.y / this.height;
204 189
 
205
-		console.log(event);
206
-
207 190
 		var offsetX = (currentZoomWidth - newZoomWidth) * percLeft + this.zoom.start.x;
208 191
 		var offsetY = (currentZoomHeight - newZoomHeight) * percTop + this.zoom.start.y;
209 192
 
@@ -288,6 +271,8 @@ Grid.prototype = {
288 271
 
289 272
 	drawGrid: function () {
290 273
 
274
+		console.log(this);
275
+
291 276
 		/* Calculate the zoom multiplier */
292 277
 		var zoomX =  this.width / (this.zoom.end.x - this.zoom.start.x);
293 278
 		var zoomY =  this.height / (this.zoom.end.y - this.zoom.start.y);
@@ -396,41 +381,4 @@ Grid.prototype = {
396 381
 
397 382
 	},
398 383
 
399
-};
400
-
401
-var grid = new Grid();
402
-
403
-$(".key tr:not(.title)").bind("click", function () {
404
-	$(".key .active").removeClass("active");
405
-	$(this).addClass("active");
406
-	grid.canZoom = $(this).hasClass("can-zoom");
407
-});
408
-
409
-$("#map").bind("mousedown", function (e) {
410
-	if (grid.canZoom) return;
411
-	drawGrid(e);
412
-});
413
-
414
-$("#map").bind("mousemove", function (e) {
415
-	if (grid.canZoom) return;
416
-	if (!grid.click) return;
417
-	drawGrid(e);
418
-});
419
-function drawGrid(e) {
420
-
421
-	var cell = grid.getCell(e.offsetX, e.offsetY);
422
-
423
-	if ($(".key .active").find("[data-grid-type]").attr("data-grid-type") != undefined) {
424
-		var type = $(".key .active [data-grid-type]").attr("data-grid-type");
425
-		if (type == "undefined") type = undefined;
426
-		console.log(type);
427
-		grid.grid[cell[0]][cell[1]] = type;
428
-	} else if ($(".key .active").find("[data-grid-item]").attr("data-grid-item") != undefined) {
429
-		var type = $(".key .active [data-grid-item]").attr("data-grid-item");
430
-		if (type == "undefined") type = undefined;
431
-		console.log(type);
432
-		grid.gridItems[cell[0]][cell[1]] = type;
433
-	} 
434
-	
435
-	grid.draw();
436
-}
384
+};

+ 3 - 0
modules/gameMap/module.gameMap.html

@@ -0,0 +1,3 @@
1
+<script id="Map-Container" type="text/x-handlebars-template">
2
+	<canvas id="map" width="856px" height="571px"></canvas>
3
+</script>

+ 56 - 0
modules/gameMap/module.gameMap.js

@@ -0,0 +1,56 @@
1
+var gameMap = function () {};
2
+
3
+gameMap.prototype = {
4
+	gameModule: true,
5
+	includes: [
6
+		"modules/gameMap/assets.js",
7
+		"modules/gameMap/map.js"
8
+	],
9
+	grid: null,
10
+	
11
+	construct: function () {
12
+		var self = this;
13
+		app.parseTemplate("Map-Container", app.gameArea, {});
14
+		self.grid = new Grid();
15
+		self.binds();
16
+	},
17
+
18
+	binds: function () {
19
+		var self = this;
20
+
21
+		$(".key tr:not(.title)").bind("click", function () {
22
+			$(".key .active").removeClass("active");
23
+			$(this).addClass("active");
24
+			self.grid.canZoom = $(this).hasClass("can-zoom");
25
+		});
26
+
27
+		$("#map").bind("mousedown", function (e) {
28
+			if (self.grid.canZoom) return;
29
+			drawGrid(e);
30
+		});
31
+
32
+		$("#map").bind("mousemove", function (e) {
33
+			if (self.grid.canZoom) return;
34
+			if (!self.grid.click) return;
35
+			drawGrid(e);
36
+		});
37
+		function drawGrid(e) {
38
+
39
+			var cell = self.grid.getCell(e.offsetX, e.offsetY);
40
+
41
+			if ($(".key .active").find("[data-grid-type]").attr("data-grid-type") != undefined) {
42
+				var type = $(".key .active [data-grid-type]").attr("data-grid-type");
43
+				if (type == "undefined") type = undefined;
44
+				console.log(type);
45
+				self.grid.grid[cell[0]][cell[1]] = type;
46
+			} else if ($(".key .active").find("[data-grid-item]").attr("data-grid-item") != undefined) {
47
+				var type = $(".key .active [data-grid-item]").attr("data-grid-item");
48
+				if (type == "undefined") type = undefined;
49
+				console.log(type);
50
+				self.grid.gridItems[cell[0]][cell[1]] = type;
51
+			} 
52
+
53
+			self.grid.draw();
54
+		}
55
+	}
56
+}

modules/map/new_map.css → modules/gameMap/new_map.css


+ 1 - 1
modules/index/module.index.html

@@ -16,7 +16,7 @@
16 16
 
17 17
     <div class="text-center">
18 18
         <a href="#">
19
-            <button class="button button-large">
19
+            <button class="button button-large" data-execute-module="game">
20 20
                 Play The Battlefield
21 21
             </button>
22 22
         </a>

+ 3 - 1
modules/index/module.index.js

@@ -19,11 +19,13 @@ index.prototype = {
19 19
 
20 20
             app.api("/user/info", function (user_data) {
21 21
                 if (user_data.error == undefined) {
22
+                    app.user = user_data;
22 23
                     self.showRegisterForm(false);
23 24
                     user_data.admin = app.checkAccess("admin", user_data.roles);
24 25
                     app.parseTemplate("Loggedin", $(".login"), user_data);
25 26
                     self.loggedinBinds(user_data);
26 27
                 } else {
28
+                    app.user = false;
27 29
                     self.showRegisterForm(true);
28 30
                     app.parseTemplate("Login-Form", $(".login"), {});
29 31
                     self.loginBinds();
@@ -194,7 +196,7 @@ index.prototype = {
194 196
 
195 197
             var usernameElement = $('[name="username"]');
196 198
             var passwordElement = $('[name="password"]');
197
-            var bothElement = $('[name="password"],[name="username"]');
199
+            var bothElements = $('[name="password"],[name="username"]');
198 200
 
199 201
             var username = usernameElement.val();
200 202
             var password = passwordElement.val();

+ 0 - 110
modules/map/assets.js

@@ -1,110 +0,0 @@
1
-var AssetLoader = function () {
2
-	this.assets = {};
3
-};
4
-
5
-AssetLoader.prototype = {
6
-
7
-	assets: {},
8
-
9
-	loadAssets: function (assetsToLoad, callback) {
10
-		var self = this;
11
-		
12
-		if (assetsToLoad.length == 0) {
13
-			if (typeof callback == "function") {
14
-				callback(self.assets);
15
-				self.assets = {}; 
16
-				return;
17
-			}
18
-		}
19
-
20
-		var assetURL = assetsToLoad.shift();
21
-		var name = assetURL.replace(/0\.png/g, '');
22
-		name = name.replace(/\.png/g, '');
23
-		name = name.replace(/\//g, ' ');
24
-		name = name.replace(/\-/g, ' ');
25
-		name = name.replace(/\_/g, ' ');
26
-		name = name.replace(/\./g, ' ');
27
-		name = name.replace(/images map tiles/g, '');
28
-		name = name.replace(/images map /g, '');
29
-		name = name.trim();
30
-
31
-		if (typeof assetURL == "string") {
32
-
33
-			var asset = new Image();
34
-			asset.onload = function () {
35
-				self.assets[name] = asset;
36
-				self.loadAssets(assetsToLoad, callback);
37
-			};
38
-
39
-			asset.src = assetURL;
40
-		}
41
-
42
-	},
43
-
44
-	terrain: [
45
-		"../../images/map/tiles/shallow-deep0/curve_in/270/0.png",
46
-		"../../images/map/tiles/shallow-deep0/curve_in/90/0.png",
47
-		"../../images/map/tiles/shallow-deep0/curve_in/180/0.png",
48
-		"../../images/map/tiles/shallow-deep0/curve_in/0/0.png",
49
-		"../../images/map/tiles/shallow-deep0/straight/270/0.png",
50
-		"../../images/map/tiles/shallow-deep0/straight/90/0.png",
51
-		"../../images/map/tiles/shallow-deep0/straight/180/0.png",
52
-		"../../images/map/tiles/shallow-deep0/straight/0/0.png",
53
-		"../../images/map/tiles/shallow-deep0/curve_out/270/0.png",
54
-		"../../images/map/tiles/shallow-deep0/curve_out/90/0.png",
55
-		"../../images/map/tiles/shallow-deep0/curve_out/180/0.png",
56
-		"../../images/map/tiles/shallow-deep0/curve_out/0/0.png",
57
-		"../../images/map/tiles/beach-shallow0/curve_in/270/0.png",
58
-		"../../images/map/tiles/beach-shallow0/curve_in/90/0.png",
59
-		"../../images/map/tiles/beach-shallow0/curve_in/180/0.png",
60
-		"../../images/map/tiles/beach-shallow0/curve_in/0/0.png",
61
-		"../../images/map/tiles/beach-shallow0/straight/270/0.png",
62
-		"../../images/map/tiles/beach-shallow0/straight/90/0.png",
63
-		"../../images/map/tiles/beach-shallow0/straight/180/0.png",
64
-		"../../images/map/tiles/beach-shallow0/straight/0/0.png",
65
-		"../../images/map/tiles/beach-shallow0/curve_out/270/0.png",
66
-		"../../images/map/tiles/beach-shallow0/curve_out/90/0.png",
67
-		"../../images/map/tiles/beach-shallow0/curve_out/180/0.png",
68
-		"../../images/map/tiles/beach-shallow0/curve_out/0/0.png",
69
-		"../../images/map/tiles/grass0/straight/0/0.png",
70
-		"../../images/map/tiles/grass2/straight/0/0.png",
71
-		"../../images/map/tiles/grass3/straight/0/0.png",
72
-		"../../images/map/tiles/grass1/straight/0/0.png",
73
-		"../../images/map/tiles/grass4/straight/0/0.png",
74
-		"../../images/map/tiles/grass-beach0/curve_in/270/0.png",
75
-		"../../images/map/tiles/grass-beach0/curve_in/90/0.png",
76
-		"../../images/map/tiles/grass-beach0/curve_in/180/0.png",
77
-		"../../images/map/tiles/grass-beach0/curve_in/0/0.png",
78
-		"../../images/map/tiles/grass-beach0/straight/270/0.png",
79
-		"../../images/map/tiles/grass-beach0/straight/90/0.png",
80
-		"../../images/map/tiles/grass-beach0/straight/180/0.png",
81
-		"../../images/map/tiles/grass-beach0/straight/0/0.png",
82
-		"../../images/map/tiles/grass-beach0/curve_out/270/0.png",
83
-		"../../images/map/tiles/grass-beach0/curve_out/90/0.png",
84
-		"../../images/map/tiles/grass-beach0/curve_out/180/0.png",
85
-		"../../images/map/tiles/grass-beach0/curve_out/0/0.png",
86
-		"../../images/map/tiles/grass5/straight/0/0.png",
87
-		"../../images/map/tiles/beach0/straight/0/0.png",
88
-		"../../images/map/tiles/deep0/straight/0/0.png",
89
-		"../../images/map/tiles/shallow0/straight/0/0.png",
90
-	], 
91
-
92
-	items: [
93
-		"../../images/map/tree.png",
94
-		"../../images/map/tree2.png",
95
-		"../../images/map/tree3.png",
96
-		"../../images/map/bush.png",
97
-		"../../images/map/bush2.png",
98
-		"../../images/map/bush3.png",
99
-		"../../images/map/antitank.png",
100
-		"../../images/map/outpost.png",
101
-		"../../images/map/Base1.png",
102
-		"../../images/map/Base2.png",
103
-		"../../images/map/Base3.png",
104
-		"../../images/map/Bunker.png",
105
-		"../../images/map/OilMine.png",
106
-		"../../images/map/Outpost.png",
107
-		"../../images/map/Outpostwithspace.png",
108
-		"../../images/map/Tower.png",
109
-	]
110
-};