From 114dc8c8549a4a1271d43c42c7931209b5a9f5b5 Mon Sep 17 00:00:00 2001 From: memdmp Date: Wed, 12 Mar 2025 15:04:31 +0100 Subject: feat: properly handle skip-animation --- src/routes/+page.svelte | 417 +---------------------------- src/routes/IndexPage.svelte | 462 +++++++++++++++++++++++++++++++++ src/routes/anim-gen.ts | 223 ++++++++-------- src/routes/skip-animation/+page.svelte | 3 +- 4 files changed, 584 insertions(+), 521 deletions(-) create mode 100644 src/routes/IndexPage.svelte diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index b5c8d91..f70592b 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -12,421 +12,10 @@ * You should have received a copy of the GNU Affero General Public License along with this program. If not, see . */ --> + - - /~mem/ - - - -{#snippet tagLeft(colour: string)} - * -{/snippet} -{#snippet okTagLeft()} - {@render tagLeft('#51f051')} -{/snippet} -{#snippet tagRight(innerText: string, innerColour: string)} - [ - {innerText} - ] -{/snippet} -{#snippet okTagRight()} - {@render tagRight('ok', '#51f051')} -{/snippet} -{#snippet okLine(text: string, classes?: string, rightClass?: string)} -
-
- {@render okTagLeft()} - {text} -
-
- {@render okTagRight()} -
-
-{/snippet} -{#snippet ttyTextInnerRenderer(section: RenderBlock)} - {#if section.raw}{@html section.value}{:else}{#each section.value - .split('\n') - .map( (l, i, a) => (i === a.length - 1 ? [0, l] : [1, l]), ) as [nl, l]}{l}{#if nl}
{/if}{/each}{/if} -{/snippet} -{#snippet ttyTextMiddleRenderer( - section: RenderBlock, - line: TTYText & { kind: 'text' }, -)} - {#if section.url} - {#if typeof section.url === 'string'} - {#if section.url.startsWith('newtab:')} - {@const url = section.url.substring(7)} - {@render ttyTextInnerRenderer(section)} - {:else if section.url.startsWith('currenttab:')} - {@const url = section.url.substring(11)} - {@render ttyTextInnerRenderer(section)} - {:else} - ERR: Unknown Link Format - {/if} - {:else} - - typeof section.url !== 'function' ? void 0 : section.url(line)} - onkeypress={() => - typeof section.url !== 'function' ? void 0 : section.url(line)} - role="link" - tabindex="0">{@render ttyTextInnerRenderer(section)} - {/if} - {:else} - {@render ttyTextInnerRenderer(section)} - {/if} -{/snippet} -{#snippet ttyText(line: TTYText)} - {#if line.kind === 'text'} - {#if (line.renderrestriction ?? 'everywhere') === 'everywhere' || line.renderrestriction === 'noscript' || (line.renderrestriction === 'js-only' && isScripted)} - {#if line.renderrestriction === 'noscript'} - - {:else} - {#each line.value as v}{@render ttyTextMiddleRenderer( - v, - line, - )}{/each} - {/if} - {/if} - {/if} -{/snippet} - - - -
-
-
-
-

- BdsDxe: loading Boot0002 "UEFI Misc Device" from PciRoot - (0x0)/Pci(0x2,0x4)/Pci(0x0,0x0)
- BdsDxe: starting Boot0002 "UEFI Misc Device" from PciRoot - (0x0)/Pci(0x2,0x4)/Pci(0x0,0x0) -

-
-
-
- Bootloader Logo -
-
-
Start boot option
-
- - -`)}");background-size:contain;`} - >
-
-
-
-
-

- GNU GRUB  version 2.12 -

-
-
- *Alpine Linux {versions.alpine.number}, with {versions.kernel - .humanReadable} -
-
-  UEFI Firmware Setup -
-
-

- - Use the ↑ and ↓ keys to select which entry is highlighted.
- Press enter to boot the selected OS, `e' to edit the commands before booting - or `c' for a command-line.
- - The highlighted entry will be executed automatically in - 21s. -

-
-
-
-

-   Booting `Alpine Linux {versions.alpine.number}, with {versions - .kernel.humanReadable}'

Loading {versions.kernel.humanReadable} ...
Loading initial ramdisk ... -

-
- -
-
-
-
-   OpenRC - {versions.openrc} - is starting up Linux - {versions.kernel.id} ({architecture}) -
-
​
- {@render okLine('/proc/ is already mounted')} - {@render okLine('Mounting /run ...')} - {@render okLine('/run/openrc: creating directory')} - {@render okLine('/run/lock: creating directory', 'openrc-boot-step-1')} - {@render okLine('/run/lock: correcting owner', 'openrc-boot-step-1')} - {@render okLine('Caching service dependencies ...', 'openrc-boot-step-1')} - {@render okLine('Remounting devtmpfs on /dev ...', 'openrc-boot-step-2')} - {@render okLine('Mounting /dev/mqueue ...', 'openrc-boot-step-3')} - {@render okLine('Mounting security filesystem ...', 'openrc-boot-step-4')} - {@render okLine('Mounting debug filesystem ...', 'openrc-boot-step-5')} - {@render okLine( - 'Mounting persistent storage (pstore) filesystem ...', - 'openrc-boot-step-5', - )} - {@render okLine('Mounting efivarfs filesystem ...', 'openrc-boot-step-5')} - {@render okLine('Starting busybox mdev ...', 'openrc-boot-step-6')} - {@render okLine('Scanning hardware for mdev ...', 'openrc-boot-step-6')} - {@render okLine('Loading hardware drivers ...', 'openrc-boot-step-7')} - {@render okLine('Loading modules ...', 'openrc-boot-step-8')} - {@render okLine( - 'Setting system clock using the hardware clock [UTC] ...', - 'openrc-boot-step-9', - )} - {@render okLine('Checking local filesystems ...', 'openrc-boot-step-10')} -
- /dev/mapper/bepis: clean, {fsckFileCount}/{fsckTotalCount} files, {blocksCount}/{blocksTotal} - blocks -
- {@render okLine( - 'Remounting root filesystem read/write ...', - 'openrc-boot-step-12', - )} - {@render okLine('Remounting filesystems ...', 'openrc-boot-step-13')} - {@render okLine('Activating swap devices ...', 'openrc-boot-step-14')} - {@render okLine('Mounting local filesystems ...', 'openrc-boot-step-15')} - {@render okLine( - 'Configuring kernel parameters ...', - 'openrc-boot-step-16', - )} - {@render okLine('Creating user login records ...', 'openrc-boot-step-17')} - {@render okLine('Setting hostname ...', 'openrc-boot-step-18')} - {@render okLine('Setting keymap ...', 'openrc-boot-step-19')} - {@render okLine('Starting networking ...', 'openrc-boot-step-20')} - {@render okLine('\xa0\xa0lo ...', 'openrc-boot-step-21')} - {@render okLine('\xa0\xa0eth0 ...', 'openrc-boot-step-22')} -
udhcpd: started
-
udhcpd: broadcasting discover
- -
- udhcpd: broadcasting select for 192.168.1.{lanLeastSignificantIPPart}, - server 192.168.1.1 -
-
- udhcpd: lease of 192.168.1.{lanLeastSignificantIPPart} obtained from 192.168.1.1, - lease time 3600 -
- {@render okLine( - 'Seeding random number generator ...', - 'openrc-boot-step-26', - )} - {@render okLine( - 'Seeding 256 bits without crediting', - 'openrc-boot-step-26', - )} - {@render okLine( - 'Saving 256 bits of creditable seed for next boot', - 'openrc-boot-step-26', - )} - {@render okLine('Starting logbookd ...', 'openrc-boot-step-27')} - {@render okLine('Starting busybox acpid ...', 'openrc-boot-step-28')} - {@render okLine('Starting busybox crond ...', 'openrc-boot-step-29')} - {@render okLine('Starting busybox ntpd ...', 'openrc-boot-step-29')} -
​
-
- Welcome to Alpine Linux {versions.alpine - .number}{#if versions.alpine.isEdge} (edge){/if} -
-
- Kernel {versions.kernel.humanReadable} on an {architecture} (/dev/{tty}) -
-
​
-
- {hostname} login: {#each login.username - .split('') - .map((v, i) => [v, i] as const) as [char, idx]}{char}{/each}
- Password: _ -
- -
- - 
_
- -
-
- {#each ttyLines.filter(((maxidx) => (_, i) => i < (maxidx === -1 ? Infinity : maxidx))(ttyLines.findIndex((v) => v.kind === 'clear'))) as line} - {@render ttyText(line)} - {/each} -
-
-
- {#if ttyLines.find((v) => v.kind === 'clear')} - {#each ttyLines - .map((v, i) => [v, i] as const) - .filter(([v]) => v.kind === 'clear') - .map((v, i, a) => [v[1], a[i + 1]?.[1], i]) as [idx, nextIdx, clearIdx]} -
-
-
- {#each ttyLines.filter((_, i) => i >= idx && i < (nextIdx ?? Infinity)) as line} - {@render ttyText(line)} - {/each} -
-
- {/each} - {/if} -
- - + diff --git a/src/routes/IndexPage.svelte b/src/routes/IndexPage.svelte new file mode 100644 index 0000000..8a56f08 --- /dev/null +++ b/src/routes/IndexPage.svelte @@ -0,0 +1,462 @@ + + + + + /~mem/ + + + +{#snippet tagLeft(colour: string)} + * +{/snippet} +{#snippet okTagLeft()} + {@render tagLeft('#51f051')} +{/snippet} +{#snippet tagRight(innerText: string, innerColour: string)} + [ + {innerText} + ] +{/snippet} +{#snippet okTagRight()} + {@render tagRight('ok', '#51f051')} +{/snippet} +{#snippet okLine(text: string, classes?: string, rightClass?: string)} +
+
+ {@render okTagLeft()} + {text} +
+
+ {@render okTagRight()} +
+
+{/snippet} +{#snippet ttyTextInnerRenderer(section: RenderBlock)} + {#if section.raw}{@html section.value}{:else}{#each section.value + .split('\n') + .map( (l, i, a) => (i === a.length - 1 ? [0, l] : [1, l]), ) as [nl, l]}{l}{#if nl}
{/if}{/each}{/if} +{/snippet} +{#snippet ttyTextMiddleRenderer( + section: RenderBlock, + line: TTYText & { kind: 'text' }, +)} + {#if section.url} + {#if typeof section.url === 'string'} + {#if section.url.startsWith('newtab:')} + {@const url = section.url.substring(7)} + {@render ttyTextInnerRenderer(section)} + {:else if section.url.startsWith('currenttab:')} + {@const url = section.url.substring(11)} + {@render ttyTextInnerRenderer(section)} + {:else} + ERR: Unknown Link Format + {/if} + {:else} + + typeof section.url !== 'function' ? void 0 : section.url(line)} + onkeypress={() => + typeof section.url !== 'function' ? void 0 : section.url(line)} + role="link" + tabindex="0">{@render ttyTextInnerRenderer(section)} + {/if} + {:else} + {@render ttyTextInnerRenderer(section)} + {/if} +{/snippet} +{#snippet ttyText(line: TTYText)} + {#if line.kind === 'text'} + {#if (line.renderrestriction ?? 'everywhere') === 'everywhere' || line.renderrestriction === 'noscript' || (line.renderrestriction === 'js-only' && isScripted)} + {#if line.renderrestriction === 'noscript'} + + {:else} + {#each line.value as v}{@render ttyTextMiddleRenderer( + v, + line, + )}{/each} + {/if} + {/if} + {/if} +{/snippet} + + + +
+ {#if !skipAnimation} +
+
+
+

+ BdsDxe: loading Boot0002 "UEFI Misc Device" from PciRoot + (0x0)/Pci(0x2,0x4)/Pci(0x0,0x0)
+ BdsDxe: starting Boot0002 "UEFI Misc Device" from PciRoot + (0x0)/Pci(0x2,0x4)/Pci(0x0,0x0) +

+
+
+
+ Bootloader Logo +
+
+
Start boot option
+
+ + +`)}");background-size:contain;`} + >
+
+
+
+
+

+ GNU GRUB  version 2.12 +

+
+
+ *Alpine Linux {versions.alpine.number}, with {versions.kernel + .humanReadable} +
+
+  UEFI Firmware Setup +
+
+

+ + Use the ↑ and ↓ keys to select which entry is highlighted.
+ Press enter to boot the selected OS, `e' to edit the commands before + booting or `c' for a command-line.
+ + The highlighted entry will be executed automatically in + 21s. +

+
+
+
+

+   Booting `Alpine Linux {versions.alpine.number}, with {versions + .kernel.humanReadable}'

Loading {versions.kernel.humanReadable} ...
Loading initial ramdisk ... +

+
+ +
+
+
+
+   OpenRC + {versions.openrc} + is starting up Linux + {versions.kernel.id} ({architecture}) +
+
​
+ {@render okLine('/proc/ is already mounted')} + {@render okLine('Mounting /run ...')} + {@render okLine('/run/openrc: creating directory')} + {@render okLine('/run/lock: creating directory', 'openrc-boot-step-1')} + {@render okLine('/run/lock: correcting owner', 'openrc-boot-step-1')} + {@render okLine( + 'Caching service dependencies ...', + 'openrc-boot-step-1', + )} + {@render okLine( + 'Remounting devtmpfs on /dev ...', + 'openrc-boot-step-2', + )} + {@render okLine('Mounting /dev/mqueue ...', 'openrc-boot-step-3')} + {@render okLine( + 'Mounting security filesystem ...', + 'openrc-boot-step-4', + )} + {@render okLine('Mounting debug filesystem ...', 'openrc-boot-step-5')} + {@render okLine( + 'Mounting persistent storage (pstore) filesystem ...', + 'openrc-boot-step-5', + )} + {@render okLine( + 'Mounting efivarfs filesystem ...', + 'openrc-boot-step-5', + )} + {@render okLine('Starting busybox mdev ...', 'openrc-boot-step-6')} + {@render okLine('Scanning hardware for mdev ...', 'openrc-boot-step-6')} + {@render okLine('Loading hardware drivers ...', 'openrc-boot-step-7')} + {@render okLine('Loading modules ...', 'openrc-boot-step-8')} + {@render okLine( + 'Setting system clock using the hardware clock [UTC] ...', + 'openrc-boot-step-9', + )} + {@render okLine( + 'Checking local filesystems ...', + 'openrc-boot-step-10', + )} +
+ /dev/mapper/bepis: clean, {fsckFileCount}/{fsckTotalCount} files, {blocksCount}/{blocksTotal} + blocks +
+ {@render okLine( + 'Remounting root filesystem read/write ...', + 'openrc-boot-step-12', + )} + {@render okLine('Remounting filesystems ...', 'openrc-boot-step-13')} + {@render okLine('Activating swap devices ...', 'openrc-boot-step-14')} + {@render okLine( + 'Mounting local filesystems ...', + 'openrc-boot-step-15', + )} + {@render okLine( + 'Configuring kernel parameters ...', + 'openrc-boot-step-16', + )} + {@render okLine( + 'Creating user login records ...', + 'openrc-boot-step-17', + )} + {@render okLine('Setting hostname ...', 'openrc-boot-step-18')} + {@render okLine('Setting keymap ...', 'openrc-boot-step-19')} + {@render okLine('Starting networking ...', 'openrc-boot-step-20')} + {@render okLine('\xa0\xa0lo ...', 'openrc-boot-step-21')} + {@render okLine('\xa0\xa0eth0 ...', 'openrc-boot-step-22')} +
udhcpd: started
+
+ udhcpd: broadcasting discover +
+ +
+ udhcpd: broadcasting select for 192.168.1.{lanLeastSignificantIPPart}, + server 192.168.1.1 +
+
+ udhcpd: lease of 192.168.1.{lanLeastSignificantIPPart} obtained from 192.168.1.1, + lease time 3600 +
+ {@render okLine( + 'Seeding random number generator ...', + 'openrc-boot-step-26', + )} + {@render okLine( + 'Seeding 256 bits without crediting', + 'openrc-boot-step-26', + )} + {@render okLine( + 'Saving 256 bits of creditable seed for next boot', + 'openrc-boot-step-26', + )} + {@render okLine('Starting logbookd ...', 'openrc-boot-step-27')} + {@render okLine('Starting busybox acpid ...', 'openrc-boot-step-28')} + {@render okLine('Starting busybox crond ...', 'openrc-boot-step-29')} + {@render okLine('Starting busybox ntpd ...', 'openrc-boot-step-29')} +
​
+
+ Welcome to Alpine Linux {versions.alpine + .number}{#if versions.alpine.isEdge} (edge){/if} +
+
+ Kernel {versions.kernel.humanReadable} on an {architecture} (/dev/{tty}) +
+
​
+
+ {hostname} login: {#each login.username + .split('') + .map((v, i) => [v, i] as const) as [char, idx]}{char}{/each}
+ Password: _ +
+ +
+ + 
_
+ +
+
+ {#each ttyLines.filter(((maxidx) => (_, i) => i < (maxidx === -1 ? Infinity : maxidx))(ttyLines.findIndex((v) => v.kind === 'clear'))) as line} + {@render ttyText(line)} + {/each} +
+
+
+ {/if} + + {#if ttyLines.find((v) => v.kind === 'clear')} + + {@const arr = ttyLines + .map((v, i) => [v, i] as const) + .filter(([v]) => v.kind === 'clear') + .map((v, i, a) => [v[1], a[i + 1]?.[1], i] as const)} + {#each skipAnimation ? [arr[arr.length - 1]] : arr as [idx, nextIdx, clearIdx]} +
+
+
+ {#each ttyLines.filter((_, i) => i >= idx && i < (nextIdx ?? Infinity)) as line} + {@render ttyText(line)} + {/each} +
+
+ {/each} + {/if} +
+ + diff --git a/src/routes/anim-gen.ts b/src/routes/anim-gen.ts index 550efb7..b91e088 100644 --- a/src/routes/anim-gen.ts +++ b/src/routes/anim-gen.ts @@ -15,6 +15,8 @@ import { login, ttyLines, } from './shared.ts'; +import fs from 'node:fs'; +import esbuild from 'esbuild'; const anim = new Animation(); let ttyCtr = 0; const stages = [ @@ -22,13 +24,9 @@ const stages = [ anim.selector('#grub'), anim.selector('#grub-term'), anim.selector('#openrc'), - ...(ttyLines.flatMap((v) => - v.kind === 'clear' - ? [ - anim.selector('#tty-' + ttyCtr++), - ] - : [] - )), + ...ttyLines.flatMap((v) => + v.kind === 'clear' ? [anim.selector('#tty-' + ttyCtr++)] : [], + ), ]; const visibleStageStyles = `margin-top: 0; margin-bottom: 0; @@ -69,27 +67,19 @@ height:max-content; margin-left:0; margin-right:0;`; stages.forEach((v, i) => - v.style(i === 0 ? visibleStageStyles : hiddenStageStyles) + v.style(i === 0 ? visibleStageStyles : hiddenStageStyles), ); -let currentStage: typeof stages[number]; +let currentStage: (typeof stages)[number]; const toStage = (stage: number) => { const oldStage = currentStage; currentStage = stages[stage]; if (typeof oldStage !== 'undefined') { - oldStage.style( - visibleStageStyles, - ); - currentStage.style( - hiddenStageStyles, - ); + oldStage.style(visibleStageStyles); + currentStage.style(hiddenStageStyles); anim._internal_timeline.now += 1; - oldStage.style( - hiddenStageStyles, - ); + oldStage.style(hiddenStageStyles); } - currentStage.style( - visibleStageStyles, - ); + currentStage.style(visibleStageStyles); }; type Step = (next: () => void) => void; @@ -98,7 +88,7 @@ const biosStepHandlers: Step[] = [ // Show BIOS (next) => { toStage(0); - anim.in(1000 * 3 / 10, next); + anim.in((1000 * 3) / 10, next); }, // Show Start boot option (next) => { @@ -109,22 +99,20 @@ const biosStepHandlers: Step[] = [ anim.in(1000, next); }, // Show bar parts - ...new Array( - biosSteps, - ).fill( - (quantity: number, lastQuantity: number, index: number) => - (next: () => void) => { - const s = anim.selector( - `#bios .bar`, - ); - s.style(`${index === 0 ? hiddenStyles : visibleStyles} + ...new Array(biosSteps) + .fill( + (quantity: number, lastQuantity: number, index: number) => + (next: () => void) => { + const s = anim.selector(`#bios .bar`); + s.style(`${index === 0 ? hiddenStyles : visibleStyles} width: ${lastQuantity * 100}vw;`); - anim._internal_timeline.now += 1; - s.style(`${visibleStyles} + anim._internal_timeline.now += 1; + s.style(`${visibleStyles} width: ${quantity * 100}vw;`); - anim.in(quantity === 1 ? 50 : biosStepInterval, next); - }, - ).map((v, i, a) => v((i + 1) / a.length, i / a.length, i)), + anim.in(quantity === 1 ? 50 : biosStepInterval, next); + }, + ) + .map((v, i, a) => v((i + 1) / a.length, i / a.length, i)), // Show bdsdxe (next) => { const s1 = anim.selector('#bios .bdsdxe-load'); @@ -139,7 +127,8 @@ width: ${quantity * 100}vw;`); }); }, ]; -const grubStepHandlers: Step[] = [ // Show Grub +const grubStepHandlers: Step[] = [ + // Show Grub (next) => { toStage(1); anim.in(1000, next); @@ -198,14 +187,10 @@ const idleTypingBar = ( if (flashingTimeCtr === typingIndicatorFlashTime) flashingTimeCtr /= 2; anim.in(flashingTimeCtr, () => { isHiddenInCycle = !isHiddenInCycle; - typingBarSelector.style( - v(), - ); + typingBarSelector.style(v()); }); anim.in(flashingTimeCtr - 1, () => { - typingBarSelector.style( - v(), - ); + typingBarSelector.style(v()); }); } return v(); @@ -294,30 +279,32 @@ const openrcStepHandlers = (multi: number): Step[] => [ 400, // Time till typing: 1000, - ].map((v) => v / multi).map((time, idx, arr) => (next: () => void) => { - const s = anim.selector('#openrc .openrc-boot-step-' + idx); - s.style(`${hiddenStyles} + ] + .map((v) => v / multi) + .map((time, idx, arr) => (next: () => void) => { + const s = anim.selector('#openrc .openrc-boot-step-' + idx); + s.style(`${hiddenStyles} max-height: 0;`); - if (idx === arr.length - 1) { - anim.selector('#openrc .openrc-hide-at-last-boot-step').style( - 'opacity:1;max-height:90vh;max-width:100vw;', - ); - } - anim._internal_timeline.now += 1; - if (idx === arr.length - 1) { - anim.selector('#openrc .openrc-hide-at-last-boot-step').style( - 'opacity:0;max-height:0;max-width:0;', - ); - } - s.style(`${visibleStyles} + if (idx === arr.length - 1) { + anim + .selector('#openrc .openrc-hide-at-last-boot-step') + .style('opacity:1;max-height:90vh;max-width:100vw;'); + } + anim._internal_timeline.now += 1; + if (idx === arr.length - 1) { + anim + .selector('#openrc .openrc-hide-at-last-boot-step') + .style('opacity:0;max-height:0;max-width:0;'); + } + s.style(`${visibleStyles} max-height: max-content;`); - if (idx === arr.length - 1) { - idleTypingBar(anim.selector('#openrc .openrc-username-anim'), time); - } - anim.in(time, next); - }), + if (idx === arr.length - 1) { + idleTypingBar(anim.selector('#openrc .openrc-username-anim'), time); + } + anim.in(time, next); + }), // Typing Username - ...((() => { + ...(() => { const typingBar = anim.selector('#openrc .openrc-username-anim'); return login.username.split('').map((_, i) => { const character = anim.selector( @@ -326,7 +313,7 @@ max-height: max-content;`); return (next: () => void) => typeCharacter(typingBar, character, next, getDelay(login)); }); - })()), + })(), // Hide Username Cursor (next) => { const s = anim.selector( @@ -346,13 +333,13 @@ max-height: max-content;`); next(); }, // Password Typing - ...(new Array(login.passwordLength).fill( - (_idx: number) => (next: () => void) => { + ...new Array(login.passwordLength) + .fill((_idx: number) => (next: () => void) => { const s = anim.selector('#openrc .openrc-password-anim'); const characterTime = getDelay(login); typeCharacter(s, null, next, characterTime); - }, - ).map((v, i) => v(i))), + }) + .map((v, i) => v(i)), (next) => { const s = anim.selector('#openrc .openrc-password-anim'); s.style('opacity:0;transform:scaleX(0);'); @@ -362,9 +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(`#openrc .ttylines-openrc`); s.style(altHiddenStyles); anim.in(1, () => { s.style(altVisibleStyles); @@ -378,8 +363,9 @@ const ttyStepHandlers: Step[] = [ switch (step.kind) { case 'text': { const s = anim.selector( - `${isBeforeFirstClear ? '#openrc' : '#tty-' + (ttyIdx - 1)} ${step.classes.map((v) => `.${v}`).join('') - }`, + `${isBeforeFirstClear ? '#openrc' : '#tty-' + (ttyIdx - 1)} ${step.classes + .map((v) => `.${v}`) + .join('')}`, ); s.style(altHiddenStyles); anim.in(1, () => { @@ -390,8 +376,9 @@ const ttyStepHandlers: Step[] = [ } case 'removeNode': { const s = anim.selector( - `${isBeforeFirstClear ? '#openrc' : '#tty-' + (ttyIdx - 1)} ${step.removedItemClassList.map((v) => `.${v}`).join('') - }`, + `${isBeforeFirstClear ? '#openrc' : '#tty-' + (ttyIdx - 1)} ${step.removedItemClassList + .map((v) => `.${v}`) + .join('')}`, ); s.style(altVisibleStyles); anim.in(1, () => { @@ -412,7 +399,7 @@ const ttyStepHandlers: Step[] = [ if (isBeforeFirstClear) { isBeforeFirstClear = false; } - toStage(3 + (++ttyIdx)); + toStage(3 + ++ttyIdx); next(); break; } @@ -444,7 +431,7 @@ handleSteps.push(() => { // we done }); nextStep(); -const output = `/** +const comment = `/** * @generated * @license AGPL-3.0-OR-LATER * @copyright 2024 memdmp @@ -456,10 +443,13 @@ const output = `/** * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. * * You should have received a copy of the GNU Affero General Public License along with this program. If not, see . - */ -${anim.exportToCSS()} -${stages.filter((_, i, a) => i !== a.length - 1).map((v) => - `${v.selector} { + */`; +const exported = anim.exportToCSS(); +const tail = `${stages + .filter((_, i, a) => i !== a.length - 1) + .map( + (v) => + `${v.selector} { ${hiddenStageStyles} } .ttytext-removed-after-done { @@ -470,35 +460,56 @@ ${hiddenStageStyles} margin-left: -100vw; margin-right: 100vw; } -${(ttyLines.flatMap((v) => +${ttyLines + .flatMap((v) => v.kind === 'text' ? [ - ...v.value.map((v) => ({ - kind: 'text' as const, - ...v, - })), - ] - : [] - ).flatMap((v) => [ - ...( - v.kind === 'text' - ? [ + ...v.value.map((v) => ({ + kind: 'text' as const, + ...v, + })), + ] + : [], + ) + .flatMap((v) => [ + ...(v.kind === 'text' + ? [ v.colour ? `.ttytext-block.text-\\[\\${v.colour}\\]{color:${v.colour};}` : '', - v.bg - ? `.ttytext-block.bg-\\[\\${v.bg}\\]{background:${v.bg};}` - : '', + v.bg ? `.ttytext-block.bg-\\[\\${v.bg}\\]{background:${v.bg};}` : '', ] - : [] - ), - ]).filter((v, i, a) => v.length !== 0 && a.indexOf(v) === i)).join('\n') - } -` -).join('') - } -${[...anim.exportToObject().values()].map(v => `#app.skip-animation ${v.selector} { + : []), + ]) + .filter((v, i, a) => v.length !== 0 && a.indexOf(v) === i) + .join('\n')} +`, + ) + .join('')} +${[...anim.exportToObject().values()] + .map((v) => `#app.skip-animation ${v.selector}`) + .join(',\n')} { + animation-name: none; animation-duration: 0.01ms; -}`).join('\n')} +} `; -console.log(output); +fs.writeFileSync( + 'src/routes/anim.css', + `${comment} +${ + esbuild.buildSync({ + stdin: { + contents: `${exported} +${tail}`, + loader: 'css', + }, + write: false, + minify: false, + }).outputFiles![0].text +}`, +); +fs.writeFileSync( + 'src/routes/no-anim.css', + `${comment} +${tail}`, +); diff --git a/src/routes/skip-animation/+page.svelte b/src/routes/skip-animation/+page.svelte index a252eb6..fdbbfec 100644 --- a/src/routes/skip-animation/+page.svelte +++ b/src/routes/skip-animation/+page.svelte @@ -1,5 +1,6 @@ -- cgit v1.2.3