From f37804be8df08c618f33bae6a3e6c3c1ebd9ed52 Mon Sep 17 00:00:00 2001
From: alex baldwin <ghostbaldwin@gmail.com>
Date: Sun, 19 Jul 2026 00:20:36 -0400
Subject: [PATCH 1/4] use tilesets in aseprite

---
 .gitignore                   |   4 +-
 lib.d.ts                     |  57 +++++-
 netlify/functions/counter.ts |   2 +-
 package.json                 |   9 +-
 pnpm-lock.yaml               |  17 +-
 src/_data/elsewhere.json     |   2 +-
 src/_data/icon-sources.json  |   2 +-
 src/_data/icons-16.json      |  12 +-
 src/_data/icons-32.json      |   8 +-
 src/assets/aseprite.11ty.ts  | 333 +++++++++++++++++++++++++----------
 src/assets/dice.aseprite     | Bin 528 -> 528 bytes
 src/assets/icons-16.aseprite | Bin 713 -> 937 bytes
 src/assets/icons-32.aseprite | Bin 1238 -> 1303 bytes
 13 files changed, 319 insertions(+), 127 deletions(-)

diff --git a/.gitignore b/.gitignore
index fb9831c..7b8fce0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,5 +6,5 @@ dist
 # Local Netlify folder
 .netlify
 
-
-tmp/
\ No newline at end of file
+tmp/
+./node-aseprite
\ No newline at end of file
diff --git a/lib.d.ts b/lib.d.ts
index 8a82902..079f7bc 100644
--- a/lib.d.ts
+++ b/lib.d.ts
@@ -76,7 +76,7 @@ declare module "aseprite" {
     RGBA = 32,
   }
 
-  enum ChunkType {
+  export enum ChunkType {
     PALETTE_OLD_1 = 4,
     PALETTE_OLD_2 = 17,
     LAYER = 8196,
@@ -89,6 +89,7 @@ declare module "aseprite" {
     PALETTE = 8217,
     USERDATA = 8224,
     SLICE = 8226,
+    TILESET = 8227,
   }
 
   interface FlagsBitset {
@@ -122,10 +123,11 @@ declare module "aseprite" {
     numChunks: number;
   } & KaitaiProperties<C, Frame<C, I>, Aseprite<C, I>>;
 
-  enum CelType {
+  export enum CelType {
     RAW = 0,
     LINKED = 1,
     COMPRESSED = 2,
+    COMPRESSED_TILEMAP = 3,
   }
   type CelChunkData<C, I> = {
     layerIndex: number;
@@ -150,8 +152,47 @@ declare module "aseprite" {
         pixelsCompressed: Uint8Array;
         pixels: I extends true ? Buffer : undefined;
       }
+    | {
+        type: CelType.COMPRESSED_TILEMAP;
+        tilesWidth: number;
+        tilesHeight: number;
+        bitsPerTile: number;
+        tileIdBitmask: number;
+        xFlipBitmask: number;
+        yFlipBitmask: number;
+        dFlipBitmask: number;
+        tilesCompressed: Uint8Array;
+        tiles: I extends true ? Buffer : undefined;
+      }
   ) &
     KaitaiProperties<C, Frame<C, I>, Aseprite<C, I>>;
+  type TilesetChunkData<C, I> = {
+    tilesetId: number;
+    numTiles: number;
+    tileWidth: number;
+    tileHeight: number;
+    baseIndex: number;
+    name: string;
+    pixelsCompressed: Uint8Array;
+    pixels: I extends true ? Buffer : undefined;
+  };
+  export enum LayerType {
+    IMAGE = 0,
+    GROUP = 1,
+    TILEMAP = 2,
+  }
+  type LayerChunkData = {
+    blendMode: number; // TODO enum
+    opacity: number;
+    name: string;
+  } & (
+    | { type: LayerType.IMAGE }
+    | { type: LayerType.GROUP }
+    | {
+        type: LayerType.TILEMAP;
+        tilesetIndex: number;
+      }
+  );
   type Color = { r: number; g: number; b: number };
   type Packet = { skip: number; numColors: number; colors: Color[] };
   type PaletteOldChunkData<C, I> = {
@@ -175,13 +216,17 @@ declare module "aseprite" {
   };
   type CelExtraChunk = { type: ChunkType.CEL_EXTRA };
   type UserdataChunk = { type: ChunkType.USERDATA };
-  type LayerChunk = { type: ChunkType.LAYER };
+  type LayerChunk = { type: ChunkType.LAYER; data: LayerChunkData };
   type TagsChunk = { type: ChunkType.TAGS };
   type PaletteChunk<C, I> = {
     type: ChunkType.PALETTE;
     data: PaletteChunkData<C, I>;
   };
   type MaskChunk = { type: ChunkType.MASK };
+  type TilesetChunk = {
+    type: ChunkType.TILESET;
+    data: TilesetChunkData<C, I>;
+  };
   type Chunk<C, I> = { size: number } & (
     | ColorProfileChunk
     | PaletteOld1Chunk<C, I>
@@ -193,6 +238,7 @@ declare module "aseprite" {
     | TagsChunk
     | PaletteChunk<C, I>
     | MaskChunk
+    | TilesetChunk
   ) &
     KaitaiProperties<C, Frame<C, I>, Aseprite<C, I>>;
 
@@ -201,7 +247,7 @@ declare module "aseprite" {
     chunks: Chunk<C, I>[];
   } & KaitaiProperties<C, Aseprite<C, I>, Aseprite<C, I>>;
 
-  type Aseprite<C, I> = {
+  export type Aseprite<C, I> = {
     header: Header<C>;
     frames: Frame<C, I>[];
   } & KaitaiProperties<C, null, null>;
@@ -218,6 +264,9 @@ declare module "aseprite" {
         CelChunk: {
           CelTypeEnum: typeof CelType;
         };
+        LayerChunk: {
+          TypeEnum: typeof LayerType;
+        };
       };
     };
   }
diff --git a/netlify/functions/counter.ts b/netlify/functions/counter.ts
index d4a0994..b0911e4 100644
--- a/netlify/functions/counter.ts
+++ b/netlify/functions/counter.ts
@@ -53,7 +53,7 @@ function counterTemplate(digits: string[], align: string | null) {
       </div>
       <form class="window-contents" method="POST">
         <button type="submit">
-          <img src="/assets/icons-16.png" alt="sheep" class="sprite-16">
+          <img src="/assets/icons-16.png" alt="sheep" class="sprite-16" style="object-position: -192px 0">
           <div class="counter">
             <div class="counter-count" style="--num-digits: ${digits.length}">
               ${digits
diff --git a/package.json b/package.json
index 2522e94..c1d7413 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,9 @@
 {
 	"type": "module",
 	"scripts": {
-		"start": "eleventy --config=eleventy.config.ts --serve"
+		"start": "eleventy --config=eleventy.config.ts --serve",
+		"build": "eleventy --config=eleventy.config.ts",
+		"build:aseprite": "git clone https://github.com/cubeghost/node-aseprite && cd node-aseprite && pnpm --ignore-workspace install && node ./build.js && cd .. && pnpm link ./node-aseprite"
 	},
 	"dependencies": {
 		"11ty.ts": "^0.0.7",
@@ -13,7 +15,7 @@
 		"@netlify/blobs": "^10.7.7",
 		"@netlify/functions": "^5.2.1",
 		"@upstash/redis": "^1.38.0",
-		"aseprite": "^0.3.1",
+		"aseprite": "github:cubeghost/node-aseprite",
 		"canvas": "^3.2.3",
 		"canvas-dither": "^1.0.1",
 		"d3": "^7.9.0",
@@ -40,7 +42,8 @@
 	"packageManager": "pnpm@10.33.0",
 	"pnpm": {
 		"overrides": {
-			"canvas": "^3.2.3"
+			"canvas": "^3.2.3",
+			"aseprite": "link:node-aseprite"
 		}
 	}
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 31dd8a2..dc4367e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,6 +6,7 @@ settings:
 
 overrides:
   canvas: ^3.2.3
+  aseprite: link:node-aseprite
 
 importers:
 
@@ -39,8 +40,8 @@ importers:
         specifier: ^1.38.0
         version: 1.38.0
       aseprite:
-        specifier: ^0.3.1
-        version: 0.3.1
+        specifier: link:node-aseprite
+        version: link:node-aseprite
       canvas:
         specifier: ^3.2.3
         version: 3.2.3
@@ -724,9 +725,6 @@ packages:
   asap@2.0.6:
     resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==}
 
-  aseprite@0.3.1:
-    resolution: {integrity: sha512-9wjhTFY1MJsa3a+gwDDEdKZm0XJE1wRHiHVqDYKEeu8njTi4pEM5y+XgDj0egNYUKujOd5oS9VpUE31s0WZ43g==}
-
   atomically@2.1.1:
     resolution: {integrity: sha512-P4w9o2dqARji6P7MHprklbfiArZAWvo07yW7qs3pdljb3BWr12FIB7W+p0zJiuiVsUpRO0iZn1kFFcpPegg0tQ==}
 
@@ -1275,9 +1273,6 @@ packages:
     resolution: {integrity: sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==}
     engines: {node: '>=8'}
 
-  kaitai-struct@0.9.0:
-    resolution: {integrity: sha512-mfoBu9+IGqaY3ykG1TyAy9omOAZWtheqESQOvo/HKIQVTz+gRPVCNBnhjbO+8wAQ77RD33wYvLBWmITuXIviQg==}
-
   kind-of@6.0.3:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
@@ -2317,10 +2312,6 @@ snapshots:
 
   asap@2.0.6: {}
 
-  aseprite@0.3.1:
-    dependencies:
-      kaitai-struct: 0.9.0
-
   atomically@2.1.1:
     dependencies:
       stubborn-fs: 2.0.0
@@ -2874,8 +2865,6 @@ snapshots:
 
   junk@3.1.0: {}
 
-  kaitai-struct@0.9.0: {}
-
   kind-of@6.0.3: {}
 
   kleur@4.1.5: {}
diff --git a/src/_data/elsewhere.json b/src/_data/elsewhere.json
index 09e845e..58c74df 100644
--- a/src/_data/elsewhere.json
+++ b/src/_data/elsewhere.json
@@ -26,7 +26,7 @@
   },
   {
     "label": "e-mail",
-    "sprite": "mail4",
+    "sprite": "mail",
     "url": "mailto:mail@cubegho.st"
   }
 ]
\ No newline at end of file
diff --git a/src/_data/icon-sources.json b/src/_data/icon-sources.json
index 9c067ae..f0d0653 100644
--- a/src/_data/icon-sources.json
+++ b/src/_data/icon-sources.json
@@ -105,7 +105,7 @@
     "source": "Microsoft Outlook"
   },
   {
-    "sprite": "mail4",
+    "sprite": "mail",
     "size": 16,
     "alt": "mail",
     "source": "Microsoft Outlook"
diff --git a/src/_data/icons-16.json b/src/_data/icons-16.json
index 6532b0c..7db134b 100644
--- a/src/_data/icons-16.json
+++ b/src/_data/icons-16.json
@@ -1,15 +1,15 @@
 [
-  "sheep",
   "alert",
+  "resedit",
   "document-code",
-  "mail4",
-  "suitcase-git",
   "scrapbook",
+  "document-pinned",
+  "mail",
+  "suitcase-fonts",
+  "suitcase-git",
   "globe",
   "users",
   "display",
-  "resedit",
-  "suitcase-fonts",
   "spray-paint",
-  "document-pinned"
+  "sheep"
 ]
\ No newline at end of file
diff --git a/src/_data/icons-32.json b/src/_data/icons-32.json
index 215a6e5..6f96f87 100644
--- a/src/_data/icons-32.json
+++ b/src/_data/icons-32.json
@@ -1,12 +1,12 @@
 [
-  "globe",
+  "alert",
+  "alert-open",
   "resedit",
   "resedit-open",
   "document-code",
   "document-macpaint",
-  "suitcase-fonts",
   "news",
-  "alert",
-  "alert-open",
+  "suitcase-fonts",
+  "globe",
   "bomb"
 ]
\ No newline at end of file
diff --git a/src/assets/aseprite.11ty.ts b/src/assets/aseprite.11ty.ts
index ca79cd4..a490921 100644
--- a/src/assets/aseprite.11ty.ts
+++ b/src/assets/aseprite.11ty.ts
@@ -2,6 +2,12 @@ import { readdirSync } from "node:fs";
 import fs from "node:fs/promises";
 import path from "node:path";
 import Aseprite from "aseprite";
+import type {
+  Aseprite as AsepriteDoc,
+  CelChunk,
+  PaletteChunk,
+  PaletteOld1Chunk,
+} from "aseprite";
 import sharp from "sharp";
 
 const dir = "./src/assets";
@@ -12,6 +18,7 @@ const entryPoints = readdirSync(dir, { withFileTypes: true })
 
 const ChunkTypeEnum = Aseprite.Frame.Chunk.ChunkTypeEnum;
 const CelTypeEnum = Aseprite.Frame.Chunk.CelChunk.CelTypeEnum;
+const LayerTypeEnum = Aseprite.Frame.Chunk.LayerChunk.TypeEnum;
 // https://github.com/aseprite/aseprite/blob/main/src/doc/color_mode.h#L22
 const ColorModeEnum = {
   RGB: 4,
@@ -37,103 +44,247 @@ export default class {
   }
 
   async render({ baseName }: EntrypointData) {
-    const entrypoint = path.join(dir, `${baseName}.aseprite`);
-    const file = await fs.readFile(entrypoint);
-    const ase = Aseprite.parse(file, { clean: true, inflate: true });
-    if (!ase.header) throw new Error(`missing header in ${entrypoint}`);
-
-    const depth = ase.header?.pixelFormat;
-    // https://github.com/aseprite/aseprite/blob/main/src/dio/aseprite_decoder.cpp#L60
-    const mode =
-      depth == 32
-        ? ColorModeEnum.RGB
-        : depth == 16
-          ? ColorModeEnum.GRAYSCALE
-          : ColorModeEnum.INDEXED;
-
-    if (!ase.frames) throw new Error(`missing frames in ${entrypoint}`);
-
-    const palette = ase.frames[0].chunks.find(
-      (c) =>
-        c.type === ChunkTypeEnum.PALETTE_OLD_1 ||
-        c.type === ChunkTypeEnum.PALETTE,
-    );
-    if (!palette) {
-      throw new Error(`missing palette chunk in first frame of ${entrypoint}`);
-    }
+    try {
+      const entrypoint = path.join(dir, `${baseName}.aseprite`);
+      const file = await fs.readFile(entrypoint);
+      const ase = Aseprite.parse(file, { clean: true, inflate: true });
+      if (!ase.header) throw new Error(`missing header in ${entrypoint}`);
+
+      const depth = ase.header?.pixelFormat;
+      // https://github.com/aseprite/aseprite/blob/main/src/dio/aseprite_decoder.cpp#L60
+      const mode =
+        depth == 32
+          ? ColorModeEnum.RGB
+          : depth == 16
+            ? ColorModeEnum.GRAYSCALE
+            : ColorModeEnum.INDEXED;
+
+      if (!ase.frames) throw new Error(`missing frames in ${entrypoint}`);
+
+      const oldPalette = ase.frames[0].chunks.find(
+        (c) => c.type === ChunkTypeEnum.PALETTE_OLD_1,
+      );
+      const palette =
+        ase.frames[0].chunks.find((c) => c.type === ChunkTypeEnum.PALETTE) ??
+        oldPalette;
+      if (!palette) {
+        throw new Error(
+          `missing palette chunk in first frame of ${entrypoint}`,
+        );
+      }
+
+      const frames = await Promise.all(
+        ase.frames.map(async (frame, i) => {
+          // TODO multiple layers
+          const cel = frame.chunks.find((c) => c.type === ChunkTypeEnum.CEL);
+          if (!cel) throw new Error(`missing cel chunk in ${entrypoint}`);
 
-    const frames = await Promise.all(
-      ase.frames.map(async (frame) => {
-        // TODO multiple layers
-        const cel = frame.chunks.find((c) => c.type === ChunkTypeEnum.CEL);
-        if (!cel) throw new Error(`missing cel chunk in ${entrypoint}`);
-        if (cel.data.type !== CelTypeEnum.COMPRESSED)
-          throw new Error(
-            `unsupported cel type in ${entrypoint}: ${cel.data.type}`,
-          );
-
-        let buffer: Buffer | Uint8Array = cel.data.pixels;
-        if (mode === ColorModeEnum.INDEXED) {
-          const originalBuffer = buffer;
-          buffer = new Uint8Array(originalBuffer.length * 4);
-
-          const transparentIndex = ase.header.transparentIndex;
-          const colors =
-            palette.type === ChunkTypeEnum.PALETTE_OLD_1
-              ? palette.data.packets[0].colors
-              : palette.data.entries;
-
-          for (let i = 0; i < originalBuffer.length; i++) {
-            const colorIndex = originalBuffer[i];
-            if (colorIndex === transparentIndex) {
-              buffer.set([0, 0, 0, 0], i * 4);
-            } else {
-              const color = colors[colorIndex];
-              buffer.set([color.r, color.g, color.b, 255], i * 4);
-            }
+          if (
+            cel.data.type !== CelTypeEnum.COMPRESSED &&
+            cel.data.type !== CelTypeEnum.COMPRESSED_TILEMAP
+          ) {
+            throw new Error(
+              `unsupported cel type in ${entrypoint}: ${cel.data.type}`,
+            );
           }
-        }
 
-        const image = await sharp(buffer, {
-          raw: {
-            width: cel.data.width,
-            height: cel.data.height,
-            channels: mode === ColorModeEnum.INDEXED ? 4 : mode,
+          const image =
+            cel.data.type === CelTypeEnum.COMPRESSED
+              ? await readCompressedPixels(cel, ase, palette, mode)
+              : cel.data.type === CelTypeEnum.COMPRESSED_TILEMAP
+                ? await readCompressedTilemapPixels(cel, ase, palette, mode)
+                : null;
+
+          if (!image) throw new Error("impossible");
+
+          const { info } = await image.toBuffer({ resolveWithObject: true });
+          return image.extend({
+            top: cel.data.y,
+            left: cel.data.x,
+            bottom: ase.header.height - info.height + cel.data.y,
+            right: ase.header.width - info.width + cel.data.x,
+            background: { r: 0, g: 0, b: 0, alpha: 0 },
+          });
+        }),
+      );
+
+      if (frames.length === 1) {
+        // output single frame
+        frames[0].png().toFile(`${output}/${baseName}.png`);
+      } else {
+        // create basic side-by-side spritesheet
+        const base = await sharp({
+          create: {
+            width: ase.header.width * ase.header.numFrames,
+            height: ase.header.height,
+            channels: 4,
+            background: { r: 0, g: 0, b: 0, alpha: 0 },
           },
         });
-        const { info } = await image.toBuffer({ resolveWithObject: true });
-        return image.extend({
-          top: cel.data.y,
-          left: cel.data.x,
-          bottom: ase.header.height - info.height - cel.data.y,
-          right: ase.header.width - info.width - cel.data.x,
-          background: { r: 0, g: 0, b: 0, alpha: 0 },
+
+        const inputs = await Promise.all(
+          frames.map(async (frame, i) => ({
+            input: await frame.png().toBuffer(),
+            top: 0,
+            left: i * ase.header.width,
+          })),
+        );
+        base.composite(inputs).png().toFile(`${output}/${baseName}.png`);
+      }
+    } catch (err) {
+      console.log(`Error converting ${baseName}.aseprite`);
+      throw err;
+    }
+  }
+}
+
+async function readCompressedPixels<C, I>(
+  cel: CelChunk<C, I>,
+  ase: AsepriteDoc<C, I>,
+  palette: PaletteChunk<C, I> | PaletteOld1Chunk<C, I>,
+  mode: (typeof ColorModeEnum)[keyof typeof ColorModeEnum],
+) {
+  if (cel.data.type !== CelTypeEnum.COMPRESSED) {
+    throw new Error("wrong cel format");
+  }
+
+  let buffer: Buffer | Uint8Array = cel.data.pixels!;
+  if (mode === ColorModeEnum.INDEXED) {
+    const originalBuffer = buffer;
+    buffer = new Uint8Array(originalBuffer.length * 4);
+
+    const transparentIndex = ase.header.transparentIndex;
+    const colors =
+      palette.type === ChunkTypeEnum.PALETTE_OLD_1
+        ? palette.data.packets[0].colors
+        : palette.data.entries;
+
+    for (let i = 0; i < originalBuffer.length; i++) {
+      const colorIndex = originalBuffer[i];
+      if (colorIndex === transparentIndex) {
+        buffer.set([0, 0, 0, 0], i * 4);
+      } else {
+        const color = colors[colorIndex];
+        buffer.set([color.r, color.g, color.b, 255], i * 4);
+      }
+    }
+  }
+
+  const image = await sharp(buffer, {
+    raw: {
+      width: cel.data.width,
+      height: cel.data.height,
+      channels: mode === ColorModeEnum.INDEXED ? 4 : mode,
+    },
+  });
+  const { info } = await image.toBuffer({ resolveWithObject: true });
+  return image.extend({
+    top: cel.data.y,
+    left: cel.data.x,
+    bottom: ase.header.height - info.height - cel.data.y,
+    right: ase.header.width - info.width - cel.data.x,
+    background: { r: 0, g: 0, b: 0, alpha: 0 },
+  });
+}
+
+async function readCompressedTilemapPixels<C, I>(
+  cel: CelChunk<C, I>,
+  ase: AsepriteDoc<C, I>,
+  palette: PaletteChunk<C, I> | PaletteOld1Chunk<C, I>,
+  mode: (typeof ColorModeEnum)[keyof typeof ColorModeEnum],
+) {
+  if (cel.data.type !== CelTypeEnum.COMPRESSED_TILEMAP) {
+    throw new Error("wrong cel format");
+  }
+
+  const layers = ase.frames[0].chunks.filter(
+    (chunk) => chunk.type === ChunkTypeEnum.LAYER,
+  );
+  const layer = layers[cel.data.layerIndex];
+  if (layer.data.type !== LayerTypeEnum.TILEMAP) {
+    throw new Error("wrong layer type");
+  }
+  const tilesets = ase.frames[0].chunks.filter(
+    (chunk) => chunk.type === ChunkTypeEnum.TILESET,
+  );
+
+  const tileset = tilesets[layer.data.tilesetIndex];
+
+  if (!tileset) {
+    throw new Error("aghhhg");
+  }
+  let tilesetBuffer: Buffer | Uint8Array = tileset.data.pixels!;
+
+  if (mode === ColorModeEnum.INDEXED) {
+    const originalBuffer = tilesetBuffer;
+    tilesetBuffer = new Uint8Array(originalBuffer.length * 4);
+
+    const transparentIndex = ase.header.transparentIndex;
+    const colors =
+      palette.type === ChunkTypeEnum.PALETTE_OLD_1
+        ? palette.data.packets[0].colors
+        : palette.data.entries;
+
+    for (let i = 0; i < originalBuffer.length; i++) {
+      const colorIndex = originalBuffer[i];
+      if (colorIndex === transparentIndex) {
+        tilesetBuffer.set([0, 0, 0, 0], i * 4);
+      } else {
+        const color = colors[colorIndex];
+        tilesetBuffer.set([color.r, color.g, color.b, 255], i * 4);
+      }
+    }
+  }
+  const tilesetImage = await sharp(tilesetBuffer, {
+    raw: {
+      width: tileset.data.tileWidth,
+      height: tileset.data.tileHeight * tileset.data.numTiles,
+      channels: mode === ColorModeEnum.INDEXED ? 4 : mode,
+    },
+  });
+
+  const tilesBuffer = cel.data.tiles!;
+  const width = cel.data.tilesWidth * tileset.data.tileWidth;
+  const height = cel.data.tilesHeight * tileset.data.tileHeight;
+
+  const tiles = [];
+  let i = 0;
+  for (let y = 0; y < cel.data.tilesHeight; y++) {
+    for (let x = 0; x < cel.data.tilesWidth; x++, i++) {
+      const tileIndex = tilesBuffer[i * 4];
+      if (tileIndex > 0) {
+        const tileImage = await tilesetImage.clone().extract({
+          left: 0,
+          top: tileIndex * tileset.data.tileHeight,
+          width: tileset.data.tileWidth,
+          height: tileset.data.tileHeight,
+        });
+        tiles.push({
+          image: tileImage,
+          x,
+          y,
         });
-      }),
-    );
-
-    if (frames.length === 1) {
-      // output single frame
-      frames[0].png().toFile(`${output}/${baseName}.png`);
-    } else {
-      // create basic side-by-side spritesheet
-      const base = await sharp({
-        create: {
-          width: ase.header.width * ase.header.numFrames,
-          height: ase.header.height,
-          channels: 4,
-          background: { r: 0, g: 0, b: 0, alpha: 0 },
-        },
-      });
-
-      const inputs = await Promise.all(
-        frames.map(async (frame, i) => ({
-          input: await frame.png().toBuffer(),
-          top: 0,
-          left: i * ase.header.width,
-        })),
-      );
-      base.composite(inputs).png().toFile(`${output}/${baseName}.png`);
+      }
     }
   }
+
+  const base = await sharp({
+    create: {
+      width,
+      height,
+      channels: 4,
+      background: { r: 0, g: 0, b: 0, alpha: 0 },
+    },
+  });
+
+  const inputs = await Promise.all(
+    tiles.map(async ({ image, x, y }) => ({
+      input: await image.png().toBuffer(),
+      top: y * tileset.data.tileHeight,
+      left: x * tileset.data.tileWidth,
+    })),
+  );
+  base.composite(inputs);
+
+  return base;
 }
diff --git a/src/assets/dice.aseprite b/src/assets/dice.aseprite
index 7b36c120fc891920f7bf17a8cc98da7467d1b9c0..26d6ba97b591b71dbc3ef028d2ee37096136af01 100644
GIT binary patch
delta 24
fcmbQhGJ%C(fQf<O!BS=hUItMH4hH6p{ESQhH~j;`

delta 24
fcmbQhGJ%C(fQf<O!BS=hUItMH4hF`J{ESQhH}eC)

diff --git a/src/assets/icons-16.aseprite b/src/assets/icons-16.aseprite
index 910c097f0575160f5b83da85c5d67a0d5ab62872..ce423c5bef2d78a58206c287ac00a96085ec7bf2 100644
GIT binary patch
literal 937
zcmZ3<%)szqDI>!L1_1^R1|Wwa1&9%ViGh(3#1jBQS^!O;mA^iUfNd24S|A3*><VBj
zk*ovR&B6c_Wr7Gk1TvKsKx{T3<^y7o`_OeUFl+@1Rm^!i{dV4A10Lt2|Np;C^iYxa
z^1EzyVBWLDNXc8fE==0y`e!}=^jEK25}aE0J3Q2ndz9I)AF{l!wIb=L@rMn`C%;^c
z_gmv}pWFEH;mKPLe&m}b#qYcHo5u4G#|yTcp7?T0i2qxiZM!l=&rN<ZIizaM*>mk$
zTWsYer%vW@TVJ`e{`v9T{aZJL|JcSeMT^t=@aM~~=G{4Y+xGsVOVRACMkzA$KLj_Z
zwSG;EE%oH93!B{8_KWS<3x~hfcJIqhhcn0BXrFgK&OG-^S>eKIJRNJQE>|R$D7bsg
zF%C|<&$616@qf?r?v~nowmwC5Y0Ic7^KH2jcuPeTH|{k!q!lka+vuj$qNPuLKQB)G
zk!fgRTl!O2`sL>18$`JE7q`yT(_Xd7H;%)9$;0KUMYA)mR;T|JKXy~Fls}y}neVUZ
z{qXMk%ksJ5_Sdr{nrBO0KB9Oh<IKuUkqd-d-*g<BoA;wK?)sk(_f;OG+0OsJ^X|VO
zBc11}kDoq&`fZDx|MUIdJhTslu<W^Y{Ow(-cYEf2GXE#DU!65f{DYc#kNnd!k4<m?
z=Uc_(ea2|kw^x>O*%nd<0~2q`ykK_{VoBu!MyY}VkYE^0EM=g3SQMCHsSwEf55(*Y
zK8cm7MGA&MHbW#3vnqgCKuJ(`0s~%P+Eifp|Np-{klO&n4nV8`#86N%hxc$hFM|RP
g!-8Gk|G($rv{c%5^xfvF9KPkJvp+F&o?(aq06eS&od5s;

delta 576
zcmV-G0>AyK2gwBw$pQcX;H3co&;Sqs2mk?*4{;4i0ssK|@dN;500004k&P*T9{>OV
z1Rw(d000000000000930000L7OksItav(AE0RR96AOHXW000300ssI2000000M7sr
z0C=2@mVs`=KnO$O|9^VYdcZSqNm5N}5-`Sw>&*1>cJYB-ujjY+mi`KMOMk`mDu3F^
ztUDopggz)YMyg&u_<;XGpsgK$k5|aAf?=TzH#<Go{8UTJpIB9+@FPlemU{WgNcTd@
z8iD5c!?zS-uqzsl7x6^MxRK0)Pbs~D8MLoEH)k~scjQ3(61(hWI|;Y8qmV`?2R@}V
zZL1A*nxA+<aEP~waeU2+zht)>DGXzzM~wLJi)&O<O$wBPAb|Zed4@ZGO%2`B=1$zA
zGzw=s!yO9MhHeeKtoKtp;ZCwVA18=|FpXqCBFyei=%Ek5MrCm!z;?#)ZtlpaR=gE(
z9Y&$09tK&*FYZth@WkqhJ2`JU{n@*=V=?im1@;sYr8`rt6dP4j*loqzq2qUVuxM?x
z#Tey-TOH5UoxL3gbeed7bH`DP_|2Vu6hx`MHg&R92uBfW!|NbDr$ubb+56-US{m*c
z-$Tpf$|>(Z+iiE~4p>NhwS!W1+J4xbQfP0dc<X+MJHY||Q3BZoHs^9Bwft4B-l9ZL
z2wlcx8}YQArm9)zD)ZHZV1b29yXyagN|t@?1;m|!-`mMK-Kq~4wHCbB26oW-eHPp@
Oc7_As|K<;iQUqlf)B#ig

diff --git a/src/assets/icons-32.aseprite b/src/assets/icons-32.aseprite
index cb54cd99ecc1fcd443a2fa90b4296f7f721d0824..f1bf0f728c81f4fde247e491d65607e02c562b9c 100644
GIT binary patch
literal 1303
zcmWe<Wng%)l##)KQGtPjfti7UAq9vLfQf;T5yTS!LRx_7EDQ|4J_>?u6$Dx!2E^<N
zU@MWV1KG{O02F0{2o?Yxs;mHFvjH(T5Gw#7x-JF=7ofU|Id3DnC*3ySNcsPNd3A2f
zkz_{o>poSolXrHX-NYeq!qX*h=hJD?dK~{ec=MFo>i(`heSB{F_3YTZ+YHW$`3W~R
zB^rE-d?cZ;XU<>c5|z8}uk$^zXpd%)>W|f9d7`|@YUwh8qZfR3<q1yqDa&VGQo~ZG
zb2Gapv1Yw-((CYF1r=S2<z6?g_be9*ZeDP1?~Ey(@^iOsm@BcvI(uRC-QEmVv*x{>
zOBq8l654v_%-}q|z4@T;p*#B}J+d|w2K=$mGrC}C^qfE1>CA~q3gOdIIS%pff3ob{
zL9dC<h1*Tq&VIPE%${fdr`7NE9<BDh_jJAu`@DyX^Co2eyS?wI-P9j{-Y?U8{y#$G
z^ZGwk|FZWTIC9}k{obb23+L2NR^<&ke_-K-tAZtuUObDxrrdDtqT7kz&;NveF8y4u
zGylAOhs*Ypmm8v0H%)w<IH@OC^vAWA3A1m+iakBh@cD6iZ`Bg!dmmOZ@7VrE@p1T1
z(R-hhnQe}rm;LhTm*o6c``6VnoWD}PKJx1PvYpS%f5yk|KXCky^&SyT-Wl?%JK0$T
z+~k<$-V43s=V;o^tn_GOKhwL<zsx`UIkIhs$NB#Te)~)8Cf^sek+SK`zWzpT{g2Zs
zPo^K!e8%6-_D5vJ0eR=vN&Zia?9TlEuk0Lkv@ugF@BX)Ga#m+<H@`fm`D5<1ce{73
z*{Nmz{7`t~^@1-JRWi1H^ZM`Y4^EY-ty#EMIqz7{!}KVPci-l)-+o}$({p=)Kih<r
zwK3mQZR9-UCI6?@ewgp66RGYp>7i6eeMh&}`8enE|Nj1-KTG4j*d43S|GJ;F{n7j2
zYA^Ffo@1+FNv*u>w{yq;^r~(X-zxH1BK^<zr^}ZwxL<nUU$eDVIny=!*LU{TSL=UG
zExG-Y(f;6cnSGDj4^8~%{iX2#mWi|9&TeV>Z@b4!ZR$gfbB@!xpM02Md;D!{^!}Z@
zKJIV#zO?jOLU^R~?Uzb=bDSS8`g*F&?^EWV-HXoi{A(Ax%YNnT{-5UmmH%Y!=~UPw
z9&~s`;u7w(i|b<+D9-=!RQj~XmYmRp+CZ(=XiK$+UA|rkg~2ufb$q({>2bU7d|;e!
zm3Dx68qcz6JvU~5OsxH6n0O*ysamU`#eL2@`|S!R^dH{k&gBB-Fa;pNKwp+J&_)&o
zW>~fd^8N!cJA+SRWonUvA&|`w2E?oiAQn&(RDOX07qBo;VEF(4zdVrJ0K^VJtN_GN
nP%(%1a3?Q=0uRfA&ue%6Kj3u8v*<0~^3z4PYwB3uFjxQp6L#R$

delta 1105
zcmV-X1g`s+3f2h^)&u|m;H3coKmi~C2mk?*4{;4v1ONc~@dN;500004k&P*T9{>OV
z1Rw(d000000000000930000L7OksItav(7Q1ONa9AOHXX000300ssI20000006qaA
z0C=3emyMF-AP9uR`@i(v)hc#FgXZVft*yx@5%_FK=DLoC{T&b2O^ltvSx^T<IlnXH
zp5c>R)iE?N{@bfq7t_2|Huw&I-`c3cW5Y`RcX4nI!&G1bSJhz*Uus=W85_(r<ocVj
zr`NEPvCmB@gJo(-8|bHGQLZOn(N57j#<wZFOfP=Dr#(v-*AD=jd0Jc?UM()H^-k;J
zE}oL~PVx2KIML&<pJ*?~W((hR7`4#^YpZt8+yyymdWZPz0tPt$(`eRzPPubG?RzO1
zTZx-bEic2Q)L!dv9wT-dE}~2?2?gh6DnCa&dh@i2^u%^o!R<=g3%(~ZP~IwD!sqmK
zJ9o)eeNW4%rpN1X!gy{d$m5#;h4vhSUz}@isLF7I3*kZWCQvTPqM+*9joM3HU`G$0
z0r)YR@xsE#4fL2<x;oN-p5=YUSB5tzF{g2SMQa1?WxPebAJbcLugbvCn{h(#P<usm
zF1GbKNwRLe2&&>Wy}la4BkiU9aRbz$9`SB*bx(UxW^R{WR%7YTR#J-3JQhK(BJR<Y
z^cro|!K|RZ(H@-y)Pl!I#G)MpT-M=m13tmYiWcHvdc~V*FDnCo^nScEhVS}bih5oq
zct}p*tDd`_vBld;Yow>_`h)VK2^DTWdq(fJ_HqiTR>e~{=s@M;f}pVT2E6c=-rCGL
z&X?0qv?r1dUez<VDM6W6KF7i^hj53U(ehLoZu6=3s;3adqTyv;u!*9F|CwG4;u$@9
zWPk9~*lF*8UQxJzk)FwGp8L<*vq*0<)QxwvS8updIMm*bUZ=er1YxLuAjcSfS9>S)
zKsWyNSGAXmLeeu)x&E$CZN=)ochOw0y+E$Qmw+UAFSQ4;goSf@qndEp=6gDOwAt~|
z^NNG6I_-76fRa=C3zm<yC-oQU<thy~+E2!`oX-X}B2Jlqp54`+B?TK^a_{?4d!zv`
zFE==%C!}lMndW=E@!X!?E$!v{kM-*KL^dLKzPHex6knh>4OgUmUkoc9(n9BRlHNsg
z@3fa%3#hL*jAO4o?m(6HEab)ho@+0LJAJ<CdkUY%v!_>UPl=B(faIn2Ku>tvk@iaA
z-PN8t1a2;WGa{)i59W#X;t4W6NL0`R4L<LCg_1h$ZQl1JJ_+xY_BMSFT9l-R?XS?@
zB@#TL*K3cDQ`4jNvdva~Tj}(DPwn8?ILSp1f(ATB>IhqZroH}muJ29^q>+U`wO(ki
z*pENedbLLGJcpRz2iiNL=bpqvIcBTAVYW(p-F{Cf>6N06HrE^N(Y?K|)?#-G#d;a|
XNoLL6u}?~qcJ*M8kBsCG`=JYMXiFd)


From 2729ff54213be023be7995d69e80250d8b25bfb9 Mon Sep 17 00:00:00 2001
From: alex baldwin <ghostbaldwin@gmail.com>
Date: Sun, 19 Jul 2026 00:27:47 -0400
Subject: [PATCH 2/4] build command

---
 netlify.toml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/netlify.toml b/netlify.toml
index 1adf2c9..da6863f 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,3 +1,6 @@
+[build]
+  command = pnpm run build:aseprite && pnpm run build
+
 [functions]
   node_bundler = "esbuild"
   external_node_modules = ["@cornerstonejs/codec-libjpeg-turbo-8bit"]

From 47ecffa9e11311f1faf166bb6048af9465f6af0e Mon Sep 17 00:00:00 2001
From: alex baldwin <ghostbaldwin@gmail.com>
Date: Sun, 19 Jul 2026 00:28:33 -0400
Subject: [PATCH 3/4] quotes

---
 netlify.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/netlify.toml b/netlify.toml
index da6863f..d482639 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,5 +1,5 @@
 [build]
-  command = pnpm run build:aseprite && pnpm run build
+  command = "pnpm run build:aseprite && pnpm run build"
 
 [functions]
   node_bundler = "esbuild"

From eb100fce158a4b59b3e705b80331d485c44de20a Mon Sep 17 00:00:00 2001
From: alex baldwin <ghostbaldwin@gmail.com>
Date: Mon, 20 Jul 2026 20:58:29 -0400
Subject: [PATCH 4/4] tile flip, fix offset

---
 src/assets/aseprite.11ty.ts |  70 ++++++++++++++++++++++++++++--------
 src/assets/ui.aseprite      | Bin 440 -> 440 bytes
 2 files changed, 55 insertions(+), 15 deletions(-)

diff --git a/src/assets/aseprite.11ty.ts b/src/assets/aseprite.11ty.ts
index a490921..f220e07 100644
--- a/src/assets/aseprite.11ty.ts
+++ b/src/assets/aseprite.11ty.ts
@@ -5,6 +5,8 @@ import Aseprite from "aseprite";
 import type {
   Aseprite as AsepriteDoc,
   CelChunk,
+  CelChunkData,
+  CelType,
   PaletteChunk,
   PaletteOld1Chunk,
 } from "aseprite";
@@ -101,8 +103,8 @@ export default class {
           return image.extend({
             top: cel.data.y,
             left: cel.data.x,
-            bottom: ase.header.height - info.height + cel.data.y,
-            right: ase.header.width - info.width + cel.data.x,
+            bottom: ase.header.height - info.height - cel.data.y,
+            right: ase.header.width - info.width - cel.data.x,
             background: { r: 0, g: 0, b: 0, alpha: 0 },
           });
         }),
@@ -170,21 +172,13 @@ async function readCompressedPixels<C, I>(
     }
   }
 
-  const image = await sharp(buffer, {
+  return await sharp(buffer, {
     raw: {
       width: cel.data.width,
       height: cel.data.height,
       channels: mode === ColorModeEnum.INDEXED ? 4 : mode,
     },
   });
-  const { info } = await image.toBuffer({ resolveWithObject: true });
-  return image.extend({
-    top: cel.data.y,
-    left: cel.data.x,
-    bottom: ase.header.height - info.height - cel.data.y,
-    right: ase.header.width - info.width - cel.data.x,
-    background: { r: 0, g: 0, b: 0, alpha: 0 },
-  });
 }
 
 async function readCompressedTilemapPixels<C, I>(
@@ -251,14 +245,27 @@ async function readCompressedTilemapPixels<C, I>(
   let i = 0;
   for (let y = 0; y < cel.data.tilesHeight; y++) {
     for (let x = 0; x < cel.data.tilesWidth; x++, i++) {
-      const tileIndex = tilesBuffer[i * 4];
-      if (tileIndex > 0) {
-        const tileImage = await tilesetImage.clone().extract({
+      const tile = parseTile(i, tilesBuffer, cel.data);
+      if (tile.index > 0) {
+        let tileImage = await tilesetImage.clone().extract({
           left: 0,
-          top: tileIndex * tileset.data.tileHeight,
+          top: tile.index * tileset.data.tileHeight,
           width: tileset.data.tileWidth,
           height: tileset.data.tileHeight,
         });
+
+        if (tile.dFlip) {
+          tileImage = await sharp(
+            await tileImage.rotate(90).flip().png().toBuffer(),
+          );
+        }
+        if (tile.xFlip) {
+          tileImage = tileImage.flop();
+        }
+        if (tile.yFlip) {
+          tileImage = tileImage.flip();
+        }
+
         tiles.push({
           image: tileImage,
           x,
@@ -288,3 +295,36 @@ async function readCompressedTilemapPixels<C, I>(
 
   return base;
 }
+
+function parseTile<C, I>(
+  i: number,
+  tiles: Buffer,
+  data: Extract<CelChunkData<C, I>, { type: CelType.COMPRESSED_TILEMAP }>,
+) {
+  const tileBytes = data.bitsPerTile / 8;
+
+  const bufIndex = i * tileBytes;
+  const tile = tiles.readUInt32LE(bufIndex) | 0;
+  const tileIdShift = maskShift(data.tileIdBitmask | 0);
+  const xFlipBitmask = data.xFlipBitmask | 0;
+  const yFlipBitmask = data.yFlipBitmask | 0;
+  const dFlipBitmask = data.dFlipBitmask | 0;
+
+  return {
+    index: (tile & data.tileIdBitmask) >> tileIdShift,
+    xFlip: (tile & xFlipBitmask) === xFlipBitmask,
+    yFlip: (tile & yFlipBitmask) === yFlipBitmask,
+    dFlip: (tile & dFlipBitmask) === dFlipBitmask,
+  };
+}
+
+function maskShift(mask: number) {
+  let shift = 0;
+  let bit = 1;
+  const size = 4; // sizeof(mask)
+  while ((mask & bit) == 0 && shift < 8 * size) {
+    bit <<= 1;
+    ++shift;
+  }
+  return shift;
+}
diff --git a/src/assets/ui.aseprite b/src/assets/ui.aseprite
index 3c10701b181cee5b162a8a8488e636861041fb9f..41da5cfcefa1c4a038abccc08cc98f4fa9f1a007 100644
GIT binary patch
delta 24
gcmdnNyn~s42O|T+gQbiN2@Dzx91P4G`ByRm08rQk!T<mO

delta 24
gcmdnNyn~s42O|T+gQbiN2@Dzx91M&b`ByRm08q{azyJUM