From 0091a6d9b89d39dc889a3c0b077f246f0f5dc6e7 Mon Sep 17 00:00:00 2001
From: Kim Ravn Hansen <moccalotto@gmail.com>
Date: Sat, 4 Oct 2025 17:11:05 +0200
Subject: [PATCH] gui

---
 frontend/ascii_dungeon_crawler.html | 52 ++++++++++++++++++-----------
 frontend/ascii_dungeon_crawler.js   | 19 +++++++----
 2 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/frontend/ascii_dungeon_crawler.html b/frontend/ascii_dungeon_crawler.html
index 72395db..ffc534b 100755
--- a/frontend/ascii_dungeon_crawler.html
+++ b/frontend/ascii_dungeon_crawler.html
@@ -15,49 +15,68 @@
 
             #gameContainer {
                 text-align: center;
+                display: grid;
+                grid-template-areas:
+                    "firstPerson minimap"
+                    "status status"
+                    "mapInput mapInput";
+            }
+
+            #status {
+                grid-area: status;
             }
 
             #viewport {
+                grid-area: firstPerson;
                 font-size: 10px;
                 line-height: 7px;
                 white-space: pre;
                 border: 2px solid #0f0;
                 display: inline-block;
                 padding: 2px;
-                border: 5px solid #666;
+                border-top: 1rem solid #666;
+                border-bottom: 1rem solid #666;
+                border-left: 1rem solid #666;
+                border-right: 1rem solid #666;
                 font-weight: bold;
             }
             #minimap {
+                grid-area: minimap;
                 font-size: 12px;
                 line-height: 11.5px;
                 white-space: pre;
                 display: inline-block;
                 padding: 2px;
                 border: 5px solid #666;
-                background-color: black;
-            }
-
-            #controls {
-                margin-top: 20px;
-                color: #0f0;
+                border-top: 1rem solid #666;
+                border-bottom: 1rem solid #666;
+                border-left: none;
+                border-right: 1rem solid #666;
+                font-weight: bold;
             }
 
             #mapInput {
+                grid-area: mapInput;
                 margin-top: 20px;
-                overflow-x: scroll;
+                overflow-x: visible;
                 overflow-wrap: normal;
             }
 
             textarea {
-                background-color: #001100;
+                background-color: #222;
                 color: #ccc;
-                border: 1px solid #0f0;
-                font-family: "Courier New", monospace;
                 padding: 10px;
+                border: 5px solid #666;
+                border-top: 1em solid #666;
+                border-bottom: 1em solid #666;
+                border-left: 1ch solid #666;
+                border-right: 1ch solid #666;
+                scrollbar-width: thin;
+                width: calc(100% - 1rem);
             }
 
             button {
-                background-color: #001100;
+                background-color: #222;
                 color: #0f0;
                 border: 1px solid #0f0;
                 padding: 5px 10px;
@@ -66,7 +85,7 @@
             }
 
             button:hover {
-                background-color: #002200;
+                background-color: #666;
             }
         </style>
     </head>
@@ -75,12 +94,8 @@
             <div id="viewport"></div>
             <div id="status">orientation</div>
             <div id="minimap"></div>
-
-            <div id="threejs" style="border: 2px solid green; background-color: #222"></div>
             <div id="mapInput">
-                ←→↑↓
-                <br />
-                <textarea id="mapText" rows="10" cols="120" wrap="off">
+                <textarea id="mapText" rows="10" wrap="off">
 ############################################################
 ############################################################
 ############################################################
@@ -123,7 +138,6 @@
 ############################################################
             </textarea
                 >
-                <br /><br />
                 <button onclick="game.loadMap()">Load Map</button>
             </div>
         </div>
diff --git a/frontend/ascii_dungeon_crawler.js b/frontend/ascii_dungeon_crawler.js
index 45a1c5e..b513ff0 100755
--- a/frontend/ascii_dungeon_crawler.js
+++ b/frontend/ascii_dungeon_crawler.js
@@ -104,15 +104,20 @@ class DungeonCrawler {
 
         /** @readonly */
         this.rendering = {
-            /** @type {FirstPersonRenderer} */ firstPersonRenderer: null,
-            /** @type {MiniMap}     */ miniMapRenderer: null,
-
-            firstPersonWindow: new AsciiWindow(document.getElementById("viewport"), 80, 45), // MAGIC CONSTANTS
-            minimapWindow: new AsciiWindow(document.getElementById("minimap"), 15, 15), // MAGIC CONSTANT
-
-            options: DefaultRendererOptions,
+            /** @type {FirstPersonRenderer}     */ firstPersonRenderer: null,
+            /** @type {MiniMap}                 */ miniMapRenderer: null,
+            /** @type {AsciiWindow}             */ firstPersonWindow: null,
+            /** @type {AsciiWindow}             */ minimapWindow: null,
+            /** @type {DefaultRendererOptions}  */ options: DefaultRendererOptions,
         };
 
+        ((this.rendering.firstPersonWindow = new AsciiWindow(document.getElementById("viewport"), 80, 45)), // MAGIC CONSTANTS
+            (this.rendering.minimapWindow = new AsciiWindow(
+                document.getElementById("minimap"),
+                this.rendering.options.viewDistance * 2 + 3,
+                this.rendering.options.viewDistance * 2 + 3,
+            )));
+
         this.player = new Player();
 
         this.setupControls();