/
debug.html
397 lines (365 loc) · 13.8 KB
/
debug.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
<html>
<head>
<title>Final Fantasy I - Debug Room</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link type="text/css" rel="stylesheet" href="css/global.css"/>
<link type="text/css" rel="stylesheet" href="css/messages.css"/>
<link type="text/css" rel="stylesheet" href="css/debug.css"/>
<link type="text/css" rel="stylesheet" href="css/world.css"/>
<link type="text/css" rel="stylesheet" href="css/battle.css"/>
<link type="text/css" rel="stylesheet" href="css/enemies.css"/>
<link type="text/css" rel="stylesheet" href="css/characters.css"/>
<link type="text/css" rel="stylesheet" href="css/characters-walking.css"/>
<link type="text/css" rel="stylesheet" href="css/menus.css"/>
<link type="text/css" rel="stylesheet" href="css/shops.css"/>
</head>
<body>
<section id="loader">Loading resources...<span>0</span>% complete</section>
<!-- MAPS -->
<section id="map" class="main">
<div class="background">
<div class="transition top displayed"></div>
<canvas id="view"></canvas>
<div class="player down"></div> <!-- the player's sprite -->
<div class="transition bottom displayed"></div>
</div>
</section>
<!-- BATTLE -->
<section id="battleView" class="main">
<div id="battle">
<div class="main">
<div class="enemies border">
<div class="background"></div>
<h1 class="splash"></h1>
<h1 class="splash"></h1>
<h1 class="splash"></h1>
<h1 class="splash overlay"></h1>
<h1 class="splash overlay"></h1>
<h1 class="splash overlay"></h1>
</div>
<div class="party border">
<div class="background"></div>
</div>
<div class="input">
<div class="enemy list border"></div>
<div class="commands border">
<div class="first column"></div>
<div class="second column"></div>
</div>
<div class="spells border hidden">
<div class="spell level"></div>
<div class="spell level"></div>
<div class="spell level"></div>
<div class="spell level"></div>
<div class="spell level"></div>
<div class="spell level"></div>
<div class="spell level"></div>
<div class="spell level"></div>
</div>
</div>
<div class="messages hidden">
<div class="source message border hidden"></div>
<div class="action message border hidden"></div>
<div class="overlap target hidden"><div class="target message border hidden"></div></div>
<div class="overlap damage hidden"><div class="damage message border hidden"></div></div>
<div class="overlap desc hidden"><div class="desc message border hidden"></div></div>
</div>
</div>
<div class="stats"></div>
</div>
</section>
<!-- CHARACTER MENU -->
<section id="charMenu" class="main menu">
<div class="left">
<div class="orbs border">
<p class="fire orb"></p>
<p class="water orb"></p>
<p class="wind orb"></p>
<p class="earth orb"></p>
</div>
<div class="gold border"></div>
<div class="options border">
<div class="item option"></div>
<div class="magic option"></div>
<div class="weapon option"></div>
<div class="armor option"></div>
<div class="status option"></div>
</div>
</div>
<div class="right party">
<div class="char profile border"></div>
<div class="char profile border"></div>
<div class="char profile border"></div>
<div class="char profile border"></div>
</div>
</section>
<!-- ARMOR MENU -->
<section id="armorMenu" class="main equipment menu"><!-- populated via Javascript --></section>
<!-- WEAPONS MENU -->
<section id="weaponMenu" class="main equipment menu"><!-- populated via Javascript --></section>
<!-- CAHRACTER SPELLS MENU -->
<section id="magicMenu" class="main menu">
<div class="overlap">
<div class="name border"></div>
</div>
<div class="magic border"><!-- populated via Javascript --></div>
</section>
<!-- PARTY INVENTORY MENU -->
<section id="itemMenu" class="main menu">
<div class="overlap">
<div class="title border"></div>
</div>
<div class="inventory border"><!-- populated via Javascript --></div>
</section>
<!-- CHARACTER STATUS MENU -->
<section id="statusMenu" class="main menu">
<div class="name border"></div>
<div class="charClass party border"></div>
<div class="level border"></div>
<div class="exp border"></div>
<div class="stats primary border"></div>
<div class="stats secondary border"></div>
</section>
<!-- INSIDE A SHOP -->
<section id="shop" class="main">
<section>
<h1 class="type border"></h1>
<div class="npc dialog border"></div>
<div class="npc sprite"></div>
<div class="party"></div>
<div class="prices border"></div>
<div class="menu border"></div>
<div class="gold border"></div>
</section>
</section>
<!-- CREATING A NEW CHAR -->
<section id="newChar" class="main">
<div class="party">
<div class="slot border"></div>
<div class="slot border"></div>
<div class="slot border"></div>
<div class="slot border"></div>
</div>
</section>
<!-- NAMING A NEW CHAR -->
<section id="newCharName" class="main">
<div class="name border"></div>
<div class="entry border">
<div class="letters"></div>
<div class="label"></div>
</div>
</section>
<!-- ============= -->
<!-- DEBUG SECTION -->
<!-- ============= -->
<div id="debug">
<ul class="menu">
<li class="curve tl bl big"><a href="#" class="start-game">Start Game</a></li>
<li class="curve tl bl big"><a href="#" class="tiles">Map Tiles</a></li>
<li class="curve tl bl big"><a href="#" class="full-maps">Full Maps</a></li>
<li class="curve tl bl big"><a href="#" class="locationJumper">Location Jumper</a></li>
<li class="curve tl bl big"><a href="#" class="messages">Messages</a></li>
<li class="curve tl bl big"><a href="#" class="enemiesSplash">Enemies/Splash</a></li>
<li class="curve tl bl big"><a href="#" class="battleSetup">Battle Setup</a></li>
<li class="curve tl bl big"><a href="#" class="spellEffects">Spell Effects</a></li>
<li class="curve tl bl big"><a href="#" class="weapons">Weapon Frames</a></li>
<li class="curve tl bl big"><a href="#" class="weaponAnimations">Weapon Animations</a></li>
<li class="curve tl bl big"><a href="#" class="battleAnimations">Battle Animations</a></li>
<li class="curve tl bl big"><a href="#" class="charsWalking">Characters Walking</a></li>
<li class="curve tl bl big"><a href="#" class="battleMessages">Battle Messages</a></li>
<li class="curve tl bl big"><a href="#" class="actions">Actions</a></li>
<li class="curve tl bl big"><a href="#" class="menus">Menus</a></li>
</ul>
<section class="start-game curve all">
<h1>Starting game...</h1>
</section>
<section class="tiles curve all">
<div class="location row">
<select class="selector"></select>
<button class="go">Go there!</button>
<input type="checkbox" class="inside" />Inside?
</div>
</section>
<section class="full-maps curve all">
<div class="row">
<select class="selector"></select>
<button class="go">Go there!</button>
<input type="checkbox" id="map-inside-checkbox" class="inside" /><label for="map-inside-checkbox">Inside?</label>
</div>
</section>
<section class="locationJumper curve all">
<div class="town row">
<select class="selector"></select>
<button class="go">Go there!</button>
</div>
<div class="shop row">
<select class="selector"></select>
<button class="go">Go there!</button>
</div>
<div class="location row">
<select class="selector"></select>
<input class="y" type="text" placeholder="Y" size="3" maxlength="3" />
<input class="x" type="text" placeholder="X" size="3" maxlength="3" />
<button class="go">Go there!</button>
</div>
</section>
<section class="messages curve all">
<div class="container"></div>
</section>
<section class="enemiesSplash curve all">
<div class="container">
<div class="row">
<label>Select an enemy:</label>
<select class="enemy selector" size="15"></select>
<div class="small monster"></div>
<div class="large monster"></div>
<div class="fiend monster"></div>
<div class="chaos monster"></div>
</div>
<div class="row">
<label>Select a splash:</label>
<select class="splash selector"></select>
</div>
<div class="row">
<label>White overlay?</label>
<input type="checkbox" class="splash overlay" />
</div>
<div class="row">
<button class="show splash">Show splash</button>
</div>
</div>
</section>
<section class="battleSetup curve all">
<div class="container">
<table class="party">
<tr>
<th></th>
<th>Class</th>
<th>Status</th>
</tr>
<tr>
<td class="label">Character 1:</td>
<td><select class="charClass selector"></select></td>
<td><select class="status selector"></select></td>
</tr>
<tr>
<td class="label">Character 2:</td>
<td><select class="charClass selector"></select></td>
<td><select class="status selector"></select></td>
</tr>
<tr>
<td class="label">Character 3:</td>
<td><select class="charClass selector"></select></td>
<td><select class="status selector"></select></td>
</tr>
<tr>
<td class="label">Character 4:</td>
<td><select class="charClass selector"></select></td>
<td><select class="status selector"></select></td>
</tr>
</table>
<div class="background row">
<label>Background:</label>
<select class="selector"></select>
</div>
<div class="small row">
<label>Small enemies:</label>
<div class="selectors">
<div><select class="selector"></select><input type="text" class="qty" value="0" /></div>
<div><select class="selector"></select><input type="text" class="qty" value="0" /></div>
</div>
</div>
<div class="large row">
<label>Large enemies:</label>
<div class="selectors">
<div><select class="selector"></select><input type="text" class="qty" value="0" /></div>
<div><select class="selector"></select><input type="text" class="qty" value="0" /></div>
</div>
</div>
<div class="fiend row">
<label>Fiends:</label>
<select class="selector"></select><input type="text" class="qty" value="0" />
</div>
<button class="button setup">Setup battle</button>
<button class="button randomize">Randomize everything</button>
</div>
</section>
<section class="spellEffects curve all">
<div class="party container">
<div class="row">
<button class="start">Start Animation</button>
</div>
</div>
</section>
<section class="weapons curve all">
<div class="party container">
<div class="row">
<label>Character Class</label>
<select class="selector">
<option value="">-- Select a class --</option>
</select>
</div>
</div>
</section>
<section class="weaponAnimations curve all">
<div class="party container">
<div class="row">
<label>Character Class</label>
<select class="selector">
<option value="">-- Select a class --</option>
</select>
<button class="start">Start swinging</button>
</div>
</div>
</section>
<section class="battleAnimations curve all">
<div class="container">
<button class="move char animation">Move Characters</button>
<button class="swing weapon animation">Swing Weapon</button>
<button class="spell effect animation">Spell Effect</button>
<button class="spell background animation">Spell Background Flicker</button>
<button class="window shake animation">Window Shake</button>
<button class="char flicker animation">Character Flicker</button>
<button class="victory animation">Victory</button>
<button class="run away animation">Run Away</button>
<button class="run away failure animation">Run Away Failure</button>
</div>
</section>
<section class="charsWalking curve all">
<div class="container">
<button class="start">Start walking</button>
</div>
</section>
<section class="battleMessages curve all">
<div class="container">
<p><label>Source</label><input type="text" class="source message" /></p>
<p><label>Target</label><input type="text" class="target message" /></p>
<p><label>Action</label><input type="text" class="action message" /></p>
<p><label>Damage</label><input type="text" class="damage message" /></p>
<p><label>Desc</label><input type="text" class="desc message" /></p>
<button class="show messages action">Show battle messages</button>
</div>
</section>
<section class="actions curve all">
<div class="container">
<!-- buttons created via Javascript -->
</div>
</section>
<section class="menus curve all">
<div class="container">
<button class="action load">Load character data</button>
<button class="action armor">Load/view armor menu</button>
<button class="action weapon">Load/view weapon menu</button>
<button class="action magic">Load/view magic menu</button>
<button class="action item">Load/view item menu</button>
<button class="action status">Load/view status menu</button>
<button class="action newChar">Setup new characters</button>
<button class="action newCharName">Enter new character name</button>
</div>
</section>
</div>
<script type="text/javascript">var require = { baseUrl : "js" };</script>
<script type="text/javascript" data-main="main" src="js/lib/require-jquery.js"></script>
</body>
</html>