diff options
| author | elioat <elioat@tilde.institute> | 2024-07-07 09:57:36 -0400 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-07-07 09:57:36 -0400 |
| commit | 9ccf05179c946355646de2a94cab14b54bc6d87f (patch) | |
| tree | 204533fbc6fa9d8b0bb204baffa7cf089055e9c1 /js | |
| parent | 83140c20ccbd7c251e45aa560de4b99475b975b5 (diff) | |
| download | tour-9ccf05179c946355646de2a94cab14b54bc6d87f.tar.gz | |
*
Diffstat (limited to 'js')
| -rw-r--r-- | js/puzzle-dungeon/game.js | 2 | ||||
| -rw-r--r-- | js/puzzle-dungeon/index.html | 39 |
2 files changed, 30 insertions, 11 deletions
diff --git a/js/puzzle-dungeon/game.js b/js/puzzle-dungeon/game.js index 4ca91d3..4c83ea2 100644 --- a/js/puzzle-dungeon/game.js +++ b/js/puzzle-dungeon/game.js @@ -119,7 +119,7 @@ export function initializeGame() { export function resizeCanvas() { const canvas = document.getElementById('gameCanvas'); - const width = Math.min(window.innerWidth, window.innerHeight) * 0.9; + const width = Math.min(window.innerWidth, window.innerHeight) * 0.5; canvas.width = width; canvas.height = width; drawGrid(grid); 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> |