refactor entrypoint

Unreal-Dan · Dec 26, 2024 · aa972b0 · aa972b0
1 parent d4c018c
commit aa972b0
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 123 deletions.
diff --git a/css/main.css b/css/main.css
@@ -1,91 +1 @@
-/* Base styles */
-* {
-  user-select: none;
-}
-
-body {
-  background-color: black;
-  font-family: Arial, sans-serif;
-  margin: 0;
-  padding: 0;
-}
-
-a:hover {
-  cursor: pointer;
-}
-
-canvas {
-  position: absolute;
-  z-index: 1;
-}
-
-/* Shared Button Styles */
-button {
-  background-color: #202020;
-  color: #d8d4cf;
-  border: 1px solid #454545;
-  border-radius: 4px;
-  padding: 8px 10px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  font-size: 20px;
-  width: 52px;
-}
-
-button:hover {
-  background-color: #3e4446;
-}
-
-/* Form Elements */
-fieldset {
-  border: 1px solid #3e4446;
-  border-radius: 5px;
-  margin-bottom: 5px;
-  padding: 10px;
-}
-
-legend {
-  color: #d8d4cf;
-  padding: 0 5px;
-}
-
-i {
-  color: #fff; /* Ensuring the icons are white */
-}
-
-.icon-button {
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: 4px;
-  background-color: #333;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  color: inherit;
-  font-size: 20px;
-  cursor: pointer;
-  padding: 5px;
-  transition: background-color 0.2s;
-  transition: transform 0.2s, color 0.2s;
-}
-
-.icon-button:hover {
-  background-color: #444;
-  color: #66ff66;
-  transform: scale(1.1);
-}
-
-.icon-button:active {
-  background-color: #555;
-  transform: scale(1);
-}
-
-.icon-button {
-}
-
-.icon-button i {
-  pointer-events: none; /* Prevent accidental selection of the icon */
-}
-
 
diff --git a/css/styles.css b/css/styles.css
@@ -1,7 +1,6 @@
-@import url('main.css');
+@import url('vortex-editor.css');
 @import url('notification.css');
 @import url('panel.css');
-
 @import url('about-panel.css');
 @import url('animation-panel.css');
 @import url('chromalink-panel.css');

diff --git a/css/vortex-editor.css b/css/vortex-editor.css
@@ -0,0 +1,91 @@
+/* Base styles */
+* {
+  user-select: none;
+}
+
+body {
+  background-color: black;
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+a:hover {
+  cursor: pointer;
+}
+
+canvas {
+  position: absolute;
+  z-index: 1;
+}
+
+/* Shared Button Styles */
+button {
+  background-color: #202020;
+  color: #d8d4cf;
+  border: 1px solid #454545;
+  border-radius: 4px;
+  padding: 8px 10px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  font-size: 20px;
+  width: 52px;
+}
+
+button:hover {
+  background-color: #3e4446;
+}
+
+/* Form Elements */
+fieldset {
+  border: 1px solid #3e4446;
+  border-radius: 5px;
+  margin-bottom: 5px;
+  padding: 10px;
+}
+
+legend {
+  color: #d8d4cf;
+  padding: 0 5px;
+}
+
+i {
+  color: #fff; /* Ensuring the icons are white */
+}
+
+.icon-button {
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 4px;
+  background-color: #333;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  color: inherit;
+  font-size: 20px;
+  cursor: pointer;
+  padding: 5px;
+  transition: background-color 0.2s;
+  transition: transform 0.2s, color 0.2s;
+}
+
+.icon-button:hover {
+  background-color: #444;
+  color: #66ff66;
+  transform: scale(1.1);
+}
+
+.icon-button:active {
+  background-color: #555;
+  transform: scale(1);
+}
+
+.icon-button {
+}
+
+.icon-button i {
+  pointer-events: none; /* Prevent accidental selection of the icon */
+}
+
+
diff --git a/index.html b/index.html
@@ -2,12 +2,7 @@
 <html lang="en">
   <head>
     <title>Lightshowz lol</title>
-    <script type="module" src="js/Main.js"></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
-    <link rel="stylesheet" type="text/css" href="css/styles.css">
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pako.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+    <script type="module" src="js/VortexEditor.js"></script>
   </head>
   <body>
   </body>

diff --git a/js/Main.js b/js/Main.js
diff --git a/js/VortexEditor.js b/js/VortexEditor.js
@@ -14,6 +14,7 @@ import WelcomePanel from './WelcomePanel.js';
 import ChromalinkPanel from './ChromalinkPanel.js';
 import UpdatePanel from './UpdatePanel.js';
 import Notification from './Notification.js';
+import VortexLib from './VortexLib.js';
 
 export default class VortexEditor {
   constructor(vortexLib) {
@@ -104,7 +105,10 @@ export default class VortexEditor {
     };
   }
 
-  initialize() {
+  async initialize() {
+    // Load dependencies
+    await this.loadDependencies();
+
     // Start the lightshow
     this.lightshow.start();
 
@@ -171,24 +175,54 @@ export default class VortexEditor {
       if (isNowMobile !== this.isMobile) {
         // when switching from mobile to non mobile update the layout
         this.isMobile = isNowMobile;
-        this.updateStylesheet(this.isMobile);
         this.applyLayout();
       }
       // always shift the lightshow to be centered
       this.lightshow.resetToCenter();
     });
   }
 
+  async loadDependencies() {
+    this.loadStylesheet("mainStyles", "css/styles.css");
+    this.loadStylesheet("fontsAwesomeStyles", "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css");
+    await this.loadScript("pako", "https://cdn.jsdelivr.net/npm/[email protected]/dist/pako.min.js");
+    await this.loadScript("jszip", "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js");
+
+    // Dynamically load ESPTool
+    window.esptoolPackage = await import(
+      window.location.hostname === "localhost"
+      ? "/dist/web/index.js"
+      : "https://cdn.jsdelivr.net/gh/adafruit/Adafruit_WebSerial_ESPTool@latest/dist/web/index.js"
+    );
+  }
+
+  // Utility to dynamically load a script
+  loadScript(name, src, isModule = false) {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = src;
+      script.id = name;
+      if (isModule) script.type = 'module';
+      script.onload = resolve;
+      script.onerror = reject;
+      document.head.appendChild(script);
+    });
+  }
+
+  // Utility to dynamically load a stylesheet
+  loadStylesheet(name, href) {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.id = name;
+    link.href = href;
+    document.head.appendChild(link);
+  }
+
   detectMobile() {
     const userAgent = navigator.userAgent || navigator.vendor || window.opera;
     return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent) || window.innerWidth < 1200;
   }
 
-  updateStylesheet(isMobile) {
-    const layoutStylesheet = document.getElementById('layoutStylesheet');
-    layoutStylesheet.href = isMobile ? 'css/mobile_styles.css' : 'css/styles.css';
-  }
-
   applyLayout() {
     if (this.isMobile) {
       this.applyMobileLayout();
@@ -335,3 +369,9 @@ export default class VortexEditor {
   }
 }
 
+// Main initialization of VortexLib and Vortex Editor
+VortexLib().then(async (vortexLib) => {
+  // Instantiate and initialize VortexEditor
+  const vortexEditor = new VortexEditor(vortexLib);
+  await vortexEditor.initialize();
+});