Round 1
?
Will it be Red or Blue?
Click a color to guess!
🏆 Best Streak: 0
let state = { streak: 0, correct: 0, total: 0, current: null, locked: false };
function loadBest() {
return parseInt(localStorage.getItem("cg_best") || "0");
}
function saveBest(n) {
if (n > loadBest()) localStorage.setItem("cg_best", JSON.stringify(n));
}
function renderBest() {
document.getElementById("bestStreak").textContent = loadBest();
}
function newColor() {
const n = Math.floor(Math.random() * 13) + 1;
return n % 2 === 0 ? "red" : "blue";
}
function nextRound() {
state.current = newColor();
state.locked = false;
const box = document.getElementById("colorBox");
box.className = "color-box hidden";
box.textContent = "?";
document.getElementById("redBtn").disabled = false;
document.getElementById("blueBtn").disabled = false;
document.getElementById("nextBtn").style.display = "none";
document.getElementById("msgArea").textContent = "Red or Blue?";
document.getElementById("msgArea").className = "msg info";
document.getElementById("roundNum").textContent = state.total + 1;
}
function guess(chosen) {
if (state.locked) return;
state.locked = true;
state.total++;
document.getElementById("redBtn").disabled = true;
document.getElementById("blueBtn").disabled = true;
const box = document.getElementById("colorBox");
box.className = "color-box " + state.current + " reveal";
box.textContent = state.current === "red" ? "🔴" : "🔵";
const correct = chosen === state.current;
const msg = document.getElementById("msgArea");
if (correct) {
state.streak++;
state.correct++;
msg.textContent = "✅ Correct! It was " + state.current + "!";
msg.className = "msg ok";
} else {
state.streak = 0;
msg.textContent = "❌ Wrong! It was " + state.current + " (you guessed " + chosen + ")";
msg.className = "msg fail";
}
document.getElementById("streakNum").textContent = state.streak;
document.getElementById("correctNum").textContent = state.correct;
document.getElementById("totalNum").textContent = state.total;
saveBest(state.streak);
renderBest();
document.getElementById("nextBtn").style.display = "inline-block";
}
nextRound();
renderBest();