npm - @jonelhatwell/arcade-games - Versions diffs - 1.0.1 → 1.2.0 - Mend

@jonelhatwell/arcade-games 1.0.1 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.cjs CHANGED Viewed

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  MemoryGame: () => memorygame_default,
   SpaceDodger: () => spacedodger_default
 });
 module.exports = __toCommonJS(index_exports);
@@ -89,23 +90,34 @@ function Button({
 // src/components/games/spacedodger/index.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var config = {
+  canvasSize: {
+    width: 450,
+    height: 450
+  },
+  player: { x: 200, y: 350, width: 25, height: 50 }
+};
 var SpaceDodger = () => {
   const canvasRef = (0, import_react.useRef)(null);
+  const scoreRef = (0, import_react.useRef)(0);
+  const lastBatchScoreRef = (0, import_react.useRef)(0);
   const [score, setScore] = (0, import_react.useState)(0);
   const [gameOver, setGameOver] = (0, import_react.useState)(false);
   const gameStateRef = (0, import_react.useRef)({
-    player: { x: 200, y: 350, width: 30, height: 30 },
+    player: config.player,
     enemies: [],
     frame: 0,
     keys: {}
   });
   const resetGame = () => {
     gameStateRef.current = {
-      player: { x: 200, y: 350, width: 30, height: 30 },
+      player: config.player,
       enemies: [],
       frame: 0,
       keys: {}
     };
+    scoreRef.current = 0;
+    lastBatchScoreRef.current = 0;
     setScore(0);
     setGameOver(false);
   };
@@ -123,60 +135,293 @@ var SpaceDodger = () => {
     };
     window.addEventListener("keydown", handleKeyDown);
     window.addEventListener("keyup", handleKeyUp);
+    const randomRadius = () => 10 + Math.random() * 15;
+    const getEnemySpeed = () => {
+      const base = 3;
+      const increase = Math.floor(scoreRef.current / 20) * 0.5;
+      return base + increase;
+    };
     let animationId;
     const gameLoop = () => {
       if (gameOver) return;
       state.frame++;
       ctx.fillStyle = "#000";
-      ctx.fillRect(0, 0, 400, 400);
+      ctx.fillRect(0, 0, config.canvasSize.width, config.canvasSize.height);
       if (state.keys["ArrowLeft"] && state.player.x > 0) state.player.x -= 5;
-      if (state.keys["ArrowRight"] && state.player.x < 370) state.player.x += 5;
+      if (state.keys["ArrowRight"] && state.player.x < config.canvasSize.width - state.player.width) state.player.x += 5;
       if (state.keys["ArrowUp"] && state.player.y > 0) state.player.y -= 5;
-      if (state.keys["ArrowDown"] && state.player.y < 370) state.player.y += 5;
+      if (state.keys["ArrowDown"] && state.player.y < config.canvasSize.height - state.player.height) state.player.y += 5;
       ctx.fillStyle = "#0ea5e9";
-      ctx.fillRect(state.player.x, state.player.y, state.player.width, state.player.height);
+      ctx.fillRect(
+        state.player.x,
+        state.player.y,
+        state.player.width,
+        state.player.height
+      );
       if (state.frame % 40 === 0) {
-        state.enemies.push({ x: Math.random() * 370, y: -20, width: 30, height: 30 });
+        const radius = randomRadius();
+        state.enemies.push({
+          x: radius + Math.random() * (config.canvasSize.width - radius * 2),
+          y: -radius,
+          radius
+        });
+      }
+      if (scoreRef.current > 0 && scoreRef.current % 20 === 0 && lastBatchScoreRef.current !== scoreRef.current) {
+        lastBatchScoreRef.current = scoreRef.current;
+        const batchCount = 2 + Math.floor(Math.random() * 3);
+        for (let i = 0; i < batchCount; i++) {
+          const radius = randomRadius();
+          state.enemies.push({
+            x: radius + Math.random() * (config.canvasSize.width - radius * 2),
+            y: -Math.random() * 100,
+            radius
+          });
+        }
       }
       state.enemies = state.enemies.filter((enemy) => {
-        enemy.y += 3;
+        enemy.y += getEnemySpeed();
         ctx.fillStyle = "#ef4444";
-        ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
-        if (enemy.x < state.player.x + state.player.width && enemy.x + enemy.width > state.player.x && enemy.y < state.player.y + state.player.height && enemy.y + enemy.height > state.player.y) {
+        ctx.beginPath();
+        ctx.arc(enemy.x, enemy.y, enemy.radius, 0, Math.PI * 2);
+        ctx.fill();
+        const closestX = Math.max(
+          state.player.x,
+          Math.min(enemy.x, state.player.x + state.player.width)
+        );
+        const closestY = Math.max(
+          state.player.y,
+          Math.min(enemy.y, state.player.y + state.player.height)
+        );
+        const dx = enemy.x - closestX;
+        const dy = enemy.y - closestY;
+        if (dx * dx + dy * dy < enemy.radius * enemy.radius) {
           setGameOver(true);
           return false;
         }
-        if (enemy.y > 400) {
-          setScore((s) => s + 1);
+        if (enemy.y - enemy.radius > config.canvasSize.height) {
+          setScore((s) => {
+            scoreRef.current = s + 1;
+            return s + 1;
+          });
           return false;
         }
         return true;
       });
       animationId = requestAnimationFrame(gameLoop);
     };
-    if (!gameOver) gameLoop();
+    gameLoop();
     return () => {
       cancelAnimationFrame(animationId);
       window.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("keyup", handleKeyUp);
     };
   }, [gameOver]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col items-center gap-4 p-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative flex flex-col items-center gap-4 p-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-xl font-bold", children: [
       "Score: ",
       score
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("canvas", { ref: canvasRef, width: "400", height: "400", className: "border-2 border-gray-300" }),
-    gameOver && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xl font-bold text-red-500 mb-2", children: "Game Over!" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "canvas",
+      {
+        ref: canvasRef,
+        width: config.canvasSize.width,
+        height: config.canvasSize.height,
+        className: "border-2 border-gray-300"
+      }
+    ),
+    gameOver && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-black/60", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xl font-bold text-red-500 mb-3", children: "Game Over" }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { onClick: resetGame, children: "Play Again" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm text-gray-600", children: "Use arrow keys to move" })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-sm text-foreground", children: "Use arrow keys to move" })
   ] });
 };
 var spacedodger_default = SpaceDodger;
+// src/components/games/memorygame/index.tsx
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var config2 = {
+  canvasSize: { width: 450, height: 450 },
+  baseHideTime: 3e3,
+  numberRadius: 30
+};
+var MemoryGame = () => {
+  const canvasRef = (0, import_react2.useRef)(null);
+  const [level, setLevel] = (0, import_react2.useState)(1);
+  const [gameOver, setGameOver] = (0, import_react2.useState)(false);
+  const [message, setMessage] = (0, import_react2.useState)("");
+  const [showOverlay, setShowOverlay] = (0, import_react2.useState)({
+    visible: false,
+    text: ""
+  });
+  const gameStateRef = (0, import_react2.useRef)({
+    numbers: [],
+    sequence: [],
+    currentIndex: 0,
+    level: 1,
+    showNumbers: true,
+    phase: "memorize",
+    revealed: /* @__PURE__ */ new Set()
+  });
+  const getNumberCount = (lvl) => Math.min(4 + lvl, 9);
+  const getHideTime = (lvl) => Math.max(500, config2.baseHideTime - Math.floor((lvl - 1) / 1) * 500);
+  const generateNumbers = (lvl) => {
+    const count = getNumberCount(lvl);
+    const numbers = [];
+    const sequence = [];
+    const padding = config2.numberRadius * 2.5;
+    for (let i = 0; i < count; i++) {
+      let x, y, overlap;
+      let attempts = 0;
+      do {
+        overlap = false;
+        x = padding + Math.random() * (config2.canvasSize.width - padding * 2);
+        y = padding + Math.random() * (config2.canvasSize.height - padding * 2);
+        for (const num of numbers) {
+          const dx = x - num.x;
+          const dy = y - num.y;
+          if (Math.sqrt(dx * dx + dy * dy) < config2.numberRadius * 2.5) {
+            overlap = true;
+            break;
+          }
+        }
+        attempts++;
+      } while (overlap && attempts < 100);
+      numbers.push({ x, y, value: i + 1, radius: config2.numberRadius });
+      sequence.push(i + 1);
+    }
+    return { numbers, sequence };
+  };
+  const startLevel = (lvl) => {
+    const { numbers, sequence } = generateNumbers(lvl);
+    gameStateRef.current = {
+      numbers,
+      sequence,
+      currentIndex: 0,
+      level: lvl,
+      showNumbers: true,
+      phase: "memorize",
+      revealed: /* @__PURE__ */ new Set()
+    };
+    setMessage("Memorize the sequence!");
+    setTimeout(() => {
+      gameStateRef.current.showNumbers = false;
+      gameStateRef.current.phase = "recall";
+      setMessage("Click the numbers in order!");
+    }, getHideTime(lvl));
+  };
+  const resetGame = () => {
+    setLevel(1);
+    setGameOver(false);
+    setShowOverlay({ visible: false, text: "" });
+    startLevel(1);
+  };
+  const handleCanvasClick = (e) => {
+    if (gameOver || gameStateRef.current.phase !== "recall") return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const state = gameStateRef.current;
+    for (const num of state.numbers) {
+      const distance = Math.hypot(x - num.x, y - num.y);
+      if (distance <= num.radius) {
+        const expected = state.sequence[state.currentIndex];
+        if (num.value === expected) {
+          state.revealed.add(num.value);
+          state.currentIndex++;
+          if (state.currentIndex === state.sequence.length) {
+            const nextLevel = level + 1;
+            setLevel(nextLevel);
+            state.phase = "transition";
+            setShowOverlay({ visible: true, text: `Get Ready! Level ${nextLevel}` });
+            setTimeout(() => {
+              setShowOverlay({ visible: false, text: "" });
+              startLevel(nextLevel);
+            }, 1500);
+          }
+        } else {
+          setGameOver(true);
+          setMessage(`Wrong! Clicked ${num.value}, expected ${expected}`);
+        }
+        break;
+      }
+    }
+  };
+  (0, import_react2.useEffect)(() => startLevel(1), []);
+  (0, import_react2.useEffect)(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    let animationId;
+    const draw = () => {
+      const state = gameStateRef.current;
+      ctx.fillStyle = "#000";
+      ctx.fillRect(0, 0, config2.canvasSize.width, config2.canvasSize.height);
+      state.numbers.forEach((num, idx) => {
+        const isNext = state.phase === "recall" && level === 1 && idx === state.currentIndex;
+        ctx.fillStyle = isNext ? "#22c55e" : "#3b82f6";
+        ctx.beginPath();
+        ctx.arc(num.x, num.y, num.radius, 0, Math.PI * 2);
+        ctx.fill();
+        if (state.showNumbers || state.phase === "transition" || state.revealed.has(num.value)) {
+          ctx.fillStyle = "#fff";
+          ctx.font = "bold 24px sans-serif";
+          ctx.textAlign = "center";
+          ctx.textBaseline = "middle";
+          ctx.fillText(num.value.toString(), num.x, num.y);
+        }
+      });
+      if (!gameOver) animationId = requestAnimationFrame(draw);
+    };
+    draw();
+    return () => cancelAnimationFrame(animationId);
+  }, [gameOver, level]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative flex flex-col items-center gap-4 p-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex gap-8 text-xl font-bold", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+        "Level: ",
+        level
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+        "Numbers: ",
+        getNumberCount(level)
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-lg font-semibold text-blue-400 h-6", children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "canvas",
+      {
+        ref: canvasRef,
+        width: config2.canvasSize.width,
+        height: config2.canvasSize.height,
+        className: "border-2 border-gray-300 cursor-pointer",
+        onClick: handleCanvasClick
+      }
+    ),
+    gameOver && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-black/60", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xl font-bold text-red-500 mb-2", children: "Game Over" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "text-lg text-white mb-4", children: [
+        "Reached Level ",
+        level
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { onClick: resetGame, children: "Play Again" })
+    ] }),
+    showOverlay.visible && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-black/60", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-2xl font-bold text-yellow-400", children: showOverlay.text }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "text-sm text-center text-foreground max-w-md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: "Memorize the numbers, then click them in sequence (1, 2, 3...)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mt-1 text-xs text-gray-400", children: "Green circle = next number to click (level 1 only)" })
+    ] })
+  ] });
+};
+var memorygame_default = MemoryGame;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  MemoryGame,
   SpaceDodger
 });
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.ts","../src/components/games/spacedodger/index.tsx","../src/components/ui/button.tsx","../src/lib/utils.ts"],"sourcesContent":["import \"./index.css\";\r\nexport { default as SpaceDodger } from \"./components/games/spacedodger\";","\r\nimport React, { useState, useEffect, useRef } from 'react';\r\nimport { Button } from '@/components/ui/button';\r\n\r\n\r\ninterface Position {\r\n x: number;\r\n y: number;\r\n}\r\n\r\n\r\ninterface Enemy extends Position {\r\n width: number;\r\n height: number;\r\n}\r\n\r\ninterface Player extends Position {\r\n width: number;\r\n height: number;\r\n}\r\n\r\n\r\ninterface SpaceDodgerState {\r\n player: Player;\r\n enemies: Enemy[];\r\n frame: number;\r\n keys: Record<string, boolean>;\r\n}\r\n\r\nconst SpaceDodger: React.FC = () => {\r\n const canvasRef = useRef<HTMLCanvasElement>(null);\r\n const [score, setScore] = useState<number>(0);\r\n const [gameOver, setGameOver] = useState<boolean>(false);\r\n const gameStateRef = useRef<SpaceDodgerState>({\r\n player: { x: 200, y: 350, width: 30, height: 30 },\r\n enemies: [],\r\n frame: 0,\r\n keys: {}\r\n });\r\n\r\n const resetGame = (): void => {\r\n gameStateRef.current = {\r\n player: { x: 200, y: 350, width: 30, height: 30 },\r\n enemies: [],\r\n frame: 0,\r\n keys: {}\r\n };\r\n setScore(0);\r\n setGameOver(false);\r\n };\r\n\r\n useEffect(() => {\r\n const canvas = canvasRef.current;\r\n if (!canvas) return;\r\n const ctx = canvas.getContext('2d');\r\n if (!ctx) return;\r\n const state = gameStateRef.current;\r\n\r\n const handleKeyDown = (e: KeyboardEvent): void => { \r\n state.keys[e.key] = true; \r\n };\r\n const handleKeyUp = (e: KeyboardEvent): void => { \r\n state.keys[e.key] = false; \r\n };\r\n window.addEventListener('keydown', handleKeyDown);\r\n window.addEventListener('keyup', handleKeyUp);\r\n\r\n let animationId: number;\r\n const gameLoop = (): void => {\r\n if (gameOver) return;\r\n \r\n state.frame++;\r\n ctx.fillStyle = '#000';\r\n ctx.fillRect(0, 0, 400, 400);\r\n\r\n if (state.keys['ArrowLeft'] && state.player.x > 0) state.player.x -= 5;\r\n if (state.keys['ArrowRight'] && state.player.x < 370) state.player.x += 5;\r\n if (state.keys['ArrowUp'] && state.player.y > 0) state.player.y -= 5;\r\n if (state.keys['ArrowDown'] && state.player.y < 370) state.player.y += 5;\r\n\r\n ctx.fillStyle = '#0ea5e9';\r\n ctx.fillRect(state.player.x, state.player.y, state.player.width, state.player.height);\r\n\r\n if (state.frame % 40 === 0) {\r\n state.enemies.push({ x: Math.random() * 370, y: -20, width: 30, height: 30 });\r\n }\r\n\r\n state.enemies = state.enemies.filter(enemy => {\r\n enemy.y += 3;\r\n ctx.fillStyle = '#ef4444';\r\n ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);\r\n\r\n if (enemy.x < state.player.x + state.player.width &&\r\n enemy.x + enemy.width > state.player.x &&\r\n enemy.y < state.player.y + state.player.height &&\r\n enemy.y + enemy.height > state.player.y) {\r\n setGameOver(true);\r\n return false;\r\n }\r\n\r\n if (enemy.y > 400) {\r\n setScore(s => s + 1);\r\n return false;\r\n }\r\n return true;\r\n });\r\n\r\n animationId = requestAnimationFrame(gameLoop);\r\n };\r\n \r\n if (!gameOver) gameLoop();\r\n\r\n return () => {\r\n cancelAnimationFrame(animationId);\r\n window.removeEventListener('keydown', handleKeyDown);\r\n window.removeEventListener('keyup', handleKeyUp);\r\n };\r\n }, [gameOver]);\r\n\r\n return (\r\n <div className=\"flex flex-col items-center gap-4 p-4\">\r\n <div className=\"text-xl font-bold\">Score: {score}</div>\r\n <canvas ref={canvasRef} width=\"400\" height=\"400\" className=\"border-2 border-gray-300\" />\r\n {gameOver && (\r\n <div className=\"text-center\">\r\n <p className=\"text-xl font-bold text-red-500 mb-2\">Game Over!</p>\r\n <Button onClick={resetGame}>Play Again</Button>\r\n </div>\r\n )}\r\n <p className=\"text-sm text-gray-600\">Use arrow keys to move</p>\r\n </div>\r\n );\r\n};\r\n\r\nexport default SpaceDodger;","import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost:\n \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n icon: \"size-9\",\n \"icon-sm\": \"size-8\",\n \"icon-lg\": \"size-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot : \"button\"\n\n return (\n <Comp\n data-slot=\"button\"\n data-variant={variant}\n data-size={size}\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n}\n\nexport { Button, buttonVariants }\n","import { clsx, type ClassValue } from \"clsx\"\r\nimport { twMerge } from \"tailwind-merge\"\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return twMerge(clsx(inputs))\r\n}"],"mappings":"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","names":["import_jsx_runtime"]}
1	+ {"version":3,"sources":["../src/index.ts","../src/components/games/spacedodger/index.tsx","../src/components/ui/button.tsx","../src/lib/utils.ts","../src/components/games/memorygame/index.tsx"],"sourcesContent":["import \"./index.css\";\r\nexport { default as SpaceDodger } from \"./components/games/spacedodger\";\r\nexport { default as MemoryGame } from \"./components/games/memorygame\";","import React, { useEffect, useRef, useState } from 'react';\r\nimport { Button } from '@/components/ui/button';\r\n\r\ninterface Position {\r\n x: number;\r\n y: number;\r\n}\r\n\r\ninterface Enemy extends Position {\r\n radius: number;\r\n}\r\n\r\ninterface Player extends Position {\r\n width: number;\r\n height: number;\r\n}\r\n\r\ninterface SpaceDodgerState {\r\n player: Player;\r\n enemies: Enemy[];\r\n frame: number;\r\n keys: Record<string, boolean>;\r\n}\r\n\r\n\r\nconst config = {\r\n canvasSize : { \r\n width: 450, \r\n height: 450 \r\n },\r\n player: { x: 200, y: 350, width: 25, height: 50 }\r\n}\r\n\r\nconst SpaceDodger: React.FC = () => {\r\n const canvasRef = useRef<HTMLCanvasElement>(null);\r\n const scoreRef = useRef(0);\r\n const lastBatchScoreRef = useRef(0);\r\n\r\n const [score, setScore] = useState(0);\r\n const [gameOver, setGameOver] = useState(false);\r\n\r\n const gameStateRef = useRef<SpaceDodgerState>({\r\n player: config.player,\r\n enemies: [],\r\n frame: 0,\r\n keys: {}\r\n });\r\n\r\n const resetGame = () => {\r\n gameStateRef.current = {\r\n player: config.player,\r\n enemies: [],\r\n frame: 0,\r\n keys: {}\r\n };\r\n scoreRef.current = 0;\r\n lastBatchScoreRef.current = 0;\r\n setScore(0);\r\n setGameOver(false);\r\n };\r\n\r\n\r\n \r\n useEffect(() => {\r\n const canvas = canvasRef.current;\r\n if (!canvas) return;\r\n const ctx = canvas.getContext('2d');\r\n if (!ctx) return;\r\n\r\n const state = gameStateRef.current;\r\n\r\n const handleKeyDown = (e: KeyboardEvent) => {\r\n state.keys[e.key] = true;\r\n };\r\n const handleKeyUp = (e: KeyboardEvent) => {\r\n state.keys[e.key] = false;\r\n };\r\n\r\n window.addEventListener('keydown', handleKeyDown);\r\n window.addEventListener('keyup', handleKeyUp);\r\n\r\n const randomRadius = () => 10 + Math.random() * 15;\r\n\r\n const getEnemySpeed = () => {\r\n const base = 3;\r\n const increase = Math.floor(scoreRef.current / 20) * 0.5;\r\n return base + increase;\r\n };\r\n\r\n let animationId: number;\r\n\r\n const gameLoop = () => {\r\n if (gameOver) return;\r\n\r\n state.frame++;\r\n\r\n ctx.fillStyle = '#000';\r\n ctx.fillRect(0, 0, config.canvasSize.width, config.canvasSize.height);\r\n\r\n // Player movement\r\n if (state.keys['ArrowLeft'] && state.player.x > 0) state.player.x -= 5;\r\n if (state.keys['ArrowRight'] && state.player.x < config.canvasSize.width - state.player.width) state.player.x += 5;\r\n if (state.keys['ArrowUp'] && state.player.y > 0) state.player.y -= 5;\r\n if (state.keys['ArrowDown'] && state.player.y < config.canvasSize.height - state.player.height) state.player.y += 5;\r\n\r\n // Draw player\r\n ctx.fillStyle = '#0ea5e9';\r\n ctx.fillRect(\r\n state.player.x,\r\n state.player.y,\r\n state.player.width,\r\n state.player.height\r\n );\r\n\r\n // Normal enemy spawn\r\n if (state.frame % 40 === 0) {\r\n const radius = randomRadius();\r\n state.enemies.push({\r\n x: radius + Math.random() * (config.canvasSize.width - radius * 2),\r\n y: -radius,\r\n radius,\r\n });\r\n }\r\n\r\n // Extra batch every 20 score\r\n if (\r\n scoreRef.current > 0 &&\r\n scoreRef.current % 20 === 0 &&\r\n lastBatchScoreRef.current !== scoreRef.current\r\n ) {\r\n lastBatchScoreRef.current = scoreRef.current;\r\n const batchCount = 2 + Math.floor(Math.random() * 3);\r\n\r\n for (let i = 0; i < batchCount; i++) {\r\n const radius = randomRadius();\r\n state.enemies.push({\r\n x: radius + Math.random() * (config.canvasSize.width - radius * 2),\r\n y: -Math.random() * 100,\r\n radius\r\n });\r\n }\r\n }\r\n\r\n // Enemies update\r\n state.enemies = state.enemies.filter(enemy => {\r\n enemy.y += getEnemySpeed();\r\n\r\n // Draw enemy (circle)\r\n ctx.fillStyle = '#ef4444';\r\n ctx.beginPath();\r\n ctx.arc(enemy.x, enemy.y, enemy.radius, 0, Math.PI * 2);\r\n ctx.fill();\r\n\r\n // Circle vs rectangle collision\r\n const closestX = Math.max(\r\n state.player.x,\r\n Math.min(enemy.x, state.player.x + state.player.width)\r\n );\r\n const closestY = Math.max(\r\n state.player.y,\r\n Math.min(enemy.y, state.player.y + state.player.height)\r\n );\r\n\r\n const dx = enemy.x - closestX;\r\n const dy = enemy.y - closestY;\r\n\r\n if (dx * dx + dy * dy < enemy.radius * enemy.radius) {\r\n setGameOver(true);\r\n return false;\r\n }\r\n\r\n // Passed screen\r\n if (enemy.y - enemy.radius > config.canvasSize.height) {\r\n setScore(s => {\r\n scoreRef.current = s + 1;\r\n return s + 1;\r\n });\r\n return false;\r\n }\r\n\r\n return true;\r\n });\r\n\r\n animationId = requestAnimationFrame(gameLoop);\r\n };\r\n\r\n gameLoop();\r\n\r\n return () => {\r\n cancelAnimationFrame(animationId);\r\n window.removeEventListener('keydown', handleKeyDown);\r\n window.removeEventListener('keyup', handleKeyUp);\r\n };\r\n }, [gameOver]);\r\n\r\n return (\r\n <div className=\"relative flex flex-col items-center gap-4 p-4\">\r\n <div className=\"text-xl font-bold\">Score: {score}</div>\r\n <canvas\r\n ref={canvasRef}\r\n width={config.canvasSize.width}\r\n height={config.canvasSize.height}\r\n className=\"border-2 border-gray-300\"\r\n />\r\n\r\n {gameOver && (\r\n <div className=\"absolute inset-0 flex flex-col items-center justify-center bg-black/60\">\r\n <p className=\"text-xl font-bold text-red-500 mb-3\">Game Over</p>\r\n <Button onClick={resetGame}>Play Again</Button>\r\n </div>\r\n )}\r\n\r\n <div className=\"text-sm text-foreground\">Use arrow keys to move</div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default SpaceDodger;","import * as React from \"react\"\r\nimport { Slot } from \"@radix-ui/react-slot\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst buttonVariants = cva(\r\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\r\n destructive:\r\n \"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\r\n outline:\r\n \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\r\n secondary:\r\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n ghost:\r\n \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\r\n link: \"text-primary underline-offset-4 hover:underline\",\r\n },\r\n size: {\r\n default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\r\n sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\r\n lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\r\n icon: \"size-9\",\r\n \"icon-sm\": \"size-8\",\r\n \"icon-lg\": \"size-10\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n size: \"default\",\r\n },\r\n }\r\n)\r\n\r\nfunction Button({\r\n className,\r\n variant = \"default\",\r\n size = \"default\",\r\n asChild = false,\r\n ...props\r\n}: React.ComponentProps<\"button\"> &\r\n VariantProps<typeof buttonVariants> & {\r\n asChild?: boolean\r\n }) {\r\n const Comp = asChild ? Slot : \"button\"\r\n\r\n return (\r\n <Comp\r\n data-slot=\"button\"\r\n data-variant={variant}\r\n data-size={size}\r\n className={cn(buttonVariants({ variant, size, className }))}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nexport { Button, buttonVariants }\r\n","import { clsx, type ClassValue } from \"clsx\"\r\nimport { twMerge } from \"tailwind-merge\"\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return twMerge(clsx(inputs))\r\n}","import React, { useEffect, useRef, useState } from 'react';\r\nimport { Button } from '@/components/ui/button';\r\n\r\ninterface NumberItem {\r\n x: number;\r\n y: number;\r\n value: number;\r\n radius: number;\r\n}\r\n\r\ntype GamePhase = 'memorize' \| 'recall' \| 'transition';\r\n\r\ninterface GameState {\r\n numbers: NumberItem[];\r\n sequence: number[];\r\n currentIndex: number;\r\n level: number;\r\n showNumbers: boolean;\r\n phase: GamePhase;\r\n revealed: Set<number>;\r\n}\r\n\r\nconst config = {\r\n canvasSize: { width: 450, height: 450 },\r\n baseHideTime: 3000,\r\n numberRadius: 30,\r\n};\r\n\r\nconst MemoryGame: React.FC = () => {\r\n const canvasRef = useRef<HTMLCanvasElement>(null);\r\n const [level, setLevel] = useState(1);\r\n const [gameOver, setGameOver] = useState(false);\r\n const [message, setMessage] = useState('');\r\n const [showOverlay, setShowOverlay] = useState<{ visible: boolean; text: string }>({\r\n visible: false,\r\n text: '',\r\n });\r\n const gameStateRef = useRef<GameState>({\r\n numbers: [],\r\n sequence: [],\r\n currentIndex: 0,\r\n level: 1,\r\n showNumbers: true,\r\n phase: 'memorize',\r\n revealed: new Set(),\r\n });\r\n\r\n // Max numbers = 9\r\n const getNumberCount = (lvl: number) => Math.min(4 + lvl, 9);\r\n\r\n // Hide time decreases as level increases, min 500ms\r\n const getHideTime = (lvl: number) =>\r\n Math.max(500, config.baseHideTime - Math.floor((lvl - 1) / 1) 500);\r\n\r\n const generateNumbers = (lvl: number) => {\r\n const count = getNumberCount(lvl);\r\n const numbers: NumberItem[] = [];\r\n const sequence: number[] = [];\r\n const padding = config.numberRadius * 2.5;\r\n\r\n for (let i = 0; i < count; i++) {\r\n let x: number, y: number, overlap: boolean;\r\n let attempts = 0;\r\n\r\n do {\r\n overlap = false;\r\n x = padding + Math.random() * (config.canvasSize.width - padding * 2);\r\n y = padding + Math.random() * (config.canvasSize.height - padding * 2);\r\n\r\n for (const num of numbers) {\r\n const dx = x - num.x;\r\n const dy = y - num.y;\r\n if (Math.sqrt(dx * dx + dy * dy) < config.numberRadius * 2.5) {\r\n overlap = true;\r\n break;\r\n }\r\n }\r\n attempts++;\r\n } while (overlap && attempts < 100);\r\n\r\n numbers.push({ x, y, value: i + 1, radius: config.numberRadius });\r\n sequence.push(i + 1);\r\n }\r\n\r\n return { numbers, sequence };\r\n };\r\n\r\n const startLevel = (lvl: number) => {\r\n const { numbers, sequence } = generateNumbers(lvl);\r\n gameStateRef.current = {\r\n numbers,\r\n sequence,\r\n currentIndex: 0,\r\n level: lvl,\r\n showNumbers: true,\r\n phase: 'memorize',\r\n revealed: new Set(),\r\n };\r\n setMessage('Memorize the sequence!');\r\n\r\n setTimeout(() => {\r\n gameStateRef.current.showNumbers = false;\r\n gameStateRef.current.phase = 'recall';\r\n setMessage('Click the numbers in order!');\r\n }, getHideTime(lvl));\r\n };\r\n\r\n const resetGame = () => {\r\n setLevel(1);\r\n setGameOver(false);\r\n setShowOverlay({ visible: false, text: '' });\r\n startLevel(1);\r\n };\r\n\r\n const handleCanvasClick = (e: React.MouseEvent<HTMLCanvasElement>) => {\r\n if (gameOver \|\| gameStateRef.current.phase !== 'recall') return;\r\n const canvas = canvasRef.current;\r\n if (!canvas) return;\r\n\r\n const rect = canvas.getBoundingClientRect();\r\n const x = e.clientX - rect.left;\r\n const y = e.clientY - rect.top;\r\n const state = gameStateRef.current;\r\n\r\n for (const num of state.numbers) {\r\n const distance = Math.hypot(x - num.x, y - num.y);\r\n if (distance <= num.radius) {\r\n const expected = state.sequence[state.currentIndex];\r\n if (num.value === expected) {\r\n state.revealed.add(num.value);\r\n state.currentIndex++;\r\n\r\n if (state.currentIndex === state.sequence.length) {\r\n const nextLevel = level + 1;\r\n setLevel(nextLevel);\r\n state.phase = 'transition';\r\n setShowOverlay({ visible: true, text: `Get Ready! Level ${nextLevel}` });\r\n\r\n setTimeout(() => {\r\n setShowOverlay({ visible: false, text: '' });\r\n startLevel(nextLevel);\r\n }, 1500);\r\n }\r\n } else {\r\n setGameOver(true);\r\n setMessage(`Wrong! Clicked ${num.value}, expected ${expected}`);\r\n }\r\n break;\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => startLevel(1), []);\r\n\r\n useEffect(() => {\r\n const canvas = canvasRef.current;\r\n if (!canvas) return;\r\n const ctx = canvas.getContext('2d');\r\n if (!ctx) return;\r\n\r\n let animationId: number;\r\n\r\n const draw = () => {\r\n const state = gameStateRef.current;\r\n ctx.fillStyle = '#000';\r\n ctx.fillRect(0, 0, config.canvasSize.width, config.canvasSize.height);\r\n\r\n state.numbers.forEach((num, idx) => {\r\n // Show green hint only in level 1\r\n const isNext = state.phase === 'recall' && level === 1 && idx === state.currentIndex;\r\n ctx.fillStyle = isNext ? '#22c55e' : '#3b82f6';\r\n ctx.beginPath();\r\n ctx.arc(num.x, num.y, num.radius, 0, Math.PI * 2);\r\n ctx.fill();\r\n\r\n // Reveal numbers if memorizing, transitioning, or already correctly guessed\r\n if (state.showNumbers \|\| state.phase === 'transition' \|\| state.revealed.has(num.value)) {\r\n ctx.fillStyle = '#fff';\r\n ctx.font = 'bold 24px sans-serif';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText(num.value.toString(), num.x, num.y);\r\n }\r\n });\r\n\r\n if (!gameOver) animationId = requestAnimationFrame(draw);\r\n };\r\n\r\n draw();\r\n return () => cancelAnimationFrame(animationId);\r\n }, [gameOver, level]);\r\n\r\n return (\r\n <div className=\"relative flex flex-col items-center gap-4 p-4\">\r\n <div className=\"flex gap-8 text-xl font-bold\">\r\n <div>Level: {level}</div>\r\n <div>Numbers: {getNumberCount(level)}</div>\r\n </div>\r\n <div className=\"text-lg font-semibold text-blue-400 h-6\">{message}</div>\r\n <canvas\r\n ref={canvasRef}\r\n width={config.canvasSize.width}\r\n height={config.canvasSize.height}\r\n className=\"border-2 border-gray-300 cursor-pointer\"\r\n onClick={handleCanvasClick}\r\n />\r\n {gameOver && (\r\n <div className=\"absolute inset-0 flex flex-col items-center justify-center bg-black/60\">\r\n <p className=\"text-xl font-bold text-red-500 mb-2\">Game Over</p>\r\n <p className=\"text-lg text-white mb-4\">Reached Level {level}</p>\r\n <Button onClick={resetGame}>Play Again</Button>\r\n </div>\r\n )}\r\n\r\n {showOverlay.visible && (\r\n <div className=\"absolute inset-0 flex flex-col items-center justify-center bg-black/60\">\r\n <p className=\"text-2xl font-bold text-yellow-400\">{showOverlay.text}</p>\r\n </div>\r\n )}\r\n\r\n <div className=\"text-sm text-center text-foreground max-w-md\">\r\n <div>Memorize the numbers, then click them in sequence (1, 2, 3...)</div>\r\n <div className=\"mt-1 text-xs text-gray-400\">Green circle = next number to click (level 1 only)</div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default MemoryGame;\r\n"],"mappings":"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","names":["import_jsx_runtime","import_react","import_jsx_runtime","config"]}

package/dist/index.css CHANGED Viewed

@@ -22,14 +22,24 @@
       "Courier New",
       monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-yellow-400: oklch(85.2% 0.199 91.936);
+    --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-gray-300: oklch(87.2% 0.01 258.338);
-    --color-gray-600: oklch(44.6% 0.03 256.802);
+    --color-gray-400: oklch(70.7% 0.022 261.325);
+    --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --container-md: 28rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
@@ -233,6 +243,18 @@
     container-type: inline-size;
     container-name: card-header;
   }
+  .visible {
+    visibility: visible;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .relative {
+    position: relative;
+  }
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
   .col-start-2 {
     grid-column-start: 2;
   }
@@ -242,9 +264,18 @@
   .row-start-1 {
     grid-row-start: 1;
   }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
   .flex {
     display: flex;
   }
@@ -266,6 +297,9 @@
     width: calc(var(--spacing) * 10);
     height: calc(var(--spacing) * 10);
   }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
@@ -275,9 +309,15 @@
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
+  .max-w-md {
+    max-width: var(--container-md);
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .cursor-pointer {
+    cursor: pointer;
+  }
   .auto-rows-min {
     grid-auto-rows: min-content;
   }
@@ -308,6 +348,9 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
   .self-start {
     align-self: flex-start;
   }
@@ -334,6 +377,12 @@
   .bg-background {
     background-color: var(--background);
   }
+  .bg-black\/60 {
+    background-color: color-mix(in srgb, #000 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
+    }
+  }
   .bg-card {
     background-color: var(--card);
   }
@@ -367,6 +416,14 @@
   .text-center {
     text-align: center;
   }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -375,6 +432,10 @@
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -394,11 +455,17 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .text-blue-400 {
+    color: var(--color-blue-400);
+  }
   .text-card-foreground {
     color: var(--card-foreground);
   }
-  .text-gray-600 {
-    color: var(--color-gray-600);
+  .text-foreground {
+    color: var(--foreground);
+  }
+  .text-gray-400 {
+    color: var(--color-gray-400);
   }
   .text-muted-foreground {
     color: var(--muted-foreground);
@@ -418,6 +485,9 @@
   .text-white {
     color: var(--color-white);
   }
+  .text-yellow-400 {
+    color: var(--color-yellow-400);
+  }
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
@@ -443,6 +513,34 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .transition {
+    transition-property:
+      color,
+      background-color,
+      border-color,
+      outline-color,
+      text-decoration-color,
+      fill,
+      stroke,
+      --tw-gradient-from,
+      --tw-gradient-via,
+      --tw-gradient-to,
+      opacity,
+      box-shadow,
+      transform,
+      translate,
+      scale,
+      rotate,
+      filter,
+      -webkit-backdrop-filter,
+      backdrop-filter,
+      display,
+      content-visibility,
+      overlay,
+      pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));