[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":29,"_34":12,"_35":12,"_36":12,"_37":12,"_38":-5,"_39":40},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","67d1a73d8b34819195bb9b52fb1658f2","versionInt","title","Top Down Robot Game","type","code/react","content","import React, { useEffect, useState } from \"react\";\n\n// We'll create a 2D grid with a guaranteed path from top-left (start) to bottom-right (end).\n// In each level, 3 coins (marked 'C') will be placed randomly along that path (excluding the start/end).\n// Collecting a coin increments a per-level coin count that only adds to your total score when you win the level.\n// We also introduce a timer (the time spent in \"input\" mode) and a minimal path calculation.\n// The user can get extra bonus points for:\n// - Quicker decisions (less time in \"input\" mode).\n// - Fewer moves used compared to the minimal path.\n// If the robot goes off the grid, into a hole, or fails to reach the goal once commands are finished, it's game over.\n// Losing resets your total score to 0.\n\n// -------------------------------------------------------\n// Adjust these constants to tune scoring\n// -------------------------------------------------------\n// For time-based bonus, the user starts with TIME_BONUS_MAX points\n// and loses TIME_BONUS_DECAY points per second in input mode, down to a minimum of 0.\n\nconst TIME_BONUS_MAX = 10;\nconst TIME_BONUS_DECAY = 1; // lose 1 point per second\n\n// For move-based bonus, we compute minimal path length, then compare it to the user commands.\n// We start with MOVE_BONUS_MAX if they matched or used fewer moves than the minimal path,\n// otherwise we subtract 1 point for each move over minimal, down to a min of 0.\n\nconst MOVE_BONUS_MAX = 5;\n\n// -------------------------------------------------------\n\nfunction generateLevel(rows = 10, cols = 10) {\n // Create an empty grid\n const grid = Array.from({ length: rows }, () => Array(cols).fill(\".\")); // '.' = hole, '#' = land\n const path = [];\n\n // Carve a guaranteed path from (0,0) to (rows-1, cols-1) and store it in 'path'\n let r = 0;\n let c = 0;\n grid[r][c] = \"#\";\n path.push([r, c]);\n\n while (r < rows - 1 || c < cols - 1) {\n if (r === rows - 1) {\n // must go right\n c += 1;\n } else if (c === cols - 1) {\n // must go down\n r += 1;\n } else {\n // pick down or right randomly\n const goDown = Math.random() < 0.5;\n if (goDown) {\n r += 1;\n } else {\n c += 1;\n }\n }\n grid[r][c] = \"#\";\n path.push([r, c]);\n }\n\n // Fill the rest of the grid randomly (65% land, 35% hole)\n for (let row = 0; row < rows; row++) {\n for (let col = 0; col < cols; col++) {\n if (grid[row][col] !== \"#\") {\n grid[row][col] = Math.random() < 0.65 ? \"#\" : \".\";\n }\n }\n }\n\n // Place up to 3 coins on random spots along the path (excluding start and end)\n const numCoins = 3;\n const pathLength = path.length;\n if (pathLength > 2) {\n // We can place coins on path indices from 1..(pathLength-2)\n const availableIndices = [];\n for (let i = 1; i < pathLength - 1; i++) {\n availableIndices.push(i);\n }\n // Shuffle the array\n availableIndices.sort(() => Math.random() - 0.5);\n\n const coinsToPlace = Math.min(numCoins, availableIndices.length);\n for (let i = 0; i < coinsToPlace; i++) {\n const [rc, cc] = path[availableIndices[i]];\n grid[rc][cc] = \"C\";\n }\n }\n\n // Return both the grid and the minimal path length (which is path.length - 1 moves)\n return {\n grid,\n minimalMoves: path.length - 1, // moves = path cells - 1 steps\n };\n}\n\nexport default function TopDownRobotGame() {\n // Score persists across levels as long as the player doesn't lose\n const [score, setScore] = useState(0);\n\n // The grid for the current level\n const [{ grid, minimalMoves }, setLevel] = useState(() => generateLevel());\n\n // Each command is one of: 'up', 'down', 'left', or 'right'\n const [commands, setCommands] = useState([]);\n\n // Robot's current position\n const [robotPos, setRobotPos] = useState({ row: 0, col: 0 });\n\n // Track how many coins were collected in the current level\n const [levelCoinsCollected, setLevelCoinsCollected] = useState(0);\n\n // Game states: \"input\", \"running\", \"gameOver\", \"win\"\n const [gameState, setGameState] = useState(\"input\");\n\n // Track time spent in input mode\n const [inputStartTime, setInputStartTime] = useState(() => Date.now());\n const [inputTimeSeconds, setInputTimeSeconds] = useState(0);\n\n // We'll store the initial commands count when pressing start, so that at the end we know how many moves they planned.\n const [initialCommandsCount, setInitialCommandsCount] = useState(0);\n\n // Store details about the winning run to display\n const [winStats, setWinStats] = useState(null);\n\n // Whenever we enter input mode, record the start time\n useEffect(() => {\n if (gameState === \"input\") {\n setInputStartTime(Date.now());\n setWinStats(null); // clear any old data\n }\n }, [gameState]);\n\n function onStartRunningWithCount() {\n // compute input time\n const endTime = Date.now();\n const diffSeconds = Math.floor((endTime - inputStartTime) / 1000);\n setInputTimeSeconds(diffSeconds);\n\n // store commands length\n setInitialCommandsCount(commands.length);\n setGameState(\"running\");\n }\n\n // Handle user keypress to queue commands or start the robot\n useEffect(() => {\n const handleKeyDown = (e) => {\n if (gameState === \"input\") {\n if (e.key === \"ArrowUp\") {\n setCommands((prev) => [...prev, \"up\"]);\n } else if (e.key === \"ArrowDown\") {\n setCommands((prev) => [...prev, \"down\"]);\n } else if (e.key === \"ArrowLeft\") {\n setCommands((prev) => [...prev, \"left\"]);\n } else if (e.key === \"ArrowRight\") {\n setCommands((prev) => [...prev, \"right\"]);\n } else if (e.key === \" \") {\n // space to start\n if (commands.length > 0) {\n onStartRunningWithCount();\n }\n }\n }\n };\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [gameState, commands, inputStartTime]);\n\n // Process the commands one by one when in running state\n useEffect(() => {\n if (gameState === \"running\" && commands.length > 0) {\n const timer = setTimeout(() => {\n const [nextCommand, ...rest] = commands;\n let { row, col } = robotPos;\n\n if (nextCommand === \"up\") {\n row -= 1;\n } else if (nextCommand === \"down\") {\n row += 1;\n } else if (nextCommand === \"left\") {\n col -= 1;\n } else if (nextCommand === \"right\") {\n col += 1;\n }\n\n // Check out of bounds\n if (row < 0 || row >= grid.length || col < 0 || col >= grid[0].length) {\n setGameState(\"gameOver\");\n return;\n }\n\n const cell = grid[row][col];\n // Check if hole\n if (cell === \".\") {\n setGameState(\"gameOver\");\n return;\n }\n\n // If coin, collect it\n if (cell === \"C\") {\n setLevelCoinsCollected((prev) => prev + 1);\n grid[row][col] = \"#\"; // turn it into land after collecting\n }\n\n // Move robot\n setRobotPos({ row, col });\n setCommands(rest);\n\n // Check if we've reached the end\n if (row === grid.length - 1 && col === grid[0].length - 1) {\n setGameState(\"win\");\n return;\n }\n\n // If no more commands left and not at goal, game over\n if (rest.length === 0) {\n setGameState(\"gameOver\");\n }\n }, 500);\n\n return () => clearTimeout(timer);\n }\n }, [gameState, commands, robotPos, grid]);\n\n // After winning, compute final bonus\n useEffect(() => {\n if (gameState === \"win\") {\n // timeBonus = max(0, TIME_BONUS_MAX - TIME_BONUS_DECAY * inputTimeSeconds)\n const timeBonus = Math.max(\n 0,\n TIME_BONUS_MAX - TIME_BONUS_DECAY * inputTimeSeconds\n );\n\n // moveBonus = max(0, MOVE_BONUS_MAX - overMoves)\n const overMoves = Math.max(0, initialCommandsCount - minimalMoves);\n const moveBonus = Math.max(0, MOVE_BONUS_MAX - overMoves);\n\n const totalLevelBonus = levelCoinsCollected + timeBonus + moveBonus;\n setScore((prev) => prev + totalLevelBonus);\n\n // Also store these details so we can display them\n const movesUsed = initialCommandsCount;\n const planTime = inputTimeSeconds;\n setWinStats({\n movesUsed,\n planTime,\n bonus: totalLevelBonus,\n });\n }\n }, [gameState]);\n\n // Restart the game if game over or win on key press\n useEffect(() => {\n const handleRestart = (e) => {\n if (e.key === \" \") {\n if (gameState === \"gameOver\") {\n // Reset score to 0 if we lost\n setScore(0);\n const { grid: newGrid, minimalMoves: newMinMoves } = generateLevel();\n setLevel({ grid: newGrid, minimalMoves: newMinMoves });\n setRobotPos({ row: 0, col: 0 });\n setCommands([]);\n setLevelCoinsCollected(0);\n setInputTimeSeconds(0);\n setInitialCommandsCount(0);\n setWinStats(null);\n setGameState(\"input\");\n } else if (gameState === \"win\") {\n // We already added the bonus to score in the useEffect.\n // Move to next level.\n const { grid: newGrid, minimalMoves: newMinMoves } = generateLevel();\n setLevel({ grid: newGrid, minimalMoves: newMinMoves });\n setRobotPos({ row: 0, col: 0 });\n setCommands([]);\n setLevelCoinsCollected(0);\n setInputTimeSeconds(0);\n setInitialCommandsCount(0);\n setWinStats(null);\n setGameState(\"input\");\n }\n }\n };\n\n window.addEventListener(\"keydown\", handleRestart);\n return () => window.removeEventListener(\"keydown\", handleRestart);\n }, [gameState, levelCoinsCollected, inputTimeSeconds, initialCommandsCount]);\n\n // We'll create a new state to manage the accordion open/close\n const [showInstructions, setShowInstructions] = useState(false);\n\n return (\n

Top-Down Robot Game

\n\n {/* Display the total score and collected coins this level */}\n

Total Score: {score}

Coins collected this level: {levelCoinsCollected}

\n\n {/* Accordion-style collapsible instructions */}\n

\n setShowInstructions((prev) => !prev)}\n className=\"w-full text-left bg-gray-300 p-2 rounded font-semibold\"\n >\n How to Play {showInstructions ? \"-\" : \"+\"}\n \n {showInstructions && (\n

Use the Arrow Keys (↑, ↓, ←, →) to queue commands.
Press SPACE to start your robot moving along those commands.
Avoid holes (blue squares) and don't go off the grid.
Coins (yellow squares) are on the path. Collect them for extra points.
\n The longer you take to plan (in seconds) and the more moves you use\n beyond the minimal path, the fewer bonus points you get.\n
\n If your robot doesn't reach the green goal after all commands are used,\n you lose and your score resets to 0.\n
\n Press SPACE to restart if you lose, or to play again if you win.\n (Score persists on winning, resets on losing.)\n

\n )}\n

\n\n {/* Info messages based on state */}\n {gameState === \"input\" && (\n

\n Use arrow keys to queue commands, then press SPACE to start.\n

\n )}\n {gameState === \"running\" && (\n

Robot is moving through commands...

\n )}\n {gameState === \"gameOver\" && (\n

\n Game Over! Press SPACE to restart (Score resets).\n

\n )}\n {gameState === \"win\" && (\n

You Win! Press SPACE for the next level.

\n {winStats && (\n

Moves used: {winStats.movesUsed}

Planning time: {winStats.planTime} seconds

Bonus earned: +{winStats.bonus}

\n )}\n

\n )}\n\n {/* Render the grid */}\n \n {grid.map((rowArray, rowIdx) =>\n rowArray.map((cell, colIdx) => {\n const isRobotHere = rowIdx === robotPos.row && colIdx === robotPos.col;\n let bg = \"bg-blue-800\"; // hole\n if (cell === \"#\") {\n bg = \"bg-gray-300\"; // land\n } else if (cell === \"C\") {\n bg = \"bg-yellow-400\"; // coin\n }\n\n if (isRobotHere) {\n bg = \"bg-red-600\"; // robot\n }\n // highlight the end cell differently if not robot\n if (\n !isRobotHere &&\n rowIdx === grid.length - 1 &&\n colIdx === grid[0].length - 1\n ) {\n bg = \"bg-green-600\";\n }\n return (\n \n {\" \"}\n

\n );\n })\n )}\n \n\n {gameState === \"input\" && (\n

Current commands: {commands.join(\", \")}

\n )}\n \n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_41":42,"_43":44},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","manageRootRouteStylesheet","mobileWebHandoffEnabled","promoteCss","disableSSR","stripModulepreloadImports","paidCampaignAppRedirect","statsigGateEvaluationsPromise",["P",40],"traceId","12373150557733275835","traceTime",1791062246054]