Move gates to the canopy layer

- On small screens, the top two headers (with the pack + level names)
  are now removed; instead the pack and level name are shown when
  starting each level, and the buttons from those headers are moved into
  a pause menu.

- The options, compat, and level browser dialogs were all reworked to
  fit better on narrow screens.

- The level overlay has a more consistent layout and tries harder to not
  draw in the middle, where the player generally is (except that the
  mobile pause menu goes there, but oh well).

- The score tally at the end of a level is now less of a small table and
  more of...  more numbers, I guess?

- Links to the music source and author now open in a new window to
  reduce risk of accidentally clicking them and losing your progress.

- A few obituaries were shortened, and several more were added.

- The game ending screen is now accessible on a touchscreen (oops).

- The pause and rewind buttons visually indicate when you're in that
  mode, suggesting you can hit them again to switch to normal play.

- Touch controls are now relative to the player and only apply within
  the game viewport.

- Disabled buttons look a bit less janky.

Still some work to do on this, but it's a pretty solid start.

README.md

@@ -1,8 +1,16 @@
 # Lexy's Labyrinth
 
-This is a web implementation of a puzzle game that bears a _striking_ similarity to [Chip's Challenge](https://wiki.bitbusters.club/Chip%27s_Challenge) and its [sequel](https://wiki.bitbusters.club/Chip%27s_Challenge_2), but is legally distinct, and also free!
+This is a reimplementation of [**Chip's Challenge®**](https://wiki.bitbusters.club/Chip%27s_Challenge), that puzzle game you might remember from the early 90s (and its long-awaited [sequel](https://wiki.bitbusters.club/Chip%27s_Challenge_2)).
 
-It is a work in progress and also might be abandoned and forgotten at any time.
+It's free; runs in a browser; has completely new artwork, sounds, and music; comes with hundreds of quality fan-made levels built in; and can load the original levels from a copy of the commercial game!
+
+Documentation is underway on the [wiki](https://github.com/eevee/lexys-labyrinth/wiki).
+
+## My lawyer is telling me to say this
+
+To be absolutely clear: this is a ***fan project*** and is not affiliated with, sponsored by, endorsed by, or in any way approved of by Bridgestone Multimedia Group LLC.  **Chip's Challenge** is a registered trademark of Bridgestone Multimedia Group LLC, and is used here for identification purposes only.
+
+Despite the names, the built-in "Chip's Challenge Level Packs" are community creations and have no relation to the commercial games or their levels.
 
 ## Play online
 
@@ -10,31 +18,35 @@ Give it a try, I guess!  [https://c.eev.ee/lexys-labyrinth/](https://c.eev.ee/le
 
 ## Current status
 
-- Supports 99% of Chip's Challenge 1
-- Supports 75% of Chip's Challenge 2
+- Fully compatible with Chip's Challenge 1 levels...  barring a few obscure rule changes
+- Fully compatible with Chip's Challenge 2 levels...  barring a few obscure bugs
 - Completely original tileset, sound effects, and music
-- Can load MS Chip's Challenge DAT/CCL files and Steam Chip's Challenge C2M files
-- Can load levels from your hard drive
-- Can play back replays (demos) from C2M files, though some may desync
-- Allows undoing moves, with moderate success
-- Has the beginning bits of a level editor
+- Compatible with MS Chip's Challenge DAT/CCL files, Steam Chip's Challenge C2G/C2M files, and ZIP files
+- Can load one of its built-in level packs, the original levels, or anything you've got lying around
+- Able to record and play back demos (replays) from Steam-format levels
+- Lets you rewind your mistakes, up to 30 seconds back
+- Lets you take the pressure off by switching from real-time to turn-based mode, where nothing moves until you do
+- Contains a completely usable level editor with support for every tile in Chip's Challenge 2
+- Works on touchscreens too
+- Has compatibility settings for opting into behavior (or bugs) from particular implementations
+- Debug mode (click the logo in the lower left)
 
 ### Planned features
 
-- Save your score, and compare it to the BBC leaderboards
 - Load levels directly from the BBC set list
-- Support for all of the nonsense in Chip's Challenge 2
-- Allow playing the original commercial levels by dragging the data files in from your own computer
-- Support various sets of bugs from various implementations
-- Play the game turn-based instead of realtime (i.e., nothing moves until Chip does)
-- Record demos
-- Mouse and touchscreen support
-- Bunches of debug features
-- Outright cheat in a variety of ways
+- Mouse support
 
-### Noble aspirations
+## For developers
 
-- New exclusive puzzle elements??  Embrace extend extinguish baby
+It's all static JS; there's no build system.  If you want to run it locally, just throw your favorite HTTP server at a checkout and open a browser.  (Browsers won't allow XHR from `file:///` URLs, alas.  If you don't have a favorite HTTP server, try `python -m http.server`.)
+
+If you have Node installed, you can test the solutions included with the bundled level packs without needing a web browser:
+
+```
+node js/headless/bulktest.mjs
+```
+
+Note that solution playback is still not perfect, so don't be alarmed if you don't get 100% — only if you make a change and something regresses.
 
 ## Special thanks
 
@@ -44,5 +56,3 @@ Give it a try, I guess!  [https://c.eev.ee/lexys-labyrinth/](https://c.eev.ee/le
 - Everyone who worked on [Chip's Challenge Level Pack 1](https://wiki.bitbusters.club/Chip%27s_Challenge_Level_Pack_1), the default set of levels
 - [Tile World](https://wiki.bitbusters.club/Tile_World) for being an incredible reference on Lynx mechanics
 - Everyone who contributed music — see [`js/soundtrack.js`](js/soundtrack.js) for a list!
-
-Not associated with or blessed by Chuck Sommerville, Niffler, or AOP.

index.html

@@ -5,16 +5,80 @@
     <title>Lexy's Labyrinth</title>
     <link rel="stylesheet" type="text/css" href="style.css">
     <link rel="shortcut icon" type="image/png" href="icon.png">
+    <script>
+        "use strict";
+        {
+            let domloaded = false;
+            window.addEventListener('DOMContentLoaded', ev => domloaded = true);
+
+            let _ll_log_fatal_error = (err, ev) => {
+                document.getElementById('loading').setAttribute('hidden', '');
+                let failed = document.getElementById('failed');
+                failed.removeAttribute('hidden');
+                document.body.setAttribute('data-mode', 'failed');
+
+                failed.classList.add('--got-error');
+                let stack = '(origin unknown)';
+                if (err.stack && err.stack.match(/\n/)) {
+                    // Chrome sometimes gives us a stack that's actually just the message without
+                    // any filenames, in which case skip it
+                    stack = err.stack.replace(/^/mg, "  ");
+                }
+                else if (err.fileName) {
+                    stack = `in ${err.fileName} at ${err.lineNumber}:${err.columnNumber}`;
+                }
+                else if (ev) {
+                    stack = `in ${ev.filename} at ${ev.lineno}:${ev.colno}`;
+                }
+                failed.querySelector('pre').textContent = `${err.toString()}\n\n${stack}`;
+            };
+            window.ll_log_fatal_error = function(err, ev) {
+                if (domloaded) {
+                    _ll_log_fatal_error(err, ev);
+                }
+                else {
+                    window.addEventListener('DOMContentLoaded', () => _ll_log_fatal_error(err, ev));
+                }
+            };
+            let error_listener = ev => {
+                if (! ev.error)
+                    // Not a script error
+                    return;
+                try {
+                    ll_log_fatal_error(ev.error, ev);
+                }
+                catch (err) {}
+            };
+            window.addEventListener('error', error_listener, true);
+            // Once we've loaded successfully, drop the handler
+            window.ll_successfully_loaded = function() {
+                window.removeEventListener('error', error_listener, true);
+            };
+        }
+    </script>
+    <!-- FIXME it would be super swell if i could load this lazily -->
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
     <script type="module" src="js/main.js"></script>
     <meta name="og:type" content="website">
     <meta name="og:image" content="https://c.eev.ee/lexys-labyrinth/og-preview.png">
     <meta name="og:title" content="Lexy's Labyrinth">
-    <meta name="og:description" content="A (work in progress) reimplementation of Chip's Challenge 1 and 2, using entirely free assets.">
+    <meta name="og:description" content="Free online puzzle game that emulates Chip's Challenge.  Play hundreds of community curated levels, load the levels from the commercial games, or make your own with the built-in editor.">
+    <meta name="description" content="Free online puzzle game that emulates Chip's Challenge.  Play hundreds of community curated levels, load the levels from the commercial games, or make your own with the built-in editor.">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 </head>
-<body data-mode="splash">
+<body data-mode="failed">
+    <script>document.body.setAttribute('data-mode', 'loading');</script>
     <svg id="svg-iconsheet">
     <defs>
+        <g id="svg-icon-menu-chevron">
+            <path d="M2,4 l6,6 l6,-6 v3 l-6,6 l-6,-6 z"></path>
+        </g>
+        <g id="svg-icon-prev">
+            <path d="M14,1 2,8 14,14 z">
+        </g>
+        <g id="svg-icon-next">
+            <path d="M2,1 14,8 2,14 z">
+        </g>
         <!-- Actions -->
         <g id="svg-icon-up">
             <path d="M0,12 l8,-8 l8,8 z"></path>
@@ -40,16 +104,26 @@
             <path d="M 8,13 13,11 8,9 3,11 Z m 0,2 7,-3 V 11 L 8,8 1,11 v 1 z"></path>
             <ellipse cx="5.5" cy="11" rx="0.75" ry="0.5"></ellipse>
         </g>
+        <!-- Hint background -->
+        <g id="svg-icon-hint">
+            <path d="M1,8 a7,7 0 1,1 14,0 7,7 0 1,1 -14,0 M2,8 a6,6 0 1,0 12,0 6,6 0 1,0 -12,0"></path>
+            <path d="M5,6 a1,1 0 0,0 2,0 a1,1 0 1,1 1,1 a1,1 0 0,0 -1,1 v1 a1,1 0 1,0 2,0 v-0.17 A3,3 0 1,0 5,6"></path>
+            <circle cx="8" cy="12" r="1"></circle>
+        </g>
+        <!-- Editor stuff -->
+        <g id="svg-icon-zoom">
+            <path d="M1,6 a5,5 0 1,1 10,0 a5,5 0 1,1 -10,0 m2,0 a3,3 0 1,0 6,0 a3,3 0 1,0 -6,0"></path>
+            <path d="M14,12 l-2,2 -4,-4 2,-2 4,4"></path>
+        </g>
     </defs>
     </svg>
     <header id="header-main">
         <img id="header-icon" src="icon.png" alt="">
-        <h1>Lexy's Labyrinth</h1>
-        <p>— a game by <a href="https://eev.ee/">eevee</a></p>
+        <h1><a href="https://github.com/eevee/lexys-labyrinth">Lexy's Labyrinth</a></h1>
+        <p>— an <a href="https://github.com/eevee/lexys-labyrinth">open source</a> game by <a href="https://eev.ee/">eevee</a></p>
         <nav>
-            <button id="main-about" type="button">about</button>
-            <button id="main-help" type="button" disabled>help</button>
-            <button id="main-options" type="button" disabled>options</button>
+            <button id="main-compat" type="button">mode: <output>lexy</output></button>
+            <button id="main-options" type="button">options</button>
         </nav>
     </header>
     <header id="header-pack">
@@ -65,117 +139,177 @@
         <h3 id="level-name">Level 1 — Key Pyramid</h3>
         <nav>
             <button id="main-prev-level" type="button">
-                <svg class="svg-icon" viewBox="0 0 16 16" title="previous"><path d="M14,1 2,8 14,14 z"></svg>
+                <svg class="svg-icon" viewBox="0 0 16 16" title="previous"><use href="#svg-icon-prev"></svg>
             </button>
             <button id="main-choose-level" type="button">Level select</button>
             <button id="main-next-level" type="button">
-                <svg class="svg-icon" viewBox="0 0 16 16" title="next"><path d="M2,1 14,8 2,14 z"></svg>
+                <svg class="svg-icon" viewBox="0 0 16 16" title="next"><use href="#svg-icon-next"></svg>
             </button>
         </nav>
     </header>
-    <main id="splash">
+    <main id="failed">
+        <h1>oops!</h1>
+        <p>Sorry, the game was unable to load at all.</p>
+        <p>If you have JavaScript partly or wholly blocked, I salute you!  ...but this is an interactive game and cannot work without it.</p>
+        <p class="-with-error">I did manage to capture this error, which you might be able to <a href="https://github.com/eevee/lexys-labyrinth/issues/new">report somewhere</a>:</p>
+        <pre class="-with-error stack-trace"></pre>
+    </main>
+    <main id="loading" hidden>
+        <p>...loading...</p>
+        <div class="scrolling-sidewalk">
+            <img src="loading.gif" alt="Lexy walking">
+        </div>
+    </main>
+    <script>
+        document.querySelector('#failed').setAttribute('hidden', '');
+        document.querySelector('#loading').removeAttribute('hidden');
+    </script>
+    <main id="splash" hidden>
         <div class="drag-overlay"></div>
         <header>
-            <h1><img src="og-preview.png" alt="">Lexy's Labyrinth</h1>
-            <p>an unapproved Chip's Challenge emulator</p>
+            <img src="og-preview.png" alt="">
+            <h1>Lexy's Labyrinth</h1>
+            <p>an unofficial <strong>Chip's Challenge</strong>® emulator</p>
+            <button id="splash-fullscreen" type="button" title="Toggle fullscreen">
+                <svg class="svg-icon" viewBox="0 0 16 16">
+                    <path d="m 11,1 h 4 V 5 L 14,4 12,6 10,4 12,2 Z"></path>
+                    <path d="m 11,15 h 4 v -4 l -1,1 -2,-2 -2,2 2,2 z"></path>
+                    <path d="M 5,1 H 1 V 5 L 2,4 4,6 6,4 4,2 Z"></path>
+                    <path d="M 5,15 H 1 v -4 l 1,1 2,-2 2,2 -2,2 z"></path>
+                </svg>
+            </button>
         </header>
-        <section id="splash-intro">
-            <p><strong>Welcome</strong> to Lexy's Labyrinth, an open source puzzle game that is curiously similar to — but legally distinct from — the Atari classic <a href="https://en.wikipedia.org/wiki/Chip%27s_Challenge">Chip's Challenge</a>!</p>
-            <p>Pick a level pack to get started!  You can also load and play any levels you've got lying around, or brave the level editor and make one of your own.</p>
-            <p>If you're not familiar with the game, read up on <a href="https://github.com/eevee/lexys-labyrinth/wiki/How-To-Play">how to play</a>.  You can also get more technical details or report bugs on <a href="https://github.com/eevee/lexys-labyrinth">GitHub</a>, find out more about Chip's Challenge via the <a href="https://bitbusters.club/">Bit Busters Club</a> fansite, or support this endeavor (and other things I do) on <a href="https://www.patreon.com/eevee">Patreon</a>.</p>
-        </section>
+        <div id="splash-links">
+            <a href="https://github.com/eevee/lexys-labyrinth/wiki">About</a>
+            <a href="https://github.com/eevee/lexys-labyrinth/wiki/How-To-Play">How to play</a>
+            <a href="https://github.com/eevee/lexys-labyrinth">Source code and more</a>
+            <a href="https://patreon.com/eevee">Support on Patreon</a>
+        </div>
+        <p id="splash-disclaimer"><strong>Chip's Challenge</strong> is a registered trademark of Bridgestone Media Group LLC, used here for identification purposes only.  Not affiliated with, sponsored, or endorsed by Bridgestone Media Group LLC.</p>
 
         <section id="splash-stock-levels">
-            <h2>Play community levels</h2>
-            <!-- populated by js -->
-        </section>
+            <h2>Play</h2>
+            <ul class="played-pack-list" id="splash-stock-pack-list">
+                <!-- populated by js -->
+            </ul>
+            <div class="button-row">
+                <button type="button" class="button-big" disabled>More levels</button>
+                <button type="button" class="button-big" disabled>Other saved scores</button>
+            </div>
 
-        <section id="splash-upload-levels">
-            <h2>Load other levels</h2>
-            <p>Load and play any levels you have on hand, including the original levels.  Supports CCL/DAT, C2G, and individual C2Ms (though scores aren't saved for those).  Find more on the <a href="https://sets.bitbusters.club/">Bit Busters Club set list</a>.</p>
-            <!-- TODO zip files! -->
-            <p>You can also drag and drop files or directories into this window.</p>
-            <input id="splash-upload-file" type="file" accept=".dat,.ccl,.c2m,.ccs" multiple>
-            <input id="splash-upload-dir" type="file" webkitdirectory>
-            <button type="button" id="splash-upload-file-button" class="button-big">Load files</button>
-            <button type="button" id="splash-upload-dir-button" class="button-big">Load directory</button>
-            <p>If you still have the original Microsoft "BOWEP" game lying around, you can play the Chip's Challenge 1 levels by loading <code>CHIPS.DAT</code>.</p>
-            <p>If you own the Steam versions of <a href="https://store.steampowered.com/app/346850/Chips_Challenge_1/">Chip's Challenge 1</a> (<em>free!</em>) or <a href="https://store.steampowered.com/app/348300/Chips_Challenge_2/">Chip's Challenge 2</a> ($5 last I checked), you can play those too, even on Linux or Mac:</p>
-            <ol class="normal-list">
-                <li>Right-click the game in Steam and choose <em>Properties</em>.  On the <em>Local Files</em> tab, click <em>Browse local files</em>.</li>
-                <li>Open the <code>data</code> folder, then <code>games</code>.</li>
-                <li>You should see either a <code>cc1</code> or <code>cc2</code> folder.  Drag it into this window, or load it with the button above.</li>
-            </ol>
+            <h2>More levels</h2>
+            <p>Supports CCL/DAT, C2G, C2M, and ZIP; drag and drop; and both custom and official levels.  <a href="https://github.com/eevee/lexys-labyrinth/wiki/Loading-Levels">More details</a></p>
+            <div class="button-row">
+                <input id="splash-upload-file" type="file" accept=".dat,.ccl,.c2m,.ccs,.zip" multiple>
+                <input id="splash-upload-dir" type="file" webkitdirectory>
+                <button type="button" id="splash-upload-file-button" class="button-big">Load files</button>
+                <button type="button" id="splash-upload-dir-button" class="button-big">Load directory</button>
+            </div>
+            <ul class="played-pack-list" id="splash-other-pack-list">
+                <!-- populated by js -->
+            </ul>
         </section>
 
         <section id="splash-your-levels">
-            <h2>Make your own (WIP lol)</h2>
-            <p>Please note that the level editor is <strong>very</strong> unfinished, and doesn't even have undo yet.  It may eat your work!  Beware!</p>
-            <p><button type="button" id="splash-create-pack" class="button-big">New pack</button></p>
-            <p><button type="button" id="splash-create-level" class="button-big">New scratch level<br>(won't be saved!)</button></p>
+            <h2>Create</h2>
+            <div class="button-row">
+                <button type="button" id="splash-create-pack" class="button-big">New pack</button>
+                <button type="button" id="splash-create-level" class="button-big">New scratch level<br>(won't be saved!)</button>
+            </div>
         </section>
     </main>
     <main id="player" hidden>
         <div id="player-main">
-            <div class="controls">
-                <div class="play-controls">
-                    <button class="control-pause" type="button" title="pause">
-                        <svg class="svg-icon" viewBox="0 0 16 16"><path d="M2,1 h4 v14 h-4 z M10,1 h4 v14 h-4 z"></svg>
-                        <span class="keyhint">p</span></button>
-                    <button class="control-restart" type="button" title="restart">
-                        <svg class="svg-icon" viewBox="0 0 16 16"><path d="M13,13 A 7,7 270 1,1 13,3 L15,1 15,7 9,7 11,5 A 4,4 270 1,0 11,11 z"></svg>
-                        </button>
-                    <button class="control-undo" type="button" title="undo">
-                        <svg class="svg-icon" viewBox="0 0 16 16"><path d="M6,5 6,2 1,7 6,12 6,9 A 10,10 60 0,1 15,12 A 10,10 90 0,0 6,5"></svg>
-                        </button>
-                    <button class="control-rewind" type="button" title="rewind">
-                        <svg class="svg-icon" viewBox="0 0 16 16"><path d="M1,8 7,2 7,14 z M9,8 15,2 15,14 z"></svg>
-                        <span class="keyhint">z</span></button>
-                    <label><input class="control-turn-based" type="checkbox"> Turn-based mode</label>
-                </div>
-                <div class="actions">
-                    <button class="action-drop" type="button">
-                        <svg class="svg-icon" viewBox="0 0 16 16"><use href="#svg-icon-drop"></use></svg>
-                        drop <span class="keyhint">q</span></button>
-                    <button class="action-cycle" type="button">
-                        <svg class="svg-icon" viewBox="0 0 16 16"><use href="#svg-icon-cycle"></use></svg>
-                        cycle <span class="keyhint">e</span></button>
-                    <button class="action-swap" type="button">
-                        <svg class="svg-icon" viewBox="0 0 16 16"><use href="#svg-icon-swap"></use></svg>
-                        switch <span class="keyhint">c</span></button>
+            <div id="player-controls">
+                <button class="control-pause" type="button" title="pause">
+                    <svg class="svg-icon" viewBox="0 0 16 16"><path d="M2,1 h4 v14 h-4 z M10,1 h4 v14 h-4 z"></path></svg>
+                    <span class="-optional-label">pause</span> <span class="keyhint"><kbd>p</kbd></span></button>
+                <button class="control-restart" type="button" title="restart">
+                    <svg class="svg-icon" viewBox="0 0 16 16"><path d="M13,13 A 7,7 270 1,1 13,3 L15,1 15,7 9,7 11,5 A 4,4 270 1,0 11,11 z"></path></svg>
+                    <span class="-optional-label">retry</span>
+                    </button>
+                <button class="control-undo" type="button" title="undo">
+                    <svg class="svg-icon" viewBox="0 0 16 16"><path d="M6,5 6,2 1,7 6,12 6,9 A 10,10 60 0,1 15,12 A 10,10 90 0,0 6,5"></path></svg>
+                    <span class="-optional-label">undo</span> <span class="keyhint"><kbd>u</kbd></span></button>
+                <button class="control-rewind" type="button" title="rewind">
+                    <svg class="svg-icon" viewBox="0 0 16 16"><path d="M1,8 7,2 7,14 z M9,8 15,2 15,14 z"></path></svg>
+                    <span class="-optional-label">rewind</span> <span class="keyhint"><kbd>z</kbd></span></button>
+                <div class="radio-faux-button-set">
+                    <label><input class="control-turn-based" type="checkbox"> <span>Step <br>mode</span></label>
                 </div>
             </div>
+            <div id="player-actions">
+                <button class="action-drop" type="button">
+                    <svg class="svg-icon" viewBox="0 0 16 16"><use href="#svg-icon-drop"></use></svg>
+                    drop <span class="keyhint"><kbd>q</kbd></span></button>
+                <button class="action-cycle" type="button">
+                    <svg class="svg-icon" viewBox="0 0 16 16"><use href="#svg-icon-cycle"></use></svg>
+                    cycle <span class="keyhint"><kbd>e</kbd></span></button>
+                <button class="action-swap" type="button">
+                    <svg class="svg-icon" viewBox="0 0 16 16"><use href="#svg-icon-swap"></use></svg>
+                    switch <span class="keyhint"><kbd>c</kbd></span></button>
+            </div>
             <section id="player-game-area">
                 <div class="level"><!-- level canvas and any overlays go here --></div>
-                <div class="overlay-message">
-                    <h1 class="-top"></h1>
-                    <div class="-middle"></div>
-                    <p class="-bottom"></p>
-                    <p class="-keyhint"></p>
+                <div class="player-overlay-message"></div>
+                <div class="player-hint-wrapper">
+                    <div class="player-hint"></div>
+                    <svg class="player-hint-bg-icon svg-icon" viewBox="0 0 16 16"><use href="#svg-icon-hint"></use></svg>
+                </div>
+                <div class="player-level-number">
+                    Level
+                    <output></output>
                 </div>
-                <div class="message"></div>
                 <div class="chips">
-                    <h3>Hearts</h3>
+                    <h3>
+                        <svg class="svg-icon" viewBox="0 0 16 16" title="Hearts">
+                            <path d="M4,2 C 2,2 1,4 1,6 C 1,8 2,10 4,12 C 6,14 8,15 8,15 C 8,15 10,14 12,12 C 14,10 15,8 15,6 C 15,4 14,2 12,2 C 10,2 8,5 8,5 C 8,5 6,2 4,2 z M12,4 C 12,5 13,6 14,6 C 13,6 12,7 12,8 C 12,7 11,6 10,6 C 11,6 12,5 12,4 z"></path>
+                        </svg>
+                    </h3>
                     <output></output>
                 </div>
                 <div class="time">
-                    <h3>Time</h3>
+                    <h3>
+                        <svg class="svg-icon" viewBox="0 0 16 16" title="Time">
+                            <path d="M 7,3 A -6,6 0 0 1 13,9 -6,6 0 0 1 7,15 -6,6 0 0 1 1,9 -6,6 0 0 1 7,3 Z M 7,4 A -5,5 0 0 0 2,9 -5,5 0 0 0 7,14 -5,5 0 0 0 12,9 -5,5 0 0 0 7,4 Z"></path>
+                            <!-- cap -->
+                            <path d="M 15,4 12,1 c -1,0 -1,0 -1,1 l 1,1 -2,2 1,1 2,-2 1,1 c 1,0 1,0 1,-1 z"></path>
+                            <!-- arrow -->
+                            <path d="M 8,9 10,6 7,8 Z"></path>
+                            <!-- center -->
+                            <circle cx="7" cy="9" r="1"></circle>
+                        </svg>
+                    </h3>
                     <output></output>
                 </div>
                 <div class="bonus">
-                    <h3>Bonus</h3>
+                    <h3>
+                        <svg class="svg-icon" viewBox="0 0 16 16" title="Bonus">
+                            <circle cx="8" cy="8" r="4"></circle>
+                            <path d="m9,7 2,-6 c 2,0 1,1 2,2 1,1 2,0 2,2 z"></path>
+                            <path d="M7,9 5,15 C 3,15 4,14 3,13 2,12 1,13 1,11 z"></path>
+                        </svg>
+                    </h3>
                     <output></output>
                 </div>
+                <div class="player-rules">
+                    <p id="player-rule-compat-lynx" title="This level is known to have compatibility issues with the default Lexy rules, but is playable with the rules it was designed for.">
+                        <svg class="svg-icon" viewBox="0 0 16 16"><path d="M 5,1 C 4,1 3,2 3,3 v 9 c 0,1 0,1 -1,1 -1,0 -1,2 0,2 h 9 c 1,0 2,-1 2,-2 V 4 c 0,-1 0,-1 1,-1 1,0 1,-2 0,-2 z m 0,2 h 6 V 4 H 5 Z m 0,3 h 6 V 7 H 5 Z m 0,3 h 6 v 1 H 5 Z m 0,3 h 6 v 1 H 5 Z"></path></svg>
+                        <span>May require Lynx rules</span>
+                    </p>
+                    <p id="player-rule-logic-hidden" title="In this level, wires and logic gates are invisible.  X-ray glasses will reveal them.">
+                        <svg class="svg-icon" viewBox="0 0 16 16"><path d="M1,8 a7,7 0 0,1 14,0 7,7 0 0,1 -14,0 M3,8 a5,5 0 0,1 10,0 5,5 0 0,1 -10,0"></path><path d="M2,7 h5 v-5 h2 v5 h5 v2 h-5 v5 h-2 v-5 h-5 v-2"></path><path d="M1,14 L14,1 l1,1 L2,15 l-1,-1"></path></svg>
+                        <span>Logic hidden</span>
+                    </p>
+                    <p id="player-rule-cc1-boots" title="In this level, tools cannot be dropped, and only the tools available in CC1 (cleats, suction boots, fire boots, and flippers) can be picked up.">
+                        <svg class="svg-icon" viewBox="0 0 16 16"><path d="m 1,12 v 3 h 3 l 5,-5 h 3 L 15,7 V 4 L 12,7 H 11 L 9,5 V 4 L 12,1 H 9 L 6,4 v 3 z"></path></svg>
+                        <span>Retro tool mode</span>
+                    </p>
+                </div>
                 <div class="inventory"></div>
             </section>
             <div id="player-music">
-                <div id="player-music-left">
-                    🎵 <a id="player-music-title">title</a> by <a id="player-music-author">author</a>
-                </div>
-                <div id="player-music-right">
-                    <input id="player-music-volume" type="range" min="0" max="1" step="0.05" value="1">
-                    <input id="player-music-unmute" type="checkbox" checked>
-                </div>
+                🎵 <a id="player-music-title" target="_blank">title</a> by <a id="player-music-author" target="_blank">author</a>
                 <audio loop preload="auto">
             </div>
         </div>
@@ -204,22 +338,18 @@
             <div class="-buttons" id="player-debug-time-buttons">
                 <!-- populated in js -->
             </div>
-            <p>Game speed:
-                <select name="speed">
-                    <option value="100">100× faster</option>
-                    <option value="50">50× faster</option>
-                    <option value="20">20× faster</option>
-                    <option value="10">10× faster</option>
-                    <option value="5">5× faster</option>
-                    <option value="3">3× faster</option>
-                    <option value="2">2× faster</option>
-                    <option value="3/2">1½× faster</option>
-                    <option value="1" selected>Normal speed</option>
-                    <option value="1/2">2× slower</option>
-                    <option value="1/3">3× slower</option>
-                    <option value="1/4">4× slower</option>
-                </select>
-            </p>
+            <div id="player-debug-speed" class="radio-faux-button-set">
+                <label><input type="radio" name="speed" value="1/4"><span class="-button">¼</span></label>
+                <label><input type="radio" name="speed" value="1/3"><span class="-button">⅓</span></label>
+                <label><input type="radio" name="speed" value="1/2"><span class="-button">½</span></label>
+                <label><input type="radio" name="speed" value="1"><span class="-button"><strong>1×</strong></span></label>
+                <label><input type="radio" name="speed" value="2"><span class="-button">2</span></label>
+                <label><input type="radio" name="speed" value="3"><span class="-button">3</span></label>
+                <label><input type="radio" name="speed" value="5"><span class="-button">5</span></label>
+                <label><input type="radio" name="speed" value="10"><span class="-button">10</span></label>
+                <label><input type="radio" name="speed" value="25"><span class="-button">25</span></label>
+                <label><input type="radio" name="speed" value="100"><span class="-button">100</span></label>
+            </div>
 
             <h3>Inventory</h3>
             <div class="-inventory">
@@ -263,10 +393,11 @@
                 </select>
             </p>
             <ul>
-                <li><label><input type="checkbox" name="show_actor_bboxes"> Show actor bounding boxes</label></li>
                 <li><label><input type="checkbox" name="disable_interpolation"> Disable interpolation</label></li>
+                <li><label><input type="checkbox" name="show_actor_bboxes"> Show actor bounding boxes</label></li>
+                <li><label><input type="checkbox" name="show_actor_order"> Show actor order</label></li>
+                <li><label><input type="checkbox" name="show_actor_tooltips"> Show actor tooltips</label></li>
                 <!--
-                <li><label><input type="checkbox" disabled> Show actor info</label></li>
                 <li><label><input type="checkbox" disabled> Freeze time for everything else</label></li>
                 <li><label><input type="checkbox" disabled> Player is immortal</label></li>
                 <li><label><input type="checkbox" disabled> Player ignores collision</label></li>
@@ -277,7 +408,6 @@
                 <!-- populated in js -->
             </div>
             <p>Tip: Middle-click to teleport.</p>
-
             <!-- TODO?
                 - inspect with mouse
                     - list of actors, or currently pointed-to actor?
@@ -295,72 +425,16 @@
         </form>
     </main>
     <main id="editor" hidden>
-        <header>
-            <!-- TODO
-            - close
-            - export
-            - delete??
-
-            - zoom
-
-            also deal with levels vs level /packs/ somehow, not sure how that'll work (including downloading them, yeargh?)
-            -->
-        </header>
+        <header></header>
         <div class="editor-canvas">
             <div class="-container">
                 <!-- level canvas and any overlays go here -->
                 <!-- the container is to allow them to scroll as a single unit -->
             </div>
         </div>
-        <nav class="controls">
-            <div id="editor-tile">
-            </div>
-            <!--
-            <p style>
-                Tip: Right click to color drop.<br>
-                Tip: Ctrl-click with terrain to replace only the current tile's terrain, rather than overwriting the whole tile.
-            </p>
-
-            <p>Layer: [all/auto] [terrain] [item] [actor] [overlay]</p>
-
-            <p>Actor direction: [north] [south] [east] [west]</p>
-
-            <p>[ ] Show connections</p>
-            <p>[ ] Toggle green objects</p>
-            <p>[ ] Show monster pathing</p>
-            <p>[ ] Show circuits???</p>
-
-            <pre>
-            Metadata: 
-            xxx / yyy chips required
-            Time limit: [____]
-            Title: [__________]
-            Author: [__________]
-            map size
-            </pre>
-            -->
-        </nav>
+        <nav class="controls"></nav>
         <div class="palette"></div>
-        <!-- TODO:
-        controls
-        - play!
-        - object palette
-        - choose direction
-        - choose layer to /modify/: terrain, item, creature, overlay
-        - stack (place item atop whatever terrain), or replace (placing a tile overwrites the whole cell)
-        [XXX mode that allows arbitrary stacking of objects?]
-        - level metadata
-        - change size
-
-        XXX how do i handle thin walls?  treat specially, allow drawing/erasing them along edges instead of tiles?  ehh then you can't control which tile they're in though...  but the game seems to prefer south+east so maybe that works...
-
-        hotkeys
-        - mod a tile on the board: rotate a creature, alter thin walls??
-        - "pick up" a tile
-
-        cool stuff
-        - set chip count by hand, set extra ones automatically
-        -->
+        <div id="editor-statusbar"></div>
     </main>
 </body>
 </html>

js/algorithms.js

@@ -0,0 +1,145 @@
+import { DIRECTIONS, DIRECTION_ORDER } from './defs.js';
+
+export function trace_floor_circuit(level, start_cell, start_edge, on_wire, on_dead_end) {
+    let is_first = true;
+    let pending = [[start_cell, start_edge]];
+    let seen_cells = new Map;
+    while (pending.length > 0) {
+        let next = [];
+        for (let [cell, edge] of pending) {
+            let terrain = cell.get_terrain();
+            if (! terrain)
+                continue;
+
+            let edgeinfo = DIRECTIONS[edge];
+            let seen_edges = seen_cells.get(cell) ?? 0;
+            if (seen_edges & edgeinfo.bit)
+                continue;
+                
+            let actor = cell.get_actor();
+            let wire_directions = terrain.wire_directions;
+            if ((actor?.wire_directions ?? null !== null) && (actor.movement_cooldown === 0 || level.compat.tiles_react_instantly))
+            {
+                wire_directions = actor.wire_directions;
+            }
+
+            // The wire comes in from this edge towards the center; see how it connects within this
+            // cell, then check for any neighbors
+            let connections = edgeinfo.bit;
+            if (! is_first && ((wire_directions ?? 0) & edgeinfo.bit) === 0) {
+                // There's not actually a wire here (but not if this is our starting cell, in which
+                // case we trust the caller)
+                if (on_dead_end) {
+                    on_dead_end(terrain.cell, edge);
+                }
+                continue;
+            }
+            else if (terrain.type.wire_propagation_mode === 'none') {
+                // The wires in this tile never connect to each other
+            }
+            else if (terrain.type.wire_propagation_mode === 'cross' ||
+                (wire_directions === 0x0f && terrain.type.wire_propagation_mode !== 'all'))
+            {
+                // This is a cross pattern, so only opposite edges connect
+                if (wire_directions & edgeinfo.opposite_bit) {
+                    connections |= edgeinfo.opposite_bit;
+                }
+            }
+            else {
+                // Everything connects
+                connections |= wire_directions;
+            }
+
+            seen_cells.set(cell, seen_edges | connections);
+
+            if (on_wire) {
+                on_wire(terrain, connections);
+            }
+
+            for (let [direction, dirinfo] of Object.entries(DIRECTIONS)) {
+                // Obviously don't go backwards, but that doesn't apply if this is our first pass
+                if (direction === edge && ! is_first)
+                    continue;
+
+                if ((connections & dirinfo.bit) === 0)
+                    continue;
+
+                let neighbor;
+                if ((terrain.wire_tunnel_directions ?? 0) & dirinfo.bit) {
+                    // Search in this direction for a matching tunnel
+                    neighbor = find_matching_wire_tunnel(level, cell.x, cell.y, direction);
+                }
+                else {
+                    neighbor = level.get_neighboring_cell(cell, direction);
+                }
+
+                /*
+                if (! neighbor || (((neighbor.get_terrain().wire_directions ?? 0) & dirinfo.opposite_bit) === 0)) {
+                    console.log("bailing here", neighbor, direction);
+                    continue;
+                }
+                */
+                if (! neighbor)
+                    continue;
+
+                next.push([neighbor, dirinfo.opposite]);
+            }
+        }
+        pending = next;
+        is_first = false;
+    }
+}
+
+export function find_matching_wire_tunnel(level, x, y, direction) {
+    let dirinfo = DIRECTIONS[direction];
+    let [dx, dy] = dirinfo.movement;
+    let nesting = 0;
+    while (true) {
+        x += dx;
+        y += dy;
+        let candidate = level.cell(x, y);
+        if (! candidate)
+            return null;
+
+        let neighbor = candidate.get_terrain();
+        if (! neighbor)
+            continue;
+
+        if ((neighbor.wire_tunnel_directions ?? 0) & dirinfo.opposite_bit) {
+            if (nesting === 0) {
+                return candidate;
+            }
+            else {
+                nesting -= 1;
+            }
+        }
+        if ((neighbor.wire_tunnel_directions ?? 0) & dirinfo.bit) {
+            nesting += 1;
+        }
+    }
+}
+
+// TODO make this guy work generically for orange, red, brown buttons?  others...?
+export function find_implicit_connection() {
+}
+
+// Iterates over a grid in a diamond pattern, spreading out from the given start cell (but not
+// including it).  Only used for connecting orange buttons.
+export function* iter_cells_in_diamond(levelish, x0, y0) {
+    let max_search_radius = Math.max(levelish.size_x, levelish.size_y) + 1;
+    for (let dist = 1; dist <= max_search_radius; dist++) {
+        // Start east and move counterclockwise
+        let sx = x0 + dist;
+        let sy = y0;
+        for (let direction of [[-1, -1], [-1, 1], [1, 1], [1, -1]]) {
+            for (let i = 0; i < dist; i++) {
+                let cell = levelish.cell(sx, sy);
+                if (cell) {
+                    yield cell;
+                }
+                sx += direction[0];
+                sy += direction[1];
+            }
+        }
+    }
+}

js/defs.js

@@ -4,38 +4,50 @@ export const DIRECTIONS = {
     north: {
         movement: [0, -1],
         bit: 0x01,
+        opposite_bit: 0x04,
         index: 0,
         action: 'up',
         left: 'west',
         right: 'east',
         opposite: 'south',
+        mirrored: 'north',
+        flipped: 'south',
     },
     south: {
         movement: [0, 1],
         bit: 0x04,
+        opposite_bit: 0x01,
         index: 2,
         action: 'down',
         left: 'east',
         right: 'west',
         opposite: 'north',
+        mirrored: 'south',
+        flipped: 'north',
     },
     west: {
         movement: [-1, 0],
         bit: 0x08,
+        opposite_bit: 0x02,
         index: 3,
         action: 'left',
         left: 'south',
         right: 'north',
         opposite: 'east',
+        mirrored: 'east',
+        flipped: 'west',
     },
     east: {
         movement: [1, 0],
         bit: 0x02,
+        opposite_bit: 0x08,
         index: 1,
         action: 'right',
         left: 'north',
         right: 'south',
         opposite: 'west',
+        mirrored: 'west',
+        flipped: 'east',
     },
 };
 // Should match the bit ordering above, and CC2's order
@@ -53,23 +65,33 @@ export const INPUT_BITS = {
     wait:   0x8000,
 };
 
-// TODO cc2 order is: swivel, thinwalls, canopy (and yes you can have them all in the same tile)
-export const DRAW_LAYERS = {
+export const LAYERS = {
     terrain: 0,
     item: 1,
     item_mod: 2,
     actor: 3,
-    overlay: 4,
-    MAX: 5,
+    vfx: 4,
+    swivel: 5,
+    thin_wall: 6,
+    canopy: 7,
+
+    MAX: 8,
 };
 
 export const COLLISION = {
-    player1:            0x0001,
-    player2:            0x0002,
-    player:             0x0003,
+    real_player1:       0x0001,
+    real_player2:       0x0002,
+    real_player:        0x0003,
+    doppel1:            0x0004,
+    doppel2:            0x0008,
+    doppel:             0x000c,
+    playerlike1:        0x0005,
+    playerlike2:        0x000a,
+    playerlike:         0x000f,
 
-    block_cc1:          0x0004,
-    block_cc2:          0x0008,  // ice + directional
+    block_cc1:          0x0010,
+    block_cc2:          0x0020,  // ice + frame (+ circuit, etc)
+    bowling_ball:       0x0040,  // rolling ball, dynamite
 
     // Monsters are a little complicated, because some of them have special rules, e.g. fireballs
     // aren't blocked by fire.
@@ -78,14 +100,214 @@ export const COLLISION = {
     monster_generic:    0x0100,
     fireball:           0x0200,
     bug:                0x0400,
+    yellow_tank:        0x0800,
     rover:              0x1000,
     ghost:              0x8000,
     // For a tile's COLLISION, use one of these bit combinations
-    monster_solid:      0x7f00,  // everything but ghost
-    monster_any:        0xff00,  // everything including ghost
+    monster_typical:    0x6f00,  // everything but ghost and rover
+    monster_any:        0xff00,  // everything including ghost (only used for monster/fire compat flag)
 
     // Combo masks used for matching
-    all_but_ghost:      0xffff & ~0x8000,
-    all_but_player:     0xffff & ~0x0003,
-    all:                0xffff,
+    all_but_ghost:          0xffff & ~0x8000,
+    all_but_real_player:    0xffff & ~0x0003,
+    all:                    0xffff,
 };
+
+// Item pickup priority, which both actors and items have.  An actor will pick up an item if the
+// item's priority is greater than or equal to the actor's.
+export const PICKUP_PRIORITIES = {
+    never: 4,   // cc2 blocks, never pick anything up
+    always: 3,  // all actors; blue keys, yellow teleporters (everything picks up except cc2 blocks)
+    // TODO is this even necessary?  in cc2 the general rule seems to be that anything stepping on
+    // an item picks it up, and collision is used to avoid that most of the time
+    normal: 3,  // actors with inventories; most items
+    player: 1,  // players and doppelgangers; red keys (ignored by everything else)
+    real_player: 0,
+};
+
+export const COMPAT_RULESET_LABELS = {
+    lexy: "Lexy",
+    steam: "Steam",
+    'steam-strict': "Steam (strict)",
+    lynx: "Lynx",
+    ms: "Microsoft",
+    custom: "Custom",
+};
+export const COMPAT_RULESET_ORDER = ['lexy', 'steam', 'steam-strict', 'lynx', 'ms', 'custom'];
+// FIXME some of the names of the flags themselves kinda suck
+export const COMPAT_FLAGS = [
+// Level loading
+// TODO? /strictly/ speaking, these should be turned on for lynx+ms/lynx respectively, but then i'd
+// have to also alter the behavior of the corresponding terrain, which seems kind of silly
+{
+    key: 'no_auto_convert_ccl_popwalls',
+    label: "Recessed walls under actors in CCL levels are left alone",
+    rulesets: new Set(['steam-strict']),
+}, {
+    key: 'no_auto_convert_ccl_blue_walls',
+    label: "Blue walls under blocks in CCL levels are left alone",
+    rulesets: new Set(['steam-strict']),
+},
+
+// Core
+{
+    key: 'allow_double_cooldowns',
+    label: "Actors may cooldown twice in one tic",
+    rulesets: new Set(['steam', 'steam-strict', 'lynx']),
+}, {
+    key: 'no_separate_idle_phase',
+    label: "Actors teleport immediately after moving",
+    rulesets: new Set(['steam', 'steam-strict']),
+}, {
+    key: 'player_moves_last',
+    label: "Player always moves last",
+    rulesets: new Set(['lynx', 'ms']),
+}, {
+    key: 'player_protected_by_items',
+    label: "Players can't be trampled when standing on items",
+    rulesets: new Set(['lynx']),
+}, {
+    // Note that this requires no_early_push as well
+    key: 'player_safe_at_decision_time',
+    label: "Players can't be trampled at decision time",
+    rulesets: new Set(['lynx']),
+}, {
+    key: 'emulate_60fps',
+    label: "Game runs at 60 FPS",
+    rulesets: new Set(['steam', 'steam-strict']),
+}, {
+    key: 'reuse_actor_slots',
+    label: "Game reuses slots in the actor list",
+    rulesets: new Set(['lynx']),
+}, {
+    key: 'force_lynx_animation_lengths',
+    label: "Animations use Lynx duration",
+    rulesets: new Set(['lynx']),
+},
+
+// Tiles
+{
+    // XXX this is goofy
+    key: 'tiles_react_instantly',
+    label: "Tiles react when approached",
+    rulesets: new Set(['ms']),
+}, {
+    key: 'rff_actually_random',
+    label: "Random force floors are actually random",
+    rulesets: new Set(['ms']),
+}, {
+    key: 'no_backwards_override',
+    label: "Player can't override backwards on a force floor",
+    rulesets: new Set(['lynx']),
+}, {
+    key: 'force_floors_inert_on_first_tic',
+    label: "Force floors don't trigger on the first tic",
+    rulesets: new Set(['lynx', 'ms']),
+}, {
+    key: 'traps_like_lynx',
+    label: "Traps eject faster, and even when already open",
+    rulesets: new Set(['lynx']),
+}, {
+    key: 'blue_floors_vanish_on_arrive',
+    label: "Fake blue walls vanish on arrival",
+    rulesets: new Set(['lynx']),
+}, {
+    key: 'green_teleports_can_fail',
+    label: "Green teleporters sometimes fail",
+    rulesets: new Set(['steam-strict']),
+},
+
+// Items
+{
+    key: 'no_immediate_detonate_bombs',
+    label: "Mines under non-player actors don't explode at level start",
+    rulesets: new Set(['lynx', 'ms']),
+}, {
+    key: 'detonate_bombs_under_players',
+    label: "Mines under players explode at level start",
+    rulesets: new Set(['steam', 'steam-strict']),
+}, {
+    key: 'cloned_bowling_balls_can_be_lost',
+    label: "Bowling balls on cloners are destroyed when fired at point blank",
+    rulesets: new Set(['steam-strict']),
+}, {
+    key: 'monsters_ignore_keys',
+    label: "Monsters completely ignore keys",
+    rulesets: new Set(['ms']),
+},
+
+// Blocks
+{
+    key: 'no_early_push',
+    label: "Pushing blocks happens at move time",
+    rulesets: new Set(['lynx', 'ms']),
+}, {
+    key: 'use_legacy_hooking',
+    label: "Pulling blocks with the hook happens at decision time",
+    rulesets: new Set(['steam', 'steam-strict']),
+}, {
+    // FIXME this is kind of annoying, there are some collision rules too
+    key: 'tanks_teeth_push_ice_blocks',
+    label: "Ice blocks emulate pgchip rules",
+    rulesets: new Set(['ms']),
+}, {
+    key: 'allow_pushing_blocks_off_faux_walls',
+    label: "Blocks may be pushed off of blue (fake), invisible, and revealing walls",
+    rulesets: new Set(['lynx']),
+}, {
+    key: 'emulate_spring_mining',
+    label: "Spring mining is possible",
+    rulesets: new Set(['steam-strict']),
+/* XXX not implemented
+}, {
+    key: 'emulate_flicking',
+    label: "Flicking is possible",
+    rulesets: new Set(['ms']),
+*/
+},
+
+// Monsters
+{
+    // TODO? in lynx they ignore the button while in motion too
+    // TODO what about in a trap, in every game??
+    // TODO what does ms do when a tank is on ice or a ff?  wiki's description is wacky
+    // TODO yellow tanks seem to have memory too??
+    key: 'tanks_always_obey_button',
+    label: "Blue tanks always obey blue buttons",
+    rulesets: new Set(['steam-strict']),
+}, {
+    key: 'tanks_ignore_button_while_moving',
+    label: "Blue tanks ignore blue buttons while moving",
+    rulesets: new Set(['lynx']),
+}, {
+    key: 'blobs_use_tw_prng',
+    label: "Blobs use the Tile World RNG",
+    rulesets: new Set(['lynx']),
+}, {
+    key: 'teeth_target_internal_position',
+    label: "Teeth target the player's internal position",
+    rulesets: new Set(['lynx']),
+}, {
+    key: 'rff_blocks_monsters',
+    label: "Random force floors block monsters",
+    rulesets: new Set(['ms']),
+}, {
+    key: 'bonking_isnt_instant',
+    label: "Bonking while sliding doesn't apply instantly",
+    rulesets: new Set(['lynx', 'ms']),
+}, {
+    key: 'fire_allows_monsters',
+    label: "Fire doesn't block monsters",
+    rulesets: new Set(['ms']),
+},
+];
+
+export function compat_flags_for_ruleset(ruleset) {
+    let compat = {};
+    for (let compatdef of COMPAT_FLAGS) {
+        if (compatdef.rulesets.has(ruleset)) {
+            compat[compatdef.key] = true;
+        }
+    }
+    return compat;
+}

js/editor/dialogs.js

@@ -0,0 +1,547 @@
+import * as c2g from '../format-c2g.js';
+import { DialogOverlay, AlertOverlay, flash_button } from '../main-base.js';
+import CanvasRenderer from '../renderer-canvas.js';
+import { mk, mk_button } from '../util.js';
+import * as util from '../util.js';
+
+export class EditorPackMetaOverlay extends DialogOverlay {
+    constructor(conductor, stored_pack) {
+        super(conductor);
+        this.set_title("pack properties");
+        let dl = mk('dl.formgrid');
+        this.main.append(dl);
+
+        dl.append(
+            mk('dt', "Title"),
+            mk('dd', mk('input', {name: 'title', type: 'text', value: stored_pack.title})),
+        );
+        // TODO...?  what else is a property of the pack itself
+
+        this.add_button("save", () => {
+            let els = this.root.elements;
+
+            let title = els.title.value;
+            if (title !== stored_pack.title) {
+                stored_pack.title = title;
+                this.conductor.update_level_title();
+            }
+
+            this.close();
+        });
+        this.add_button("nevermind", () => {
+            this.close();
+        });
+    }
+}
+
+export class EditorLevelMetaOverlay extends DialogOverlay {
+    constructor(conductor, stored_level) {
+        super(conductor);
+        this.set_title("level properties");
+        let dl = mk('dl.formgrid');
+        this.main.append(dl);
+
+        let time_limit_input = mk('input', {name: 'time_limit', type: 'number', min: 0, max: 65535, value: stored_level.time_limit});
+        let time_limit_output = mk('output');
+        let update_time_limit = () => {
+            let time_limit = parseInt(time_limit_input.value, 10);
+            // FIXME need a change event for this tbh?
+            // FIXME handle NaN; maybe block keydown of not-numbers
+            time_limit = Math.max(0, Math.min(65535, time_limit));
+            time_limit_input.value = time_limit;
+
+            let text;
+            if (time_limit === 0) {
+                text = "No time limit";
+            }
+            else {
+                text = util.format_duration(time_limit);
+            }
+            time_limit_output.textContent = text;
+        };
+        update_time_limit();
+        time_limit_input.addEventListener('input', update_time_limit);
+
+        let make_size_input = (name) => {
+            let input = mk('input', {name: name, type: 'number', min: 10, max: 100, value: stored_level[name]});
+            // TODO maybe block keydown of non-numbers too?
+            // Note that this is a change event, not an input event, so we don't prevent them from
+            // erasing the whole value to type a new one
+            input.addEventListener('change', ev => {
+                let value = parseInt(ev.target.value, 10);
+                if (isNaN(value)) {
+                    ev.target.value = stored_level[name];
+                }
+                else if (value < 1) {
+                    // Smaller than 10×10 isn't supported by CC2, but LL doesn't mind, so let it
+                    // through if they try it manually
+                    ev.target.value = 1;
+                }
+                else if (value > 100) {
+                    ev.target.value = 100;
+                }
+            });
+            return input;
+        };
+
+        dl.append(
+            mk('dt', "Title"),
+            mk('dd.-one-field', mk('input', {name: 'title', type: 'text', value: stored_level.title})),
+            mk('dt', "Author"),
+            mk('dd.-one-field', mk('input', {name: 'author', type: 'text', value: stored_level.author})),
+            mk('dt', "Comment"),
+            mk('dd.-textarea', mk('textarea', {name: 'comment', rows: 4, cols: 20}, stored_level.comment)),
+            mk('dt', "Time limit"),
+            mk('dd.-with-buttons',
+                mk('div.-left',
+                    time_limit_input,
+                    " ",
+                    time_limit_output,
+                ),
+                mk('div.-right',
+                    mk_button("None", () => {
+                        this.root.elements['time_limit'].value = 0;
+                        update_time_limit();
+                    }),
+                    mk_button("−30s", () => {
+                        this.root.elements['time_limit'].value = Math.max(0,
+                            parseInt(this.root.elements['time_limit'].value, 10) - 30);
+                        update_time_limit();
+                    }),
+                    mk_button("+30s", () => {
+                        this.root.elements['time_limit'].value = Math.min(999,
+                            parseInt(this.root.elements['time_limit'].value, 10) + 30);
+                        update_time_limit();
+                    }),
+                    mk_button("Max", () => {
+                        this.root.elements['time_limit'].value = 999;
+                        update_time_limit();
+                    }),
+                ),
+            ),
+            mk('dt', "Size"),
+            mk('dd.-with-buttons',
+                mk('div.-left', make_size_input('size_x'), " × ", make_size_input('size_y')),
+                mk('div.-right', ...[10, 32, 50, 100].map(size =>
+                    mk_button(`${size}²`, () => {
+                        this.root.elements['size_x'].value = size;
+                        this.root.elements['size_y'].value = size;
+                    }),
+                )),
+            ),
+            mk('dt', "Viewport"),
+            mk('dd',
+                mk('label',
+                    mk('input', {name: 'viewport', type: 'radio', value: '10'}),
+                    " 10×10 (Chip's Challenge 2 size)"),
+                mk('br'),
+                mk('label',
+                    mk('input', {name: 'viewport', type: 'radio', value: '9'}),
+                    " 9×9 (Chip's Challenge 1 size)"),
+                mk('br'),
+                mk('label',
+                    mk('input', {name: 'viewport', type: 'radio', value: '', disabled: 'disabled'}),
+                    " Split 10×10 (not yet supported)"),
+            ),
+            mk('dt', "Blob behavior"),
+            mk('dd',
+                mk('label',
+                    mk('input', {name: 'blob_behavior', type: 'radio', value: '0'}),
+                    " Deterministic (PRNG + simple convolution)"),
+                mk('br'),
+                mk('label',
+                    mk('input', {name: 'blob_behavior', type: 'radio', value: '1'}),
+                    " 4 patterns (CC2 default; PRNG + rotating offset)"),
+                mk('br'),
+                mk('label',
+                    mk('input', {name: 'blob_behavior', type: 'radio', value: '2'}),
+                    " Extra random (LL default; initial seed is truly random)"),
+            ),
+            mk('dt', "Options"),
+            mk('dd', mk('label',
+                mk('input', {name: 'hide_logic', type: 'checkbox'}),
+                " Hide wires and logic gates (warning: CC2 also hides pink/black buttons!)")),
+            mk('dd', mk('label',
+                mk('input', {name: 'use_cc1_boots', type: 'checkbox'}),
+                " Use CC1-style inventory (can only pick up the four classic boots; can't drop or cycle)")),
+        );
+        this.root.elements['viewport'].value = stored_level.viewport_size;
+        this.root.elements['blob_behavior'].value = stored_level.blob_behavior;
+        this.root.elements['hide_logic'].checked = stored_level.hide_logic;
+        this.root.elements['use_cc1_boots'].checked = stored_level.use_cc1_boots;
+        // TODO:
+        // - chips?
+        // - password???
+        // - comment
+        // - use CC1 tools
+        // - hide logic
+        // - "unviewable", "read only"
+
+        this.add_button("save", () => {
+            let els = this.root.elements;
+
+            let title = els.title.value;
+            if (title !== stored_level.title) {
+                stored_level.title = title;
+                this.conductor.stored_game.level_metadata[this.conductor.level_index].title = title;
+                this.conductor.update_level_title();
+            }
+            let author = els.author.value;
+            if (author !== stored_level.author) {
+                stored_level.author = author;
+            }
+
+            // FIXME gotta deal with NaNs here too, sigh, might just need a teeny tiny form library
+            stored_level.time_limit = Math.max(0, Math.min(65535, parseInt(els.time_limit.value, 10)));
+
+            let size_x = Math.max(1, Math.min(100, parseInt(els.size_x.value, 10)));
+            let size_y = Math.max(1, Math.min(100, parseInt(els.size_y.value, 10)));
+            if (size_x !== stored_level.size_x || size_y !== stored_level.size_y) {
+                this.conductor.editor.resize_level(size_x, size_y);
+            }
+
+            stored_level.blob_behavior = parseInt(els.blob_behavior.value, 10);
+            stored_level.hide_logic = els.hide_logic.checked;
+            stored_level.use_cc1_boots = els.use_cc1_boots.checked;
+            let viewport_size = parseInt(els.viewport.value, 10);
+            if (viewport_size !== 9 && viewport_size !== 10) {
+                viewport_size = 10;
+            }
+            stored_level.viewport_size = viewport_size;
+            this.conductor.player.update_viewport_size();
+
+            this.close();
+        });
+        this.add_button("nevermind", () => {
+            this.close();
+        });
+    }
+}
+
+// List of levels, used in the player
+export class EditorLevelBrowserOverlay extends DialogOverlay {
+    constructor(conductor) {
+        super(conductor);
+        this.set_title("choose a level");
+
+        // Set up some infrastructure to lazily display level renders
+        // FIXME should this use the tileset appropriate for the particular level?
+        this.renderer = new CanvasRenderer(this.conductor.tilesets['ll'], 32);
+        this.awaiting_renders = [];
+        this.observer = new IntersectionObserver((entries, _observer) => {
+                let any_new = false;
+                let to_remove = new Set;
+                for (let entry of entries) {
+                    if (entry.target.classList.contains('--rendered'))
+                        continue;
+
+                    let index = this._get_index(entry.target);
+                    if (entry.isIntersecting) {
+                        this.awaiting_renders.push(index);
+                        any_new = true;
+                    }
+                    else {
+                        to_remove.add(index);
+                    }
+                }
+
+                this.awaiting_renders = this.awaiting_renders.filter(index => ! to_remove.has(index));
+                if (any_new) {
+                    this.schedule_level_render();
+                }
+            },
+            { root: this.main },
+        );
+        this.list = mk('ol.editor-level-browser');
+        this.selection = this.conductor.level_index;
+        for (let [i, meta] of conductor.stored_game.level_metadata.entries()) {
+            this.list.append(this._make_list_item(i, meta));
+        }
+        this.list.childNodes[this.selection].classList.add('--selected');
+        this.main.append(
+            mk('p', "Drag to rearrange.  Changes are immediate!"),
+            this.list,
+        );
+
+        this.list.addEventListener('click', ev => {
+            let index = this._get_index(ev.target);
+            if (index === null)
+                return;
+            this._select(index);
+        });
+        this.list.addEventListener('dblclick', ev => {
+            let index = this._get_index(ev.target);
+            if (index !== null && this.conductor.change_level(index)) {
+                this.close();
+            }
+        });
+
+        this.sortable = new Sortable(this.list, {
+            group: 'editor-levels',
+            onEnd: ev => {
+                if (ev.oldIndex === ev.newIndex)
+                    return;
+
+                this._move_level(ev.oldIndex, ev.newIndex);
+
+                this.undo_stack.push(() => {
+                    this.list.insertBefore(
+                        this.list.childNodes[ev.newIndex],
+                        this.list.childNodes[ev.oldIndex + (ev.oldIndex < ev.newIndex ? 0 : 1)]);
+                    this._move_level(ev.newIndex, ev.oldIndex);
+                });
+                this.undo_button.disabled = false;
+            },
+        });
+
+        // FIXME ring buffer?
+        this.undo_stack = [];
+
+        // Left buttons
+        this.undo_button = this.add_button("undo", () => {
+            if (! this.undo_stack.length)
+                return;
+
+            let undo = this.undo_stack.pop();
+            undo();
+            this.undo_button.disabled = ! this.undo_stack.length;
+        });
+        this.undo_button.disabled = true;
+        this.add_button("create", () => {
+            let index = this.selection + 1;
+            let stored_level = this.conductor.editor._make_empty_level(index + 1, 32, 32);
+            this.conductor.editor.move_level(stored_level, index);
+            this._after_insert_level(stored_level, index);
+
+            this.undo_stack.push(() => {
+                this._delete_level(index);
+            });
+            this.undo_button.disabled = false;
+        });
+        this.add_button("duplicate", () => {
+            let index = this.selection + 1;
+            let stored_level = this.conductor.editor.duplicate_level(this.selection);
+            this._after_insert_level(stored_level, index);
+
+            this.undo_stack.push(() => {
+                this._delete_level(index);
+            });
+            this.undo_button.disabled = false;
+        });
+        this.delete_button = this.add_button("delete", () => {
+            let index = this.selection;
+            if (index === this.conductor.level_index) {
+                new AlertOverlay(this.conductor, "You can't delete the level you have open.").open();
+                return;
+            }
+
+            // Snag a copy of the serialized level for undo purposes
+            // FIXME can't undo deleting a corrupt level
+            let meta = this.conductor.stored_game.level_metadata[index];
+            let serialized_level = window.localStorage.getItem(meta.key);
+
+            this._delete_level(index);
+
+            this.undo_stack.push(() => {
+                let stored_level = meta.stored_level ?? c2g.parse_level(
+                    util.bytestring_to_buffer(serialized_level), index + 1);
+                this.conductor.editor.move_level(stored_level, index);
+                if (this.selection >= index) {
+                    this.selection += 1;
+                }
+                this._after_insert_level(stored_level, index);
+            });
+            this.undo_button.disabled = false;
+        });
+        this._update_delete_button();
+
+        // Right buttons
+        this.add_button_gap();
+        this.add_button("open", () => {
+            if (this.selection === this.conductor.level_index || this.conductor.change_level(this.selection)) {
+                this.close();
+            }
+        });
+        this.add_button("nevermind", () => {
+            this.close();
+        });
+    }
+
+    _make_list_item(index, meta) {
+        let li = mk('li',
+            {'data-index': index},
+            mk('div.-preview'),
+            mk('div.-number', {}, meta.number),
+            mk('div.-title', {}, meta.error ? "(error!)" : meta.title),
+        );
+
+        if (meta.error) {
+            li.classList.add('--error');
+        }
+        else {
+            this.observer.observe(li);
+        }
+
+        return li;
+    }
+
+    renumber_levels(start_index, end_index = null) {
+        end_index = end_index ?? this.conductor.stored_game.level_metadata.length - 1;
+        for (let i = start_index; i <= end_index; i++) {
+            let li = this.list.childNodes[i];
+            let meta = this.conductor.stored_game.level_metadata[i];
+            li.setAttribute('data-index', i);
+            li.querySelector('.-number').textContent = meta.number;
+        }
+    }
+
+    _get_index(element) {
+        let li = element.closest('li');
+        if (! li)
+            return null;
+
+        return parseInt(li.getAttribute('data-index'), 10);
+    }
+
+    _select(index) {
+        this.list.childNodes[this.selection].classList.remove('--selected');
+        this.selection = index;
+        this.list.childNodes[this.selection].classList.add('--selected');
+        this._update_delete_button();
+    }
+
+    _update_delete_button() {
+        this.delete_button.disabled = !! (this.selection === this.conductor.level_index);
+    }
+
+    schedule_level_render() {
+        if (this._handle)
+            return;
+        this._handle = setTimeout(() => { this.render_level() }, 50);
+    }
+
+    render_level() {
+        this._handle = null;
+
+        let t0 = performance.now();
+        while (true) {
+            if (this.awaiting_renders.length === 0)
+                return;
+
+            let index = this.awaiting_renders.shift();
+            let element = this.list.childNodes[index];
+            // FIXME levels may have been renumbered since this was queued, whoops
+            let stored_level = this.conductor.stored_game.load_level(index);
+            this.renderer.set_level(stored_level);
+            this.renderer.set_viewport_size(stored_level.size_x, stored_level.size_y);
+            this.renderer.draw_static_region(0, 0, stored_level.size_x, stored_level.size_y);
+            let canvas = mk('canvas', {
+                width: stored_level.size_x * this.renderer.tileset.size_x / 4,
+                height: stored_level.size_y * this.renderer.tileset.size_y / 4,
+            });
+            canvas.getContext('2d').drawImage(this.renderer.canvas, 0, 0, canvas.width, canvas.height);
+            element.querySelector('.-preview').append(canvas);
+            element.classList.add('--rendered');
+
+            if (performance.now() - t0 > 10)
+                break;
+        }
+
+        this.schedule_level_render();
+    }
+
+    expire(index) {
+        let li = this.list.childNodes[index];
+        li.classList.remove('--rendered');
+        li.querySelector('.-preview').textContent = '';
+    }
+
+    _after_insert_level(stored_level, index) {
+        this.list.insertBefore(
+            this._make_list_item(index, this.conductor.stored_game.level_metadata[index]),
+            this.list.childNodes[index]);
+        this._select(index);
+        this.renumber_levels(index + 1);
+    }
+
+    _delete_level(index) {
+        let num_levels = this.conductor.stored_game.level_metadata.length;
+        this.conductor.editor.move_level(index, null);
+
+        this.list.childNodes[this.selection].classList.remove('--selected');
+        this.list.childNodes[index].remove();
+        if (index === num_levels - 1) {
+            this.selection -= 1;
+        }
+        else {
+            this.renumber_levels(index);
+        }
+        this.list.childNodes[this.selection].classList.add('--selected');
+    }
+
+    _move_level(from_index, to_index) {
+        this.conductor.editor.move_level(from_index, to_index);
+
+        let selection = this.selection;
+        if (from_index < to_index) {
+            this.renumber_levels(from_index, to_index);
+            if (from_index < selection && selection <= to_index) {
+                selection -= 1;
+            }
+        }
+        else {
+            this.renumber_levels(to_index, from_index);
+            if (to_index <= selection && selection < from_index) {
+                selection += 1;
+            }
+        }
+
+        if (this.selection === from_index) {
+            this.selection = to_index;
+        }
+        else {
+            this.selection = selection;
+        }
+        this._update_delete_button();
+    }
+}
+
+export class EditorShareOverlay extends DialogOverlay {
+    constructor(conductor, url) {
+        super(conductor);
+        this.set_title("give this to friends");
+        this.main.append(mk('p', "Give this URL out to let others try your level:"));
+        this.main.append(mk('p.editor-share-url', {}, url));
+        let copy_button = mk('button', {type: 'button'}, "Copy to clipboard");
+        copy_button.addEventListener('click', ev => {
+            flash_button(ev.target);
+            navigator.clipboard.writeText(url);
+        });
+        this.main.append(copy_button);
+
+        let ok = mk('button', {type: 'button'}, "neato");
+        ok.addEventListener('click', () => {
+            this.close();
+        });
+        this.footer.append(ok);
+    }
+}
+
+export class EditorExportFailedOverlay extends DialogOverlay {
+    constructor(conductor, errors, _warnings) {
+        // TODO support warnings i guess
+        super(conductor);
+        this.set_title("export didn't go so well");
+        this.main.append(mk('p', "Whoops!  I tried very hard to export your level, but it didn't work out.  Sorry."));
+        let ul = mk('ul.editor-export-errors');
+        // TODO structure the errors better and give them names out here, also reduce duplication,
+        // also be clear about which are recoverable or not
+        for (let error of errors) {
+            ul.append(mk('li', error));
+        }
+        this.main.append(ul);
+        this.add_button("oh well", () => {
+            this.close();
+        });
+    }
+}

js/editor/helpers.js

@@ -0,0 +1,290 @@
+// Small helper classes used by the editor, often with their own UI for the SVG overlay.
+import { mk, mk_svg } from '../util.js';
+
+export class SVGConnection {
+    constructor(sx, sy, dx, dy) {
+        this.source = mk_svg('circle.-source', {r: 0.5});
+        this.line = mk_svg('line.-arrow', {});
+        this.dest = mk_svg('rect.-dest', {width: 1, height: 1});
+        this.element = mk_svg('g.overlay-connection', this.source, this.line, this.dest);
+        this.set_source(sx, sy);
+        this.set_dest(dx, dy);
+    }
+
+    set_source(sx, sy) {
+        this.sx = sx;
+        this.sy = sy;
+        this.source.setAttribute('cx', sx + 0.5);
+        this.source.setAttribute('cy', sy + 0.5);
+        this.line.setAttribute('x1', sx + 0.5);
+        this.line.setAttribute('y1', sy + 0.5);
+    }
+
+    set_dest(dx, dy) {
+        this.dx = dx;
+        this.dy = dy;
+        this.line.setAttribute('x2', dx + 0.5);
+        this.line.setAttribute('y2', dy + 0.5);
+        this.dest.setAttribute('x', dx);
+        this.dest.setAttribute('y', dy);
+    }
+}
+
+
+// TODO probably need to combine this with Selection somehow since it IS one, just not committed yet
+export class PendingSelection {
+    constructor(owner) {
+        this.owner = owner;
+        this.element = mk_svg('rect.overlay-pending-selection');
+        this.owner.svg_group.append(this.element);
+        this.rect = null;
+    }
+
+    set_extrema(x0, y0, x1, y1) {
+        this.rect = new DOMRect(Math.min(x0, x1), Math.min(y0, y1), Math.abs(x0 - x1) + 1, Math.abs(y0 - y1) + 1);
+        this.element.classList.add('--visible');
+        this.element.setAttribute('x', this.rect.x);
+        this.element.setAttribute('y', this.rect.y);
+        this.element.setAttribute('width', this.rect.width);
+        this.element.setAttribute('height', this.rect.height);
+    }
+
+    commit() {
+        this.owner.set_from_rect(this.rect);
+        this.element.remove();
+    }
+
+    discard() {
+        this.element.remove();
+    }
+}
+
+export class Selection {
+    constructor(editor) {
+        this.editor = editor;
+
+        this.svg_group = mk_svg('g');
+        this.editor.svg_overlay.append(this.svg_group);
+
+        this.rect = null;
+        this.element = mk_svg('rect.overlay-selection.overlay-transient');
+        this.svg_group.append(this.element);
+
+        this.floated_cells = null;
+        this.floated_element = null;
+        this.floated_canvas = null;
+    }
+
+    get is_empty() {
+        return this.rect === null;
+    }
+
+    get is_floating() {
+        return !! this.floated_cells;
+    }
+
+    contains(x, y) {
+        // Empty selection means everything is selected?
+        if (this.rect === null)
+            return true;
+
+        return this.rect.left <= x && x < this.rect.right && this.rect.top <= y && y < this.rect.bottom;
+    }
+
+    create_pending() {
+        return new PendingSelection(this);
+    }
+
+    set_from_rect(rect) {
+        let old_rect = this.rect;
+        this.editor._do(
+            () => this._set_from_rect(rect),
+            () => {
+                if (old_rect) {
+                    this._set_from_rect(old_rect);
+                }
+                else {
+                    this._clear();
+                }
+            },
+            false,
+        );
+    }
+
+    _set_from_rect(rect) {
+        this.rect = rect;
+        this.element.classList.add('--visible');
+        this.element.setAttribute('x', this.rect.x);
+        this.element.setAttribute('y', this.rect.y);
+        this.element.setAttribute('width', this.rect.width);
+        this.element.setAttribute('height', this.rect.height);
+
+        if (this.floated_element) {
+            let tileset = this.editor.renderer.tileset;
+            this.floated_canvas.width = rect.width * tileset.size_x;
+            this.floated_canvas.height = rect.height * tileset.size_y;
+            let foreign_obj = this.floated_element.querySelector('foreignObject');
+            foreign_obj.setAttribute('width', this.floated_canvas.width);
+            foreign_obj.setAttribute('height', this.floated_canvas.height);
+        }
+    }
+
+    move_by(dx, dy) {
+        if (! this.rect)
+            return;
+
+        this.rect.x += dx;
+        this.rect.y += dy;
+        this.element.setAttribute('x', this.rect.x);
+        this.element.setAttribute('y', this.rect.y);
+
+        if (! this.floated_element)
+            return;
+
+        let bbox = this.rect;
+        this.floated_element.setAttribute('transform', `translate(${bbox.x} ${bbox.y})`);
+    }
+
+    clear() {
+        let rect = this.rect;
+        if (! rect)
+            return;
+
+        this.editor._do(
+            () => this._clear(),
+            () => this._set_from_rect(rect),
+            false,
+        );
+    }
+
+    _clear() {
+        this.rect = null;
+        this.element.classList.remove('--visible');
+    }
+
+    *iter_coords() {
+        if (! this.rect)
+            return;
+
+        let stored_level = this.editor.stored_level;
+        for (let y = this.rect.top; y < this.rect.bottom; y++) {
+            for (let x = this.rect.left; x < this.rect.right; x++) {
+                let n = stored_level.coords_to_scalar(x, y);
+                yield [x, y, n];
+            }
+        }
+    }
+
+    // Convert this selection into a floating selection, plucking all the selected cells from the
+    // level and replacing them with blank cells.
+    enfloat(copy = false) {
+        if (this.floated_cells)
+            console.error("Trying to float a selection that's already floating");
+
+        let floated_cells = [];
+        let tileset = this.editor.renderer.tileset;
+        let stored_level = this.editor.stored_level;
+        let bbox = this.rect;
+        let canvas = mk('canvas', {width: bbox.width * tileset.size_x, height: bbox.height * tileset.size_y});
+        let ctx = canvas.getContext('2d');
+        ctx.drawImage(
+            this.editor.renderer.canvas,
+            bbox.x * tileset.size_x, bbox.y * tileset.size_y, bbox.width * tileset.size_x, bbox.height * tileset.size_y,
+            0, 0, bbox.width * tileset.size_x, bbox.height * tileset.size_y);
+        for (let [x, y, n] of this.iter_coords()) {
+            let cell = stored_level.linear_cells[n];
+            if (copy) {
+                floated_cells.push(cell.map(tile => tile ? {...tile} : null));
+            }
+            else {
+                floated_cells.push(cell);
+                this.editor.replace_cell(cell, this.editor.make_blank_cell(x, y));
+            }
+        }
+        let floated_element = mk_svg('g', mk_svg('foreignObject', {
+            x: 0, y: 0,
+            width: canvas.width, height: canvas.height,
+            transform: `scale(${1/tileset.size_x} ${1/tileset.size_y})`,
+        }, canvas));
+        floated_element.setAttribute('transform', `translate(${bbox.x} ${bbox.y})`);
+
+        // FIXME far more memory efficient to recreate the canvas in the redo, rather than hold onto
+        // it forever
+        this.editor._do(
+            () => {
+                this.floated_canvas = canvas;
+                this.floated_element = floated_element;
+                this.floated_cells = floated_cells;
+                this.svg_group.append(floated_element);
+            },
+            () => this._defloat(),
+        );
+    }
+
+    stamp_float(copy = false) {
+        if (! this.floated_element)
+            return;
+
+        let stored_level = this.editor.stored_level;
+        let i = 0;
+        for (let [x, y, n] of this.iter_coords()) {
+            let cell = this.floated_cells[i];
+            if (copy) {
+                cell = cell.map(tile => tile ? {...tile} : null);
+            }
+            cell.x = x;
+            cell.y = y;
+            this.editor.replace_cell(stored_level.linear_cells[n], cell);
+            i += 1;
+        }
+    }
+
+    defloat() {
+        if (! this.floated_element)
+            return;
+
+        this.stamp_float();
+
+        let element = this.floated_element;
+        let canvas = this.floated_canvas;
+        let cells = this.floated_cells;
+        this.editor._do(
+            () => this._defloat(),
+            () => {
+                this.floated_cells = cells;
+                this.floated_canvas = canvas;
+                this.floated_element = element;
+                this.svg_group.append(element);
+            },
+            false,
+        );
+    }
+
+    _defloat() {
+        this.floated_element.remove();
+        this.floated_element = null;
+        this.floated_canvas = null;
+        this.floated_cells = null;
+    }
+
+    // Redraw the selection canvas from scratch
+    redraw() {
+        if (! this.floated_canvas)
+            return;
+
+        // FIXME uhoh, how do i actually do this?  we have no renderer of our own, we have a
+        // separate canvas, and all the renderer stuff expects to get ahold of a level.  i guess
+        // refactor it to draw a block of cells?
+        this.editor.renderer.draw_static_generic({
+            x0: 0, y0: 0,
+            x1: this.rect.width, y1: this.rect.height,
+            cells: this.floated_cells,
+            width: this.rect.width,
+            ctx: this.floated_canvas.getContext('2d'),
+        });
+    }
+
+    // TODO allow floating/dragging, ctrl-dragging to copy, anchoring...
+    // TODO make more stuff respect this (more things should go through Editor for undo reasons anyway)
+}
+

js/editor/tile-overlays.js

@@ -1,5 +1,5 @@
-import { TransientOverlay } from './main-base.js';
-import { mk, mk_svg } from './util.js';
+import { TransientOverlay } from '../main-base.js';
+import { mk, mk_svg } from '../util.js';
 
 // FIXME could very much stand to have a little animation when appearing
 class TileEditorOverlay extends TransientOverlay {
@@ -10,8 +10,43 @@ class TileEditorOverlay extends TransientOverlay {
         this.tile = null;
     }
 
-    edit_tile(tile) {
+    edit_tile(tile, cell) {
         this.tile = tile;
+        this.cell = cell;
+
+        this.needs_undo_entry = false;
+    }
+
+    // Please call this BEFORE actually modifying the tile; it's important for undo!
+    mark_dirty() {
+        if (this.cell) {
+            if (! this.needs_undo_entry) {
+                // We are ABOUT to mutate this tile for the first time; swap it out with a clone in
+                // preparation for making an undo entry when this overlay closes
+                this.pristine_tile = this.tile;
+                this.tile = {...this.tile};
+                this.cell[this.tile.type.layer] = this.tile;
+                this.needs_undo_entry = true;
+            }
+            this.editor.mark_cell_dirty(this.cell);
+        }
+        else if (this.tile === this.editor.fg_tile) {
+            // The change hasn't happened yet!  Don't redraw until we return to the event loop
+            setTimeout(() => this.editor.redraw_foreground_tile(), 0);
+        }
+        else if (this.tile === this.editor.bg_tile) {
+            setTimeout(() => this.editor.redraw_background_tile(), 0);
+        }
+    }
+
+    close() {
+        if (this.needs_undo_entry) {
+            // This will be a no-op the first time since the tile was already swapped, but it's
+            // important for redo
+            this.editor._assign_tile(this.cell, this.tile.type.layer, this.tile, this.pristine_tile);
+            this.editor.commit_undo();
+        }
+        super.close();
     }
 
     static configure_tile_defaults(tile) {
@@ -45,14 +80,14 @@ class LetterTileEditor extends TileEditorOverlay {
 
         list.addEventListener('change', ev => {
             if (this.tile) {
+                this.mark_dirty();
                 this.tile.overlaid_glyph = this.root.elements['glyph'].value;
-                this.editor.mark_tile_dirty(this.tile);
             }
         });
     }
 
-    edit_tile(tile) {
-        super.edit_tile(tile);
+    edit_tile(tile, cell) {
+        super.edit_tile(tile, cell);
         this.root.elements['glyph'].value = tile.overlaid_glyph;
     }
 
@@ -68,15 +103,16 @@ class HintTileEditor extends TileEditorOverlay {
         this.root.append(mk('h3', "Hint text"));
         this.text = mk('textarea.editor-hint-tile-text');
         this.root.append(this.text);
-        this.text.addEventListener('input', ev => {
-            if (this.tile) {
+        this.text.addEventListener('change', ev => {
+            if (this.tile && this.text.value !== this.tile.hint_text) {
+                this.mark_dirty();
                 this.tile.hint_text = this.text.value;
             }
         });
     }
 
-    edit_tile(tile) {
-        super.edit_tile(tile);
+    edit_tile(tile, cell) {
+        super.edit_tile(tile, cell);
         this.text.value = tile.hint_text ?? "";
     }
 
@@ -138,19 +174,19 @@ class FrameBlockTileEditor extends TileEditorOverlay {
             if (! this.tile)
                 return;
 
+            this.mark_dirty();
             if (ev.target.checked) {
                 this.tile.arrows.add(ev.target.value);
             }
             else {
                 this.tile.arrows.delete(ev.target.value);
             }
-            this.editor.mark_tile_dirty(this.tile);
         });
         this.root.append(arrow_list);
     }
 
-    edit_tile(tile) {
-        super.edit_tile(tile);
+    edit_tile(tile, cell) {
+        super.edit_tile(tile, cell);
 
         for (let input of this.root.elements['direction']) {
             input.checked = tile.arrows.has(input.value);
@@ -189,21 +225,22 @@ class RailroadTileEditor extends TileEditorOverlay {
             track_list.append(mk('li', mk('label', input, svg_icons[i])));
         }
         track_list.addEventListener('change', ev => {
-            if (this.tile) {
-                let bit = 1 << ev.target.value;
-                if (ev.target.checked) {
-                    this.tile.tracks |= bit;
-                }
-                else {
-                    this.tile.tracks &= ~bit;
-                }
-                this.editor.mark_tile_dirty(this.tile);
+            if (! this.tile)
+                return;
+
+            this.mark_dirty();
+            let bit = 1 << ev.target.value;
+            if (ev.target.checked) {
+                this.tile.tracks |= bit;
+            }
+            else {
+                this.tile.tracks &= ~bit;
             }
         });
         this.root.append(track_list);
 
         this.root.append(mk('h3', "Switch"));
-        let switch_list = mk('ul.editor-railroad-tile-tracks.--switch');
+        let switch_list = mk('ul.editor-railroad-tile-tracks.--switch.editor-tile-editor-svg-parts');
         for (let i of track_order) {
             let input = mk('input', {type: 'radio', name: 'switch', value: i});
             switch_list.append(mk('li', mk('label', input, svg_icons[i].cloneNode(true))));
@@ -212,8 +249,8 @@ class RailroadTileEditor extends TileEditorOverlay {
         // TODO if they pick a track that's missing it should add it
         switch_list.addEventListener('change', ev => {
             if (this.tile) {
-                this.tile.track_switch = ev.target.value;
-                this.editor.mark_tile_dirty(this.tile);
+                this.mark_dirty();
+                this.tile.track_switch = parseInt(ev.target.value, 10);
             }
         });
         this.root.append(switch_list);
@@ -222,8 +259,8 @@ class RailroadTileEditor extends TileEditorOverlay {
         // TODO initial actor facing (maybe only if there's an actor in the cell)
     }
 
-    edit_tile(tile) {
-        super.edit_tile(tile);
+    edit_tile(tile, cell) {
+        super.edit_tile(tile, cell);
 
         for (let input of this.root.elements['track']) {
             input.checked = !! (tile.tracks & (1 << input.value));
@@ -248,6 +285,6 @@ export const TILES_WITH_PROPS = {
     railroad: RailroadTileEditor,
     // TODO various wireable tiles (hmm not sure how that ui works)
     // TODO initial value of counter
-    // TODO cloner arrows
+    // TODO cloner arrows (should this be automatic unless you set them explicitly?)
     // TODO later, custom floor/wall selection
 };

js/format-base.js

@@ -1,17 +1,32 @@
+import { LAYERS } from './defs.js';
 import * as util from './util.js';
 
 export class StoredCell extends Array {
+    constructor() {
+        super(LAYERS.MAX);
+    }
 }
 
 export class Replay {
-    constructor(initial_force_floor_direction, blob_seed, inputs = null) {
+    constructor(initial_force_floor_direction, blob_seed, inputs = null, step_parity = null, tw_seed = 0) {
         this.initial_force_floor_direction = initial_force_floor_direction;
         this.blob_seed = blob_seed;
+        this.step_parity = step_parity;
+        this.tw_seed = tw_seed;
         this.inputs = inputs ?? new Uint8Array;
         this.duration = this.inputs.length;
         this.cursor = 0;
     }
 
+    configure_level(level) {
+        level.force_floor_direction = this.initial_force_floor_direction;
+        level._blob_modifier = this.blob_seed;
+        level._tw_rng = this.tw_seed;
+        if (this.step_parity !== null) {
+            level.step_parity = this.step_parity;
+        }
+    }
+
     get(t) {
         if (this.duration <= 0) {
             return 0;
@@ -48,24 +63,59 @@ export class Replay {
     }
 }
 
-export class StoredLevel {
+// Small shared helper methods for navigating a StoredLevel or Level
+export class LevelInterface {
+    // Expected attributes:
+    // .size_x
+    // .size_y
+    // .linear_cells
+    scalar_to_coords(n) {
+        return [n % this.size_x, Math.floor(n / this.size_x)];
+    }
+
+    coords_to_scalar(x, y) {
+        return x + y * this.size_x;
+    }
+
+    is_point_within_bounds(x, y) {
+        return (x >= 0 && x < this.size_x && y >= 0 && y < this.size_y);
+    }
+
+    cell(x, y) {
+        if (this.is_point_within_bounds(x, y)) {
+            return this.linear_cells[this.coords_to_scalar(x, y)];
+        }
+        else {
+            return null;
+        }
+    }
+}
+
+export class StoredLevel extends LevelInterface {
     constructor(number) {
+        super();
         // TODO still not sure this belongs here
         this.number = number;  // one-based
         this.title = '';
         this.author = '';
         this.password = null;
-        this.hint = '';
-        this.chips_required = 0;
+        this.comment = '';
+        // A number is a specified count; the default of null means that the chips are counted on
+        // level init, as in CC2
+        this.chips_required = null;
         this.time_limit = 0;
         this.viewport_size = 9;
         this.extra_chunks = [];
         this.use_cc1_boots = false;
-        this.use_ccl_compat = false;
+        // What we were parsed from: 'ccl', 'c2m', or null
+        this.format = null;
+        // Whether we use LL features that don't exist in CC2; null means we don't know
+        this.uses_ll_extensions = null;
         // 0 - deterministic (PRNG + simple convolution)
         // 1 - 4 patterns (default; PRNG + rotating through 0-3)
         // 2 - extra random (like deterministic, but initial seed is "actually" random)
         this.blob_behavior = 1;
+        this.hide_logic = false;
 
         // Lazy-loading that allows for checking existence (see methods below)
         // TODO this needs a better interface, these get accessed too much atm
@@ -77,25 +127,14 @@ export class StoredLevel {
         this.size_y = 0;
         this.linear_cells = [];
 
-        // Maps of button positions to trap/cloner positions, as scalar indexes
-        // in the linear cell list
-        // TODO merge these imo
+        // Maps of button positions to trap/cloner positions, as scalars
         this.has_custom_connections = false;
-        this.custom_trap_wiring = {};
-        this.custom_cloner_wiring = {};
+        this.custom_connections = {};
 
         // New LL feature: custom camera regions, as lists of {x, y, width, height}
         this.camera_regions = [];
     }
 
-    scalar_to_coords(n) {
-        return [n % this.size_x, Math.floor(n / this.size_x)];
-    }
-
-    coords_to_scalar(x, y) {
-        return x + y * this.size_x;
-    }
-
     check() {
     }
 
@@ -124,6 +163,10 @@ export class StoredPack {
         // error: any error received while loading the level
         // bytes: Uint8Array of the encoded level data
         this.level_metadata = [];
+
+        // Sparse/optional array of Replays, generally from an ancillary file like a TWS
+        // TODO unclear if this is a good API for this
+        this.level_replays = [];
     }
 
     // TODO this may or may not work sensibly when correctly following a c2g
@@ -138,10 +181,13 @@ export class StoredPack {
             // The editor stores inflated levels at times, so respect that
             return meta.stored_level;
         }
-        else {
-            // Otherwise, attempt to load the level
-            return this._level_loader(meta);
+
+        // Otherwise, attempt to load the level
+        let stored_level = this._level_loader(meta);
+        if (! stored_level.has_replay && this.level_replays[index]) {
+            stored_level._replay = this.level_replays[index];
         }
+        return stored_level;
     }
 }
 

js/format-c2g.js

@@ -1,4 +1,4 @@
-import { DIRECTIONS, DIRECTION_ORDER } from './defs.js';
+import { DIRECTIONS, DIRECTION_ORDER, LAYERS } from './defs.js';
 import * as format_base from './format-base.js';
 import TILE_TYPES from './tiletypes.js';
 import * as util from './util.js';
@@ -79,7 +79,7 @@ export function encode_replay(replay, stored_level = null) {
         }
 
         let input = replay.inputs[i];
-        if (input !== prev_input || count >= 252) {
+        if (input !== prev_input || count >= 252 - 2) {
             out[p] = count;
             out[p + 1] = input;
             p += 2;
@@ -92,6 +92,8 @@ export function encode_replay(replay, stored_level = null) {
     }
     out[p] = 0xff;
     p += 1;
+    out[p] = 0x00;
+    p += 1;
     out = out.subarray(0, p);
     // TODO stick it on the level if given?
     return out;
@@ -109,6 +111,16 @@ let modifier_wire = {
     },
 };
 
+let modifier_color = {
+    _order: ['red', 'blue', 'yellow', 'green'],
+    decode(tile, modifier) {
+        tile.color = this._order[modifier % 4];
+    },
+    encode(tile) {
+        return this._order.indexOf(tile.color);
+    },
+};
+
 let arg_direction = {
     size: 1,
     decode(tile, dirbyte) {
@@ -214,16 +226,46 @@ const TILE_ENCODING = {
         extra_args: [arg_direction],
     },
     0x1b: {
-        name: 'thinwall_s',
+        // CC1 south thin wall
+        name: 'thin_walls',
         has_next: true,
+        modifier: {
+            dummy: true,
+            decode(tile, mod) {
+                tile.edges = DIRECTIONS['south'].bit;
+            },
+            encode(tile) {
+                return 0;
+            },
+        },
     },
     0x1c: {
-        name: 'thinwall_e',
+        // CC1 east thin wall
+        name: 'thin_walls',
         has_next: true,
+        modifier: {
+            dummy: true,
+            decode(tile, mod) {
+                tile.edges = DIRECTIONS['east'].bit;
+            },
+            encode(tile) {
+                return 0;
+            },
+        },
     },
     0x1d: {
-        name: 'thinwall_se',
+        // CC1 southeast thin wall
+        name: 'thin_walls',
         has_next: true,
+        modifier: {
+            dummy: true,
+            decode(tile, mod) {
+                tile.edges = DIRECTIONS['south'].bit | DIRECTIONS['east'].bit;
+            },
+            encode(tile) {
+                return 0;
+            },
+        },
     },
     0x1e: {
         name: 'gravel',
@@ -356,8 +398,18 @@ const TILE_ENCODING = {
         has_next: true,
     },
     0x41: {
-        // FIXME cc2lp1 uses this, i don't know what it actually does
-        error: "Open trap is not yet implemented!",
+        name: 'trap',
+        // Not actually a modifier, just using this for hax
+        // FIXME round-trip this, maybe expose it in the editor (sigh)
+        modifier: {
+            dummy: true,
+            decode(tile, mod) {
+                tile._initially_open = true;
+            },
+            encode(tile) {
+                return 0;
+            },
+        },
     },
     0x42: {
         name: 'trap',
@@ -367,8 +419,14 @@ const TILE_ENCODING = {
     },
     0x44: {
         name: 'cloner',
-        // TODO visual directions bitmask, no gameplay impact, possible editor impact
-        modifier: null,
+        modifier: {
+            decode(tile, mod) {
+                tile.arrows = mod;
+            },
+            encode(tile) {
+                return tile.arrows;
+            },
+        },
     },
     0x45: {
         name: 'hint',
@@ -488,8 +546,8 @@ const TILE_ENCODING = {
                 else {
                     tile.direction = DIRECTION_ORDER[modifier & 0x03];
                     let type = modifier >> 2;
-                    if (type < 6) {
-                        tile.gate_type = ['not', 'and', 'or', 'xor', 'latch-cw', 'nand'][type];
+                    if (type < 7) {
+                        tile.gate_type = ['not', 'and', 'or', 'xor', 'latch-cw', 'nand', 'diode'][type];
                     }
                     else if (type === 16) {
                         tile.gate_type = 'latch-ccw';
@@ -519,6 +577,9 @@ const TILE_ENCODING = {
                 else if (tile.gate_type === 'nand') {
                     return 20 + direction_offset;
                 }
+                else if (tile.gate_type === 'diode') {
+                    return 24 + direction_offset;
+                }
                 else if (tile.gate_type === 'counter') {
                     return 30 + tile.memory;
                 }
@@ -744,16 +805,126 @@ const TILE_ENCODING = {
         has_next: true,
     },
 
+    // ------------------------------------------------------------------------------------------------
     // LL-specific tiles
+    0xd0: {
+        name: 'electrified_floor',
+        is_extension: true,
+    },
+    0xd1: {
+        name: 'hole',
+        is_extension: true,
+    },
+    0xd2: {
+        name: 'cracked_floor',
+        is_extension: true,
+    },
+    0xd3: {
+        name: 'cracked_ice',
+        is_extension: true,
+    },
+    0xd4: {
+        name: 'score_5x',
+        has_next: true,
+        is_extension: true,
+    },
+    0xd5: {
+        name: 'spikes',
+        is_extension: true,
+    },
+    0xd6: {
+        name: 'boulder',
+        has_next: true,
+        extra_args: [arg_direction],
+    },
+    // 0xd7
+    0xd8: {
+        name: 'dash_floor',
+        is_extension: true,
+    },
+    0xd9: {
+        name: 'teleport_blue_exit',
+        modifier: modifier_wire,
+        is_extension: true,
+    },
+    0xda: {
+        name: 'glass_block',
+        has_next: true,
+        extra_args: [arg_direction],
+        is_extension: true,
+    },
     0xe0: {
         name: 'gift_bow',
         has_next: true,
+        is_extension: true,
     },
     0xe1: {
         name: 'circuit_block',
         has_next: true,
         modifier: modifier_wire,
         extra_args: [arg_direction],
+        is_extension: true,
+    },
+    0xe2: {
+        name: 'skeleton_key',
+        has_next: true,
+        is_extension: true,
+    },
+    0xe3: {
+        name: 'gate_red',
+        has_next: true,
+        is_extension: true,
+    },
+    0xe4: {
+        name: 'gate_blue',
+        has_next: true,
+        is_extension: true,
+    },
+    0xe5: {
+        name: 'gate_yellow',
+        has_next: true,
+        is_extension: true,
+    },
+    0xe6: {
+        name: 'gate_green',
+        has_next: true,
+        is_extension: true,
+    },
+    0xe7: {
+        name: 'sand',
+        is_extension: true,
+    },
+    0xed: {
+        name: 'ankh',
+        has_next: true,
+        is_extension: true,
+    },
+    0xef: {
+        name: 'turntable_cw',
+        modifier: modifier_wire,
+        is_extension: true,
+    },
+    0xf0: {
+        name: 'turntable_ccw',
+        modifier: modifier_wire,
+        is_extension: true,
+    },
+    0xf1: {
+        name: 'sokoban_block',
+        has_next: true,
+        modifier: modifier_color,
+        extra_args: [arg_direction],
+        is_extension: true,
+    },
+    0xf2: {
+        name: 'sokoban_button',
+        modifier: modifier_color,
+        is_extension: true,
+    },
+    0xf3: {
+        name: 'sokoban_wall',
+        modifier: modifier_color,
+        is_extension: true,
     },
 };
 const REVERSE_TILE_ENCODING = {};
@@ -872,6 +1043,9 @@ export function parse_level(buf, number = 1) {
     }
 
     let level = new format_base.StoredLevel(number);
+    level.format = 'c2m';
+    level.uses_ll_extensions = false;  // we'll update this if it changes
+    let default_hint = '';
     let extra_hints = [];
     let hint_tiles = [];
     for (let [type, bytes] of read_c2m_sections(buf)) {
@@ -880,7 +1054,7 @@ export function parse_level(buf, number = 1) {
             type === 'CLUE' || type === 'NOTE')
         {
             // These are all singular strings (with a terminating NUL, for some reason)
-            // XXX character encoding??
+            // XXX character encoding??  seems to be latin1, ugh
             let str = util.string_from_buffer_ascii(bytes, 0, bytes.length - 1).replace(/\r\n/g, "\n");
 
             // TODO store more of this, at least for idempotence, maybe
@@ -903,13 +1077,26 @@ export function parse_level(buf, number = 1) {
             }
             else if (type === 'CLUE') {
                 // Level hint
-                level.hint = str;
+                default_hint = str;
             }
             else if (type === 'NOTE') {
-                // Author's comments...  but might also include multiple hints for levels with
-                // multiple hint tiles, delineated by [CLUE] (anywhere in the line (!)).
-                // LL treats extra hints as tile properties, so store them for later
-                [level.comment, ...extra_hints] = str.split(/\n?^.*\[CLUE\].*$\n?/mg);
+                // Author's comments...  but might also include tags delimiting special blocks, most
+                // notably for storing multiple hints.  Note that this parsing might lose data in
+                // two cases: if other text is in the same line as the tag (which still counts!),
+                // it's silently ignored; if there are more [CLUE] blocks than the level has hints,
+                // the extras are silently dropped, because hint text is a tile prop in LL.
+                let parts = str.split(/\n?^.*\[(CLUE|JETLIFE|COM)\].*$\n?/mg);
+                level.comment = parts[0];
+                extra_hints = [];
+                for (let i = 1; i < parts.length; i += 2) {
+                    let type = parts[i];
+                    let text = parts[i + 1];
+                    if (type === 'CLUE') {
+                        extra_hints.push(text);
+                    }
+                    // TODO do something with COM (c2g commands) and JETLIFE (easter egg, make flame
+                    // jets propagate like game of life)
+                }
             }
             continue;
         }
@@ -957,11 +1144,11 @@ export function parse_level(buf, number = 1) {
 
             if (view.byteLength <= 22)
                 continue;
-            //options.hide_logic = view.getUint8(22, true);
+            level.hide_logic = !! view.getUint8(22, true);
 
             if (view.byteLength <= 23)
                 continue;
-            level.use_cc1_boots = view.getUint8(23, true);
+            level.use_cc1_boots = !! view.getUint8(23, true);
 
             if (view.byteLength <= 24)
                 continue;
@@ -1021,6 +1208,10 @@ export function parse_level(buf, number = 1) {
                         }
                     }
 
+                    if (spec.is_extension) {
+                        level.uses_ll_extensions = true;
+                    }
+
                     let name = spec.name;
 
                     // Make a tile template, possibly dealing with some special cases
@@ -1030,21 +1221,13 @@ export function parse_level(buf, number = 1) {
                         // bitmask
                         let mask = bytes[p];
                         p++;
-                        // This order is important; this is the order CC2 draws them in
                         if (mask & 0x10) {
-                            cell.push({type: TILE_TYPES['canopy']});
+                            let type = TILE_TYPES['canopy'];
+                            cell[type.layer] = {type};
                         }
-                        if (mask & 0x08) {
-                            cell.push({type: TILE_TYPES['thinwall_w']});
-                        }
-                        if (mask & 0x04) {
-                            cell.push({type: TILE_TYPES['thinwall_s']});
-                        }
-                        if (mask & 0x02) {
-                            cell.push({type: TILE_TYPES['thinwall_e']});
-                        }
-                        if (mask & 0x01) {
-                            cell.push({type: TILE_TYPES['thinwall_n']});
+                        if (mask & 0x0f) {
+                            let type = TILE_TYPES['thin_walls'];
+                            cell[type.layer] = {type, edges: mask & 0x0f};
                         }
                         // Skip the rest of the loop.  That means we don't handle any of the other
                         // special behavior below, but neither thin walls nor canopies should use
@@ -1059,7 +1242,7 @@ export function parse_level(buf, number = 1) {
                     let type = TILE_TYPES[name];
                     if (!type) console.error(name, spec);
                     let tile = {type};
-                    cell.push(tile);
+                    cell[type.layer] = tile;
                     if (spec.modifier) {
                         spec.modifier.decode(tile, modifier);
                     }
@@ -1068,12 +1251,10 @@ export function parse_level(buf, number = 1) {
                     // TODO this should go on the bottom
                     // TODO we should sort and also only allow one thing per layer
                     if (spec.dummy_terrain) {
-                        cell.push({type: TILE_TYPES[spec.dummy_terrain]});
+                        let type = TILE_TYPES[spec.dummy_terrain];
+                        cell[type.layer] = {type};
                     }
 
-                    if (type.is_required_chip) {
-                        level.chips_required++;
-                    }
                     if (type.is_hint) {
                         // Remember all the hint tiles (in reading order) so we can map extra hints
                         // to them later.  Don't do it now, since the format doesn't technically
@@ -1093,7 +1274,6 @@ export function parse_level(buf, number = 1) {
                     if (! spec.has_next)
                         break;
                 }
-                cell.reverse();
                 level.linear_cells.push(cell);
             }
         }
@@ -1127,8 +1307,22 @@ export function parse_level(buf, number = 1) {
                 p += 4;
             }
         }
+        else if (type === 'LXCX') {
+            // Custom connections, like MSCC (but more!  maybe)
+            if (bytes.length % 4 !== 0)
+                throw new Error(`Expected LXCX chunk to be a multiple of 4 bytes; got ${bytes.length}`);
+
+            level.has_custom_connections = true;
+            let p = 0;
+            while (p < bytes.length) {
+                let src = view.getUint16(p, true);
+                let dest = view.getUint16(p + 2, true);
+                level.custom_connections[src] = dest;
+                p += 4;
+            }
+        }
         else {
-            console.warn(`Unrecognized section type '${type}' at offset ${bytes.byteOffset}`);
+            // console.warn(`Unrecognized section type '${type}' at offset ${bytes.byteOffset}`, view);
             // TODO save it, persist when editing level
         }
     }
@@ -1140,7 +1334,7 @@ export function parse_level(buf, number = 1) {
         }
         else {
             // Fall back to regular hint
-            tile.hint_text = null;
+            tile.hint_text = default_hint;
         }
     }
 
@@ -1259,6 +1453,7 @@ class C2M {
         }
 
         if (typeof buf === 'string' || buf instanceof String) {
+            // FIXME encode as latin1, maybe with some kludge for anything that doesn't fit
             let str = buf;
             // C2M also includes the trailing NUL
             buf = new ArrayBuffer(str.length + 1);
@@ -1301,7 +1496,9 @@ class C2M {
 
 export function synthesize_level(stored_level) {
     let c2m = new C2M;
-    c2m.add_section('CC2M', '133');
+    c2m.add_section('CC2M', '7');  // latest version
+    // TODO add in a VERS (editor version) section?  some other indication LL produced it?  not for
+    // url sharing though, should make that as small as possible
 
     if (stored_level.title) {
         c2m.add_section('TITL', stored_level.title);
@@ -1311,17 +1508,32 @@ export function synthesize_level(stored_level) {
     }
 
     // Options block
-    let options = new Uint8Array(3);
+    let options = new Uint8Array(25);  // max possible size
+    let options_length = 0;
     new DataView(options.buffer).setUint16(0, stored_level.time_limit, true);
     if (stored_level.viewport_size === 10) {
         options[2] = 0;
     }
     else if (stored_level.viewport_size === 9) {
         options[2] = 1;
+        options_length = 3;
+    }
+    if (stored_level.hide_logic) {
+        options[22] = 1;
+        options_length = 23;
+    }
+    if (stored_level.use_cc1_boots) {
+        options[23] = 1;
+        options_length = 24;
+    }
+    if (stored_level.blob_behavior !== 0) {
+        options[24] = stored_level.blob_behavior;
+        options_length = 25;
     }
     // TODO split
-    // TODO for size purposes, omit the block entirely if all options are defaults?
-    c2m.add_section('OPTN', options);
+    if (options_length > 0) {
+        c2m.add_section('OPTN', options.slice(0, options_length));
+    }
 
     // Store camera regions
     // TODO LL feature, should be distinguished somehow
@@ -1338,6 +1550,21 @@ export function synthesize_level(stored_level) {
         c2m.add_section('LXCM', bytes.buffer);
     }
 
+    // Store MSCC-like custom connections
+    // TODO LL feature, should be distinguished somehow
+    let num_connections = Object.keys(stored_level.custom_connections).length;
+    if (num_connections > 0) {
+        let buf = new ArrayBuffer(4 * num_connections);
+        let view = new DataView(buf);
+        let p = 0;
+        for (let [src, dest] of Object.entries(stored_level.custom_connections)) {
+            view.setUint16(p + 0, src, true);
+            view.setUint16(p + 2, dest, true);
+            p += 4;
+        }
+        c2m.add_section('LXCX', buf);
+    }
+
     let map_bytes = new Uint8Array(1024);
     let map_view = new DataView(map_bytes.buffer);
     map_bytes[0] = stored_level.size_x;
@@ -1355,11 +1582,44 @@ export function synthesize_level(stored_level) {
             map_view = new DataView(map_bytes.buffer);
         }
 
-        // TODO complain if duplicates on a layer
         let dummy_terrain_tile = null;
-        for (let i = cell.length - 1; i >= 0; i--) {
+        let handled_thin_walls = false;
+        for (let i = LAYERS.MAX - 1; i >= 0; i--) {
             let tile = cell[i];
-            // FIXME does not yet support canopy or thin walls  >:S
+            if (! tile)
+                continue;
+
+            if (tile.type.name === 'canopy' || tile.type.name === 'thin_walls') {
+                // These two tiles are encoded together despite being on different layers.  If we
+                // see the canopy first, then find the thin wall tile (if any) and set a flag so we
+                // don't try to encode it again
+                if (handled_thin_walls)
+                    continue;
+                handled_thin_walls = true;
+
+                let canopy, thin_walls;
+                if (tile.type.name === 'canopy') {
+                    canopy = tile;
+                    thin_walls = cell[LAYERS.thin_wall];
+                }
+                else {
+                    thin_walls = tile;
+                }
+
+                let arg = 0;
+                if (canopy) {
+                    arg |= 0x10;
+                }
+                if (thin_walls) {
+                    arg |= thin_walls.edges;
+                }
+
+                map_bytes[p] = REVERSE_TILE_ENCODING['#thinwall/canopy'].tile_byte;
+                map_bytes[p + 1] = arg;
+                p += 2;
+                continue;
+            }
+
             let spec = REVERSE_TILE_ENCODING[tile.type.name];
 
             // Handle the swivel, a tile that draws as an overlay but is stored like terrain.  In a
@@ -1368,7 +1628,7 @@ export function synthesize_level(stored_level) {
             // save it until we reach the terrain layer, and then sub it in instead.
             // TODO if i follow in tyler's footsteps and give swivel its own layer then i'll need to
             // complicate this somewhat
-            if (tile.type.draw_layer === 0 && dummy_terrain_tile) {
+            if (tile.type.layer === LAYERS.terrain && dummy_terrain_tile) {
                 tile = dummy_terrain_tile;
                 spec = REVERSE_TILE_ENCODING[tile.type.name];
             }
@@ -1424,12 +1684,18 @@ export function synthesize_level(stored_level) {
     }
     map_bytes = map_bytes.subarray(0, p);
 
-    // Collect hints first so we can put them in the comment field
-    // FIXME this does not respect global hint, but then, neither does the editor.
-    hints = hints.map(hint => hint ?? '');
-    hints.push('');
-    hints.unshift('');
-    c2m.add_section('NOTE', hints.join('\n[CLUE]\n'));
+    let comment = stored_level.comment;
+    if (hints.length) {
+        // Collect hints first so we can put them in the comment field
+        // FIXME this does not respect global hint, but then, neither does the editor.
+        hints = hints.map(hint => hint ?? '');
+        hints.push('');
+        hints.unshift('');
+        // Must use Windows linebreaks here  🙄
+        comment += hints.join('\r\n[CLUE]\r\n');
+    }
+    // TODO support COM and JETLIFE
+    c2m.add_section('NOTE', comment);
 
     let compressed_map = compress(map_bytes);
     if (compressed_map) {
@@ -1909,6 +2175,16 @@ const MAX_SIMULTANEOUS_REQUESTS = 5;
             fetch_map(path, level_number);
             level_number++;
         }
+        else if (stmt.kind === 'directive' && stmt.name === 'game') {
+            // TODO apparently cc2 lets you change this mid-game and will then use a different save
+            // slot (?!), but i can't even consider that until i actually execute these things in
+            // order
+            if (game.identifier === undefined) {
+                let title = stmt.args[0].value;
+                game.identifier = title;
+                game.title = title;
+            }
+        }
         statements.push(stmt);
     }
 

js/format-dat.js

@@ -1,3 +1,4 @@
+import { DIRECTIONS, LAYERS } from './defs.js';
 import * as format_base from './format-base.js';
 import TILE_TYPES from './tiletypes.js';
 import * as util from './util.js';
@@ -9,10 +10,10 @@ const TILE_ENCODING = {
     0x03: 'water',
     0x04: 'fire',
     0x05: 'wall_invisible',
-    0x06: 'thinwall_n',
-    0x07: 'thinwall_w',
-    0x08: 'thinwall_s',
-    0x09: 'thinwall_e',
+    0x06: ['thin_walls', {edges: DIRECTIONS['north'].bit}],
+    0x07: ['thin_walls', {edges: DIRECTIONS['west'].bit}],
+    0x08: ['thin_walls', {edges: DIRECTIONS['south'].bit}],
+    0x09: ['thin_walls', {edges: DIRECTIONS['east'].bit}],
     // This is MSCC's incomprehensible non-directional dirt block, which needs a direction for Lynx
     // purposes; Tile World defaults it to north
     0x0a: ['dirt_block', 'north'],
@@ -54,7 +55,7 @@ const TILE_ENCODING = {
     0x2d: 'gravel',
     0x2e: 'popwall',
     0x2f: 'hint',
-    0x30: 'thinwall_se',
+    0x30: ['thin_walls', {edges: DIRECTIONS['south'].bit | DIRECTIONS['east'].bit}],
     0x31: 'cloner',
     0x32: 'force_floor_all',
     0x33: 'bogus_player_drowned',
@@ -62,7 +63,7 @@ const TILE_ENCODING = {
     0x35: 'bogus_player_burned',
     0x36: 'wall_invisible',  // unused
     0x37: 'wall_invisible',  // unused
-    0x38: 'wall_invisible',  // unused
+    0x38: 'ice_block',       // unused, but co-opted by pgchip
     0x39: 'bogus_player_win',
     0x3a: 'bogus_player_win',
     0x3b: 'bogus_player_win',
@@ -120,6 +121,45 @@ const TILE_ENCODING = {
     0x6f: ['player', 'east'],
 };
 
+const REVERSE_TILE_ENCODING = {};
+for (let [tile_byte, spec] of Object.entries(TILE_ENCODING)) {
+    tile_byte = parseInt(tile_byte, 10);  // these are keys so they get stringified ugh
+    if (0x36 <= tile_byte && tile_byte <= 0x37) {
+        // These are unused tiles which get turned into invisible walls; don't encode invisible
+        // walls as them!  (0x38 is also "unused", but pgchip turns it into ice block.)
+        continue;
+    }
+
+    let name, arg;
+    if (spec instanceof Array) {
+        [name, arg] = spec;
+    }
+    else {
+        name = spec;
+        arg = null;
+    }
+
+    let rev_spec = REVERSE_TILE_ENCODING[name];
+    if (! rev_spec) {
+        rev_spec = {};
+        REVERSE_TILE_ENCODING[name] = rev_spec;
+    }
+
+    if (arg === null || tile_byte === 0x0a) {
+        // Special case: 0x0a is MSCC's undirected dirt block, which needs to coexist with the
+        // directed "clone" blocks
+        rev_spec['all'] = tile_byte;
+    }
+    else if (typeof arg === 'string') {
+        // This is a direction
+        rev_spec[arg] = tile_byte;
+    }
+    else {
+        // This is the thin_walls argument structure
+        rev_spec[arg.edges] = tile_byte;
+    }
+}
+
 function decode_password(bytes, start, len) {
     let password = [];
     for (let i = 0; i < len; i++) {
@@ -161,10 +201,6 @@ export function parse_level_metadata(bytes) {
             // Password, with trailing NUL, and XORed with 0x99 (???)
             meta.password = decode_password(bytes, p, field_length - 1);
         }
-        else if (field_type === 0x07) {
-            // Hint, including trailing NUL, of course
-            meta.hint = util.string_from_buffer_ascii(bytes, p, field_length - 1);
-        }
         p += field_length;
     }
 
@@ -174,7 +210,9 @@ export function parse_level_metadata(bytes) {
 function parse_level(bytes, number) {
     let level = new format_base.StoredLevel(number);
     level.has_custom_connections = true;
-    level.use_ccl_compat = true;
+    level.format = 'ccl';
+    level.uses_ll_extensions = false;
+    level.chips_required = 0;
     // Map size is always fixed as 32x32 in CC1
     level.size_x = 32;
     level.size_y = 32;
@@ -194,6 +232,7 @@ function parse_level(bytes, number) {
     let unknown = view.getUint16(6, true);
     // Same structure twice, for the two layers
     let p = 8;
+    let hint_tiles = [];
     for (let l = 0; l < 2; l++) {
         let layer_length = view.getUint16(p, true);
         p += 2;
@@ -217,14 +256,18 @@ function parse_level(bytes, number) {
                 throw new Error(`Invalid tile byte 0x${tile_byte.toString(16)} at (${x}, ${y})`);
             }
 
-            let name, direction;
+            let name, extra;
             if (spec instanceof Array) {
-                [name, direction] = spec;
+                [name, extra] = spec;
+                if (typeof extra === 'string') {
+                    extra = {direction: extra};
+                }
             }
             else {
                 name = spec;
+                extra = {};
             }
-            let type = TILE_TYPES[name];
+            let tile = {type: TILE_TYPES[name], ...extra};
 
             for (let i = 0; i < count; i++) {
                 if (c >= 1024)
@@ -242,7 +285,22 @@ function parse_level(bytes, number) {
                     continue;
                 }
 
-                cell.unshift({type, direction});
+                // pgchip grants directions to ice blocks on cloners by putting a clone block
+                // beneath them instead
+                if (l === 1 && 0x0e <= tile_byte && tile_byte <= 0x11 &&
+                    cell[LAYERS.actor] && cell[LAYERS.actor].type.name === 'ice_block')
+                {
+                    cell[LAYERS.actor].direction = extra.direction;
+                    let type = TILE_TYPES['cloner'];
+                    cell[type.layer] = {type};
+                    continue;
+                }
+
+                let new_tile = {...tile};
+                cell[tile.type.layer] = new_tile;
+                if (new_tile.type.name === 'hint') {
+                    hint_tiles.push(new_tile);
+                }
             }
         }
         if (c !== 1024)
@@ -251,9 +309,8 @@ function parse_level(bytes, number) {
 
     // Fix the "floor/empty" nonsense here by adding floor to any cell with no terrain on bottom
     for (let cell of level.linear_cells) {
-        if (cell.length === 0 || cell[0].type.draw_layer !== 0) {
-            // No terrain; insert a floor
-            cell.unshift({ type: TILE_TYPES['floor'] });
+        if (! cell[LAYERS.terrain]) {
+            cell[LAYERS.terrain] = { type: TILE_TYPES['floor'] };
         }
         // TODO we could also deal with weird cases where there's terrain /on top of/ something
         // else: things underwater, the quirk where a glider will erase the item underneath...
@@ -291,7 +348,13 @@ function parse_level(bytes, number) {
                 let trap_y = field_view.getUint16(q + 6, true);
                 // Fifth u16 is always zero, possibly live game state
                 q += 10;
-                level.custom_trap_wiring[button_x + button_y * level.size_x] = trap_x + trap_y * level.size_x;
+                // Connections are ignored if they're on the wrong tiles anyway, and we use a single
+                // mapping that's a bit more flexible, so only store valid connections
+                let s = level.coords_to_scalar(button_x, button_y);
+                let d = level.coords_to_scalar(trap_x, trap_y);
+                if (level.linear_cells[s][LAYERS.terrain].type.name === 'button_brown') {
+                    level.custom_connections[s] = d;
+                }
             }
         }
         else if (field_type === 0x05) {
@@ -304,7 +367,13 @@ function parse_level(bytes, number) {
                 let cloner_x = field_view.getUint16(q + 4, true);
                 let cloner_y = field_view.getUint16(q + 6, true);
                 q += 8;
-                level.custom_cloner_wiring[button_x + button_y * level.size_x] = cloner_x + cloner_y * level.size_x;
+                // Connections are ignored if they're on the wrong tiles anyway, and we use a single
+                // mapping that's a bit more flexible, so only store valid connections
+                let s = level.coords_to_scalar(button_x, button_y);
+                let d = level.coords_to_scalar(cloner_x, cloner_y);
+                if (level.linear_cells[s][LAYERS.terrain].type.name === 'button_red') {
+                    level.custom_connections[s] = d;
+                }
             }
         }
         else if (field_type === 0x06) {
@@ -313,12 +382,19 @@ function parse_level(bytes, number) {
         }
         else if (field_type === 0x07) {
             // Hint, including trailing NUL, of course
-            level.hint = util.string_from_buffer_ascii(bytes, p, field_length - 1);
+            let hint = util.string_from_buffer_ascii(bytes, p, field_length - 1);
+            for (let tile of hint_tiles) {
+                tile.hint_text = hint;
+            }
         }
         else if (field_type === 0x08) {
             // Password, but not encoded
             // TODO ???
         }
+        else if (field_type === 0x09) {
+            // EXTENSION: Author, including trailing NUL
+            level.author = util.string_from_buffer_ascii(bytes, p, field_length - 1);
+        }
         else if (field_type === 0x0a) {
             // Initial actor order
             // TODO ??? should i...  trust this...
@@ -347,6 +423,10 @@ export function parse_game(buf) {
         // OK
         // TODO tile world convention, use lynx rules
     }
+    else if (magic === 0x0003aaac) {
+        // OK
+        // TODO add in ice block i guess???
+    }
     else {
         throw new Error(`Unrecognized magic number ${magic.toString(16)}`);
     }
@@ -374,3 +454,256 @@ export function parse_game(buf) {
 
     return game;
 }
+
+export class CCLEncodingErrors extends util.LLError {
+    constructor(errors) {
+        super("Failed to encode level as CCL");
+        this.errors = errors;
+    }
+}
+
+export function synthesize_level(stored_level) {
+    let errors = [];
+    if (stored_level.size_x !== 32) {
+        errors.push(`Level width must be 32, not ${stored_level.size_x}`);
+    }
+    if (stored_level.size_y !== 32) {
+        errors.push(`Level width must be 32, not ${stored_level.size_y}`);
+    }
+
+    // TODO might also want the tile world "lynx mode" magic number, or pgchip's ice block rules
+    let magic = 0x0002aaac;
+    let top_layer = [];
+    let bottom_layer = [];
+    let hint_text = null;
+    let trap_cxns = [];
+    let cloner_cxns = [];
+    let monster_coords = [];
+    let error_found_wires = false;
+    // TODO i could be a little kinder and support, say, items on terrain; do those work in mscc?  tw lynx?
+    for (let [i, cell] of stored_level.linear_cells.entries()) {
+        let [x, y] = stored_level.scalar_to_coords(i);
+        let actor = null;
+        let other = null;
+        for (let tile of cell) {
+            if (! tile)
+                continue;
+            if (tile.wire_directions || tile.wire_tunnel_directions) {
+                error_found_wires = true;
+            }
+
+            if (tile.type.layer === LAYERS.actor) {
+                actor = tile;
+            }
+            else if (tile.type.name === 'floor') {
+                // This is the default anyway, so don't count it against the number of tiles
+                continue;
+            }
+            else if (other) {
+                errors.push(`A cell can only contain one static tile, but cell (${x}, ${y}) has both ${other.type.name} and ${tile.type.name}`);
+            }
+            else {
+                other = tile;
+            }
+
+            if (tile.type.is_monster) {
+                monster_coords.push(x, y);
+            }
+        }
+
+        let actor_byte = null;
+        let other_byte = null;
+        if (actor) {
+            let rev_spec = REVERSE_TILE_ENCODING[actor.type.name];
+            if (rev_spec) {
+                // Special case: dirt blocks only have a direction when on a cloner
+                if (actor.type.name === 'dirt_block' && ! (other && other.type.name === 'cloner')) {
+                    actor_byte = rev_spec['all'];
+                }
+                else {
+                    actor_byte = rev_spec[actor.direction];
+                }
+            }
+            else {
+                errors.push(`Can't encode tile: ${actor.type.name}`);
+            }
+        }
+        if (other) {
+            let rev_spec = REVERSE_TILE_ENCODING[other.type.name];
+            if (rev_spec) {
+                // Special case: thin walls only come in one of a few configurations
+                if (other.type.name === 'thin_walls') {
+                    if (other.edges in rev_spec) {
+                        other_byte = rev_spec[other.edges];
+                    }
+                    else {
+                        errors.push(`Thin walls may only have one edge, or be a lower-right corner`);
+                    }
+                }
+                else {
+                    other_byte = rev_spec['all'];
+                }
+
+                if (other.type.name === 'hint') {
+                    if (hint_text === null) {
+                        hint_text = other.hint_text;
+                    }
+                    else if (hint_text !== other.hint_text) {
+                        errors.push(`All hints must contain the same text`);
+                    }
+                }
+
+                let cxn_target;
+                // FIXME one begins to wonder if the lady doth repeat herself
+                if (other.type.name === 'button_red') {
+                    cxn_target = 'cloner';
+                }
+                else if (other.type.name === 'button_brown') {
+                    cxn_target = 'trap';
+                }
+                if (cxn_target && i in stored_level.custom_connections) {
+                    let dest = stored_level.custom_connections[i];
+                    let dest_cell = stored_level.linear_cells[dest];
+                    if (dest_cell && dest_cell[LAYERS.terrain].type.name === cxn_target) {
+                        if (other.type.name === 'button_red') {
+                            cloner_cxns.push(x, y, ...stored_level.scalar_to_coords(dest));
+                        }
+                        else {
+                            // Traps have an extra zero!
+                            trap_cxns.push(x, y, ...stored_level.scalar_to_coords(dest), 0);
+                        }
+                    }
+                }
+            }
+            else {
+                errors.push(`Can't encode tile: ${other.type.name}`);
+            }
+        }
+
+        if (other_byte === null) {
+            other_byte = 0x00;  // floor
+        }
+
+        if (actor_byte === null) {
+            top_layer.push(other_byte);
+            bottom_layer.push(0x00);
+        }
+        else {
+            top_layer.push(actor_byte);
+            bottom_layer.push(other_byte);
+        }
+    }
+    if (error_found_wires) {
+        errors.push(`Wires are not supported`);
+    }
+
+    // TODO RLE
+    let top_layer_bytes = top_layer;
+    let bottom_layer_bytes = bottom_layer;
+
+    // Assemble metadata fields.  You'd think this would deserve a little wrapper like I have for
+    // the C2M sections, but you're wrong!
+    let metadata_blocks = [];
+    let metadata_length = 0;
+    function add_block(type, contents) {
+        let len = 2 + contents.byteLength;
+        let bytes = new Uint8Array(len);
+        // TODO this copy is annoying
+        bytes[0] = type;
+        bytes[1] = contents.byteLength;
+        bytes.set(new Uint8Array(contents), 2);
+        metadata_blocks.push(bytes);
+        metadata_length += len;
+    }
+
+    // Level name
+    // TODO do something with not-ascii; does TW support utf8 or latin1 or anything?
+    add_block(3, util.bytestring_to_buffer(stored_level.title.substring(0, 63) + "\0"));
+    // Trap and cloner connections
+    function to_words(cxns) {
+        let words = new ArrayBuffer(cxns.length * 2);
+        let view = new DataView(words);
+        for (let [i, val] of cxns.entries()) {
+            view.setUint16(i * 2, val, true);
+        }
+        return words;
+    }
+    if (trap_cxns.length > 0) {
+        add_block(4, to_words(trap_cxns));
+    }
+    if (cloner_cxns.length > 0) {
+        add_block(5, to_words(cloner_cxns));
+    }
+    // Password
+    // TODO support this for real lol
+    add_block(6, util.bytestring_to_buffer("XXXX\0"));
+    // Hint
+    // TODO tile world seems to do latin-1 (just sort of, inherently); this will do modulo on
+    // anything outside it (yyyyikes!), probably should sub with ? or something
+    if (hint_text !== null) {
+        add_block(7, util.bytestring_to_buffer(hint_text.substring(0, 127) + "\0"));
+    }
+    // EXTENSION: Author's name, if present
+    if (stored_level.author) {
+        add_block(9, util.bytestring_to_buffer(stored_level.author.substring(0, 255) + "\0"));
+    }
+    // Monster positions (dumb as hell and only used in MS mode)
+    if (monster_coords.length > 0) {
+        if (monster_coords.length > 256) {
+            errors.push(`Level has ${monster_coords.length >> 1} monsters, but MS only supports up to 128`);
+            monster_coords.length = 256;
+        }
+        add_block(10, new Uint8Array(monster_coords).buffer);
+    }
+
+    if (errors.length > 0) {
+        throw new CCLEncodingErrors(errors);
+    }
+
+    // OK, almost done, serialize for real
+    let level_length = (
+        10 +        // level header
+        2 + top_layer_bytes.length +
+        2 + bottom_layer_bytes.length +
+        2 + metadata_length
+    );
+    let total_length = (
+        6 +             // game header
+        level_length
+    );
+    let ret = new ArrayBuffer(total_length);
+    let array = new Uint8Array(ret);
+    let view = new DataView(ret);
+    view.setUint32(0, magic, true);
+    view.setUint16(4, 1, true);  // level count, teehee
+
+    let p = 6;
+    view.setUint16(p, level_length - 2, true);  // doesn't include this field
+    view.setUint16(p + 2, 1, true);  // level number
+    view.setUint16(p + 4, stored_level.time_limit, true);
+    view.setUint16(p + 6, stored_level.chips_required || 0, true);  // FIXME
+    view.setUint16(p + 8, 1, true);  // always 1?  indicates compressed map data?
+    p += 10;
+
+    // Map data
+    view.setUint16(p, top_layer_bytes.length, true);
+    array.set(new Uint8Array(top_layer_bytes), p + 2);
+    p += 2 + top_layer_bytes.length;
+    view.setUint16(p, bottom_layer_bytes.length, true);
+    array.set(new Uint8Array(bottom_layer_bytes), p + 2);
+    p += 2 + bottom_layer_bytes.length;
+
+    // Metadata
+    view.setUint16(p, metadata_length, true);
+    p += 2;
+    for (let block of metadata_blocks) {
+        array.set(block, p);
+        p += block.byteLength;
+    }
+
+    if (p !== total_length) {
+        console.error("Something has gone very awry:", total_length, p);
+    }
+
+    return ret;
+}

js/format-tws.js

@@ -0,0 +1,134 @@
+import { DIRECTIONS, INPUT_BITS } from './defs.js';
+import * as format_base from './format-base.js';
+
+
+const TW_DIRECTION_TO_INPUT_BITS = [
+    INPUT_BITS.up,
+    INPUT_BITS.left,
+    INPUT_BITS.down,
+    INPUT_BITS.right,
+    INPUT_BITS.up | INPUT_BITS.left,
+    INPUT_BITS.down | INPUT_BITS.left,
+    INPUT_BITS.up | INPUT_BITS.right,
+    INPUT_BITS.down | INPUT_BITS.right,
+];
+
+export function parse_solutions(bytes) {
+    let buf;
+    if (bytes.buffer) {
+        buf = bytes.buffer;
+    }
+    else {
+        buf = bytes;
+        bytes = new Uint8Array(buf);
+    }
+    let view = new DataView(buf);
+    let magic = view.getUint32(0, true);
+    if (magic !== 0x999b3335)
+        return;
+
+    // 1 for lynx, 2 for ms; also extended to 3 for cc2, 4 for ll
+    let ruleset = bytes[4];
+    let extra_bytes = bytes[7];
+
+    let ret = {
+        ruleset: ruleset,
+        levels: [],
+    };
+
+    let p = 8 + extra_bytes;
+    let is_first = true;
+    while (p < buf.byteLength) {
+        let len = view.getUint32(p, true);
+        p += 4;
+        if (len === 0xffffffff)
+            break;
+
+        if (len === 0) {
+            // Empty, do nothing
+        }
+        else if (len < 6) {
+            // This should never happen
+            // TODO gripe?
+        }
+        else if (bytes[p] === 0 && bytes[p + 1] === 0 && bytes[p + 2] === 0 &&
+            bytes[p + 3] === 0 && bytes[p + 5] === 0 && bytes[p + 6] === 0)
+        {
+            // This record is special and contains the name of the set; it's optional but, if present, must be first
+            if (! is_first) {
+                // TODO gripe?
+            }
+        }
+        else if (len === 6) {
+            // Short record; password only, no replay
+        }
+        else {
+            // Long record
+            let number = view.getUint16(p, true);
+            // 2-5: password, don't care
+            // 6: flags, always zero
+            let initial_state = bytes[p + 7];
+            let step_parity = initial_state >> 3;
+            let initial_rff = ['north', 'west', 'south', 'east'][initial_state & 0x7];
+            // In CC2 replays, the initial RFF direction is the one you'll actually start with;
+            // however, in Lynx, the direction is rotated BEFORE it takes effect, so to compensate
+            // we have to rotate this once ahead of time
+            initial_rff = DIRECTIONS[initial_rff].right;
+            let initial_rng = view.getUint32(p + 8, true);
+            let total_duration = view.getUint32(p + 12, true);
+
+            // TODO split this off though
+            let inputs = [];
+            let q = p + 16;
+            while (q < p + len) {
+                // There are four formats for packing solutions, identified by the lowest two bits,
+                // except that format 3 is actually two formats, don't ask
+                let fmt = bytes[q] & 0x3;
+                let fmt2 = (bytes[q] >> 4) & 0x1;
+                if (fmt === 0) {
+                    let val = bytes[q];
+                    q += 1;
+                    let input1 = TW_DIRECTION_TO_INPUT_BITS[(val >> 2) & 0x3];
+                    let input2 = TW_DIRECTION_TO_INPUT_BITS[(val >> 4) & 0x3];
+                    let input3 = TW_DIRECTION_TO_INPUT_BITS[(val >> 6) & 0x3];
+                    inputs.push(
+                        0, 0, 0, input1,
+                        0, 0, 0, input2,
+                        0, 0, 0, input3,
+                    );
+                }
+                else if (fmt === 1 || fmt === 2 || (fmt === 3 && fmt2 === 0)) {
+                    let val;
+                    if (fmt === 1) {
+                        val = bytes[q];
+                        q += 1;
+                    }
+                    else if (fmt === 2) {
+                        val = view.getUint16(q, true);
+                        q += 2;
+                    }
+                    else {
+                        val = view.getUint32(q, true);
+                        q += 4;
+                    }
+                    let input = TW_DIRECTION_TO_INPUT_BITS[(val >> 2) & 0x7];
+                    let duration = val >> 5;
+                    for (let i = 0; i < duration; i++) {
+                        inputs.push(0);
+                    }
+                    inputs.push(input);
+                }
+                else {  // 3-1
+                    // variable-size and only needed for ms so let's just hope not
+                    throw new Error;
+                }
+            }
+
+            ret.levels[number - 1] = new format_base.Replay(initial_rff, 0, inputs, step_parity, initial_rng);
+        }
+
+        is_first = false;
+        p += len;
+    }
+    return ret;
+}

js/headless/bulktest.mjs

@@ -0,0 +1,474 @@
+import { compat_flags_for_ruleset } from '../defs.js';
+import { Level } from '../game.js';
+import * as format_c2g from '../format-c2g.js';
+import * as format_dat from '../format-dat.js';
+import * as format_tws from '../format-tws.js';
+import * as util from '../util.js';
+
+import { argv, exit, stderr, stdout } from 'process';
+import { opendir, readFile, stat } from 'fs/promises';
+import { performance } from 'perf_hooks';
+
+// TODO arguments:
+// - custom pack to test, possibly its solutions, possibly its ruleset (or default to steam-strict/lynx)
+// - filter existing packs
+// - verbose: ?
+// - quiet: hide failure reasons
+// - support for xfails somehow?
+// TODO use this for a test suite
+
+export class LocalDirectorySource extends util.FileSource {
+    constructor(root) {
+        super();
+        this.root = root;
+        this.files = {};
+        this._loaded_promise = this._scan_dir('/');
+    }
+
+    async _scan_dir(path) {
+        let dir = await opendir(this.root + path);
+        for await (let dirent of dir) {
+            if (dirent.isDirectory()) {
+                await this._scan_dir(path + dirent.name + '/');
+            }
+            else {
+                let filepath = path + dirent.name;
+                this.files[filepath.toLowerCase()] = filepath;
+                if (this.files.size > 2000)
+                    throw `way, way too many files in local directory source ${this.root}`;
+            }
+        }
+    }
+
+    async get(path) {
+        let realpath = this.files[path.toLowerCase()];
+        if (realpath) {
+            return (await readFile(this.root + realpath)).buffer;
+        }
+        else {
+            throw new Error(`No such file: ${path}`);
+        }
+    }
+}
+
+function pad(s, n) {
+    return s.substring(0, n).padEnd(n, " ");
+}
+
+const RESULT_TYPES = {
+    skipped: {
+        color: "\x1b[90m",
+        symbol: "-",
+    },
+    'no-replay': {
+        color: "\x1b[90m",
+        symbol: "0",
+    },
+    success: {
+        color: "\x1b[92m",
+        symbol: ".",
+    },
+    early: {
+        color: "\x1b[96m",
+        symbol: "?",
+    },
+    failure: {
+        color: "\x1b[91m",
+        symbol: "#",
+    },
+    'short': {
+        color: "\x1b[93m",
+        symbol: "#",
+    },
+    error: {
+        color: "\x1b[95m",
+        symbol: "X",
+    },
+};
+const ANSI_RESET = "\x1b[39m";
+
+async function test_pack(pack, ruleset, level_filter = null) {
+    let dummy_sfx = {
+        set_player_position() {},
+        play() {},
+        play_once() {},
+    };
+    let compat = compat_flags_for_ruleset(ruleset);
+
+    // TODO factor out the common parts maybe?
+    stdout.write(pad(`${pack.title} (${ruleset})`, 20) + " ");
+    let num_levels = pack.level_metadata.length;
+    let num_passed = 0;
+    let num_missing = 0;
+    let total_tics = 0;
+    let t0 = performance.now();
+    let last_pause = t0;
+    let failures = [];
+    for (let i = 0; i < num_levels; i++) {
+        let stored_level, level;
+        let level_start_time = performance.now();
+        let record_result = (token, short_status, include_canvas, comment) => {
+            let result_stuff = RESULT_TYPES[token];
+            stdout.write(result_stuff.color + result_stuff.symbol);
+            if (token === 'failure' || token === 'short' || token === 'error') {
+                failures.push({
+                    token,
+                    short_status,
+                    comment,
+                    level,
+                    stored_level,
+                    index: i,
+                    fail_reason: level ? level.fail_reason : null,
+                    time_elapsed: performance.now() - level_start_time,
+                    time_expected: stored_level ? stored_level.replay.duration / 20 : null,
+                    title: stored_level ? stored_level.title : "[error]",
+                    time_simulated: level ? level.tic_counter / 20 : null,
+                });
+            }
+            if (level) {
+                /*
+                    mk('td.-clock', util.format_duration(level.tic_counter / TICS_PER_SECOND)),
+                    mk('td.-delta', util.format_duration((level.tic_counter - stored_level.replay.duration) / TICS_PER_SECOND, 2)),
+                    mk('td.-speed', ((level.tic_counter / TICS_PER_SECOND) / (performance.now() - level_start_time) * 1000).toFixed(2) + '×'),
+                */
+            }
+            else {
+            }
+
+            // FIXME allegedly it's possible to get a canvas working in node...
+            /*
+            if (include_canvas && level) {
+                try {
+                    let tileset = this.conductor.choose_tileset_for_level(level.stored_level);
+                    this.renderer.set_tileset(tileset);
+                    let canvas = mk('canvas', {
+                        width: Math.min(this.renderer.canvas.width, level.size_x * tileset.size_x),
+                        height: Math.min(this.renderer.canvas.height, level.size_y * tileset.size_y),
+                    });
+                    this.renderer.set_level(level);
+                    this.renderer.set_active_player(level.player);
+                    this.renderer.draw();
+                    canvas.getContext('2d').drawImage(
+                        this.renderer.canvas, 0, 0,
+                        this.renderer.canvas.width, this.renderer.canvas.height);
+                    tbody.append(mk('tr', mk('td.-full', {colspan: 5}, canvas)));
+                }
+                catch (e) {
+                    console.error(e);
+                    tbody.append(mk('tr', mk('td.-full', {colspan: 5},
+                        `Internal error while trying to capture screenshot: ${e}`)));
+                }
+            }
+            */
+
+            if (level) {
+                total_tics += level.tic_counter;
+            }
+        };
+
+        if (level_filter && ! level_filter.has(i + 1)) {
+            record_result('skipped', "Skipped");
+            continue;
+        }
+
+        try {
+            stored_level = pack.load_level(i);
+            if (! stored_level.has_replay) {
+                record_result('no-replay', "No replay");
+                num_missing += 1;
+                continue;
+            }
+
+            // TODO? this.current_status.textContent = `Testing level ${i + 1}/${num_levels} ${stored_level.title}...`;
+
+            let replay = stored_level.replay;
+            level = new Level(stored_level, compat);
+            level.sfx = dummy_sfx;
+            level.undo_enabled = false; // slight performance boost
+            replay.configure_level(level);
+
+            while (true) {
+                let input = replay.get(level.tic_counter);
+                level.advance_tic(input);
+
+                if (level.state === 'success') {
+                    if (level.tic_counter < replay.duration - 10) {
+                        // Early exit is dubious (e.g. this happened sometimes before multiple
+                        // players were implemented correctly)
+                        record_result('early', "Won early", true);
+                    }
+                    else {
+                        record_result('success', "Won");
+                    }
+                    num_passed += 1;
+                    break;
+                }
+                else if (level.state === 'failure') {
+                    record_result('failure', "Lost", true);
+                    break;
+                }
+                else if (level.tic_counter >= replay.duration + 220) {
+                    // This threshold of 11 seconds was scientifically calculated by noticing that
+                    // the TWS of Southpole runs 11 seconds past its last input
+                    record_result('short', "Out of input", true);
+                    break;
+                }
+
+                if (level.tic_counter % 20 === 1) {
+                    // XXX
+                    /*
+                    if (handle.cancel) {
+                        record_result('interrupted', "Interrupted");
+                        this.current_status.textContent = `Interrupted on level ${i + 1}/${num_levels}; ${num_passed} passed`;
+                        return;
+                    }
+                    */
+
+                    // Don't run for more than 100ms at a time, to avoid janking the browser...
+                    // TOO much.  I mean, we still want it to reflow the stuff we've added, but
+                    // we also want to be pretty aggressive so this finishes quickly
+                    // XXX unnecessary headless
+                    /*
+                    let now = performance.now();
+                    if (now - last_pause > 100) {
+                        await util.sleep(4);
+                        last_pause = now;
+                    }
+                    */
+                }
+            }
+        }
+        catch (e) {
+            console.error(e);
+            // FIXME this does not seem to work
+            record_result(
+                'error', "Error", true,
+                `Replay failed due to internal error (see console for traceback): ${e}`);
+        }
+    }
+
+    let total_real_elapsed = (performance.now() - t0) / 1000;
+
+    stdout.write(`${ANSI_RESET} ${num_passed}/${num_levels - num_missing}\n`);
+    for (let failure of failures) {
+        let short_status = failure.short_status;
+        if (failure.token === 'failure') {
+            short_status += ": ";
+            short_status += failure.fail_reason;
+        }
+
+        let parts = [
+            String(failure.index + 1).padStart(5),
+            pad(failure.title.replace(/[\r\n]+/, " "), 32),
+            RESULT_TYPES[failure.token].color + pad(short_status, 20) + ANSI_RESET,
+        ];
+        if (failure.time_simulated !== null) {
+            parts.push("ran for" + util.format_duration(failure.time_simulated).padStart(6, " "));
+        }
+        if (failure.token === 'failure') {
+            parts.push("  with" + util.format_duration(failure.time_expected - failure.time_simulated).padStart(6, " ") + " still to go");
+        }
+        stdout.write(parts.join(" ") + "\n");
+    }
+
+    return {
+        num_passed,
+        num_missing,
+        num_failed: num_levels - num_passed - num_missing,
+        time_elapsed: total_real_elapsed,
+        time_simulated: total_tics / 20,
+    };
+}
+
+async function _scan_source(source) {
+    // FIXME copied wholesale from Splash.search_multi_source; need a real filesystem + searching api!
+
+    // TODO not entiiirely kosher, but not sure if we should have an api for this or what
+    if (source._loaded_promise) {
+        await source._loaded_promise;
+    }
+
+    let paths = Object.keys(source.files);
+    // TODO should handle having multiple candidates, but this is good enough for now
+    paths.sort((a, b) => a.length - b.length);
+    for (let path of paths) {
+        let m = path.match(/[.]([^./]+)$/);
+        if (! m)
+            continue;
+
+        let ext = m[1];
+        // TODO this can't load an individual c2m, hmmm
+        if (ext === 'c2g') {
+            let buf = await source.get(path);
+            //await this.conductor.parse_and_load_game(buf, source, path);
+            // FIXME and this is from parse_and_load_game!!
+            let dir;
+            if (! path.match(/[/]/)) {
+                dir = '';
+            }
+            else {
+                dir = path.replace(/[/][^/]+$/, '');
+            }
+            return await format_c2g.parse_game(buf, source, dir);
+        }
+    }
+    // TODO else...?  complain we couldn't find anything?  list what we did find??  idk
+}
+
+// -------------------------------------------------------------------------------------------------
+
+const USAGE = `\
+Usage: bulktest.mjs [OPTION]... [FILE]...
+Runs replays for the given level packs and report results.
+With no FILE given, default to the built-in copy of CC2LP1.
+
+Arguments may be repeated, and apply to any subsequent pack, so different packs
+may be run with different compat modes.
+  -c            compatibility mode; one of
+                  lexy (default), steam, steam-strict, lynx, ms
+  -r            path to a file containing replays; for CCL/DAT packs, which
+                  don't support built-in replays, this must be a TWS file
+  -l            level range to play back; either 'all' or a string like '1-4,10'
+  -f            force the next argument to be interpreted as a file path, if for
+                    some perverse reason you have a level file named '-c'
+  -h, --help    ignore other arguments and show this message
+
+Supports the same filetypes as Lexy's Labyrinth: DAT/CCL, C2M, or a directory
+containing a C2G.
+`;
+class ArgParseError extends Error {}
+function parse_level_range(string) {
+    if (string === 'all') {
+        return null;
+    }
+
+    let res = new Set;
+    let parts = string.split(/,/);
+    for (let part of parts) {
+        let endpoints = part.match(/^(\d+)(?:-(\d+))?$/);
+        if (endpoints === null)
+            throw new ArgParseError(`Bad syntax in level range: ${part}`);
+        let a = parseInt(endpoints[1], 10);
+        let b = endpoints[2] === undefined ? a : parseInt(endpoints[2], 10);
+        if (a > b)
+            throw new ArgParseError(`Backwards span in level range: ${part}`);
+        for (let n = a; n <= b; n++) {
+            res.add(n);
+        }
+    }
+
+    return res;
+}
+function parse_args() {
+    // Parse arguments
+    let test_template = {
+        ruleset: 'lexy',
+        solutions_path: null,
+        level_filter: null,
+    };
+    let tests = [];
+
+    try {
+        let i;
+        let next_arg = () => {
+            i += 1;
+            if (i >= argv.length)
+                throw new ArgParseError(`Missing argument after ${argv[i - 1]}`);
+            return argv[i];
+        };
+        for (i = 2; i < argv.length; i++) {
+            let arg = argv[i];
+            if (arg === '-h' || arg === '--help') {
+                stdout.write(USAGE);
+                exit(0);
+            }
+
+            if (arg === '-c') {
+                let ruleset = next_arg();
+                if (['lexy', 'steam', 'steam-strict', 'lynx', 'ms'].indexOf(ruleset) === -1)
+                    throw new ArgParseError(`Unrecognized compat mode: ${ruleset}`);
+                test_template.ruleset = ruleset;
+            }
+            else if (arg === '-r') {
+                test_template.solutions_path = next_arg();
+            }
+            else if (arg === '-l') {
+                test_template.level_filter = parse_level_range(next_arg());
+            }
+            else if (arg === '-f') {
+                tests.push({ pack_path: next_arg(), ...test_template });
+            }
+            else {
+                tests.push({ pack_path: arg, ...test_template });
+            }
+        }
+    }
+    catch (e) {
+        if (e instanceof ArgParseError) {
+            stderr.write(e.message);
+            stderr.write("\n");
+            exit(2);
+        }
+    }
+
+    if (tests.length === 0) {
+        tests.push({ pack_path: 'levels/CC2LP1.zip', ...test_template });
+    }
+
+    return tests;
+}
+
+async function main() {
+    let tests = parse_args();
+
+    let overall = {
+        num_passed: 0,
+        num_missing: 0,
+        num_failed: 0,
+        time_elapsed: 0,
+        time_simulated: 0,
+    };
+    for (let testdef of tests) {
+        let pack;
+        if ((await stat(testdef.pack_path)).isDirectory()) {
+            let source = new LocalDirectorySource(testdef.pack_path);
+            pack = await _scan_source(source);
+        }
+        else {
+            let pack_data = await readFile(testdef.pack_path);
+            if (testdef.pack_path.match(/[.]zip$/)) {
+                let source = new util.ZipFileSource(pack_data.buffer);
+                pack = await _scan_source(source);
+            }
+            else {
+                pack = format_dat.parse_game(pack_data.buffer);
+
+                let solutions_data = await readFile(testdef.solutions_path);
+                let solutions = format_tws.parse_solutions(solutions_data.buffer);
+                pack.level_replays = solutions.levels;
+            }
+        }
+
+        if (! pack.title) {
+            let match = testdef.pack_path.match(/(?:^|\/)([^/.]+)(?:\..*)?\/?$/);
+            if (match) {
+                pack.title = match[1];
+            }
+            else {
+                pack.title = testdef.pack_path;
+            }
+        }
+
+        let result = await test_pack(pack, testdef.ruleset, testdef.level_filter);
+        for (let key of Object.keys(overall)) {
+            overall[key] += result[key];
+        }
+    }
+
+    let num_levels = overall.num_passed + overall.num_failed + overall.num_missing;
+    stdout.write("\n");
+    stdout.write(`${overall.num_passed}/${num_levels} = ${(overall.num_passed / num_levels * 100).toFixed(1)}% passed (${overall.num_failed} failed, ${overall.num_missing} missing replay)\n`);
+    stdout.write(`Simulated ${util.format_duration(overall.time_simulated)} of game time in ${util.format_duration(overall.time_elapsed)}, speed of ${(overall.time_simulated / overall.time_elapsed).toFixed(1)}×\n`);
+
+}
+main();

js/main-base.js

@@ -1,4 +1,4 @@
-import { mk, mk_svg, walk_grid } from './util.js';
+import { mk, mk_svg } from './util.js';
 
 // Superclass for the main display modes: the player, the editor, and the splash screen
 export class PrimaryView {
@@ -24,6 +24,8 @@ export class PrimaryView {
         this.root.setAttribute('hidden', '');
         this.active = false;
     }
+
+    reload_options(options) {}
 }
 
 // Stackable modal overlay of some kind, usually a dialog
@@ -31,22 +33,31 @@ export class Overlay {
     constructor(conductor, root) {
         this.conductor = conductor;
         this.root = root;
+        // Make the dialog itself focusable; this makes a lot of stuff easier, like ensuring that
+        // pressing Esc always has a viable target
+        this.root.tabIndex = 0;
 
-        // Don't propagate clicks on the root element, so they won't trigger a
-        // parent overlay's automatic dismissal
+        // Don't propagate clicks on the root element, so they won't trigger a parent overlay's
+        // automatic dismissal
         this.root.addEventListener('click', ev => {
             ev.stopPropagation();
         });
-        // Block any window-level key handlers from firing when we type
+        // Don't propagate keys, either.  This is only a partial solution (for when something within
+        // the dialog has focus), but open() adds another handler to block keys more aggressively
         this.root.addEventListener('keydown', ev => {
             ev.stopPropagation();
+
+            if (ev.key === 'Escape') {
+                this.close();
+            }
         });
     }
 
     open() {
-        // FIXME ah, but keystrokes can still go to the game, including
-        // spacebar to begin it if it was waiting.  how do i completely disable
-        // an entire chunk of the page?
+        if (this.root.isConnected) {
+            this.close();
+        }
+
         if (this.conductor.player.state === 'playing') {
             this.conductor.player.set_state('paused');
         }
@@ -59,11 +70,87 @@ export class Overlay {
             this.close();
         });
 
+        // Start with the overlay itself focused
+        this.root.focus();
+
+        // While this dialog is open, keys should not reach the rest of the document, and you should
+        // not be able to tab your way out of it.  This is a rough implementation of that.
+        // Note that focusin bubbles, but focus doesn't.  Also, focusin happens /just before/ an
+        // element receives focus, not afterwards, but that doesn't seem to affect this.
+        this.focusin_handler = ev => {
+            // If we're no longer visible at all, remove this event handler
+            if (! this.root.isConnected) {
+                this._remove_global_event_handlers();
+                return;
+            }
+            // If we're not the topmost overlay, do nothing
+            if (this.root.parentNode.nextElementSibling)
+                return;
+
+            // No problem if the focus is within the dialog, OR on the root <html> element
+            if (ev.target === document.documentElement || this.root.contains(ev.target)) {
+                this.last_focused = ev.target;
+                return;
+            }
+
+            // Otherwise, focus is trying to escape!  Put a stop to that.
+            // Focus was probably moved with tab or shift-tab.  We should be the last element in the
+            // document, so tabbing off the end of us should go to browser UI.  Shift-tabbing back
+            // beyond the start of a document usually goes to the root (and after that, browser UI
+            // again).  Thus, there are only two common cases here: if the last valid focus was on
+            // the document root, they must be tabbing forwards, so focus our first element; if the
+            // last valid focus was within us, they must be tabbing backwards, so focus the root.
+            if (this.last_focused === document.documentElement) {
+                this.root.focus();
+                this.last_focused = this.root;
+            }
+            else {
+                document.documentElement.focus();
+                this.last_focused = document.documentElement;
+            }
+        };
+        window.addEventListener('focusin', this.focusin_handler);
+
+        // Block any keypresses attempting to go to an element outside the dialog
+        this.keydown_handler = ev => {
+            // If we're no longer visible at all, remove this event handler
+            if (! this.root.isConnected) {
+                this._remove_global_event_handlers();
+                return;
+            }
+            // If we're not the topmost overlay, do nothing
+            if (this.root.parentNode.nextElementSibling)
+                return;
+
+            // Note that if the target is the window itself, contains() will explode
+            if (! (ev.target instanceof Node && this.root.contains(ev.target))) {
+                ev.stopPropagation();
+            }
+        };
+        // Use capture, which runs before any other event handler
+        window.addEventListener('keydown', this.keydown_handler, true);
+
+        // Block mouse movement as well
+        overlay.addEventListener('mousemove', ev => {
+            ev.stopPropagation();
+        });
+
         return overlay;
     }
 
+    _remove_global_event_handlers() {
+        window.removeEventListener('focusin', this.focusin_handler);
+        window.removeEventListener('keydown', this.keydown_handler, true);
+    }
+
     close() {
+        this._remove_global_event_handlers();
         this.root.closest('.overlay').remove();
+        if (document.activeElement) {
+            // The active element is almost certainly either the dialog or a control within it,
+            // which is useless as a focus target, so blur it and let the page have focus
+            document.activeElement.blur();
+        }
     }
 }
 
@@ -77,6 +164,59 @@ export class TransientOverlay extends Overlay {
     }
 }
 
+export class MenuOverlay extends TransientOverlay {
+    constructor(conductor, items, make_label, onclick) {
+        super(conductor, mk('ol.popup-menu'));
+        for (let [i, item] of items.entries()) {
+            this.root.append(mk('li', {'data-index': i}, make_label(item)));
+        }
+
+        this.root.addEventListener('click', ev => {
+            let li = ev.target.closest('li');
+            if (! li || ! this.root.contains(li))
+                return;
+
+            let i = parseInt(li.getAttribute('data-index'), 10);
+            let item = items[i];
+            onclick(item);
+            this.close();
+        });
+    }
+
+    open(relto) {
+        super.open();
+
+        let anchor = relto.getBoundingClientRect();
+        let rect = this.root.getBoundingClientRect();
+
+        // Prefer left anchoring, but use right if that would go off the screen
+        if (anchor.left + rect.width > document.body.clientWidth) {
+            this.root.style.right = `${document.body.clientWidth - anchor.right}px`;
+        }
+        else {
+            this.root.style.left = `${anchor.left}px`;
+        }
+
+        // Open vertically in whichever direction has more space (with a slight bias towards opening
+        // downwards).  If we would then run off the screen, also set the other anchor to constrain
+        // the height.
+        let top_space = anchor.top - 0;
+        let bottom_space = document.body.clientHeight - anchor.bottom;
+        if (top_space > bottom_space) {
+            this.root.style.bottom = `${document.body.clientHeight - anchor.top}px`;
+            if (rect.height > top_space) {
+                this.root.style.top = `${0}px`;
+            }
+        }
+        else {
+            this.root.style.top = `${anchor.bottom}px`;
+            if (rect.height > bottom_space) {
+                this.root.style.bottom = `${0}px`;
+            }
+        }
+    }
+}
+
 // Overlay styled like a dialog box
 export class DialogOverlay extends Overlay {
     constructor(conductor) {
@@ -98,6 +238,23 @@ export class DialogOverlay extends Overlay {
         let button = mk('button', {type: 'button'}, label);
         button.addEventListener('click', onclick);
         this.footer.append(button);
+        return button;
+    }
+
+    add_button_gap() {
+        this.footer.append(mk('div.-spacer'));
+    }
+}
+
+// Informational popup dialog
+export class AlertOverlay extends DialogOverlay {
+    constructor(conductor, message, title = "heads up") {
+        super(conductor);
+        this.set_title(title);
+        this.main.append(mk('p', {}, message));
+        this.add_button("a'ight", ev => {
+            this.close();
+        });
     }
 }
 
@@ -107,16 +264,13 @@ export class ConfirmOverlay extends DialogOverlay {
         super(conductor);
         this.set_title("just checking");
         this.main.append(mk('p', {}, message));
-        let yes = mk('button', {type: 'button'}, "yep");
-        let no = mk('button', {type: 'button'}, "nope");
-        yes.addEventListener('click', ev => {
+        this.add_button("yep", ev => {
             this.close();
             what();
         });
-        no.addEventListener('click', ev => {
+        this.add_button("nope", ev => {
             this.close();
         });
-        this.footer.append(yes, no);
     }
 }
 
@@ -131,6 +285,13 @@ export function flash_button(button) {
     }, 500);
 }
 
+export function svg_icon(name) {
+    return mk_svg(
+        'svg.svg-icon',
+        {viewBox: '0 0 16 16'},
+        mk_svg('use', {href: `#svg-icon-${name}`}));
+}
+
 export function load_json_from_storage(key) {
     return JSON.parse(window.localStorage.getItem(key));
 }

js/renderer-canvas.js

@@ -1,7 +1,39 @@
-import { DIRECTIONS, DRAW_LAYERS } from './defs.js';
+import { DIRECTIONS, LAYERS } from './defs.js';
 import { mk } from './util.js';
+import { DrawPacket } from './tileset.js';
 import TILE_TYPES from './tiletypes.js';
 
+class CanvasRendererDrawPacket extends DrawPacket {
+    constructor(renderer, ctx, perception, clock, update_progress, update_rate) {
+        super(perception, renderer.hide_logic, clock, update_progress, update_rate);
+        this.renderer = renderer;
+        this.ctx = ctx;
+        // Canvas position of the cell being drawn
+        this.x = 0;
+        this.y = 0;
+        // Offset within the cell, for actors in motion
+        this.offsetx = 0;
+        this.offsety = 0;
+        // Compatibility settings
+        this.use_cc2_anim_speed = renderer.use_cc2_anim_speed;
+        this.show_facing = renderer.show_facing;
+    }
+
+    blit(tx, ty, mx = 0, my = 0, mw = 1, mh = mw, mdx = mx, mdy = my) {
+        this.renderer.blit(this.ctx,
+            tx + mx, ty + my,
+            this.x + this.offsetx + mdx, this.y + this.offsety + mdy,
+            mw, mh);
+    }
+
+    blit_aligned(tx, ty, mx = 0, my = 0, mw = 1, mh = mw, mdx = mx, mdy = my) {
+        this.renderer.blit(this.ctx,
+            tx + mx, ty + my,
+            this.x + mdx, this.y + mdy,
+            mw, mh);
+    }
+}
+
 export class CanvasRenderer {
     constructor(tileset, fixed_size = null) {
         this.tileset = tileset;
@@ -18,16 +50,33 @@ export class CanvasRenderer {
             this.viewport_size_x = 9;
             this.viewport_size_y = 9;
         }
-        this.canvas = mk('canvas', {width: tileset.size_x * this.viewport_size_x, height: tileset.size_y * this.viewport_size_y});
-        this.canvas.style.setProperty('--viewport-width', this.viewport_size_x);
-        this.canvas.style.setProperty('--viewport-height', this.viewport_size_y);
+        this.canvas = this.constructor.make_canvas(
+            tileset.size_x * this.viewport_size_x,
+            tileset.size_y * this.viewport_size_y);
+        if (this.canvas.style) {
+            this.canvas.style.setProperty('--viewport-width', this.viewport_size_x);
+            this.canvas.style.setProperty('--viewport-height', this.viewport_size_y);
+            this.canvas.style.setProperty('--tile-width', `${tileset.size_x}px`);
+            this.canvas.style.setProperty('--tile-height', `${tileset.size_y}px`);
+        }
         this.ctx = this.canvas.getContext('2d');
         this.viewport_x = 0;
         this.viewport_y = 0;
         this.viewport_dirty = false;
         this.show_actor_bboxes = false;
+        this.show_actor_order = false;
+        this.show_facing = false;
         this.use_rewind_effect = false;
-        this.perception = 0;  // 0 normal, 1 secret eye, 2 editor
+        this.perception = 'normal';  // normal, xray, editor, palette
+        this.hide_logic = false;
+        this.update_rate = 3;
+        this.use_cc2_anim_speed = false;
+        this.active_player = null;
+    }
+
+    // This is here so command-line Node stuff can swap it out for the canvas package
+    static make_canvas(w, h) {
+        return mk('canvas', {width: w, height: h});
     }
 
     set_level(level) {
@@ -35,6 +84,10 @@ export class CanvasRenderer {
         // TODO update viewport size...  or maybe Game should do that since you might be cheating
     }
 
+    set_active_player(actor) {
+        this.active_player = actor;
+    }
+
     // Change the viewport size.  DOES NOT take effect until the next redraw!
     set_viewport_size(x, y) {
         this.viewport_size_x = x;
@@ -42,6 +95,23 @@ export class CanvasRenderer {
         this.viewport_dirty = true;
     }
 
+    set_tileset(tileset) {
+        this.tileset = tileset;
+        this.viewport_dirty = true;
+    }
+
+    get_cell_rect(x, y) {
+        let rect = this.canvas.getBoundingClientRect();
+        let scale_x = rect.width / this.canvas.width;
+        let scale_y = rect.height / this.canvas.height;
+        let tile_w = scale_x * this.tileset.size_x;
+        let tile_h = scale_y * this.tileset.size_y;
+        return new DOMRect(
+            rect.x + (x - this.viewport_x) * tile_w,
+            rect.y + (y - this.viewport_y) * tile_h,
+            tile_w, tile_h);
+    }
+
     cell_coords_from_event(ev) {
         let rect = this.canvas.getBoundingClientRect();
         let scale_x = rect.width / this.canvas.width;
@@ -51,6 +121,15 @@ export class CanvasRenderer {
         return [x, y];
     }
 
+    point_to_cell_coords(client_x, client_y) {
+        let rect = this.canvas.getBoundingClientRect();
+        let scale_x = rect.width / this.canvas.width;
+        let scale_y = rect.height / this.canvas.height;
+        let x = Math.floor((client_x - rect.x) / scale_x / this.tileset.size_x + this.viewport_x);
+        let y = Math.floor((client_y - rect.y) / scale_y / this.tileset.size_y + this.viewport_y);
+        return [x, y];
+    }
+
     real_cell_coords_from_event(ev) {
         let rect = this.canvas.getBoundingClientRect();
         let scale_x = rect.width / this.canvas.width;
@@ -60,6 +139,15 @@ export class CanvasRenderer {
         return [x, y];
     }
 
+    point_to_real_cell_coords(client_x, client_y) {
+        let rect = this.canvas.getBoundingClientRect();
+        let scale_x = rect.width / this.canvas.width;
+        let scale_y = rect.height / this.canvas.height;
+        let x = (client_x - rect.x) / scale_x / this.tileset.size_x + this.viewport_x;
+        let y = (client_y - rect.y) / scale_y / this.tileset.size_y + this.viewport_y;
+        return [x, y];
+    }
+
     // Draw to a canvas using tile coordinates
     blit(ctx, sx, sy, dx, dy, w = 1, h = w) {
         let tw = this.tileset.size_x;
@@ -70,21 +158,36 @@ export class CanvasRenderer {
             dx * tw, dy * th, w * tw, h * th);
     }
 
-    draw(tic_offset = 0) {
+    _adjust_viewport_if_dirty() {
+        if (! this.viewport_dirty)
+            return;
+
+        this.viewport_dirty = false;
+        this.canvas.width = this.tileset.size_x * this.viewport_size_x;
+        this.canvas.height = this.tileset.size_y * this.viewport_size_y;
+        if (this.canvas.style) {
+            this.canvas.style.setProperty('--viewport-width', this.viewport_size_x);
+            this.canvas.style.setProperty('--viewport-height', this.viewport_size_y);
+            this.canvas.style.setProperty('--tile-width', `${this.tileset.size_x}px`);
+            this.canvas.style.setProperty('--tile-height', `${this.tileset.size_y}px`);
+        }
+    }
+
+    draw(update_progress = 0) {
         if (! this.level) {
             console.warn("CanvasRenderer.draw: No level to render");
             return;
         }
 
-        if (this.viewport_dirty) {
-            this.viewport_dirty = false;
-            this.canvas.setAttribute('width', this.tileset.size_x * this.viewport_size_x);
-            this.canvas.setAttribute('height', this.tileset.size_y * this.viewport_size_y);
-            this.canvas.style.setProperty('--viewport-width', this.viewport_size_x);
-            this.canvas.style.setProperty('--viewport-height', this.viewport_size_y);
-        }
+        this._adjust_viewport_if_dirty();
+
+        // Compute the effective current time.  Note that this might come out negative before the
+        // game starts, because we're trying to interpolate backwards from 0, hence the Math.max()
+        let clock = (this.level.tic_counter ?? 0) + (
+            (this.level.frame_offset ?? 0) + (update_progress - 1) * this.update_rate) / 3;
+        let packet = new CanvasRendererDrawPacket(
+            this, this.ctx, this.perception, Math.max(0, clock), update_progress, this.update_rate);
 
-        let tic = (this.level.tic_counter ?? 0) + tic_offset;
         let tw = this.tileset.size_x;
         let th = this.tileset.size_y;
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -93,21 +196,11 @@ export class CanvasRenderer {
         // TODO what about levels smaller than the viewport...?  shrink the canvas in set_level?
         let xmargin = (this.viewport_size_x - 1) / 2;
         let ymargin = (this.viewport_size_y - 1) / 2;
-        let px, py;
-        // FIXME editor vs player
-        if (this.level.player) {
-            [px, py] = this.level.player.visual_position(tic_offset);
-        }
-        else {
-            [px, py] = [0, 0];
-        }
+        let [px, py] = this.level.player.visual_position(update_progress, packet.update_rate);
         // Figure out where to start drawing
         // TODO support overlapping regions better
         let x0 = px - xmargin;
         let y0 = py - ymargin;
-        // FIXME editor vs player again ugh, which is goofy since none of this is even relevant;
-        // maybe need to have a separate positioning method
-        if (this.level.stored_level) {
         for (let region of this.level.stored_level.camera_regions) {
             if (px >= region.left && px < region.right &&
                 py >= region.top && py < region.bottom)
@@ -116,7 +209,6 @@ export class CanvasRenderer {
                 y0 = Math.max(region.top, Math.min(region.bottom - this.viewport_size_y, y0));
             }
         }
-        }
         // Always keep us within the map bounds
         x0 = Math.max(0, Math.min(this.level.size_x - this.viewport_size_x, x0));
         y0 = Math.max(0, Math.min(this.level.size_y - this.viewport_size_y, y0));
@@ -140,73 +232,129 @@ export class CanvasRenderer {
         // include the tiles just outside it, so we allow this fencepost problem to fly
         let x1 = Math.min(this.level.size_x - 1, Math.ceil(x0 + this.viewport_size_x));
         let y1 = Math.min(this.level.size_y - 1, Math.ceil(y0 + this.viewport_size_y));
-        // Draw one layer at a time, so animated objects aren't overdrawn by
+        // Tiles in motion (i.e., actors) don't want to be overdrawn by neighboring tiles' terrain,
+        // so draw in three passes: everything below actors, actors, and everything above actors
         // neighboring terrain
-        // FIXME this is a bit inefficient when there are a lot of rarely-used layers; consider
-        // instead drawing everything under actors, then actors, then everything above actors?
-        for (let layer = 0; layer < DRAW_LAYERS.MAX; layer++) {
-            for (let x = xf0; x <= x1; x++) {
-                for (let y = yf0; y <= y1; y++) {
-                    for (let tile of this.level.cells[y][x]) {
-                        if (tile.type.draw_layer !== layer)
-                            continue;
+        for (let x = xf0; x <= x1; x++) {
+            for (let y = yf0; y <= y1; y++) {
+                let cell = this.level.cell(x, y);
+                for (let layer = 0; layer < LAYERS.actor; layer++) {
+                    let tile = cell[layer];
+                    if (! tile)
+                        continue;
 
-                        let vx, vy;
-                        if (tile.type.is_actor &&
-                            // FIXME kind of a hack for the editor, which uses bare tile objects
-                            tile.visual_position)
-                        {
-                            // Handle smooth scrolling
-                            [vx, vy] = tile.visual_position(tic_offset);
-                            // Round this to the pixel grid too!
-                            vx = Math.floor(vx * tw + 0.5) / tw;
-                            vy = Math.floor(vy * th + 0.5) / th;
-                        }
-                        else {
-                            // Non-actors can't move
-                            vx = x;
-                            vy = y;
-                        }
-
-                        // Note that the blit we pass to the tileset has a different signature:
-                        // blit(
-                        //     source_tile_x, source_tile_y,
-                        //     mask_x = 0, mask_y = 0, mask_width = 1, mask_height = mask_width,
-                        //     mask_dx = mask_x, mask_dy = mask_y)
-                        // This makes it easier to use in the extremely common case of drawing
-                        // part of one tile atop another tile, but still aligned to the grid.
-                        this.tileset.draw(tile, tic, (tx, ty, mx = 0, my = 0, mw = 1, mh = mw, mdx = mx, mdy = my) =>
-                            this.blit(this.ctx,
-                                tx + mx, ty + my,
-                                vx - x0 + mdx, vy - y0 + mdy,
-                                mw, mh));
-                    }
+                    packet.x = x - x0;
+                    packet.y = y - y0;
+                    this.tileset.draw(tile, packet);
                 }
             }
         }
+        for (let x = xf0; x <= x1; x++) {
+            for (let y = yf0; y <= y1; y++) {
+                let cell = this.level.cell(x, y);
+                let actor = cell[LAYERS.actor];
+                if (! actor)
+                    continue;
 
-        if (this.show_actor_bboxes && ! this.level.linear_cells) {  // FIXME dumb hack so this doesn't happen in editor
-            this.ctx.fillStyle = '#f004';
-            for (let x = xf0; x <= x1; x++) {
-                for (let y = yf0; y <= y1; y++) {
-                    let actor = this.level.cells[y][x].get_actor();
-                    if (! actor)
+                // Handle smooth scrolling
+                let [vx, vy] = actor.visual_position(update_progress, packet.update_rate);
+                // Round this to the pixel grid too!
+                vx = Math.floor(vx * tw + 0.5) / tw;
+                vy = Math.floor(vy * th + 0.5) / th;
+
+                // For blocks, perception only applies if there's something of interest underneath
+                if (this.perception !== 'normal' && actor.type.is_block &&
+                    ! cell.some(t => t && t.type.layer < LAYERS.actor && ! (
+                        t.type.name === 'floor' && (t.wire_directions | t.wire_tunnel_directions) === 0)))
+                {
+                    packet.perception = 'normal';
+                }
+                else {
+                    packet.perception = this.perception;
+                }
+
+                packet.x = x - x0;
+                packet.y = y - y0;
+                packet.offsetx = vx - x;
+                packet.offsety = vy - y;
+
+                // Draw the active player background
+                if (actor === this.active_player) {
+                    this.tileset.draw_type('#active-player-background', null, packet);
+                }
+
+                this.tileset.draw(actor, packet);
+
+                // If they killed the player, indicate as such.  The indicator has an arrow at the
+                // bottom; align that about 3/4 up the killer
+                if (actor.is_killer && '#killer-indicator' in this.tileset.layout) {
+                    this.tileset.draw_type('#killer-indicator', null, packet);
+                }
+            }
+        }
+        packet.perception = this.perception;
+        packet.offsetx = 0;
+        packet.offsety = 0;
+        for (let x = xf0; x <= x1; x++) {
+            for (let y = yf0; y <= y1; y++) {
+                let cell = this.level.cell(x, y);
+                for (let layer = LAYERS.actor + 1; layer < LAYERS.MAX; layer++) {
+                    let tile = cell[layer];
+                    if (! tile)
                         continue;
-                    let [vx, vy] = actor.visual_position(tic_offset);
-                    // Don't round to the pixel grid; we want to know if the bbox is misaligned!
-                    this.ctx.fillRect((vx - x0) * tw, (vy - y0) * th, 1 * tw, 1 * th);
+
+                    packet.x = x - x0;
+                    packet.y = y - y0;
+                    this.tileset.draw(tile, packet);
                 }
             }
         }
 
         if (this.use_rewind_effect) {
-            this.draw_rewind_effect(tic);
+            this.draw_rewind_effect(packet.clock);
+        }
+
+        // Debug overlays
+        if (this.show_actor_bboxes) {
+            this.ctx.fillStyle = '#f004';
+            for (let x = xf0; x <= x1; x++) {
+                for (let y = yf0; y <= y1; y++) {
+                    let actor = this.level.cell(x, y).get_actor();
+                    if (! actor)
+                        continue;
+                    let [vx, vy] = actor.visual_position(update_progress, packet.update_rate);
+                    // Don't round to the pixel grid; we want to know if the bbox is misaligned!
+                    this.ctx.fillRect((vx - x0) * tw, (vy - y0) * th, 1 * tw, 1 * th);
+                }
+            }
+        }
+        if (this.show_actor_order) {
+            this.ctx.fillStyle = '#fff';
+            this.ctx.strokeStyle = '#000';
+            this.ctx.lineWidth = 3;
+            this.ctx.font = '16px monospace';
+            this.ctx.textAlign = 'center';
+            this.ctx.textBaseline = 'middle';
+            for (let [n, actor] of this.level.actors.entries()) {
+                let cell = actor.cell;
+                if (! cell)
+                    continue;
+                if (cell.x < xf0 || cell.x > x1 || cell.y < yf0 || cell.y > y1)
+                    continue;
+
+                let [vx, vy] = actor.visual_position(update_progress, packet.update_rate);
+                let x = (vx + 0.5 - x0) * tw;
+                let y = (vy + 0.5 - y0) * th;
+                let label = String(this.level.actors.length - 1 - n);
+                this.ctx.strokeText(label, x, y);
+                this.ctx.fillText(label, x, y);
+            }
         }
     }
 
-    draw_rewind_effect(tic) {
+    draw_rewind_effect(clock) {
         // Shift several rows over in a recurring pattern, like a VHS, whatever that is
-        let rewind_start = tic / 20 % 1;
+        let rewind_start = clock / 20 % 1;
         for (let chunk = 0; chunk < 4; chunk++) {
             let y = Math.floor(this.canvas.height * (chunk + rewind_start) / 4);
             for (let dy = 1; dy < 5; dy++) {
@@ -218,11 +366,85 @@ export class CanvasRenderer {
         }
     }
 
-    create_tile_type_canvas(name, tile = null) {
-        let canvas = mk('canvas', {width: this.tileset.size_x, height: this.tileset.size_y});
+    // Used by the editor and map previews.  Draws a region of the level (probably a StoredLevel),
+    // assuming nothing is moving.
+    draw_static_region(x0, y0, x1, y1, destx = x0, desty = y0) {
+        this.draw_static_generic({x0, y0, x1, y1, destx, desty});
+    }
+
+    // Most generic possible form of drawing a static region; mainly useful if you want to use a
+    // different canvas or draw a custom block of cells
+    // TODO does this actually need any state at all?  could it just be, dare i ask, a function?
+    draw_static_generic({
+        x0, y0, x1, y1, destx = x0, desty = y0, cells = null, width = null,
+        ctx = this.ctx, perception = this.perception, show_facing = this.show_facing,
+    }) {
+        if (ctx === this.ctx) {
+            this._adjust_viewport_if_dirty();
+        }
+
+        width = width ?? this.level.size_x;
+        cells = cells ?? this.level.linear_cells;
+
+        let packet = new CanvasRendererDrawPacket(this, ctx, perception);
+        for (let x = x0; x <= x1; x++) {
+            for (let y = y0; y <= y1; y++) {
+                let cell = cells[y * width + x];
+                if (! cell)
+                    continue;
+
+                let seen_anything_interesting;
+                for (let tile of cell) {
+                    if (! tile)
+                        continue;
+
+                    // For actors (i.e., blocks), perception only applies if there's something
+                    // of potential interest underneath
+                    if (perception !== 'normal' && tile.type.is_block && ! seen_anything_interesting) {
+                        packet.perception = 'normal';
+                    }
+                    else {
+                        packet.perception = perception;
+                    }
+
+                    if (tile.type.layer < LAYERS.actor && ! (
+                        tile.type.name === 'floor' && (tile.wire_directions | tile.wire_tunnel_directions) === 0))
+                    {
+                        seen_anything_interesting = true;
+                    }
+
+                    // Don't draw facing arrows atop blocks, unless they're on a cloner or trap
+                    // where it matters (it's distracting in large clumps and makes it hard to see
+                    // frame arrows)
+                    packet.show_facing = show_facing;
+                    if (show_facing && tile.type.is_block) {
+                        let terrain_name = cell[LAYERS.terrain].type.name;
+                        if (! (terrain_name === 'cloner' || terrain_name === 'trap')) {
+                            packet.show_facing = false;
+                        }
+                    }
+
+                    packet.x = destx + x - x0;
+                    packet.y = desty + y - y0;
+                    this.tileset.draw(tile, packet);
+                }
+            }
+        }
+    }
+
+    // TODO one wonders why this operates on a separate canvas and we don't just make new renderers
+    // or something, or maybe make this a tileset method
+    draw_single_tile_type(name, tile = null, canvas = null, x = 0, y = 0) {
+        if (! canvas) {
+            canvas = this.constructor.make_canvas(this.tileset.size_x, this.tileset.size_y);
+        }
         let ctx = canvas.getContext('2d');
-        this.tileset.draw_type(name, tile, 0, this.perception, (tx, ty, mx = 0, my = 0, mw = 1, mh = mw, mdx = mx, mdy = my) =>
-            this.blit(ctx, tx + mx, ty + my, mdx, mdy, mw, mh));
+
+        // Individual tile types always reveal what they are
+        let packet = new CanvasRendererDrawPacket(this, ctx, 'palette');
+        packet.x = x;
+        packet.y = y;
+        this.tileset.draw_type(name, tile, packet);
         return canvas;
     }
 }

js/util.js

@@ -1,3 +1,5 @@
+import * as fflate from './vendor/fflate.js';
+
 // Base class for custom errors
 export class LLError extends Error {}
 
@@ -30,6 +32,12 @@ export function mk(tag_selector, ...children) {
     return _mk(el, children);
 }
 
+export function mk_button(label, onclick) {
+    let el = mk('button', {type: 'button'}, label);
+    el.addEventListener('click', onclick);
+    return el;
+}
+
 export const SVG_NS = 'http://www.w3.org/2000/svg';
 export function mk_svg(tag_selector, ...children) {
     let [tag, ...classes] = tag_selector.split('.');
@@ -40,6 +48,22 @@ export function mk_svg(tag_selector, ...children) {
     return _mk(el, children);
 }
 
+export function trigger_local_download(filename, blob) {
+    let url = URL.createObjectURL(blob);
+    // To download a file, um, make an <a> and click it.  Not kidding
+    let a = mk('a', {
+        href: url,
+        download: filename,
+    });
+    document.body.append(a);
+    a.click();
+    // Absolutely no idea when I'm allowed to revoke this, but surely a minute is safe
+    window.setTimeout(() => {
+        a.remove();
+        URL.revokeObjectURL(url);
+    }, 60 * 1000);
+}
+
 export function handle_drop(element, options) {
     let dropzone_class = options.dropzone_class ?? null;
     let on_drop = options.on_drop;
@@ -181,9 +205,16 @@ export function b64decode(data) {
 }
 
 export function format_duration(seconds, places = 0) {
+    let sign = '';
+    if (seconds < 0) {
+        seconds = -seconds;
+        sign = '-';
+    }
     let mins = Math.floor(seconds / 60);
     let secs = seconds % 60;
-    return `${mins}:${secs < 10 ? '0' : ''}${secs.toFixed(places)}`;
+    let rounded_secs = secs.toFixed(places);
+    // TODO hours?
+    return `${sign}${mins}:${parseFloat(rounded_secs) < 10 ? '0' : ''}${rounded_secs}`;
 }
 
 export class DelayTimer {
@@ -305,8 +336,6 @@ export function* walk_grid(x0, y0, x1, y1, min_a, min_b, max_a, max_b) {
         }
     }
 }
-window.walk_grid = walk_grid;
-// console.table(Array.from(walk_grid(13, 27.133854389190674, 12.90625, 27.227604389190674)))
 
 // Root class to indirect over where we might get files from
 // - a pool of uploaded in-memory files
@@ -315,7 +344,7 @@ window.walk_grid = walk_grid;
 // - HTTP (but only for files we choose ourselves, not arbitrary ones, due to CORS)
 // Note that where possible, these classes lowercase all filenames, in keeping with C2G's implicit
 // requirement that filenames are case-insensitive  :/
-class FileSource {
+export class FileSource {
     constructor() {}
 
     // Get a file's contents as an ArrayBuffer
@@ -405,3 +434,25 @@ export class EntryFileSource extends FileSource {
         return await file.arrayBuffer();
     }
 }
+// Zip files, using fflate
+// TODO somewhat unfortunately fflate only supports unzipping the whole thing at once, not
+// individual files as needed, but it's also pretty new so maybe later?
+export class ZipFileSource extends FileSource {
+    constructor(buf) {
+        super();
+        // TODO async?  has some setup time but won't freeze browser
+        let files = fflate.unzipSync(new Uint8Array(buf));
+        this.files = {};
+        for (let [path, file] of Object.entries(files)) {
+            this.files['/' + path.toLowerCase()] = file;
+        }
+    }
+
+    async get(path) {
+        let file = this.files[path.toLowerCase()];
+        if (! file)
+            throw new LLError(`No such file in zip: ${path}`);
+
+        return file.buffer;
+    }
+}

js/vendor/fflate.js

@@ -0,0 +1,3 @@
+// fflate 0.6.7, obtained from https://cdn.skypack.dev/fflate?min
+// original project at https://github.com/101arrowz/fflate
+var gn={},bn=function(n,r,t,e,i){var a=gn[r]||(gn[r]=URL.createObjectURL(new Blob([n],{type:"text/javascript"}))),o=new Worker(a);return o.onerror=function(f){return i(f.error,null)},o.onmessage=function(f){return i(null,f.data)},o.postMessage(t,e),o},A=Uint8Array,R=Uint16Array,nr=Uint32Array,ur=new A([0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,0,0,0,0]),lr=new A([0,0,0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,0,0]),Mr=new A([16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15]),wn=function(n,r){for(var t=new R(31),e=0;e<31;++e)t[e]=r+=1<<n[e-1];for(var i=new nr(t[30]),e=1;e<30;++e)for(var a=t[e];a<t[e+1];++a)i[a]=a-t[e]<<5|e;return[t,i]},yn=wn(ur,2),Nr=yn[0],Ir=yn[1];Nr[28]=258,Ir[258]=28;for(var mn=wn(lr,0),zn=mn[0],Qr=mn[1],Ur=new R(32768),T=0;T<32768;++T){var ir=(T&43690)>>>1|(T&21845)<<1;ir=(ir&52428)>>>2|(ir&13107)<<2,ir=(ir&61680)>>>4|(ir&3855)<<4,Ur[T]=((ir&65280)>>>8|(ir&255)<<8)>>>1}for(var V=function(n,r,t){for(var e=n.length,i=0,a=new R(r);i<e;++i)++a[n[i]-1];var o=new R(r);for(i=0;i<r;++i)o[i]=o[i-1]+a[i-1]<<1;var f;if(t){f=new R(1<<r);var h=15-r;for(i=0;i<e;++i)if(n[i])for(var s=i<<4|n[i],u=r-n[i],l=o[n[i]-1]++<<u,c=l|(1<<u)-1;l<=c;++l)f[Ur[l]>>>h]=s}else for(f=new R(e),i=0;i<e;++i)n[i]&&(f[i]=Ur[o[n[i]-1]++]>>>15-n[i]);return f},tr=new A(288),T=0;T<144;++T)tr[T]=8;for(var T=144;T<256;++T)tr[T]=9;for(var T=256;T<280;++T)tr[T]=7;for(var T=280;T<288;++T)tr[T]=8;for(var vr=new A(32),T=0;T<32;++T)vr[T]=5;var xn=V(tr,9,0),An=V(tr,9,1),Dn=V(vr,5,0),Mn=V(vr,5,1),Gr=function(n){for(var r=n[0],t=1;t<n.length;++t)n[t]>r&&(r=n[t]);return r},X=function(n,r,t){var e=r/8|0;return(n[e]|n[e+1]<<8)>>(r&7)&t},Or=function(n,r){var t=r/8|0;return(n[t]|n[t+1]<<8|n[t+2]<<16)>>(r&7)},Cr=function(n){return(n/8|0)+(n&7&&1)},$=function(n,r,t){(r==null||r<0)&&(r=0),(t==null||t>n.length)&&(t=n.length);var e=new(n instanceof R?R:n instanceof nr?nr:A)(t-r);return e.set(n.subarray(r,t)),e},Fr=function(n,r,t){var e=n.length;if(!e||t&&!t.l&&e<5)return r||new A(0);var i=!r||t,a=!t||t.i;t||(t={}),r||(r=new A(e*3));var o=function(Tr){var Dr=r.length;if(Tr>Dr){var hr=new A(Math.max(Dr*2,Tr));hr.set(r),r=hr}},f=t.f||0,h=t.p||0,s=t.b||0,u=t.l,l=t.d,c=t.m,m=t.n,p=e*8;do{if(!u){t.f=f=X(n,h,1);var g=X(n,h+1,3);if(h+=3,g)if(g==1)u=An,l=Mn,c=9,m=5;else if(g==2){var y=X(n,h,31)+257,D=X(n,h+10,15)+4,F=y+X(n,h+5,31)+1;h+=14;for(var U=new A(F),x=new A(19),v=0;v<D;++v)x[Mr[v]]=X(n,h+v*3,7);h+=D*3;for(var P=Gr(x),k=(1<<P)-1,N=V(x,P,1),v=0;v<F;){var I=N[X(n,h,k)];h+=I&15;var w=I>>>4;if(w<16)U[v++]=w;else{var S=0,B=0;for(w==16?(B=3+X(n,h,3),h+=2,S=U[v-1]):w==17?(B=3+X(n,h,7),h+=3):w==18&&(B=11+X(n,h,127),h+=7);B--;)U[v++]=S}}var G=U.subarray(0,y),Z=U.subarray(y);c=Gr(G),m=Gr(Z),u=V(G,c,1),l=V(Z,m,1)}else throw"invalid block type";else{var w=Cr(h)+4,M=n[w-4]|n[w-3]<<8,z=w+M;if(z>e){if(a)throw"unexpected EOF";break}i&&o(s+M),r.set(n.subarray(w,z),s),t.b=s+=M,t.p=h=z*8;continue}if(h>p){if(a)throw"unexpected EOF";break}}i&&o(s+131072);for(var O=(1<<c)-1,H=(1<<m)-1,j=h;;j=h){var S=u[Or(n,h)&O],Q=S>>>4;if(h+=S&15,h>p){if(a)throw"unexpected EOF";break}if(!S)throw"invalid length/literal";if(Q<256)r[s++]=Q;else if(Q==256){j=h,u=null;break}else{var W=Q-254;if(Q>264){var v=Q-257,d=ur[v];W=X(n,h,(1<<d)-1)+Nr[v],h+=d}var _=l[Or(n,h)&H],J=_>>>4;if(!_)throw"invalid distance";h+=_&15;var Z=zn[J];if(J>3){var d=lr[J];Z+=Or(n,h)&(1<<d)-1,h+=d}if(h>p){if(a)throw"unexpected EOF";break}i&&o(s+131072);for(var q=s+W;s<q;s+=4)r[s]=r[s-Z],r[s+1]=r[s+1-Z],r[s+2]=r[s+2-Z],r[s+3]=r[s+3-Z];s=q}}t.l=u,t.p=j,t.b=s,u&&(f=1,t.m=c,t.d=l,t.n=m)}while(!f);return s==r.length?r:$(r,0,s)},b=function(n,r,t){t<<=r&7;var e=r/8|0;n[e]|=t,n[e+1]|=t>>>8},cr=function(n,r,t){t<<=r&7;var e=r/8|0;n[e]|=t,n[e+1]|=t>>>8,n[e+2]|=t>>>16},Er=function(n,r){for(var t=[],e=0;e<n.length;++e)n[e]&&t.push({s:e,f:n[e]});var i=t.length,a=t.slice();if(!i)return[er,0];if(i==1){var o=new A(t[0].s+1);return o[t[0].s]=1,[o,1]}t.sort(function(F,U){return F.f-U.f}),t.push({s:-1,f:25001});var f=t[0],h=t[1],s=0,u=1,l=2;for(t[0]={s:-1,f:f.f+h.f,l:f,r:h};u!=i-1;)f=t[t[s].f<t[l].f?s++:l++],h=t[s!=u&&t[s].f<t[l].f?s++:l++],t[u++]={s:-1,f:f.f+h.f,l:f,r:h};for(var c=a[0].s,e=1;e<i;++e)a[e].s>c&&(c=a[e].s);var m=new R(c+1),p=Pr(t[u-1],m,0);if(p>r){var e=0,g=0,w=p-r,M=1<<w;for(a.sort(function(U,x){return m[x.s]-m[U.s]||U.f-x.f});e<i;++e){var z=a[e].s;if(m[z]>r)g+=M-(1<<p-m[z]),m[z]=r;else break}for(g>>>=w;g>0;){var y=a[e].s;m[y]<r?g-=1<<r-m[y]++-1:++e}for(;e>=0&&g;--e){var D=a[e].s;m[D]==r&&(--m[D],++g)}p=r}return[new A(m),p]},Pr=function(n,r,t){return n.s==-1?Math.max(Pr(n.l,r,t+1),Pr(n.r,r,t+1)):r[n.s]=t},Vr=function(n){for(var r=n.length;r&&!n[--r];);for(var t=new R(++r),e=0,i=n[0],a=1,o=function(h){t[e++]=h},f=1;f<=r;++f)if(n[f]==i&&f!=r)++a;else{if(!i&&a>2){for(;a>138;a-=138)o(32754);a>2&&(o(a>10?a-11<<5|28690:a-3<<5|12305),a=0)}else if(a>3){for(o(i),--a;a>6;a-=6)o(8304);a>2&&(o(a-3<<5|8208),a=0)}for(;a--;)o(i);a=1,i=n[f]}return[t.subarray(0,e),r]},pr=function(n,r){for(var t=0,e=0;e<r.lenLine truncated

package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}