Spaces:

awacke1
/

ChooseYourOwnAdventure

Running

App Files Files Community

awacke1 commited on Apr 27

Commit

49d65ee

verified ·

1 Parent(s): 908fc8e

Update index.html

Browse files

Files changed (1) hide show

index.html +53 -93

index.html CHANGED Viewed

@@ -3,12 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Choose Your Own 3D Adventure Map</title>
     <style>
         body {
             font-family: 'Courier New', monospace;
-            background-color: #1a1a1a; /* Slightly lighter dark */
-            color: #e0e0e0; /* Slightly softer white */
             margin: 0;
             padding: 0;
             overflow: hidden;
@@ -26,116 +26,77 @@
         #scene-container {
             flex-grow: 3;
             position: relative;
-            border-right: 2px solid #444; /* Darker border */
-            background-color: #000; /* Black background for scene */
         }
         #ui-container {
-            flex-grow: 2;
-            padding: 20px;
             overflow-y: auto;
-            background-color: #2a2a2a; /* Dark UI area */
             display: flex;
             flex-direction: column;
             border-left: 1px solid #444;
         }
-        #story-title {
-             color: #ffd700; /* Gold */
-             margin-top: 0;
-             border-bottom: 1px solid #555;
              padding-bottom: 10px;
-             font-size: 1.4em;
-        }
-        #story-content {
-            margin-bottom: 20px;
-            line-height: 1.6;
-            flex-grow: 1; /* Allow story to take up space */
         }
-        #story-content p { margin: 0 0 1em 0; }
-        #choices-container {
-            margin-top: 10px; /* Reduced margin */
-            padding-top: 15px;
-            border-top: 1px solid #555;
         }
-        #choices-container h3 {
-             margin-top: 0;
-             margin-bottom: 10px;
              color: #aaa;
-             font-size: 1em;
              text-transform: uppercase;
              letter-spacing: 1px;
         }
-        .choice-button {
-            display: block;
-            width: calc(100% - 22px); /* Account for padding/border */
-            padding: 12px 10px; /* Slightly more padding */
-            margin-bottom: 10px;
-            background-color: #444; /* Darker buttons */
-            color: #e0e0e0;
-            border: 1px solid #666;
-            border-radius: 5px;
-            cursor: pointer;
-            text-align: left;
-            font-family: 'Courier New', monospace;
-            font-size: 1em;
-            transition: background-color 0.2s, color 0.2s;
-        }
-        .choice-button:hover:not(:disabled) {
-            background-color: #ffd700; /* Gold hover */
-            color: #1a1a1a;
-            border-color: #fff;
-        }
-         .choice-button:disabled {
-             background-color: #333; /* Darker disabled */
-             color: #777;
-             cursor: not-allowed;
-             border-color: #555;
-             opacity: 0.7;
-         }
-         .choice-button[title]:disabled {
-             text-decoration: line-through; /* Indicate locked */
-         }
-        #stats-inventory-container {
-             margin-top: 20px;
-             padding: 15px 0;
-             border-top: 1px solid #555;
-             font-size: 0.9em;
-        }
-        #stats-inventory-container h4 {
-            margin: 0 0 8px 0;
-            color: #aaa;
             font-size: 0.9em;
-            text-transform: uppercase;
-            letter-spacing: 1px;
         }
-        #stats-display, #inventory-display {
-            margin-bottom: 15px;
-            line-height: 1.8; /* Spacing for badges */
         }
-         #stats-display span, #inventory-display span {
              display: inline-block;
              background-color: #3a3a3a;
              padding: 3px 10px;
              border-radius: 15px;
              margin-right: 8px;
-             margin-bottom: 6px; /* Wrap nicely */
              border: 1px solid #555;
-             white-space: nowrap; /* Prevent badges breaking */
          }
-         #inventory-display span { cursor: help; } /* Add tooltip cursor */
          #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-unknown { background-color: #555; border-color: #777;}
         canvas { display: block; }
     </style>
 </head>
@@ -145,21 +106,19 @@
         <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">
-                 <h4>Status</h4>
-                 <div id="stats-display"></div>
-                 <h4>Inventory</h4>
-                 <div id="inventory-display"></div>
             </div>
-            <div id="choices-container">
-                <h3>What will you do?</h3>
-                <div id="choices"></div>
             </div>
         </div>
     </div>
@@ -168,7 +127,8 @@
         {
             "imports": {
                 "three": "https://unpkg.com/[email protected]/build/three.module.js",
-                "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
             }
         }
     </script>

 <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;
         #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>
         <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>
         {
             "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>