Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Procedural Text Adventure</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <h1>Choose Your Own Procedural Adventure</h1> | |
| <div class="game-container"> | |
| <div id="scene-container"> | |
| </div> | |
| <div class="ui-container"> | |
| <div id="story-ui" class="panel"> | |
| <h2 id="story-title">Loading...</h2> | |
| <div id="story-content"> | |
| <p>Please wait while the adventure loads.</p> | |
| </div> | |
| <div id="choices"> | |
| </div> | |
| </div> | |
| <div id="character-sheet-container" class="panel"> | |
| <h2>Character Sheet</h2> | |
| <div class="char-section char-header"> | |
| <label for="char-name">Name:</label> | |
| <input type="text" id="char-name" value="Hero"> | |
| <button id="save-char-btn" class="sheet-button" title="Save Character Locally">Save</button> | |
| <button id="export-char-btn" class="sheet-button" title="Export Character to File">Export</button> | |
| </div> | |
| <div class="char-section char-details"> | |
| <div><label>Race:</label> <span id="char-race">Human</span></div> | |
| <div><label>Alignment:</label> <span id="char-alignment">Neutral Good</span></div> | |
| <div><label>Class:</label> <span id="char-class">Fighter</span></div> | |
| </div> | |
| <div class="char-section char-level-xp"> | |
| <div><label>Level:</label> <span id="char-level">1</span></div> | |
| <div> | |
| <label>XP:</label> <span id="char-xp">0</span> / <span id="char-xp-next">100</span> | |
| <button id="levelup-btn" class="sheet-button" title="Level Up!" disabled>Level Up</button> | |
| </div> | |
| </div> | |
| <div class="char-section char-stats"> | |
| <h3>Stats</h3> | |
| <div class="stats-grid"> | |
| <div>HP: <span id="char-hp">30</span> / <span id="char-max-hp">30</span></div> | |
| <div>Str: <span id="stat-strength">7</span> <button class="sheet-button stat-increase" data-stat="strength" title="Increase Strength" disabled>+</button></div> | |
| <div>Int: <span id="stat-intelligence">5</span> <button class="sheet-button stat-increase" data-stat="intelligence" title="Increase Intelligence" disabled>+</button></div> | |
| <div>Wis: <span id="stat-wisdom">5</span> <button class="sheet-button stat-increase" data-stat="wisdom" title="Increase Wisdom" disabled>+</button></div> | |
| <div>Dex: <span id="stat-dexterity">6</span> <button class="sheet-button stat-increase" data-stat="dexterity" title="Increase Dexterity" disabled>+</button></div> | |
| <div>Con: <span id="stat-constitution">6</span> <button class="sheet-button stat-increase" data-stat="constitution" title="Increase Constitution" disabled>+</button></div> | |
| <div>Cha: <span id="stat-charisma">5</span> <button class="sheet-button stat-increase" data-stat="charisma" title="Increase Charisma" disabled>+</button></div> | |
| </div> | |
| <p><small>Cost to increase: <span id="stat-increase-cost">?</span> XP / Available points: <span id="stat-points-available">0</span></small></p> | |
| </div> | |
| <div class="char-section char-possessions"> | |
| <h3>Possessions</h3> | |
| <ol id="char-inventory-list" start="1"> | |
| <li><span class="item-slot">[Empty]</span></li> | |
| <li><span class="item-slot">[Empty]</span></li> | |
| <li><span class="item-slot">[Empty]</span></li> | |
| <li><span class="item-slot">[Empty]</span></li> | |
| <li><span class="item-slot">[Empty]</span></li> | |
| <li><span class="item-slot">[Empty]</span></li> | |
| <li><span class="item-slot">[Empty]</span></li> | |
| <li><span class="item-slot">[Empty]</span></li> | |
| <li><span class="item-slot">[Empty]</span></li> | |
| <li><span class="item-slot">[Empty]</span></li> | |
| <li><span class="item-slot">[Empty]</span></li> | |
| <li><span class="item-slot">[Empty]</span></li> | |
| <li><span class="item-slot">[Empty]</span></li> | |
| <li><span class="item-slot">[Empty]</span></li> | |
| <li><span class="item-slot">[Empty]</span></li> | |
| </ol> | |
| </div> | |
| </div> | |
| </div> </div> <script src="script.js" type="module"></script> | |
| </body> | |
| </html> |