Draw Or Holster? Test Your Split-Second Decision Skills

`),
section(`

React to real-world style scenarios. Choose Draw only for imminent deadly threats; choose Holster otherwise. Fast, correct answers earn bonuses.

• Correct: +${cfg.correct_base} • Under ${secs(cfg.speed_bonus_ms)} +${cfg.speed_bonus_points}
• Wrong: ${cfg.wrong} (${cfg.wrong_obvious} if you mishandle an obvious threat)
• Timeout: ${cfg.timeout}

Play
How to Play

`),
section(`

`)
);
$(‘#playBtn’).onclick = startGame;
$(‘#howBtn’).onclick = viewHow;
renderLocalLeaderboard();
}

function viewHow(){
screen(
band(`

`),
section(`

1. You have ${secs(cfg.round_time_ms)} per scenario.
2. Tap Draw for imminent deadly threats.
3. Tap Holster if force is not justified.
4. Use cover, assess, and avoid unnecessary escalation.

Back
Play

`)
);
$(‘#backBtn’).onclick = viewHome;
$(‘#playBtn’).onclick = startGame;
}

function startGame(){ score=0; lives=cfg.lives; streak=0; idx=0; list=[…DATA.scenarios].sort(()=>Math.random()-0.5); nextRound(); }

function nextRound(){
if (lives<=0 || idx>=list.length) return gameOver();
const s = list[idx]; handled=false;

screen(
band(`

`),
section(`

${s.text}

Draw
Holster

`)
);

$(‘#drawBtn’).onclick = ()=>answer(“draw”);
$(‘#holsterBtn’).onclick = ()=>answer(“holster”);

const total = cfg.round_time_ms;
const start = Date.now(); roundStart=start;
clearInterval(timer);
timer = setInterval(()=>{
if (handled){ clearInterval(timer); return; }
const elapsed = Date.now()-start;
const remain = Math.max(0, total-elapsed);
const bar = $(‘#bar’); if (bar) bar.style.width = (remain/total*100)+”%”;
if (remain===0){ clearInterval(timer); onTimeout(); }
}, 50);
}

function disableButtons(){ const d=$(‘#drawBtn’), h=$(‘#holsterBtn’); if(d) d.disabled=true; if(h) h.disabled=true; }
function onTimeout(){
if (handled) return; handled=true; disableButtons();
const s = list[idx]; score += cfg.timeout; lives=Math.max(0,lives-1); streak=0;
feedback(false, `⏳ Time’s up! ${cfg.timeout} pts. ${s.explanation}`);
}

function answer(choice){
if (handled) return; handled=true; clearInterval(timer); disableButtons();
const s = list[idx]; const ms = Date.now()-roundStart; const correct = (choice===s.correctAction);
let delta=0;
if (correct){ delta+=cfg.correct_base; if (ms<=cfg.speed_bonus_ms) delta+=cfg.speed_bonus_points; streak+=1; }
else { delta+= (s.penaltyType===”obvious_threat”)? cfg.wrong_obvious : cfg.wrong; lives=Math.max(0,lives-1); streak=0; }
score += delta;
const msg = correct
? `✅ Correct ${ms<=cfg.speed_bonus_ms ? “(FAST +”+cfg.speed_bonus_points+”)” : “”} • +${delta} pts. ${s.explanation}`
: `❌ Wrong • ${delta} pts. ${s.explanation}`;
feedback(correct, msg);
}

function feedback(_ok, msg){
const over = lives<=0;
$(‘#fb’).innerHTML = msg + `

${over ? “Game Over” : “Next”}

`;
$(‘#nextBtn’).onclick = ()=>{ over ? gameOver() : (idx++, nextRound()); };
}

/* ====== Local leaderboard ====== */
function localKey(){ return “doh_local_leaderboard”; }
function renderLocalLeaderboard(){
const lb = JSON.parse(localStorage.getItem(localKey()) || “[]”).slice(0,10);
const elb = $(‘#lb’);
elb.innerHTML = lb.length
? `

${lb.map((r,i)=>`
1. ${i+1}. ${r.name||”Anon”}${r.score}

`).join(“”)}

`
: “No scores yet. Play a round!”;
}
function postLocalScore(){
const nameKey = “doh_name”;
if (!name){
name = localStorage.getItem(nameKey) || prompt(“Enter a display name for the leaderboard (or leave blank):”) || “Anon”;
localStorage.setItem(nameKey, name);
}
const lb = JSON.parse(localStorage.getItem(localKey()) || “[]”);
lb.push({ name, score, ts: Date.now() });
lb.sort((a,b)=>b.score-a.score);
localStorage.setItem(localKey(), JSON.stringify(lb.slice(0,50)));
const ps = $(‘#postStatus’); if (ps) ps.textContent = “Score saved locally.”;
}

/* ====== Game Over + Sharing (toast + QR modal image) ====== */
function gameOver(){
screen(
band(`
`),
section(`

`),
section(`

`)
);
$(‘#playBtn’).onclick = startGame;
$(‘#homeBtn’).onclick = viewHome;

postLocalScore();
renderLocalLeaderboard();

const url = pageUrlWithScore(score, name);
const shareText = `I scored ${score} in Concealed Nation’s “Draw or Holster” — can you beat me?`;

$(‘#shareNativeBtn’).onclick = async ()=>{
if (navigator.share) {
try { await navigator.share({ title:”Draw or Holster”, text:shareText, url }); toast(“Shared!”); }
catch(e){}
} else {
await copyToClipboard(url);
}
};
$(‘#copyLinkBtn’).onclick = ()=> copyToClipboard(url);
$(‘#tweetBtn’).onclick = ()=>{ openShare(“https://twitter.com/intent/tweet?text=”+encodeURIComponent(shareText)+”&url=”+encodeURIComponent(url)); toast(“Opening Twitter…”); };
$(‘#fbBtn’).onclick = ()=>{ openShare(“https://www.facebook.com/sharer/sharer.php?u=”+encodeURIComponent(url)); toast(“Opening Facebook…”); };
$(‘#emailBtn’).onclick = ()=>{ location.href = “https://concealednation.org/2025/08/draw-or-holster-test-your-split-second-decision-skills/mailto:?subject=”+encodeURIComponent(“My Draw or Holster score”)+”&body=”+encodeURIComponent(shareText+”nn”+url); };

// QR modal using a hosted generator image (no JS lib)
$(‘#qrBtn’).onclick = ()=>{
const img = $(‘#doh-qr-img’);
img.src = “https://api.qrserver.com/v1/create-qr-code/?size=240×240&data=” + encodeURIComponent(url);
qrModal.classList.add(‘open’);
};
}

/* ====== Helpers to render band/section ====== */
function band(html){ return `

${html}

`; }
function section(html){ return `

${html}

`; }

/* ====== Modal wiring ====== */
$(‘#doh-qr-close’).onclick = ()=> qrModal.classList.remove(‘open’);
qrModal.addEventListener(‘click’, (e)=> { if (e.target === qrModal) qrModal.classList.remove(‘open’); });
$(‘#doh-qr-copy’).onclick = ()=> copyToClipboard(pageUrlWithScore(score, name));
$(‘#doh-qr-share’).onclick = async ()=>{
const url = pageUrlWithScore(score, name);
if (navigator.share) {
try { await navigator.share({ title:”Draw or Holster”, text:`I scored ${score}!`, url }); toast(“Shared!”); }
catch(e){}
} else {
await copyToClipboard(url);
}
};

/* ====== Boot with safety net ====== */
try { viewHome(); }
catch (e) { console.error(e); showError(“Game failed to load: ” + (e && e.message ? e.message : e)); }
})();