From 02dbda7c746338a8a87f9b715e0369c9efce7fc2 Mon Sep 17 00:00:00 2001
From: Myron Blair <myronblair@outlook.com>
Date: Sat, 6 Jun 2026 11:19:42 +0000
Subject: [PATCH] Clean up alias UX: remove duplicate Play Now, add alias step
 to onboarding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Removed Play Now (▶) button from profile aliases tab — Play Now section
  on home page is the one place to launch platforms
- Onboarding: "Yes I have existing logins" now leads to a new alias-entry
  step where the player enters their username per active platform; saved
  on submit, dismisses onboarding
- "No, I want new logins" still goes to the account-request step
- Back arrow on each step returns to the opening question
- obHideAll/obGoBack helpers keep step transitions clean

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.php | 77 ++++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 68 insertions(+), 9 deletions(-)

diff --git a/index.php b/index.php
index fdd542d..bdae164 100644
--- a/index.php
+++ b/index.php
@@ -551,14 +551,30 @@ body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(
         <div style="font-size:14px;color:var(--text2);line-height:1.7">Do you already have a username/login<br>on any of our game platforms?</div>
       </div>
       <div style="display:flex;flex-direction:column;gap:10px">
-        <button class="btn btn-gold" onclick="obShowStep2()" style="font-size:15px;padding:14px">✅ Yes — I have existing logins</button>
-        <button class="btn" onclick="obRequestNew()" style="background:rgba(0,229,255,.07);border:1px solid rgba(0,229,255,.2);color:var(--cyan);padding:14px;font-size:15px">🆕 No — I want to request new logins</button>
+        <button class="btn btn-gold" onclick="obShowAliasStep()" style="font-size:15px;padding:14px">✅ Yes — I have existing logins</button>
+        <button class="btn" onclick="obShowStep2()" style="background:rgba(0,229,255,.07);border:1px solid rgba(0,229,255,.2);color:var(--cyan);padding:14px;font-size:15px">🆕 No — I want to request new logins</button>
         <button onclick="obDismiss()" style="background:none;border:none;color:var(--text2);font-size:14px;cursor:pointer;margin-top:2px;padding:8px">Skip for now →</button>
       </div>
     </div>
+    <!-- Alias entry step — for players who already have platform logins -->
+    <div id="ob-step-aliases" style="display:none">
+      <div style="display:flex;align-items:center;gap:10px;margin-bottom:18px">
+        <button onclick="obGoBack('ob-step-aliases')" style="background:none;border:none;color:var(--cyan);cursor:pointer;font-size:22px;padding:0;line-height:1">←</button>
+        <div>
+          <div style="font-family:'Exo 2',sans-serif;font-weight:900;font-size:17px">Your Game Usernames</div>
+          <div style="font-size:14px;color:var(--text2);margin-top:2px">Enter the username you use on each platform</div>
+        </div>
+      </div>
+      <div id="ob-alias-list" style="margin-bottom:14px;max-height:320px;overflow-y:auto"></div>
+      <div id="ob-alias-alert" class="alert" style="margin-bottom:10px"></div>
+      <div style="display:flex;gap:8px">
+        <button class="btn btn-gold" onclick="obSaveAliases()" style="flex:1">💾 Save &amp; Continue</button>
+        <button class="btn btn-outline" onclick="obDismiss()" style="width:80px;font-size:15px">Skip</button>
+      </div>
+    </div>
     <div id="ob-step2" style="display:none">
       <div style="display:flex;align-items:center;gap:10px;margin-bottom:18px">
-        <button onclick="document.getElementById('ob-step2').style.display='none';document.getElementById('ob-step1').style.display='block';" style="background:none;border:none;color:var(--cyan);cursor:pointer;font-size:22px;padding:0;line-height:1">←</button>
+        <button onclick="obGoBack('ob-step2')" style="background:none;border:none;color:var(--cyan);cursor:pointer;font-size:22px;padding:0;line-height:1">←</button>
         <div>
           <div style="font-family:'Exo 2',sans-serif;font-weight:900;font-size:17px">Request Game Accounts</div>
           <div style="font-size:14px;color:var(--text2);margin-top:2px">Select platforms — our team will create your logins</div>
@@ -2125,14 +2141,60 @@ function obTogglePlatform(id, checked, labelId) {
   if (lbl) lbl.style.borderColor = checked ? 'rgba(240,192,64,.4)' : 'var(--border)';
 }
 
+function obHideAll() {
+  ['ob-step1','ob-step-aliases','ob-step2'].forEach(id => {
+    const el = document.getElementById(id); if (el) el.style.display = 'none';
+  });
+}
+
+function obGoBack(fromStep) {
+  obHideAll();
+  document.getElementById('ob-step1').style.display = 'block';
+}
+
 function obShowStep2() {
-  document.getElementById('ob-step1').style.display = 'none';
+  obHideAll();
   document.getElementById('ob-step2').style.display = 'block';
   obLoadPlatforms();
 }
 
-function obRequestNew() {
-  obShowStep2();
+async function obShowAliasStep() {
+  obHideAll();
+  document.getElementById('ob-step-aliases').style.display = 'block';
+  const el = document.getElementById('ob-alias-list');
+  el.innerHTML = '<div style="color:var(--text2);text-align:center;padding:12px;font-size:15px">Loading...</div>';
+  const d = await api('/api/platforms.php?action=list').catch(()=>({success:false}));
+  if (!d.success || !d.platforms.length) {
+    el.innerHTML = '<div style="color:var(--text2);text-align:center;padding:12px;font-size:15px">No platforms configured yet.</div>';
+    return;
+  }
+  el.innerHTML = d.platforms.map(p => `
+    <div style="display:flex;align-items:center;gap:10px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:8px">
+      <div style="width:10px;height:10px;border-radius:50%;background:${p.color};flex-shrink:0;box-shadow:0 0 6px ${p.color}"></div>
+      <div style="flex:1;min-width:0">
+        <div style="font-family:'Exo 2',sans-serif;font-weight:700;font-size:14px;margin-bottom:4px">${escHtml(p.name)}</div>
+        <input type="text" id="ob-alias-${p.id}" maxlength="100"
+          placeholder="Your username on ${escHtml(p.name)}"
+          value="${escHtml(savedAliases[p.id]||'')}"
+          style="width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:7px 10px;color:var(--text);font-size:14px;font-family:'Rajdhani',sans-serif;outline:none"
+          onfocus="this.style.borderColor='var(--cyan)'" onblur="this.style.borderColor=''">
+      </div>
+    </div>`).join('');
+  window._obAliasPlatforms = d.platforms;
+}
+
+async function obSaveAliases() {
+  const platforms = window._obAliasPlatforms || [];
+  const toSave = platforms.filter(p => {
+    const v = document.getElementById('ob-alias-' + p.id)?.value.trim();
+    return v && v !== (savedAliases[p.id] || '');
+  });
+  for (const p of toSave) {
+    const alias = document.getElementById('ob-alias-' + p.id).value.trim();
+    savedAliases[p.id] = alias;
+    await api('/api/game_aliases.php?action=save', { platform_slug: p.id, alias }).catch(()=>{});
+  }
+  obDismiss();
 }
 
 async function obSubmitRequests() {
@@ -2641,9 +2703,6 @@ function renderGameAliasList(platforms) {
           value="${escHtml(savedAliases[p.id] || '')}"
           onchange="saveOneAlias('${p.id}',this.value)">
       </div>
-      <a href="${escHtml(p.url)}" target="_blank"
-        style="flex-shrink:0;width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:16px"
-        title="Play ${escHtml(p.name)}">▶</a>
     </div>`).join('');
 }