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