VIMazing Snake

+ ); +} + +export default App; diff --git a/example/src/GameOverlay.tsx b/example/src/GameOverlay.tsx new file mode 100755 index 0000000..d9d8c59 --- /dev/null +++ b/example/src/GameOverlay.tsx @@ -0,0 +1,111 @@ +import type { GameStatus } from "@vimazing/vim-maze"; +import type { UseScoreType } from "@vimazing/vim-maze"; +import { useIsMobile } from "./useIsMobile"; +import { MobileGameOverlay } from "./MobileGameOverlay"; + +type GameOverlayProps = { + gameStatus: GameStatus; + scoreManager: UseScoreType; +}; + +export const GameOverlay = ({ gameStatus, scoreManager }: GameOverlayProps) => { + const isMobile = useIsMobile(); + if (isMobile) return + + // 🧠 Only show overlay when the game has ended + if (['started', 'hasKey'].includes(gameStatus)) return null; + // console.log('gameStatus:', gameStatus) + + return ( + + {gameStatus === "waiting" && } + {gameStatus === "game-over" && } + {gameStatus === "game-won" && } + + ); +}; + +export const GameWaitingContent = () => { + return ( +

Press i to play...

h,j,k,l to move around

try other vim motions
you're familiar with

+ $,^,0,G,gg only valid if
+ the edges are reachable +

+ ); +}; + +export const GameWonContent = ({ scoreManager }: { scoreManager: UseScoreType }) => { + const finalScore = scoreManager.finalScore ?? 0; + + return ( +

Congratulations!

Final Score:

{finalScore.toLocaleString()}

+ min + ( + 100000 + , ( + optimalTime + / + actualTime + ) * + 100000 + ) +

Press i to play again

+ ); +}; + +export const GameOverContent = () => { + return ( +

Game Over

Press i to play again

+ ); +}; + +export const GameOverlayContainer = ({ + children, +}: { + children: React.ReactNode; +}) => { + return ( +

+ {children} +

+ ); +}; + + + diff --git a/example/src/MobileGameOverlay.tsx b/example/src/MobileGameOverlay.tsx new file mode 100755 index 0000000..f804e3f --- /dev/null +++ b/example/src/MobileGameOverlay.tsx @@ -0,0 +1,99 @@ +import type { GameStatus } from "@vimazing/vim-maze"; +import type { UseScoreType } from "@vimazing/vim-maze"; + +type MobileGameOverlayProps = { + gameStatus: GameStatus; + scoreManager: UseScoreType; +}; + +export const MobileGameOverlay = ({ gameStatus, scoreManager }: MobileGameOverlayProps) => { + // 🧠 Only show overlay when the game has ended + if (['started', 'hasKey'].includes(gameStatus)) return null; + // console.log('gameStatus:', gameStatus) + + return ( + + {gameStatus === "waiting" && } + {gameStatus === "game-over" && } + {gameStatus === "game-won" && } + + ); +}; + +export const GameWaitingContent = () => { + return ( +

Press here to play

all the vim motions
available on desktop

+ ); +}; + +export const GameWonContent = ({ scoreManager }: { scoreManager: UseScoreType }) => { + const finalScore = scoreManager.finalScore ?? 0; + + return ( +

Congratulations!

Final Score:

{finalScore.toLocaleString()}

+ min + ( + 100000 + , ( + optimalTime + / + actualTime + ) * + 100000 + ) +

Press to play again

+ ); +}; + +export const GameOverContent = () => { + return ( +

+ Game Over +

+ ); +}; + +export const GameOverlayContainer = ({ + children, +}: { + children: React.ReactNode; +}) => { + return ( +

+ {children} +

+ ); +}; + + diff --git a/example/src/index.css b/example/src/index.css new file mode 100755 index 0000000..f1d8c73 --- /dev/null +++ b/example/src/index.css @@ -0,0 +1 @@ +@import "tailwindcss"; diff --git a/example/src/main.tsx b/example/src/main.tsx new file mode 100755 index 0000000..d9f0159 --- /dev/null +++ b/example/src/main.tsx @@ -0,0 +1,11 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; +import "./index.css"; + +ReactDOM.createRoot(document.getElementById("root")!).render( + + + +); + diff --git a/example/src/useIsMobile.ts b/example/src/useIsMobile.ts new file mode 100755 index 0000000..6b77170 --- /dev/null +++ b/example/src/useIsMobile.ts @@ -0,0 +1,30 @@ +import * as React from "react"; + +const MOBILE_BREAKPOINT = 768; + +export function useIsMobile() { + const [isMobile, setIsMobile] = React.useState( + typeof window !== "undefined" + ? window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`).matches + : false + ); + + React.useEffect(() => { + const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`); + + const onChange = (event: MediaQueryListEvent) => { + setIsMobile(event.matches); + }; + + // Set initial value + setIsMobile(mql.matches); + + // Add listener + mql.addEventListener("change", onChange); + + // Cleanup + return () => mql.removeEventListener("change", onChange); + }, []); + + return isMobile; +} diff --git a/example/src/useKeyBindings.ts b/example/src/useKeyBindings.ts new file mode 100755 index 0000000..91e6895 --- /dev/null +++ b/example/src/useKeyBindings.ts @@ -0,0 +1,46 @@ +import { useEffect } from "react"; +import type { UseGameType } from "@vimazing/vim-maze"; + +export const useKeyBindings = (gameManager: UseGameType) => { + const { gameStatus, initGame, stopGame, clearLog, resetCount } = gameManager; + + useEffect(() => { + const handler = (e: KeyboardEvent) => { + // start game + if (e.key === "i" || e.key === "I") { + if (["waiting", "game-over", "game-won"].includes(gameStatus)) { + clearLog(); + resetCount(); + if (gameStatus === "game-over" || gameStatus === "game-won") { + stopGame(); + setTimeout(() => initGame(true), 0); + } else { + initGame(true); + } + return; + } + } + + // ignore other keys while waiting + if (gameStatus === "waiting") return; + + // cancel count or stop game + if (e.key === "Escape") { + stopGame(); + resetCount(); + return; + } + + // quit + if (e.key === "q" || e.key === "Q") { + stopGame(); + resetCount(); + return; + } + }; + + window.addEventListener("keydown", handler); + return () => window.removeEventListener("keydown", handler); + }, [gameStatus, initGame, stopGame, clearLog, resetCount]); +}; + diff --git a/example/src/useMounted.ts b/example/src/useMounted.ts new file mode 100755 index 0000000..7da354e --- /dev/null +++ b/example/src/useMounted.ts @@ -0,0 +1,11 @@ +import { useState, useEffect } from 'react'; + +export const useMounted = () => { + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + return mounted; +}; diff --git a/example/tsconfig.json b/example/tsconfig.json new file mode 100755 index 0000000..fe97753 --- /dev/null +++ b/example/tsconfig.json @@ -0,0 +1,40 @@ +{ + "compilerOptions": { + /* === Environment === */ + "target": "ESNext", + "lib": ["ESNext", "DOM"], + "jsx": "react-jsx", + "module": "ESNext", + "moduleResolution": "Bundler", + "resolveJsonModule": true, + + /* === Bundler / Vite === */ + "noEmit": true, + "allowJs": true, + "skipLibCheck": true, + "isolatedModules": true, + "types": ["vite/client"], + + /* === Code Style & Safety === */ + "strict": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedIndexedAccess": true, + "noImplicitOverride": true, + "noUnusedLocals": false, + "noUnusedParameters": false, + + /* === Module Behavior === */ + "allowImportingTsExtensions": false, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + + /* === Path aliases (optional) === */ + "baseUrl": ".", + "paths": { + "@vimazing/vim-snake": ["../src/index.ts"], + "@vimazing/vim-snake/*": ["../src/*"] + } + }, + "include": ["src", "vite.config.ts", "global.d.ts"], + "exclude": ["node_modules", "dist"] +} diff --git a/example/vite.config.ts b/example/vite.config.ts new file mode 100755 index 0000000..cc87210 --- /dev/null +++ b/example/vite.config.ts @@ -0,0 +1,22 @@ +import { defineConfig } from "vite"; +import tailwindcss from '@tailwindcss/vite' +import react from "@vitejs/plugin-react"; +import { fileURLToPath } from "node:url"; +import { dirname, resolve } from "node:path"; + +const __dirname = dirname(fileURLToPath(import.meta.url)); +const libSource = resolve(__dirname, "../src"); + +export default defineConfig({ + plugins: [react(), tailwindcss()], + resolve: { + alias: { + "@vimazing/vim-snake": libSource, // use source during dev + }, + }, + server: { + port: 5173, + open: true, + }, +}); + diff --git a/global.d.ts b/global.d.ts new file mode 100755 index 0000000..cbe652d --- /dev/null +++ b/global.d.ts @@ -0,0 +1 @@ +declare module "*.css"; diff --git a/package.json b/package.json new file mode 100755 index 0000000..6188afe --- /dev/null +++ b/package.json @@ -0,0 +1,62 @@ +{ + "name": "@vimazing/vim-snake", + "version": "0.1.0", + "description": "Classic Snake reimagined with Vim controls — a lightweight, typed React hook library for building snake games with hjkl navigation.", + "author": "André Padez ", + "keywords": [ + "snake", + "vim", + "react", + "hooks", + "game", + "modal-editing", + "typescript", + "vimazing" + ], + "repository": { + "type": "git", + "url": "git+https://github.com/vimazing/vim-snake.git" + }, + "bugs": { + "url": "https://github.com/vimazing/vim-snake/issues" + }, + "homepage": "https://github.com/vimazing/vim-snake#readme", + "license": "MIT", + "type": "module", + "main": "./dist/index.js", + "types": "./dist/index.d.ts", + "exports": { + ".": { + "import": "./dist/index.js", + "types": "./dist/index.d.ts" + }, + "./useGame": { + "import": "./dist/useGame/index.js", + "types": "./dist/useGame/index.d.ts" + }, + "./useScore": { + "import": "./dist/useScore/index.js", + "types": "./dist/useScore/index.d.ts" + }, + "./*": { + "import": "./dist/*.js", + "types": "./dist/*.d.ts" + }, + "./*.css": "./dist/*.css" + }, + "files": [ + "dist" + ], + "scripts": { + "build": "tsc --outDir dist --declaration --emitDeclarationOnly false && node -e \"const fs = require('node:fs'); fs.mkdirSync('dist', { recursive: true }); fs.copyFileSync('src/game.css', 'dist/game.css');\"", + "prepublishOnly": "npm run build" + }, + "peerDependencies": { + "react": "^19.1.1" + }, + "devDependencies": { + "@types/node": "^24.7.2", + "@types/react": "^19.2.2", + "typescript": "~5.9.3" + } +} diff --git a/src/game.css b/src/game.css new file mode 100755 index 0000000..5ebff21 --- /dev/null +++ b/src/game.css @@ -0,0 +1,33 @@ +/* ========================================================= + 🔧 Controls (tweak these) + ========================================================= */ +:root { + --snake-cell-size: 16px; +} + +/* ========================================================= + Container & Board Base + ========================================================= */ +#snake-board { + position: relative; + background-color: var(--card, #1e2030); + border-radius: 0.5rem; + box-shadow: 0 0 10px rgba(27, 29, 43, 0.6), inset 0 0 6px color-mix(in srgb, var(--primary, #82aaff) 5%, transparent); + padding: 4px; +} + +/* ========================================================= + Snake Board Layout + ========================================================= */ +.snake-row { + display: flex; +} + +.snake-cell { + width: var(--snake-cell-size); + height: var(--snake-cell-size); + background-color: var(--muted, #2f334d); + border: 1px solid var(--border, #3b3f5c); + box-sizing: border-box; +} + diff --git a/src/index.ts b/src/index.ts new file mode 100755 index 0000000..b677a0a --- /dev/null +++ b/src/index.ts @@ -0,0 +1,3 @@ +export * from './useGame'; +export * from './types'; + diff --git a/src/types.ts b/src/types.ts new file mode 100755 index 0000000..1a73470 --- /dev/null +++ b/src/types.ts @@ -0,0 +1,18 @@ +import { useGame } from "./useGame"; + +export type UseGameType = ReturnType; + +export type GamePhase = "idle" | "playing"; +export type PlayStatus = "started" | "game-over" | "game-won"; +export type GameStatus = "waiting" | "started" | "game-over" | "game-won"; + +export const isPlaying = (status: GameStatus): status is PlayStatus => + status === "started" || status === "game-over" || status === "game-won"; + +export const getGamePhase = (status: GameStatus): GamePhase => + status === "waiting" ? "idle" : "playing"; + +export type Direction = "up" | "down" | "left" | "right"; +export type Position = { r: number; c: number }; +export type SnakeBody = Position[]; + diff --git a/src/useGame/index.ts b/src/useGame/index.ts new file mode 100755 index 0000000..5b2f75f --- /dev/null +++ b/src/useGame/index.ts @@ -0,0 +1,2 @@ +export * from './useGame'; +export * from './useKeyBindings'; diff --git a/src/useGame/useBoard.ts b/src/useGame/useBoard.ts new file mode 100755 index 0000000..e69de29 diff --git a/src/useGame/useFood.ts b/src/useGame/useFood.ts new file mode 100755 index 0000000..e69de29 diff --git a/src/useGame/useGame.ts b/src/useGame/useGame.ts new file mode 100755 index 0000000..e0ad4c7 --- /dev/null +++ b/src/useGame/useGame.ts @@ -0,0 +1,24 @@ +import { useEffect } from "react"; +import { useRenderer } from "./useRenderer"; + +export function useGame(cols: number, rows: number, platformHook?: unknown) { + const rendererManager = useRenderer(); + const { containerRef, renderBoard } = rendererManager; + + useEffect(() => { + renderBoard(cols, rows); + }, [cols, rows]); + + const fullGameManager = { + containerRef, + renderBoard, + }; + + if (typeof platformHook === "function") { + platformHook(fullGameManager); + } + + return fullGameManager; +} + +export type { GameStatus } from "../types"; diff --git a/src/useGame/useGameStatus.ts b/src/useGame/useGameStatus.ts new file mode 100755 index 0000000..8db99a4 --- /dev/null +++ b/src/useGame/useGameStatus.ts @@ -0,0 +1,55 @@ +import { useCallback, useState, useMemo } from "react"; +import type { UseMazeType } from "./useMaze"; +import type { UsePlayerType } from "./usePlayer"; +import type { GameStatus } from "../types"; +import { getGamePhase, isPlaying } from "../types"; + +export type { GameStatus } from "../types"; + +export function useGameStatus(mazeManager: UseMazeType, playerManager: UsePlayerType) { + const { mazeRef, containerRef } = mazeManager; + const { setPlayerPos } = playerManager; + const [gameStatus, setGameStatus] = useState("waiting"); + + const gamePhase = useMemo(() => getGamePhase(gameStatus), [gameStatus]); + const playStatus = useMemo( + () => (isPlaying(gameStatus) ? gameStatus : null), + [gameStatus] + ); + + // 🕹 Start the game (place hero) + const startGame = useCallback(() => { + const m = mazeRef.current; + if (!m.length) return; + + for (let c = 0; c < m[0].length; c++) { + if (m[m.length - 1][c].includes("entrance")) { + setPlayerPos({ r: m.length - 1, c }); + break; + } + } + + setGameStatus("started"); + }, [mazeRef, setPlayerPos]); + + // 🧍 Stop / exit game + const stopGame = useCallback(() => { + setPlayerPos(null); + setGameStatus("waiting"); + const container = containerRef.current; + container?.querySelector("#maze")?.classList.remove("finished"); + container?.querySelectorAll(".hero").forEach((el) => el.classList.remove("hero")); + }, [setPlayerPos, containerRef]); + + return { + gameStatus, + gamePhase, + playStatus, + setGameStatus, + startGame, + stopGame, + }; +} + +export type UseGameStatusType = ReturnType; + diff --git a/src/useGame/useKeyBindings.ts b/src/useGame/useKeyBindings.ts new file mode 100755 index 0000000..87cf73d --- /dev/null +++ b/src/useGame/useKeyBindings.ts @@ -0,0 +1,259 @@ +import type { GameStatus } from "../types"; +import { useEffect, useRef, useState } from "react"; +import type { KeyLogEntry } from "../types"; + +export type GameBindingContext = { + movePlayer: (dr: number, dc: number, count?: number) => void; + gameStatus: GameStatus; + mazeManager: any; + playerManager: any; +}; + +type UseMazeKeyBindingsParams = { + gameManager: GameBindingContext; +}; + +type Motion = { dr: number; dc: number; steps: number }; + +const RELEVANT_KEYS = new Set([ + "h", "H", "j", "J", "k", "K", "l", "L", ".", "^", "$", "g", "G", "0", + "1", "2", "3", "4", "5", "6", "7", "8", "9" +]); + +export const useKeyBindings = ({ gameManager }: UseMazeKeyBindingsParams) => { + const { movePlayer, gameStatus } = gameManager; + + const [keyLog, setKeyLog] = useState([]); + const logRef = useRef([]); + const countRef = useRef(""); + const lastMotionRef = useRef(null); + const lastKeyRef = useRef(""); + + const relevantKeys = RELEVANT_KEYS; + + const clearLog = () => { + logRef.current = []; + setKeyLog([]); + }; + + const recordKey = (key: string) => { + const entry = { key, timestamp: performance.now() }; + logRef.current.push(entry); + setKeyLog([...logRef.current]); + }; + + const resetCount = () => { countRef.current = ""; }; + + const findAnchorTarget = (dir: "left" | "right") => { + const m = gameManager.mazeManager.mazeRef.current; + const pos = gameManager.playerManager.playerPos; + if (!m.length || !pos) return null; + + const colsCount = m[0]?.length ?? 0; + const r = pos.r; + const c = pos.c; + + if (!m[r] || !m[r][c] || m[r][c].includes("wall")) return null; + + const step = dir === "left" ? -1 : 1; + let cc = c; + + while (true) { + const next = cc + step; + if (next < 0 || next >= colsCount) return null; + if (m[r][next].includes("wall")) { + const wallIdx = next; + const expectedWallIdx = dir === "left" ? 0 : colsCount - 1; + const expectedCellIdx = dir === "left" ? 1 : colsCount - 2; + + if (wallIdx !== expectedWallIdx) return null; + if (cc !== expectedCellIdx) return null; + if (cc === c) return null; + + return { r, cTarget: cc }; + } + cc = next; + } + }; + + const findColumnAnchorTarget = (dir: "top" | "bottom") => { + const m = gameManager.mazeManager.mazeRef.current; + const pos = gameManager.playerManager.playerPos; + if (!m.length || !pos) return null; + + const rowsCount = m.length; + const r = pos.r; + const c = pos.c; + + if (!m[r] || !m[r][c] || m[r][c].includes("wall")) return null; + + const step = dir === "top" ? -1 : 1; + let rr = r; + + while (true) { + const next = rr + step; + if (next < 0 || next >= rowsCount) return null; + if (m[next][c].includes("wall")) { + const wallIdx = next; + const expectedWallIdx = dir === "top" ? 0 : rowsCount - 1; + const expectedCellIdx = dir === "top" ? 1 : rowsCount - 2; + + if (wallIdx !== expectedWallIdx) return null; + if (rr !== expectedCellIdx) return null; + if (rr === r) return null; + + return { rTarget: rr, c }; + } + rr = next; + } + }; + + useEffect(() => { + const handler = (e: KeyboardEvent) => { + if (["waiting", "game-over", "game-won"].includes(gameStatus)) return; + + // "0" behaves like Vim: beginning of line + if (e.key === "0" && countRef.current === "") { + recordKey("0"); + resetCount(); + + const anchor = findAnchorTarget("left"); + if (!anchor) { + window.dispatchEvent(new Event("maze-invalid")); + return; + } + + const pos = gameManager.playerManager.playerPos!; + const dr = 0; + const dc = anchor.cTarget > pos.c ? 1 : -1; + const steps = Math.abs(anchor.cTarget - pos.c); + + movePlayer(dr, dc, steps); + lastMotionRef.current = { dr, dc, steps }; + return; + } + + const isDigit = e.key >= "0" && e.key <= "9"; + if (isDigit) { + if (e.key === "0" && countRef.current === "") return; + recordKey(e.key); + countRef.current += e.key; + return; + } + + if (e.key === ".") { + recordKey("."); + const last = lastMotionRef.current; + if (!last) return; + const steps = Math.max(1, parseInt(countRef.current || String(last.steps), 10)); + resetCount(); + movePlayer(last.dr, last.dc, steps); + lastMotionRef.current = { dr: last.dr, dc: last.dc, steps }; + return; + } + + if (e.key === "^" || e.key === "$") { + recordKey(e.key); + resetCount(); + + const dir = e.key === "^" ? "left" : "right"; + const anchor = findAnchorTarget(dir); + if (!anchor) { + window.dispatchEvent(new Event("maze-invalid")); + return; + } + + const pos = gameManager.playerManager.playerPos!; + const dr = 0; + const dc = anchor.cTarget > pos.c ? 1 : -1; + const steps = Math.abs(anchor.cTarget - pos.c); + + movePlayer(dr, dc, steps); + lastMotionRef.current = { dr, dc, steps }; + return; + } + + if (e.key === "g" || e.key === "G") { + if (e.key === "g") { + if (lastKeyRef.current === "g") { + recordKey(e.key); + resetCount(); + lastKeyRef.current = ""; + + const anchor = findColumnAnchorTarget("top"); + if (!anchor) { + window.dispatchEvent(new Event("maze-invalid")); + return; + } + + const pos = gameManager.playerManager.playerPos!; + const dr = anchor.rTarget > pos.r ? 1 : -1; + const dc = 0; + const steps = Math.abs(anchor.rTarget - pos.r); + + movePlayer(dr, dc, steps); + lastMotionRef.current = { dr, dc, steps }; + return; + } else { + recordKey(e.key); + lastKeyRef.current = "g"; + return; + } + } else { + recordKey(e.key); + resetCount(); + lastKeyRef.current = ""; + + const anchor = findColumnAnchorTarget("bottom"); + if (!anchor) { + window.dispatchEvent(new Event("maze-invalid")); + return; + } + + const pos = gameManager.playerManager.playerPos!; + const dr = anchor.rTarget > pos.r ? 1 : -1; + const dc = 0; + const steps = Math.abs(anchor.rTarget - pos.r); + + movePlayer(dr, dc, steps); + lastMotionRef.current = { dr, dc, steps }; + return; + } + } + + if (!relevantKeys.has(e.key)) return; + + recordKey(e.key); + + let dr = 0, dc = 0; + switch (e.key) { + case "h": + case "H": dr = 0; dc = -1; break; + case "j": + case "J": dr = 1; dc = 0; break; + case "k": + case "K": dr = -1; dc = 0; break; + case "l": + case "L": dr = 0; dc = 1; break; + default: return; + } + + const steps = Math.max(1, parseInt(countRef.current || "1", 10)); + resetCount(); + movePlayer(dr, dc, steps); + lastMotionRef.current = { dr, dc, steps }; + }; + + window.addEventListener("keydown", handler); + return () => window.removeEventListener("keydown", handler); + }, [movePlayer, gameStatus, gameManager]); + + return { + keyLog, + clearLog, + resetCount, + getLog: () => logRef.current, + }; +}; + +export type UseKeyBindingsType = ReturnType; diff --git a/src/useGame/useRenderer.ts b/src/useGame/useRenderer.ts new file mode 100755 index 0000000..3fe7949 --- /dev/null +++ b/src/useGame/useRenderer.ts @@ -0,0 +1,46 @@ +import { useRef } from "react"; + +export type BoardData = { + cols: number; + rows: number; +}; + +export function useRenderer() { + const containerRef = useRef(null); + + const renderBoard = (cols: number, rows: number) => { + const container = containerRef.current; + if (!container) return; + + container.innerHTML = ""; + + const board = document.createElement("div"); + board.id = "snake-board"; + board.className = "snake-board"; + + for (let r = 0; r < rows; r++) { + const rowDiv = document.createElement("div"); + rowDiv.className = "snake-row"; + rowDiv.setAttribute("data-r", String(r)); + + for (let c = 0; c < cols; c++) { + const cellDiv = document.createElement("div"); + cellDiv.className = "snake-cell"; + cellDiv.setAttribute("data-r", String(r)); + cellDiv.setAttribute("data-c", String(c)); + rowDiv.appendChild(cellDiv); + } + + board.appendChild(rowDiv); + } + + container.appendChild(board); + }; + + return { + containerRef, + renderBoard, + }; +} + +export type UseRendererType = ReturnType; diff --git a/src/useGame/useSnake.ts b/src/useGame/useSnake.ts new file mode 100755 index 0000000..e69de29 diff --git a/src/useScore/hooks/useTimer.ts b/src/useScore/hooks/useTimer.ts new file mode 100755 index 0000000..44b0e9e --- /dev/null +++ b/src/useScore/hooks/useTimer.ts @@ -0,0 +1,85 @@ +import { useCallback, useEffect, useRef, useState } from "react"; + +export type UseTimerReturn = { + timeValue: number; + startTimer: () => void; + stopTimer: () => void; + resetTimer: () => void; +}; + +export type UseTimerOptions = { + /** + * Interval (in ms) between updates. Defaults to 100ms. + */ + interval?: number; +}; + +export function useTimer(options: UseTimerOptions = {}): UseTimerReturn { + const { interval = 100 } = options; + const [timeValue, setTimeValue] = useState(0); + + const intervalIdRef = useRef | null>(null); + const offsetRef = useRef(0); + const startTimeRef = useRef(null); + + const update = useCallback(() => { + if (startTimeRef.current === null) { + return; + } + + const now = performance.now(); + setTimeValue(offsetRef.current + (now - startTimeRef.current)); + }, []); + + const startTimer = useCallback(() => { + if (intervalIdRef.current !== null) { + return; + } + + if (startTimeRef.current === null) { + startTimeRef.current = performance.now(); + } + + update(); + intervalIdRef.current = setInterval(update, Math.max(16, interval)); + }, [interval, update]); + + const stopTimer = useCallback(() => { + if (intervalIdRef.current !== null) { + clearInterval(intervalIdRef.current); + intervalIdRef.current = null; + } + + if (startTimeRef.current !== null) { + update(); + offsetRef.current += performance.now() - startTimeRef.current; + startTimeRef.current = null; + } + }, [update]); + + const resetTimer = useCallback(() => { + if (intervalIdRef.current !== null) { + clearInterval(intervalIdRef.current); + intervalIdRef.current = null; + } + + startTimeRef.current = null; + offsetRef.current = 0; + setTimeValue(0); + }, []); + + useEffect(() => { + return () => { + if (intervalIdRef.current !== null) { + clearInterval(intervalIdRef.current); + } + }; + }, []); + + return { + timeValue, + startTimer, + stopTimer, + resetTimer, + }; +} diff --git a/src/useScore/index.ts b/src/useScore/index.ts new file mode 100755 index 0000000..525ce75 --- /dev/null +++ b/src/useScore/index.ts @@ -0,0 +1 @@ +export * from './useScore'; diff --git a/src/useScore/useScore.ts b/src/useScore/useScore.ts new file mode 100755 index 0000000..8514393 --- /dev/null +++ b/src/useScore/useScore.ts @@ -0,0 +1,143 @@ +import { useEffect, useRef, useState } from "react"; +import { useTimer } from "../hooks/useTimer"; +import { useScoreTime } from "./useScoreTime"; +import { useScorePaths } from "./useScorePaths"; +import type { KeyLogProvider, GameScoreContext } from "../types"; + +type UseScoreParams = { + gameContext: GameScoreContext; + keyManager?: KeyLogProvider; +}; + +export function useScore({ gameContext, keyManager }: UseScoreParams) { + const timer = useTimer(); + const { gameStatus, setGameStatus } = gameContext; + const { timeValue, startTimer, stopTimer, resetTimer } = timer; + + // ✅ useScorePaths always returns distances under these names + const { + entranceToKey = 0, + entranceToExit = 0, + heroToKey = 0, + heroToExit = 0, + } = gameContext.mazeManager + ? useScorePaths({ gameManager: gameContext as any }) + : {}; + + // ✅ use unified naming for internal logic + const distToKey = entranceToKey || heroToKey; + const distToExit = entranceToExit || heroToExit; + + const [finalScore, setFinalScore] = useState(null); + const optimalRef = useRef(0); + const keystrokes = keyManager ? keyManager.keyLog.length : 0; + + // 1️⃣ Manage visible wall-clock timer + useScoreTime({ gameStatus, timer }); + + // 2️⃣ Compute static optimal path when maze (re)starts + useEffect(() => { + const maze = gameContext.mazeManager?.mazeInstanceRef?.current; + if (!maze) return; + + const k = maze.getDistance("entrance", "key"); + const e = maze.getDistance("key", "exit"); + const total = k + e; + + if (Number.isFinite(total) && total > 0) { + optimalRef.current = total; + } + }, [gameStatus, gameContext.mazeManager?.mazeInstanceRef]); + + const optimalSteps = optimalRef.current; + + // 3️⃣ Efficiency (keystrokes vs optimal steps) + const efficiency = + optimalSteps > 0 ? Math.round((keystrokes / optimalSteps) * 100) : 0; + + // 4️⃣ Logic time (internal motion time) + const [logicFirst, setLogicFirst] = useState(null); + const [logicLast, setLogicLast] = useState(null); + + useEffect(() => { + if (gameStatus === "started") { + setLogicFirst(null); + setLogicLast(null); + setPlayerSteps(0); + prevPosRef.current = null; + } + }, [gameStatus]); + + useEffect(() => { + const onTick = (e: Event) => { + const t = + (e as CustomEvent<{ t?: number }>).detail?.t ?? performance.now(); + setLogicFirst((prev) => prev ?? t); + setLogicLast(t); + }; + window.addEventListener("maze-logic-tick", onTick as EventListener); + return () => + window.removeEventListener("maze-logic-tick", onTick as EventListener); + }, []); + + // 5️⃣ Actual player steps + const [playerSteps, setPlayerSteps] = useState(0); + const prevPosRef = useRef<{ r: number; c: number } | null>(null); + + useEffect(() => { + const pos = gameContext.playerManager?.playerPos; + if (!pos) { + prevPosRef.current = null; + return; + } + + if (!["started", "hasKey"].includes(gameStatus)) { + prevPosRef.current = pos; + return; + } + + const prev = prevPosRef.current; + prevPosRef.current = pos; + if (!prev) return; + + const delta = Math.abs(pos.r - prev.r) + Math.abs(pos.c - prev.c); + if (delta > 0) setPlayerSteps((s) => s + delta); + }, [gameStatus, gameContext.playerManager?.playerPos]); + + // 6️⃣ Auto game-over on inefficiency + useEffect(() => { + if (gameStatus === "started" && efficiency > 150) { + setGameStatus("game-over"); + } + }, [efficiency, gameStatus, setGameStatus]); + + // 7️⃣ Final score on win + useEffect(() => { + if (gameStatus !== "game-won") return; + + const logicMs = + logicFirst != null && logicLast != null + ? Math.max(1, logicLast - logicFirst) + : timeValue; + + const optimalMs = optimalSteps * 200; + const ratio = Math.max(0.1, optimalMs / logicMs); + const score = Math.min(100000, Math.round(ratio * 100000)); + + setFinalScore(score); + }, [gameStatus, logicFirst, logicLast, timeValue, optimalSteps, playerSteps]); + + // ✅ Return clean, typed object + return { + timeValue, + startTimer, + stopTimer, + resetTimer, + distToKey, + distToExit, + keystrokes, + optimalSteps, + efficiency, + finalScore, + }; +} diff --git a/src/useScore/useScoreTime.ts b/src/useScore/useScoreTime.ts new file mode 100755 index 0000000..fe2514b --- /dev/null +++ b/src/useScore/useScoreTime.ts @@ -0,0 +1,38 @@ +import { useEffect, useRef } from "react"; +import type { UseTimerReturn } from "./hooks/useTimer"; +import type { GameStatus } from "../types"; + +type UseScoreTimeParams = { + gameStatus: GameStatus; + timer: UseTimerReturn; +}; + +export function useScoreTime({ gameStatus, timer }: UseScoreTimeParams) { + const prevStatusRef = useRef(null); + const { startTimer, stopTimer, resetTimer } = timer; + + useEffect(() => { + // const prevStatus = prevStatusRef.current; + prevStatusRef.current = gameStatus; + + switch (gameStatus) { + case "started": + // Always reset and start a fresh timer when a new game begins + resetTimer(); + startTimer(); + break; + + case "hasKey": + // Keep running + break; + + case "game-over": + case "game-won": + case "waiting": + // Stop timer when game finishes or is exited + stopTimer(); + break; + } + }, [gameStatus, startTimer, stopTimer, resetTimer]); +} + diff --git a/tsconfig.json b/tsconfig.json new file mode 100755 index 0000000..14cd137 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + "moduleResolution": "bundler", + "allowImportingTsExtensions": false, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": false, + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["src", "global.d.ts"], + "exclude": ["example"] +}