fix: player list styling and positioning tweaks

- Empty slots use subtle gray dashed line instead of solid characters
- Left/Right positions anchor to screen edges, never obscuring room code
- Player list enabled by default
- Fix VALID_TRANSITIONS.get() crash (plain object, not Map)

Made-with: Cursor

js/player-list.js

@@ -186,7 +186,7 @@ export class PlayerList {
 
       const name = document.createElement('span');
       name.className = 'player-slot-name empty';
-      name.textContent = '────────';
+      name.textContent = '\u00A0';
 
       slot.appendChild(number);
       slot.appendChild(name);
@@ -219,10 +219,11 @@ export class PlayerList {
 
     for (const slot of this._slots) {
       slot.nameEl.style.fontSize = fontPx;
+      slot.element.querySelector('.player-slot-number').style.fontSize = fontPx;
       if (slot.nameEl.classList.contains('filled')) {
         slot.nameEl.style.color = textColor;
       } else {
-        slot.nameEl.style.color = emptyColor;
+        slot.nameEl.style.borderBottomColor = emptyColor;
       }
     }
   }
@@ -261,14 +262,15 @@ export class PlayerList {
           slot.nameEl.style.opacity = '1';
         }
       } else if (slot.filled) {
-        slot.nameEl.textContent = '────────';
+        slot.nameEl.textContent = '\u00A0';
         slot.nameEl.classList.remove('filled');
         slot.nameEl.classList.add('empty');
         slot.filled = false;
         slot.nameEl.style.transition = '';
         slot.nameEl.style.opacity = '1';
+        slot.nameEl.style.color = 'transparent';
         if (inputs) {
-          slot.nameEl.style.color = inputs.emptyColor.value;
+          slot.nameEl.style.borderBottomColor = inputs.emptyColor.value;
         }
       }
     }

js/state-manager.js

@@ -331,7 +331,7 @@ export class OverlayManager {
    */
   #transitionTo(next) {
     const current = this.#state;
-    if (!VALID_TRANSITIONS.get(current)?.has(next)) {
+    if (!VALID_TRANSITIONS[current]?.has(next)) {
       return;
     }
 

optimized-controls.html

@@ -317,14 +317,14 @@
         }
 
         #player-list-container.player-list-position-left {
-            right: 55%;
+            left: 24px;
             top: 50%;
             transform: translateY(-50%);
-            align-items: flex-end;
+            align-items: flex-start;
         }
 
         #player-list-container.player-list-position-right {
-            left: 55%;
+            right: 24px;
             top: 50%;
             transform: translateY(-50%);
             align-items: flex-start;
@@ -353,12 +353,17 @@
         }
 
         .player-slot-name.empty {
-            color: rgba(255,255,255,0.25);
-            font-style: italic;
+            color: transparent;
+            font-style: normal;
+            border-bottom: 2px dashed rgba(255,255,255,0.2);
+            min-width: 120px;
+            line-height: 0.8;
         }
 
         .player-slot-name.filled {
             color: #ffffff;
+            border-bottom: none;
+            min-width: 0;
         }
 
         /* Debug dashboard */
@@ -661,13 +666,13 @@
                 <div class="section-content">
                     <div class="control-row">
                         <label>Enable Player List:</label>
-                        <input type="checkbox" id="player-list-enabled">
+                        <input type="checkbox" id="player-list-enabled" checked>
                     </div>
                     <div class="control-row">
                         <label>Position:</label>
                         <select id="player-list-position">
-                            <option value="left">Left of Code</option>
-                            <option value="right">Right of Code</option>
+                            <option value="left">Left Side</option>
+                            <option value="right">Right Side</option>
                         </select>
                     </div>
                     <div class="control-row">