Hugging Face's logo

Spaces:
awacke1
/
ChooseYourOwnAdventure
Running

App Files Community
ChooseYourOwnAdventure
File size: 5,048 Bytes 
1d353bd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
<!DOCTYPE html>
<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>