Upload src/components/game/GameCanvas.tsx with huggingface_hub

src/components/game/GameCanvas.tsx

@@ -0,0 +1,138 @@
+'use client'
+
+import { useEffect, useState, useRef } from 'react'
+import { Canvas } from '@react-three/fiber'
+import { GameScene } from './Scene'
+import { usePlayerStore } from '@/stores/playerStore'
+import { useWorldStore } from '@/stores/worldStore'
+import { useGameStore } from '@/stores/gameStore'
+import { useUIStore } from '@/stores/uiStore'
+import { usePlayerControls, updatePlayerMovement } from '@/hooks/usePlayerControls'
+import { Hotbar } from '../ui/Hotbar'
+import { HUD } from '../ui/HUD'
+import { DebugOverlay } from '../ui/DebugOverlay'
+import { Crosshair } from '../ui/Crosshair'
+import { MobileControls } from '../ui/MobileControls'
+import { CreativeInventory } from '../ui/CreativeInventory'
+import { BLOCK_DEFS, CREATIVE_BLOCKS, BLOCK_AIR } from '@/engine/constants'
+
+export function GameCanvas() {
+  const { keys, isPointerLocked, requestPointerLock, raycastBlock } = usePlayerControls()
+  const [ready, setReady] = useState(false)
+  const lastTimeRef = useRef(0)
+
+  // Init
+  useEffect(() => {
+    useWorldStore.getState().initWorld(Math.floor(Math.random() * 1000000))
+    usePlayerStore.getState().initPlayer()
+    useGameStore.getState().setLoading(false)
+    setReady(true)
+  }, [])
+
+  // Game loop
+  useEffect(() => {
+    let animId: number
+    const loop = (time: number) => {
+      const delta = Math.min((time - lastTimeRef.current) / 1000, 0.1)
+      lastTimeRef.current = time
+      if (keys.current) updatePlayerMovement(keys.current, delta)
+      useWorldStore.getState().updateWorldTime()
+
+      // Handle mobile block interaction
+      if (window.__MC_MOBILE_BREAK) {
+        const hit = raycastBlock()
+        if (hit) useWorldStore.getState().setBlock(hit.blockPos[0], hit.blockPos[1], hit.blockPos[2], BLOCK_AIR)
+        window.__MC_MOBILE_BREAK = false
+      }
+      if (window.__MC_MOBILE_PLACE) {
+        const hit = raycastBlock()
+        const { player } = usePlayerStore.getState()
+        if (hit && player) {
+          const slot = useUIStore.getState().hotbarSlot
+          const item = player.inventory.hotbar[slot]
+          if (item && BLOCK_DEFS[item.id]?.solid) {
+            useWorldStore.getState().setBlock(hit.placePos[0], hit.placePos[1], hit.placePos[2], item.id)
+          }
+        }
+        window.__MC_MOBILE_PLACE = false
+      }
+
+      animId = requestAnimationFrame(loop)
+    }
+    animId = requestAnimationFrame(loop)
+    return () => cancelAnimationFrame(animId)
+  }, [keys, raycastBlock])
+
+  if (!ready) {
+    return (
+      <div className="w-screen h-screen bg-[#2C2C2C] flex flex-col items-center justify-center gap-4">
+        <div className="text-4xl font-bold text-white" style={{ fontFamily: 'monospace', textShadow: '2px 2px #000' }}>
+          Minecraft Clone
+        </div>
+        <div className="w-48 h-2 bg-gray-700 rounded overflow-hidden">
+          <div className="h-full bg-green-500 animate-pulse" style={{ width: '60%' }} />
+        </div>
+        <div className="text-gray-400 text-sm">Generating world...</div>
+      </div>
+    )
+  }
+
+  const isMobileDevice = typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0)
+
+  return (
+    <div className="relative w-screen h-screen overflow-hidden bg-black select-none">
+      <Canvas
+        gl={{ antialias: false, powerPreference: 'high-performance', alpha: false, depth: true, stencil: false }}
+        dpr={[1, isMobileDevice ? 1 : 1.5]}
+        camera={{ fov: isMobileDevice ? 80 : 70, near: 0.05, far: 300, position: [8, 80 + 1.62, 8] }}
+        style={{ position: 'absolute', inset: 0 }}
+        onCreated={({ gl }) => { gl.toneMapping = THREE.ACESFilmicToneMapping }}
+      >
+        <GameScene />
+      </Canvas>
+
+      {/* Crosshair (desktop only) */}
+      {!isMobileDevice && <Crosshair />}
+
+      {/* Hotbar */}
+      <div className="absolute bottom-1 left-1/2 -translate-x-1/2 z-10 sm:bottom-2">
+        <Hotbar />
+      </div>
+
+      {/* HUD */}
+      <HUD />
+
+      {/* Debug */}
+      <DebugOverlay />
+
+      {/* Creative inventory panel */}
+      <CreativeInventory />
+
+      {/* Mobile controls */}
+      <MobileControls />
+
+      {/* Click to play overlay (desktop only) */}
+      {!isMobileDevice && !document.pointerLockElement && (
+        <div
+          className="absolute inset-0 flex items-center justify-center bg-black/60 cursor-pointer z-50"
+          onClick={requestPointerLock}
+        >
+          <div className="text-center text-white p-8 rounded-xl bg-black/40 backdrop-blur-sm">
+            <h2 className="text-3xl sm:text-5xl font-bold mb-4" style={{ fontFamily: 'monospace', textShadow: '3px 3px #000' }}>
+              ⛏ Minecraft Clone
+            </h2>
+            <p className="text-xl mb-4 text-green-400">Click to play</p>
+            <div className="text-sm opacity-70 space-y-1 text-left max-w-md mx-auto">
+              <p>🎮 <b>WASD</b> - Move | <b>Space</b> - Jump | <b>Shift</b> - Sneak</p>
+              <p>🖱️ <b>Left Click</b> - Break | <b>Right Click</b> - Place</p>
+              <p>⚡ <b>F</b> - Fly | <b>Ctrl</b> - Sprint | <b>1-9</b> - Hotbar</p>
+              <p>🔧 <b>F3</b> - Debug | <b>E</b> - Inventory | <b>Scroll</b> - Switch item</p>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+import * as THREE from 'three'