[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # Minecraft clone prototype *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/jakeatgalileoteam/v0-minecraft-clone-prototype) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/projects/aKaVQTE4FrM) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/jakeatgalileoteam/v0-minecraft-clone-prototype](https://vercel.com/jakeatgalileoteam/v0-minecraft-clone-prototype)** ## Build your app Continue building your app on: **[https://v0.app/chat/projects/aKaVQTE4FrM](https://v0.app/chat/projects/aKaVQTE4FrM)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); /* Updated radius to 6px as per custom instructions */ --radius: 0.375rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); /* Added Inter font configuration */ --font-sans: var(--font-inter); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"], display: "swap", variable: "--font-inter", }) export const metadata: Metadata = { title: "Minecraft Clone", description: "A Minecraft-inspired voxel game built with React Three Fiber", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import Link from "next/link" import { Canvas } from "@react-three/fiber" import TitleScene from "@/components/TitleScene" export default function Home() { return (

Minecraft Clone

Play

) } [V0_FILE]typescriptreact:file="app/play/page.tsx" "use client" import { Canvas } from "@react-three/fiber" import Scene from "@/components/Scene" import Crosshair from "@/components/Crosshair" import Hotbar from "@/components/Hotbar" import { DEFAULT_FOV, DEFAULT_NEAR, DEFAULT_FAR } from "@/engine/config" export default function Play() { return (

{/* Full-screen Canvas */}

{/* HTML Overlay */}

) } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/BlockDamageOverlay.tsx" "use client" import { useEffect, useRef } from "react" import { DoubleSide } from "three" import { useWorldStore } from "@/engine/world/WorldStore" const FACE_DATA = [ { pos: [0.5, 0, 0], rot: [0, Math.PI / 2, 0], axes: [ [0, 0, 1], [0, 1, 0], ], }, // +X { pos: [-0.5, 0, 0], rot: [0, -Math.PI / 2, 0], axes: [ [0, 0, 1], [0, 1, 0], ], }, // -X { pos: [0, 0.5, 0], rot: [-Math.PI / 2, 0, 0], axes: [ [1, 0, 0], [0, 0, 1], ], }, // +Y { pos: [0, -0.5, 0], rot: [Math.PI / 2, 0, 0], axes: [ [1, 0, 0], [0, 0, 1], ], }, // -Y { pos: [0, 0, 0.5], rot: [0, 0, 0], axes: [ [1, 0, 0], [0, 1, 0], ], }, // +Z { pos: [0, 0, -0.5], rot: [0, Math.PI, 0], axes: [ [1, 0, 0], [0, 1, 0], ], }, // -Z ] const NUM_SQUARES = 300 export default function BlockDamageOverlay() { const breakTarget = useWorldStore((s) => s.breakTarget) const breakProgress = useWorldStore((s) => s.breakProgress) const squaresRef = useRef< { face: number; x: number; y: number; r: number }[] >([]) useEffect(() => { if (breakTarget) { const arr = [] for (let i = 0; i < NUM_SQUARES; i++) { const angle = Math.random() * Math.PI * 2 const radius = Math.sqrt(Math.random()) * 0.45 arr.push({ face: Math.floor(Math.random() * 6), x: Math.cos(angle) * radius, y: Math.sin(angle) * radius, r: radius, }) } arr.sort((a, b) => a.r - b.r) squaresRef.current = arr } else { squaresRef.current = [] } }, [breakTarget]) if (!breakTarget) return null const count = Math.floor( Math.pow(breakProgress, 1.2) * squaresRef.current.length ) return ( {squaresRef.current.slice(0, count).map((s, i) => { const face = FACE_DATA[s.face] const worldPos = [ face.pos[0] + s.x * face.axes[0][0] + s.y * face.axes[1][0], face.pos[1] + s.x * face.axes[0][1] + s.y * face.axes[1][1], face.pos[2] + s.x * face.axes[0][2] + s.y * face.axes[1][2], ] return ( ) })} ) } [V0_FILE]typescriptreact:file="components/Crosshair.tsx" "use client" export default function Crosshair() { return (

{/* Horizontal line */}

{/* Vertical line */}

) } [V0_FILE]typescriptreact:file="components/FirstPersonCamera.tsx" "use client" import { useRef, useEffect } from "react" import { useFrame, useThree } from "@react-three/fiber" import type { PerspectiveCamera } from "three" import { usePlayerStore } from "@/engine/player/PlayerStore" import { DEFAULT_NEAR, DEFAULT_FAR } from "@/engine/config" export default function FirstPersonCamera() { const cameraRef = useRef(null) const { set } = useThree() const fov = usePlayerStore((state) => state.fov) // Set this camera as the default camera useEffect(() => { if (cameraRef.current) { set({ camera: cameraRef.current }) } }, [set]) // Update camera position and rotation from player store useFrame(() => { if (!cameraRef.current) return const { position, yaw, pitch } = usePlayerStore.getState() // Position camera at player eye level const eyeHeight = 1.6 cameraRef.current.position.set(position.x, position.y + eyeHeight, position.z) // Apply rotation cameraRef.current.rotation.set(pitch, yaw, 0, "YXZ") }) // Update camera FOV when store value changes useEffect(() => { if (!cameraRef.current) return cameraRef.current.fov = fov cameraRef.current.updateProjectionMatrix() }, [fov]) return ( ) } [V0_FILE]typescriptreact:file="components/Hotbar.tsx" import { useInventoryStore } from "@/engine/inventory/InventoryStore" import { BlockId, BLOCK_DATA } from "@/engine/blocks/BlockTypes" const getBlockColor = (blockId: BlockId): string => { return BLOCK_DATA[blockId]?.color ?? "transparent" } const getBlockName = (blockId: BlockId): string => { return BLOCK_DATA[blockId]?.name ?? "" } export default function Hotbar() { const hotbar = useInventoryStore((state) => state.hotbar) const selectedIndex = useInventoryStore((state) => state.selectedIndex) return (

{hotbar.map((slot, index) => (

{slot.quantity > 0 && ( <>

{slot.quantity} )} {index + 1}

))}

) } [V0_FILE]typescriptreact:file="components/PlayerArm.tsx" "use client" import { useEffect, useRef } from "react" import { useFrame, useThree } from "@react-three/fiber" import * as THREE from "three" export default function PlayerArm() { const meshRef = useRef(null) const { camera } = useThree() const swinging = useRef(false) const phase = useRef(0) useEffect(() => { const mesh = meshRef.current if (!mesh) return camera.add(mesh) return () => { camera.remove(mesh) } }, [camera]) useEffect(() => { const handleDown = (e: MouseEvent) => { if (e.button === 0) swinging.current = true } const handleUp = (e: MouseEvent) => { if (e.button === 0) swinging.current = false } document.addEventListener("mousedown", handleDown) document.addEventListener("mouseup", handleUp) return () => { document.removeEventListener("mousedown", handleDown) document.removeEventListener("mouseup", handleUp) } }, []) useFrame((_, delta) => { const mesh = meshRef.current if (!mesh) return const maxAngle = Math.PI / 3 if (swinging.current) { phase.current += delta * 8 mesh.rotation.x = -Math.abs(Math.sin(phase.current)) * maxAngle } else { mesh.rotation.x = THREE.MathUtils.damp(mesh.rotation.x, 0, 10, delta) phase.current = 0 } }) return ( ) } [V0_FILE]typescriptreact:file="components/PlayerController.tsx" "use client" import { useEffect, useRef } from "react" import { useFrame } from "@react-three/fiber" import { usePlayerStore } from "@/engine/player/PlayerStore" import { Controller } from "@/engine/player/Controller" import { BlockInteraction, BLOCK_BREAK_TIME_MS } from "@/engine/world/BlockInteraction" import { BlockId } from "@/engine/blocks/BlockTypes" import { useInventoryStore } from "@/engine/inventory/InventoryStore" import { useWorldStore } from "@/engine/world/WorldStore" import { raycastVoxel } from "@/lib/math/dda" const EYE_HEIGHT = 1.6 export default function PlayerController() { const setKey = usePlayerStore((state) => state.setKey) const setRotation = usePlayerStore((state) => state.setRotation) const position = usePlayerStore((state) => state.position) const yaw = usePlayerStore((state) => state.yaw) const pitch = usePlayerStore((state) => state.pitch) const lastTime = useRef(0) const selectedIndex = useInventoryStore((state) => state.selectedIndex) const setSelectedIndex = useInventoryStore((state) => state.setSelectedIndex) const getSelectedItem = useInventoryStore((state) => state.getSelectedItem) const addItem = useInventoryStore((state) => state.addItem) const removeItem = useInventoryStore((state) => state.removeItem) const setBreakTarget = useWorldStore((state) => state.setBreakTarget) const setBreakProgress = useWorldStore((state) => state.setBreakProgress) const breaking = useRef(false) const breakStart = useRef(0) const breakTarget = useRef<{ x: number; y: number; z: number } | null>(null) useEffect(() => { const handleMouseDown = (event: MouseEvent) => { if (!document.pointerLockElement) return const direction = { x: -Math.sin(yaw) * Math.cos(pitch), y: Math.sin(pitch), z: -Math.cos(yaw) * Math.cos(pitch), } const cameraPos = { x: position.x, y: position.y + EYE_HEIGHT, z: position.z, } if (event.button === 0) { event.preventDefault() const hit = raycastVoxel(cameraPos, direction, 5) if (hit.hit && hit.position) { breaking.current = true breakStart.current = performance.now() breakTarget.current = { ...hit.position } setBreakTarget(hit.position) setBreakProgress(0) } } else if (event.button === 2) { event.preventDefault() const selectedItem = getSelectedItem() if (selectedItem && selectedItem.quantity > 0) { const placed = BlockInteraction.placeBlock(cameraPos, direction, selectedItem.blockId) if (placed) { removeItem(selectedIndex, 1) } } } } const handleMouseUp = (event: MouseEvent) => { if (event.button === 0) { breaking.current = false breakTarget.current = null setBreakTarget(null) setBreakProgress(0) } } const handleWheel = (event: WheelEvent) => { if (document.pointerLockElement) { event.preventDefault() const delta = event.deltaY > 0 ? 1 : -1 const newIndex = (selectedIndex + delta + 9) % 9 setSelectedIndex(newIndex) } } const handleContextMenu = (event: MouseEvent) => { if (document.pointerLockElement) { event.preventDefault() // Prevent right-click menu when pointer locked } } document.addEventListener("mousedown", handleMouseDown) document.addEventListener("mouseup", handleMouseUp) document.addEventListener("wheel", handleWheel) document.addEventListener("contextmenu", handleContextMenu) return () => { document.removeEventListener("mousedown", handleMouseDown) document.removeEventListener("mouseup", handleMouseUp) document.removeEventListener("wheel", handleWheel) document.removeEventListener("contextmenu", handleContextMenu) } }, [position, yaw, pitch, selectedIndex, getSelectedItem, removeItem, setSelectedIndex, setBreakTarget, setBreakProgress]) useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (event.code >= "Digit1" && event.code <= "Digit9") { const index = Number.parseInt(event.code.slice(-1)) - 1 setSelectedIndex(index) return } switch (event.code) { case "KeyW": setKey("forward", true) break case "KeyS": setKey("backward", true) break case "KeyA": setKey("left", true) break case "KeyD": setKey("right", true) break case "Space": event.preventDefault() setKey("jump", true) break } } const handleKeyUp = (event: KeyboardEvent) => { switch (event.code) { case "KeyW": setKey("forward", false) break case "KeyS": setKey("backward", false) break case "KeyA": setKey("left", false) break case "KeyD": setKey("right", false) break case "Space": setKey("jump", false) break } } window.addEventListener("keydown", handleKeyDown) window.addEventListener("keyup", handleKeyUp) return () => { window.removeEventListener("keydown", handleKeyDown) window.removeEventListener("keyup", handleKeyUp) } }, [setKey, setSelectedIndex]) useEffect(() => { const handleMouseMove = (event: MouseEvent) => { if (document.pointerLockElement) { const sensitivity = 0.002 const deltaX = event.movementX * sensitivity const deltaY = event.movementY * sensitivity const currentState = usePlayerStore.getState() const newYaw = currentState.yaw - deltaX const newPitch = Math.max( -Math.PI / 2, Math.min(Math.PI / 2, currentState.pitch - deltaY), ) setRotation(newYaw, newPitch) } } document.addEventListener("mousemove", handleMouseMove) return () => { document.removeEventListener("mousemove", handleMouseMove) } }, [setRotation]) useFrame((state) => { if (breaking.current) { const direction = { x: -Math.sin(yaw) * Math.cos(pitch), y: Math.sin(pitch), z: -Math.cos(yaw) * Math.cos(pitch), } const cameraPos = { x: position.x, y: position.y + EYE_HEIGHT, z: position.z, } const hit = raycastVoxel(cameraPos, direction, 5) if (!hit.hit || !hit.position) { breaking.current = false breakTarget.current = null setBreakTarget(null) setBreakProgress(0) } else { const { x, y, z } = hit.position if ( !breakTarget.current || breakTarget.current.x !== x || breakTarget.current.y !== y || breakTarget.current.z !== z ) { breakTarget.current = { x, y, z } breakStart.current = performance.now() setBreakTarget(hit.position) setBreakProgress(0) } else { const elapsed = performance.now() - breakStart.current const progress = elapsed / BLOCK_BREAK_TIME_MS setBreakProgress(progress) if (elapsed >= BLOCK_BREAK_TIME_MS) { const brokenBlock = BlockInteraction.breakBlockAt(x, y, z) if (brokenBlock && brokenBlock !== BlockId.AIR) { addItem(brokenBlock, 1) } breaking.current = false breakTarget.current = null setBreakTarget(null) setBreakProgress(0) } } } } const currentTime = state.clock.elapsedTime const deltaTime = lastTime.current === 0 ? 0.016 : currentTime - lastTime.current lastTime.current = currentTime const cappedDelta = Math.min(deltaTime, 0.033) // Max 30fps equivalent Controller.update(cappedDelta) }) return null } [V0_FILE]typescriptreact:file="components/Scene.tsx" "use client" import { useRef, useEffect } from "react" import { useThree } from "@react-three/fiber" import { Fog } from "three" import { DEFAULT_FOG_START, DEFAULT_FOG_END } from "@/engine/config" import WorldMesh from "./WorldMesh" import PlayerController from "./PlayerController" import FirstPersonCamera from "./FirstPersonCamera" import PlayerArm from "./PlayerArm" import BlockDamageOverlay from "./BlockDamageOverlay" import { WorldGen } from "@/engine/world/WorldGen" import { Controller } from "@/engine/player/Controller" export default function Scene() { const { gl, scene } = useThree() const worldInitialized = useRef(false) useEffect(() => { const handleClick = () => { // Request pointer lock on canvas click gl.domElement.requestPointerLock() } // Lock pointer on canvas click gl.domElement.addEventListener("click", handleClick) return () => { gl.domElement.removeEventListener("click", handleClick) } }, [gl]) useEffect(() => { // Enable shadows gl.shadowMap.enabled = true gl.shadowMap.type = gl.PCFSoftShadowMap // Add subtle fog for depth scene.fog = new Fog(0x87ceeb, DEFAULT_FOG_START, DEFAULT_FOG_END) }, [gl, scene]) // Initialize world on first render useEffect(() => { if (!worldInitialized.current) { if (Controller.DEBUG) { console.log("[v0] Initializing hills world with trees") } WorldGen.hills() worldInitialized.current = true } }, []) return ( <> ) } [V0_FILE]typescriptreact:file="components/TitleScene.tsx" "use client" import { useEffect, useRef } from "react" import { useThree, useFrame } from "@react-three/fiber" import { Fog } from "three" import { WorldGen } from "@/engine/world/WorldGen" import WorldMesh from "./WorldMesh" import { DEFAULT_FOG_START, DEFAULT_FOG_END } from "@/engine/config" export default function TitleScene() { const { camera, gl, scene } = useThree() const worldInitialized = useRef(false) useEffect(() => { // Enable shadows and fog to match in-game visuals gl.shadowMap.enabled = true gl.shadowMap.type = gl.PCFSoftShadowMap scene.fog = new Fog(0x87ceeb, DEFAULT_FOG_START, DEFAULT_FOG_END) }, [gl, scene]) useEffect(() => { camera.fov = 60 camera.updateProjectionMatrix() }, [camera]) useEffect(() => { if (!worldInitialized.current) { WorldGen.hills() worldInitialized.current = true } }, []) useFrame(({ clock }) => { const t = clock.getElapsedTime() * 0.1 camera.position.set(Math.sin(t) * 60, 25, Math.cos(t) * 60) camera.lookAt(0, 5, 0) }) return ( <> ) } [V0_FILE]typescriptreact:file="components/WorldMesh.tsx" "use client"; import { useRef, useEffect, useMemo } from "react"; import type { Mesh } from "three"; import { useWorldStore } from "@/engine/world/WorldStore"; import { Mesher } from "@/engine/world/Mesher"; import { BlockId } from "@/engine/blocks/BlockTypes"; import { createBlockTextures } from "@/engine/blocks/BlockTextures"; import { Controller } from "@/engine/player/Controller"; export default function WorldMesh() { const meshRefs = useRef>( {} as Record, ); const revision = useWorldStore((state) => state.revision); const textures = useMemo(() => createBlockTextures(), []); const blockIds = useMemo( () => Object.values(BlockId).filter( (v) => typeof v === "number" && v !== BlockId.AIR, ) as BlockId[], [], ); useEffect(() => { if (Controller.DEBUG) { console.log("[v0] Building world geometry, revision:", revision); } const geometries = Mesher.buildGeometry(); blockIds.forEach((id) => { const mesh = meshRefs.current[id]; const newGeometry = geometries[id]; if (!mesh || !newGeometry) return; const oldGeometry = mesh.geometry; mesh.geometry = newGeometry; if (oldGeometry) oldGeometry.dispose(); }); }, [revision, blockIds]); return ( {blockIds.map((id) => ( { meshRefs.current[id] = el; }} receiveShadow castShadow > ))} ); } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescript:file="engine/blocks/BlockTextures.ts" import * as THREE from "three"; import { BlockId } from "./BlockTypes"; function makeTexture(draw: (ctx: CanvasRenderingContext2D) => void) { const canvas = document.createElement("canvas"); canvas.width = 16; canvas.height = 16; const ctx = canvas.getContext("2d")!; draw(ctx); const texture = new THREE.CanvasTexture(canvas); texture.magFilter = THREE.NearestFilter; texture.minFilter = THREE.NearestFilter; return texture; } function noise(ctx: CanvasRenderingContext2D, c1: string, c2: string) { for (let y = 0; y < 16; y++) { for (let x = 0; x < 16; x++) { ctx.fillStyle = Math.random() > 0.5 ? c1 : c2; ctx.fillRect(x, y, 1, 1); } } } export function createBlockTextures(): Record { const textures: Partial> = {}; textures[BlockId.DIRT] = makeTexture((ctx) => { noise(ctx, "#8b4513", "#5e3410"); }); textures[BlockId.GRASS] = makeTexture((ctx) => { noise(ctx, "#6faa3a", "#4e822b"); }); textures[BlockId.STONE] = makeTexture((ctx) => { noise(ctx, "#7d7d7d", "#5a5a5a"); }); textures[BlockId.LOG] = makeTexture((ctx) => { for (let x = 0; x < 16; x++) { const color = x % 2 === 0 ? "#8a5a2d" : "#7b4b1e"; for (let y = 0; y < 16; y++) { ctx.fillStyle = color; ctx.fillRect(x, y, 1, 1); } } for (let i = 0; i < 64; i++) { const x = Math.floor(Math.random() * 16); const y = Math.floor(Math.random() * 16); ctx.fillStyle = Math.random() > 0.5 ? "#9c6e3b" : "#6d4b1f"; ctx.fillRect(x, y, 1, 1); } }); textures[BlockId.LEAF] = makeTexture((ctx) => { noise(ctx, "#3d8f3d", "#2e6f2e"); }); return textures as Record; } [V0_FILE]typescript:file="engine/blocks/BlockTypes.ts" export enum BlockId { AIR = 0, DIRT = 1, GRASS = 2, STONE = 3, LOG = 4, LEAF = 5, } export interface BlockData { id: BlockId name: string /** Color applied to all faces */ color: string solid: boolean } export const BLOCK_DATA: Record = { [BlockId.AIR]: { id: BlockId.AIR, name: "Air", color: "#000000", solid: false, }, [BlockId.DIRT]: { id: BlockId.DIRT, name: "Dirt", color: "#8b4513", solid: true, }, [BlockId.GRASS]: { id: BlockId.GRASS, name: "Grass", color: "#5e6b2e", solid: true, }, [BlockId.STONE]: { id: BlockId.STONE, name: "Stone", color: "#6b7280", solid: true, }, [BlockId.LOG]: { id: BlockId.LOG, name: "Log", color: "#92400e", solid: true, }, [BlockId.LEAF]: { id: BlockId.LEAF, name: "Leaf", color: "#22c55e", solid: true, }, } export const BlockTypes = BlockId [V0_FILE]typescript:file="engine/config.ts" // Default field of view for the player's perspective camera in degrees. export const DEFAULT_FOV = 110 // Default camera near and far clipping planes. export const DEFAULT_NEAR = 0.1 export const DEFAULT_FAR = 1000 // Default fog start and end distances. export const DEFAULT_FOG_START = 20 export const DEFAULT_FOG_END = 60 [V0_FILE]typescript:file="engine/inventory/InventoryStore.ts" import { create } from "zustand" import { BlockId } from "@/engine/blocks/BlockTypes" export interface InventorySlot { blockId: BlockId quantity: number } interface InventoryState { hotbar: InventorySlot[] selectedIndex: number // Actions setSelectedIndex: (index: number) => void addItem: (blockId: BlockId, quantity?: number) => void removeItem: (index: number, quantity?: number) => void getSelectedItem: () => InventorySlot | null hasItem: (blockId: BlockId) => boolean } export const useInventoryStore = create((set, get) => ({ hotbar: Array(9) .fill(null) .map(() => ({ blockId: BlockId.AIR, quantity: 0 })), selectedIndex: 0, setSelectedIndex: (index: number) => { if (index >= 0 && index < 9) { set({ selectedIndex: index }) } }, addItem: (blockId: BlockId, quantity = 1) => { if (blockId === BlockId.AIR) return set((state) => { const hotbar = [...state.hotbar] // First try to find existing stack of same block type const existingIndex = hotbar.findIndex((slot) => slot.blockId === blockId && slot.quantity > 0) if (existingIndex !== -1) { // Add to existing stack (max 64 per stack) const currentQty = hotbar[existingIndex].quantity const maxAdd = Math.min(quantity, 64 - currentQty) hotbar[existingIndex].quantity += maxAdd quantity -= maxAdd } // If we still have items to add, find empty slot if (quantity > 0) { const emptyIndex = hotbar.findIndex((slot) => slot.quantity === 0) if (emptyIndex !== -1) { hotbar[emptyIndex] = { blockId, quantity: Math.min(quantity, 64) } } } return { hotbar } }) }, removeItem: (index: number, quantity = 1) => { set((state) => { if (index < 0 || index >= 9) return state const hotbar = [...state.hotbar] const slot = hotbar[index] if (slot.quantity > 0) { slot.quantity = Math.max(0, slot.quantity - quantity) if (slot.quantity === 0) { slot.blockId = BlockId.AIR } } return { hotbar } }) }, getSelectedItem: () => { const state = get() const slot = state.hotbar[state.selectedIndex] return slot.quantity > 0 ? slot : null }, hasItem: (blockId: BlockId) => { const state = get() return state.hotbar.some((slot) => slot.blockId === blockId && slot.quantity > 0) }, })) [V0_FILE]typescript:file="engine/player/Controller.ts" import { Vector3 } from "three" import { usePlayerStore } from "./PlayerStore" import { useWorldStore } from "../world/WorldStore" import { isInBounds, getBlock } from "../world/VoxelUtils" import { BlockId } from "../blocks/BlockTypes" export class Controller { private static readonly GRAVITY = -32 // blocks per second squared private static readonly JUMP_VELOCITY = Math.sqrt( 2 * Math.abs(Controller.GRAVITY) * 1.75, ) // blocks per second (~1.75-block jump height) private static readonly MOVE_SPEED = 5 // blocks per second private static readonly PLAYER_WIDTH = 0.6 // player AABB width private static readonly PLAYER_HEIGHT = 1.8 // player AABB height static DEBUG = false // Reusable vectors for player AABB corners to avoid per-frame allocations private static readonly cornerVecs = Array.from({ length: 8 }, () => new Vector3()) static update(deltaTime: number) { const playerState = usePlayerStore.getState() const worldState = useWorldStore.getState() const { sizeX, sizeY, sizeZ } = worldState.getDimensions() const { position, velocity, keys, onGround } = playerState const newVelocity = velocity.clone() const newPosition = position.clone() if (Controller.DEBUG) { console.log( "[v0] Player position:", position.x.toFixed(2), position.y.toFixed(2), position.z.toFixed(2), "onGround:", onGround, ) } // Apply gravity if (!onGround) { newVelocity.y += Controller.GRAVITY * deltaTime } // Handle jump if (keys.jump && onGround) { if (Controller.DEBUG) { console.log( "[v0] Jump triggered! Setting velocity to", Controller.JUMP_VELOCITY, ) } newVelocity.y = Controller.JUMP_VELOCITY playerState.setOnGround(false) } else if (keys.jump && !onGround) { if (Controller.DEBUG) { console.log("[v0] Jump key pressed but not on ground") } } // Handle horizontal movement const moveVector = new Vector3() if (keys.forward) moveVector.z -= 1 if (keys.backward) moveVector.z += 1 if (keys.left) moveVector.x -= 1 if (keys.right) moveVector.x += 1 if (moveVector.length() > 0) { moveVector.normalize() // Apply yaw rotation to movement const yaw = playerState.yaw const rotatedMove = new Vector3( moveVector.x * Math.cos(yaw) + moveVector.z * Math.sin(yaw), 0, -moveVector.x * Math.sin(yaw) + moveVector.z * Math.cos(yaw), ) newVelocity.x = rotatedMove.x * Controller.MOVE_SPEED newVelocity.z = rotatedMove.z * Controller.MOVE_SPEED } else { // Apply friction when not moving newVelocity.x *= 0.8 newVelocity.z *= 0.8 } // Apply velocity to position with collision detection const deltaPos = newVelocity.clone().multiplyScalar(deltaTime) // Check collisions and resolve axis-wise const finalPosition = Controller.resolveCollisions( newPosition, deltaPos, newVelocity, worldState.voxels, sizeX, sizeY, sizeZ, ) const finalVelocity = newVelocity.clone() // Clamp final position to world bounds and zero velocity when clamped const minX = Controller.PLAYER_WIDTH / 2 const maxX = sizeX - Controller.PLAYER_WIDTH / 2 if (finalPosition.x < minX) { finalPosition.x = minX finalVelocity.x = 0 } else if (finalPosition.x > maxX) { finalPosition.x = maxX finalVelocity.x = 0 } const minZ = Controller.PLAYER_WIDTH / 2 const maxZ = sizeZ - Controller.PLAYER_WIDTH / 2 if (finalPosition.z < minZ) { finalPosition.z = minZ finalVelocity.z = 0 } else if (finalPosition.z > maxZ) { finalPosition.z = maxZ finalVelocity.z = 0 } const minY = 0 const maxY = sizeY - Controller.PLAYER_HEIGHT if (finalPosition.y < minY) { finalPosition.y = minY finalVelocity.y = 0 } else if (finalPosition.y > maxY) { finalPosition.y = maxY finalVelocity.y = 0 } // Check if player is on ground const groundCheck = Controller.checkCollision( finalPosition.clone().add(new Vector3(0, -0.1, 0)), worldState.voxels, sizeX, sizeY, sizeZ, ) if (Controller.DEBUG) { console.log( "[v0] Ground check at:", finalPosition.x.toFixed(2), (finalPosition.y - 0.1).toFixed(2), finalPosition.z.toFixed(2), "result:", groundCheck, ) } if (groundCheck) { playerState.setOnGround(true) if (finalVelocity.y < 0) { finalVelocity.y = 0 } } else { playerState.setOnGround(false) } playerState.setPosition(finalPosition) playerState.setVelocity(finalVelocity) } private static resolveCollisions( position: Vector3, deltaPos: Vector3, velocity: Vector3, voxels: Uint16Array, sizeX: number, sizeY: number, sizeZ: number, ): Vector3 { const newPos = position.clone() // Test X axis const testX = newPos.clone() testX.x += deltaPos.x if (!Controller.checkCollision(testX, voxels, sizeX, sizeY, sizeZ)) { newPos.x = testX.x } // Test Y axis const testY = newPos.clone() testY.y += deltaPos.y if (!Controller.checkCollision(testY, voxels, sizeX, sizeY, sizeZ)) { newPos.y = testY.y } else { if (deltaPos.y < 0) { newPos.y = Math.floor(testY.y) + 1 + 1e-3 } else if (deltaPos.y > 0) { newPos.y = Math.floor(testY.y + Controller.PLAYER_HEIGHT) - Controller.PLAYER_HEIGHT - 1e-3 } deltaPos.y = 0 velocity.y = 0 } // Test Z axis const testZ = newPos.clone() testZ.z += deltaPos.z if (!Controller.checkCollision(testZ, voxels, sizeX, sizeY, sizeZ)) { newPos.z = testZ.z } return newPos } private static checkCollision( position: Vector3, voxels: Uint16Array, sizeX: number, sizeY: number, sizeZ: number, ): boolean { const halfWidth = Controller.PLAYER_WIDTH / 2 const height = Controller.PLAYER_HEIGHT if (Controller.DEBUG) { console.log("[v0] Checking collision at:", position.x.toFixed(2), position.y.toFixed(2), position.z.toFixed(2)) } // Update reusable corner vectors with current position const corners = Controller.cornerVecs corners[0].set(position.x - halfWidth, position.y, position.z - halfWidth) corners[1].set(position.x + halfWidth, position.y, position.z - halfWidth) corners[2].set(position.x - halfWidth, position.y, position.z + halfWidth) corners[3].set(position.x + halfWidth, position.y, position.z + halfWidth) corners[4].set(position.x - halfWidth, position.y + height, position.z - halfWidth) corners[5].set(position.x + halfWidth, position.y + height, position.z - halfWidth) corners[6].set(position.x - halfWidth, position.y + height, position.z + halfWidth) corners[7].set(position.x + halfWidth, position.y + height, position.z + halfWidth) for (const corner of corners) { const blockX = Math.floor(corner.x) const blockY = Math.floor(corner.y) const blockZ = Math.floor(corner.z) if (!isInBounds(blockX, blockY, blockZ, sizeX, sizeY, sizeZ)) { return true // Treat out-of-bounds as collision } const blockType = getBlock(voxels, blockX, blockY, blockZ, sizeX, sizeY, sizeZ) if (Controller.DEBUG) { console.log( "[v0] Block at", blockX, blockY, blockZ, "type:", blockType, "isAir:", blockType === BlockId.AIR, ) } if (blockType !== BlockId.AIR) { if (Controller.DEBUG) { console.log("[v0] Collision detected with block type:", blockType) } return true // Collision detected } } return false // No collision } } [V0_FILE]typescript:file="engine/player/PlayerStore.ts" import { create } from "zustand" import { Vector3 } from "three" import { DEFAULT_FOV } from "@/engine/config" export interface PlayerState { // Position and movement position: Vector3 velocity: Vector3 // Camera rotation yaw: number pitch: number fov: number // Physics state onGround: boolean // Input state keys: { forward: boolean backward: boolean left: boolean right: boolean jump: boolean } // Actions setPosition: (position: Vector3) => void setVelocity: (velocity: Vector3) => void setRotation: (yaw: number, pitch: number) => void setOnGround: (onGround: boolean) => void setKey: (key: keyof PlayerState["keys"], pressed: boolean) => void setFov: (fov: number) => void updatePosition: (delta: Vector3) => void } export const usePlayerStore = create((set, get) => ({ position: new Vector3(32, 20, 32), // Start in center of world, above ground velocity: new Vector3(0, 0, 0), yaw: 0, pitch: 0, fov: DEFAULT_FOV, onGround: false, keys: { forward: false, backward: false, left: false, right: false, jump: false, }, setPosition: (position) => set({ position: position.clone() }), setVelocity: (velocity) => set({ velocity: velocity.clone() }), setRotation: (yaw, pitch) => set({ yaw, pitch }), setOnGround: (onGround) => set({ onGround }), setKey: (key, pressed) => set((state) => ({ keys: { ...state.keys, [key]: pressed }, })), setFov: (fov) => set({ fov }), updatePosition: (delta) => set((state) => ({ position: state.position.clone().add(delta), })), })) [V0_FILE]typescript:file="engine/world/BlockInteraction.ts" import type { Vector3 } from "@/lib/types" import { raycastVoxel } from "@/lib/math/dda" import { useWorldStore } from "./WorldStore" import { usePlayerStore } from "../player/PlayerStore" import { setVoxel, getVoxel } from "./VoxelUtils" import { BlockId } from "../blocks/BlockTypes" export const BLOCK_BREAK_TIME_MS = 3000 export class BlockInteraction { static breakBlock(origin: Vector3, direction: Vector3): BlockId | null { const hit = raycastVoxel(origin, direction, 5) // 5 block reach if (!hit.hit || !hit.position) return null const { x, y, z } = hit.position return this.breakBlockAt(x, y, z) } static breakBlockAt(x: number, y: number, z: number): BlockId | null { const worldStore = useWorldStore.getState() const { sizeX, sizeY, sizeZ } = worldStore.getDimensions() const blockId = getVoxel(worldStore.voxels, x, y, z, sizeX, sizeY, sizeZ) if (blockId === BlockId.AIR) return null setVoxel(worldStore.voxels, x, y, z, BlockId.AIR, sizeX, sizeY, sizeZ) worldStore.incrementRevision() return blockId } static placeBlock(origin: Vector3, direction: Vector3, blockType: BlockId): boolean { const hit = raycastVoxel(origin, direction, 5) // 5 block reach if (!hit.hit) return false // Calculate placement position (adjacent to hit face) const placeX = hit.position.x + hit.normal.x const placeY = hit.position.y + hit.normal.y const placeZ = hit.position.z + hit.normal.z const worldStore = useWorldStore.getState() const playerStore = usePlayerStore.getState() const { sizeX, sizeY, sizeZ } = worldStore.getDimensions() // Check if position is within world bounds if (placeX < 0 || placeX >= sizeX || placeY < 0 || placeY >= sizeY || placeZ < 0 || placeZ >= sizeZ) { return false } // Check if position is already occupied const existingBlock = getVoxel( worldStore.voxels, placeX, placeY, placeZ, sizeX, sizeY, sizeZ, ) if (existingBlock !== BlockId.AIR) return false // Check if placement would intersect player AABB if (this.wouldIntersectPlayer(placeX, placeY, placeZ, playerStore.position)) { return false } // Place the block setVoxel(worldStore.voxels, placeX, placeY, placeZ, blockType, sizeX, sizeY, sizeZ) worldStore.incrementRevision() return true } private static wouldIntersectPlayer(blockX: number, blockY: number, blockZ: number, playerPos: Vector3): boolean { // Player AABB: 0.8 wide, 1.8 tall, centered on position const playerMinX = playerPos.x - 0.4 const playerMaxX = playerPos.x + 0.4 const playerMinY = playerPos.y - 0.9 const playerMaxY = playerPos.y + 0.9 const playerMinZ = playerPos.z - 0.4 const playerMaxZ = playerPos.z + 0.4 // Block AABB: 1x1x1 at integer coordinates const blockMinX = blockX const blockMaxX = blockX + 1 const blockMinY = blockY const blockMaxY = blockY + 1 const blockMinZ = blockZ const blockMaxZ = blockZ + 1 // Check for AABB intersection return !( playerMaxX <= blockMinX || playerMinX >= blockMaxX || playerMaxY <= blockMinY || playerMinY >= blockMaxY || playerMaxZ <= blockMinZ || playerMinZ >= blockMaxZ ) } } [V0_FILE]typescript:file="engine/world/Mesher.ts" import { BufferGeometry, Float32BufferAttribute, Uint32BufferAttribute, } from "three"; import { useWorldStore } from "./WorldStore"; import { BlockId, BLOCK_DATA } from "../blocks/BlockTypes"; interface FaceData { vertices: number[]; indices: number[]; colors: number[]; uvs: number[]; vertexIndex: number; } export class Mesher { static buildGeometry(): Record { const { dimensions, getVoxel } = useWorldStore.getState(); const { sizeX, sizeY, sizeZ } = dimensions; const geomData: Record = { [BlockId.DIRT]: { vertices: [], indices: [], colors: [], uvs: [], vertexIndex: 0, }, [BlockId.GRASS]: { vertices: [], indices: [], colors: [], uvs: [], vertexIndex: 0, }, [BlockId.STONE]: { vertices: [], indices: [], colors: [], uvs: [], vertexIndex: 0, }, [BlockId.LOG]: { vertices: [], indices: [], colors: [], uvs: [], vertexIndex: 0, }, [BlockId.LEAF]: { vertices: [], indices: [], colors: [], uvs: [], vertexIndex: 0, }, [BlockId.AIR]: { vertices: [], indices: [], colors: [], uvs: [], vertexIndex: 0, }, }; const faceData = [ // +X face (right) { normal: [1, 0, 0], vertices: [ [1, 0, 0], [1, 1, 0], [1, 1, 1], [1, 0, 1], ], }, // -X face (left) { normal: [-1, 0, 0], vertices: [ [0, 0, 1], [0, 1, 1], [0, 1, 0], [0, 0, 0], ], }, // +Y face (top) { normal: [0, 1, 0], vertices: [ [0, 1, 0], [0, 1, 1], [1, 1, 1], [1, 1, 0], ], }, // -Y face (bottom) { normal: [0, -1, 0], vertices: [ [0, 0, 0], [1, 0, 0], [1, 0, 1], [0, 0, 1], ], }, // +Z face (front) { normal: [0, 0, 1], vertices: [ [1, 0, 1], [1, 1, 1], [0, 1, 1], [0, 0, 1], ], }, // -Z face (back) { normal: [0, 0, -1], vertices: [ [0, 0, 0], [0, 1, 0], [1, 1, 0], [1, 0, 0], ], }, ]; const getBlockColor = ( blockId: BlockId, faceNormal: number[], vertexIndex: number, ) => { const hex = BLOCK_DATA[blockId].color; const clean = hex.replace("#", ""); const baseColor = { r: Number.parseInt(clean.substr(0, 2), 16) / 255, g: Number.parseInt(clean.substr(2, 2), 16) / 255, b: Number.parseInt(clean.substr(4, 2), 16) / 255, }; const [nx, ny, nz] = faceNormal; const seed = vertexIndex * 7 + nx * 13 + ny * 17 + nz * 19; const variation = (Math.sin(seed) * 0.5 + 0.5) * 0.15; // 0-15% variation // Apply different variation patterns for different block types if (blockId === BlockId.GRASS) { // Grass: more variation on top faces, less on sides const isTopFace = ny > 0; const variationAmount = isTopFace ? 0.2 : 0.1; const grassVariation = (Math.sin(seed * 1.3) * 0.5 + 0.5) * variationAmount; if (isTopFace) { // Green top with more variation baseColor.r = Math.max(0.1, baseColor.r - grassVariation * 0.3); baseColor.g = Math.min(1.0, baseColor.g + grassVariation * 0.2); baseColor.b = Math.max(0.1, baseColor.b - grassVariation * 0.4); } else { // Brown sides with dirt-like variation baseColor.r = Math.min(1.0, baseColor.r + grassVariation); baseColor.g = Math.min(1.0, baseColor.g + grassVariation * 0.8); baseColor.b = Math.min(1.0, baseColor.b + grassVariation * 0.6); } } else if (blockId === BlockId.LOG) { // Log: different pattern for top/bottom vs sides const isEndFace = Math.abs(ny) > 0; const logVariation = (Math.sin(seed * 0.8) * 0.5 + 0.5) * 0.12; if (isEndFace) { // Ring pattern on ends baseColor.r = Math.min(1.0, baseColor.r + logVariation * 0.8); baseColor.g = Math.min(1.0, baseColor.g + logVariation * 0.6); baseColor.b = Math.min(1.0, baseColor.b + logVariation * 0.4); } else { // Bark pattern on sides baseColor.r = Math.max(0.2, baseColor.r - logVariation * 0.3); baseColor.g = Math.max(0.15, baseColor.g - logVariation * 0.4); baseColor.b = Math.max(0.1, baseColor.b - logVariation * 0.5); } } else if (blockId === BlockId.LEAF) { // Leaves: varied green tones const leafVariation = (Math.sin(seed * 1.1) * 0.5 + 0.5) * 0.18; baseColor.r = Math.max(0.1, baseColor.r - leafVariation * 0.5); baseColor.g = Math.min(1.0, baseColor.g + leafVariation * 0.3); baseColor.b = Math.max(0.1, baseColor.b - leafVariation * 0.3); } else { // Default variation for other blocks (dirt, stone, etc.) baseColor.r = Math.min( 1.0, Math.max(0.1, baseColor.r + (variation - 0.075)), ); baseColor.g = Math.min( 1.0, Math.max(0.1, baseColor.g + (variation - 0.075)), ); baseColor.b = Math.min( 1.0, Math.max(0.1, baseColor.b + (variation - 0.075)), ); } return baseColor; }; // Check each voxel for (let x = 0; x < sizeX; x++) { for (let y = 0; y < sizeY; y++) { for (let z = 0; z < sizeZ; z++) { const blockId = getVoxel(x, y, z); if (blockId === BlockId.AIR) continue; const blockData = BLOCK_DATA[blockId]; if (!blockData.solid) continue; const data = geomData[blockId]; faceData.forEach((face) => { const [nx, ny, nz] = face.normal; const neighborX = x + nx; const neighborY = y + ny; const neighborZ = z + nz; const neighborId = getVoxel(neighborX, neighborY, neighborZ); const neighborData = BLOCK_DATA[neighborId]; if (neighborId === BlockId.AIR || !neighborData.solid) { face.vertices.forEach((vertex, vertexIdx) => { data.vertices.push(x + vertex[0], y + vertex[1], z + vertex[2]); const color = getBlockColor( blockId, face.normal, data.vertexIndex + vertexIdx, ); data.colors.push(color.r, color.g, color.b); }); data.uvs.push(0, 0, 1, 0, 1, 1, 0, 1); data.indices.push( data.vertexIndex, data.vertexIndex + 1, data.vertexIndex + 2, data.vertexIndex, data.vertexIndex + 2, data.vertexIndex + 3, ); data.vertexIndex += 4; } }); } } } const geometries: Record = {} as Record< BlockId, BufferGeometry >; Object.entries(geomData).forEach(([id, d]) => { if (Number(id) === BlockId.AIR) return; if (d.vertices.length === 0) return; const geometry = new BufferGeometry(); geometry.setAttribute( "position", new Float32BufferAttribute(d.vertices, 3), ); geometry.setAttribute("color", new Float32BufferAttribute(d.colors, 3)); geometry.setAttribute("uv", new Float32BufferAttribute(d.uvs, 2)); geometry.setIndex(new Uint32BufferAttribute(d.indices, 1)); geometry.computeVertexNormals(); geometries[id as unknown as BlockId] = geometry; }); return geometries; } } [V0_FILE]typescript:file="engine/world/VoxelUtils.ts" import type { Vec3 } from "@/lib/types" export interface WorldDimensions { sizeX: number sizeY: number sizeZ: number } export function isInBounds(x: number, y: number, z: number, sizeX: number, sizeY: number, sizeZ: number): boolean { return x >= 0 && x < sizeX && y >= 0 && y < sizeY && z >= 0 && z < sizeZ } export function getVoxel( voxels: Uint16Array, x: number, y: number, z: number, sizeX: number, sizeY: number, sizeZ: number, ): number { if (x < 0 || x >= sizeX || y < 0 || y >= sizeY || z < 0 || z >= sizeZ) { return 0 // Return air for out-of-bounds } const index = x + y * sizeX + z * sizeX * sizeY return voxels[index] } export function setVoxel( voxels: Uint16Array, x: number, y: number, z: number, blockId: number, sizeX: number, sizeY: number, sizeZ: number, ): void { if (x < 0 || x >= sizeX || y < 0 || y >= sizeY || z < 0 || z >= sizeZ) { return // Ignore out-of-bounds writes } const index = x + y * sizeX + z * sizeX * sizeY voxels[index] = blockId } export function getBlock( voxels: Uint16Array, x: number, y: number, z: number, sizeX: number, sizeY: number, sizeZ: number, ): number { return getVoxel(voxels, x, y, z, sizeX, sizeY, sizeZ) } export class VoxelUtils { constructor(private dimensions: WorldDimensions) {} // Convert (x,y,z) to flat array index getIndex(x: number, y: number, z: number): number { const { sizeX, sizeY, sizeZ } = this.dimensions return x + y * sizeX + z * sizeX * sizeY } // Convert flat array index to (x,y,z) getCoords(index: number): Vec3 { const { sizeX, sizeY } = this.dimensions const x = index % sizeX const y = Math.floor(index / sizeX) % sizeY const z = Math.floor(index / (sizeX * sizeY)) return { x, y, z } } // Check if coordinates are within world bounds isInBounds(x: number, y: number, z: number): boolean { const { sizeX, sizeY, sizeZ } = this.dimensions return x >= 0 && x < sizeX && y >= 0 && y < sizeY && z >= 0 && z < sizeZ } // Get total voxel count getTotalVoxels(): number { const { sizeX, sizeY, sizeZ } = this.dimensions return sizeX * sizeY * sizeZ } // Get neighbors of a voxel (6-directional) getNeighbors(x: number, y: number, z: number): Vec3[] { const neighbors: Vec3[] = [] const directions = [ { x: 1, y: 0, z: 0 }, // +X { x: -1, y: 0, z: 0 }, // -X { x: 0, y: 1, z: 0 }, // +Y { x: 0, y: -1, z: 0 }, // -Y { x: 0, y: 0, z: 1 }, // +Z { x: 0, y: 0, z: -1 }, // -Z ] for (const dir of directions) { const nx = x + dir.x const ny = y + dir.y const nz = z + dir.z if (this.isInBounds(nx, ny, nz)) { neighbors.push({ x: nx, y: ny, z: nz }) } } return neighbors } } [V0_FILE]typescript:file="engine/world/WorldGen.ts" import { useWorldStore } from "./WorldStore" import { BlockId } from "../blocks/BlockTypes" import { SimplexNoise } from "../../lib/noise" export class WorldGen { static hills(): void { const { dimensions, setVoxelDirect, incrementRevision } = useWorldStore.getState() const { sizeX, sizeY, sizeZ } = dimensions // Initialize noise generator const noise = new SimplexNoise(42) // Fixed seed for consistent generation const scale = 0.05 // Noise scale for hills const baseHeight = 8 const heightVariation = 4 // Clear the world first for (let x = 0; x < sizeX; x++) { for (let y = 0; y < sizeY; y++) { for (let z = 0; z < sizeZ; z++) { setVoxelDirect(x, y, z, BlockId.AIR) } } } // Generate heightmap and terrain const heightMap: number[][] = [] for (let x = 0; x < sizeX; x++) { heightMap[x] = [] for (let z = 0; z < sizeZ; z++) { // Generate height using simplex noise const noiseValue = noise.noise2D(x * scale, z * scale) const height = Math.floor(baseHeight + noiseValue * heightVariation) heightMap[x][z] = Math.max(1, Math.min(height, sizeY - 2)) // Place terrain layers for (let y = 0; y <= heightMap[x][z]; y++) { if (y === heightMap[x][z]) { // Top layer - grass setVoxelDirect(x, y, z, BlockId.GRASS) } else if (y >= heightMap[x][z] - 3) { // Dirt layer (3 blocks deep) setVoxelDirect(x, y, z, BlockId.DIRT) } else { // Stone below setVoxelDirect(x, y, z, BlockId.STONE) } } } } // Place trees randomly on grass surfaces const treeChance = 0.05 // 5% chance per grass block for (let x = 1; x < sizeX - 1; x++) { for (let z = 1; z < sizeZ - 1; z++) { const surfaceHeight = heightMap[x][z] // Check if this is a suitable spot for a tree if (Math.random() < treeChance && surfaceHeight < sizeY - 6) { // Check if area is relatively flat (within 1 block height difference) let isFlat = true for (let dx = -1; dx <= 1; dx++) { for (let dz = -1; dz <= 1; dz++) { if (Math.abs(heightMap[x + dx][z + dz] - surfaceHeight) > 1) { isFlat = false break } } if (!isFlat) break } if (isFlat) { this.placeTree(x, surfaceHeight + 1, z, setVoxelDirect, sizeY) } } } } // Trigger world update incrementRevision() } private static placeTree( x: number, y: number, z: number, setVoxelDirect: (x: number, y: number, z: number, blockId: BlockId) => void, maxY: number, ): void { const trunkHeight = 3 + Math.floor(Math.random() * 2) // 3-4 blocks tall // Place trunk for (let i = 0; i < trunkHeight; i++) { if (y + i < maxY) { setVoxelDirect(x, y + i, z, BlockId.LOG) } } // Place leaf canopy (simple 3x3x2 shape) const leafY = y + trunkHeight for (let dx = -1; dx <= 1; dx++) { for (let dz = -1; dz <= 1; dz++) { for (let dy = 0; dy <= 1; dy++) { if (leafY + dy < maxY) { // Skip center column where trunk is, and add some randomness if (!(dx === 0 && dz === 0) && Math.random() > 0.2) { setVoxelDirect(x + dx, leafY + dy, z + dz, BlockId.LEAF) } } } } } // Add top leaf block if (leafY + 2 < maxY) { setVoxelDirect(x, leafY + 2, z, BlockId.LEAF) } } // Keep flat generation for compatibility static flat(): void { const { dimensions, utils, setVoxelDirect, incrementRevision } = useWorldStore.getState() const { sizeX, sizeY, sizeZ } = dimensions // Clear the world first for (let x = 0; x < sizeX; x++) { for (let y = 0; y < sizeY; y++) { for (let z = 0; z < sizeZ; z++) { setVoxelDirect(x, y, z, BlockId.AIR) } } } // Generate flat world const grassLevel = 8 const dirtDepth = 4 for (let x = 0; x < sizeX; x++) { for (let z = 0; z < sizeZ; z++) { // Place grass on top setVoxelDirect(x, grassLevel, z, BlockId.GRASS) // Place dirt below grass for (let y = grassLevel - 1; y >= grassLevel - dirtDepth; y--) { if (y >= 0) { setVoxelDirect(x, y, z, BlockId.DIRT) } } // Place stone below dirt for (let y = grassLevel - dirtDepth - 1; y >= 0; y--) { setVoxelDirect(x, y, z, BlockId.STONE) } } } // Trigger world update incrementRevision() } } [V0_FILE]typescript:file="engine/world/WorldStore.ts" import { create } from "zustand" import { VoxelUtils, type WorldDimensions } from "./VoxelUtils" import { BlockId } from "../blocks/BlockTypes" import type { Vector3 } from "@/lib/types" export interface WorldState { // World data voxels: Uint16Array dimensions: WorldDimensions utils: VoxelUtils revision: number // Block breaking breakTarget: Vector3 | null breakProgress: number // Actions getVoxel: (x: number, y: number, z: number) => BlockId setVoxel: (x: number, y: number, z: number, blockId: BlockId) => void setVoxelDirect: (x: number, y: number, z: number, blockId: BlockId) => void initializeWorld: () => void incrementRevision: () => void getDimensions: () => WorldDimensions setBreakTarget: (target: Vector3 | null) => void setBreakProgress: (progress: number) => void } const WORLD_DIMENSIONS: WorldDimensions = { sizeX: 128, sizeY: 32, sizeZ: 128, } export const useWorldStore = create((set, get) => { const utils = new VoxelUtils(WORLD_DIMENSIONS) const totalVoxels = utils.getTotalVoxels() return { voxels: new Uint16Array(totalVoxels), dimensions: WORLD_DIMENSIONS, utils, revision: 0, breakTarget: null, breakProgress: 0, getVoxel: (x: number, y: number, z: number) => { const { voxels, utils } = get() if (!utils.isInBounds(x, y, z)) return BlockId.AIR const index = utils.getIndex(x, y, z) return voxels[index] as BlockId }, setVoxelDirect: (x: number, y: number, z: number, blockId: BlockId) => { const { voxels, utils } = get() if (!utils.isInBounds(x, y, z)) return const index = utils.getIndex(x, y, z) voxels[index] = blockId }, setVoxel: (x: number, y: number, z: number, blockId: BlockId) => { get().setVoxelDirect(x, y, z, blockId) set({ revision: get().revision + 1 }) }, initializeWorld: () => { set({ revision: get().revision + 1 }) }, incrementRevision: () => { set({ revision: get().revision + 1 }) }, getDimensions: () => get().dimensions, setBreakTarget: (target) => set({ breakTarget: target, breakProgress: 0 }), setBreakProgress: (progress) => set({ breakProgress: progress }), } }) [V0_FILE]typescript:file="lib/math/dda.ts" // 3D Digital Differential Analyzer for voxel raycasting import type { Vector3, RaycastHit } from "../types" import { useWorldStore } from "../../engine/world/WorldStore" import { getVoxel } from "../../engine/world/VoxelUtils" import { BlockId } from "../../engine/blocks/BlockTypes" export function raycastVoxel(origin: Vector3, direction: Vector3, maxDistance = 100): RaycastHit { // Normalize direction const length = Math.sqrt(direction.x ** 2 + direction.y ** 2 + direction.z ** 2) const dir = { x: direction.x / length, y: direction.y / length, z: direction.z / length, } // Current voxel position let x = Math.floor(origin.x) let y = Math.floor(origin.y) let z = Math.floor(origin.z) // Calculate step and initial tMax for each axis const stepX = dir.x > 0 ? 1 : -1 const stepY = dir.y > 0 ? 1 : -1 const stepZ = dir.z > 0 ? 1 : -1 const tDeltaX = Math.abs(1 / dir.x) const tDeltaY = Math.abs(1 / dir.y) const tDeltaZ = Math.abs(1 / dir.z) let tMaxX = dir.x > 0 ? (x + 1 - origin.x) * tDeltaX : (origin.x - x) * tDeltaX let tMaxY = dir.y > 0 ? (y + 1 - origin.y) * tDeltaY : (origin.y - y) * tDeltaY let tMaxZ = dir.z > 0 ? (z + 1 - origin.z) * tDeltaZ : (origin.z - z) * tDeltaZ let distance = 0 let normal = { x: 0, y: 0, z: 0 } const worldStore = useWorldStore.getState() const { sizeX, sizeY, sizeZ } = worldStore.getDimensions() while (distance < maxDistance) { const blockId = getVoxel(worldStore.voxels, x, y, z, sizeX, sizeY, sizeZ) if (blockId !== BlockId.AIR) { return { hit: true, position: { x, y, z }, normal, distance, } } // Step to next voxel if (tMaxX < tMaxY && tMaxX < tMaxZ) { x += stepX distance = tMaxX tMaxX += tDeltaX normal = { x: -stepX, y: 0, z: 0 } } else if (tMaxY < tMaxZ) { y += stepY distance = tMaxY tMaxY += tDeltaY normal = { x: 0, y: -stepY, z: 0 } } else { z += stepZ distance = tMaxZ tMaxZ += tDeltaZ normal = { x: 0, y: 0, z: -stepZ } } } return { hit: false } } function isVoxelSolid(x: number, y: number, z: number): boolean { const worldStore = useWorldStore.getState() const { sizeX, sizeY, sizeZ } = worldStore.getDimensions() const blockId = getVoxel(worldStore.voxels, x, y, z, sizeX, sizeY, sizeZ) return blockId !== BlockId.AIR } [V0_FILE]typescript:file="lib/math/index.ts" // Math utilities for the Minecraft clone export * from "./dda" export function worldToIndex(x: number, y: number, z: number, width: number, depth: number): number { return x + y * width * depth + z * width } export function indexToWorld(index: number, width: number, depth: number): [number, number, number] { const x = index % width const y = Math.floor(index / (width * depth)) const z = Math.floor((index % (width * depth)) / width) return [x, y, z] } export function clamp(value: number, min: number, max: number): number { return Math.max(min, Math.min(max, value)) } export function lerp(a: number, b: number, t: number): number { return a + (b - a) * t } [V0_FILE]typescript:file="lib/noise.ts" // Simple 2D Simplex Noise implementation class SimplexNoise { private grad3 = [ [1, 1, 0], [-1, 1, 0], [1, -1, 0], [-1, -1, 0], [1, 0, 1], [-1, 0, 1], [1, 0, -1], [-1, 0, -1], [0, 1, 1], [0, -1, 1], [0, 1, -1], [0, -1, -1], ] private p = [ 151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, 154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218, 246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14, 239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180, ] private perm: number[] constructor(seed = 0) { this.perm = new Array(512) // Simple seeding for (let i = 0; i < 256; i++) { this.perm[i] = this.p[(i + seed) % 256] this.perm[i + 256] = this.perm[i] } } private dot(g: number[], x: number, y: number): number { return g[0] * x + g[1] * y } noise2D(xin: number, yin: number): number { const F2 = 0.5 * (Math.sqrt(3.0) - 1.0) const s = (xin + yin) * F2 const i = Math.floor(xin + s) const j = Math.floor(yin + s) const G2 = (3.0 - Math.sqrt(3.0)) / 6.0 const t = (i + j) * G2 const X0 = i - t const Y0 = j - t const x0 = xin - X0 const y0 = yin - Y0 let i1, j1 if (x0 > y0) { i1 = 1 j1 = 0 } else { i1 = 0 j1 = 1 } const x1 = x0 - i1 + G2 const y1 = y0 - j1 + G2 const x2 = x0 - 1.0 + 2.0 * G2 const y2 = y0 - 1.0 + 2.0 * G2 const ii = i & 255 const jj = j & 255 const gi0 = this.perm[ii + this.perm[jj]] % 12 const gi1 = this.perm[ii + i1 + this.perm[jj + j1]] % 12 const gi2 = this.perm[ii + 1 + this.perm[jj + 1]] % 12 let n0, n1, n2 let t0 = 0.5 - x0 * x0 - y0 * y0 if (t0 < 0) n0 = 0.0 else { t0 *= t0 n0 = t0 * t0 * this.dot(this.grad3[gi0], x0, y0) } let t1 = 0.5 - x1 * x1 - y1 * y1 if (t1 < 0) n1 = 0.0 else { t1 *= t1 n1 = t1 * t1 * this.dot(this.grad3[gi1], x1, y1) } let t2 = 0.5 - x2 * x2 - y2 * y2 if (t2 < 0) n2 = 0.0 else { t2 *= t2 n2 = t2 * t2 * this.dot(this.grad3[gi2], x2, y2) } return 70.0 * (n0 + n1 + n2) } } export { SimplexNoise } [V0_FILE]typescript:file="lib/types.ts" export type BlockId = number export interface Vector3 { x: number y: number z: number } export interface RaycastHit { hit: boolean position?: Vector3 normal?: Vector3 distance?: number } export type Vec3 = Vector3 export interface VoxelHit { pos: [number, number, number] // targeted block coordinate normal: [number, number, number] // face normal of the hit } export interface DropStack { blockId: BlockId qty: number } export interface AABB { min: [number, number, number] max: [number, number, number] } export interface InventorySlot { blockId: BlockId | 0 qty: number } export interface WorldConfig { sizeX: number sizeY: number sizeZ: number seed: number } [V0_FILE]typescript:file="lib/utils.ts" import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="next.config.mjs" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "next lint", "start": "next start" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@react-three/fiber": "latest", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "expo": "latest", "expo-asset": "latest", "expo-file-system": "latest", "expo-gl": "latest", "geist": "^1.3.1", "immer": "latest", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.2.4", "next-themes": "latest", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-native": "latest", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "three": "latest", "use-sync-external-store": "latest", "vaul": "^0.9.9", "zod": "3.25.67", "zustand": "latest" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { '@tailwindcss/postcss': {}, }, } export default config [V0_FILE]css:file="styles/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="tsconfig.json" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_HxdYGUqaClVqwLSuSyYEfwvtDMYg/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_HxdYGUqaClVqwLSuSyYEfwvtDMYg/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_HxdYGUqaClVqwLSuSyYEfwvtDMYg/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_HxdYGUqaClVqwLSuSyYEfwvtDMYg/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_HxdYGUqaClVqwLSuSyYEfwvtDMYg/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isDeleted="true"