Add sprite style switching

Author: ceddc

README.md

@@ -23,6 +23,12 @@ The project starts from:
 
 It keeps the map and AI chat as real ArcGIS web components, then wraps them in Tiny Assistant, with a tiny movable assistant character named Globby.
 
+The character layer is designed around Codex-style pet spritesheets, so it can
+also work with compatible sprites from projects like
+[Petdex](https://petdex.crafter.run/) when they follow the same atlas layout.
+For example, this repo includes a local copy of the
+[Boba sprite](https://petdex.crafter.run/pets/boba).
+
 ## Try The Demo
 
 Open the live demo:
@@ -87,6 +93,11 @@ body { overflow: hidden; }
 <tiny-arcgis-assistant
   reference-element="#map"
   sprite-src="https://ceddc.github.io/tiny-assistant/assets/globby-spritesheet.webp"
+  sprites='{
+    "globby": "https://ceddc.github.io/tiny-assistant/assets/globby-spritesheet.webp",
+    "clippy": "https://ceddc.github.io/tiny-assistant/assets/clippy-spritesheet.webp",
+    "boba": "https://ceddc.github.io/tiny-assistant/assets/boba-spritesheet.webp"
+  }'
   heading="My map assistant"
   description="Ask questions about this map"
   suggested-prompts='["Summarize this map.", "Zoom to the most important feature."]'>
@@ -105,8 +116,10 @@ the local built module from `dist`.
 GitHub Pages hosts your built `tiny-assistant.js` and sprite assets;
 `https://js.arcgis.com/5.0/` remains Esri's ArcGIS CDN. The public custom element
 is `tiny-arcgis-assistant`. It accepts `reference-element`, `sprite-src`,
-`heading`, `description`, optional `start-hidden`, and optional
-`suggested-prompts`.
+`heading`, `description`, optional `start-hidden`, optional
+`suggested-prompts`, optional `sprite`, and optional `sprites`. When multiple
+sprites are configured, the right-click menu includes a Style section for
+switching between them.
 
 ## ArcGIS Account Requirement
 
@@ -164,7 +177,7 @@ the built `tiny-assistant.js` file published by GitHub Pages.
 - `src/components/tiny-arcgis-assistant.js` defines the public
   `<tiny-arcgis-assistant>` element.
 - `src/components/tiny-assistant-character.js` renders and animates Globby from
-  the spritesheet.
+  Codex-style spritesheets.
 - `src/lib/tiny-assistant-controller.js` wires sign-in, chat open/close,
   positioning, ArcGIS assistant styling patches, and animation states.
 - `index.html` is the main demo page.

external-user.html

@@ -28,6 +28,7 @@
     <tiny-arcgis-assistant
       reference-element="#map"
       sprite-src="./assets/globby-spritesheet.webp"
+      sprites='{"globby":"./assets/globby-spritesheet.webp","clippy":"./assets/clippy-spritesheet.webp","boba":"./assets/boba-spritesheet.webp"}'
       heading="Change in wheat production 2017-2022"
       description="Explore wheat production in the U.S. from 2017 to 2022."
       suggested-prompts='["Go to the county that produced the most wheat in 2022.", "How does that compare to the average county that produced wheat?", "How many counties produced less wheat in 2022 than in 2017?"]'>

index.html

@@ -75,6 +75,7 @@
 
         <tiny-arcgis-assistant
           sprite-src="./assets/globby-spritesheet.webp"
+          sprites='{"globby":"./assets/globby-spritesheet.webp","clippy":"./assets/clippy-spritesheet.webp","boba":"./assets/boba-spritesheet.webp"}'
           reference-element="#demo-map"
           suggested-prompts='["Go to the county that produced the most wheat in 2022.", "How does that compare to the average county that produced wheat?", "How many counties produced less wheat in 2022 than in 2017?"]'
           heading="Change in wheat production 2017-2022"

public/assets/boba-spritesheet.webp

@@ -75,6 +75,53 @@ function parseSuggestedPrompts(value) {
   }
 }
 
+function toSpriteLabel(name) {
+  return name
+    .replace(/[-_]+/g, " ")
+    .replace(/\b\w/g, (letter) => letter.toUpperCase());
+}
+
+function normalizeSpriteEntries(entries, fallbackSrc) {
+  const sprites = Object.entries(entries || {})
+    .map(([name, src]) => [String(name).trim(), String(src).trim()])
+    .filter(([name, src]) => name && src);
+
+  if (!sprites.some(([name]) => name === "globby") && fallbackSrc) {
+    sprites.unshift(["globby", fallbackSrc]);
+  }
+
+  return sprites;
+}
+
+function parseSprites(value, fallbackSrc) {
+  if (!value) {
+    return normalizeSpriteEntries({ globby: fallbackSrc }, fallbackSrc);
+  }
+
+  try {
+    const parsed = JSON.parse(value);
+    return normalizeSpriteEntries(parsed, fallbackSrc);
+  } catch {
+    const entries = {};
+    value
+      .split(/[\n,]/)
+      .map((entry) => entry.trim())
+      .filter(Boolean)
+      .forEach((entry) => {
+        const separatorIndex = entry.indexOf(":");
+        if (separatorIndex <= 0) {
+          return;
+        }
+
+        const name = entry.slice(0, separatorIndex).trim();
+        const src = entry.slice(separatorIndex + 1).trim();
+        entries[name] = src;
+      });
+
+    return normalizeSpriteEntries(entries, fallbackSrc);
+  }
+}
+
 class TinyArcgisAssistant extends HTMLElement {
   #controller = null;
 
@@ -86,6 +133,12 @@ class TinyArcgisAssistant extends HTMLElement {
     const agents = Array.from(this.children);
     const startHidden = booleanAttribute(this, "start-hidden");
     const spriteSrc = this.getAttribute("sprite-src") || "";
+    const spriteEntries = parseSprites(this.getAttribute("sprites"), spriteSrc);
+    const selectedSpriteName =
+      this.getAttribute("sprite") || spriteEntries[0]?.[0] || "globby";
+    const selectedSprite =
+      spriteEntries.find(([name]) => name === selectedSpriteName) ||
+      spriteEntries[0] || ["globby", spriteSrc];
     const referenceElement =
       this.getAttribute("reference-element") || "arcgis-map";
     const heading = this.getAttribute("heading") || "ArcGIS AI Assistant";
@@ -103,8 +156,8 @@ class TinyArcgisAssistant extends HTMLElement {
 
     const globby = createElement("tiny-assistant-character", {
       class: "tiny-assistant-character",
-      title: "Globby",
-      "sprite-src": spriteSrc,
+      title: toSpriteLabel(selectedSprite[0]),
+      "sprite-src": selectedSprite[1],
       hidden: startHidden,
     });
 
@@ -154,7 +207,7 @@ class TinyArcgisAssistant extends HTMLElement {
       [card, toggle],
     );
 
-    const menu = createElement("menu", { class: "globby-menu", hidden: true }, [
+    const menuChildren = [
       createMenuButton(
         {
           class: "follow-cursor-toggle",
@@ -168,7 +221,33 @@ class TinyArcgisAssistant extends HTMLElement {
         { class: "hide-tiny-assistant-button" },
         "Hide Tiny Assistant",
       ),
-    ]);
+    ];
+
+    if (spriteEntries.length > 1) {
+      menuChildren.push(
+        createElement("li", { class: "globby-menu-section" }, [
+          document.createTextNode("Style"),
+        ]),
+        ...spriteEntries.map(([name, src]) =>
+          createMenuButton(
+            {
+              class: "style-toggle",
+              role: "menuitemradio",
+              "aria-checked": String(name === selectedSprite[0]),
+              "data-sprite-name": name,
+              "data-sprite-src": src,
+            },
+            toSpriteLabel(name),
+          ),
+        ),
+      );
+    }
+
+    const menu = createElement(
+      "menu",
+      { class: "globby-menu", hidden: true },
+      menuChildren,
+    );
 
     const showButton = createElement(
       "button",

public/assets/clippy-spritesheet.webp

@@ -13,6 +13,7 @@ export function initializeTinyAssistant(host) {
   const hideGlobbyButton = host.querySelector(".hide-tiny-assistant-button");
   const panelMenuToggle = host.querySelector(".panel-menu-toggle");
   const showGlobbyButton = host.querySelector(".show-tiny-assistant-button");
+  const styleToggles = Array.from(host.querySelectorAll(".style-toggle"));
   const globby = host.querySelector("tiny-assistant-character");
   const globbyStatus = host.querySelector(".tiny-assistant-status");
   const mapElement = document.querySelector(
@@ -35,6 +36,11 @@ export function initializeTinyAssistant(host) {
   let assistantSignatureBeforeSubmit = "";
   let watchedAssistantRoots = new WeakSet();
   let expandedPanelSide = "left";
+  let activeSpriteName =
+    styleToggles.find((button) => button.getAttribute("aria-checked") === "true")
+      ?.dataset.spriteName ||
+    host.getAttribute("sprite") ||
+    "globby";
   const globbyStartupMode = pageParams.get("globby")?.toLowerCase();
   const startWithGlobbyHidden = [
     "0",
@@ -555,6 +561,13 @@ export function initializeTinyAssistant(host) {
     await openChatOrSignIn();
   });
 
+  styleToggles.forEach((button) => {
+    button.addEventListener("click", () => {
+      setAssistantStyle(button.dataset.spriteName, button.dataset.spriteSrc);
+      hideGlobbyMenu();
+    });
+  });
+
   hideGlobbyButton?.addEventListener("click", () => {
     hideGlobbyMenu();
     setGlobbyVisible(false);
@@ -718,12 +731,36 @@ export function initializeTinyAssistant(host) {
       "aria-checked",
       String(followCursorEnabled),
     );
+    styleToggles.forEach((button) => {
+      button.setAttribute(
+        "aria-checked",
+        String(button.dataset.spriteName === activeSpriteName),
+      );
+    });
     if (panelMenuToggle) {
       panelMenuToggle.textContent =
         assistantBubble?.dataset.mode === "full" ? "Close chat" : "Open chat";
     }
   }
 
+  function setAssistantStyle(name, src) {
+    if (!globby || !name || !src) {
+      return;
+    }
+
+    activeSpriteName = name;
+    host.setAttribute("sprite", name);
+    globby.setAttribute("sprite-src", src);
+    globby.setAttribute("title", toSpriteLabel(name));
+    updateGlobbyMenuLabels();
+  }
+
+  function toSpriteLabel(name) {
+    return String(name)
+      .replace(/[-_]+/g, " ")
+      .replace(/\b\w/g, (letter) => letter.toUpperCase());
+  }
+
   async function patchArcgisMapSize() {
     if (!mapElement) {
       return;

src/components/tiny-arcgis-assistant.js

@@ -30,6 +30,7 @@
     <tiny-arcgis-assistant
       reference-element="#map"
       sprite-src="https://ceddc.github.io/tiny-assistant/assets/globby-spritesheet.webp"
+      sprites='{"globby":"https://ceddc.github.io/tiny-assistant/assets/globby-spritesheet.webp","clippy":"https://ceddc.github.io/tiny-assistant/assets/clippy-spritesheet.webp","boba":"https://ceddc.github.io/tiny-assistant/assets/boba-spritesheet.webp"}'
       heading="Tiny Assistant"
       description="Ask questions about this ArcGIS web map">
       <arcgis-assistant-navigation-agent></arcgis-assistant-navigation-agent>