From c0bfed834339d987b62a6aa45e45fb7fbed5656e Mon Sep 17 00:00:00 2001
From: memdmp <memdmp@estrogen.zone>
Date: Wed, 14 Jan 2026 01:59:25 +0100
Subject: fix: properly allow js hmr when navigating between pages from the
 index to the skip anim page

---
 src/routes/anim-gen.ts | 50 +++++++++++++++++++++++++-------------------------
 1 file changed, 25 insertions(+), 25 deletions(-)

(limited to 'src/routes/anim-gen.ts')

diff --git a/src/routes/anim-gen.ts b/src/routes/anim-gen.ts
index fcbb23d..1aaaa37 100644
--- a/src/routes/anim-gen.ts
+++ b/src/routes/anim-gen.ts
@@ -20,12 +20,12 @@ import esbuild from 'esbuild';
 const anim = new Animation();
 let ttyCtr = 0;
 const stages = [
-  anim.selector('#bios'),
-  anim.selector('#grub'),
-  anim.selector('#grub-term'),
-  anim.selector('#openrc'),
+  anim.selector('.anmroot #bios'),
+  anim.selector('.anmroot #grub'),
+  anim.selector('.anmroot #grub-term'),
+  anim.selector('.anmroot #openrc'),
   ...ttyLines.flatMap((v) =>
-    v.kind === 'clear' ? [anim.selector('#tty-' + ttyCtr++)] : [],
+    v.kind === 'clear' ? [anim.selector('.anmroot #tty-' + ttyCtr++)] : [],
   ),
 ];
 const visibleStageStyles = `margin-top: 0;
@@ -92,7 +92,7 @@ const biosStepHandlers: Step[] = [
   },
   // Show Start boot option
   (next) => {
-    const s = anim.selector('#bios .start-text');
+    const s = anim.selector('.anmroot #bios .start-text');
     s.style(hiddenStyles);
     anim._internal_timeline.now += 1;
     s.style(visibleStyles);
@@ -103,7 +103,7 @@ const biosStepHandlers: Step[] = [
     .fill(
       (quantity: number, lastQuantity: number, index: number) =>
         (next: () => void) => {
-          const s = anim.selector(`#bios .bar`);
+          const s = anim.selector(`.anmroot #bios .bar`);
           s.style(`${index === 0 ? hiddenStyles : visibleStyles}
 width: ${lastQuantity * 100}vw;`);
           anim._internal_timeline.now += 1;
@@ -115,8 +115,8 @@ width: ${quantity * 100}vw;`);
     .map((v, i, a) => v((i + 1) / a.length, i / a.length, i)),
   // Show bdsdxe
   (next) => {
-    const s1 = anim.selector('#bios .bdsdxe-load');
-    const s2 = anim.selector('#bios .bdsdxe-start');
+    const s1 = anim.selector('.anmroot #bios .bdsdxe-load');
+    const s2 = anim.selector('.anmroot #bios .bdsdxe-start');
     s1.style(hiddenStyles);
     s2.style(hiddenStyles);
     anim._internal_timeline.now += 1;
@@ -135,8 +135,8 @@ const grubStepHandlers: Step[] = [
   },
   // Hide 2s, show 1s
   (next) => {
-    const g2s = anim.selector('#grub .grub-2s');
-    const g1s = anim.selector('#grub .grub-1s');
+    const g2s = anim.selector('.anmroot #grub .grub-2s');
+    const g1s = anim.selector('.anmroot #grub .grub-1s');
     g2s.style('width:max-content;opacity:1;');
     g1s.style('width:0;opacity:0;');
     anim._internal_timeline.now += 1;
@@ -150,14 +150,14 @@ const grubStepHandlers: Step[] = [
     anim.in(100, next);
   },
   (next) => {
-    const s = anim.selector('#grub-term .load-kernel');
+    const s = anim.selector('.anmroot #grub-term .load-kernel');
     s.style(hiddenStyles);
     anim._internal_timeline.now += 1;
     s.style(visibleStyles);
     anim.in(200, next);
   },
   (next) => {
-    const s = anim.selector('#grub-term .load-ramdisk');
+    const s = anim.selector('.anmroot #grub-term .load-ramdisk');
     s.style(hiddenStyles);
     anim._internal_timeline.now += 1;
     s.style(visibleStyles);
@@ -282,7 +282,7 @@ const openrcStepHandlers = (multi: number): Step[] => [
   ]
     .map((v) => v / multi)
     .map((time, idx, arr) => (next: () => void) => {
-      const s = anim.selector('#openrc .openrc-boot-step-' + idx);
+      const s = anim.selector('.anmroot #openrc .openrc-boot-step-' + idx);
       s.style(`${hiddenStyles}
 max-height: 0;`);
       if (idx === arr.length - 1) {
@@ -299,16 +299,16 @@ max-height: 0;`);
       s.style(`${visibleStyles}
 max-height: max-content;`);
       if (idx === arr.length - 1) {
-        idleTypingBar(anim.selector('#openrc .openrc-username-anim'), time);
+        idleTypingBar(anim.selector('.anmroot #openrc .openrc-username-anim'), time);
       }
       anim.in(time, next);
     }),
   // Typing Username
   ...(() => {
-    const typingBar = anim.selector('#openrc .openrc-username-anim');
+    const typingBar = anim.selector('.anmroot #openrc .openrc-username-anim');
     return login.username.split('').map((_, i) => {
       const character = anim.selector(
-        `#openrc .openrc-username .openrc-username-char.openrc-username-char-${i}`,
+        `.anmroot #openrc .openrc-username .openrc-username-char.openrc-username-char-${i}`,
       );
       return (next: () => void) =>
         typeCharacter(typingBar, character, next, getDelay(login));
@@ -317,7 +317,7 @@ max-height: max-content;`);
   // Hide Username Cursor
   (next) => {
     const s = anim.selector(
-      '#openrc .openrc-hide-at-login-prompt-username-done',
+      '.anmroot #openrc .openrc-hide-at-login-prompt-username-done',
     );
     s.style(`transform:none;width:max-content;opacity:1;`);
     anim._internal_timeline.now += 1;
@@ -326,7 +326,7 @@ max-height: max-content;`);
   },
   // Show Password
   (next) => {
-    const s = anim.selector('#openrc .openrc-pw-line');
+    const s = anim.selector('.anmroot #openrc .openrc-pw-line');
     s.style(`transform:scaleX(0);width:0;opacity:0;`);
     anim._internal_timeline.now += 1;
     s.style(`transform:none;width:max-content;opacity:1;`);
@@ -335,13 +335,13 @@ max-height: max-content;`);
   // Password Typing
   ...new Array(login.passwordLength)
     .fill((_idx: number) => (next: () => void) => {
-      const s = anim.selector('#openrc .openrc-password-anim');
+      const s = anim.selector('.anmroot #openrc .openrc-password-anim');
       const characterTime = getDelay(login);
       typeCharacter(s, null, next, characterTime);
     })
     .map((v, i) => v(i)),
   (next) => {
-    const s = anim.selector('#openrc .openrc-password-anim');
+    const s = anim.selector('.anmroot #openrc .openrc-password-anim');
     s.style('opacity:0;transform:scaleX(0);');
     anim.in(1, next);
   },
@@ -349,7 +349,7 @@ max-height: max-content;`);
 const ttyStepHandlers: Step[] = [
   (next) => anim.in(100, next),
   (next) => {
-    const s = anim.selector(`#openrc .ttylines-openrc`);
+    const s = anim.selector(`.anmroot #openrc .ttylines-openrc`);
     s.style(altHiddenStyles);
     anim.in(1, () => {
       s.style(altVisibleStyles);
@@ -363,7 +363,7 @@ const ttyStepHandlers: Step[] = [
       switch (step.kind) {
         case 'text': {
           const s = anim.selector(
-            `${isBeforeFirstClear ? '#openrc' : '#tty-' + (ttyIdx - 1)} ${step.classes
+            `.anmroot ${isBeforeFirstClear ? '#openrc' : '#tty-' + (ttyIdx - 1)} ${step.classes
               .map((v) => `.${v}`)
               .join('')}`,
           );
@@ -376,7 +376,7 @@ const ttyStepHandlers: Step[] = [
         }
         case 'removeNode': {
           const s = anim.selector(
-            `${isBeforeFirstClear ? '#openrc' : '#tty-' + (ttyIdx - 1)} ${step.removedItemClassList
+            `.anmroot ${isBeforeFirstClear ? '#openrc' : '#tty-' + (ttyIdx - 1)} ${step.removedItemClassList
               .map((v) => `.${v}`)
               .join('')}`,
           );
@@ -418,7 +418,7 @@ const handleSteps: Step[] = [
   ...openrcStepHandlers(1),
   ...ttyStepHandlers,
   (n) => {
-    const s = anim.selector('#app .hidden-after-anim');
+    const s = anim.selector('.anmroot #app .hidden-after-anim');
     s.style(visibleStyles);
     anim._internal_timeline.now += 1;
     s.style(hiddenStyles);
-- 
cgit v1.2.3