Add AI-upscaled critter/object art as a new MDL mod type

Extends the MDL system beyond text overrides: bitmaps/<label>.json names a model/scale and resource list, and mdlp extracts each resource's frames, runs them through an ONNX Runtime CPU upscaler baked into mdlp-image, re-quantizes to the game's palette, and writes the result back - same build-time pipeline as message overrides. Adds animgallery, a standalone viewer that renders any data directory's animated resources as an HTML/GIF gallery with a checkbox-driven MDL JSON generator, and -only-changed to preview just what a mod overrides against the base game. Fixes a real data race in hacked's ChangeNotifier.hashAll() (found via go build -race causing non-deterministic resource counts), via a new numbered patch rather than editing the vendored source. Adds engine-patches/, a general-fixes counterpart to android/engine-patches/ now staged and applied to the desktop builds too (previously unpatched): a real GL_UNPACK_ROW_LENGTH stride bug, an audio error-logging improvement, and two critter-rendering fixes - mod art was losing to the base game's own re-opened resource files, and critters rendered at the wrong size/position once that was fixed, both from how the billboard renderer derives on-screen size and placement straight from bitmap pixel dimensions. Updates README.md and AGENTS.md to document engine-patches/.
2026-09-27 20:52:35 +02:00
parent 389abd7de7
commit ab2b778f44
25 changed files with 2009 additions and 35 deletions
@@ -0,0 +1,595 @@
+// Command animgallery scans a game data directory for every multi-frame
+// bitmap resource (both dedicated "Animation" descriptors, e.g. video mail,
+// and plain multi-block compound bitmaps, e.g. critter sprites - System
+// Shock uses both conventions) and renders each one as an animated GIF plus
+// an HTML index page, so they can be browsed by eye instead of guessed at
+// by resource ID.
+package main
+
+import (
+	"flag"
+	"fmt"
+	"html"
+	"image"
+	"image/color"
+	"image/gif"
+	"log"
+	"os"
+	"path/filepath"
+	"sort"
+	"strings"
+
+	"github.com/inkyblackness/hacked/ss1/content/bitmap"
+	"github.com/inkyblackness/hacked/ss1/resource"
+	"github.com/inkyblackness/hacked/ss1/world"
+	"github.com/inkyblackness/hacked/ss1/world/ids"
+)
+
+// galleryEntry describes one rendered animation for the HTML index.
+type galleryEntry struct {
+	id          resource.ID
+	lang        resource.Language
+	sourceFile  string
+	kind        string
+	frameCount  int
+	width       int
+	height      int
+	transparent bool
+	gifName     string
+}
+
+// dataDirs collects repeated -data flags, in the order given - later ones
+// take priority over earlier ones for any resource ID they both define,
+// same as System Shock's own overlay convention. This lets a mod's build
+// output (modding/dist/mods/<name>/mod/) be layered on top of the base
+// game assets to preview the combined, as-played result.
+type dataDirs []string
+
+func (d *dataDirs) String() string     { return strings.Join(*d, ",") }
+func (d *dataDirs) Set(v string) error { *d = append(*d, v); return nil }
+
+// loadDataDir merges every .res/.dat file directly inside dir into one
+// manifest entry, bypassing hacked's own fileAllowlist
+// (ss1/world/FileLoader.go): that check is only skipped when a file is
+// passed directly as the sole argument, not when given a directory to
+// scan, so a directory containing a resource file with a name it doesn't
+// recognize (like mdlp's own "unknown.res" fallback - see
+// [[project_modding_hacked_build]] memory) is otherwise silently treated
+// as if it had no resources at all. The real game engine has no such
+// restriction - it matches any .res/.dat file by extension alone
+// (engine/src/MacSrc/Modding.c's StringEndsWith), which this mirrors.
+func loadDataDir(dir string) (*world.ManifestEntry, error) {
+	entries, err := os.ReadDir(dir)
+	if err != nil {
+		return nil, err
+	}
+
+	merged := &world.ManifestEntry{Origin: []string{dir}, ID: dir}
+	found := false
+	for _, e := range entries {
+		if e.IsDir() {
+			continue
+		}
+		ext := strings.ToLower(filepath.Ext(e.Name()))
+		if ext != ".res" && ext != ".dat" {
+			continue
+		}
+		fileEntry, err := world.NewManifestEntryFrom([]string{filepath.Join(dir, e.Name())})
+		if err != nil {
+			// Not every .res/.dat file is actually resource-formatted (e.g.
+			// ambrtabl.dat is a raw lookup table) - hacked's own
+			// fileAllowlist silently protects against exactly this for
+			// canonical filenames, but bypassing it here (the whole point,
+			// for names like "unknown.res" it doesn't recognize) means we
+			// have to tolerate that ourselves instead: skip a file that
+			// doesn't parse rather than failing the whole directory over it.
+			continue
+		}
+		merged.Resources = append(merged.Resources, fileEntry.Resources...)
+		if len(fileEntry.ObjectProperties) > 0 {
+			merged.ObjectProperties = fileEntry.ObjectProperties
+		}
+		if len(fileEntry.TextureProperties) > 0 {
+			merged.TextureProperties = fileEntry.TextureProperties
+		}
+		found = true
+	}
+	if !found {
+		return nil, fmt.Errorf("no .res/.dat files found in %s", dir)
+	}
+	return merged, nil
+}
+
+func main() {
+	var dirs dataDirs
+	flag.Var(&dirs, "data", "directory with .res/.dat files - repeat to layer several, later wins (e.g. base game assets, then a built mod's mod/ folder)")
+	outDir := flag.String("out", "gallery", "directory to write index.html and every .gif into")
+	minFrames := flag.Int("min-frames", 2, "skip plain multi-block bitmaps with fewer blocks than this (Animation-type resources are always included)")
+	onlyChanged := flag.Bool("only-changed", false, "skip resources whose winning -data layer is the first one - pass a base layer followed by one or more mod layers to preview only what those later layers change, in the base layer's own colors")
+	flag.Parse()
+
+	if len(dirs) == 0 {
+		log.Fatal("-data is required (repeat it to layer several directories)")
+	}
+	absOutDir, err := filepath.Abs(*outDir)
+	if err != nil {
+		log.Fatalf("resolving -out: %v", err)
+	}
+	gifDir := filepath.Join(absOutDir, "gifs")
+	if err := os.MkdirAll(gifDir, 0o755); err != nil {
+		log.Fatal(err)
+	}
+
+	mod := world.NewMod(func([]resource.ID, []resource.ID) {}, func() {})
+	// sourceFileByKey records, per (language, id), which directory's
+	// resource "wins" after layering - the same last-one-wins rule
+	// Manifest.Filter itself uses for entries inserted in this order.
+	// sourceDirIndexByKey records the same winner as an index into dirs,
+	// for -only-changed to tell a first-layer (base) resource from one a
+	// later layer (a mod) overrides.
+	sourceFileByKey := make(map[resource.Key]string)
+	sourceDirIndexByKey := make(map[resource.Key]int)
+	for dirIndex, dir := range dirs {
+		absDir, err := filepath.Abs(dir)
+		if err != nil {
+			log.Fatalf("resolving -data %q: %v", dir, err)
+		}
+		entry, err := loadDataDir(absDir)
+		if err != nil {
+			// A mod that doesn't touch any resource file yet (e.g. an
+			// upscale mod before mdlp supports that content type) produces
+			// an empty build directory - skip it rather than aborting the
+			// whole layered scan over one contributing -data directory.
+			log.Printf("skipping -data %s: %v", absDir, err)
+			continue
+		}
+		// NewManifestEntryFrom builds entry.Resources by ranging over a Go
+		// map, so its order (and therefore which file "wins" a Selector's
+		// last-one-wins tie-break for any resource ID more than one file
+		// defines) is randomized per process run. Sort it ourselves so the
+		// same input always resolves the same way.
+		sort.Slice(entry.Resources, func(i, j int) bool { return entry.Resources[i].ID < entry.Resources[j].ID })
+		if err := mod.World().InsertEntry(mod.World().EntryCount(), entry); err != nil {
+			log.Fatalf("registering game data from %s: %v", absDir, err)
+		}
+		for _, loc := range entry.Resources {
+			for _, id := range loc.Viewer.IDs() {
+				key := resource.KeyOf(id, loc.Language, 0)
+				sourceFileByKey[key] = fmt.Sprintf("%s (%s)", loc.ID, filepath.Base(absDir))
+				sourceDirIndexByKey[key] = dirIndex
+			}
+		}
+	}
+
+	palCache := bitmap.NewPaletteCache(mod)
+	defaultPal, err := palCache.Palette(resource.KeyOf(ids.GamePalettesStart, resource.LangDefault, 0))
+	if err != nil {
+		log.Printf("warning: could not load the default game palette (%v); falling back to grayscale", err)
+	}
+
+	keys := make([]resource.Key, 0, len(sourceFileByKey))
+	for key := range sourceFileByKey {
+		if *onlyChanged && sourceDirIndexByKey[key] == 0 {
+			continue
+		}
+		keys = append(keys, key)
+	}
+	sort.Slice(keys, func(i, j int) bool {
+		if keys[i].ID != keys[j].ID {
+			return keys[i].ID < keys[j].ID
+		}
+		return keys[i].Lang < keys[j].Lang
+	})
+
+	var entries []galleryEntry
+	for _, key := range keys {
+		sourceFile := sourceFileByKey[key]
+		// Re-resolved through the layered mod, not the raw per-directory
+		// viewer, so an overriding mod's version wins here exactly like it
+		// would for the running game.
+		view, err := mod.LocalizedResources(key.Lang).Select(key.ID)
+		if err != nil {
+			continue
+		}
+
+		switch {
+		case view.ContentType() == resource.Animation:
+			entry, err := safeRenderAnimationDescriptor(mod, defaultPal, sourceFile, key.ID, key.Lang, gifDir)
+			if err != nil {
+				log.Printf("skipping animation %s (%s): %v", key.ID, sourceFile, err)
+				continue
+			}
+			entries = append(entries, entry)
+
+		case view.ContentType() == resource.Bitmap && view.BlockCount() >= *minFrames:
+			entry, err := safeRenderMultiBlockBitmap(view, defaultPal, sourceFile, key.ID, key.Lang, gifDir)
+			if err != nil {
+				log.Printf("skipping bitmap %s (%s): %v", key.ID, sourceFile, err)
+				continue
+			}
+			entries = append(entries, entry)
+		}
+	}
+
+	sort.Slice(entries, func(i, j int) bool {
+		if entries[i].id != entries[j].id {
+			return entries[i].id < entries[j].id
+		}
+		return entries[i].lang < entries[j].lang
+	})
+
+	indexPath := filepath.Join(absOutDir, "index.html")
+	if err := writeIndex(indexPath, entries); err != nil {
+		log.Fatalf("writing %s: %v", indexPath, err)
+	}
+
+	fmt.Printf("Found %d animated resource(s).\n", len(entries))
+	fmt.Printf("Index: %s\n", indexPath)
+}
+
+// decodeFrames reads every block of a compound bitmap resource as a
+// sequence of frames, each one RLE-diffed against the previous - the same
+// chaining hacked's own editor/animations/View.go uses when importing a
+// GIF, done here in reverse (decode instead of encode).
+func decodeFrames(view resource.View) ([]*bitmap.Bitmap, error) {
+	count := view.BlockCount()
+	frames := make([]*bitmap.Bitmap, 0, count)
+	var prevPixels []byte
+	for i := 0; i < count; i++ {
+		reader, err := view.Block(i)
+		if err != nil {
+			return nil, fmt.Errorf("block %d: %w", i, err)
+		}
+		bmp, err := bitmap.DecodeReferenced(reader, func(w, h int16) ([]byte, error) {
+			size := int(w) * int(h)
+			buf := make([]byte, size)
+			if len(prevPixels) == size {
+				copy(buf, prevPixels)
+			}
+			return buf, nil
+		})
+		if err != nil {
+			return nil, fmt.Errorf("block %d: %w", i, err)
+		}
+		prevPixels = bmp.Pixels
+		frames = append(frames, bmp)
+	}
+	return frames, nil
+}
+
+func paletteFor(bmp *bitmap.Bitmap, fallback bitmap.Palette) color.Palette {
+	pal := fallback
+	if bmp.Palette != nil {
+		pal = *bmp.Palette
+	}
+	return pal.ColorPalette(false)
+}
+
+func writeGIF(path string, frames []*bitmap.Bitmap, fallbackPal bitmap.Palette, delays []int) error {
+	f, err := os.Create(path)
+	if err != nil {
+		return err
+	}
+	defer f.Close()
+
+	maxWidth, maxHeight := 0, 0
+	for _, bmp := range frames {
+		if int(bmp.Header.Width) > maxWidth {
+			maxWidth = int(bmp.Header.Width)
+		}
+		if int(bmp.Header.Height) > maxHeight {
+			maxHeight = int(bmp.Header.Height)
+		}
+	}
+
+	// LoopCount: 0 means loop forever in Go's image/gif API - inverted from
+	// the raw GIF format's own NETSCAPE2.0 convention. -1 (this package's
+	// zero value) means play once, which is why these looped only once
+	// before this fix.
+	out := gif.GIF{LoopCount: 0, Config: image.Config{Width: maxWidth, Height: maxHeight}}
+	for i, bmp := range frames {
+		colorPal := paletteFor(bmp, fallbackPal)
+		rect := image.Rect(0, 0, int(bmp.Header.Width), int(bmp.Header.Height))
+		img := image.NewPaletted(rect, colorPal)
+		if len(bmp.Pixels) == len(img.Pix) {
+			copy(img.Pix, bmp.Pixels)
+		}
+		out.Image = append(out.Image, img)
+		out.Delay = append(out.Delay, delays[i])
+	}
+	return gif.EncodeAll(f, &out)
+}
+
+// safeRenderMultiBlockBitmap recovers from panics in hacked's own decode
+// code (malformed or non-image compound resources can crash rle.Decompress
+// rather than return an error) so one bad resource never aborts a scan that
+// is meant to be re-run repeatedly during modding.
+func safeRenderMultiBlockBitmap(view resource.View, fallbackPal bitmap.Palette, sourceFile string, id resource.ID, lang resource.Language, outDir string) (entry galleryEntry, err error) {
+	defer func() {
+		if r := recover(); r != nil {
+			err = fmt.Errorf("panic: %v", r)
+		}
+	}()
+	return renderMultiBlockBitmap(view, fallbackPal, sourceFile, id, lang, outDir)
+}
+
+func renderMultiBlockBitmap(view resource.View, fallbackPal bitmap.Palette, sourceFile string, id resource.ID, lang resource.Language, outDir string) (galleryEntry, error) {
+	frames, err := decodeFrames(view)
+	if err != nil {
+		return galleryEntry{}, err
+	}
+	if len(frames) == 0 {
+		return galleryEntry{}, fmt.Errorf("no frames")
+	}
+	delays := make([]int, len(frames))
+	for i := range delays {
+		delays[i] = 10 // 100ms - no explicit timing exists for this raw form
+	}
+	gifName := fmt.Sprintf("%04X_%s.gif", int(id), lang.String())
+	if err := writeGIF(filepath.Join(outDir, gifName), frames, fallbackPal, delays); err != nil {
+		return galleryEntry{}, err
+	}
+	return galleryEntry{
+		id: id, lang: lang, sourceFile: sourceFile, kind: "multi-block bitmap",
+		frameCount: len(frames),
+		width:      int(frames[0].Header.Width), height: int(frames[0].Header.Height),
+		transparent: frames[0].Header.Flags&bitmap.FlagTransparent != 0,
+		gifName:     gifName,
+	}, nil
+}
+
+// safeRenderAnimationDescriptor is safeRenderMultiBlockBitmap's counterpart
+// for the Animation-descriptor path.
+func safeRenderAnimationDescriptor(mod *world.Mod, fallbackPal bitmap.Palette, sourceFile string, id resource.ID, lang resource.Language, outDir string) (entry galleryEntry, err error) {
+	defer func() {
+		if r := recover(); r != nil {
+			err = fmt.Errorf("panic: %v", r)
+		}
+	}()
+	return renderAnimationDescriptor(mod, fallbackPal, sourceFile, id, lang, outDir)
+}
+
+func renderAnimationDescriptor(mod *world.Mod, fallbackPal bitmap.Palette, sourceFile string, id resource.ID, lang resource.Language, outDir string) (galleryEntry, error) {
+	view, err := mod.LocalizedResources(lang).Select(id)
+	if err != nil {
+		return galleryEntry{}, err
+	}
+	reader, err := view.Block(0)
+	if err != nil {
+		return galleryEntry{}, err
+	}
+	anim, err := bitmap.ReadAnimation(reader)
+	if err != nil {
+		return galleryEntry{}, err
+	}
+	if len(anim.Entries) == 0 {
+		return galleryEntry{}, fmt.Errorf("no animation entries")
+	}
+
+	lastFrame := 0
+	for _, entry := range anim.Entries {
+		if int(entry.LastFrame) > lastFrame {
+			lastFrame = int(entry.LastFrame)
+		}
+	}
+
+	var frames []*bitmap.Bitmap
+	var delays []int
+	var prevPixels []byte
+	frameIndex := 0
+	for _, entry := range anim.Entries {
+		for frameIndex <= int(entry.LastFrame) {
+			frameKey := resource.KeyOf(anim.ResourceID, lang, frameIndex)
+			frameView, err := mod.LocalizedResources(lang).Select(frameKey.ID)
+			if err != nil {
+				return galleryEntry{}, fmt.Errorf("frame %d: %w", frameIndex, err)
+			}
+			reader, err := frameView.Block(0)
+			if err != nil {
+				return galleryEntry{}, fmt.Errorf("frame %d: %w", frameIndex, err)
+			}
+			bmp, err := bitmap.DecodeReferenced(reader, func(w, h int16) ([]byte, error) {
+				size := int(w) * int(h)
+				buf := make([]byte, size)
+				if len(prevPixels) == size {
+					copy(buf, prevPixels)
+				}
+				return buf, nil
+			})
+			if err != nil {
+				return galleryEntry{}, fmt.Errorf("frame %d: %w", frameIndex, err)
+			}
+			prevPixels = bmp.Pixels
+			frames = append(frames, bmp)
+			delay := int(entry.FrameTime) / 10
+			if delay <= 0 {
+				delay = 10
+			}
+			delays = append(delays, delay)
+			frameIndex++
+		}
+	}
+	if len(frames) == 0 {
+		return galleryEntry{}, fmt.Errorf("no frames decoded")
+	}
+
+	gifName := fmt.Sprintf("%04X_%s.gif", int(id), lang.String())
+	if err := writeGIF(filepath.Join(outDir, gifName), frames, fallbackPal, delays); err != nil {
+		return galleryEntry{}, err
+	}
+	return galleryEntry{
+		id: id, lang: lang, sourceFile: sourceFile, kind: "animation descriptor",
+		frameCount: len(frames),
+		width:      int(anim.Width), height: int(anim.Height),
+		transparent: frames[0].Header.Flags&bitmap.FlagTransparent != 0,
+		gifName:     gifName,
+	}, nil
+}
+
+// contentTypeName maps a galleryEntry.kind back to the resource.ContentType
+// name mdlp will need (its own decode path differs: an "Animation"
+// descriptor's frames live at anim.ResourceID+N, a "Bitmap"'s frames are
+// just its own blocks) - see kind's assignment in renderAnimationDescriptor/
+// renderMultiBlockBitmap.
+func contentTypeName(kind string) string {
+	if kind == "animation descriptor" {
+		return "Animation"
+	}
+	return "Bitmap"
+}
+
+// mdlResourceID formats the resourceId string an MDL upscale definition
+// uses to identify one resource: a resource ID alone is not always unique -
+// e.g. 0x25 exists as a separate resource per language - so a non-Any
+// language is appended (0x25_German). The bare form (0xA54) implies
+// _Any, the language nearly everything we care about upscaling (critter
+// art, etc.) actually uses.
+func mdlResourceID(id resource.ID, lang resource.Language) string {
+	if lang == resource.LangAny {
+		return fmt.Sprintf("0x%X", int(id))
+	}
+	return fmt.Sprintf("0x%X_%s", int(id), lang.String())
+}
+
+func writeIndex(path string, entries []galleryEntry) error {
+	var b strings.Builder
+	b.WriteString("<!doctype html><html><head><meta charset=\"utf-8\"><title>System Shock animation gallery</title>")
+	b.WriteString("<style>body{font-family:sans-serif;background:#111;color:#eee}")
+	b.WriteString("#controls{position:sticky;top:0;background:#181818;padding:10px;z-index:10;border-bottom:1px solid #444}")
+	b.WriteString("#controls label{margin-right:12px}")
+	b.WriteString("#mdl-output{width:98%;font-family:monospace;font-size:12px;margin-top:8px;background:#000;color:#9f9;border:1px solid #444}")
+	b.WriteString(".card{display:inline-block;margin:8px;padding:8px;background:#222;vertical-align:top}")
+	b.WriteString(".card img{image-rendering:pixelated;background:#000;display:block}")
+	b.WriteString(".meta{font-size:12px;color:#aaa;margin-top:4px}")
+	b.WriteString(".meta label{cursor:pointer}")
+	b.WriteString("#basket{min-height:60px;background:#1a2a1a;border:1px dashed #4a6a4a;padding:8px;margin-bottom:16px}")
+	b.WriteString("#basket:empty::before{content:'(nothing selected yet - check animations below to add them here)';color:#678;font-style:italic}")
+	b.WriteString("#basket .card{background:#2a3a2a}</style></head><body>")
+
+	b.WriteString(`<div id="controls">` +
+		`<label>Model: <select id="model">` +
+		`<option>realesrgan-x4plus-anime</option>` +
+		`<option>realesrgan-x4plus</option>` +
+		`<option>realesr-animevideov3</option>` +
+		`</select></label>` +
+		`<label>Scale: <input id="scale" type="number" value="2" min="1" max="4" style="width:4em"></label>` +
+		`<button id="clear-sel" type="button">Clear selection</button>` +
+		`<br><label>Filter: <input type="text" id="search" placeholder="id, language, file, transparent..." style="width:22em"></label>` +
+		`<span id="shown-count"></span>` +
+		`<textarea id="mdl-output" rows="12" readonly placeholder="Select animations below to generate an MDL upscale definition here - copy it into modding/mods/&lt;name&gt;/upscale/&lt;label&gt;.json"></textarea>` +
+		`</div>`)
+
+	b.WriteString(`<h2>Selected (<span id="basket-count">0</span>)</h2><div id="basket"></div>`)
+
+	fmt.Fprintf(&b, "<h1>%d animated resource(s)</h1>", len(entries))
+
+	// Animation descriptors and multi-block bitmaps are genuinely distinct
+	// content types (different decode path, see contentTypeName) - grouped
+	// into separate sections rather than interleaved.
+	var animations, bitmaps []galleryEntry
+	for _, e := range entries {
+		if contentTypeName(e.kind) == "Animation" {
+			animations = append(animations, e)
+		} else {
+			bitmaps = append(bitmaps, e)
+		}
+	}
+
+	writeCards := func(group []galleryEntry, idPrefix string) {
+		for i, e := range group {
+			transparency := "opaque"
+			if e.transparent {
+				transparency = "transparent"
+			}
+			search := strings.ToLower(strings.Join([]string{
+				fmt.Sprintf("0x%x", int(e.id)), fmt.Sprintf("%d", int(e.id)),
+				e.lang.String(), e.kind, e.sourceFile,
+				fmt.Sprintf("%dx%d", e.width, e.height), transparency,
+			}, " "))
+			fmt.Fprintf(&b, "<div class=\"card\" data-search=\"%s\">", html.EscapeString(search))
+			fmt.Fprintf(&b, "<img src=\"gifs/%s\" width=\"%d\" height=\"%d\">", html.EscapeString(e.gifName), e.width*2, e.height*2)
+			fmt.Fprintf(&b, "<div class=\"meta\"><label><input type=\"checkbox\" class=\"sel\" id=\"sel-%s-%d\" data-id=\"%s\"> ",
+				idPrefix, i, html.EscapeString(mdlResourceID(e.id, e.lang)))
+			fmt.Fprintf(&b, "ID 0x%X (%d) &middot; %s</label><br>%dx%d, %d frame(s), %s &middot; %s &middot; %s</div>",
+				int(e.id), int(e.id), html.EscapeString(e.lang.String()),
+				e.width, e.height, e.frameCount, transparency, html.EscapeString(e.kind), html.EscapeString(e.sourceFile))
+			b.WriteString("</div>")
+		}
+	}
+	fmt.Fprintf(&b, "<h2>Animations (%d)</h2>", len(animations))
+	writeCards(animations, "a")
+	fmt.Fprintf(&b, "<h2>Bitmaps (%d)</h2>", len(bitmaps))
+	writeCards(bitmaps, "b")
+
+	b.WriteString(`<script>
+var basket = document.getElementById('basket');
+// Where each card lives when not selected, so unchecking it puts it back
+// in its original spot (Animations/Bitmaps section, original order)
+// instead of just appending it back at the end.
+var cardHomes = new Map();
+Array.prototype.forEach.call(document.querySelectorAll('.card'), function (card) {
+	cardHomes.set(card, { parent: card.parentNode, next: card.nextSibling });
+});
+
+function moveCard(checkbox) {
+	var card = checkbox.closest('.card');
+	if (checkbox.checked) {
+		basket.appendChild(card);
+	} else {
+		var home = cardHomes.get(card);
+		home.parent.insertBefore(card, home.next);
+	}
+	document.getElementById('basket-count').textContent = basket.children.length;
+}
+
+function updateMdl() {
+	var model = document.getElementById('model').value;
+	var scale = parseInt(document.getElementById('scale').value, 10) || 2;
+	var boxes = Array.prototype.filter.call(document.querySelectorAll('.sel'), function (b) { return b.checked; });
+	// A bare resource ID isn't always unique (e.g. 0x25 exists as a separate
+	// resource per language), so each entry here is "0x<ID>" or, when the
+	// resource's language isn't Any, "0x<ID>_<Language>" - mdlp resolves the
+	// rest (content type, etc.) from the resource itself. The MDL
+	// definition only needs what it can't derive: the shared upscale
+	// parameters, and which resources to apply them to.
+	var mdl = {
+		model: model,
+		scale: scale,
+		resources: boxes.map(function (b) { return b.dataset.id; })
+	};
+	document.getElementById('mdl-output').value = JSON.stringify(mdl, null, 2);
+}
+Array.prototype.forEach.call(document.querySelectorAll('.sel'), function (b) {
+	b.addEventListener('change', function () { moveCard(b); updateMdl(); });
+});
+document.getElementById('model').addEventListener('change', updateMdl);
+document.getElementById('scale').addEventListener('input', updateMdl);
+document.getElementById('clear-sel').addEventListener('click', function () {
+	Array.prototype.forEach.call(document.querySelectorAll('.sel'), function (b) {
+		if (b.checked) {
+			b.checked = false;
+			moveCard(b);
+		}
+	});
+	updateMdl();
+});
+updateMdl();
+
+function applyFilter() {
+	var query = document.getElementById('search').value.trim().toLowerCase();
+	var cards = document.querySelectorAll('.card');
+	var shown = 0;
+	Array.prototype.forEach.call(cards, function (card) {
+		var match = !query || card.dataset.search.indexOf(query) !== -1;
+		card.style.display = match ? '' : 'none';
+		if (match) shown++;
+	});
+	document.getElementById('shown-count').textContent = shown + ' / ' + cards.length + ' shown';
+}
+document.getElementById('search').addEventListener('input', applyFilter);
+applyFilter();
+</script>`)
+
+	b.WriteString("</body></html>")
+	return os.WriteFile(path, []byte(b.String()), 0o644)
+}