diff --git a/css/main.css b/css/main.css
index 7291029..8b13789 100644
--- 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
index d5f9dd5..95b6b3f 100644
--- 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
new file mode 100644
index 0000000..7291029
--- /dev/null
+++ 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
index e011b9f..650b5b4 100644
--- a/index.html
+++ b/index.html
@@ -2,12 +2,7 @@
Lightshowz lol
-
-
-
-
-
-
+
diff --git a/js/Main.js b/js/Main.js
deleted file mode 100644
index 737068f..0000000
--- a/js/Main.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/* Main.js */
-import VortexLib from './VortexLib.js';
-import VortexEditor from './VortexEditor.js';
-
-// Dynamically load the ESPTool package
-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"
-);
-
-// Instantiate VortexLib webassembly module
-VortexLib().then(vortexLib => {
- // Instantiate the VortexEditor
- const vortexEditor = new VortexEditor(vortexLib);
- // and initialize it
- vortexEditor.initialize();
-});
diff --git a/js/VortexEditor.js b/js/VortexEditor.js
index 991fdb4..2b99955 100644
--- 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,7 +175,6 @@ 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
@@ -179,16 +182,47 @@ export default class VortexEditor {
});
}
+ 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/pako@2.1.0/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();
+});