import * as THREE from 'three'; import { PointerLockControls } from 'https://esm.sh/three@0.171.0/examples/jsm/controls/PointerLockControls.js'; import { createScene } from 'scene'; import { createPlayer } from 'player'; import { createTerrain } from 'terrain'; import { createUI } from 'ui'; import { setupInteraction } from 'interaction'; import { initSupabase } from 'supabase'; import { setupMultiplayer } from 'multiplayer'; document.getElementById('renderDiv').innerHTML = `

Click to play
WASD = Move, SPACE = Jump, CLICK = Place/Remove spice, ESC = Pause
Multiplayer enabled: Collect spice and build together!

Spice collected: 0

`; // Setup CSS const style = document.createElement('style'); style.textContent = ` body, html { margin: 0; padding: 0; overflow: hidden; } #game-container { position: relative; width: 100vw; height: 100vh; } #blocker { position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 10; } #instructions { color: #ffffff; text-align: center; font-family: Arial, sans-serif; max-width: 70%; padding: 20px; background-color: rgba(139, 69, 19, 0.7); border-radius: 10px; } #inventory { position: absolute; bottom: 20px; left: 20px; background-color: rgba(139, 69, 19, 0.7); color: white; padding: 10px; border-radius: 5px; font-family: Arial, sans-serif; z-index: 5; } `; document.head.appendChild(style); // Game state const gameState = { blocks: {}, spiceCollected: 0, selectedBlock: 'spice', isPlaying: false, isMultiplayer: true }; // Initialize three.js components const container = document.getElementById('game-container'); const { scene, renderer, camera } = createScene(container); const terrain = createTerrain(scene); createUI(gameState); // Initialize player controls AFTER the renderer is created and attached to DOM const controls = createPlayer(camera, document.getElementById('blocker'), gameState); // Initialize multiplayer const multiplayer = setupMultiplayer(scene, camera, terrain, gameState); // Set up interaction handling setupInteraction(scene, camera, controls, gameState, terrain, multiplayer); // Initialize multiplayer system if (gameState.isMultiplayer) { multiplayer.initialize(); } // Game loop function animate() { requestAnimationFrame(animate); if (gameState.isPlaying) { controls.update(); // Update player count display periodically if (gameState.isMultiplayer && window.multiplayer) { const indicator = document.getElementById('multiplayer-indicator'); if (indicator) { const state = window.multiplayer.getConnectionState(); if (state.connected) { indicator.textContent = `Multiplayer: Connected (${state.playerCount} players)`; } } } } renderer.render(scene, camera); } animate();