LemmingsJS-MIDI/editor.html at master · doublemover/LemmingsJS-MIDI · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Lemmings Editor</title>
  <meta charset="UTF-8" />
  <meta name="lemmings-analytics" content="runtime" />
  <meta name="lemmings-analytics-endpoint" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="icon" type="image/png" href="img/favicon.png" />
  <link type="text/css" rel="stylesheet" href="css/editor.css">
  <script type="module" src="js/app/editorBoot.js"></script>
</head>
<body oncontextmenu="return false;">
  <div class="editor-app">
    <header class="editor-header">
      <div class="editor-title">Lemmings Editor</div>
      <div class="editor-controls">
        <label title="Choose the level pack to edit.">
          Pack
          <select id="editorGameTypeSelect" title="Choose the level pack to edit."></select>
        </label>
        <label title="Choose the level group within the selected pack.">
          Group
          <select id="editorLevelGroupSelect" title="Choose the level group within the selected pack."></select>
        </label>
        <label title="Choose the level index within the selected group.">
          Level
          <select id="editorLevelIndexSelect" title="Choose the level index within the selected group."></select>
        </label>
        <label title="Choose a saved editor level from local storage.">
          Saved
          <select id="editorSavedSelect" title="Choose a saved editor level from local storage."></select>
        </label>
        <details class="editor-project-menu">
          <summary title="Open project and pack controls.">Project</summary>
          <div class="editor-project-menu__content">
            <label title="Choose an editor project from local storage.">
              Project
              <select id="editorProjectSelect" title="Choose an editor project from local storage."></select>
            </label>
            <label title="Choose a level within the active editor project.">
              Level
              <select id="editorProjectLevelSelect" title="Choose a level within the active editor project."></select>
            </label>
            <button class="secondary" id="editorProjectNew" type="button" title="Create a new project from the current level.">New Project</button>
            <button class="secondary" id="editorProjectSaveLevel" type="button" title="Save the current level into the active project.">Save Level</button>
            <button class="secondary" id="editorProjectAddLevel" type="button" title="Add the current level as a new project level.">Add Level</button>
            <button class="secondary" id="editorProjectDuplicateLevel" type="button" title="Duplicate the active project level.">Duplicate</button>
            <button class="secondary" id="editorProjectRenameLevel" type="button" title="Rename the active project level.">Rename</button>
            <button class="secondary" id="editorProjectDeleteLevel" type="button" title="Delete the active project level.">Delete</button>
            <button class="secondary" id="editorProjectExportPack" type="button" title="Export the active project as a pack bundle JSON with nxmi text and validation summaries.">Export Pack</button>
            <button class="secondary" id="editorProjectExportArchive" type="button" title="Export the active project as an installable editor pack archive JSON.">Export Archive</button>
            <button class="secondary" id="editorProjectInstallPack" type="button" title="Install an editor pack archive into local project storage.">Install Pack</button>
            <input id="editorProjectInstallPackInput" type="file" accept=".json,application/json" hidden />
          </div>
        </details>
        <button id="editorNewLevel" type="button" title="Create a new blank level.">New Level</button>
        <button id="editorSavedSave" type="button" title="Save the current level to local storage.">Save</button>
        <button class="secondary" id="editorUndo" type="button" title="Undo the last change.">Undo</button>
        <button class="secondary" id="editorRedo" type="button" title="Redo the last undone change.">Redo</button>
        <span id="editorDirtyStatus" class="dirty-indicator" title="Shows whether there are unsaved changes.">Saved</span>
        <button id="editorSavedExport" type="button" title="Export the current level in editor format (.nxlv).">Export</button>
        <button id="editorSavedExportClassic" type="button" title="Export a lossy classic LVL file; use NXLV to preserve editor and NeoLemmix data.">Export LVL</button>
        <button class="secondary" id="editorSavedImport" type="button" title="Import a saved editor level (.nxlv).">Import</button>
        <button class="secondary" id="editorSavedImportClassic" type="button" title="Import a classic LVL file into the editor.">Import LVL</button>
        <button class="secondary" id="editorPlaytestToggle" type="button" title="Toggle playtest mode to run the level.">Playtest</button>
        <input id="editorSavedImportInput" type="file" accept=".nxlv" title="Choose an editor level file (.nxlv) to import." hidden />
        <input id="editorSavedImportClassicInput" type="file" accept=".lvl" title="Choose a classic LVL file to import." hidden />
      </div>
    </header>

    <div class="editor-main">
      <aside class="editor-panel">
        <div class="panel-title">Tools</div>
        <div class="tool-grid" id="editorToolList" role="group" aria-label="Editor tools">
          <button type="button" data-tool="select" data-tooltip="Select and move existing items.">Select</button>
          <button type="button" data-tool="terrain" data-tooltip="Place terrain pieces.">Terrain</button>
          <button type="button" data-tool="gadget" data-tooltip="Place interactive objects.">Object</button>
          <button type="button" data-tool="trigger" data-tooltip="Place trigger regions.">Trigger</button>
          <button type="button" data-tool="midi-flag" data-tooltip="Place MIDI flag triggers.">MIDI Flag</button>
          <button type="button" data-tool="entrance" data-tooltip="Place entrances (spawners).">Entrance</button>
          <button type="button" data-tool="exit" data-tooltip="Place exits.">Exit</button>
          <button type="button" data-tool="steel" data-tooltip="Draw steel areas.">Steel</button>
          <button type="button" data-tool="brush" data-tooltip="Paint terrain with a brush.">Brush</button>
          <button type="button" data-tool="eraser" data-tooltip="Erase terrain or gadgets.">Eraser</button>
        </div>

        <div class="panel-title">Brush</div>
        <label class="control-row" title="Snap placements to the current grid size.">
          Snap to grid
          <input id="editorSnapToggle" type="checkbox" checked title="Snap placements to the current grid size." />
        </label>
        <label class="control-row" title="Set the grid size for snapping and nudge steps.">
          Grid size
          <input id="editorGridSize" type="number" min="1" value="4" title="Set the grid size for snapping and nudge steps." />
        </label>
        <label class="control-row" title="Set the brush size for painting terrain.">
          Brush size
          <input id="editorBrushSize" type="number" min="1" max="64" value="1" title="Set the brush size for painting terrain." />
        </label>
        <label class="control-row" title="Allow the eraser tool to remove gadgets as well as terrain.">
          Erase gadgets
          <input id="editorEraseGadgets" type="checkbox" title="Allow the eraser tool to remove gadgets as well as terrain." />
        </label>

        <div class="panel-title">Palette</div>
        <div class="palette-block">
          <div class="palette-tabs" id="editorPaletteTabs" role="group" aria-label="Palette categories" title="Switch between terrain, object, and trigger palettes.">
            <button type="button" data-tab="terrain" class="active" aria-pressed="true" title="Show terrain palette.">Terrain</button>
            <button type="button" data-tab="gadgets" aria-pressed="false" title="Show object palette.">Objects</button>
            <button type="button" data-tab="triggers" aria-pressed="false" title="Show trigger palette.">Triggers</button>
          </div>
          <div class="palette-toolbar">
            <input id="editorPaletteSearch" type="text" placeholder="Filter pieces" title="Filter palette entries by name or id." />
            <div class="palette-view-toggle" role="group" aria-label="Palette view mode">
              <button type="button" id="editorPaletteViewList" class="active" aria-pressed="true" title="List view">List</button>
              <button type="button" id="editorPaletteViewGrid" aria-pressed="false" title="Grid view">Grid</button>
            </div>
          </div>
          <div class="palette-recent" id="editorPaletteRecent" role="group" aria-label="Recently used palette pieces" hidden></div>
          <div class="palette-list" id="editorPaletteTerrain"></div>
          <div class="palette-list" id="editorPaletteGadgets" hidden></div>
          <div class="palette-list" id="editorPaletteTriggers" hidden></div>
        </div>
      </aside>

      <section class="editor-canvas-panel">
        <div class="canvas-wrap">
          <canvas id="editorCanvas" width="800" height="480" aria-label="Level editor canvas"></canvas>
        </div>
        <div class="status-strip">
          <span id="editorCursorStatus">X:— Y:—</span>
          <span id="editorStatus">Ready</span>
          <span id="editorSelectionStatus">No selection</span>
        </div>
      </section>

      <aside class="editor-panel">
        <div class="panel-title">Level Settings</div>
        <div class="inspector-grid">
          <label title="Set the level title shown in menus.">Title<input id="editorHeaderTitle" type="text" title="Set the level title shown in menus." /></label>
          <label title="Choose the style/tileset used for terrain and objects.">Style<select id="editorHeaderStyle" title="Choose the style/tileset used for terrain and objects."></select></label>
          <div class="field-help" title="The style controls which terrain and object set is used for previews and exports.">Style chooses the tileset for terrain and objects.</div>
          <label title="Set the level width in pixels.">Width<input id="editorHeaderWidth" type="number" min="1" title="Set the level width in pixels." /></label>
          <label title="Set the level height in pixels.">Height<input id="editorHeaderHeight" type="number" min="1" title="Set the level height in pixels." /></label>
          <label title="Total lemmings released for this level.">Lemmings<input id="editorHeaderLemmings" type="number" min="0" title="Total lemmings released for this level." /></label>
          <label title="How many lemmings must be saved to win.">Save Req<input id="editorHeaderSaveRequirement" type="number" min="0" title="How many lemmings must be saved to win." /></label>
          <label title="Time limit in minutes. Use INFINITE for no limit.">Time Limit<input id="editorHeaderTimeLimit" type="text" title="Time limit in minutes. Use INFINITE for no limit." /></label>
          <label title="Spawn interval (release rate) in ticks.">Spawn Interval<input id="editorHeaderSpawnInterval" type="number" min="0" title="Spawn interval (release rate) in ticks." /></label>
          <label title="Initial camera X position in pixels.">Start X<input id="editorHeaderStartX" type="number" title="Initial camera X position in pixels." /></label>
          <label title="Initial camera Y position in pixels.">Start Y<input id="editorHeaderStartY" type="number" title="Initial camera Y position in pixels." /></label>
        </div>

        <div class="panel-separator"></div>

        <div class="panel-title">Current Selection</div>
        <div class="control-row"><span id="editorSelType">None</span><span id="editorSelName"></span></div>
        <div class="inspector-grid">
          <label title="Selection X position in pixels.">X<input id="editorSelX" type="number" title="Selection X position in pixels." /></label>
          <label title="Selection Y position in pixels.">Y<input id="editorSelY" type="number" title="Selection Y position in pixels." /></label>
          <label title="Selection width in pixels.">Width<input id="editorSelWidth" type="number" title="Selection width in pixels." /></label>
          <label title="Selection height in pixels.">Height<input id="editorSelHeight" type="number" title="Selection height in pixels." /></label>
          <label title="Rotation in degrees.">Rotate<input id="editorSelRotate" type="number" min="0" max="270" step="90" title="Rotation in degrees." /></label>
          <label title="Skill for gadget triggers (if applicable).">Skill<input id="editorSelSkill" type="text" title="Skill for gadget triggers (if applicable)." /></label>
          <label title="Lemmings emitted by entrance gadgets.">Lemmings<input id="editorSelLemmings" type="number" title="Lemmings emitted by entrance gadgets." /></label>
          <label title="Pairing value for linked gadgets.">Pairing<input id="editorSelPairing" type="number" title="Pairing value for linked gadgets." /></label>
        </div>
        <details class="selection-flags" id="editorSelectionFlags">
          <summary title="Toggle placement flags for the selected item.">Placement Flags</summary>
          <label class="control-row" title="Emit a dedicated MIDI trigger event for this gadget trigger area.">
            MIDI Flag
            <input id="editorSelMidiFlag" type="checkbox" title="Emit a dedicated MIDI trigger event for this gadget trigger area." />
          </label>
          <label class="control-row" title="MIDI flag id used for trigger mapping in the MIDI sequencer.">
            MIDI Flag ID
            <input id="editorSelMidiFlagId" type="number" min="1" max="9999" title="MIDI flag id used for trigger mapping in the MIDI sequencer." />
          </label>
          <label class="control-row" title="Flip the selection horizontally.">
            Flip H
            <input id="editorSelFlipH" type="checkbox" title="Flip the selection horizontally." />
          </label>
          <label class="control-row" title="Flip the selection vertically.">
            Flip V
            <input id="editorSelFlipV" type="checkbox" title="Flip the selection vertically." />
          </label>
          <label class="control-row" title="Prevent placing terrain over existing terrain.">
            No Overwrite
            <input id="editorSelNoOverwrite" type="checkbox" title="Prevent placing terrain over existing terrain." />
          </label>
          <label class="control-row" title="Erase terrain where this piece is placed.">
            Erase
            <input id="editorSelErase" type="checkbox" title="Erase terrain where this piece is placed." />
          </label>
          <label class="control-row" title="Only allow lemmings to move in one direction.">
            One Way
            <input id="editorSelOneWay" type="checkbox" title="Only allow lemmings to move in one direction." />
          </label>
        </details>
        <div class="selection-actions" id="editorSelectionActions">
          <div class="selection-order">
            <button class="editor-button" id="editorSelectionBringFront" type="button" title="Bring selection to front (top layer).">Bring to Front</button>
            <button class="editor-button" id="editorSelectionMoveForward" type="button" title="Move selection forward by one layer.">Move Forward</button>
            <button class="editor-button" id="editorSelectionMoveBackward" type="button" title="Move selection backward by one layer.">Move Back</button>
            <button class="editor-button" id="editorSelectionSendBack" type="button" title="Send selection to back (bottom layer).">Send to Back</button>
          </div>
          <div class="selection-order">
            <button class="editor-button" id="editorSelectionAlignLeft" type="button" title="Align selected items to the left edge.">Align Left</button>
            <button class="editor-button" id="editorSelectionAlignCenter" type="button" title="Align selected items to the horizontal center.">Align Center</button>
            <button class="editor-button" id="editorSelectionAlignRight" type="button" title="Align selected items to the right edge.">Align Right</button>
            <button class="editor-button" id="editorSelectionDistributeX" type="button" title="Distribute selected items evenly across X.">Distribute X</button>
            <button class="editor-button" id="editorSelectionAlignTop" type="button" title="Align selected items to the top edge.">Align Top</button>
            <button class="editor-button" id="editorSelectionAlignMiddle" type="button" title="Align selected items to the vertical center.">Align Middle</button>
            <button class="editor-button" id="editorSelectionAlignBottom" type="button" title="Align selected items to the bottom edge.">Align Bottom</button>
            <button class="editor-button" id="editorSelectionDistributeY" type="button" title="Distribute selected items evenly across Y.">Distribute Y</button>
          </div>
          <label class="control-row compact-row" title="Replace selected terrain/object pieces with this id.">
            Replace Piece
            <div class="inline-controls">
              <input id="editorSelectionReplacePiece" type="number" title="Piece id to apply to the current selection." />
              <button class="editor-button" id="editorSelectionReplaceApply" type="button" title="Apply replacement piece id to selected terrain/object entries.">Apply</button>
            </div>
          </label>
          <label class="control-row compact-row" title="Randomize selected terrain/object entries from a piece-id list.">
            Randomize Pieces
            <div class="inline-controls">
              <input id="editorSelectionRandomPieces" type="text" placeholder="1,2,3" title="Comma-separated piece ids to randomize from." />
              <input id="editorSelectionRandomSeed" type="number" placeholder="seed" title="Optional seed for deterministic randomization." />
              <label class="inline-toggle" title="Only choose pieces with matching width and height.">
                <input id="editorSelectionRandomSameSize" type="checkbox" />
                Same size
              </label>
              <button class="editor-button" id="editorSelectionRandomApply" type="button" title="Randomize selected terrain/object pieces using these ids.">Apply</button>
            </div>
          </label>
          <label class="control-row compact-row" title="Scale selected entries around their selection center.">
            Transform
            <div class="inline-controls">
              <input id="editorSelectionScaleX" type="number" value="1" step="0.05" title="Horizontal scale factor." />
              <input id="editorSelectionScaleY" type="number" value="1" step="0.05" title="Vertical scale factor." />
              <button class="editor-button" id="editorSelectionTransformApply" type="button" title="Scale the current selection group around its center.">Apply</button>
            </div>
          </label>
          <button class="editor-button" id="editorDeleteSelection" type="button" title="Delete the current selection.">Delete Selection</button>
        </div>

        <div class="panel-title">Validation</div>
        <div class="validation-toolbar">
          <button class="editor-button" id="editorSolvabilityCheck" type="button" title="Run a bounded advisory solvability check.">Check Solvability</button>
          <button class="editor-button" id="editorValidationReportExport" type="button" title="Export current validation issues and pack consistency checks as JSON.">Export Report</button>
          <span id="editorSolvabilityStatus" class="validation-status" data-status="idle" aria-live="polite">Solvability not checked</span>
        </div>
        <div class="issue-list" id="editorIssuesList" role="list" aria-live="polite"></div>
      </aside>
    </div>
  </div>
  <div id="editorShortcutOverlay" class="shortcut-overlay" aria-hidden="true">
    <div class="shortcut-overlay__panel" role="dialog" aria-modal="true" aria-labelledby="editorShortcutOverlayTitle">
      <div class="shortcut-overlay__header">
        <div class="shortcut-overlay__title" id="editorShortcutOverlayTitle">Editor Shortcuts</div>
        <button type="button" class="shortcut-overlay__close" title="Close the shortcut overlay.">Close</button>
      </div>
      <div class="shortcut-overlay__content"></div>
    </div>
  </div>
</body>
</html>