forked from thejoshwolfe/snakefall
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathFramework.html
More file actions
298 lines (270 loc) · 19.8 KB
/
Copy pathFramework.html
File metadata and controls
298 lines (270 loc) · 19.8 KB
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
<html>
<head>
<title>Snakefall Redesign</title>
<link rel="stylesheet" href="Editor.css" />
<script type="text/javascript" nonce="42ae50bf4e80482d87795e8d3ee"
src="//local.adguard.org?ts=1579613273701&type=content-script&dmn=wolfesoftware.com&css=1&js=1&gcss=1&rel=1&rji=1&stealth=1&uag="></script>
<script type="text/javascript" nonce="42ae50bf4e80482d87795e8d3ee"
src="//local.adguard.org?ts=1579613273701&name=AdGuard%20Extra&name=AdGuard%20Assistant&type=user-script"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="jscript/Main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/3.0.5/seedrandom.min.js"></script>
</head>
<body>
<!-- below style code needed to make character white -->
<div id="openEditorButton" title="\ Open level editor"><span class="colorFix">➕</span></div>
<table id="levelTable">
<tr id="levelRow">
<td style="width:0px;" id="ghostEditorPane"></td>
<td id="canvasContainerTD">
<div id="canvasContainer">
<canvas id="canvas1" width=750 height=600></canvas>
<canvas id="canvas2" width=750 height=600></canvas>
<canvas id="canvas3" width=750 height=600></canvas>
<canvas id="canvas4" width=750 height=600></canvas>
<canvas id="canvas5" width=750 height=600></canvas>
<canvas id="canvas6" width=750 height=600></canvas>
<canvas id="canvas7" width=750 height=600></canvas>
</div>
</td>
<td id="editorPane">
<div id="controls">
<div id="closeEditorButton" title="\">✖</div>
<table style="width:200px">
<tr><td><button id="saveLevelButton" title="Ctrl + S - saves the current state to the URL bar of your browser; clears unmove/re-move history">Save Changes</button></td></tr>
<tr><td>
<button id="uneditButton" title="Ctrl + Z" disabled>Unedit</button>
<span id="editsSpan">0+0</span>
<button id="reeditButton" title="Ctrl + Shift + Z, Ctrl + Y" disabled>Reëdit</button>
</td></tr>
<tr class="spacer"><td></td></tr>
<tr><td class="buttonHeader controlsHeader">Controls</td></tr>
<tr id="controlsRow"><td>
<button id="resizeButton" class="editorButton" title="Ctrl + R">Resize</button>
<div id="selectHolder">
<button class="editorButton" id="selectButton" title="Shift + A - double click to edit objects">Select</button>
<div style="margin-top:5px">
<button class="editorButton" id="cutButton" title="Ctrl + X" disabled>X</button>
<button class="editorButton" id="copyButton" title="Ctrl + C" disabled>C</button>
<button class="editorButton" id="pasteButton" title="Ctrl + V" disabled>V</button>
</div>
</div>
<button class="editorButton" id="paintSpaceButton" title="E">Erase</button>
</td></tr>
<tr class="spacer"><td></td></tr>
<tr><td class="buttonHeader controlsHeader">Physics</td></tr>
<tr><td>
<button class="editorButton" id="cheatGravityButton" title="Shift + G">Gravity: ON</button>
<button class="editorButton" id="cheatCollisionButton" title="Shift + C">Collision: ON</button>
</td></tr>
<tr class="spacer"><td></td></tr>
<tr class="spacer standard"><td></td></tr>
<tr class="standard header"><td>Standard Elements</td></tr>
<tr class="standard"><td class="buttonHeader">Static</td></tr>
<tr class="hotkeySpacer2 standard"><td></td></tr>
<tr class="standard"><td>
<div class="buttonDiv"><button class="editorButton" id="paintWallButton" title="W">Wall</button><br><span class="hotkey">W</span></div>
<div class="buttonDiv"><button class="editorButton" id="paintSpikeButton" title="S">Spike</button><br><span class="hotkey">S</span></div>
<div class="buttonDiv"><button class="editorButton" id="paintExitButton" title="Shift + E">Exit</button><br><span class="hotkey"><span class="small">Shift</span> E</span></div>
<div class="buttonDiv"><button class="editorButton" id="paintPortalButton" title="P">Portal</button><br><span class="hotkey">P</span></div>
</td></tr>
<tr class="spacer standard hotkeySpacer"><td></td></tr>
<tr class="standard"><td class="buttonHeader">Kinetic</td></tr>
<tr class="hotkeySpacer2 standard"><td></td></tr>
<tr class="standard"><td>
<div class="buttonDiv"><button class="editorButton" id="paintSnakeButton" title="Shift + S">Snake</button><br><span class="hotkey"><span class="small">Shift</span> S</span></div>
<div class="buttonDiv"><button class="editorButton" id="paintFruitButton" title="F">Fruit</button><br><span class="hotkey">F</span></div>
<div class="buttonDiv"><button class="editorButton" id="paintBlockButton" title="B">Block</button><br><span class="hotkey">B</span></div>
</td></tr>
<tr class="spacer standard hotkeySpacer"><td></td></tr>
<tr class="spacer enhanced"><td></td></tr>
<tr class="enhanced header"><td>Enhanced Elements</td></tr>
<tr class="enhanced"><td class="buttonHeader">Spikes 2.0</td></tr>
<tr class="hotkeySpacer2 enhanced"><td></td></tr>
<tr class="enhanced"><td>
<div class="buttonDiv"><button class="editorButton" id="paintMikeButton" title="M To attach to block, activate when block is in focus">Mike</button><br><span class="hotkey">M</span></div>
<div class="buttonDiv"><button disabled class="editorButton" id="paintSplockButton" title="M To attach to block, activate when block is in focus">Splock</button><br><span class="hotkey">Spacebar</span></div>
</td></tr>
<tr class="spacer enhanced hotkeySpacer"><td></td></tr>
<tr class="enhanced"><td class="buttonHeader">Kinetic</td></tr>
<tr class="hotkeySpacer2 enhanced"><td></td></tr>
<tr class="enhanced"><td>
<div class="buttonDiv"><button class="editorButton" id="paintPoisonFruitButton" title="Shift + F Shrinks snake by one segment">Poison</button><br><span class="hotkey"> <span class="small">Shift</span> F</span></div>
<div class="buttonDiv"><button class="editorButton" id="paintCloudButton" title="C Unaffected by pushed objects">Cloud</button><br><span class="hotkey">C</span></div>
<div class="buttonDiv"><button class="editorButton" id="paintBubbleButton" title="Shift + B Popped by pushed objects">Bubble</button><br><span class="hotkey"> <span class="small">Shift</span> B</span></div>
</td></tr>
<tr class="spacer enhanced hotkeySpacer"><td></td></tr>
<tr class="enhanced"><td class="buttonHeader">Platforms</td></tr>
<tr class="hotkeySpacer2 enhanced"><td></td></tr>
<tr class="enhanced"><td>
<div class="buttonDiv"><button class="editorButton" id="paintRainbowButton" title="R">Rainbow</button><br><span class="hotkey"><span class="small">Shift</span> R</span></div>
<div class="buttonDiv"><button class="editorButton" id="paintTrellisButton" title="T">Trellis</button><br><span class="hotkey">T</span></div>
<div class="buttonDiv"><button class="editorButton" id="paintOneWayWallButton" title="O">One-Way Up</button><br><span class="hotkey">O</span></div>
</td></tr>
<tr class="spacer enhanced hotkeySpacer"><td></td></tr>
<tr class="enhanced"><td class="buttonHeader">Scissor Lifts</td></tr>
<tr class="hotkeySpacer2 enhanced"><td></td></tr>
<tr class="enhanced"><td>
<div class="buttonDiv"><button class="editorButton" id="paintClosedLiftButton" title="X">Closed</button><br><span class="hotkey">X</span></div>
<div class="buttonDiv"><button class="editorButton" id="paintOpenLiftButton" title="Shift + X">Open</button><br><span class="hotkey"><span class="small">Shift</span> X</span></div>
</td></tr>
<tr class="spacer enhanced hotkeySpacer"><td></td></tr>
<tr class="enhanced"><td class="buttonHeader">Liquids</td></tr>
<tr class="hotkeySpacer2 enhanced"><td></td></tr>
<tr class="enhanced"><td>
<div class="buttonDiv"><button class="editorButton" id="paintLavaButton" title="L Disintegrates blocks and snakes">Lava</button><br><span class="hotkey">L</span></div>
<div class="buttonDiv"><button class="editorButton" id="paintWaterButton" title="Shift + L, Shift + W Swallows blocks but buoys snakes">Water</button><br><span class="hotkey"><span class="small">Shift</span> L</span></div>
</td></tr>
<tr class="spacer enhanced hotkeySpacer"><td></td></tr>
</table>
</div>
</td>
</tr>
</table>
<span id="bottomEverything">
<div id="paradoxDiv"></div>
<div id="cycleDiv"></div>
<div id="bottomBlock">
<div id="firstBottomBlock">
<div id="levelTypeContainer">
<div id="returnButton"><a href="https://jmdiamond3.github.io/Snakefall-Redesign/"><div id="returnArrow"></div>Snakefall<br>Redesign</a></div>
<div style="vertical-align: middle;">
<div id="levelType">Standard Level</div>
<div id="levelTypeSpan">contains only original Snakebird elements</div>
</div>
<div id="additions">*</div>
</div>
</div>
<div class="bottomBlockBox">
<div class="optionsHeaders">Game Controls</div><br>
<div id="keyboardInstructions">Use the arrows<span id="wasdSpan"> or WASD</span> keys on your keyboard to move, or use the buttons below</div>
<div id="controlButtons">
<div style="display: table-cell; vertical-align: middle;"><button id="switchSnakesButton" title="(Shift + ) Spacebar (Shift + ) Tab 1, 2, 3, and 4 cycle through like-colored snakes, with each number representing a different color">Switch Snake</button></div>
<div id="arrowsHolder">
<button id="arrowLeft" class="arrow">←</button>
<div id="verticalArrowsHolder">
<button id="arrowUp" class="arrow" style="margin-bottom: 5px; display: block;">↑</button>
<button id="arrowDown" class="arrow" style="display: block;">↓</button>
</div>
<button id="arrowRight" class="arrow">→</button>
</div>
</div>
</div>
<div class="separator"></div>
<div class="bottomBlockBox">
<div class="optionsHeaders">Progress Tracking</div><br>
<div class="sliderStack" style="padding-bottom: 8px;">
<div class="stackHeader">Moves</div>
<div id="progressButtons">
<div id="unmoveButton" class="progressButton" title="Backspace Z Q Unmove snake" disabled>➤</div>
<span id="movesSpan">0 || 0</span>
<div id="removeButton" class="progressButton" title="Y Shift + Backspace Shift + Z Shift + Q Re-move snake" disabled>➤</div>
</div>
<button id="restartButton" title="R - Unmove completely Shift + R - Re-move completely">Restart</button>
<button id="saveProgressButton" title="Ctrl + Shift + S - Saves a replay URL to the URL bar of your browser. Use >> Re-move or Shift + R to restore state.">Save Progress</button><br>
<button id="copySVButton" title="Saves a Solution Verification URL to your clipboard." disabled>Copy Verification Link</button>
</div>
<div class="sliderStack">
<!-- title doesn't work -->
<label class="sliderLabel" title="Toggles snake animations during replays">Replay Animations</label>
<label class="switch">
<input id="replayAnimationSlider" type="checkbox">
<span class="slider"></span>
</label>
</div><br>
</div>
<div class="separator"></div>
<div class="bottomBlockBox">
<div class="optionsHeaders">Options</div><br>
<div id="optionsStack">
<div id="levelSize">
<div id="levelSizeText" class="stackHeader"><div id="minus" class="plusMinus" title="Decrease game size"><span class="colorFix colorFixHover">➖</span></div>Level Size<div id="plus" class="plusMinus" title="Increase game size"><span class="colorFix colorFixHover">➕</span></div></div>
<div id="levelSizeInsider">
<div id="fitButtonContainer">
<div class="fitButtonWrapper">
<button id="fitControls" class="fitButton" title="0 Fit canvas and controls">Fit Controls</button>
<label class="radioContainer">
<input type="radio" class="radioButton" id="fitControlsDefault"></input>
<span class="radioButton"></span>
</label>
</div>
<div class="fitButtonWrapper">
<button id="fitCanvas" class="fitButton" title="9 Fit canvas">Fit Canvas</button>
<label class="radioContainer">
<input type="radio" class="radioButton" id="fitCanvasDefault"></input>
<span class="radioButton"></span>
</label>
</div>
</div>
</div>
</div>
<div class="sliderStack">
<div class="stackHeader">Animations</div>
<div class="sliderContainer">
<label class="sliderLabel" style="float:left">Snake Slithers</label>
<label class="switch">
<input id="animationSlider" type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="sliderContainer" style="float:left; margin-top: 5px;">
<label class="sliderLabel">Off When Editing</label>
<label class="switch">
<input id="defaultSlider" type="checkbox">
<span class="slider"></span>
</label>
</div>
</div><br>
</div>
<div id="highlighters" style="margin-top: -7px; margin-bottom: 1px; padding-bottom: 8px;">
<div id="levelSizeText" class="stackHeader">Highlighters</div>
<div id="levelSizeInsider">
<div id="fitButtonContainer" style = "width: 242px;">
<div style="display: inline-block;">
<button id="highlightSnakesButton" class="fitButton highlightButton" title="5 Highlight remaining snakes">Snakes</button>
<button id="highlightFruitsButton" class="fitButton highlightButton" title="6 Highlight and number remaining fruits">Fruits</button>
<button id="highlightPoisonFruitsButton" class="fitButton highlightButton" title="7 Highlight and number remaining poison fruits">Poison</button>
<button disabled id="clearHighlightsButton" class="fitButton highlightButton" title="8 Clear all highlights">Clear Highlights</button>
</div>
</div>
</div>
</div>
<div style="display: inline-block">
<button id="themeButton" class="bottomButton" title="T Shift + T when editor is open">Theme | <b>Spring</b></button>
<button id="showGridButton" class="bottomButton" title="G">Show Grid</button>
<button id="hideHotkeyButton" class="bottomButton" title="Shift + H">Hide Hotkeys</button><br><br>
<div class="sliderStack">
<div class="stackHeader">Compatibility</div>
<div id="sliderContainer" style="float:left; margin-top: 5px;">
<label class="sliderLabel">Toggle Block Rendering</label>
<label class="switch">
<input id="blockSlider" type="checkbox">
<span class="slider"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<br><br>
<div id="editorDiv" style="display:none;">
<div style="display: inline-block;">
<textarea id="serializationTextarea" rows=30 cols=80></textarea>
<div>
<button id="submitSerializationButton">Submit</button>
<div style="display: table; float: right; vertical-align: middle;"><div id="shareLink">Share link</div><input id="shareLinkTextbox"></div><br><br>
<div style="display: table; float: right; vertical-align: middle;"><div id="link2">Level string</div><input id="link2Textbox"></div>
</div>
</div>
</div>
<br><br>
<div style="text-align: center; width: 100%; height: 50px;">
<div style="margin-top:1em;"><a href="https://github.com/thejoshwolfe/snakefall">Original Snakefall Github Page</a></div>
<div>This game is a clone of <a href="http://snakebird.noumenongames.com/">Snakebird</a> by Noumenon Games.</div>
</div>
</span>
<div id="csText">Press any key to verify the solution</div>
<script src="version.js"></script>
<script src="Main.js"></script>
</body>
</html>