feat: Introduce robust diagnostic setup with fixed-size renderer, enhanced logging, system checks, and improved error handling for initial game components.

This commit is contained in:
2026-01-03 07:16:53 +00:00
parent ad5b025a8b
commit 31a4a5ee9b
7 changed files with 155 additions and 44 deletions

View File

@@ -1,15 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horror Game</title>
<link rel="stylesheet" href="style.css">
<script>
window.onerror = function (msg, url, lineNo, columnNo, error) {
const logDiv = document.getElementById('debug-log');
if (logDiv) {
const err = document.createElement('div');
err.style.color = 'red';
err.style.fontWeight = 'bold';
err.style.background = 'white';
err.style.padding = '5px';
err.style.margin = '5px 0';
err.textContent = `CRITICAL ERROR: ${msg} [Line: ${lineNo}]`;
logDiv.appendChild(err);
logDiv.scrollTop = logDiv.scrollHeight;
}
return false;
};
function checkWebGL() {
try {
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
if (gl && gl instanceof WebGLRenderingContext) return "WebGL Supported";
else return "WebGL NOT Supported";
} catch (e) { return "WebGL Error: " + e.message; }
}
function test2D() {
try {
const canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
canvas.style.position = 'fixed';
canvas.style.bottom = '10px';
canvas.style.right = '10px';
canvas.style.zIndex = '10001';
canvas.style.border = '2px solid white';
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);
window.log("2D Canvas Test: Rendered Red Square");
} catch (e) { window.log("2D Canvas Error: " + e.message); }
}
window.addEventListener('load', test2D);
</script>
</head>
<body>
<div id="game-container"></div>
<div id="debug-log" style="position: absolute; top: 10px; left: 10px; z-index: 999; color: lime; font-family: monospace; pointer-events: none; background: rgba(0,0,0,0.5);"></div>
<div id="debug-log"
style="position: absolute; top: 10px; left: 10px; z-index: 10000; color: lime; font-family: monospace; pointer-events: none; background: rgba(0,0,0,0.8); max-height: 80%; overflow-y: auto; font-size: 14px; padding: 10px; width: 300px;">
</div>
<div id="ui-layer">
<div id="start-screen">
<h1>ECHOES</h1>
@@ -23,4 +71,5 @@
<script type="module" src="/src/main.js"></script>
</body>
</html>
</html>