Tetardtek/ClickerZ
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: refactor store to direct $state exports + Object.assign mutation
All checks were successful
CI/CD — Build & Deploy / Build & Deploy (push) Successful in 22s
Details

Browse Source 
Svelte 5 can't export reassigned $state — use const $state + Object.assign.
All components now import state/actions directly (no gameStore wrapper).
Deep reactivity works: evolutionTree nodes, generators, cosmetics all tracked.
This commit is contained in:
Tetardtek
2026-03-28 20:23:57 +01:00
parent ce38975c10
commit 10ff2d32f5
16 changed files with 214 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
Frontend/src/lib/components/PrestigeScreen.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { fly, scale, fade } from 'svelte/transition';
import { quintOut, backOut } from 'svelte/easing';
import { gameStore } from '$lib/stores/game.svelte';
import { state, refs, prestige, closePrestige } from '$lib/stores/game.svelte';
import { computePrestigeDna, getPrestigeDnaBonus, getPrestigeThreshold } from '$lib/core/economy';
import { formatNumber } from '$lib/utils/formatNumber';
@@ -15,24 +15,24 @@
return `${seconds}s`;
}
let baseDna = $derived(computePrestigeDna(gameStore.state.lifetimeTadpoles, gameStore.state.prestigeCount));
let dnaBonus = $derived(getPrestigeDnaBonus(gameStore.state.evolutionTree));
let baseDna = $derived(computePrestigeDna(state.lifetimeTadpoles, state.prestigeCount));
let dnaBonus = $derived(getPrestigeDnaBonus(state.evolutionTree));
let dnaPreview = $derived(Math.floor(baseDna * (1 + dnaBonus)));
let threshold = $derived(getPrestigeThreshold(gameStore.state));
let canPrestige = $derived(gameStore.state.lifetimeTadpoles >= threshold);
let runDuration = $derived(Date.now() - gameStore.state.runStats.startedAt);
let bestRun = $derived(gameStore.state.runStats.bestRun);
let threshold = $derived(getPrestigeThreshold(state));
let canPrestige = $derived(state.lifetimeTadpoles >= threshold);
let runDuration = $derived(Date.now() - state.runStats.startedAt);
let bestRun = $derived(state.runStats.bestRun);
let isBestAdn = $derived(!bestRun || dnaPreview > bestRun.adn);
let isBestTadpoles = $derived(!bestRun || gameStore.state.lifetimeTadpoles > bestRun.tadpoles);
let isBestTadpoles = $derived(!bestRun || state.lifetimeTadpoles > bestRun.tadpoles);
function handlePrestige() {
if (canPrestige) gameStore.prestige();
if (canPrestige) prestige();
}
</script>
<svelte:window onkeydown={(e) => { if (e.key === 'Escape' && gameStore.showPrestigeScreen) gameStore.closePrestige(); }} />
<svelte:window onkeydown={(e) => { if (e.key === 'Escape' && refs.showPrestigeScreen) closePrestige(); }} />
{#if gameStore.showPrestigeScreen}
{#if refs.showPrestigeScreen}
<!-- Backdrop -->
<div
class="fixed inset-0 z-50 flex items-center justify-center"
@@ -48,7 +48,7 @@
<!-- Header with generation number -->
<div class="text-center" in:fly={{ y: -20, delay: 100, duration: 400, easing: quintOut }}>
<span class="gp-title text-lg!">Nouvelle Generation</span>
<p class="gp-label mt-1">Generation #{gameStore.state.prestigeCount + 1}</p>
<p class="gp-label mt-1">Generation #{state.prestigeCount + 1}</p>
</div>
<div class="gp-sep"></div>
@@ -68,7 +68,7 @@
{#if dnaBonus > 0}
<span class="gp-label">(base {formatNumber(baseDna)} + {Math.round(dnaBonus * 100)}% arbre)</span>
{/if}
<span class="gp-label mt-1">Total apres : {formatNumber(gameStore.state.ancestralDna + dnaPreview)} ADN</span>
<span class="gp-label mt-1">Total apres : {formatNumber(state.ancestralDna + dnaPreview)} ADN</span>
</div>
<div class="gp-sep"></div>
@@ -85,7 +85,7 @@
<div class="flex justify-between">
<span class="gp-label">Tetards produits</span>
<span class="gp-value {isBestTadpoles ? 'gp-accent-green' : ''}">
{formatNumber(gameStore.state.lifetimeTadpoles)}
{formatNumber(state.lifetimeTadpoles)}
{#if isBestTadpoles && bestRun} ★{/if}
</span>
</div>
@@ -141,7 +141,7 @@
<!-- Actions -->
<div class="flex gap-2 mt-1" in:fly={{ y: 20, delay: 450, duration: 300, easing: quintOut }}>
<button
onclick={() => gameStore.closePrestige()}
onclick={() => closePrestige()}
class="gp-btn flex-1 py-2.5! text-[0.8rem]!"
style="background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6);"
>
@@ -153,7 +153,7 @@
</button>
{:else}
<button class="gp-btn gp-btn--disabled flex-1 py-2.5!" disabled>
{formatNumber(threshold - gameStore.state.lifetimeTadpoles)} manquants
{formatNumber(threshold - state.lifetimeTadpoles)} manquants
</button>
{/if}
</div>