perf: build each distinct sprite image once

The game encoded 2,291 sprite PNGs as its modules loaded, and 845 of
them (37%) were an image already built: flash frames of sprites whose
flash palette matches, wear stages with no wear yet, and glyph tones
with the same colors. Each encode is a base64 PNG data URL on the main
thread behind the splash.

The data URL is now kept by the image's content, its size and every
run of pixels in paint order, so an identical image reuses the first
one's data URL. The 1,446 distinct images come out byte for byte the
same (one hash over every built source before and after), and sprite
building at load drops from about 107 ms to 87 ms in Bun, with the
encoder's own time from 56 ms to 40 ms.

Author: Tanner-Scadden

src/sprite.ts

@@ -146,17 +146,46 @@ const fillsOf = (
     ),
   )
 
+// NOTE: the size and every run in paint order, which is everything the PNG is
+// built from, so two equal keys always make the same image.
+const contentKeyOf = (
+  width: number,
+  height: number,
+  runs: ReadonlyArray<PixelRun>,
+): string => {
+  let key = `${width}x${height}`
+  for (const run of runs) {
+    key += `;${run.x},${run.y},${run.width},${run.height},${run.color}`
+  }
+  return key
+}
+
+const sourcesByContent = new Map<string, Option.Option<string>>()
+
 // NOTE: a sprite image is a PNG data URL built here from its pixel runs, not
 // an SVG. The browser makes a whole SVG document for every SVG image and
 // redraws its shapes each time a canvas draws it, which cost seconds at load
 // and nothing saved per frame over the Rect shapes. A PNG decodes once into a
-// bitmap that drawImage copies.
+// bitmap that drawImage copies. About a third of the sprites the game builds
+// come out the same as one built before (a flash frame of an all white
+// sprite, a wear stage with no wear yet, a glyph in two tones that match), so
+// each distinct image is encoded once and its data URL reused.
 const runsDataUrl = (
   width: number,
   height: number,
   runs: ReadonlyArray<PixelRun>,
-): Option.Option<string> =>
-  Option.map(fillsOf(runs), fills => pngDataUrl(width, height, fills))
+): Option.Option<string> => {
+  const key = contentKeyOf(width, height, runs)
+  const cached = sourcesByContent.get(key)
+  if (cached !== undefined) {
+    return cached
+  }
+  const built = Option.map(fillsOf(runs), fills =>
+    pngDataUrl(width, height, fills),
+  )
+  sourcesByContent.set(key, built)
+  return built
+}
 
 export const spriteDataUrl = (
   pixels: ReadonlyArray<string>,