Spaces:
Running
Running
File size: 4,736 Bytes
2c77579 756e345 2c77579 756e345 b079db3 960a9eb 756e345 2c77579 756e345 2c77579 756e345 2c77579 756e345 2c77579 b079db3 756e345 2c77579 756e345 b079db3 756e345 2c77579 756e345 2c77579 b079db3 756e345 2c77579 756e345 2c77579 756e345 960a9eb 756e345 960a9eb 756e345 49d65ee 756e345 2c77579 756e345 b079db3 756e345 2c77579 756e345 2c77579 756e345 2c77579 |
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 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 |
<!DOCTYPE html>
<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</title>
<style>
body {
font-family: 'Courier New', monospace;
background-color: #222; /* Dark background */
color: #eee; /* Light text */
margin: 0;
padding: 0;
overflow: hidden; /* Prevent scrollbars from Three.js */
display: flex;
flex-direction: column;
height: 100vh;
}
#game-container {
display: flex;
flex-grow: 1; /* Allow container to fill space */
overflow: hidden; /* Contain children */
}
#scene-container {
flex-grow: 3; /* Give more space to 3D view */
position: relative; /* For potential overlays */
border-right: 2px solid #555;
}
#ui-container {
flex-grow: 2; /* Space for UI elements */
padding: 20px;
overflow-y: auto; /* Allow scrolling for long text/options */
background-color: #333;
display: flex;
flex-direction: column;
}
#story-title {
color: #ffcc66; /* Goldish title */
margin-top: 0;
border-bottom: 1px solid #555;
padding-bottom: 10px;
}
#story-content {
margin-bottom: 20px;
line-height: 1.6;
}
#choices-container {
margin-top: auto; /* Push choices towards the bottom */
padding-top: 15px;
border-top: 1px solid #555;
}
#choices-container h3 {
margin-top: 0;
margin-bottom: 10px;
color: #aaa;
}
.choice-button {
display: block;
width: calc(100% - 20px); /* Adjust width */
padding: 10px;
margin-bottom: 10px;
background-color: #555;
color: #eee;
border: 1px solid #777;
border-radius: 5px;
cursor: pointer;
text-align: left;
font-family: 'Courier New', monospace;
font-size: 1em;
transition: background-color 0.2s;
}
.choice-button:hover {
background-color: #d4a017; /* Gold hover */
color: #222;
}
.choice-button:disabled {
background-color: #444;
color: #888;
cursor: not-allowed;
border-color: #666;
}
#stats-inventory-container {
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid #555;
font-size: 0.9em;
}
#stats-display, #inventory-display {
margin-bottom: 10px;
}
#stats-display span, #inventory-display span {
display: inline-block;
background-color: #444;
padding: 3px 8px;
border-radius: 15px;
margin-right: 8px;
margin-bottom: 5px; /* Wrap nicely */
border: 1px solid #666;
}
#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;}
canvas { display: block; } /* Prevent extra space below canvas */
</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">
<div id="stats-display">
</div>
<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> |