archive
/
dundef-viewer
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Ability to create a new level

master
Chris Smith 12 years ago
parent
99ae3feb70
commit
86545c5fe8
3 changed files with 96 additions and 1 deletions
Split View Show Diff Stats
  1. 7
    0
      index.html
  2. 30
    1
      res/js/viewer.js
  3. 59
    0
      res/style.css

+ 7
- 0
index.html View File 

@@ -13,6 +13,7 @@
13 13 
  <body>
14 14 
   <div id="header">
15 15 
    <h1><img src="res/images/dd-logo.png" alt="Dungeon Defenders"><span>Layout Editor</span></h1>
16 
+   <button id="createlayout">Create new layout</button>
16 17 
   </div>
17 18 
   <div id="sidebar">
18 19 
    <div id="palette">
 
@@ -30,5 +31,11 @@
30 31 
    <img src="res/images/coreIcon.png" alt="core" class="core">
31 32 
   </div>
32 33 
   <div id="mapcontainer"></div>
34 
+  <div id="layoutcontainer" class="initiallyhidden">
35 
+   <div id="layoutmask"></div>
36 
+   <div id="layoutpicker">
37 
+    <h2>Select a level</h2>
38 
+   </div>
39 
+  </div>
33 40 
  </body>
34 41 
 </html>

+ 30
- 1
res/js/viewer.js View File 

@@ -133,6 +133,35 @@ $(function() {
133 133 
   }
134 134 
  });
135 135
136 
+ function clearLayout() {
137 
+  $('#mapcontainer .tower').remove();
138 
+  layout.towers = [];
139 
+ }
140 
+
141 
+ $.each(levels, function(key) {
142 
+  $('<button>')
143 
+   .append($('<img>').attr('src', this.image))
144 
+   .append($('<p>').text(this.name))
145 
+   .click(function() {
146 
+    clearLayout();
147 
+    layout = {level: key + 1, towers:[]};
148 
+    updateLayout();
149 
+    closePicker();
150 
+   })
151 
+   .appendTo($('#layoutpicker'));
152 
+ });
153 
+
154 
+ function showPicker() {
155 
+  $('#layoutcontainer').show();
156 
+ }
157 
+
158 
+ function closePicker() {
159 
+  $('#layoutcontainer').hide();
160 
+ }
161 
+
162 
+ $('#createlayout').click(showPicker);
163 
+ $('#layoutmask').click(closePicker);
164 
+
136 165 
  function updateLayout() {
137 166 
   thisLevel = levels[layout.level - 1];
138 167 
   $('#mapcontainer').css('background-image', 'url("' + thisLevel.minimap + '")');
 
@@ -140,8 +169,8 @@ $(function() {
140 169 
   $('#notecontent').val(layout.notes);
141 170 
   $.each(layout.towers, function() {
142 171 
    createElForTower(this).appendTo($('#mapcontainer'));
143 
-   updateDefenseUnits();
144 172 
   });
173 
+  updateDefenseUnits();
145 174
146 175 
   $('#du_total').text(thisLevel.du);
147 176 
  }

+ 59
- 0
res/style.css View File 

@@ -10,6 +10,7 @@ body {
10 10 
 }
11 11
12 12 
 #header {
13 
+  height: 70px;
13 14 
   padding: 10px 20px;
14 15 
   background-image: linear-gradient(bottom, rgb(255,255,255) 28%, rgb(244,245,242) 64%);
15 16 
   background-image: -o-linear-gradient(bottom, rgb(255,255,255) 28%, rgb(244,245,242) 64%);
 
@@ -20,6 +21,21 @@ body {
20 21 
   border-bottom: 1px solid rgb(244, 245, 242);
21 22 
 }
22 23
24 
+#header h1 {
25 
+ float: left;
26 
+}
27 
+
28 
+#header button {
29 
+ float: right;
30 
+ height: 40px;
31 
+ margin: 15px;
32 
+ color: #300;
33 
+ font-variant: small-caps;
34 
+ font-weight: bold;
35 
+ text-transform: lowercase;
36 
+ padding: 10px;
37 
+}
38 
+
23 39 
 #header img {
24 40 
   vertical-align: bottom;
25 41 
 }
 
@@ -84,3 +100,46 @@ h2 {
84 100 
 .tower.squire { z-index: 99; }
85 101 
 .tower.apprentice { z-index: 100; }
86 102 
 body .tower.ui-draggable-dragging { z-index: 101; }
103 
+
104 
+#layoutmask {
105 
+ position: fixed;
106 
+ top: 0;
107 
+ left: 0;
108 
+ right: 0;
109 
+ bottom: 0;
110 
+ background-color: #999;
111 
+ z-index: 200;
112 
+ opacity: 0.8;
113 
+}
114 
+
115 
+#layoutpicker {
116 
+ position: fixed;
117 
+ top: 150px;
118 
+ left: 200px;
119 
+ right: 200px;
120 
+ bottom: 100px;
121 
+ background-color: white;
122 
+ border: 2px solid rgb(244, 245, 242);
123 
+ z-index: 201;
124 
+ overflow: auto;
125 
+ text-align: center;
126 
+ padding: 50px;
127 
+}
128 
+
129 
+#layoutpicker button {
130 
+ margin: 30px;
131 
+}
132 
+
133 
+#layoutpicker button p {
134 
+ margin: 5px;
135 
+ font-size: large;
136 
+}
137 
+
138 
+#layoutpicker button img {
139 
+ width: 200px;
140 
+ height: 100px;
141 
+}
142 
+
143 
+.initiallyhidden {
144 
+ display: none;
145 
+}

Write Preview
Loading…
Cancel
Save