From 1e73f6a5a457495c5d270258ece31da71a13eb2b Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Wed, 28 May 2025 04:27:57 +0200
Subject: [PATCH] Refactor app.js for responsive canvas size calculation

---
 node/server/public/app.js | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/node/server/public/app.js b/node/server/public/app.js
index 1eaf1f0..faaf57f 100644
--- a/node/server/public/app.js
+++ b/node/server/public/app.js
@@ -47,32 +47,28 @@ composer.addPass(new ShaderPass(GammaCorrectionShader));
 function onResize() {
     const winW = window.innerWidth, winH = window.innerHeight;
     const aspect = 3/2;
-    let renderW, renderH;
 
+    let renderW, renderH;
     if (winW / winH > aspect) {
-        // Fenster ist breiter als 3:2 → fülle in Höhe, überstehende Breite
-        renderH = winH;
-        renderW = winH * aspect;
-    } else {
-        // Fenster ist schmaler als 3:2 → fülle in Breite, überstehende Höhe
+        // Fenster ist breiter → passe an Breite an, Höhe reicht nicht aus → Höhe muss „überragen“
         renderW = winW;
         renderH = winW / aspect;
+    } else {
+        // Fenster ist höher/schmaler → passe an Höhe an, Breite reicht nicht aus → Breite muss „überragen“
+        renderH = winH;
+        renderW = winH * aspect;
     }
-    // Setze die Größe des Renderers und Canvas
-    renderer.setSize(renderW, renderH, false); // "false": ändert nicht das Canvas-Element selbst!
+    renderer.setSize(renderW, renderH, false);
     composer.setSize(renderW, renderH);
 
-    // Platziere das Canvas absolut zentriert, setze style.width/height so dass es "überragt"
     renderer.domElement.style.width = `${renderW}px`;
     renderer.domElement.style.height = `${renderH}px`;
     renderer.domElement.style.left = '50%';
     renderer.domElement.style.top = '50%';
     renderer.domElement.style.transform = 'translate(-50%, -50%)';
 
-    // Scissor/Viewport: Zeige die ganze Fläche, kein „Clipping“ nötig
     renderer.setScissorTest(false);
 
-    // Pixel Ratio
     const dpr = window.devicePixelRatio || 1;
     renderer.setPixelRatio(dpr);
     composer.setPixelRatio(dpr);