Spaces:
Running
Running
File size: 4,633 Bytes
2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 2c77579 49d65ee 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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Dungeon Explorer</title>
<style>
body {
font-family: 'Courier New', monospace;
background-color: #1a1a1a;
color: #e0e0e0;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100vh;
}
#game-container {
display: flex;
flex-grow: 1;
overflow: hidden;
}
#scene-container {
flex-grow: 3;
position: relative;
border-right: 2px solid #444;
background-color: #000;
cursor: crosshair; /* Indicate interaction area */
}
#ui-container {
flex-grow: 1; /* Smaller UI panel */
padding: 15px;
overflow-y: auto;
background-color: #2a2a2a;
display: flex;
flex-direction: column;
border-left: 1px solid #444;
min-width: 250px; /* Ensure UI doesn't get too small */
}
.ui-section {
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #444;
}
.ui-section:last-child {
border-bottom: none;
margin-bottom: 0;
}
.ui-section h4 {
margin: 0 0 8px 0;
color: #aaa;
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 1px;
}
#stats-display, #inventory-display, #log-display {
font-size: 0.9em;
line-height: 1.6;
}
#log-display {
flex-grow: 1; /* Allow log to fill space */
background-color: #1f1f1f;
padding: 10px;
border-radius: 3px;
overflow-y: auto; /* Scroll log messages */
max-height: 300px; /* Limit log height */
}
#log-display p { margin: 0 0 5px 0; font-size: 0.9em; }
#log-display .pickup { color: #ffd700; } /* Gold for pickup */
#log-display .combat { color: #ff6b6b; } /* Red for combat */
#log-display .info { color: #aaaaaa; } /* Grey for info */
#stats-display span, #inventory-display span {
display: inline-block;
background-color: #3a3a3a;
padding: 3px 10px;
border-radius: 15px;
margin-right: 8px;
margin-bottom: 6px;
border: 1px solid #555;
white-space: nowrap;
}
#inventory-display span { cursor: help; }
/* Item type colors from previous version */
#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;}
#inventory-display .item-consumable { background-color: #543066; border-color: #7d4899;}
#inventory-display .item-unknown { background-color: #555; border-color: #777;}
canvas { display: block; }
</style>
</head>
<body>
<div id="game-container">
<div id="scene-container"></div>
<div id="ui-container">
<div class="ui-section">
<h4>Status</h4>
<div id="stats-display">HP: 30/30 Str: 7</div>
</div>
<div class="ui-section">
<h4>Inventory</h4>
<div id="inventory-display"><em>Empty</em></div>
</div>
<div class="ui-section" style="flex-grow: 1; display: flex; flex-direction: column;"> <h4>Log</h4>
<div id="log-display">
<p class="info">Welcome! Use WASD or Arrows to move.</p>
<p class="info">Spacebar to interact/attack.</p>
</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/",
"cannon-es": "https://unpkg.com/[email protected]/dist/cannon-es.js"
}
}
</script>
<script type="module" src="game.js"></script>
</body>
</html> |