From d8abe89cb7c0a80733f30e2d8ee612514c226115 Mon Sep 17 00:00:00 2001
From: jwinterm <johnwmurphy@gmail.com>
Date: Sun, 12 Jul 2026 08:55:24 -0400
Subject: [PATCH] fix(home): align splash legend + make the character creator
 discoverable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Splash legend (screenManager.js): every row now uses a uniform 2-cell icon slot at
  a shared left edge and a single fixed text column, so the four icons + descriptions
  line up regardless of glyph width (was: per-row span math + leading-space hacks →
  ragged columns, player sprite offset).
- Character creator was already on the homepage but read like an admin control: the
  button showed the DEFAULT character label "Operator". Renamed the default to
  "Adventurer" (charCustomize.js), switched the icon 🧍→🎭, and gave it a clear
  "Create / customize your character" tooltip so it announces itself.
---
 html/index.html                    |  4 +--
 html/js/core/singlePlayerAvatar.js |  6 ++++-
 html/js/display/screenManager.js   | 41 +++++++++++++++---------------
 html/js/render/charCustomize.js    |  2 +-
 4 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/html/index.html b/html/index.html
index a7b7ab3..b223297 100644
--- a/html/index.html
+++ b/html/index.html
@@ -125,8 +125,8 @@
             <button id="tavernButton" class="ctrl-btn ctrl-btn--tavern" style="display: none;" onclick="window.location.href='/tavern'">
                 🍺 <span class="lbl-full">TAVERN</span><span class="lbl-short">TAVERN</span>
             </button>
-            <button id="characterButton" class="ctrl-btn ctrl-btn--character">
-                🧍 <span id="characterButtonLabel" class="lbl-full">CHARACTER</span><span class="lbl-short">CHAR</span>
+            <button id="characterButton" class="ctrl-btn ctrl-btn--character" title="Create / customize your character">
+                🎭 <span id="characterButtonLabel" class="lbl-full">CHARACTER</span><span class="lbl-short">CHAR</span>
             </button>
             <button id="shopButton" class="ctrl-btn ctrl-btn--shop" style="display: none;">
                 🛒 SHOP
diff --git a/html/js/core/singlePlayerAvatar.js b/html/js/core/singlePlayerAvatar.js
index 96e3439..9b8f3a3 100644
--- a/html/js/core/singlePlayerAvatar.js
+++ b/html/js/core/singlePlayerAvatar.js
@@ -90,8 +90,12 @@
                 return;
             }
             var info = root.RK.appearance(this._appearance || DEFAULT_APPEARANCE);
+            // Show the chosen character's name, but keep it clearly a customize control (the leading
+            // 🎭 + this title) so it doesn't read like a mode/role button.
             label.textContent = (info && info.label ? info.label : 'CHARACTER').toUpperCase();
-            btn.title = info && info.premium ? 'Premium character' : 'Character';
+            btn.title = 'Create / customize your character'
+                + (info && info.label ? ' — currently ' + info.label : '')
+                + (info && info.premium ? ' (premium)' : '');
         },
 
         _baseCanvas: function () {
diff --git a/html/js/display/screenManager.js b/html/js/display/screenManager.js
index 546e449..d67a6d6 100644
--- a/html/js/display/screenManager.js
+++ b/html/js/display/screenManager.js
@@ -156,43 +156,42 @@ var ScreenManager = {
         const treasureTile = (typeof GameTiles !== 'undefined' && GameTiles.getTreasureTile) 
             ? GameTiles.getTreasureTile() 
             : (this._cryptoType === 'XMR' ? '$M' : '$W');
+        // Every row uses a uniform icon slot at `centerX` and a single fixed text column, so the
+        // icons share a left edge and all four descriptions line up — regardless of whether the
+        // icon is a 1-cell glyph (>, ~, $) or the 2-cell player avatar sprite.
         const legendItems = [
-            { tile: "@2", text: "This is you", role: "player", span: 2 },
-            { tile: ">", text: " Escape the dungeon" }, 
-            { tile: "~", text: " Avoid the monster" },
+            { tile: "@2", text: "This is you", role: "player" },
+            { tile: ">", text: "Escape the dungeon" },
+            { tile: "~", text: "Avoid the monster" },
             { tile: treasureTile, text: "Secure the bag" }
         ];
-        
+
         if (window.SinglePlayerAvatar && window.SinglePlayerAvatar.clearOverlay) {
             window.SinglePlayerAvatar.clearOverlay();
         }
 
+        const ICON_COLS = 2;                                     // uniform icon slot width
         const centerX = Math.floor(this._screenWidth / 2) - 10;
+        const textX = centerX + ICON_COLS + 1;                   // one fixed text column for every row
         for (let item of legendItems) {
-            let x = centerX;
-            const span = item.span || item.tile.length || 1;
             let iconDrawn = false;
-            
+
             if (item.role === "player" && window.SinglePlayerAvatar && window.SinglePlayerAvatar.drawLegendIcon) {
-                iconDrawn = window.SinglePlayerAvatar.drawLegendIcon(x, y, {
+                iconDrawn = window.SinglePlayerAvatar.drawLegendIcon(centerX, y, {
                     fallbackTile: item.tile,
-                    cols: span
+                    cols: ICON_COLS
                 });
             }
 
-            // Draw the special tile when the resolved avatar visual is not canvas-ready.
-            if (!iconDrawn && window.options?.tileMap?.hasOwnProperty(item.tile)) {
-                display.draw(x, y, item.tile, "transparent", "transparent");
-                x += span;
-            } else if (!iconDrawn) {
-                display.draw(x, y, "?", "transparent", "transparent");
-                x += 1;
-            } else {
-                x += span;
+            // Grid-tile icons: centre the (1-cell) glyph within the 2-cell slot so it aligns under
+            // the player sprite above it.
+            if (!iconDrawn) {
+                const glyph = window.options?.tileMap?.hasOwnProperty(item.tile) ? item.tile : "?";
+                const gx = centerX + Math.floor((ICON_COLS - (glyph.length || 1)) / 2);
+                display.draw(gx, y, glyph, "transparent", "transparent");
             }
-            
-            // Draw the descriptive text
-            this.drawText(x, y, item.text);
+
+            this.drawText(textX, y, item.text);
             y++;
         }
         
diff --git a/html/js/render/charCustomize.js b/html/js/render/charCustomize.js
index ce61a4c..474ae37 100644
--- a/html/js/render/charCustomize.js
+++ b/html/js/render/charCustomize.js
@@ -28,7 +28,7 @@
 
     function baseAppearances() {
         var list = [
-            { id: 'default', label: 'Operator', kind: 'color', color: '#9aa4b2' },
+            { id: 'default', label: 'Adventurer', kind: 'color', color: '#9aa4b2' },
             { id: 'green', label: 'Verdant', kind: 'color', color: '#3fb950' },
             { id: 'amber', label: 'Amber', kind: 'color', color: '#d29922' },
             { id: 'red', label: 'Crimson', kind: 'color', color: '#f85149' }