Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Choose Your Own 3D Adventure Map</title> | |
| <style> | |
| body { | |
| font-family: 'Courier New', monospace; | |
| background-color: #1a1a1a; /* Slightly lighter dark */ | |
| color: #e0e0e0; /* Slightly softer white */ | |
| 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; /* Darker border */ | |
| background-color: #000; /* Black background for scene */ | |
| } | |
| #ui-container { | |
| flex-grow: 2; | |
| padding: 20px; | |
| overflow-y: auto; | |
| background-color: #2a2a2a; /* Dark UI area */ | |
| display: flex; | |
| flex-direction: column; | |
| border-left: 1px solid #444; | |
| } | |
| #story-title { | |
| color: #ffd700; /* Gold */ | |
| margin-top: 0; | |
| border-bottom: 1px solid #555; | |
| padding-bottom: 10px; | |
| font-size: 1.4em; | |
| } | |
| #story-content { | |
| margin-bottom: 20px; | |
| line-height: 1.6; | |
| flex-grow: 1; /* Allow story to take up space */ | |
| } | |
| #story-content p { margin: 0 0 1em 0; } | |
| #choices-container { | |
| margin-top: 10px; /* Reduced margin */ | |
| padding-top: 15px; | |
| border-top: 1px solid #555; | |
| } | |
| #choices-container h3 { | |
| margin-top: 0; | |
| margin-bottom: 10px; | |
| color: #aaa; | |
| font-size: 1em; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .choice-button { | |
| display: block; | |
| width: calc(100% - 22px); /* Account for padding/border */ | |
| padding: 12px 10px; /* Slightly more padding */ | |
| margin-bottom: 10px; | |
| background-color: #444; /* Darker buttons */ | |
| color: #e0e0e0; | |
| border: 1px solid #666; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| text-align: left; | |
| font-family: 'Courier New', monospace; | |
| font-size: 1em; | |
| transition: background-color 0.2s, color 0.2s; | |
| } | |
| .choice-button:hover:not(:disabled) { | |
| background-color: #ffd700; /* Gold hover */ | |
| color: #1a1a1a; | |
| border-color: #fff; | |
| } | |
| .choice-button:disabled { | |
| background-color: #333; /* Darker disabled */ | |
| color: #777; | |
| cursor: not-allowed; | |
| border-color: #555; | |
| opacity: 0.7; | |
| } | |
| .choice-button[title]:disabled { | |
| text-decoration: line-through; /* Indicate locked */ | |
| } | |
| #stats-inventory-container { | |
| margin-top: 20px; | |
| padding: 15px 0; | |
| border-top: 1px solid #555; | |
| font-size: 0.9em; | |
| } | |
| #stats-inventory-container h4 { | |
| margin: 0 0 8px 0; | |
| color: #aaa; | |
| font-size: 0.9em; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| #stats-display, #inventory-display { | |
| margin-bottom: 15px; | |
| line-height: 1.8; /* Spacing for badges */ | |
| } | |
| #stats-display span, #inventory-display span { | |
| display: inline-block; | |
| background-color: #3a3a3a; | |
| padding: 3px 10px; | |
| border-radius: 15px; | |
| margin-right: 8px; | |
| margin-bottom: 6px; /* Wrap nicely */ | |
| border: 1px solid #555; | |
| white-space: nowrap; /* Prevent badges breaking */ | |
| } | |
| #inventory-display span { cursor: help; } /* Add tooltip cursor */ | |
| #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-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"> | |
| <h2 id="story-title">Loading Adventure...</h2> | |
| <div id="story-content"> | |
| <p>Please wait while the adventure loads.</p> | |
| </div> | |
| <div id="stats-inventory-container"> | |
| <h4>Status</h4> | |
| <div id="stats-display"></div> | |
| <h4>Inventory</h4> | |
| <div id="inventory-display"></div> | |
| </div> | |
| <div id="choices-container"> | |
| <h3>What will you do?</h3> | |
| <div id="choices"></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/" | |
| } | |
| } | |
| </script> | |
| <script type="module" src="game.js"></script> | |
| </body> | |
| </html> |