.task-card { background: white; border-radius: 40px; padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all 0.2s ease; border: 2px solid #ffcf8a; box-shadow: 0 5px 0 #c2893c; }
body { background: linear-gradient(145deg, #1a472a 0%, #0e2a1a 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: 'Segoe UI', 'Poppins', system-ui, -apple-system, 'Inter', sans-serif; margin: 0; padding: 20px; } yoosful game
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #1d140c; } // remove task from currentTasks, add to completed
<script> // ---------- YOOSFUL GAME DATA ---------- // Each task has a unique id, name, emoji, and required tool name (key) const TASKS = [ { id: 0, name: "Loosen rusty bolt", emoji: "🔩", requiredTool: "wrench", description: "needs grip & torque" }, { id: 1, name: "Hang a picture frame", emoji: "🖼️", requiredTool: "hammer", description: "nail it gently" }, { id: 2, name: "Measure window width", emoji: "📏", requiredTool: "tape measure", description: "accurate length" }, { id: 3, name: "Cut a cardboard box", emoji: "📦", requiredTool: "scissors", description: "clean cut" }, { id: 4, name: "Tighten loose screw", emoji: "🧰", requiredTool: "screwdriver", description: "cross or flat" }, { id: 5, name: "Level a shelf", emoji: "📐", requiredTool: "level", description: "bubble leveling" }, { id: 6, name: "Paint a wall patch", emoji: "🎨", requiredTool: "paintbrush", description: "smooth stroke" }, { id: 7, name: "Cut a wire", emoji: "⚡", requiredTool: "pliers", description: "strip & snip" } ]; "${selectedTask
.tool-emoji { font-size: 2.3rem; }
// 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 } }
.reset-btn { background: #4a5b6e; box-shadow: 0 6px 0 #2c3a47; }