Bundled the CSS file(s)

build/build.js

@@ -1,5 +1,6 @@
 /** Builds the userscript using esbuild.
  * This is for compiling all of the source files into a single userscript file.
+ * This also compiles all CSS files into a single CSS file.
  * @since 0.0.6
 */
 
@@ -7,6 +8,7 @@ import esbuild from 'esbuild';
 import fs from 'fs';
 import { execSync } from 'child_process';
 
+// Tries to bump the minor version
 try {
   const update = execSync('node build/update-version.js', { stdio: 'inherit' });
   console.log('Version updated in meta file successfully');
@@ -15,8 +17,23 @@ try {
   process.exit(1);
 }
 
+// Fetches the userscript metadata banner
 const metaContent = fs.readFileSync('src/BlueMarble.meta.js', 'utf8');
 
+// Compiles a string array of all CSS files
+const cssFiles = fs.readdirSync('src/')
+  .filter(file => file.endsWith('.css'))
+  .map(file => `src/${file}`);
+
+// Compiles the CSS files
+esbuild.build({
+  entryPoints: cssFiles,
+  bundle: true,
+  outfile: 'dist/BlueMarble.user.css',
+  minify: true
+});
+
+// Compiles the JS files
 esbuild.build({
   entryPoints: ['src/main.js'],
   bundle: true,

dist/BlueMarble.user.css

@@ -0,0 +1 @@
+#bm-overlay{position:fixed;background-color:#153063e6;color:#fff;padding:10px;border-radius:8px;z-index:9000}div#bm-overlay{font-family:Roboto Mono,Courier New,Monaco,DejaVu Sans Mono,monospace,Arial;letter-spacing:.05em}#bm-bar-drag{margin-bottom:.5em;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><circle cx="3" cy="3" r="1.5" fill="CornflowerBlue" /></svg>') repeat;cursor:grab;width:100%;height:1em}#bm-bar-drag.dragging{cursor:grabbing}#bm-contain-header{margin-bottom:.5em}#bm-overlay img{display:inline-block;height:2.5em;margin-right:1ch;vertical-align:middle}#bm-overlay h1{display:inline-block;font-size:x-large;font-weight:700;vertical-align:middle}#bm-contain-userinfo,#bm-contain-automation{margin-top:.5em}#bm-contain-automation input[type=checkbox]{vertical-align:middle;margin-right:.5ch}#bm-contain-automation label{margin-right:.5ch}.bm-help{border:white 1px solid;border-radius:1em;height:1.25em;width:1.25em;margin-top:2px;text-align:center;line-height:1.25em}#bm-output-status{font-size:small;background-color:#0003;padding:0 .5ch;height:3.75em;width:100%;margin-top:.5em}

docs/README.md

@@ -9,6 +9,9 @@
   <tr>
     <td>&emsp;&emsp;<a href="#bot-settings">Bot Settings</a></td>
   </tr>
+  <tr>
+    <td>&emsp;&emsp;<a href="#template-settings">Template Settings</a></td>
+  </tr>
   <tr>
     <td>&emsp;<a href="#how-versioning-works">How Versioning Works</a></td>
   </tr>
@@ -18,6 +21,12 @@
   <tr>
     <td>&emsp;<a href="#faq">FAQ</a></td>
   </tr>
+  <tr>
+    <td>&emsp;&emsp;<a href="#how-do-i-hide-the-overlay">How do I hide the overlay?</a></td>
+  </tr>
+  <tr>
+    <td>&emsp;&emsp;<a href="#why-do-game-notifications-appear-on-top-of-the-overlay">Why do game notifications appear on top of the overlay?</a></td>
+  </tr>
 </table>
 
 <h1>Blue Marble</h1>
@@ -26,7 +35,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-69-black?style=flat"></a>
+<a href="" target="_blank"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-72-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.27.2"
+      "version": "0.29.3"
     },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.8",
@@ -467,5 +467,5 @@
       }
     }
   },
-  "version": "0.27.2"
+  "version": "0.29.3"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wplace-bluemarble",
-  "version": "0.29.0",
+  "version": "0.29.3",
   "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.29.0
+// @version      0.29.3
 // @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
@@ -14,7 +14,7 @@
 // @match        *://*.wplace.live/*
 // @grant        GM_getResourceText
 // @grant        GM_addStyle
-// @resource     CSS-Overlay https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/src/overlay.css
+// @resource     CSS-BM-File https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/dist/BlueMarble.user.css
 // ==/UserScript==
 
 // Wplace  --> https://wplace.live

src/main.js

@@ -59,8 +59,8 @@ inject(() => {
   };
 });
 
-// Imports overlay CSS from src folder on github
-const cssOverlay = GM_getResourceText("CSS-Overlay");
+// Imports the CSS file from dist folder on github
+const cssOverlay = GM_getResourceText("CSS-BM-File");
 GM_addStyle(cssOverlay);
 
 // Imports the Roboto Mono font family