Added UI for Possessed Mode and Panic

docs/README.md

@@ -23,7 +23,7 @@
 <a href="https://github.com/SwingTheVine/Wplace-BlueMarble/blob/main/LICENSE.txt" target="_blank"><img alt="Software License: MPL-2.0" src="https://img.shields.io/badge/Software_License-MPL--2.0-brightgreen?style=flat"></a>
 <a href="https://discord.gg/tpeBPy46hf" target="_blank"><img alt="Contact Me" src="https://img.shields.io/badge/Contact_Me-gray?style=flat&logo=Discord&logoColor=white&logoSize=auto&labelColor=cornflowerblue"></a>
 <a href="" target="_blank"><img alt="WakaTime" src="https://img.shields.io/badge/Coding_Time-10hrs_0mins-blue?style=flat&logo=wakatime&logoColor=black&logoSize=auto&labelColor=white"></a>
-<a href="" target="_blank"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-67-black?style=flat"></a>
+<a href="" target="_blank"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-69-black?style=flat"></a>
 <a href="" target="_blank"><img alt="Total Lines of Code" src="https://tokei.rs/b1/github/SwingTheVine/Wplace-BlueMarble?category=code"></a>
 <a href="" target="_blank"><img alt="Total Comments" src="https://tokei.rs/b1/github/SwingTheVine/Wplace-BlueMarble?category=comments"></a>
 <a href="" target="_blank"><img alt="Build" src="https://github.com/SwingTheVine/Wplace-BlueMarble/actions/workflows/build.yml/badge.svg"></a>

package-lock.json

@@ -7,7 +7,7 @@
       "devDependencies": {
         "esbuild": "^0.25.0"
       },
-      "version": "0.26.3"
+      "version": "0.27.2"
     },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.8",
@@ -467,5 +467,5 @@
       }
     }
   },
-  "version": "0.26.3"
+  "version": "0.27.2"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wplace-bluemarble",
-  "version": "0.27.0",
+  "version": "0.27.2",
   "type": "module",
   "scripts": {
     "build": "node build/build.js",

src/BlueMarble.meta.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Blue Marble
 // @namespace    https://github.com/SwingTheVine/
-// @version      0.27.0
+// @version      0.27.2
 // @description  A userscript to automate and/or enhance the user experience on Wplace.live. Make sure to comply with the site's Terms of Service, and rules! This script is not affiliated with Wplace.live in any way, use at your own risk. This script is not affiliated with TamperMonkey. The author of this userscript is not responsible for any damages, issues, loss of data, or punishment that may occur as a result of using this script. This script is provided "as is" under the MPL-2.0 license. The "Blue Marble" icon is licensed under CC0 1.0 Universal (CC0 1.0) Public Domain Dedication. The image is owned by NASA.
 // @author       SwingTheVine
 // @license      MPL-2.0

src/overlay.css

@@ -56,6 +56,10 @@ div#bm-overlay {
   margin-top: 0.5em;
 }
 
+#bm-contain-automation {
+  margin-top: 0.5em;
+}
+
 #bm-contain-automation input[type="checkbox"] {
   vertical-align: middle;
   margin-right: 0.5ch;
@@ -79,6 +83,6 @@ div#bm-overlay {
   font-size: small;
   background-color: rgba(0, 0, 0, 0.2);
   padding: 0 0.5ch;
-  height: 3em;
+  height: 3.75em;
   width: 100%;
 }

src/overlay.js

@@ -64,15 +64,12 @@ export class Overlay {
     const containerAutomation = document.createElement('div'); // Automated stuff container
     containerAutomation.id = 'bm-contain-automation';
 
-    const labelStealthMode = document.createElement('label'); // Stealth Mode checkbox (container) label
-    labelStealthMode.textContent = 'Stealth Mode';
-
-    const inputStealthMode = document.createElement('input'); // Stealth Mode checkbox
-    inputStealthMode.type = 'checkbox';
-    inputStealthMode.id = 'bm-input-stealth';
-    inputStealthMode.checked = true; // Checkbox checked by default
-    labelStealthMode.prepend(inputStealthMode); // Adds the input to the label
-    containerAutomation.appendChild(labelStealthMode); // Adds the label & checkbox to the automation container
+    // Stealth Mode checkbox
+    containerAutomation.appendChild(this.createLineCheckbox(
+      'Stealth Mode',
+      'bm-input-stealth',
+      true
+    ));
     
     // Adds the help icon for stealth mode
     containerAutomation.appendChild(this.createQuestionBox(
@@ -83,6 +80,37 @@ export class Overlay {
 
     containerAutomation.appendChild(document.createElement('br')); // Line break
 
+    // Possessed Mode
+    containerAutomation.appendChild(this.createLineCheckbox(
+      'Possessed Mode',
+      'bm-input-possessed',
+      true
+    ));
+
+    // Adds the help icon for possessed mode
+    containerAutomation.appendChild(this.createQuestionBox(
+      'bm-help-possessed',
+      'Help: Controls the website as if it were possessed.',
+      outputStatusId
+    ));
+
+    containerAutomation.appendChild(document.createElement('br')); // Line break
+
+    // Panic option
+    containerAutomation.appendChild(this.createLineCheckbox(
+      'Panic',
+      'bm-input-panic'
+    ));
+
+    // Adds the help icon for panic
+    containerAutomation.appendChild(this.createQuestionBox(
+      'bm-help-panic',
+      'Help: Stops placing for a while if it detects a user nearby.',
+      outputStatusId
+    ));
+
+    containerAutomation.appendChild(document.createElement('br')); // Line break
+
     const outputStatus = document.createElement('textarea'); // Outputs bot status
     outputStatus.id = outputStatusId;
     outputStatus.readOnly = true; // Read-only input field
@@ -147,6 +175,24 @@ export class Overlay {
     return questionBox;
   }
 
+  /** Creates the checkbox line/label
+   * @param {string} labelText - The text for the label
+   * @param {string} checkboxId - The ID for the checkbox input
+   * @param {boolean} [checkboxDefault] - (Optional) The default status of the checkbox (true = checked). False by default.
+   * @returns {HTMLLabelElement} HTML Label Element with Input child
+   * @since 0.27.1
+   */
+  createLineCheckbox(labelText, checkboxId, checkboxDefault=false) {
+    const label = document.createElement('label');
+    label.textContent = labelText;
+    const input = document.createElement('input');
+    input.type = 'checkbox';
+    input.id = checkboxId;
+    input.checked = checkboxDefault;
+    label.prepend(input); // Adds the input as the first child of the label (before the text)
+    return label;
+  }
+
   /** Handles dragging of the overlay.
    * @param {HTMLElement} overlay - The overlay element to be moved.
    * @param {HTMLElement} barDrag - The element that acts as the drag handle.