Hugging Face's logo

Spaces:
awacke1
/
ChooseYourOwnAdventure
Running

App Files Community
awacke1 commited on
Commit
2af3e63
·
verified ·
1 Parent(s): 44717a8

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +52 -150
index.html CHANGED
@@ -1,158 +1,60 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Choose Your Own 3D Adventure</title>
7
- <style>
8
- body {
9
- font-family: 'Courier New', monospace;
10
- background-color: #222; /* Dark background */
11
- color: #eee; /* Light text */
12
- margin: 0;
13
- padding: 0;
14
- overflow: hidden; /* Prevent scrollbars from Three.js */
15
- display: flex;
16
- flex-direction: column;
17
- height: 100vh;
18
- }
19
 
20
- #game-container {
21
- display: flex;
22
- flex-grow: 1; /* Allow container to fill space */
23
- overflow: hidden; /* Contain children */
24
- }
25
 
26
- #scene-container {
27
- flex-grow: 3; /* Give more space to 3D view */
28
- position: relative; /* For potential overlays */
29
- border-right: 2px solid #555;
30
- }
31
-
32
- #ui-container {
33
- flex-grow: 2; /* Space for UI elements */
34
- padding: 20px;
35
- overflow-y: auto; /* Allow scrolling for long text/options */
36
- background-color: #333;
37
- display: flex;
38
- flex-direction: column;
39
- }
40
-
41
- #story-title {
42
- color: #ffcc66; /* Goldish title */
43
- margin-top: 0;
44
- border-bottom: 1px solid #555;
45
- padding-bottom: 10px;
46
- }
47
-
48
- #story-content {
49
- margin-bottom: 20px;
50
- line-height: 1.6;
51
- }
52
-
53
- #choices-container {
54
- margin-top: auto; /* Push choices towards the bottom */
55
- padding-top: 15px;
56
- border-top: 1px solid #555;
57
- }
58
-
59
- #choices-container h3 {
60
- margin-top: 0;
61
- margin-bottom: 10px;
62
- color: #aaa;
63
- }
64
-
65
- .choice-button {
66
- display: block;
67
- width: calc(100% - 20px); /* Adjust width */
68
- padding: 10px;
69
- margin-bottom: 10px;
70
- background-color: #555;
71
- color: #eee;
72
- border: 1px solid #777;
73
- border-radius: 5px;
74
- cursor: pointer;
75
- text-align: left;
76
- font-family: 'Courier New', monospace;
77
- font-size: 1em;
78
- transition: background-color 0.2s;
79
- }
80
-
81
- .choice-button:hover {
82
- background-color: #d4a017; /* Gold hover */
83
- color: #222;
84
- }
85
- .choice-button:disabled {
86
- background-color: #444;
87
- color: #888;
88
- cursor: not-allowed;
89
- border-color: #666;
90
- }
91
-
92
- #stats-inventory-container {
93
- margin-top: 20px;
94
- padding-top: 15px;
95
- border-top: 1px solid #555;
96
- font-size: 0.9em;
97
- }
98
- #stats-display, #inventory-display {
99
- margin-bottom: 10px;
100
- }
101
- #stats-display span, #inventory-display span {
102
- display: inline-block;
103
- background-color: #444;
104
- padding: 3px 8px;
105
- border-radius: 15px;
106
- margin-right: 8px;
107
- margin-bottom: 5px; /* Wrap nicely */
108
- border: 1px solid #666;
109
- }
110
- #inventory-display .item-quest { background-color: #666030; border-color: #999048;}
111
- #inventory-display .item-weapon { background-color: #663030; border-color: #994848;}
112
- #inventory-display .item-armor { background-color: #306630; border-color: #489948;}
113
- #inventory-display .item-spell { background-color: #303066; border-color: #484899;}
114
-
115
-
116
- canvas { display: block; } /* Prevent extra space below canvas */
117
-
118
- </style>
119
- </head>
120
- <body>
121
-
122
- <div id="game-container">
123
- <div id="scene-container"></div>
124
-
125
- <div id="ui-container">
126
- <h2 id="story-title">Loading Adventure...</h2>
127
- <div id="story-content">
128
- <p>Please wait while the adventure loads.</p>
129
- </div>
130
 
131
- <div id="stats-inventory-container">
132
- <div id="stats-display">
133
- </div>
134
- <div id="inventory-display">
135
- </div>
136
- </div>
137
 
138
- <div id="choices-container">
139
- <h3>What will you do?</h3>
140
- <div id="choices">
141
- </div>
142
- </div>
143
  </div>
144
  </div>
145
 
146
- <script type="importmap">
147
- {
148
- "imports": {
149
- "three": "https://unpkg.com/[email protected]/build/three.module.js",
150
- "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
151
- }
152
- }
153
- </script>
154
-
155
- <script type="module" src="game.js"></script>
 
 
 
156
 
157
- </body>
158
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <div id="character-sheet-container" class="panel">
2
+ <h2>Character Sheet</h2>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
 
4
+ <div class="char-section char-header">
5
+ <label for="char-name">👤 Name:</label>
6
+ <input type="text" id="char-name" value="Hero">
 
 
7
 
8
+ <button id="save-char-btn" class="emoji-button" title="Save Character Locally">💾<span class="btn-label">Save</span></button>
9
+ <button id="export-char-btn" class="emoji-button" title="Export Character to File">📤<span class="btn-label">Export</span></button>
10
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
 
12
+ <div class="char-section char-details">
13
+ <div><label>🧬 Race:</label> <span id="char-race">Human</span></div>
14
+ <div><label>🧭 Alignment:</label> <span id="char-alignment">Neutral Good</span></div>
15
+ <div><label>⚔️ Class:</label> <span id="char-class">Fighter</span></div>
16
+ </div>
 
17
 
18
+ <div class="char-section char-level-xp">
19
+ <div><label>⭐ Level:</label> <span id="char-level">1</span></div>
20
+ <div>
21
+ <label>✨ XP:</label> <span id="char-xp">0</span> / <span id="char-xp-next">100</span>
22
+ <button id="levelup-btn" class="emoji-button" title="Level Up!" disabled>⬆️<span class="btn-label">Level Up</span></button>
23
  </div>
24
  </div>
25
 
26
+ <div class="char-section char-stats">
27
+ <h3>Stats</h3>
28
+ <div class="stats-grid">
29
+ <div>❤️ HP: <span id="char-hp">30</span> / <span id="char-max-hp">30</span></div>
30
+ <div>💪 Str: <span id="stat-strength">7</span> <button class="emoji-button stat-increase" data-stat="strength" title="Increase Strength" disabled>➕</button></div>
31
+ <div>🧠 Int: <span id="stat-intelligence">5</span> <button class="emoji-button stat-increase" data-stat="intelligence" title="Increase Intelligence" disabled>➕</button></div>
32
+ <div>🙏 Wis: <span id="stat-wisdom">5</span> <button class="emoji-button stat-increase" data-stat="wisdom" title="Increase Wisdom" disabled>➕</button></div>
33
+ <div>🤸 Dex: <span id="stat-dexterity">6</span> <button class="emoji-button stat-increase" data-stat="dexterity" title="Increase Dexterity" disabled>➕</button></div>
34
+ <div>🛡️ Con: <span id="stat-constitution">6</span> <button class="emoji-button stat-increase" data-stat="constitution" title="Increase Constitution" disabled>➕</button></div>
35
+ <div>😎 Cha: <span id="stat-charisma">5</span> <button class="emoji-button stat-increase" data-stat="charisma" title="Increase Charisma" disabled>➕</button></div>
36
+ </div>
37
+ <p><small>Cost to increase stat: <span id="stat-increase-cost">?</span> XP</small></p>
38
+ </div>
39
 
40
+ <div class="char-section char-possessions">
41
+ <h3>🎒 Possessions</h3>
42
+ <ol id="char-inventory-list" start="1">
43
+ <li><span class="item-slot"></span></li>
44
+ <li><span class="item-slot"></span></li>
45
+ <li><span class="item-slot"></span></li>
46
+ <li><span class="item-slot"></span></li>
47
+ <li><span class="item-slot"></span></li>
48
+ <li><span class="item-slot"></span></li>
49
+ <li><span class="item-slot"></span></li>
50
+ <li><span class="item-slot"></span></li>
51
+ <li><span class="item-slot"></span></li>
52
+ <li><span class="item-slot"></span></li>
53
+ <li><span class="item-slot"></span></li>
54
+ <li><span class="item-slot"></span></li>
55
+ <li><span class="item-slot"></span></li>
56
+ <li><span class="item-slot"></span></li>
57
+ <li><span class="item-slot"></span></li>
58
+ </ol>
59
+ </div>
60
+ </div>