Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rosary: glow animation earlier, embers before full fire
All checks were successful
CI / update (push) Successful in 1m22s
Details

Browse Source
This commit is contained in:
Alexander Bocken
2026-01-31 12:20:35 +01:00
parent 71dd5b6285
commit 1cce6a56ac
1 changed files with 40 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/lib/components/StreakAura.svelte
View File

@@ -2,15 +2,16 @@
export let value: number = 0; export let value: number = 0;
const phase = const phase =
value >= 365 ? 5 : value >= 365 ? 6 :
value >= 180 ? 4 : value >= 180 ? 5 :
value >= 90 ? 3 : value >= 90 ? 4 :
value >= 30 ? 2 : value >= 30 ? 3 :
value >= 14 ? 2 : // NEW: particles only
value >= 7 ? 1 : 0; value >= 7 ? 1 : 0;
</script> </script>
<div class="aura phase-{phase}" class:holy-fire={phase>=3}> <div class="aura phase-{phase}" class:holy-fire={phase>=4}>
{#if phase >= 5} {#if phase >= 6}
<div class="wing left"> <div class="wing left">
<svg viewBox="0 0 91.871681 77.881462" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 91.871681 77.881462" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-52.477632,-104.97065)"> <g transform="translate(-52.477632,-104.97065)">
@@ -27,29 +28,41 @@
</svg> </svg>
</div> </div>
{/if} {/if}
{#if phase >= 4} {#if phase >= 5}
<div class="halo" ></div> <div class="halo" ></div>
{/if} {/if}
{#if phase >= 2}
{#if phase >= 2}
<div class="fire"> <div class="fire">
<div class="fire-left"> <div class="fire-left">
{#if phase >= 3}
<div class="main-fire"></div> <div class="main-fire"></div>
<div class="particle-fire"></div>
</div>
<div class="fire-center">
<div class="main-fire"></div>
<div class="particle-fire"></div>
</div>
<div class="fire-right">
<div class="main-fire"></div>
<div class="particle-fire"></div>
</div>
<div class="fire-bottom">
<div class="main-fire"></div>
</div>
</div>
{/if} {/if}
<div class="particle-fire"></div>
</div>
<div class="fire-center">
{#if phase >= 3}
<div class="main-fire"></div>
{/if}
<div class="particle-fire"></div>
</div>
<div class="fire-right">
{#if phase >= 3}
<div class="main-fire"></div>
{/if}
<div class="particle-fire"></div>
</div>
<div class="fire-bottom">
{#if phase >= 3}
<div class="main-fire"></div>
{/if}
</div>
</div>
{/if}
<span class="number">{value}</span> <span class="number">{value}</span>
</div> </div>
@@ -64,10 +77,10 @@
display: grid; display: grid;
place-items: center; place-items: center;
} }
.aura.phase-2,
.aura.phase-3, .aura.phase-3,
.aura.phase-4, .aura.phase-4,
.aura.phase-5 .aura.phase-5,
.aura.phase-6
{ {
height: 88px; height: 88px;
} }