Fix output data structure

This naming is very bad and it confused me
oops

package.json

@@ -1,6 +1,6 @@
 {
   "name": "colormatic-website",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "type": "module",
   "scripts": {
     "dev": "vite dev",

src/component/bg.svelte

@@ -7,15 +7,22 @@
 
   let { darkTheme = $bindable() } = $props();
   let timeScale = 1;
+  let animated = false;
 
   $effect(() => {
     darkTheme;
 
     for (let i = 0; i < gradients.length; i++) {
+      // This re-renders each gradient so their new color will be correct
       let gradient = gradients[i];
       gradient.color = getRandomColor();
       gradient.prepareBuffer();
     }
+
+    if (!animated && ctx) {
+      // Don't try to render if ctx hasn't initialized yet
+      render();
+    }
   });
 
   let particleImages: { [key: string]: HTMLImageElement } = {};
@@ -58,8 +65,13 @@
         return {};
       });
 
+    Promise.all(Object.values(imagePromises)).then(() => {
+      render();
+    });
+
     resize();
     init();
+    render();
     animate();
 
     window.addEventListener("resize", resize);
@@ -70,6 +82,10 @@
     canvas.height = window.innerHeight;
 
     canvasDpiScaler(canvas, ctx);
+
+    if (!animated) {
+      render();
+    }
   }
 
   const clamp = (val: number, min: number, max: number) =>
@@ -190,7 +206,7 @@
       ctx.save();
       // The source images are black, so we are inverting them
       // different amounts to get different shades of gray
-      ctx.filter = darkTheme ? "invert(0.15)" : "invert(0.8)";
+      ctx.filter = darkTheme ? "invert(0.1)" : "invert(0.9)";
 
       // Draw center of rotation
       // ctx.beginPath();
@@ -286,14 +302,14 @@
   }
 
   function init() {
-    /*/
-     * Calculate the proper amount of particles
-     * 25920 is our constant, equal to x in (1080*1920)/x = 80
-     * Because the subjectively correct amount of particles for a 1080p
-     * display is 80, so to calculate the proper amount for any window size,
-     * just do (width * height) / 25920
-    /*/
-    let particleCount = (window.innerWidth * window.innerHeight) / 25920;
+    let isMobile = /Mobile|Android|iPhone/i.test(navigator.userAgent);
+    let particleCount: number;
+    if (isMobile) {
+      particleCount = 25;
+    }
+    else {
+      particleCount = 40;
+    }
 
     particles = [];
     for (let i = 0; i < particleCount; i++) {
@@ -305,7 +321,7 @@
     }
   }
 
-  function animate() {
+  function render() {
     ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
 
     for (let i_gradient = 0; i_gradient < gradients.length; i_gradient++) {
@@ -319,6 +335,12 @@
       particle.update();
       particle.draw();
     }
+  }
+
+  function animate() {
+    if (animated) {
+      render();
+    }
 
     requestAnimationFrame(animate);
   }

src/component/navbar.svelte

@@ -51,7 +51,7 @@ Svelte modal example, https://svelte.dev/playground/modal
 
 <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
 <span onclick={modalMenuProcessClick} bind:this={pages} class="modalbg hidden">
-  <div class={darkTheme ? "dark-theme" : ""}>
+  <div class={darkTheme() ? "dark-theme" : ""}>
     <button onclick={toggleModalMenu} class="close" aria-label="Close">
       <i class="bi bi-x"></i>
     </button>

src/routes/+layout.svelte

@@ -17,7 +17,7 @@
   let darkTheme = $state(false);
 
   /*/
-   * This is necesarry for pages to read the theme,
+   * This is necessary for pages to read the theme,
    * sucks that we have to use an anonymous function
    * just to grab a variable
   /*/

src/routes/+layout.ts

@@ -1,2 +1,5 @@
 export const prerender = true;
 export const csr = true;
+
+export const trailingSlash = "always";
+// This will output directories containing index.html

src/script/cookie.ts

@@ -1,7 +1,12 @@
 // The magic cookie system is so stupid
 
-export function setCookie(cname: string, cvalue: string) {
-	document.cookie = cname + "=" + cvalue + ";";
+export function setCookie(
+	cname: string,
+	cvalue: string,
+	sameSite: string = "Lax",
+) {
+	document.cookie =
+		cname + "=" + cvalue + ";" + "SameSite" + "=" + sameSite + ";";
 }
 
 // Credit: https://www.w3schools.com/js/js_cookies.asp