<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Yoosful Game — Match Tools to Tasks</title> <style> * { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; }
h1 { font-size: 2.6rem; margin: 0; background: linear-gradient(135deg, #3e2a1f, #b97f2e); background-clip: text; -webkit-background-clip: text; color: transparent; letter-spacing: -0.5px; text-shadow: 2px 2px 8px rgba(0,0,0,0.1); } yoosful game
/* header area */ .game-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; margin-bottom: 28px; padding-bottom: 12px; border-bottom: 3px dashed #ffb347; } // remove task from currentTasks, add to completed
/* stats row */ .stats-row { display: flex; justify-content: space-between; margin: 20px 8px 18px 8px; font-weight: 600; background: #e9dbc7; padding: 10px 20px; border-radius: 48px; } "${selectedTask
.streak-box span, .best-box span { font-weight: 800; color: #c45100; }
// core matching logic function handleToolMatch(toolName) { // if game is finished (no current tasks but win condition modal exists) if (currentTasks.length === 0 && completedTasks.length === TASKS.length) { setMessage("🎉 Game finished! Press 'New Game' to play more.", true); return; } if (selectedTaskId === null) { setMessage("⚠️ First click on a task you want to solve!", true); return; } // find selected task object in currentTasks const selectedTask = currentTasks.find(t => t.id === selectedTaskId); if (!selectedTask) { // maybe already completed setMessage("⛔ This task is no longer available. Select another.", true); selectedTaskId = null; renderTasks(); return; } // verify match const isMatch = (selectedTask.requiredTool === toolName); if (isMatch) { // CORRECT MATCH! // remove task from currentTasks, add to completed const index = currentTasks.findIndex(t => t.id === selectedTaskId); if (index !== -1) currentTasks.splice(index, 1); completedTasks.push(selectedTask.id); // points: base + streak bonus const basePoints = 10; const streakBonus = Math.min(currentStreak, 10); // max +10 bonus const pointsEarned = basePoints + streakBonus; score += pointsEarned; currentStreak += 1; if (currentStreak > bestStreak) bestStreak = currentStreak; setMessage(`✅ Great! +${pointsEarned} pts (streak x${currentStreak-1}→${currentStreak})`); selectedTaskId = null; // clear selection renderTasks(); renderTools(); // re-render tools (no change but consistency) updateUIStats(); checkWin(); } else { // wrong match: break streak const correctToolObj = TOOLS.find(t => t.name === selectedTask.requiredTool); const correctToolName = correctToolObj ? correctToolObj.display : selectedTask.requiredTool; setMessage(`❌ Wrong! "${selectedTask.name}" needs ${correctToolName}. Streak reset.`, true); currentStreak = 0; // keep task, just reset streak and clear selection? we keep selection to let them try again. // but we also reset selectedTaskId? For better UX, we keep it selected? but better to keep selected. // let them retry with the same selected task. updateUIStats(); renderTasks(); // re-render to show still selected // also highlight no extra effect } }