[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState, useEffect } from "react" import GameBoard from "@/components/game-board" import QuizModal from "@/components/quiz-modal" import { GameProvider } from "@/lib/game-state" export default function Home() { const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) if (!mounted) { return null } return (

Escape Room RPG

Use arrow keys or WASD to move

Press E to interact with objects

) } [V0_FILE]typescriptreact:file="components/game-board.tsx" "use client" import { useEffect, useRef } from "react" import Character from "@/components/character" import InteractiveObject from "@/components/interactive-object" import { useGameState } from "@/lib/game-state" import { objects } from "@/lib/objects" export default function GameBoard() { const canvasRef = useRef(null) const { characterPosition, setCharacterPosition, interactionRadius, setNearbyObject, gameWon } = useGameState() // Draw the room useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height) // Draw room ctx.fillStyle = "#8b5a2b" // Brown floor ctx.fillRect(0, 0, canvas.width, canvas.height) // Draw walls ctx.fillStyle = "#a0522d" // Darker brown walls ctx.fillRect(0, 0, canvas.width, 20) // Top wall ctx.fillRect(0, 0, 20, canvas.height) // Left wall ctx.fillRect(0, canvas.height - 20, canvas.width, 20) // Bottom wall ctx.fillRect(canvas.width - 20, 0, 20, canvas.height) // Right wall // Draw door ctx.fillStyle = "#4b3621" // Door color ctx.fillRect(canvas.width / 2 - 30, 0, 60, 15) // Door at top // Draw objects objects.forEach((obj) => { ctx.fillStyle = obj.color ctx.fillRect(obj.x, obj.y, obj.width, obj.height) // Draw label ctx.fillStyle = "white" ctx.font = "12px Arial" ctx.fillText(obj.name, obj.x, obj.y - 5) }) // Check if character is near any object const nearbyObj = objects.find((obj) => { const distance = Math.sqrt( Math.pow(characterPosition.x + 20 - (obj.x + obj.width / 2), 2) + Math.pow(characterPosition.y + 20 - (obj.y + obj.height / 2), 2), ) return distance < interactionRadius }) setNearbyObject(nearbyObj || null) // Draw interaction hint if near object if (nearbyObj) { ctx.fillStyle = "white" ctx.font = "14px Arial" ctx.fillText("Press E to interact", nearbyObj.x, nearbyObj.y - 20) } }, [characterPosition, setNearbyObject, interactionRadius]) // Handle keyboard input useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (gameWon) return const speed = 10 const newPos = { ...characterPosition } switch (e.key.toLowerCase()) { case "arrowup": case "w": newPos.y = Math.max(20, newPos.y - speed) break case "arrowdown": case "s": newPos.y = Math.min(canvasRef.current!.height - 60, newPos.y + speed) break case "arrowleft": case "a": newPos.x = Math.max(20, newPos.x - speed) break case "arrowright": case "d": newPos.x = Math.min(canvasRef.current!.width - 60, newPos.x + speed) break } setCharacterPosition(newPos) } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [characterPosition, setCharacterPosition, gameWon]) return (

) } [V0_FILE]typescriptreact:file="components/character.tsx" "use client" import { useGameState } from "@/lib/game-state" export default function Character() { const { characterPosition } = useGameState() return (

) } [V0_FILE]typescriptreact:file="components/interactive-object.tsx" "use client" import { useEffect } from "react" import { useGameState } from "@/lib/game-state" import type { ObjectType } from "@/lib/objects" interface InteractiveObjectProps { object: ObjectType } export default function InteractiveObject({ object }: InteractiveObjectProps) { const { nearbyObject, discoveredClues, setDiscoveredClues, setShowQuiz, setCurrentObject } = useGameState() useEffect(() => { const handleKeyPress = (e: KeyboardEvent) => { if (e.key.toLowerCase() === "e" && nearbyObject?.id === object.id) { // If this is the quiz object and we have all clues, show the quiz if (object.isQuiz && discoveredClues.length >= 3) { setShowQuiz(true) } // Otherwise, if it's a clue object and we haven't discovered it yet else if (!object.isQuiz && !discoveredClues.includes(object.id)) { setDiscoveredClues([...discoveredClues, object.id]) setCurrentObject(object) } // If it's a clue we've already found else if (!object.isQuiz) { setCurrentObject(object) } // If it's the quiz but we don't have enough clues else if (object.isQuiz) { setCurrentObject({ ...object, description: "I need to find more clues before I can solve this puzzle.", }) } } } window.addEventListener("keypress", handleKeyPress) return () => window.removeEventListener("keypress", handleKeyPress) }, [nearbyObject, object, discoveredClues, setDiscoveredClues, setShowQuiz, setCurrentObject]) return null // Objects are drawn on the canvas } [V0_FILE]typescriptreact:file="components/quiz-modal.tsx" "use client" import type React from "react" import { useState } from "react" import { useGameState } from "@/lib/game-state" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog" export default function QuizModal() { const { showQuiz, setShowQuiz, currentObject, setCurrentObject, setGameWon } = useGameState() const [answer, setAnswer] = useState("") const [isIncorrect, setIsIncorrect] = useState(false) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // The answer is "shadow" - this would be derived from the clues if (answer.toLowerCase() === "shadow") { setGameWon(true) setShowQuiz(false) } else { setIsIncorrect(true) setTimeout(() => setIsIncorrect(false), 2000) } } return ( <> {/* Quiz Modal */} {/* Object Interaction Modal */} ) } [V0_FILE]typescriptreact:file="lib/game-state.tsx" "use client" import { createContext, useContext, useState, type ReactNode } from "react" import type { ObjectType } from "./objects" interface Position { x: number y: number } interface GameStateContextType { characterPosition: Position setCharacterPosition: (position: Position) => void interactionRadius: number nearbyObject: ObjectType | null setNearbyObject: (object: ObjectType | null) => void discoveredClues: string[] setDiscoveredClues: (clues: string[]) => void showQuiz: boolean setShowQuiz: (show: boolean) => void currentObject: ObjectType | null setCurrentObject: (object: ObjectType | null) => void gameWon: boolean setGameWon: (won: boolean) => void } const GameStateContext = createContext(undefined) export function GameProvider({ children }: { children: ReactNode }) { const [characterPosition, setCharacterPosition] = useState({ x: 400, y: 250 }) const [interactionRadius] = useState(60) const [nearbyObject, setNearbyObject] = useState(null) const [discoveredClues, setDiscoveredClues] = useState([]) const [showQuiz, setShowQuiz] = useState(false) const [currentObject, setCurrentObject] = useState(null) const [gameWon, setGameWon] = useState(false) return ( {children} ) } export function useGameState() { const context = useContext(GameStateContext) if (context === undefined) { throw new Error("useGameState must be used within a GameProvider") } return context } [V0_FILE]typescriptreact:file="lib/objects.ts" export interface ObjectType { id: string name: string x: number y: number width: number height: number color: string description: string clue?: string isQuiz?: boolean } export const objects: ObjectType[] = [ { id: "bookshelf", name: "Bookshelf", x: 50, y: 100, width: 100, height: 150, color: "#8B4513", description: "A dusty bookshelf with various old books.", clue: "I am always with you during the day, but I cannot exist in darkness.", }, { id: "desk", name: "Desk", x: 250, y: 350, width: 120, height: 70, color: "#A0522D", description: "A wooden desk with some papers scattered on top.", clue: "I mimic your movements, but I cannot think for myself.", }, { id: "painting", name: "Painting", x: 600, y: 80, width: 80, height: 100, color: "#DAA520", description: "A painting of a sunny day in a park.", clue: "I am darkest when the light is brightest.", }, { id: "door", name: "Door", x: 370, y: 20, width: 60, height: 15, color: "#4B3621", description: "The exit door. It seems to be locked with a riddle.", isQuiz: true, }, { id: "lamp", name: "Lamp", x: 500, y: 300, width: 40, height: 80, color: "#FFD700", description: "A tall lamp with a warm glow.", }, { id: "rug", name: "Rug", x: 300, y: 200, width: 200, height: 120, color: "#B22222", description: "A decorative rug with an intricate pattern.", }, ] [V0_FILE]typescriptreact:file="components/ui/button.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="components/ui/input.tsx" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } }

Escape Room RPG

You Escaped!

About

About