started to implement the map into the game

Chris Day 2 years ago
parent
commit
a38284df44

+ 10 - 0
css/style.css

@@ -79,6 +79,16 @@ hr {
79 79
 .nav .logo {
80 80
     height: 102px;
81 81
 }
82
+.nav .logo_centered {
83
+    width: 125px;
84
+    height: 102px;
85
+    margin: auto;
86
+    display: block;
87
+}
88
+
89
+.nav > h1 {
90
+    text-align: center;
91
+}
82 92
 
83 93
 .nav .login {
84 94
     float: right;

+ 82 - 13
modules/gameMap/assets.js

@@ -6,9 +6,22 @@ AssetLoader.prototype = {
6 6
 
7 7
 	assets: {},
8 8
 
9
-	loadAssets: function (assetsToLoad, callback) {
9
+	fixName: function (old_name) {
10
+		var name = old_name.replace(/0\.png/g, '');
11
+		name = name.replace(/\.png/g, '');
12
+		name = name.replace(/\//g, ' ');
13
+		name = name.replace(/\-/g, ' ');
14
+		name = name.replace(/\_/g, ' ');
15
+		name = name.replace(/\./g, ' ');
16
+		name = name.replace(/images map tiles/g, '');
17
+		name = name.replace(/images map /g, '');
18
+		name = name.trim();
19
+		return name;
20
+	},
21
+
22
+	loadAssets: function (path, assetsToLoad, callback) {
10 23
 		var self = this;
11
-		
24
+
12 25
 		if (assetsToLoad.length == 0) {
13 26
 			if (typeof callback == "function") {
14 27
 				callback(self.assets);
@@ -18,22 +31,14 @@ AssetLoader.prototype = {
18 31
 		}
19 32
 
20 33
 		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
-
34
+		assetURL = path + assetURL;
31 35
 		if (typeof assetURL == "string") {
32 36
 
37
+			var name = self.fixName(assetURL);
33 38
 			var asset = new Image();
34 39
 			asset.onload = function () {
35 40
 				self.assets[name] = asset;
36
-				self.loadAssets(assetsToLoad, callback);
41
+				self.loadAssets(path, assetsToLoad, callback);
37 42
 			};
38 43
 
39 44
 			asset.src = assetURL;
@@ -41,6 +46,70 @@ AssetLoader.prototype = {
41 46
 
42 47
 	},
43 48
 
49
+	generateSQL: function () {
50
+		var self = this;
51
+		self.sql = self.terrain.map(function (t) {
52
+			var parts = t.split("/");
53
+			var types = parts[3].replace(/[0-9]/g, "").split("-");
54
+
55
+			/* 
56
+				curve_out:     type = [1] subtype = [0] 0 = SE 270 = SW 90 = NE 180 = NW
57
+				curve_in:      type = [0] subtype = [1] 0 = SE 270 = SW 90 = NE 180 = NW
58
+				streight:      type = [0] subtype = [1] 0 =  W 270 = N  90 =  S 180 =  E 
59
+			*/
60
+
61
+			if (types[1]) {	
62
+				switch (parts[4]) {
63
+					case "curve_in": 
64
+						switch (parts[5]) {
65
+							case "0": var dir = "NW"; break;
66
+							case "270": var dir = "NE"; break;
67
+							case "90": var dir = "SW"; break;
68
+							case "180": var dir = "SE"; break;
69
+						}
70
+					break;
71
+					case "curve_out":
72
+						types = types.reverse();
73
+						switch (parts[5]) {
74
+							case "0": var dir = "SE"; break;
75
+							case "270": var dir = "SW"; break;
76
+							case "90": var dir = "NE"; break;
77
+							case "180": var dir = "NW"; break; 
78
+						}
79
+					break;
80
+					case "straight": 
81
+						switch (parts[5]) {
82
+							case "0": var dir = "W"; break;
83
+							case "270": var dir = "N"; break;
84
+							case "90": var dir = "S"; break;
85
+							case "180": var dir = "E"; break;
86
+						}
87
+					break;
88
+				}
89
+			}
90
+
91
+			return "("+[
92
+				"NULL",
93
+				"'" + types[0] + ((dir)?" -> " + dir + " -> " + types[1]:"") + "'",
94
+				"'" + self.fixName(t) + "'",
95
+				self.typeToID(types[0]), 
96
+				self.typeToID(types[1]), 
97
+				dir?"'" + dir + "'":"''"
98
+			].join(",")+")"
99
+
100
+		})
101
+	},
102
+
103
+	typeToID: function (name) {
104
+		switch (name) {
105
+			case "grass": return 1; break;
106
+			case "beach": return 2; break;
107
+			case "shallow": return 3; break;
108
+			case "deep": return 4; break;
109
+			default: return "''"; break;
110
+		}
111
+	},
112
+
44 113
 	terrain: [
45 114
 		"images/map/tiles/shallow-deep0/curve_in/270/0.png",
46 115
 		"images/map/tiles/shallow-deep0/curve_in/90/0.png",

+ 167 - 142
modules/gameMap/map.html

@@ -1,146 +1,171 @@
1 1
 <!doctype html>
2 2
 <html>
3
-    <head>
4
-        <meta charset="UTF-8">
5
-        <title>Map Maker V1.0.0</title>
6
-        <link href="new_map.css" rel="stylesheet" />
7
-    </head>
8
-    <body>
9
-        <br />
10
-        <canvas id="map" width="878px" height="600px"></canvas>
3
+<head>
4
+	<meta charset="UTF-8">
5
+	<title>Map Maker V1.0.0</title>
6
+	<link href="../../css/style.css" rel="stylesheet" />
7
+	<link href="new_map.css" rel="stylesheet" />
8
+</head>
9
+<body>
11 10
 
12
-        <div class="key">
13
-            <table>
14
-                <tr>
15
-                    <td colspan="4"><div class="title"><strong>Tiles</strong></div></td>
16
-                    <td colspan="4"><div class="title"><strong>Items/Buildings</strong></div></td>
17
-                </tr>
18
-                <tr>
19
-                    <td><img src="../../images/map/tiles/shallow0/straight/0/0.png" data-grid-type="shallow0 straight 0" width="24px"></td>
20
-                    <td><img src="../../images/map/tiles/deep0/straight/0/0.png" data-grid-type="deep0 straight 0" width="24px"></td>
21
-                    <td><img src="../../images/map/tiles/beach0/straight/0/0.png" data-grid-type="beach0 straight 0" width="24px"></td>
22
-                    <td><img src="../../images/map/tiles/grass5/straight/0/0.png" data-grid-type="grass5 straight 0" width="24px"></td>
23
-                    <td><img src="../../images/map/antitank.png" data-grid-item="antitank" width="24px"></td>
24
-                    <td><img src="../../images/map/bush3.png" data-grid-item="bush3" width="24px"></td>
25
-                    <td colspan="2" rowspan="2"><img src="../../images/map/Base1.png" data-grid-item="Base1" width="57px"></td>
26
-                </tr>
27
-                <tr>
28
-                    <td><img src="../../images/map/tiles/grass-beach0/curve_out/0/0.png" data-grid-type="grass beach0 curve out 0" width="24px"></td>
29
-                    <td><img src="../../images/map/tiles/grass-beach0/curve_out/270/0.png" data-grid-type="grass beach0 curve out 270" width="24px"></td>
30
-                    <td><img src="../../images/map/tiles/grass-beach0/curve_in/180/0.png" data-grid-type="grass beach0 curve in 180" width="24px"></td>
31
-                    <td><img src="../../images/map/tiles/grass-beach0/curve_in/90/0.png" data-grid-type="grass beach0 curve in 90" width="24px"></td>
32
-                    <td><img src="../../images/map/bush2.png" data-grid-item="bush2" width="24px"></td>
33
-                    <td><img src="../../images/map/bush.png" data-grid-item="bush" width="24px"></td>
34
-                </tr>
35
-                <tr>
36
-                    <td><img src="../../images/map/tiles/grass-beach0/curve_out/90/0.png" data-grid-type="grass beach0 curve out 90" width="24px"></td>
37
-                    <td><img src="../../images/map/tiles/grass-beach0/curve_out/180/0.png" data-grid-type="grass beach0 curve out 180" width="24px"></td>
38
-                    <td><img src="../../images/map/tiles/grass-beach0/curve_in/270/0.png" data-grid-type="grass beach0 curve in 270" width="24px"></td>
39
-                    <td><img src="../../images/map/tiles/grass-beach0/curve_in/0/0.png" data-grid-type="grass beach0 curve in 0" width="24px"></td>
40
-                    <td><img src="../../images/map/tree3.png" data-grid-item="tree3" width="24px"></td>
41
-                    <td><img src="../../images/map/tree2.png" data-grid-item="tree2" width="24px"></td>
42
-                    <td colspan="2" rowspan="2"><img src="../../images/map/Base2.png" data-grid-item="Base2" width="57px"></td>
43
-                </tr>
44
-                <tr>
45
-                    <td><img src="../../images/map/tiles/grass-beach0/straight/0/0.png" data-grid-type="grass beach0 straight 0" width="24px"></td>
46
-                    <td><img src="../../images/map/tiles/grass-beach0/straight/180/0.png" data-grid-type="grass beach0 straight 180" width="24px"></td>
47
-                    <td><img src="../../images/map/tiles/grass-beach0/straight/270/0.png" data-grid-type="grass beach0 straight 270" width="24px"></td>
48
-                    <td><img src="../../images/map/tiles/grass-beach0/straight/90/0.png" data-grid-type="grass beach0 straight 90" width="24px"></td>
49
-                    <td><img src="../../images/map/tree.png" data-grid-item="tree" width="24px"></td>
50
-                    <td></td>
51
-                </tr>
52
-                <tr>
53
-                    <td><img src="../../images/map/tiles/grass1/straight/0/0.png" data-grid-type="grass1 straight 0" width="24px"></td>
54
-                    <td><img src="../../images/map/tiles/grass2/straight/0/0.png" data-grid-type="grass2 straight 0" width="24px"></td>
55
-                    <td><img src="../../images/map/tiles/grass3/straight/0/0.png" data-grid-type="grass3 straight 0" width="24px"></td>
56
-                    <td><img src="../../images/map/tiles/grass4/straight/0/0.png" data-grid-type="grass4 straight 0" width="24px"></td>
57
-                    <td colspan="2" rowspan="2"><img src="../../images/map/Outpost.png" data-grid-item="Outpost" width="57px"></td>
58
-                    <td colspan="2" rowspan="2"><img src="../../images/map/Base3.png" data-grid-item="Base3" width="57px"></td>
59
-                </tr>
60
-                <tr>
61
-                    <td><img src="../../images/map/tiles/beach-shallow0/curve_out/0/0.png" data-grid-type="beach shallow0 curve out 0" width="24px"></td>
62
-                    <td><img src="../../images/map/tiles/beach-shallow0/curve_out/270/0.png" data-grid-type="beach shallow0 curve out 270" width="24px"></td>
63
-                    <td><img src="../../images/map/tiles/beach-shallow0/curve_in/180/0.png" data-grid-type="beach shallow0 curve in 180" width="24px"></td>
64
-                    <td><img src="../../images/map/tiles/beach-shallow0/curve_in/90/0.png" data-grid-type="beach shallow0 curve in 90" width="24px"></td>
65
-                </tr>
66
-                <tr>
67
-                    <td><img src="../../images/map/tiles/beach-shallow0/curve_out/90/0.png" data-grid-type="beach shallow0 curve out 90" width="24px"></td>
68
-                    <td><img src="../../images/map/tiles/beach-shallow0/curve_out/180/0.png" data-grid-type="beach shallow0 curve out 180" width="24px"></td>
69
-                    <td><img src="../../images/map/tiles/beach-shallow0/curve_in/270/0.png" data-grid-type="beach shallow0 curve in 270" width="24px"></td>
70
-                    <td><img src="../../images/map/tiles/beach-shallow0/curve_in/0/0.png" data-grid-type="beach shallow0 curve in 0" width="24px"></td>
71
-                    <td colspan="2" rowspan="2"><img src="../../images/map/Outpostwithspace.png" data-grid-item="Outpostwithspace" width="57px"></td>
72
-                    <td colspan="2" rowspan="2"><img src="../../images/map/OilMine.png" data-grid-item="OilMine" width="57px"></td>
73
-                </tr>
74
-                <tr>
75
-                    <td><img src="../../images/map/tiles/beach-shallow0/straight/0/0.png" data-grid-type="beach shallow0 straight 0" width="24px"></td>
76
-                    <td><img src="../../images/map/tiles/beach-shallow0/straight/180/0.png" data-grid-type="beach shallow0 straight 180" width="24px"></td>
77
-                    <td><img src="../../images/map/tiles/beach-shallow0/straight/270/0.png" data-grid-type="beach shallow0 straight 270" width="24px"></td>
78
-                    <td><img src="../../images/map/tiles/beach-shallow0/straight/90/0.png" data-grid-type="beach shallow0 straight 90" width="24px"></td>
79
-                </tr>
80
-                <tr>
81
-                    <td><img src="../../images/map/tiles/shallow-deep0/curve_out/0/0.png" data-grid-type="shallow deep0 curve out 0" width="24px"></td>
82
-                    <td><img src="../../images/map/tiles/shallow-deep0/curve_out/270/0.png" data-grid-type="shallow deep0 curve out 270" width="24px"></td>
83
-                    <td><img src="../../images/map/tiles/shallow-deep0/curve_in/180/0.png" data-grid-type="shallow deep0 curve in 180" width="24px"></td>
84
-                    <td><img src="../../images/map/tiles/shallow-deep0/curve_in/90/0.png" data-grid-type="shallow deep0 curve in 90" width="24px"></td>
85
-                    <td colspan="2" rowspan="2"><img src="../../images/map/Tower.png" data-grid-item="Tower" width="57px"></td>
86
-                    <td colspan="2" rowspan="2"><img src="../../images/map/Bunker.png" data-grid-item="Bunker" width="57px"></td>
87
-                </tr>
88
-                <tr>
89
-                    <td><img src="../../images/map/tiles/shallow-deep0/curve_out/90/0.png" data-grid-type="shallow deep0 curve out 90" width="24px"></td>
90
-                    <td><img src="../../images/map/tiles/shallow-deep0/curve_out/180/0.png" data-grid-type="shallow deep0 curve out 180" width="24px"></td>
91
-                    <td><img src="../../images/map/tiles/shallow-deep0/curve_in/270/0.png" data-grid-type="shallow deep0 curve in 270" width="24px"></td>
92
-                    <td><img src="../../images/map/tiles/shallow-deep0/curve_in/0/0.png" data-grid-type="shallow deep0 curve in 0" width="24px"></td>
93
-                </tr>
94
-                <tr>
95
-                    <td><img src="../../images/map/tiles/shallow-deep0/straight/0/0.png" data-grid-type="shallow deep0 straight 0" width="24px"></td>
96
-                    <td><img src="../../images/map/tiles/shallow-deep0/straight/180/0.png" data-grid-type="shallow deep0 straight 180" width="24px"></td>
97
-                    <td><img src="../../images/map/tiles/shallow-deep0/straight/270/0.png" data-grid-type="shallow deep0 straight 270" width="24px"></td>
98
-                    <td><img src="../../images/map/tiles/shallow-deep0/straight/90/0.png" data-grid-type="shallow deep0 straight 90" width="24px"></td>
99
-                    <td></td>
100
-                    <td></td>
101
-                    <td></td>
102
-                    <td></td>
103
-                </tr>
104
-                <tr>
105
-                    <td colspan="4">
106
-                        <span data-grid-type="undefined">X - Remove Tile</span>
107
-                    </td>
108
-                    <td colspan="4">
109
-                        <span data-grid-item="undefined">X - Remove Item</span>
110
-                    </td>
111
-                </tr>
112
-                <tr>
113
-                    <td colspan="8" class="active can-zoom">
114
-                        + - Enable Zoom
115
-                    </td>
116
-                </tr>
117
-                <tr>
118
-                    <td colspan="8" class="title">
119
-                        <strong>Save/Load</strong>
120
-                    </td>
121
-                <tr>
122
-                    <td colspan="6">
123
-                        <input type="text" name="mapName" placeholder="Map Name" /> 
124
-                    </td>
125
-                    <td colspan="2">
126
-                        <button class="save">Save</button>
127
-                    </td>
128
-                </tr>
129
-                <tr>
130
-                    <td colspan="6">
131
-                        <input type="file" name="loadFile" placeholder="Map Name" />
132
-                    </td>
133
-                    <td colspan="2">
134
-                        <button class="load">Load</button>
135
-                    </td>
136
-                </tr>
137
-                
138
-            </table>
139
-        </div>
11
+	<div class="nav box">
12
+		<img src="../../images/logo.png" alt="The Battlefield - Its Time To Fight" class="logo_centered">
13
+		<h1>The Battlefield Map Maker <small><br />V1.0.0</small></h1>
14
+	</div>
15
+	<table class="container">
16
+		<tr>
17
+			<td>
18
+				<canvas id="map" width="878px" height="600px"></canvas>
19
+			</td>
20
+			<td>
21
+				<div class="key">
22
+					<table>
23
+						<tr>
24
+							<td colspan="4"><div class="title"><strong>Tiles</strong></div></td>
25
+							<td colspan="4"><div class="title"><strong>Items/Buildings</strong></div></td>
26
+						</tr>
27
+						<tr>
28
+							<td><img src="../../images/map/tiles/shallow0/straight/0/0.png" data-grid-type="shallow0 straight 0" width="24px"></td>
29
+							<td><img src="../../images/map/tiles/deep0/straight/0/0.png" data-grid-type="deep0 straight 0" width="24px"></td>
30
+							<td><img src="../../images/map/tiles/beach0/straight/0/0.png" data-grid-type="beach0 straight 0" width="24px"></td>
31
+							<td><img src="../../images/map/tiles/grass5/straight/0/0.png" data-grid-type="grass5 straight 0" width="24px"></td>
32
+							<td><img src="../../images/map/antitank.png" data-grid-item="antitank" width="24px"></td>
33
+							<td><img src="../../images/map/bush3.png" data-grid-item="bush3" width="24px"></td>
34
+							<td colspan="2" rowspan="2"><img src="../../images/map/Base1.png" data-grid-item="Base1" width="57px"></td>
35
+						</tr>
36
+						<tr>
37
+							<td><img src="../../images/map/tiles/grass-beach0/curve_out/0/0.png" data-grid-type="grass beach0 curve out 0" width="24px"></td>
38
+							<td><img src="../../images/map/tiles/grass-beach0/curve_out/270/0.png" data-grid-type="grass beach0 curve out 270" width="24px"></td>
39
+							<td><img src="../../images/map/tiles/grass-beach0/curve_in/180/0.png" data-grid-type="grass beach0 curve in 180" width="24px"></td>
40
+							<td><img src="../../images/map/tiles/grass-beach0/curve_in/90/0.png" data-grid-type="grass beach0 curve in 90" width="24px"></td>
41
+							<td><img src="../../images/map/bush2.png" data-grid-item="bush2" width="24px"></td>
42
+							<td><img src="../../images/map/bush.png" data-grid-item="bush" width="24px"></td>
43
+						</tr>
44
+						<tr>
45
+							<td><img src="../../images/map/tiles/grass-beach0/curve_out/90/0.png" data-grid-type="grass beach0 curve out 90" width="24px"></td>
46
+							<td><img src="../../images/map/tiles/grass-beach0/curve_out/180/0.png" data-grid-type="grass beach0 curve out 180" width="24px"></td>
47
+							<td><img src="../../images/map/tiles/grass-beach0/curve_in/270/0.png" data-grid-type="grass beach0 curve in 270" width="24px"></td>
48
+							<td><img src="../../images/map/tiles/grass-beach0/curve_in/0/0.png" data-grid-type="grass beach0 curve in 0" width="24px"></td>
49
+							<td><img src="../../images/map/tree3.png" data-grid-item="tree3" width="24px"></td>
50
+							<td><img src="../../images/map/tree2.png" data-grid-item="tree2" width="24px"></td>
51
+							<td colspan="2" rowspan="2"><img src="../../images/map/Base2.png" data-grid-item="Base2" width="57px"></td>
52
+						</tr>
53
+						<tr>
54
+							<td><img src="../../images/map/tiles/grass-beach0/straight/0/0.png" data-grid-type="grass beach0 straight 0" width="24px"></td>
55
+							<td><img src="../../images/map/tiles/grass-beach0/straight/180/0.png" data-grid-type="grass beach0 straight 180" width="24px"></td>
56
+							<td><img src="../../images/map/tiles/grass-beach0/straight/270/0.png" data-grid-type="grass beach0 straight 270" width="24px"></td>
57
+							<td><img src="../../images/map/tiles/grass-beach0/straight/90/0.png" data-grid-type="grass beach0 straight 90" width="24px"></td>
58
+							<td><img src="../../images/map/tree.png" data-grid-item="tree" width="24px"></td>
59
+							<td></td>
60
+						</tr>
61
+						<tr>
62
+							<td><img src="../../images/map/tiles/grass1/straight/0/0.png" data-grid-type="grass1 straight 0" width="24px"></td>
63
+							<td><img src="../../images/map/tiles/grass2/straight/0/0.png" data-grid-type="grass2 straight 0" width="24px"></td>
64
+							<td><img src="../../images/map/tiles/grass3/straight/0/0.png" data-grid-type="grass3 straight 0" width="24px"></td>
65
+							<td><img src="../../images/map/tiles/grass4/straight/0/0.png" data-grid-type="grass4 straight 0" width="24px"></td>
66
+							<td colspan="2" rowspan="2"><img src="../../images/map/Outpost.png" data-grid-item="Outpost" width="57px"></td>
67
+							<td colspan="2" rowspan="2"><img src="../../images/map/Base3.png" data-grid-item="Base3" width="57px"></td>
68
+						</tr>
69
+						<tr>
70
+							<td><img src="../../images/map/tiles/beach-shallow0/curve_out/0/0.png" data-grid-type="beach shallow0 curve out 0" width="24px"></td>
71
+							<td><img src="../../images/map/tiles/beach-shallow0/curve_out/270/0.png" data-grid-type="beach shallow0 curve out 270" width="24px"></td>
72
+							<td><img src="../../images/map/tiles/beach-shallow0/curve_in/180/0.png" data-grid-type="beach shallow0 curve in 180" width="24px"></td>
73
+							<td><img src="../../images/map/tiles/beach-shallow0/curve_in/90/0.png" data-grid-type="beach shallow0 curve in 90" width="24px"></td>
74
+						</tr>
75
+						<tr>
76
+							<td><img src="../../images/map/tiles/beach-shallow0/curve_out/90/0.png" data-grid-type="beach shallow0 curve out 90" width="24px"></td>
77
+							<td><img src="../../images/map/tiles/beach-shallow0/curve_out/180/0.png" data-grid-type="beach shallow0 curve out 180" width="24px"></td>
78
+							<td><img src="../../images/map/tiles/beach-shallow0/curve_in/270/0.png" data-grid-type="beach shallow0 curve in 270" width="24px"></td>
79
+							<td><img src="../../images/map/tiles/beach-shallow0/curve_in/0/0.png" data-grid-type="beach shallow0 curve in 0" width="24px"></td>
80
+							<td colspan="2" rowspan="2"><img src="../../images/map/Outpostwithspace.png" data-grid-item="Outpostwithspace" width="57px"></td>
81
+							<td colspan="2" rowspan="2"><img src="../../images/map/OilMine.png" data-grid-item="OilMine" width="57px"></td>
82
+						</tr>
83
+						<tr>
84
+							<td><img src="../../images/map/tiles/beach-shallow0/straight/0/0.png" data-grid-type="beach shallow0 straight 0" width="24px"></td>
85
+							<td><img src="../../images/map/tiles/beach-shallow0/straight/180/0.png" data-grid-type="beach shallow0 straight 180" width="24px"></td>
86
+							<td><img src="../../images/map/tiles/beach-shallow0/straight/270/0.png" data-grid-type="beach shallow0 straight 270" width="24px"></td>
87
+							<td><img src="../../images/map/tiles/beach-shallow0/straight/90/0.png" data-grid-type="beach shallow0 straight 90" width="24px"></td>
88
+						</tr>
89
+						<tr>
90
+							<td><img src="../../images/map/tiles/shallow-deep0/curve_out/0/0.png" data-grid-type="shallow deep0 curve out 0" width="24px"></td>
91
+							<td><img src="../../images/map/tiles/shallow-deep0/curve_out/270/0.png" data-grid-type="shallow deep0 curve out 270" width="24px"></td>
92
+							<td><img src="../../images/map/tiles/shallow-deep0/curve_in/180/0.png" data-grid-type="shallow deep0 curve in 180" width="24px"></td>
93
+							<td><img src="../../images/map/tiles/shallow-deep0/curve_in/90/0.png" data-grid-type="shallow deep0 curve in 90" width="24px"></td>
94
+							<td colspan="2" rowspan="2"><img src="../../images/map/Tower.png" data-grid-item="Tower" width="57px"></td>
95
+							<td colspan="2" rowspan="2"><img src="../../images/map/Bunker.png" data-grid-item="Bunker" width="57px"></td>
96
+						</tr>
97
+						<tr>
98
+							<td><img src="../../images/map/tiles/shallow-deep0/curve_out/90/0.png" data-grid-type="shallow deep0 curve out 90" width="24px"></td>
99
+							<td><img src="../../images/map/tiles/shallow-deep0/curve_out/180/0.png" data-grid-type="shallow deep0 curve out 180" width="24px"></td>
100
+							<td><img src="../../images/map/tiles/shallow-deep0/curve_in/270/0.png" data-grid-type="shallow deep0 curve in 270" width="24px"></td>
101
+							<td><img src="../../images/map/tiles/shallow-deep0/curve_in/0/0.png" data-grid-type="shallow deep0 curve in 0" width="24px"></td>
102
+						</tr>
103
+						<tr>
104
+							<td><img src="../../images/map/tiles/shallow-deep0/straight/0/0.png" data-grid-type="shallow deep0 straight 0" width="24px"></td>
105
+							<td><img src="../../images/map/tiles/shallow-deep0/straight/180/0.png" data-grid-type="shallow deep0 straight 180" width="24px"></td>
106
+							<td><img src="../../images/map/tiles/shallow-deep0/straight/270/0.png" data-grid-type="shallow deep0 straight 270" width="24px"></td>
107
+							<td><img src="../../images/map/tiles/shallow-deep0/straight/90/0.png" data-grid-type="shallow deep0 straight 90" width="24px"></td>
108
+							<td></td>
109
+							<td></td>
110
+							<td></td>
111
+							<td></td>
112
+						</tr>
113
+						<tr>
114
+							<td colspan="4">
115
+								<span data-grid-type="undefined">X - Remove Tile</span>
116
+							</td>
117
+							<td colspan="4">
118
+								<span data-grid-item="undefined">X - Remove Item</span>
119
+							</td>
120
+						</tr>
121
+						<tr>
122
+							<td colspan="8" class="active can-zoom">
123
+								+ - Enable Zoom
124
+							</td>
125
+						</tr>
126
+						<tr>
127
+							<td colspan="4" class="toggle-grid">
128
+								Toggle Grid
129
+							</td>
130
+							<td colspan="4" class="fill-area">
131
+								Fill Area
132
+							</td>
133
+						</tr>
134
+						<tr>
135
+							<td colspan="8" class="title">
136
+								<strong>Save/Load</strong>
137
+							</td>
138
+							<tr>
139
+								<td colspan="6">
140
+									<input type="text" name="mapName" placeholder="Map Name" /> 
141
+								</td>
142
+								<td colspan="2">
143
+									<button class="save">Save</button>
144
+								</td>
145
+							</tr>
146
+							<tr>
147
+								<td colspan="6">
148
+									<input type="file" name="loadFile" placeholder="Map Name" />
149
+								</td>
150
+								<td colspan="2">
151
+									<button class="load">Load</button>
152
+								</td>
153
+							</tr>
140 154
 
141
-        <script src="../../js/3rdparty/jquery.min.js" type="application/javascript"></script>
142
-        <script src="../../js/3rdparty/download.js" type="application/javascript"></script>
143
-        <script src="assets.js" type="application/javascript"></script>
144
-        <script src="map.js" type="application/javascript"></script>
145
-    </body>
146
-</html>
155
+						</table>
156
+					</div>
157
+				</td>
158
+			</tr>
159
+		</table>
160
+
161
+		<script src="../../js/3rdparty/jquery.min.js" type="application/javascript"></script>
162
+		<script src="../../js/3rdparty/download.js" type="application/javascript"></script>
163
+		<script src="assets.js" type="application/javascript"></script>
164
+		<script src="map.js" type="application/javascript"></script>
165
+		<script>
166
+		var grid = new Grid(true, "../../");
167
+		grid.binds();
168
+		grid.mapMakerBinds();
169
+		</script>
170
+	</body>
171
+	</html>

+ 278 - 157
modules/gameMap/map.js

@@ -1,61 +1,66 @@
1
-var Grid = function () {
1
+var Grid = function (isMapMaker, path) {
2 2
 	var self = this;
3
-	self.element = document.getElementById("map")
4
-	self.setup(function () {
3
+	if (path) self.path = path;
4
+	this.isMapMaker = isMapMaker || false;
5
+	if (!this.isMapMaker) {
6
+		this.showGrid = false;
7
+	}
8
+	this.element = document.getElementById("map")
9
+	this.setup(function (terrainAssets) {
10
+		self.assets = terrainAssets;
11
+		if (self.isMapMaker) self.drawOptions();
5 12
 		self.draw();
6 13
 	});
7 14
 };
8
-
9 15
 Grid.prototype = {
10
-	
11 16
 	rows: 20,
12 17
 	columns: 30,
13
-
14
-	canZoom: true, 
15
-
18
+	canZoom: true,
19
+	showGrid: true,
20
+	path: "./", 
16 21
 	maxZoomCellSize: 256,
17
-
18 22
 	gridItems: [],
19 23
 	grid: [],
20
-
21
-	assetsToLoad: {
22
-		grass: "../../images/map/grass.png",
23
-		water: "../../images/map/water.png",
24
-		rock: "../../images/map/rock.png",
25
-		sand: "../../images/map/sand.png",
26
-		soil: "../../images/map/soil.png",
27
-
28
-		tree: "../../images/map/tree.png",
29
-		tree2: "../../images/map/tree2.png",
30
-		tree3: "../../images/map/tree3.png",
31
-		antitank: "../../images/map/antitank.png",
32
-		bush: "../../images/map/bush.png",
33
-		bush2: "../../images/map/bush2.png",
34
-		bush3: "../../images/map/bush3.png"
35
-	},
36
-
37 24
 	assets: {},
38
-
25
+	assetSize: {
26
+		"Base1": 6,
27
+		"Base2": 6,
28
+		"Base3": 6,
29
+		"Bunker": 2,
30
+		"OilMine": 3,
31
+		"Outpost": 4,
32
+		"Outpostwithspace": 4,
33
+		"Tower": 1,
34
+	},
39 35
 	setup: function (callback) {
36
+		var self = this;
40 37
 		this.ctx = this.element.getContext("2d");
41 38
 		this.fillGrid();
42
-		this.height = this.element.height - 1;
43
-		this.width = this.element.width - 1;
44
-		this.zoom = {
45
-			start: {
46
-				x: 0,
47
-				y: 0
48
-			},
49
-			end: {
50
-				x: this.width,
51
-				y: this.height 
52
-			}
53
-		};
54
-		this.ctx.translate(0.5, 0.5);
55
-		this.binds();
56
-		this.loadAssets(callback);
39
+		var itemAssets = new AssetLoader();
40
+		itemAssets.loadAssets(self.path, itemAssets.items, function (loadedAssets) {
41
+			self.itemAssets = loadedAssets;
42
+			var terrainAssets = new AssetLoader();
43
+			terrainAssets.loadAssets(self.path, terrainAssets.terrain, callback);
44
+			self.height = self.element.height - 1;
45
+			self.width = self.element.width - 1;
46
+			self.zoom = {
47
+				start: {
48
+					x: 0,
49
+					y: 0
50
+				},
51
+				end: {
52
+					x: self.width,
53
+					y: self.height 
54
+				}
55
+			};
56
+			self.ctx.translate(0.5, 0.5);
57
+			self.binds();
58
+		});
59
+	},
60
+	drawOptions: function () {
61
+		var self = this;
62
+		self.mapMakerBinds();
57 63
 	},
58
-
59 64
 	fillGrid: function () {
60 65
 		for (var r = 0; r<this.rows; r++) {
61 66
 			if (this.grid[r] == undefined) {
@@ -64,22 +69,150 @@ Grid.prototype = {
64 69
 			}
65 70
 			for (var c = 0; c<this.columns; c++) {
66 71
 				if (this.grid[r][c] == undefined) {
67
-					this.grid[r][c] = undefined;
68
-					this.gridItems[r][c] = undefined;
72
+					this.grid[r][c] = null;
73
+					this.gridItems[r][c] = null;
69 74
 				}
70 75
 			}
71 76
 		}
72 77
 	},
73
-
74
-	loadAssets: function (callback) {
78
+	mapMakerBinds: function () {
75 79
 		var self = this;
76
-		var assetLoader = new AssetLoader();
77
-		assetLoader.loadAssets(assetLoader.terrain, function (assets) {
78
-			self.assets = assets;
79
-			if (typeof callback == "function") callback();
80
+		
81
+		this.binds();
82
+		
83
+		$(".fill-area").unbind().bind("click", function () {
84
+			if ($(this).hasClass("active")) {
85
+				$(this).removeClass("active")
86
+			} else {
87
+				$(this).addClass("active")
88
+			}
89
+		});
90
+
91
+		$(".toggle-grid").unbind().bind("click", function () {
92
+			self.showGrid = !self.showGrid;
93
+			self.draw();
94
+		});
95
+
96
+		$(".key [data-grid-type], .key [data-grid-item], .can-zoom").unbind().bind("click", function () {
97
+			$(".key .active").removeClass("active");
98
+			$(this).parent().addClass("active");
99
+			self.canZoom = $(this).hasClass("can-zoom");
100
+			if (self.canZoom) $(this).addClass("active");
101
+		});
102
+		$("#map").bind("mousedown", function (e) {
103
+			if (self.canZoom) return;
104
+			self.draw();
105
+			drawGrid(e, self);
106
+		});
107
+		$("#map").bind("mousemove", function (e) {
108
+			if (self.canZoom) return;
109
+			self.drawItem(e);
110
+			if (!self.click) return;
111
+			drawGrid(e, self);
80 112
 		});
113
+		
114
+		function drawGrid(e, grid) {
115
+			var cell = grid.getCell(e.offsetX, e.offsetY);
116
+			if ($(".key .active").find("[data-grid-type]").attr("data-grid-type") != undefined) {
117
+				var type = $(".key .active [data-grid-type]").attr("data-grid-type");
118
+				if (type == "undefined") type = null;
119
+				grid.grid[cell[0]][cell[1]] = type;
120
+				if ($(".fill-area").hasClass("active")) {
121
+					self.fillGridType(cell[0], cell[1], type);
122
+				}
123
+			} else if ($(".key .active").find("[data-grid-item]").attr("data-grid-item") != undefined) {
124
+				if (grid.gridItems[cell[0]][cell[1]] == "reserved") return;
125
+				var type = $(".key .active [data-grid-item]").attr("data-grid-item");
126
+				if (type == "undefined") type = null;
127
+				var check = self.checkItemPlacment(cell[0], cell[1], type);
128
+				if (check) {
129
+					self.placeItem(cell[0], cell[1], type);
130
+				} else {
131
+				}
132
+			} 
133
+			grid.draw();
134
+		}
81 135
 	},
136
+	fillGridType: function (row, col, type) {
137
+		if (this.grid[row-1]) {
138
+			if (this.grid[row-1][col]===null) { this.grid[row-1][col]=type; this.fillGridType(row-1, col, type); }
139
+		}
140
+		if (this.grid[row+1]) {
141
+			if (this.grid[row+1][col]===null) { this.grid[row+1][col]=type; this.fillGridType(row+1, col, type); }
142
+		}
143
+			
144
+		if (this.grid[row][col+1]===null) { this.grid[row][col+1]=type; this.fillGridType(row, col+1, type); }
145
+		if (this.grid[row][col-1]===null) { this.grid[row][col-1]=type; this.fillGridType(row, col-1, type); }
82 146
 
147
+	},
148
+	drawItem: function (e) {
149
+		
150
+		if (self.canZoom) return;
151
+		var cell = grid.getCell(e.offsetX, e.offsetY);
152
+		var type = $(".active [data-grid-item]").attr("data-grid-item");
153
+		if (type == "undefined" || type === undefined) return this.draw();
154
+		var calc = this.calculateGrid();
155
+		var size = this.assetSize[type] || 1;
156
+		/* offset the canvas for the zoom */
157
+		this.draw();
158
+		this.ctx.save();
159
+		this.ctx.translate(calc.offsetX, calc.offsetY);
160
+		this.ctx.globalAlpha = 0.6;
161
+		var itemWidth = calc.boxWidth;
162
+		var itemHeight = calc.boxHeight;
163
+		if (this.assetSize[type]) {
164
+			itemWidth *= this.assetSize[type];
165
+			itemHeight *= this.assetSize[type];
166
+		}
167
+		var y = calc.boxHeight * cell[0];
168
+		var x = calc.boxWidth * cell[1];
169
+		this.ctx.drawImage(this.itemAssets[type], x, y, itemWidth, itemHeight);
170
+		for (var c = 0; c<size; c++) {
171
+			for (var r = 0; r<size; r++) {
172
+				if (this.gridItems[cell[0] + c] !== undefined && this.gridItems[cell[0] + c][cell[1]+r] !== undefined) {
173
+					var color = (this.gridItems[cell[0] + c][cell[1]+r] === null)?"rgba(0, 255, 0, 0.3)":"rgba(255, 0, 0, 0.3)";
174
+				} else {
175
+					continue;
176
+				}
177
+				this.ctx.fillStyle = color;
178
+				this.ctx.fillRect(x + (r*calc.boxWidth), y + (c*calc.boxHeight), calc.boxWidth, calc.boxHeight);
179
+			}
180
+		}
181
+		this.ctx.restore();
182
+	},
183
+	checkItemPlacment: function (column, row, type) {
184
+		if (type == null) return true;
185
+		var size = (this.assetSize[type] || 1) - 1;
186
+		
187
+		for (var c = 0; c<=size; c++) {
188
+			for (var r = 0; r<=size; r++) {
189
+				if (this.gridItems[column+c] !== undefined && this.gridItems[column+c][row+r] !== undefined) {
190
+					var gridType = this.gridItems[column+c][row+r];
191
+					if (gridType !== null) return false;
192
+				} else {
193
+					return false;
194
+				}
195
+			}
196
+		}
197
+		return true;
198
+	},
199
+	placeItem: function (column, row, type) {
200
+		var oldItem = this.gridItems[column][row];
201
+		/* Remove old item */ 
202
+		var oldSize = this.assetSize[oldItem] || 1;
203
+		this.fillGridItems(column, row, null, oldSize);
204
+		/* Add new item */
205
+		var newSize = this.assetSize[type] || 1;
206
+		this.fillGridItems(column, row, "reserved", newSize);
207
+		this.fillGridItems(column, row, type, 1);
208
+	},
209
+	fillGridItems: function (column, row, type, size) {
210
+		for (var c = 0; c<size; c++) {
211
+			for (var r = 0; r<size; r++) {
212
+				this.gridItems[column + c][row+r] = type;
213
+			}
214
+		}
215
+	},
83 216
 	binds: function () {
84 217
 		var self = this;
85 218
 
@@ -103,16 +236,38 @@ Grid.prototype = {
103 236
 			self.mouseUpEvent(self.fixXY(e));
104 237
 		});
105 238
 
106
-
239
+		$(".load").unbind().bind("click", function () {
240
+			var reader = new FileReader();
241
+			reader.onload = function (data) {
242
+				var result = JSON.parse(data.target.result);
243
+				self.grid = result.grid;
244
+				self.gridItems = result.gridItems;
245
+				$("[name='mapName']").val(result.description);
246
+				self.draw();
247
+			};
248
+			reader.readAsText($("[name='loadFile']")[0].files[0]);
249
+		});
250
+		$(".save").unbind().bind("click", function () {
251
+			var name = $("[name='mapName']").val();
252
+			if (name.length <= 3) {
253
+				alert("Map name must be atleast 3 characters long");
254
+			} else {
255
+				var saveData = {
256
+					grid: self.grid, 
257
+					gridItems: self.gridItems, 
258
+					description: name
259
+				};
260
+				download(JSON.stringify(saveData), name+".map.json", "text/plain");
261
+			}
262
+		});
107 263
 	},
108
-
109
-	fixXY: function (e) {
110
-		if (e.x && e.y) return e;
111
-		e.x = e.pageX - this.element.offsetLeft 
112
-		e.y = e.pageY - this.element.offsetTop
113
-		return e;
264
+	preventTouchScroll: function (event) {
265
+		var self = this;
266
+		if (event.target.nodeName == "CANVAS") {
267
+			event.preventDefault();
268
+			self.mouseDownEvent(event);
269
+		}	
114 270
 	},
115
-
116 271
 	mouseDownEvent: function(event) {
117 272
 		this.click = {
118 273
 			x: event.x,
@@ -122,7 +277,6 @@ Grid.prototype = {
122 277
 		this.element.style.cursor = "move";
123 278
 		this.old_zoom = this.cloneObject(this.zoom);
124 279
 	},
125
-
126 280
 	mouseMoveEvent: function(event) {
127 281
 		if (this.click && this.canZoom) {
128 282
 			this.zoom = this.cloneObject(this.old_zoom);
@@ -137,45 +291,35 @@ Grid.prototype = {
137 291
 			this.clampZoom();
138 292
 			this.draw();
139 293
 		}
140
-
141 294
 	},
142
-
143 295
 	getCell: function (x, y) {
144
-
145 296
 		/* Calculate the zoom multiplier */
146 297
 		var zoomX =  this.width / (this.zoom.end.x - this.zoom.start.x);
147 298
 		var zoomY =  this.height / (this.zoom.end.y - this.zoom.start.y);
148
-		
149 299
 		var boxWidth = this.width / this.columns * zoomX;
150 300
 		var boxHeight = this.height / this.rows * zoomY;
151
-		
152 301
 		var offsetX = Math.abs(Math.round(0-(this.zoom.start.x * zoomX)));
153 302
 		var offsetY = Math.abs(Math.round(0-(this.zoom.start.y * zoomY)));
154
-
155 303
 		var row = Math.floor((offsetX + x) / boxWidth);
156 304
 		var column = Math.floor((offsetY + y) / boxHeight);
157
-
158 305
 		return [column, row];
159
-
160 306
 	},
161
-
162 307
 	mouseUpEvent: function(event) {
163 308
 		this.click = false;
164 309
 		this.element.style.cursor = "";
165 310
 	},
166
-
167 311
 	mouseWheelEvent: function(event) {
168
-
169 312
 		event.preventDefault();
170
-
313
+		
171 314
 		if (!this.canZoom) return;
172 315
 		var zoomX =  this.width / (this.zoom.end.x - this.zoom.start.x);
173 316
 		var zoomY =  this.height / (this.zoom.end.y - this.zoom.start.y);
174
-
175 317
 		var currentZoomWidth = (this.zoom.end.x - this.zoom.start.x);
176 318
 		var currentZoomHeight = (this.zoom.end.y - this.zoom.start.y);
319
+		
177 320
 
178 321
 		var delta = event.wheelDelta ? event.wheelDelta : -event.detail;
322
+
179 323
 		if (delta>0) {
180 324
 			var newZoomWidth = currentZoomWidth / 1.05;
181 325
 			var newZoomHeight = currentZoomHeight / 1.05;
@@ -183,23 +327,17 @@ Grid.prototype = {
183 327
 			var newZoomWidth = currentZoomWidth * 1.05;
184 328
 			var newZoomHeight = currentZoomHeight * 1.05;
185 329
 		}
186
-
187 330
 		var percLeft = event.x / this.width;
188 331
 		var percTop = event.y / this.height;
189
-
190 332
 		var offsetX = (currentZoomWidth - newZoomWidth) * percLeft + this.zoom.start.x;
191 333
 		var offsetY = (currentZoomHeight - newZoomHeight) * percTop + this.zoom.start.y;
192
-
193 334
 		/* Calculate the zoom multiplier */
194 335
 		var zoomX =  this.width / newZoomWidth;
195 336
 		var zoomY =  this.height / newZoomHeight;
196
-
197 337
 		/* Calculate the height and width of each box */
198 338
 		var boxWidth = this.width / this.columns * zoomX;
199 339
 		var boxHeight = this.height / this.rows * zoomY;
200
-
201 340
 		if (boxWidth>this.maxZoomCellSize || boxHeight>this.maxZoomCellSize) return;
202
-
203 341
 		if (
204 342
 			(newZoomWidth > this.width) ||
205 343
 			(newZoomHeight > this.height)
@@ -226,92 +364,90 @@ Grid.prototype = {
226 364
 				}
227 365
 			};
228 366
 		}
229
-
230 367
 		this.clampZoom();
231
-
232 368
 		this.draw();
233
-
234 369
 	},
235
-
236 370
 	clampZoom: function () {
237 371
 		if (this.zoom.start.x < 0) {
238 372
 			this.zoom.end.x += Math.abs(this.zoom.start.x);
239 373
 			this.zoom.start.x = 0;
240 374
 		}
241
-
242 375
 		if (this.zoom.end.x > this.width) {
243 376
 			this.zoom.start.x -= this.zoom.end.x - this.width;
244 377
 			this.zoom.end.x = this.width;
245 378
 		}
246
-
247 379
 		if (this.zoom.start.y < 0) {
248 380
 			this.zoom.end.y += Math.abs(this.zoom.start.y);
249 381
 			this.zoom.start.y = 0;
250 382
 		}
251
-
252 383
 		if (this.zoom.end.y > this.height) {
253 384
 			this.zoom.start.y -= this.zoom.end.y - this.height;
254 385
 			this.zoom.end.y = this.height;
255 386
 		}
256 387
 	},
257
-
258 388
 	draw: function () {
259
-		this.clear();
260
-		this.drawGrid();
389
+		var d = new Date();
390
+		var self = this;
391
+		self.clear();
392
+		self.drawGrid();
393
+		self.ctx.font = "8px Monospace";
394
+		self.ctx.fillStyle = "#000";
395
+		self.ctx.fillText("Draw Time:" + (new Date() - d) + "ms", 0, self.height - 12);
261 396
 	},
262
-
263 397
 	clear: function  () {
264 398
 		this.ctx.fillStyle = "#fff";
265 399
 		this.ctx.fillRect(0, 0, this.width, this.height);
266 400
 	},
267
-
268 401
 	cloneObject: function (obj) {
269 402
 		return JSON.parse(JSON.stringify(obj));
270 403
 	},
271
-
272
-	drawGrid: function () {
273
-
274
-		console.log(this);
275
-
404
+	calculateGrid: function () {
276 405
 		/* Calculate the zoom multiplier */
277 406
 		var zoomX =  this.width / (this.zoom.end.x - this.zoom.start.x);
278 407
 		var zoomY =  this.height / (this.zoom.end.y - this.zoom.start.y);
279
-
280 408
 		/* Calculate the height and width of each box */
281 409
 		var boxWidth = this.width / this.columns * zoomX;
282 410
 		var boxHeight = this.height / this.rows * zoomY;
283
-
284 411
 		/* offset the canvas for the zoom */
285
-		this.ctx.save();
286 412
 		var offsetX = Math.round(0-(this.zoom.start.x * zoomX));
287 413
 		var offsetY = Math.round(0-(this.zoom.start.y * zoomY));
288
-		this.ctx.translate(offsetX, offsetY);
289
-
414
+		return {
415
+			zoomX: zoomX,
416
+			zoomY: zoomY,
417
+			boxWidth: boxWidth,
418
+			boxHeight: boxHeight,
419
+			offsetX: offsetX,
420
+			offsetY: offsetY
421
+		};
422
+	},
423
+	drawGrid: function () {
424
+		var calc = this.calculateGrid();
425
+		/* offset the canvas for the zoom */
426
+		this.ctx.save();
427
+		this.ctx.translate(calc.offsetX, calc.offsetY);
290 428
 		this.drawEnviroment();
291
-
292 429
 		/* Style of the grid lines */
293 430
 		this.ctx.strokeStyle = "rgba(0, 0, 0, 0.25)";
294
-
295
-		/* Draw the column lines */
296
-		for (var c=0; c<this.columns; c++) {
297
-			var columnX = Math.round(c*boxWidth);
298
-			this.ctx.beginPath();
299
-			this.ctx.moveTo(columnX, 0);
300
-			this.ctx.lineTo(columnX, this.height * zoomY);
301
-			this.ctx.stroke();
302
-		}
303
-
304
-		/* Draw the row lines */
305
-		for (var r=0; r<this.rows; r++) {
306
-			var rowY = Math.round(r*boxHeight);
307
-			this.ctx.beginPath();
308
-			this.ctx.moveTo(0, rowY);
309
-			this.ctx.lineTo(this.width * zoomX, rowY);
310
-			this.ctx.stroke();
431
+		
432
+		if (this.showGrid) {
433
+			/* Draw the column lines */
434
+			for (var c=0; c<this.columns; c++) {
435
+				var columnX = Math.round(c*calc.boxWidth);
436
+				this.ctx.beginPath();
437
+				this.ctx.moveTo(columnX, 0);
438
+				this.ctx.lineTo(columnX, this.height * calc.zoomY);
439
+				this.ctx.stroke();
440
+			}
441
+			/* Draw the row lines */
442
+			for (var r=0; r<this.rows; r++) {
443
+				var rowY = Math.round(r*calc.boxHeight);
444
+				this.ctx.beginPath();
445
+				this.ctx.moveTo(0, rowY);
446
+				this.ctx.lineTo(this.width * calc.zoomX, rowY);
447
+				this.ctx.stroke();
448
+			}
311 449
 		}
312
-
313 450
 		this.ctx.restore();
314
-
315 451
 		/* Draw Outer border */
316 452
 		this.ctx.beginPath();
317 453
 		this.ctx.moveTo(0, 0);
@@ -321,30 +457,15 @@ Grid.prototype = {
321 457
 		this.ctx.lineTo(0, 0);
322 458
 		this.ctx.strokeStyle = "#000000";
323 459
 		this.ctx.stroke();
324
-
325 460
 	},
326
-
461
+	fixXY: function (e) {
462
+		if (e.x && e.y) return e;
463
+		e.x = e.pageX - this.element.offsetLeft 
464
+		e.y = e.pageY - this.element.offsetTop
465
+		return e;
466
+	},
327 467
 	drawEnviroment: function () {
328
-
329
-	/*
330
-		this.ctx.drawImageGradient(this.assets.grass, 0, 230, 60, 20, "top");
331
-		this.ctx.drawImageGradient(this.assets.forest, 0, 230, 60, 20, "bottom");
332
-		this.ctx.drawImageGradient(this.assets.grass, 0, 230, 20, 60, "left");
333
-		this.ctx.drawImageGradient(this.assets.water, 0, 230, 20, 60, "right");
334
-		*/
335
-
336
-		/* Calculate the zoom multiplier */
337
-		var zoomX =  this.width / (this.zoom.end.x - this.zoom.start.x);
338
-		var zoomY =  this.height / (this.zoom.end.y - this.zoom.start.y);
339
-
340
-		/* Calculate the height and width of each box */
341
-		var boxWidth = this.width / this.columns * zoomX;
342
-		var boxHeight = this.height / this.rows * zoomY;
343
-
344
-		/* offset the canvas for the zoom */
345
-		var offsetX = Math.round(0-(this.zoom.start.x * zoomX));
346
-		var offsetY = Math.round(0-(this.zoom.start.y * zoomY));
347
-
468
+		var calc = this.calculateGrid();
348 469
 		/* Draw the base grid */
349 470
 		var y = 0;
350 471
 		for (var r=0; r<this.rows; r++) {
@@ -352,33 +473,33 @@ Grid.prototype = {
352 473
 			for (var c=0; c<this.columns; c++) {
353 474
 				var gridType = this.grid[r][c];
354 475
 				if (gridType != null) {
355
-					this.ctx.drawImage(this.assets[gridType], x, y, boxWidth, boxHeight);
476
+					this.ctx.drawImage(this.assets[gridType], x, y, calc.boxWidth, calc.boxHeight);
356 477
 				} else if (gridType != undefined) {
357 478
 					this.ctx.fillStyle = "#000000";
358
-					this.ctx.fillRect(x, y, boxWidth, boxHeight);
479
+					this.ctx.fillRect(x, y, calc.boxWidth, calc.boxHeight);
359 480
 				}
360
-				x += boxWidth;
481
+				x += calc.boxWidth;
361 482
 			}
362
-			y += boxHeight;
483
+			y += calc.boxHeight;
363 484
 		}
364
-
365 485
 		/* Draw the grid items */
366 486
 		var y = 0;
367 487
 		for (var r=0; r<this.rows; r++) {
368 488
 			var x = 0;
369 489
 			for (var c=0; c<this.columns; c++) {
370 490
 				var gridType = this.gridItems[r][c];
371
-				if (gridType != null) {
372
-					this.ctx.drawImage(this.assets[gridType], x, y, boxWidth, boxHeight);
373
-				} else if (gridType != undefined) {
374
-					this.ctx.fillStyle = "#000000";
375
-					this.ctx.fillRect(x, y, boxWidth, boxHeight);
491
+				if (gridType != null && gridType != "reserved") {
492
+					var itemWidth = calc.boxWidth;
493
+					var itemHeight = calc.boxHeight;
494
+					if (this.assetSize[gridType]) {
495
+						itemWidth *= this.assetSize[gridType];
496
+						itemHeight *= this.assetSize[gridType];
497
+					}
498
+					this.ctx.drawImage(this.itemAssets[gridType], x, y, itemWidth, itemHeight);
376 499
 				}
377
-				x += boxWidth;
500
+				x += calc.boxWidth;
378 501
 			}
379
-			y += boxHeight;
502
+			y += calc.boxHeight;
380 503
 		}
381
-
382 504
 	},
383
-
384 505
 };

+ 2 - 40
modules/gameMap/module.gameMap.js

@@ -11,46 +11,8 @@ gameMap.prototype = {
11 11
 	construct: function () {
12 12
 		var self = this;
13 13
 		app.parseTemplate("Map-Container", app.gameArea, {});
14
-		self.grid = new Grid();
14
+		self.grid = new Grid(false);
15 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
-		}
16
+		self.mapMakerBinds();
55 17
 	}
56 18
 }

+ 31 - 17
modules/gameMap/new_map.css

@@ -1,34 +1,48 @@
1 1
 * {
2
-  -webkit-touch-callout: none;
3
-  -webkit-user-select: none;
4
-  -khtml-user-select: none;
5
-  -moz-user-select: none;
6
-  -ms-user-select: none;
7
-  user-select: none;
2
+	-webkit-touch-callout: none;
3
+	-webkit-user-select: none;
4
+	-khtml-user-select: none;
5
+	-moz-user-select: none;
6
+	-ms-user-select: none;
7
+	user-select: none;
8 8
 }
9 9
 
10 10
 table {
11 11
 	border-spacing: 0px;
12
-  border-collapse: collapse;
12
+	border-collapse: collapse;
13 13
 }
14
+
15
+.container {
16
+	float: none;
17
+	margin: auto;
18
+	margin-top: 20px;
19
+}
20
+
21
+.container > tbody > tr > td {
22
+	background-color: #000;
23
+	border-color: #333;
24
+}
25
+
14 26
 table td {
15
-  padding: 4px;
16
-  padding-bottom: 0px;
17
-  vertical-align: middle;
18
-  border: 1px solid;
19
-  width: 24px;
20
-  height: 24px;
21
-  text-align: center;
27
+	padding: 4px;
28
+	padding-bottom: 0px;
29
+	vertical-align: middle;
30
+	border: 1px solid;
31
+	width: 24px;
32
+	height: 24px;
33
+	text-align: center;
34
+	background-color: #fff;
35
+	color: #000;
22 36
 }
23 37
 .active {
24
-  background-color: #ccf;
38
+	background-color: #ccf;
25 39
 }
26 40
 
27 41
 .can-zoom {
28
-  text-align: center;
42
+	text-align: center;
29 43
 }
30 44
 
31 45
 [data-grid-type="undefined"],
32 46
 [data-grid-item="undefined"] {
33
-  font-size: 10px;
47
+	font-size: 10px;
34 48
 }

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

@@ -2,7 +2,10 @@ var index = function () {};
2 2
 
3 3
 index.prototype = {
4 4
 
5
-    includes: ["js/3rdparty/sha256.js"],
5
+    includes: [
6
+        "modules/gameMap/assets.js",
7
+        "js/3rdparty/sha256.js"
8
+    ],
6 9
     registerFormHistory: true,
7 10
     
8 11
     construct: function () {