diff options
Diffstat (limited to 'src/routes/anim-gen.ts')
| -rw-r--r-- | src/routes/anim-gen.ts | 50 |
1 files changed, 25 insertions, 25 deletions
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); |