1 files changed, 29 insertions, 10 deletions
diff --git a/js/puzzle-dungeon/index.html b/js/puzzle-dungeon/index.html
index c183ea0..89f1869 100644
--- a/js/puzzle-dungeon/index.html
+++ b/js/puzzle-dungeon/index.html
@@ -3,28 +3,48 @@
 <head>
     <meta charset="UTF-8">
     <title>Puzzle Game</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
+        body, html {
+            margin: 0;
+            padding: 0 1em;
+            max-width: 100%;
+            overflow-x: hidden; /* Prevent horizontal scrolling */
+            display: block;
+        }
         canvas {
             border: 1px solid black;
             display: block;
             margin: 0 auto;
         }
+        form#commandForm {
+            padding: 0 1em;
+            display: block;
+            margin: 0 auto;
+            max-width: 28em;
+            width: 100%;
+        }
+        textarea#commands {
+            display: block;
+            margin: 0 auto;
+            width: 100%;
+            font-size: 16px; /* Prevent zoom on focus */
+        }
     </style>
 </head>
 <body>
+    <p>
+        <span id="playerHealth">Health: 10</span> / 
+        <span id="playerEndurance">Endurance: 10</span> /
+        <span id="playerScore">Score: 0</span> /
+        <span id="playerPosition">(0, 0)</span>
+    </p>
     <canvas id="gameCanvas"></canvas>
+    <p id="playerInventory">Inventory: []</p>
     <form id="commandForm">
         <textarea id="commands" rows="10" cols="30"></textarea><br>
         <button type="submit">Submit</button>
     </form>
-    <div id="playerStatus">
-        <h3>Player Status</h3>
-        <p id="playerPosition">Position: (0, 0)</p>
-        <p id="playerHealth">Health: 10</p>
-        <p id="playerEndurance">Endurance: 10</p>
-        <p id="playerInventory">Inventory: []</p>
-        <p id="playerScore">Score: 0</p>
-    </div>
     <script type="module">
         import { parseCommands } from './parser.js';
         import { initializeGame, resizeCanvas } from './game.js';
@@ -36,8 +56,7 @@
         });
 
         window.addEventListener('resize', resizeCanvas);
-
-        // Initialize the game
+        
         initializeGame();
     </script>
 </body>