Clean up alias UX: remove duplicate Play Now, add alias step to onboarding

- 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>
This commit is contained in:
2026-06-06 11:19:42 +00:00
parent 483026fd07
commit 02dbda7c74
+68 -9
View File
@@ -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('');
}