UI changes

src/createTemplate.html

@@ -1,13 +1,17 @@
 <!-- body -->
   <div id="bm-create-template">
-    <h1>Create new template</h1>
+    <header>
+      <div id="bm-bar-drag"></div>
+      <h1>Create new template</h1>
+      <button id="close"><!-- Add cross icon --></button>
+    </header>
     <hr />
     <form>
         <label>
             Name:
             <input type="text" id="name"/>
         </label>
-        <div id="coords">
+        <div id="coords-container">
             <button type="button" id="coords">Get coords from pixel</button>
             <input type="text">
             <input type="text">

src/createTemplate.ts

@@ -0,0 +1,57 @@
+import { TBlueMarbleTemplate } from "../types/schemas";
+import { dataManager } from "./main";
+import { generateUUID } from "./utils";
+
+let selectedFile: Blob = new Blob()
+
+function getCoords(): number[]{
+    // Get coordinates of clicked on pixel
+    return []
+}
+
+function setCoords(){
+    const coordsContainer = document.querySelector("#bm-create-template #coords-container");
+    if(!coordsContainer){ return }
+    const coords = getCoords();
+    let index = 0;
+    coordsContainer.childNodes.forEach((childNode: ChildNode) => {
+        if(childNode.nodeName.toLocaleUpperCase() == "INPUT"){
+            (childNode as HTMLInputElement).value = coords[index].toString();
+            index++;
+        }
+    });
+}
+
+function getFormData(): TBlueMarbleTemplate | undefined{
+    const coordsContainer = document.querySelector("#bm-create-template #coords-container");
+    if(!coordsContainer){ return }
+    const nameInput = document.querySelector("#bm-create-template input#name")
+    if(!nameInput || nameInput.nodeName !== "INPUT"){ return }
+    if(selectedFile.size <= 0){ return }
+    
+    let coords: number[] = [];
+    coordsContainer.childNodes.forEach((childNode: ChildNode) => {
+    if(childNode.nodeName.toLocaleUpperCase() == "INPUT"){
+        try{
+            coords.push(Number((childNode as HTMLInputElement).value))
+        }catch(err){}
+    }
+    });
+    if(coords.length !== 4){ return }
+
+
+    return {
+        coords: coords,
+        enabled: false,
+        uuid: generateUUID(),
+        name: (nameInput as HTMLInputElement).value,
+        authorID: 0, // Add getting the actual author id
+        urlLink: "" // MAKE DATA URL!!
+    }
+}
+
+function createTemplate(){
+    const data = getFormData();
+    if(!data){ return }
+    dataManager.addTemplate(data);
+}

src/index.ts

@@ -1,2 +0,0 @@
-window.charity
-charity

src/main.html

@@ -1,86 +0,0 @@
-<!-- body -->
-<div id="bm-overlay" style="top: 10px; right: 75px">
-  <header id="bm-contain-header">
-    <div id="bm-bar-drag">
-      <img
-        src="https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/dist/assets/Favicon.png"
-        alt="Blue Marble Icon - Click to minimize/maximize"
-        style="cursor: pointer"
-        onclick="VAR_clickfunc"
-      />
-      <h1>VAR_name</h1>
-    </div>
-    <hr />
-    <div id="bm-contain-userinfo">
-      <p id="bm-user-name">Name:</p>
-      <p id="bm-user-droplets">Droplets:</p>
-      <p id="bm-user-nextlevel">Next level in...</p>
-    </div>
-    <hr />
-    <section id="bm-contain-automation">
-      <div id="bm-contain-coords">
-        <button id="bm-button-coords" class="bm-help" style="margin-top: 0">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 6">
-            <circle cx="2" cy="2" r="2"></circle>
-            <path d="M2 6 L3.7 3 L0.3 3 Z"></path>
-            <circle cx="2" cy="2" r="0.7" fill="white"></circle>
-          </svg>
-        </button>
-        <input
-          type="number"
-          id="bm-input-tx"
-          placeholder="Tl X"
-          min="0"
-          max="2047"
-          step="1"
-          required="true"
-        />
-        <input
-          type="number"
-          id="bm-input-ty"
-          placeholder="Tl Y"
-          min="0"
-          max="2047"
-          step="1"
-          required="true"
-        />
-        <input
-          type="number"
-          id="bm-input-px"
-          placeholder="Px X"
-          min="0"
-          max="2047"
-          step="1"
-          required="true"
-        />
-        <input
-          type="number"
-          id="bm-input-py"
-          placeholder="Px Y"
-          min="0"
-          max="2047"
-          step="1"
-          required="true"
-        />
-      </div>
-      <label>
-        Upload Template
-        <input
-          id="bm-input-file-template"
-          type="file"
-          accept="image/png, image/jpeg, image/webp, image/bmp, image/gif"
-        />
-      </label>
-      <div id="bm-contain-buttons-template">
-        <button id="bm-button-enable">Enable</button>
-        <button id="bm-button-create">Create</button>
-        <button id="bm-button-disable">Disable</button>
-      </div>
-      <textarea id="overlayMain.outputStatusId" placeholder="Status: Sleeping...\nVersion: {version}" readonly></textarea>
-      <div id="bm-contain-buttons-action">
-        <button id="bm-button-convert" class="bm-help" title="Template Color Converter">🎨</button>
-        <p style="margin-top: auto">Made by SwingTheVine</p>
-      </section>
-    </div>
-  </header>
-</div>

src/mainOverlay.html

@@ -0,0 +1,30 @@
+<!-- body -->
+<div id="bm-main-overlay" style="top: 10px; right: 75px">
+    <header>
+      <div id="bm-bar-drag"></div>
+      <h1>Blue Marble</h1>
+      <button id="close"><!-- Add cross icon --></button>
+    </header>
+    <hr />
+    <table>
+      <tr>
+        <td>Name: </td>
+        <td id="name"></td>
+      </tr>
+      <tr>
+        <td>Droplets: </td>
+        <td id="droplets"></td>
+      </tr>
+      <tr>
+        <td>Next level in... </td>
+        <td id="next-level"></td>
+      </tr>
+    </table>
+    <div>
+      <button id="manage-templates">Manage templates</button>
+      <button id="manage-links">Manage links</button>
+    </div>  
+    <hr />
+    <p style="margin-top: auto">Made by SwingTheVine</p>
+    </div>
+</div>

src/mainOverlay.ts

@@ -0,0 +1,9 @@
+import UIManager from "./uiManager";
+
+function openManTemplates(){
+    UIManager.open("bm-manage-templates")
+}
+
+function openManLinks(){
+    UIManager.open("bm-manage-links")
+}

src/manageLinks.html

@@ -1,6 +1,10 @@
 <!-- body -->
  <div id="bm-manage-links">
-    <h1>Template manager</h1>
+    <header>
+      <div id="bm-bar-drag"></div>
+      <h1>Links manager</h1>
+      <button id="close"><!-- Add cross icon --></button>
+    </header>    
     <hr />
     <label>
         URL: 

src/manageLinks.ts

@@ -25,14 +25,7 @@ function save(){
 
     try{
         const url = new URL((urlInput as HTMLInputElement).value);
-        if(dataManager.getType() !== "BM"){ dataManager.toBlueMarbleSchema() }
-        const temp = dataManager.get() as TBlueMarbleJSON;
-        dataManager.update({
-            ...temp,
-            links: [{
-                url: url.toString(),
-            }]
-        })
+        dataManager.addLink({ url: url.toString() })
 
         reload()
     }catch(err){

src/manageTemplates.html

@@ -1,6 +1,10 @@
 <!-- body -->
  <div id="bm-manage-templates">
-    <h1>Template manager</h1>
+    <header>
+      <div id="bm-bar-drag"></div>
+      <h1>Template manager</h1>
+      <button id="close"><!-- Add cross icon --></button>
+    </header>    
     <hr />
     <button id="create">Create new template</button>
     <button id="export-all">Export all</button>

src/overlay.css

@@ -1,7 +1,7 @@
 /* @since 0.5.1 */
 
 /* The entire overlay */
-#bm-overlay {
+#bm-main-overlay {
   position: fixed;
   background-color: rgba(21, 48, 99, 0.9);
   color: white;
@@ -21,14 +21,14 @@
 
 /* Smooth transitions for minimize/maximize functionality */
 #bm-contain-userinfo,
-#bm-overlay hr,
+#bm-main-overlay hr,
 #bm-contain-automation, 
 #bm-contain-buttons-action {
   transition: opacity 0.2s ease, height 0.2s ease;
 }
 
 /* The entire overlay BUT it is cascading */
-div#bm-overlay {
+div#bm-main-overlay {
   /* Font stack is as follows:
    * Highest Priority (Roboto Mono)
    * Windows fallback (Courier New)
@@ -56,7 +56,7 @@ div#bm-overlay {
 }
 
 /* Disable interactions during drag for better performance */
-#bm-overlay:has(#bm-bar-drag.dragging) {
+#bm-main-overlay:has(#bm-bar-drag.dragging) {
   pointer-events: none;
   user-select: none;
   -webkit-user-select: none;
@@ -83,14 +83,14 @@ div#bm-overlay {
 }
 
 /* Ensure overlay maintains consistent width when minimized */
-#bm-overlay[style*="padding: 5px"] {
+#bm-main-overlay[style*="padding: 5px"] {
   width: auto !important;
   max-width: 300px;
   min-width: 200px;
 }
 
 /* The Blue Marble image */
-#bm-overlay img {
+#bm-main-overlay img {
   display: inline-block;
   height: 2.5em;
   margin-right: 1ch;
@@ -112,7 +112,7 @@ div#bm-overlay {
 }
 
 /* The Blue Marble header */
-#bm-overlay h1 {
+#bm-main-overlay h1 {
   display: inline-block;
   font-size: x-large;
   font-weight: bold;
@@ -138,7 +138,7 @@ div#bm-overlay {
   margin-top: 2px;
   text-align: center;
   line-height: 1em;
-  padding: 0 !important; /* Overrides the padding in "#bm-overlay button" */
+  padding: 0 !important; /* Overrides the padding in "#bm-main-overlay button" */
 }
 
 /* Pin button */
@@ -239,7 +239,7 @@ input[type="file"][id*="template"] {
 }
 
 /* All small elements */
-#bm-overlay small {
+#bm-main-overlay small {
   font-size: x-small;
   color: lightgray;
 }
@@ -255,24 +255,24 @@ div:has(> #bm-input-file-template),
 }
 
 /* All overlay buttons */
-#bm-overlay button {
+#bm-main-overlay button {
   background-color: #144eb9;
   border-radius: 1em;
   padding: 0 0.75ch;
 }
 
 /* All overlay buttons when hovered/focused */
-#bm-overlay button:hover, #bm-overlay button:focus-visible {
+#bm-main-overlay button:hover, #bm-main-overlay button:focus-visible {
   background-color: #1061e5;
 }
 
 /* All overlay buttons when pressed (plus disabled color) */
-#bm-overlay button:active,
-#bm-overlay button:disabled {
+#bm-main-overlay button:active,
+#bm-main-overlay button:disabled {
   background-color: #2e97ff;
 }
 
 /* All overlay buttons when disabled */
-#bm-overlay button:disabled {
+#bm-main-overlay button:disabled {
   text-decoration: line-through;
 }

src/uiManager.ts

@@ -1 +1,20 @@
-window.charity
+import { WindowNames } from "../types/types";
+const DISPLAY_DEFAULTS: Record<WindowNames, string> = {
+    "bm-create-template": "flex",
+    "bm-main-overlay": "flex",
+    "bm-manage-links": "flex",
+    "bm-manage-templates": "flex"
+}
+export default class UIManager{
+    /**Hides the "window" with the corresponding id */
+    static close(windowName : WindowNames){
+        const bmWindow = document.querySelector(windowName);
+        if(bmWindow){ (bmWindow as HTMLElement).style.display = "none" }
+    }
+    /**Displays the "window" with the corresponding id */
+    static open(windowName: WindowNames){
+        const bmWindow = document.querySelector(windowName);
+        if(bmWindow){ (bmWindow as HTMLElement).style.display = DISPLAY_DEFAULTS[windowName] }
+    }
+}
+

src/utils.ts

@@ -22,4 +22,9 @@ export function download(data: any){
     } catch (err) {
         console.error("An error occurded while exporting the templates: ", err);
     }
+}
+
+export function generateUUID(): string{
+    // Add actual uuid logic
+    return "balahajaa";
 }

types/types.ts

@@ -1,4 +1,5 @@
 import { TBlueMarbleJSON, TCharityJSON } from "./schemas";
 
 export type Schemas = TCharityJSON | TBlueMarbleJSON;
-export type SchemaTypeNames = "CHA" | "BM" | "N/A"; // Charity, BlueMarble or unknown
+export type SchemaTypeNames = "CHA" | "BM" | "N/A"; // Charity, BlueMarble or unknown
+export type WindowNames = "bm-manage-templates" | "bm-manage-links" | "bm-create-template" | "bm-main-overlay"