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

src/components/game/GameCanvas.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useState, useRef, useCallback } from 'react'
 import { Canvas } from '@react-three/fiber'
-import { GameScene } from './Scene'
+import * as THREE from 'three'
+import { GameScene, raycastResultRef } from './Scene'
 import { usePlayerStore } from '@/stores/playerStore'
 import { useWorldStore } from '@/stores/worldStore'
 import { useGameStore } from '@/stores/gameStore'
@@ -14,17 +15,27 @@ 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'
+import { BLOCK_DEFS, CREATIVE_BLOCKS, BLOCK_AIR, SEA_LEVEL, CHUNK_WIDTH, CHUNK_DEPTH } from '@/engine/constants'
 
 export function GameCanvas() {
   const { keys, isPointerLocked, requestPointerLock, raycastBlock } = usePlayerControls()
   const [ready, setReady] = useState(false)
   const lastTimeRef = useRef(0)
+  const [loadingProgress, setLoadingProgress] = useState(0)
 
-  // Init
+  // Init world and player
   useEffect(() => {
-    useWorldStore.getState().initWorld(Math.floor(Math.random() * 1000000))
-    usePlayerStore.getState().initPlayer()
+    const seed = Math.floor(Math.random() * 1000000)
+    useWorldStore.getState().initWorld(seed)
+
+    // Find spawn height
+    const terrainGen = new (require('@/engine/terrain/generator').TerrainGenerator)(seed)
+    let spawnY = 100
+    try {
+      spawnY = terrainGen.getHeight(8, 8) + 3
+    } catch {}
+
+    usePlayerStore.getState().initPlayer(spawnY)
     useGameStore.getState().setLoading(false)
     setReady(true)
   }, [])
@@ -35,26 +46,35 @@ export function GameCanvas() {
     const loop = (time: number) => {
       const delta = Math.min((time - lastTimeRef.current) / 1000, 0.1)
       lastTimeRef.current = time
-      if (keys.current) updatePlayerMovement(keys.current, delta)
+
+      if (keys.current && !useGameStore.getState().paused) {
+        updatePlayerMovement(keys.current, delta)
+      }
+
       useWorldStore.getState().updateWorldTime()
 
+      // Update FPS counter
+      if (delta > 0) {
+        useGameStore.getState().updateFPS(Math.round(1 / delta))
+      }
+
       // Handle mobile block interaction
-      if (window.__MC_MOBILE_BREAK) {
+      if ((window as any).__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
+        ;(window as any).__MC_MOBILE_BREAK = false
       }
-      if (window.__MC_MOBILE_PLACE) {
+      if ((window as any).__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) {
+          if (item && BLOCK_DEFS[item.id]) {
             useWorldStore.getState().setBlock(hit.placePos[0], hit.placePos[1], hit.placePos[2], item.id)
           }
         }
-        window.__MC_MOBILE_PLACE = false
+        ;(window as any).__MC_MOBILE_PLACE = false
       }
 
       animId = requestAnimationFrame(loop)
@@ -63,70 +83,94 @@ export function GameCanvas() {
     return () => cancelAnimationFrame(animId)
   }, [keys, raycastBlock])
 
+  // Loading screen
   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 className="text-4xl sm:text-5xl font-bold text-white tracking-wide"
+          style={{ fontFamily: 'monospace', textShadow: '3px 3px #000' }}>
+          MINECRAFT
         </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 className="text-sm text-gray-400 mb-2">Browser Edition</div>
+        <div className="w-64 h-3 bg-gray-700 rounded-full overflow-hidden">
+          <div className="h-full bg-green-500 transition-all duration-300"
+            style={{ width: `${Math.min(loadingProgress, 100)}%` }} />
         </div>
-        <div className="text-gray-400 text-sm">Generating world...</div>
+        <div className="text-gray-500 text-xs">Generating world...</div>
       </div>
     )
   }
 
-  const isMobileDevice = typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0)
+  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 }}
+        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] }}
+        camera={{
+          fov: isMobileDevice ? 80 : 70,
+          near: 0.05,
+          far: 400,
+          position: [8, 100, 8],
+        }}
         style={{ position: 'absolute', inset: 0 }}
-        onCreated={({ gl }) => { gl.toneMapping = THREE.ACESFilmicToneMapping }}
+        onCreated={({ gl }) => {
+          gl.toneMapping = THREE.ACESFilmicToneMapping
+          gl.toneMappingExposure = 1.0
+        }}
       >
         <GameScene />
       </Canvas>
 
-      {/* Crosshair (desktop only) */}
+      {/* Crosshair */}
       {!isMobileDevice && <Crosshair />}
 
       {/* Hotbar */}
-      <div className="absolute bottom-1 left-1/2 -translate-x-1/2 z-10 sm:bottom-2">
+      <div className="absolute bottom-1 left-1/2 -translate-x-1/2 z-10 sm:bottom-3">
         <Hotbar />
       </div>
 
       {/* HUD */}
       <HUD />
 
-      {/* Debug */}
+      {/* Debug overlay */}
       <DebugOverlay />
 
-      {/* Creative inventory panel */}
+      {/* Creative inventory */}
       <CreativeInventory />
 
       {/* Mobile controls */}
-      <MobileControls />
+      {isMobileDevice && <MobileControls />}
 
-      {/* Click to play overlay (desktop only) */}
+      {/* Click to play overlay (desktop) */}
       {!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
+          <div className="text-center text-white p-6 sm:p-10 rounded-xl bg-gradient-to-b from-gray-900/80 to-black/80 backdrop-blur-md border border-gray-700/50 max-w-lg">
+            <h2 className="text-4xl sm:text-6xl font-black mb-2 tracking-tight"
+              style={{ fontFamily: 'monospace', textShadow: '3px 3px #000' }}>
+              MINECRAFT
             </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 className="text-green-400 text-lg mb-6">Browser Edition</div>
+            <div className="text-xl mb-6 text-white font-semibold animate-pulse">
+              Click to Play
+            </div>
+            <div className="text-sm opacity-60 space-y-1.5 text-left max-w-sm mx-auto">
+              <p>🎮 <b>WASD</b> Move &nbsp;|&nbsp; <b>Space</b> Jump &nbsp;|&nbsp; <b>Shift</b> Sneak</p>
+              <p>🖱️ <b>Left Click</b> Break &nbsp;|&nbsp; <b>Right Click</b> Place</p>
+              <p>⚡ <b>F</b> Fly &nbsp;|&nbsp; <b>Ctrl</b> Sprint &nbsp;|&nbsp; <b>1-9</b> Hotbar</p>
+              <p>🔧 <b>F3</b> Debug &nbsp;|&nbsp; <b>E</b> Inventory &nbsp;|&nbsp; <b>Scroll</b> Switch</p>
+              <p>🌍 <b>G</b> Gamemode &nbsp;|&nbsp; <b>T</b> Time &nbsp;|&nbsp; <b>Q</b> Drop</p>
             </div>
           </div>
         </div>
@@ -134,5 +178,3 @@ export function GameCanvas() {
     </div>
   )
 }
-
-import * as THREE from 'three'