From cc49a381c6968e5f5a437f18037f1e7b7d718720 Mon Sep 17 00:00:00 2001
From: Myron Blair <myronblair@outlook.com>
Date: Sat, 6 Jun 2026 11:23:30 +0000
Subject: [PATCH] Fix platform card clicks; revert onboarding to request-only
 flow

- Platform cards: replaced inline onclick with data attributes + event
  listeners to avoid JSON double-quote quoting bug that broke clicks
- Onboarding: reverted to original yes/no -> request accounts flow,
  removed alias-entry step that didn't work

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

diff --git a/index.php b/index.php
index 3d97e6e..811814c 100644
--- a/index.php
+++ b/index.php
@@ -551,30 +551,14 @@ 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="obShowAliasStep()" style="font-size:15px;padding:14px">✅ Yes — I have existing logins</button>
+        <button class="btn btn-gold" onclick="obShowStep2()" 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; Next</button>
-        <button class="btn btn-outline" onclick="obDismiss()" style="width:80px;font-size:15px">Done</button>
-      </div>
-    </div>
     <div id="ob-step2" style="display:none">
       <div style="display:flex;align-items:center;gap:10px;margin-bottom:18px">
-        <button onclick="obGoBack('ob-step2')" style="background:none;border:none;color:var(--cyan);cursor:pointer;font-size:22px;padding:0;line-height:1">←</button>
+        <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>
         <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>
@@ -1449,13 +1433,17 @@ function buildPlatforms() {
   if (grid) {
     grid.innerHTML = CFG.platforms.map(p => `
     <div class="platform-card" style="--p-color:${p.color};cursor:pointer"
-         onclick="openPlatform('${p.id}',${JSON.stringify(p.url)},${JSON.stringify(p.alias_param||'')})">
+         data-slug="${escHtml(p.id)}" data-url="${escHtml(p.url)}" data-param="${escHtml(p.alias_param||'')}">
       <div class="platform-img-wrap">
-        <img src="/assets/img/${p.id}.svg" alt="${p.name}" onerror="this.style.display='none'">
+        <img src="/assets/img/${p.id}.svg" alt="${escHtml(p.name)}" onerror="this.style.display='none'">
       </div>
-      <div class="platform-name">${p.name}</div>
+      <div class="platform-name">${escHtml(p.name)}</div>
       <div class="play-btn">TAP TO PLAY →</div>
     </div>`).join('');
+    grid.querySelectorAll('.platform-card[data-slug]').forEach(card => {
+      card.addEventListener('click', () =>
+        openPlatform(card.dataset.slug, card.dataset.url, card.dataset.param));
+    });
   }
 
   // Populate selects — clear dynamic options first to prevent duplicates on re-call
@@ -2141,60 +2129,13 @@ 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() {
-  obHideAll();
+  document.getElementById('ob-step1').style.display = 'none';
   document.getElementById('ob-step2').style.display = 'block';
   obLoadPlatforms();
 }
 
-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(()=>{});
-  }
-  // Advance to account request step so they can request any missing platforms
+function obRequestNew() {
   obShowStep2();
 }