Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>3D Dungeon Explorer</title> | |
| <style> | |
| body { | |
| font-family: 'Courier New', monospace; | |
| background-color: #1a1a1a; | |
| color: #e0e0e0; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| } | |
| #game-container { | |
| display: flex; | |
| flex-grow: 1; | |
| overflow: hidden; | |
| } | |
| #scene-container { | |
| flex-grow: 3; | |
| position: relative; | |
| border-right: 2px solid #444; | |
| background-color: #000; | |
| cursor: crosshair; /* Indicate interaction area */ | |
| } | |
| #ui-container { | |
| flex-grow: 1; /* Smaller UI panel */ | |
| padding: 15px; | |
| overflow-y: auto; | |
| background-color: #2a2a2a; | |
| display: flex; | |
| flex-direction: column; | |
| border-left: 1px solid #444; | |
| min-width: 250px; /* Ensure UI doesn't get too small */ | |
| } | |
| .ui-section { | |
| margin-bottom: 15px; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid #444; | |
| } | |
| .ui-section:last-child { | |
| border-bottom: none; | |
| margin-bottom: 0; | |
| } | |
| .ui-section h4 { | |
| margin: 0 0 8px 0; | |
| color: #aaa; | |
| font-size: 0.9em; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| #stats-display, #inventory-display, #log-display { | |
| font-size: 0.9em; | |
| line-height: 1.6; | |
| } | |
| #log-display { | |
| flex-grow: 1; /* Allow log to fill space */ | |
| background-color: #1f1f1f; | |
| padding: 10px; | |
| border-radius: 3px; | |
| overflow-y: auto; /* Scroll log messages */ | |
| max-height: 300px; /* Limit log height */ | |
| } | |
| #log-display p { margin: 0 0 5px 0; font-size: 0.9em; } | |
| #log-display .pickup { color: #ffd700; } /* Gold for pickup */ | |
| #log-display .combat { color: #ff6b6b; } /* Red for combat */ | |
| #log-display .info { color: #aaaaaa; } /* Grey for info */ | |
| #stats-display span, #inventory-display span { | |
| display: inline-block; | |
| background-color: #3a3a3a; | |
| padding: 3px 10px; | |
| border-radius: 15px; | |
| margin-right: 8px; | |
| margin-bottom: 6px; | |
| border: 1px solid #555; | |
| white-space: nowrap; | |
| } | |
| #inventory-display span { cursor: help; } | |
| /* Item type colors from previous version */ | |
| #inventory-display .item-quest { background-color: #666030; border-color: #999048;} | |
| #inventory-display .item-weapon { background-color: #663030; border-color: #994848;} | |
| #inventory-display .item-armor { background-color: #306630; border-color: #489948;} | |
| #inventory-display .item-spell { background-color: #303066; border-color: #484899;} | |
| #inventory-display .item-consumable { background-color: #543066; border-color: #7d4899;} | |
| #inventory-display .item-unknown { background-color: #555; border-color: #777;} | |
| canvas { display: block; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="game-container"> | |
| <div id="scene-container"></div> | |
| <div id="ui-container"> | |
| <div class="ui-section"> | |
| <h4>Status</h4> | |
| <div id="stats-display">HP: 30/30 Str: 7</div> | |
| </div> | |
| <div class="ui-section"> | |
| <h4>Inventory</h4> | |
| <div id="inventory-display"><em>Empty</em></div> | |
| </div> | |
| <div class="ui-section" style="flex-grow: 1; display: flex; flex-direction: column;"> <h4>Log</h4> | |
| <div id="log-display"> | |
| <p class="info">Welcome! Use WASD or Arrows to move.</p> | |
| <p class="info">Spacebar to interact/attack.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "three": "https://unpkg.com/[email protected]/build/three.module.js", | |
| "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/", | |
| "cannon-es": "https://unpkg.com/[email protected]/dist/cannon-es.js" | |
| } | |
| } | |
| </script> | |
| <script type="module" src="game.js"></script> | |
| </body> | |
| </html> |