mirror of
https://github.com/myronblair/tomtomgames
synced 2026-06-30 17:51:08 -05:00
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:
@@ -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 & 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('');
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user