Spaces:
Running
Running
File size: 4,736 Bytes
4e2964e ead82da 4e2964e ead82da 4e2964e ead82da 4e2964e ead82da 4e2964e ead82da 4e2964e ead82da 4e2964e 10de4ed ead82da 10de4ed ead82da 10de4ed ead82da 10de4ed ead82da 10de4ed ead82da 7346308 ead82da 7346308 ead82da 4e2964e ead82da 4e2964e ead82da 4e2964e ead82da 4e2964e ead82da 4e2964e ead82da 4e2964e ead82da 4e2964e ead82da 4e2964e |
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> |