-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
407 lines (405 loc) · 18.1 KB
/
index.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
398
399
400
401
402
403
404
405
406
407
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Starbound Animation File Editor</title>
<script>
window.onError = function(msg, url, line, col, err) {
if(ToastModal) ToastModal.open("Critical Error", true)
console.error("Uncaught Error:", url, "At "+line+":"+col, err);
return true;
}
</script>
<link rel="stylesheet" href="animator.css" />
<script src="jsonpatch.js"></script>
<script src="animator_classes.js"></script>
<script src="animator.js"></script>
<script src="ui.js"></script>
<script src="misc.js"></script>
<script src="defer.js" defer></script>
</head>
<body>
<div class="body" id="main">
<div class="layout_main">
<div class="header">
Starbound Animation Editor
</div>
<div class="content page_width">
<div class="navigation" id="navigation">
<div class="tab_header" data-for="tags">Tags</div>
<div class="tab_header" data-for="parts">Parts</div>
<div class="tab_header" data-for="states">States</div>
<div class="tab_header" data-for="particles">Particles</div>
<div class="tab_header" data-for="groups">Groups</div>
<div class="tab_header" data-for="sounds">Sounds</div>
<div class="tab_header active" data-for="preview">Preview</div>
<div class="filler"></div>
</div>
<div class="tabs">
<div class="tab" id="tags">
<div class="navbar"></div>
<div class="tab_content">
<div class="tags"></div>
<div class="warning">No global tags defined.</div>
<div class="sticky_controls">
<button class="modern tiny" type="button" title="Add new tag" data-action="addTag">+</button>
</div>
</div>
</div>
<div class="tab" id="parts">
<div class="navbar"></div>
<div class="tab_content"></div>
</div>
<div class="tab" id="states">
<div class="navbar"></div>
<div class="tab_content"></div>
</div>
<div class="tab" id="particles">
<div class="navbar"></div>
<div class="tab_content"></div>
</div>
<div class="tab" id="groups">
<div class="navbar"></div>
<div class="tab_content">
<div class="groups"></div>
<div class="warning">No transformation groups defined.</div>
<div class="sticky_controls">
<button class="modern tiny" type="button" title="Add new group" data-action="addGroup">+</button>
</div>
</div>
</div>
<div class="tab" id="sounds">
<div class="navbar"></div>
<div class="tab_content">
<div class="sounds"></div>
<div class="warning">No sound pools defined.</div>
<div class="sticky_controls">
<button class="modern tiny" type="button" title="Add new pool" data-action="addPool">+</button>
</div>
</div>
</div>
<div class="tab active" id="preview">
<div class="navbar"></div>
<div class="tab_content">
<pre></pre>
</div>
</div>
</div>
</div>
<div class="footer">
© Erina Sugino - 2023<br>
<a class="modern blue" href="javascript:openHelp();">Help</a>
</div>
</div>
<div class="sidebar" id="menu">
<div class="bookmark" id="menu_icon" onclick="document.getElementById('menu').classList.toggle('active');">☰</div>
<div class="menu_content">
<div class="box">
<label class="title">Color Scheme</label>
<div class="darkmode_icon light"></div>
<label class="switch" for="darkmode" title="Switch darkmode">
<input type="checkbox" class="checkbox" id="darkmode" value="1" />
<span class="slider round"></span>
</label>
<div class="darkmode_icon dark"></div>
</div>
<hr>
<div class="box">
<button id="newProjectButton" class="modern large" type="button" title="Start new empty project">New Project</button><br>
<button id="importButton" class="modern large" type="button" title="Import project from .animation file">Import</button><br>
<button id="exportButton" class="modern large" type="button" title="Save current project as new .animation file">Export</button>
</div>
<hr>
<div class="box">
<button id="patchImportButton" class="modern large" type="button" title="Import a .patch file to apply to the current project">Apply Patch</button>
</div>
<hr>
<div class="box">
<label class="title">Output Format</label>
<select class="modern large" id="compressionLevel" title="Minification settings for output">
<option value="0" title="Human readable pretty print">Pretty</option>
<option value="1" title="Human readable with minified parts">Optimized</option>
<option value="2" title="Minified JSON without white-spaces">Production</option>
</select><br>
<label class="title">Preview Mode</label>
<select class="modern large" id="previewLoadMode" title="Way the preview tab renders results">
<option value="0" title="Only loads elements that are visible">Performance</option>
<option value="1" title="Loads all elements For CTRL+F search">Full (Search)</option>
</select>
</div>
</div>
</div>
</div>
<template id="fragment_part">
<div>
<div class="row">
<label class="description">Anchor:</label><select id="anchorPart" class="modern medium"><option value="-1">None</option></select>
</div>
<div class="row">
<label class="description">Centered:</label><input type="checkbox" class="checkbox" id="centered" value="1" /><label class="checkbox" for="centered"></label>
</div>
<div class="row">
<label class="description">Image:</label><input id="image" type="text" class="textfield medium" placeholder="Image path" title="Image path of this part Can be empty" />
</div>
<div class="row">
<label class="description">Offset:</label><input id="offset1" type="number" class="textfield split" step="0.25" placeholder="Offset X" title="X Offset of this part Can be empty" /><input id="offset2" type="number" class="textfield split" step="0.25" placeholder="Offset Y" title="Y Offset of this part Can be empty" />
</div>
<div class="row">
<label class="description">Z-Level:</label><input id="zLevel" type="number" class="textfield medium" min="0" step="1" max="999" placeholder="Z-Level" title="Z-Level of this part" />
</div>
<div class="row">
<label class="description">Transf. Groups:</label>
<div class="list">
<div class="groups" id="groups"></div>
<div class="warning">No transformation groups defined.</div>
<div class="sticky_controls"><button class="modern tiny" data-action="addGroup" title="Add new transformation group for this part">+</button></div>
</div>
</div>
<div class="row">
<label class="description">Part States:</label>
<div class="list">
<div id="partStates" class="partStates"></div>
<div class="warning">No states defined.</div>
<div class="sticky_controls"><button class="modern tiny" data-action="addPartState" title="Add new state to this part">+</button></div>
</div>
</div>
</div>
</template>
<template id="fragment_animation_state">
<div>
<div class="row">
<label class="description">Properties:</label>
<div class="list">
<div class="properties" id="properties"></div>
<div class="warning">No properties defined.</div>
<div class="sticky_controls"><button class="modern tiny" data-action="addProperty" title="Add new property for this animation state">+</button></div>
</div>
</div>
<div class="row">
<label class="description">Frame Properties:</label>
<div class="list">
<div class="frameProperties" id="frameProperties"></div>
<div class="warning">No frame properties defined.</div>
<div class="sticky_controls"><button class="modern tiny" data-action="addFrameProperty" title="Add new frame property for this animation state">+</button></div>
</div>
</div>
</div>
</template>
<template id="fragment_stateType">
<div>
<div class="row">
<label class="description">Default:</label><select id="default" class="modern medium"></select>
</div>
<div class="row">
<label class="description">Properties:</label>
<div class="list">
<div class="properties" id="properties"></div>
<div class="warning">No properties defined.</div>
<div class="sticky_controls"><button class="modern tiny" data-action="addPropertyType" title="Add new property for this state type">+</button></div>
</div>
</div>
<div class="row">
<div class="expandable">
<div class="indicator"></div><label class="description" style="flex-grow: 1;">States:</label><label id="statecount">0 States</label>
</div>
<div>
<div id="states" class="states"></div>
<div class="warning">No states defined.</div>
<div class="sticky_controls"><button class="modern tiny" data-action="addState" title="Add new state to this pool">+</button></div>
</div>
</div>
</div>
</template>
<template id="fragment_state">
<div>
<div class="row">
<label class="description">Frames:</label><input id="frames" type="number" class="textfield medium" min="1" step="1" max="999" placeholder="Frames" title="Frame count\nof this animation" />
</div>
<div class="row">
<label class="description">Cycle:</label><input id="cycle" type="number" class="textfield medium" min="0.1" step="0.1" max="99.9" placeholder="Cycle" title="Cycle length\nof this animation" />
</div>
<div class="row">
<label class="description">Mode:</label><select id="mode" class="modern medium"></select>
</div>
<div class="row" id="mode_content"></div>
<div class="row">
<label class="description">Properties:</label>
<div class="list">
<div class="properties" id="properties"></div>
<div class="warning">No properties defined.</div>
<div class="sticky_controls"><button class="modern tiny" data-action="addPropertyState" title="Add new property for this state">+</button></div>
</div>
</div>
<div class="row">
<label class="description">Frame Properties:</label>
<div class="list">
<div class="frameProperties" id="frameProperties"></div>
<div class="warning">No frame properties defined.</div>
<div class="sticky_controls"><button class="modern tiny" data-action="addFrameProperty" title="Add new frame property for this state">+</button></div>
</div>
</div>
</div>
</template>
<template id="fragment_emitter">
<div>
<div class="row">
<label class="description">Burst Count:</label>
<input type="number" class="textfield tiny" id="burstcount" min="0" max="99" step="1" placeholder="Burst" title="Burst Count" />
</div>
<div class="row">
<label class="description">Emission Rate:</label>
<input type="number" class="textfield tiny" id="emissionrate" min="0" max="99" step="1" placeholder="Rate" title="Emission Rate" />
</div>
<div class="row">
<label class="description">Anchor Part:</label>
<select class="modern medium" id="anchorpart" title="Anchor Part">
<option value="">None</option>
</select>
</div>
<div class="row">
<label class="description">Particles:</label>
<div class="list">
<div class="particles" id="particlesList"></div>
<div class="warning">No particles defined.</div>
<div class="sticky_controls"><button class="modern tiny" data-action="addParticle" title="Add new particle for this emitter">+</button></div>
</div>
</div>
</div>
</template>
<template id="fragment_particle">
<div>
<div class="row">
<label class="description">Type:</label>
<label class="checkblock"></label>
<select class="modern medium" id="type" title="Particle type">
<option value="ember">Ember</option>
<option value="animated">Animated</option>
</select>
</div>
<div class="row hidden" id="animation_row">
<label class="description">Animation:</label>
<label class="checkblock"></label>
<input type="text" class="textfield wide" id="animation" placeholder="Animation" title="Animated particle's animation file" />
</div>
<div class="row">
<label class="description">Size:</label>
<label class="checkblock">
<input type="checkbox" class="checkbox" id="size_enabled" data-target="size" value="1" />
<label class="checkbox" title="Save this parameter" for="size_enabled"></label>
</label>
<input type="number" class="textfield tiny" id="size" min="0.1" max="10.0" step="0.01" placeholder="Size" title="Particle size" />
</div>
<div class="row">
<label class="description">Ang. Velocity:</label>
<label class="checkblock">
<input type="checkbox" class="checkbox" id="angularvelocity_enabled" data-target="angularVelocity" value="1" />
<label class="checkbox" title="Save this parameter" for="angularvelocity_enabled"></label>
</label>
<input type="number" class="textfield tiny" id="angularvelocity" step="0.01" placeholder="Vel." title="Angular velocity" />
</div>
<div class="row">
<label class="description">Color:</label>
<label class="checkblock">
<input type="checkbox" class="checkbox" id="color_enabled" data-target="color" value="1" />
<label class="checkbox" title="Save this parameter" for="color_enabled"></label>
</label>
<input type="number" class="textfield tiny" id="color1" min="0" max="255" step="1" placeholder="R" title="Color - Red" />
<input type="number" class="textfield tiny" id="color2" min="0" max="255" step="1" placeholder="G" title="Color - Green" />
<input type="number" class="textfield tiny" id="color3" min="0" max="255" step="1" placeholder="B" title="Color - Blue" />
<input type="number" class="textfield tiny" id="color4" min="0" max="255" step="1" placeholder="A" title="Color - Alpha" />
</div>
<div class="row">
<label class="description">Fade:</label>
<label class="checkblock">
<input type="checkbox" class="checkbox" id="fade_enabled" data-target="fade" value="1" />
<label class="checkbox" title="Save this parameter" for="fade_enabled"></label>
</label>
<input type="number" class="textfield tiny" id="fade" max="1" min="0" step="0.01" placeholder="Fade" title="Opacity of particle" />
</div>
<div class="row">
<label class="description">Dest. Time:</label>
<label class="checkblock">
<input type="checkbox" class="checkbox" id="destructiontime_enabled" data-target="destructionTime" value="1" />
<label class="checkbox" title="Save this parameter" for="destructiontime_enabled"></label>
</label>
<input type="number" class="textfield tiny" id="destructiontime" step="0.1" min="0" placeholder="Dest." title="Destruction time of particle" />
</div>
<div class="row">
<label class="description">Dest. Action:</label>
<label class="checkblock">
<input type="checkbox" class="checkbox" id="destructionaction_enabled" data-target="destructionAction" value="1" />
<label class="checkbox" title="Save this parameter" for="destructionaction_enabled"></label>
</label>
<input type="text" class="textfield medium" id="destructionaction" placeholder="Dest. Action" title="Destruction action of particle" />
</div>
<div class="row">
<label class="description">Position:</label>
<label class="checkblock">
<input type="checkbox" class="checkbox" id="position_enabled" data-target="position" value="1" />
<label class="checkbox" title="Save this parameter" for="position_enabled"></label>
</label>
<input type="number" class="textfield tiny" id="position1" step="0.01" placeholder="X" title="Position - X" />
<input type="number" class="textfield tiny" id="position2" step="0.01" placeholder="Y" title="Position - Y" />
</div>
<div class="row">
<label class="description">Ini. Velocity:</label>
<label class="checkblock">
<input type="checkbox" class="checkbox" id="initialvelocity_enabled" data-target="initialVelocity" value="1" />
<label class="checkbox" title="Save this parameter" for="initialvelocity_enabled"></label>
</label>
<input type="number" class="textfield tiny" id="initialvelocity1" step="0.01" placeholder="X" title="Init. Velo. - X" />
<input type="number" class="textfield tiny" id="initialvelocity2" step="0.01" placeholder="Y" title="Init. Velo. - Y" />
</div>
<div class="row">
<label class="description">Fin. Velocity:</label>
<label class="checkblock">
<input type="checkbox" class="checkbox" id="finalvelocity_enabled" data-target="finalVelocity" value="1" />
<label class="checkbox" title="Save this parameter" for="finalvelocity_enabled"></label>
</label>
<input type="number" class="textfield tiny" id="finalvelocity1" step="0.01" placeholder="X" title="Fin. Velo. - X" />
<input type="number" class="textfield tiny" id="finalvelocity2" step="0.01" placeholder="Y" title="Fin. Velo. - Y" />
</div>
<div class="row">
<label class="description">Approach:</label>
<label class="checkblock">
<input type="checkbox" class="checkbox" id="approach_enabled" data-target="approach" value="1" />
<label class="checkbox" title="Save this parameter" for="approach_enabled"></label>
</label>
<input type="number" class="textfield tiny" id="approach1" step="0.01" placeholder="X" title="Approach - X" />
<input type="number" class="textfield tiny" id="approach2" step="0.01" placeholder="Y" title="Approach - Y" />
</div>
<div class="row">
<label class="description">Layer:</label>
<label class="checkblock">
<input type="checkbox" class="checkbox" id="layer_enabled" data-target="layer" value="1" />
<label class="checkbox" title="Save this parameter" for="layer_enabled"></label>
</label>
<input type="text" class="textfield medium" id="layer" placeholder="Layer" title="Render layer of particle" />
</div>
<div class="row">
<label class="description">TTL:</label>
<label class="checkblock">
<input type="checkbox" class="checkbox" id="timetolive_enabled" data-target="timeToLive" value="1" />
<label class="checkbox" title="Save this parameter" for="timetolive_enabled"></label>
</label>
<input type="number" class="textfield medium" id="timetolive" step="0.1" min="0" placeholder="TTL" title="Time to Live of particle" />
</div>
<div class="row">
<label class="description">Flippable:</label>
<label class="checkblock">
<input type="checkbox" class="checkbox" id="flippable" value="1" />
<label class="checkbox" title="Particle flippable?" for="flippable"></label>
</label>
</div>
<div class="row">
<label class="description">Variance:</label>
<div class="list">
<div class="variances" id="variances"></div>
<div class="warning">No variances defined.</div>
<div class="sticky_controls"><button class="modern tiny" data-action="addVariance" title="Add new variance for this particle">+</button></div>
</div>
</div>
</div>
</template>
</body>
</html>