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

feat: migrate frontend React 18 → Svelte 5 + SvelteKit
All checks were successful
CI/CD — Build & Deploy / Build & Deploy (push) Successful in 22s
Details

Browse Source 
Core logic portable (economy, balance, cosmetics, migrateSave) — zero rewrite.
136 tests green, identiques. Backend inchangé.

- Svelte 5 runes stores (game, auth, toast) remplacent Zustand
- SvelteKit adapter-static SPA (dist/ output, fallback index.html)
- Tailwind v4 conservé, design system .gp-* porté
- Transitions natives : slide, fly, scale, fade sur toute l'UI
- Sidebar tabbée (Production/Evolution/Collection) + CollapsiblePanel
- Mobile bottom sheet avec FAB toggle + backdrop blur
- Click particles réactifs Svelte (plus de DOM impératif)
- TadpoleSprite bounce + glow ring au clic
- Guide refait en accordéon, Achievements avec filtres
- a11y : focus-visible, Escape modals, aria-current, aria-labels
- CI/CD adapté (tests + build + rsync)
- Build 504K (vs ~1.2MB React)
This commit is contained in:
Tetardtek
2026-03-28 20:03:21 +01:00
parent 3de0492631
commit f6bff6e389
125 changed files with 5323 additions and 10373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
Frontend/static/svg/aura-swamp.svg Normal file
View File

@@ -0,0 +1,44 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="320" height="320" shape-rendering="crispEdges">
<!-- Aura: Swamp — default cosmetic overlay -->
<!-- Same 32x32 grid as tadpole.svg, overlaid on top -->
<!-- ===== SEAWEED LEFT ===== -->
<rect x="0" y="10" width="1" height="1" fill="#4a8070"/>
<rect x="1" y="11" width="1" height="1" fill="#4a8070"/>
<rect x="0" y="12" width="1" height="1" fill="#4a8070"/>
<rect x="1" y="13" width="1" height="1" fill="#4a8070"/>
<rect x="0" y="14" width="1" height="1" fill="#4a8070"/>
<rect x="1" y="15" width="1" height="1" fill="#4a8070"/>
<rect x="0" y="16" width="1" height="1" fill="#4a8070"/>
<rect x="1" y="17" width="1" height="1" fill="#4a8070"/>
<rect x="0" y="18" width="1" height="1" fill="#4a8070"/>
<rect x="1" y="19" width="1" height="1" fill="#4a8070"/>
<rect x="0" y="20" width="1" height="1" fill="#4a8070"/>
<rect x="1" y="21" width="1" height="1" fill="#4a8070"/>
<!-- ===== SEAWEED RIGHT ===== -->
<rect x="30" y="10" width="1" height="1" fill="#4a8070"/>
<rect x="31" y="11" width="1" height="1" fill="#4a8070"/>
<rect x="30" y="12" width="1" height="1" fill="#4a8070"/>
<rect x="31" y="13" width="1" height="1" fill="#4a8070"/>
<rect x="30" y="14" width="1" height="1" fill="#4a8070"/>
<rect x="31" y="15" width="1" height="1" fill="#4a8070"/>
<rect x="30" y="16" width="1" height="1" fill="#4a8070"/>
<rect x="31" y="17" width="1" height="1" fill="#4a8070"/>
<rect x="30" y="18" width="1" height="1" fill="#4a8070"/>
<rect x="31" y="19" width="1" height="1" fill="#4a8070"/>
<rect x="30" y="20" width="1" height="1" fill="#4a8070"/>
<rect x="31" y="21" width="1" height="1" fill="#4a8070"/>
<!-- ===== WATER RIPPLE ===== -->
<rect x="6" y="27" width="13" height="1" fill="#3888d8"/>
<rect x="7" y="28" width="11" height="1" fill="#58a8e8"/>
<rect x="8" y="29" width="9" height="1" fill="#58a8e8" opacity="0.5"/>
<!-- ===== BUBBLES ===== -->
<rect x="1" y="6" width="1" height="1" fill="#50aab8" opacity="0.6"/>
<rect x="0" y="7" width="1" height="1" fill="#50aab8" opacity="0.4"/>
<rect x="2" y="5" width="1" height="1" fill="#50aab8" opacity="0.35"/>
<rect x="29" y="5" width="1" height="1" fill="#50aab8" opacity="0.5"/>
<rect x="30" y="6" width="1" height="1" fill="#50aab8" opacity="0.35"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB