peppidesu · itepastra · Jan 29, 2026 · Jan 26, 2026 · Jan 26, 2026 · Jan 26, 2026
diff --git a/.gitignore b/.gitignore
@@ -25,3 +25,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+/public/sprites
diff --git a/build-sprites.sh b/build-sprites.sh
@@ -1,10 +1,29 @@
-#!/bin/sh
+#!/usr/bin/env bash
 
 ROOT="$(git rev-parse --show-toplevel)"
 SRC="$ROOT/sprites"
 TMP="$(mktemp -d)/sprites"
 DEST="$ROOT/public/sprites"
 
+rm -rf "$DEST"
+
+sub_inputs=(220022 440044 aa00aa ff00ff)
+
+declare -A palettes=(
+    [lightblue]="#305182 #4192c3 #61d3e3 #a2fff3"
+    [turqoise]="#165950 #189572 #37da94 #a0ffc2"
+    [green]="#006130 #19a239 #5ff040 #ccffad"
+    [lime]="#263e0a #6e8d1b #bee344 #edff89"
+    [yellow]="#6d3c05 #b87a0c #ffd42d #fff392"
+    [orange]="#732200 #c64b01 #ff8b17 #ffdba2"
+    [warmred]="#681d27 #ae2b28 #ff5d32 #ffae93"
+    [red]="#641b3b #9d193c #ff4656 #ff9ba1"
+    [magenta]="#612b79 #9c37ba #f75aff #ffa9f0"
+    [purple]="#342561 #6b42a7 #b76cff #e2abff"
+    [indigo]="#1f1d51 #3e3c8b #6979e8 #88baff"
+    [blue]="#19295b #305faa #3f9eff #8ad1ff"
+    [white]="#535353 #8a8a8a #c6c6c6 #ffffff"
+)
 
 find "$SRC" -type f -name '*.aseprite' | while read -r file; do
   rel="${file#"$SRC"/}"
@@ -17,11 +36,33 @@ find "$SRC" -type f -name '*.aseprite' | while read -r file; do
     --save-as "$out"
 done
 
+run_with_palette() {
+    local in="$1" out="$2" palette_str="$3"
+    local s1 s2 s3 s4
+    read -r s1 s2 s3 s4 <<< "$palette_str"
+
+    png-subs "$in" "$out" \
+      --subs "${sub_inputs[0]}" "${s1#"#"}" \
+      --subs "${sub_inputs[1]}" "${s2#"#"}" \
+      --subs "${sub_inputs[2]}" "${s3#"#"}" \
+      --subs "${sub_inputs[3]}" "${s4#"#"}"
+}
+
+
 find "$TMP" -type f -name '*.png' | while read -r file; do
   rel="${file#"$TMP"/}"
-  out="$DEST/${rel%.png}.png"
+  out_rel="${rel//\/substitute\//\/}"
+  dest_base="$DEST/${out_rel%.png}"
 
-  mkdir -p "$(dirname "$out")"
+  mkdir -p "$(dirname "$dest_base")"
 
-  png-subs "$file" "$out"
+  if [[ "$rel" == *"/substitute/"* ]]; then
+      for name in "${!palettes[@]}"; do
+          out="${dest_base}-${name}.png"
+          run_with_palette "$file" "$out" "${palettes[$name]}"
+      done
+  else
+      out="${dest_base}.png"
+      png-subs "$file" "$out"
+  fi
 done
diff --git a/package.json b/package.json
@@ -5,10 +5,10 @@
     "type": "module",
     "scripts": {
         "dev": "vite",
-        "build": "vite build",
+        "build": "./build-sprites.sh && vite build",
         "preview": "vite preview",
         "sprites": "./build-sprites.sh",
-        "deploy": "npm run build && gh-pages -d dist --nojekyll --cname elementipelago.peppidesu.dev"
+        "deploy": "bun run build && gh-pages -d dist --nojekyll --cname elementipelago.peppidesu.dev"
     },
     "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^6.2.4",

diff --git a/public/sprites/elements/apple.png b/public/sprites/elements/apple.png
diff --git a/public/sprites/elements/armor.png b/public/sprites/elements/armor.png
diff --git a/public/sprites/elements/ball.png b/public/sprites/elements/ball.png
diff --git a/public/sprites/elements/berry.png b/public/sprites/elements/berry.png
diff --git a/public/sprites/elements/boat.png b/public/sprites/elements/boat.png
diff --git a/public/sprites/elements/book.png b/public/sprites/elements/book.png
diff --git a/public/sprites/elements/boots.png b/public/sprites/elements/boots.png
diff --git a/public/sprites/elements/bow.png b/public/sprites/elements/bow.png
diff --git a/public/sprites/elements/car.png b/public/sprites/elements/car.png
diff --git a/public/sprites/elements/cave.png b/public/sprites/elements/cave.png
diff --git a/public/sprites/elements/chest.png b/public/sprites/elements/chest.png
diff --git a/public/sprites/elements/coin.png b/public/sprites/elements/coin.png
diff --git a/public/sprites/elements/desert.png b/public/sprites/elements/desert.png
diff --git a/public/sprites/elements/egg.png b/public/sprites/elements/egg.png
diff --git a/public/sprites/elements/element.png b/public/sprites/elements/element.png
diff --git a/public/sprites/elements/emerald.png b/public/sprites/elements/emerald.png
diff --git a/public/sprites/elements/fire.png b/public/sprites/elements/fire.png
diff --git a/public/sprites/elements/gun.png b/public/sprites/elements/gun.png
diff --git a/public/sprites/elements/hammer.png b/public/sprites/elements/hammer.png
diff --git a/public/sprites/elements/hat.png b/public/sprites/elements/hat.png
diff --git a/public/sprites/elements/heart.png b/public/sprites/elements/heart.png
diff --git a/public/sprites/elements/hills.png b/public/sprites/elements/hills.png
diff --git a/public/sprites/elements/hourglass.png b/public/sprites/elements/hourglass.png
diff --git a/public/sprites/elements/house.png b/public/sprites/elements/house.png
diff --git a/public/sprites/elements/ice.png b/public/sprites/elements/ice.png
diff --git a/public/sprites/elements/island.png b/public/sprites/elements/island.png
diff --git a/public/sprites/elements/key.png b/public/sprites/elements/key.png
diff --git a/public/sprites/elements/leaf.png b/public/sprites/elements/leaf.png
diff --git a/public/sprites/elements/magic.png b/public/sprites/elements/magic.png
diff --git a/public/sprites/elements/map.png b/public/sprites/elements/map.png
diff --git a/public/sprites/elements/marker.png b/public/sprites/elements/marker.png
diff --git a/public/sprites/elements/metal.png b/public/sprites/elements/metal.png
diff --git a/public/sprites/elements/money.png b/public/sprites/elements/money.png
diff --git a/public/sprites/elements/mountains.png b/public/sprites/elements/mountains.png
diff --git a/public/sprites/elements/music.png b/public/sprites/elements/music.png
diff --git a/public/sprites/elements/piece.png b/public/sprites/elements/piece.png
diff --git a/public/sprites/elements/planet.png b/public/sprites/elements/planet.png
diff --git a/public/sprites/elements/potion.png b/public/sprites/elements/potion.png
diff --git a/public/sprites/elements/quest.png b/public/sprites/elements/quest.png
diff --git a/public/sprites/elements/ring.png b/public/sprites/elements/ring.png
diff --git a/public/sprites/elements/rock.png b/public/sprites/elements/rock.png
diff --git a/public/sprites/elements/sand.png b/public/sprites/elements/sand.png
diff --git a/public/sprites/elements/shop.png b/public/sprites/elements/shop.png
diff --git a/public/sprites/elements/sign.png b/public/sprites/elements/sign.png
diff --git a/public/sprites/elements/skull.png b/public/sprites/elements/skull.png
diff --git a/public/sprites/elements/spear.png b/public/sprites/elements/spear.png
diff --git a/public/sprites/elements/sword.png b/public/sprites/elements/sword.png
diff --git a/public/sprites/elements/tree.png b/public/sprites/elements/tree.png
diff --git a/public/sprites/elements/upgrade.png b/public/sprites/elements/upgrade.png
diff --git a/public/sprites/elements/void.png b/public/sprites/elements/void.png
diff --git a/public/sprites/elements/wand.png b/public/sprites/elements/wand.png
diff --git a/public/sprites/elements/water.png b/public/sprites/elements/water.png
diff --git a/public/sprites/ui/broom.png b/public/sprites/ui/broom.png
diff --git a/public/sprites/ui/burger.png b/public/sprites/ui/burger.png
diff --git a/public/sprites/ui/chat.png b/public/sprites/ui/chat.png
diff --git a/public/sprites/ui/check.png b/public/sprites/ui/check.png
diff --git a/public/sprites/ui/download.png b/public/sprites/ui/download.png
diff --git a/public/sprites/ui/hint1.png b/public/sprites/ui/hint1.png
diff --git a/public/sprites/ui/hint2.png b/public/sprites/ui/hint2.png
diff --git a/public/sprites/ui/new.png b/public/sprites/ui/new.png
diff --git a/public/sprites/ui/settings.png b/public/sprites/ui/settings.png
diff --git a/sprites/elements/apple.aseprite b/sprites/elements/apple.aseprite
diff --git a/sprites/elements/armor.aseprite b/sprites/elements/armor.aseprite
diff --git a/sprites/elements/ball.aseprite b/sprites/elements/ball.aseprite
diff --git a/sprites/elements/berry.aseprite b/sprites/elements/berry.aseprite
diff --git a/sprites/elements/boat.aseprite b/sprites/elements/boat.aseprite
diff --git a/sprites/elements/book.aseprite b/sprites/elements/book.aseprite
diff --git a/sprites/elements/boots.aseprite b/sprites/elements/boots.aseprite
diff --git a/sprites/elements/car.aseprite b/sprites/elements/car.aseprite
diff --git a/sprites/elements/chest.aseprite b/sprites/elements/chest.aseprite
diff --git a/sprites/elements/element.aseprite b/sprites/elements/element.aseprite
diff --git a/sprites/elements/emerald.aseprite b/sprites/elements/emerald.aseprite
diff --git a/sprites/elements/hat.aseprite b/sprites/elements/hat.aseprite
diff --git a/sprites/elements/heart.aseprite b/sprites/elements/heart.aseprite
diff --git a/sprites/elements/ice.aseprite b/sprites/elements/ice.aseprite
diff --git a/sprites/elements/key.aseprite b/sprites/elements/key.aseprite
diff --git a/sprites/elements/leaf.aseprite b/sprites/elements/leaf.aseprite
diff --git a/sprites/elements/magic.aseprite b/sprites/elements/magic.aseprite
diff --git a/sprites/elements/map.aseprite b/sprites/elements/map.aseprite
diff --git a/sprites/elements/marker.aseprite b/sprites/elements/marker.aseprite
diff --git a/sprites/elements/metal.aseprite b/sprites/elements/metal.aseprite
diff --git a/sprites/elements/music.aseprite b/sprites/elements/music.aseprite
diff --git a/sprites/elements/potion.aseprite b/sprites/elements/potion.aseprite
diff --git a/sprites/elements/sand.aseprite b/sprites/elements/sand.aseprite
diff --git a/sprites/elements/substitute/apple.aseprite b/sprites/elements/substitute/apple.aseprite
diff --git a/sprites/elements/substitute/armor.aseprite b/sprites/elements/substitute/armor.aseprite
diff --git a/sprites/elements/substitute/ball.aseprite b/sprites/elements/substitute/ball.aseprite
diff --git a/sprites/elements/substitute/berry.aseprite b/sprites/elements/substitute/berry.aseprite
diff --git a/sprites/elements/substitute/boat.aseprite b/sprites/elements/substitute/boat.aseprite
diff --git a/sprites/elements/substitute/book.aseprite b/sprites/elements/substitute/book.aseprite
diff --git a/sprites/elements/substitute/boots.aseprite b/sprites/elements/substitute/boots.aseprite
diff --git a/sprites/elements/substitute/car.aseprite b/sprites/elements/substitute/car.aseprite
diff --git a/sprites/elements/substitute/chest.aseprite b/sprites/elements/substitute/chest.aseprite
diff --git a/sprites/elements/substitute/element.aseprite b/sprites/elements/substitute/element.aseprite
diff --git a/sprites/elements/substitute/emerald.aseprite b/sprites/elements/substitute/emerald.aseprite
diff --git a/sprites/elements/substitute/hat.aseprite b/sprites/elements/substitute/hat.aseprite
diff --git a/sprites/elements/substitute/heart.aseprite b/sprites/elements/substitute/heart.aseprite
diff --git a/sprites/elements/substitute/leaf.aseprite b/sprites/elements/substitute/leaf.aseprite
diff --git a/sprites/elements/substitute/magic.aseprite b/sprites/elements/substitute/magic.aseprite
diff --git a/sprites/elements/substitute/marker.aseprite b/sprites/elements/substitute/marker.aseprite
diff --git a/sprites/elements/substitute/metal.aseprite b/sprites/elements/substitute/metal.aseprite
diff --git a/sprites/elements/substitute/music.aseprite b/sprites/elements/substitute/music.aseprite
diff --git a/sprites/elements/substitute/potion.aseprite b/sprites/elements/substitute/potion.aseprite
diff --git a/sprites/elements/substitute/sand.aseprite b/sprites/elements/substitute/sand.aseprite
diff --git a/sprites/elements/substitute/wand.aseprite b/sprites/elements/substitute/wand.aseprite
diff --git a/sprites/elements/sword.aseprite b/sprites/elements/sword.aseprite
diff --git a/sprites/elements/wand.aseprite b/sprites/elements/wand.aseprite
diff --git a/src/app.css b/src/app.css
@@ -32,7 +32,7 @@ body {
     margin: 0;
     overflow: hidden;
 
-    >* {
+    > * {
         grid-area: 1 / 1 / 1 / 1;
     }
 }

diff --git a/src/lib/Drawer.svelte b/src/lib/Drawer.svelte
@@ -36,11 +36,7 @@
                 res = res || isExhausted(a.name) - isExhausted(b.name);
             }
 
-            return (
-                res ||
-                a.elem_id.kind - b.elem_id.kind ||
-                a.elem_id.id - b.elem_id.id
-            );
+            return res || a.elem_id.kind - b.elem_id.kind || a.elem_id.id - b.elem_id.id;
         });
 
         if (search_term === "") return table;

diff --git a/src/lib/Playfield.svelte b/src/lib/Playfield.svelte
@@ -6,10 +6,7 @@
      */
     export function handle_dropped(mounted) {
         Array.from(mounted)
-            .toSorted(
-                ([_a, a], [_b, b]) =>
-                    Number(a.get_z_index()) - Number(b.get_z_index()),
-            )
+            .toSorted(([_a, a], [_b, b]) => Number(a.get_z_index()) - Number(b.get_z_index()))
             .forEach(([_num, ele], idx) => ele.set_z_index(String(idx + 1)));
     }
 </script>

diff --git a/src/lib/machine-learning/iconml.js b/src/lib/machine-learning/iconml.js
@@ -7,80 +7,118 @@ import { getElementData } from "../stores/apclient.svelte.js";
 /**
  * @param {string} game
  * @param {string} name
+ * @returns {string}
  */
 export function iconForLocation(game, name) {
     const kind = "item";
-    return iconForText(`[game=${game}] ${name}`);
+    return iconForText(`[game=${game}][kind=${kind}] ${name}`);
 }
 
 /**
  * @param {string} game
  * @param {string} name
+ * @returns {string}
  */
 export function iconForItem(game, name) {
     const kind = "location";
-    return iconForText(`[game=${game}] ${name}`);
+    return iconForText(`[game=${game}][kind=${kind}] ${name}`);
 }
 
+/**
+ * @param {string} name
+ * @returns {string}
+ */
+export function iconForIntermediate(name) {
+    return iconForText(name);
+}
+
+const colors = [
+    "lightblue",
+    "turqoise",
+    "green",
+    "lime",
+    "yellow",
+    "orange",
+    "warmred",
+    "red",
+    "magenta",
+    "purple",
+    "indigo",
+    "blue",
+    "white",
+];
+
+const substituteIcons = [
+    "apple",
+    "armor",
+    "ball",
+    "berry",
+    "boat",
+    "book",
+    "boots",
+    "car",
+    "chest",
+    "element",
+    "emerald",
+    "hat",
+    "heart",
+    "leaf",
+    "magic",
+    "marker",
+    "metal",
+    "music",
+    "potion",
+    "sand",
+    "wand",
+];
+
+const icons = [
+    "bow",
+    "cave",
+    "coin",
+    "desert",
+    "egg",
+    "fire",
+    "gun",
+    "hammer",
+    "hills",
+    "hourglass",
+    "house",
+    "ice",
+    "island",
+    "key",
+    "map",
+    "money",
+    "mountains",
+    "piece",
+    "planet",
+    "quest",
+    "ring",
+    "rock",
+    "shop",
+    "sign",
+    "skull",
+    "spear",
+    "sword",
+    "tree",
+    "upgrade",
+    "void",
+    "water",
+];
+
+const combinedIcons = [
+    ...icons,
+    ...substituteIcons.flatMap((value) => colors.map((color) => `${value}-${color}`)),
+];
+
+/**
+ * @param {String} text
+ * @returns {String}
+ */
 function iconForText(text) {
     //const res = predictIcon(get(model), text, { returnTopK: 1 });
-
-    const icons = [
-        "apple",
-        "armor",
-        "ball",
-        "berry",
-        "boat",
-        "book",
-        "boots",
-        "bow",
-        "car",
-        "cave",
-        "chest",
-        "coin",
-        "desert",
-        "egg",
-        "element",
-        "emerald",
-        "fire",
-        "gun",
-        "hammer",
-        "hat",
-        "heart",
-        "hills",
-        "hourglass",
-        "house",
-        "ice",
-        "island",
-        "key",
-        "leaf",
-        "magic",
-        "map",
-        "marker",
-        "metal",
-        "money",
-        "mountains",
-        "music",
-        "piece",
-        "planet",
-        "potion",
-        "quest",
-        "ring",
-        "rock",
-        "sand",
-        "shop",
-        "sign",
-        "skull",
-        "spear",
-        "sword",
-        "tree",
-        "upgrade",
-        "void",
-        "wand",
-        "water"
-    ];
     const buffer = new Uint32Array(md5.arrayBuffer(text));
-    const res = icons[buffer[buffer.length - 1] % icons.length];
+    const res = combinedIcons[buffer[buffer.length - 1] % combinedIcons.length];
 
     const iconKey = res;
     return iconKey;

diff --git a/src/lib/stores/apclient.svelte.js b/src/lib/stores/apclient.svelte.js
@@ -2,7 +2,7 @@ import { derived, get, readable, writable } from "svelte/store";
 import { Client } from "archipelago.js";
 import { createSubscriber, SvelteMap, SvelteSet } from "svelte/reactivity";
 import { element_to_name, parse_element } from "../../utils";
-import { iconForItem, iconForLocation } from "../machine-learning/iconml";
+import { iconForIntermediate, iconForItem, iconForLocation } from "../machine-learning/iconml";
 import { draw } from "svelte/transition";
 import { INTERMEDIATE_AMOUNT, LOCATION_AMOUNT, NON_ELEMENT_ITEMS } from "../../consts";
 import { get_name, init_naming } from "./names.js";
@@ -228,8 +228,14 @@ export async function initElementStores() {
     for (const item of await scoutedLocations) {
         if (!elementData.has(item.locationName)) {
             const elem_id = parse_element(item.locationName);
-            const loc = elem_id.kind === ElementKind.INTERMEDIATE ? get_name() : item.name;
-            const icon_name = iconForLocation(item.game, loc);
+            let loc, icon_name;
+            if (elem_id.kind === ElementKind.INTERMEDIATE) {
+                loc = get_name();
+                icon_name = iconForIntermediate(loc);
+            } else {
+                loc = item.name;
+                icon_name = iconForLocation(item.game, loc);
+            }
             elementData.set(item.locationName, {
                 elem_id,
                 name: item.locationName,
@@ -341,11 +347,16 @@ function extendReceivedElements(items) {
         }
 
         let elem_id = parse_element(item.name);
-        const loc =
-            elem_id.kind === ElementKind.INTERMEDIATE || item.locationGame === "Archipelago"
-                ? get_name()
-                : item.locationName;
-        let icon_name = iconForItem(item.game, loc);
+
+        let loc, icon_name;
+        if (elem_id.kind === ElementKind.INTERMEDIATE || item.locationGame === "Archipelago") {
+            loc = get_name();
+            icon_name = iconForIntermediate(loc);
+        } else {
+            loc = item.locationName;
+            icon_name = iconForLocation(item.game, loc);
+        }
+
         receivedElements.add(item.name);
 
         if (elementData.has(item.name)) {

diff --git a/src/lib/stores/toast.js b/src/lib/stores/toast.js
@@ -1,6 +1,5 @@
-import { get, writable } from "svelte/store";
-import { apclient, getElementData } from "./apclient.svelte";
-import { iconForItem, iconForLocation } from "../machine-learning/iconml";
+import { writable } from "svelte/store";
+import { getElementData } from "./apclient.svelte";
 import { NON_ELEMENT_ITEMS } from "../../consts";
 
 /**
@@ -14,8 +13,6 @@ import { NON_ELEMENT_ITEMS } from "../../consts";
 
 export const toast_queue = writable([]);
 
-const initialized = writable(false);
-
 /**
  * @param {Item[]} items
  */
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,3 +25,5 @@ dist-ssr @@
     *.njsproj
     *.sln
     *.sw?
+    /public/sprites