diff --git a/index.html b/index.html index 5c01308..5beddf9 100644 --- a/index.html +++ b/index.html @@ -1,15 +1,63 @@ + Horror Game + +
-
- +
+
+

ECHOES

@@ -23,4 +71,5 @@ - + + \ No newline at end of file diff --git a/src/Game.js b/src/Game.js index cb8c1ee..3ffccc0 100644 --- a/src/Game.js +++ b/src/Game.js @@ -1,52 +1,71 @@ import { Graphics } from './Graphics.js'; import { World } from './World.js'; import { Player } from './Player.js'; +import * as THREE from 'three'; export class Game { constructor() { - this.graphics = new Graphics(); - this.world = new World(this.graphics.scene); - this.player = new Player(this.graphics.camera, this.world.colliders); + window.log('Game constructor start'); + try { + this.graphics = new Graphics(); + this.world = new World(this.graphics.scene); + this.player = new Player(this.graphics.camera, this.world.colliders); + window.log('All components created successfully'); + } catch (e) { + window.log('CRITICAL ERROR during setup: ' + e.message); + } this.isRunning = false; this.lastTime = 0; - this.setupUI(); } setupUI() { const startScreen = document.getElementById('start-screen'); const hud = document.getElementById('hud'); + if (!startScreen) { + window.log('ERROR: start-screen not found'); + return; + } startScreen.addEventListener('click', () => { - this.player.lockControls(); + window.log('Start screen clicked'); + if (this.player) { + this.player.lockControls(); + } startScreen.style.display = 'none'; - hud.style.display = 'block'; + if (hud) hud.style.display = 'block'; this.isRunning = true; + window.log('Game isRunning = true'); }); } start() { - this.graphics.init(); - this.world.load(); - - // Add player to scene if needed, but usually player moves camera - this.graphics.scene.add(this.player.getObject()); + window.log('Game.start() begin'); + try { + if (this.world) this.world.load(); + if (this.player) { + const playerObj = this.player.getObject(); + this.graphics.scene.add(playerObj); + } + window.log('World/Player loading complete'); + } catch (e) { + window.log('ERROR in Game.start(): ' + e.message); + } requestAnimationFrame(this.loop.bind(this)); + window.log('Animation loop requested'); } loop(time) { - requestAnimationFrame(this.loop.bind(this)); - - const dt = this.lastTime === 0 ? 0 : Math.min((time - this.lastTime) / 1000, 0.1); // Cap dt + const dt = this.lastTime === 0 ? 0 : Math.min((time - this.lastTime) / 1000, 0.1); this.lastTime = time; if (this.isRunning) { this.player.update(dt); - // this.world.update(dt); } this.graphics.render(); + requestAnimationFrame(this.loop.bind(this)); } } diff --git a/src/Graphics.js b/src/Graphics.js index 2836346..5ee9e86 100644 --- a/src/Graphics.js +++ b/src/Graphics.js @@ -9,26 +9,35 @@ export class Graphics { this.camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 100); - // Real Screen Renderer + // Real Screen Renderer - Force 400x300 for diagnostic visibility + const w = 400; + const h = 300; this.renderer = new THREE.WebGLRenderer({ antialias: false }); - this.renderer.setSize(window.innerWidth, window.innerHeight); - this.renderer.setClearColor(0xff00ff); // STRIKING MAGENTA for diagnostic - this.renderer.domElement.style.border = '5px solid yellow'; // VISIBLE BORDER - this.renderer.domElement.style.zIndex = '100'; // FORCE TO FRONT + this.renderer.setSize(w, h); + this.renderer.setClearColor(0xff00ff); + this.renderer.domElement.style.position = 'fixed'; + this.renderer.domElement.style.top = '50%'; + this.renderer.domElement.style.left = '50%'; + this.renderer.domElement.style.transform = 'translate(-50%, -50%)'; + this.renderer.domElement.style.border = '5px solid yellow'; + this.renderer.domElement.style.zIndex = '1000'; this.renderer.domElement.id = 'three-canvas'; - const container = document.getElementById('game-container'); - if (container) { - container.appendChild(this.renderer.domElement); - window.log('Renderer attached to DOM'); - } else { - window.log('ERROR: game-container not found'); - } + document.body.appendChild(this.renderer.domElement); + window.log(`GL Vendor: ${this.renderer.getContext().getParameter(this.renderer.getContext().VENDOR)}`); + window.log(`Canvas forced to ${w}x${h} (centered)`); - this.scene.add(new THREE.AxesHelper(10)); // Add axis lines (Red, Green, Blue) - this.camera.position.set(5, 5, 5); // Move camera out of the floor + this.camera.position.set(5, 5, 5); this.camera.lookAt(0, 0, 0); + // Add a guaranteed object + const testCube = new THREE.Mesh( + new THREE.BoxGeometry(2, 2, 2), + new THREE.MeshBasicMaterial({ color: 0x00ff00 }) + ); + this.scene.add(testCube); + window.log('Green Cube added to scene'); + // --- Retro Pipeline Setup --- // 1. Off-screen Render Target (Small Resolution) @@ -106,11 +115,15 @@ export class Graphics { render() { if (!this.renderCount) this.renderCount = 0; this.renderCount++; - if (this.renderCount % 100 === 0) window.log(`Rendering frame ${this.renderCount}`); - // --- Diagnostic: Render directly to screen --- - // 1. Render 3D Scene to Screen - this.renderer.setRenderTarget(null); + if (this.renderCount % 500 === 0) { + window.log(`F:${this.renderCount} | Scene: ${this.scene.children.length} obj | Cam: ${this.camera.position.x.toFixed(1)},${this.camera.position.y.toFixed(1)},${this.camera.position.z.toFixed(1)}`); + } + + this.renderer.setClearColor(0xff00ff); + this.renderer.clear(); + + // 1. Render 3D Scene directly this.renderer.render(this.scene, this.camera); /* diff --git a/src/Player.js b/src/Player.js index 0253ae6..aeb80a1 100644 --- a/src/Player.js +++ b/src/Player.js @@ -1,5 +1,7 @@ import * as THREE from 'three'; import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls.js'; +// Note: In some environments this might need to be 'three/addons/controls/PointerLockControls.js' +// but we'll stick to this for now as it's standard examples path. export class Player { constructor(camera, colliders) { @@ -11,7 +13,12 @@ export class Player { this.height = 1.7; // Eyes height // Init controls - this.controls = new PointerLockControls(camera, document.body); + try { + this.controls = new PointerLockControls(camera, document.body); + window.log('PointerLockControls initialized'); + } catch (e) { + window.log(`ERROR initializing controls: ${e.message}`); + } // Movement state this.moveForward = false; @@ -64,7 +71,7 @@ export class Player { } toggleFlashlight() { - if (!this.controls.isLocked) return; // Only toggle when game is active + if (!this.controls || !this.controls.isLocked) return; // Only toggle when game is active this.flashlightOn = !this.flashlightOn; if (this.flashlight) { this.flashlight.visible = this.flashlightOn; @@ -72,15 +79,16 @@ export class Player { } lockControls() { - this.controls.lock(); + if (this.controls) this.controls.lock(); + else window.log('WARNING: Controls not initialized for locking'); } getObject() { - return this.controls.getObject(); + return this.controls ? this.controls.getObject() : new THREE.Group(); } update(dt) { - if (!this.controls.isLocked) return; + if (!this.controls || !this.controls.isLocked) return; // Friction-like dampening // Simple direct velocity for now diff --git a/src/World.js b/src/World.js index b3a2d70..a54ca66 100644 --- a/src/World.js +++ b/src/World.js @@ -7,6 +7,7 @@ export class World { } load() { + window.log('World.load() start'); // Grid helper for depth this.scene.add(new THREE.GridHelper(20, 20)); @@ -37,6 +38,7 @@ export class World { } createWall(x, y, z, width, height, rotate = false) { + window.log(`Creating wall at ${x},${z}`); const geo = new THREE.BoxGeometry(width, height, 0.5); const mat = new THREE.MeshBasicMaterial({ color: 0x555555 }); const wall = new THREE.Mesh(geo, mat); diff --git a/src/main.js b/src/main.js index df52ce9..9063886 100644 --- a/src/main.js +++ b/src/main.js @@ -1,9 +1,28 @@ window.log = (msg) => { const logDiv = document.getElementById('debug-log'); - if (logDiv) logDiv.innerHTML += `> ${msg}
`; + if (logDiv) { + const span = document.createElement('div'); + span.textContent = `> ${msg}`; + logDiv.appendChild(span); + logDiv.scrollTop = logDiv.scrollHeight; + } console.log(msg); }; +// Toggle debug log with 'P' +window.addEventListener('keydown', (e) => { + if (e.code === 'KeyP') { + const logDiv = document.getElementById('debug-log'); + if (logDiv) { + logDiv.style.display = logDiv.style.display === 'none' ? 'block' : 'none'; + } + } +}); + +import * as THREE from 'three'; +window.log(`THREE Revision: ${THREE.REVISION}`); +if (window.checkWebGL) window.log(`System Check: ${window.checkWebGL()}`); + import { Game } from './Game.js'; window.addEventListener('DOMContentLoaded', () => { diff --git a/vite.config.js b/vite.config.js index 810fec4..f06bdd3 100644 --- a/vite.config.js +++ b/vite.config.js @@ -2,7 +2,8 @@ import { defineConfig } from 'vite'; export default defineConfig({ server: { - host: '0.0.0.0', port: 5173, - }, + strictPort: true, + host: true + } });