Merge pull request #91 from louis-e/settings-menu

Added settings menu including scale option and custom bbox input
louis-e · Dec 28, 2024 · 135e150 · 135e150
2 parents 5cb749b + a284f77
commit 135e150
Show file tree

Hide file tree

Showing 6 changed files with 292 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -70,13 +70,12 @@ Feel free to choose an item from the To-Do or Known Bugs list, or bring your own
 - [ ] Refactor fountain structure implementation
 - [ ] Automatic new world creation instead of using an existing world
 - [ ] Tool for mapping real coordinates to Minecraft coordinates
-- [ ] Setup fork of [https://github.com/aaronr/bboxfinder.com](https://github.com/aaronr/bboxfinder.com) for easy bbox picking
 - [ ] Add interior to buildings
 - [ ] Evaluate and implement elevation
-- [ ] Generate a few big cities using high performance hardware and make them available to download
 - [ ] Implement memory mapped storing of chunks to reduce memory usage
 - [x] Design and implement a GUI
 - [x] Fix faulty empty chunks ([https://github.com/owengage/fastnbt/issues/120](https://github.com/owengage/fastnbt/issues/120)) (workaround found)
+- [x] Setup fork of [https://github.com/aaronr/bboxfinder.com](https://github.com/aaronr/bboxfinder.com) for easy bbox picking
 
 ## :trophy: Open Source
 #### Key objectives of this project

diff --git a/gui-src/css/styles.css b/gui-src/css/styles.css
@@ -55,7 +55,7 @@ a:hover {
   display: flex;
   gap: 20px;
   justify-content: center;
-  align-items: stretch; /* Ensures both sections take full height */
+  align-items: stretch;
   margin-top: 5px;
 }
 
@@ -73,7 +73,6 @@ a:hover {
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  /* No display: flex here, so buttons and content aren't stretched */
 }
 
 .controls-content {
@@ -83,7 +82,7 @@ a:hover {
 }
 
 .controls-box .progress-section {
-  margin-top: auto; /* Keeps the progress section at the bottom */
+  margin-top: auto;
 }
 
 .map-container {
@@ -112,11 +111,11 @@ button {
   transition: border-color 0.25s;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
   margin-top: 10px;
-  width: auto; /* Ensures buttons don’t stretch */
+  width: auto;
 }
 
 button:hover {
-  border-color: #396cd8;
+  border-color: #656565;
 }
 
 #selected-directory {
@@ -238,4 +237,122 @@ button:hover {
 
 .controls-box button {
   width: 100%;
-}
+}
+
+/* Customization Settings */
+.modal {
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  background-color: #797979;
+  padding: 20px;
+  border: 1px solid #797979;
+  border-radius: 10px;
+  width: 400px;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.close-button {
+  color: #e9e9e9;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.close-button:hover {
+  color: #ffffff;
+}
+
+#winter-toggle {
+  accent-color: #fecc44;
+}
+
+.winter-toggle-container, .scale-slider-container {
+  margin: 15px 0;
+}
+
+.scale-slider-container label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+#scale-value-slider {
+  accent-color: #fecc44;
+}
+
+#slider-value {
+  margin-left: 10px;
+  font-weight: bold;
+}
+
+.bbox-input-container {
+  margin-bottom: 20px;
+}
+
+.bbox-input-container label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+#bbox-coords {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+#bbox-coords:focus {
+  outline: none;
+  border-color: #fecc44;
+  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+}
+
+
+.button-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 5px;
+}
+
+.start-button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.start-button:hover {
+  background-color: #4caf50;
+}
+
+.settings-button {
+  width: 40px !important;
+  height: 38px;
+  border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.3s, border-color 0.3s;
+}
+
+.settings-button .gear-icon::before {
+  content: "⚙️";
+  font-size: 18px;
+}
diff --git a/gui-src/index.html b/gui-src/index.html
@@ -34,7 +34,7 @@ <h2>Select Location</h2>
       <section class="section controls-box">
         <div class="controls-content">
           <h2>Select World</h2>
-      
+
           <!-- Updated Tooltip Structure -->
           <div class="tooltip" style="width: 100%;">
             <button type="button" onclick="pickDirectory()" style="padding: 10px; line-height: 1.2; width: 100%;">
@@ -48,12 +48,15 @@ <h2>Select World</h2>
               Please select a Minecraft world that can be overwritten, as the generation process will replace existing structures in the chosen world!
             </span>
           </div>
-
-          <br>
-
-          <button type="button" onclick="startGeneration()">Start Generation</button>
+
+          <div class="button-container">
+            <button type="button" id="start-button" class="start-button" onclick="startGeneration()">Start Generation</button>
+            <button type="button" class="settings-button" onclick="openSettings()">
+                <i class="gear-icon"></i>
+            </button>
+          </div>
           <br><br>
-      
+
           <div class="progress-section">
             <h2>Progress</h2>
             <div class="progress-bar-container">
@@ -68,6 +71,33 @@ <h2>Progress</h2>
       </section>
     </div>
 
+    <!-- Settings Modal -->
+    <div id="settings-modal" class="modal" style="display: none;">
+      <div class="modal-content">
+        <span class="close-button" onclick="closeSettings()">&times;</span>
+        <h2>Customization Settings</h2>
+
+        <!-- Winter Mode Toggle Button -->
+        <!-- <div class="winter-toggle-container">
+          <label for="winter-toggle">Winter:</label>
+          <input type="checkbox" id="winter-toggle" name="winter-toggle">
+        </div> -->
+
+        <!-- World Scale Slider -->
+        <div class="scale-slider-container">
+          <label for="scale-value-slider">World Scale:</label>
+          <input type="range" id="scale-value-slider" name="scale-value-slider" min="0.50" max="2.5" step="0.25" value="1">
+          <span id="slider-value">1.00</span>
+        </div>
+
+        <!-- Bounding Box Input -->
+        <div class="bbox-input-container">
+          <label for="bbox-coords">Custom Bounding Box:</label>
+          <input type="text" id="bbox-coords" name="bbox-coords" maxlength="55" style="width: 280px;" autocomplete="one-time-code" placeholder="Format: lat,lng,lat,lng">
+        </div>
+      </div>
+    </div>
+
     <!-- Footer -->
     <footer class="footer">
       <a href="https://github.com/louis-e/arnis" target="_blank" class="footer-link">
@@ -77,4 +107,4 @@ <h2>Progress</h2>
   </main>
 </body>
 
-</html>
+</html>