Yoosful Game Better ⭐
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #1d140c; }
<div class="stats-row"> <div class="streak-box">🔥 Streak: <span id="streakCount">0</span></div> <div class="best-box">🏆 Best streak: <span id="bestStreak">0</span></div> <div class="message-area" id="gameMessage">✨ Select a task, then a tool!</div> </div> yoosful game
.task-list { display: flex; flex-direction: column; gap: 14px; } // reset score display updateUIStats()
const TOOLS = [ { name: "wrench", emoji: "🔧", display: "Wrench" }, { name: "hammer", emoji: "🔨", display: "Hammer" }, { name: "tape measure", emoji: "📏", display: "Tape Measure" }, { name: "scissors", emoji: "✂️", display: "Scissors" }, { name: "screwdriver", emoji: "🪛", display: "Screwdriver" }, { name: "level", emoji: "📐", display: "Spirit Level" }, { name: "paintbrush", emoji: "🖌️", display: "Paintbrush" }, { name: "pliers", emoji: "🔌", display: "Pliers" } ]; }
.score-board { background: #2c2b26
<div class="game-container" id="gameRoot"> <div class="game-header"> <div class="title-badge"> <h1>🛠️ Yoosful Game</h1> <div class="yoosful-tag">⚡ match · earn · useful</div> </div> <div class="score-board"> <span class="score-label">SCORE</span> <span class="score-value" id="scoreDisplay">0</span> </div> </div>
// reset full game function resetGame() { // reset tasks (deep copy) currentTasks = TASKS.map(t => ({ ...t })); completedTasks = []; score = 0; currentStreak = 0; selectedTaskId = null; // best streak is kept (but we reset best if reset? feature: keep best streak personal best across resets) // but we will NOT reset bestStreak automatically, only if user clicks new game we keep best? yes it's lifetime best. // reset score display updateUIStats(); setMessage("🔄 New round! Match tools to tasks. Good luck!"); renderTasks(); renderTools(); // also clear any win modal if active removeWinModal(); }
.score-board { background: #2c2b26; padding: 8px 20px; border-radius: 100px; color: #ffeaac; font-weight: bold; font-size: 1.6rem; display: flex; align-items: baseline; gap: 8px; box-shadow: inset 0 1px 3px #5f5b4b, 0 6px 0 #141210; }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #1d140c; }
<div class="stats-row"> <div class="streak-box">🔥 Streak: <span id="streakCount">0</span></div> <div class="best-box">🏆 Best streak: <span id="bestStreak">0</span></div> <div class="message-area" id="gameMessage">✨ Select a task, then a tool!</div> </div>
.task-list { display: flex; flex-direction: column; gap: 14px; }
const TOOLS = [ { name: "wrench", emoji: "🔧", display: "Wrench" }, { name: "hammer", emoji: "🔨", display: "Hammer" }, { name: "tape measure", emoji: "📏", display: "Tape Measure" }, { name: "scissors", emoji: "✂️", display: "Scissors" }, { name: "screwdriver", emoji: "🪛", display: "Screwdriver" }, { name: "level", emoji: "📐", display: "Spirit Level" }, { name: "paintbrush", emoji: "🖌️", display: "Paintbrush" }, { name: "pliers", emoji: "🔌", display: "Pliers" } ];
<div class="game-container" id="gameRoot"> <div class="game-header"> <div class="title-badge"> <h1>🛠️ Yoosful Game</h1> <div class="yoosful-tag">⚡ match · earn · useful</div> </div> <div class="score-board"> <span class="score-label">SCORE</span> <span class="score-value" id="scoreDisplay">0</span> </div> </div>
// reset full game function resetGame() { // reset tasks (deep copy) currentTasks = TASKS.map(t => ({ ...t })); completedTasks = []; score = 0; currentStreak = 0; selectedTaskId = null; // best streak is kept (but we reset best if reset? feature: keep best streak personal best across resets) // but we will NOT reset bestStreak automatically, only if user clicks new game we keep best? yes it's lifetime best. // reset score display updateUIStats(); setMessage("🔄 New round! Match tools to tasks. Good luck!"); renderTasks(); renderTools(); // also clear any win modal if active removeWinModal(); }
.score-board { background: #2c2b26; padding: 8px 20px; border-radius: 100px; color: #ffeaac; font-weight: bold; font-size: 1.6rem; display: flex; align-items: baseline; gap: 8px; box-shadow: inset 0 1px 3px #5f5b4b, 0 6px 0 #141210; }