From ef80e2a77589d02c91ecbe59fe881d0c8579361e Mon Sep 17 00:00:00 2001
From: Richard Zink <Richard Zink>
Date: Tue, 6 Oct 2026 16:21:06 +0200
Subject: [PATCH] Add error display

---
 assets/index.html | 162 ++++++++++++++++++++++------------------------
 1 file changed, 79 insertions(+), 83 deletions(-)

diff --git a/assets/index.html b/assets/index.html
index 17f469b..3d35f96 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -14,6 +14,8 @@
         body {
             overflow: hidden;
             background: #000;
+            color: #ff0000;
+            font-family: monospace;
         }
 
         canvas {
@@ -22,11 +24,34 @@
             top: 0;
             left: 0;
         }
+
+        #log {
+            position: fixed;
+            top: 10px;
+            left: 10px;
+            z-index: 100;
+            font-size: 12px;
+            max-width: 90%;
+        }
     </style>
 </head>
 <body>
     <canvas id="bgCanvas"></canvas>
+    <div id="log"></div>
     <script>
+        const log = document.getElementById('log');
+        function addLog(msg) {
+            const div = document.createElement('div');
+            div.textContent = msg;
+            log.appendChild(div);
+        }
+
+        window.addEventListener('error', function(e) {
+            addLog('ERROR: ' + e.message + ' at line ' + e.lineno);
+        });
+
+        addLog('Script start');
+
         const canvas = document.getElementById('bgCanvas');
         const ctx = canvas.getContext('2d');
 
@@ -59,16 +84,10 @@
             }
         }
 
-        function rotateY(p, angle) {
-            const cos = Math.cos(angle);
-            const sin = Math.sin(angle);
-            return { x: p.x * cos - p.z * sin, y: p.y, z: p.x * sin + p.z * cos };
-        }
-
         class Landscape {
             constructor() {
                 this.gridSize = 120;
-                this.gridRange = 30;
+                this.gridRange = 20;
                 this.offsetX = 0;
                 this.offsetZ = 0;
                 this.triangles = [];
@@ -126,48 +145,45 @@
             draw() {
                 this.triangles.sort((a, b) => b.depth - a.depth);
                 this.triangles.forEach(tri => {
-                        const proj1 = tri.p1.project();
-                        const proj2 = tri.p2.project();
-                        const proj3 = tri.p3.project();
+                    const proj1 = tri.p1.project();
+                    const proj2 = tri.p2.project();
+                    const proj3 = tri.p3.project();
 
-                        const v1 = { x: tri.p2.x - tri.p1.x, y: tri.p2.y - tri.p1.y, z: tri.p2.z - tri.p1.z };
-                        const v2 = { x: tri.p3.x - tri.p1.x, y: tri.p3.y - tri.p1.y, z: tri.p3.z - tri.p1.z };
-                        const crossZ = v1.x * v2.y - v1.y * v2.x;
-                        if (crossZ >= 0) return;
+                    const v1 = { x: tri.p2.x - tri.p1.x, y: tri.p2.y - tri.p1.y, z: tri.p2.z - tri.p1.z };
+                    const v2 = { x: tri.p3.x - tri.p1.x, y: tri.p3.y - tri.p1.y, z: tri.p3.z - tri.p1.z };
+                    const crossZ = v1.x * v2.y - v1.y * v2.x;
+                    if (crossZ >= 0) return;
 
-                        const baseColor = tri.isWater ? 'rgba(0, 150, 220, 0.7)' : 'rgba(0, 200, 0, 0.7)';
-                        ctx.fillStyle = baseColor;
-                        ctx.beginPath();
-                        ctx.moveTo(proj1.x, proj1.y);
-                        ctx.lineTo(proj2.x, proj2.y);
-                        ctx.lineTo(proj3.x, proj3.y);
-                        ctx.closePath();
-                        ctx.fill();
+                    const baseColor = tri.isWater ? 'rgba(0, 150, 220, 0.7)' : 'rgba(0, 200, 0, 0.7)';
+                    ctx.fillStyle = baseColor;
+                    ctx.beginPath();
+                    ctx.moveTo(proj1.x, proj1.y);
+                    ctx.lineTo(proj2.x, proj2.y);
+                    ctx.lineTo(proj3.x, proj3.y);
+                    ctx.closePath();
+                    ctx.fill();
 
-                        ctx.strokeStyle = tri.isWater ? '#00ccff' : '#00ff66';
-                        ctx.lineWidth = 1;
-                        ctx.stroke();
-                    });
+                    ctx.strokeStyle = tri.isWater ? '#00ccff' : '#00ff66';
+                    ctx.lineWidth = 1;
+                    ctx.stroke();
+                });
             }
         }
 
         class Airplane {
             constructor() {
                 this.vertices = [];
-                this.faces = [];
                 this.init();
             }
 
             init() {
-                const verts = [];
-
+                const segments = 8;
                 const fuselageLength = 80;
                 const fuselageRadius = 8;
-                const segments = 8;
 
                 for (let i = 0; i < segments; i++) {
                     const angle = (i / segments) * Math.PI * 2;
-                    verts.push(new Point3D(
+                    this.vertices.push(new Point3D(
                         Math.cos(angle) * fuselageRadius,
                         Math.sin(angle) * fuselageRadius,
                         0
@@ -175,45 +191,20 @@
                 }
 
                 for (let i = 0; i < segments; i++) {
-                    const angle1 = (i / segments) * Math.PI * 2;
-                    const angle2 = ((i + 1) % segments / segments) * Math.PI * 2;
-                    verts.push(new Point3D(
-                        Math.cos(angle1) * fuselageRadius,
-                        Math.sin(angle1) * fuselageRadius,
+                    const angle = (i / segments) * Math.PI * 2;
+                    this.vertices.push(new Point3D(
+                        Math.cos(angle) * fuselageRadius,
+                        Math.sin(angle) * fuselageRadius,
                         fuselageLength
                     ));
-                    verts.push(new Point3D(
-                        Math.cos(angle2) * fuselageRadius,
-                        Math.sin(angle2) * fuselageRadius,
-                        fuselageLength
-                    ));
-                }
-
-                const tipIdx = verts.length;
-                verts.push(new Point3D(0, 0, fuselageLength + 30));
-
-                for (let i = 0; i < segments; i++) {
-                    const next = (i + 1) % segments;
-                    const middleStart = segments + i * 2;
-                    const middleNext = segments + ((i + 1) % segments) * 2;
-
-                    verts.push([baseIdx = i, next].forEach(() => {}));
                 }
 
                 const wingSpan = 100;
-                const wingChord = 25;
                 const wingY = -2;
-
-                const wingBackLeft = verts.length;
-                verts.push(new Point3D(-wingSpan / 2, wingY, 10));
-                verts.push(new Point3D(-wingSpan / 2 + 5, wingY, 35));
-                verts.push(new Point3D(wingSpan / 2 - 5, wingY, 35));
-                verts.push(new Point3D(wingSpan / 2, wingY, 10));
-
-                this.faces.push([wingBackLeft, wingBackLeft + 1, wingBackLeft + 2]);
-                this.faces.push([wingBackLeft, wingBackLeft + 2, wingBackLeft + 3]);
-
-                this.vertices = verts;
+                this.vertices.push(new Point3D(-wingSpan / 2, wingY, 10));
+                this.vertices.push(new Point3D(-wingSpan / 2 + 5, wingY, 35));
+                this.vertices.push(new Point3D(wingSpan / 2 - 5, wingY, 35));
+                this.vertices.push(new Point3D(wingSpan / 2, wingY, 10));
             }
 
             update() {
@@ -236,38 +227,43 @@
                     ctx.fill();
                 });
 
-                this.vertices.forEach((v, i) => {
-                    const nextIdx = (i + 1) % this.vertices.length;
-                    if (nextIdx <= 2) return;
-                    const p1 = v.project();
-                    const p2 = this.vertices[nextIdx].project();
+                for (let i = 0; i < this.vertices.length - 1; i++) {
+                    if (i === 7) continue;
+                    const p1 = this.vertices[i].project();
+                    const p2 = this.vertices[i + 1].project();
                     ctx.beginPath();
                     ctx.moveTo(p1.x, p1.y);
                     ctx.lineTo(p2.x, p2.y);
                     ctx.stroke();
-                });
+                }
 
                 ctx.shadowBlur = 0;
             }
         }
 
-        const landscape = new Landscape();
-        const airplane = new Airplane();
+        try {
+            const landscape = new Landscape();
+            const airplane = new Airplane();
+            addLog('Objects created');
 
-        function animate() {
-            ctx.fillStyle = '#000';
-            ctx.fillRect(0, 0, width, height);
+            function animate() {
+                ctx.fillStyle = '#000';
+                ctx.fillRect(0, 0, width, height);
 
-            landscape.update();
-            landscape.draw();
+                landscape.update();
+                landscape.draw();
 
-            airplane.update();
-            airplane.render();
+                airplane.update();
+                airplane.render();
 
-            requestAnimationFrame(animate);
+                requestAnimationFrame(animate);
+            }
+
+            animate();
+            addLog('Animation started');
+        } catch (e) {
+            addLog('CATCH: ' + e.message);
         }
-
-        animate();
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>