Compare commits
3 Commits
35564602b2
...
f8de69786e
| Author | SHA1 | Date | |
|---|---|---|---|
| f8de69786e | |||
| c1027db388 | |||
| 7896803100 |
|
|
@ -9,7 +9,16 @@
|
|||
|
||||
const PALETTE = ['#ff5555', '#ffa84a', '#ffe34a', '#6cdc6c', '#4ab3ff', '#b06cff'];
|
||||
|
||||
// triggerKey kommt von $game.stageBumpKey — das Lesen abonniert (Svelte 5) den ganzen
|
||||
// game-Store, daher feuert dieser Effekt bei JEDEM Timer-Tick (~60×/s). Ohne Wertvergleich
|
||||
// würde er die Partikel jede Frame neu erzeugen und die fly-Animation endlos bei 0% neu
|
||||
// starten → flackernde Punkte in der Mitte. Nur bei echtem Wechsel von triggerKey auslösen.
|
||||
let prevTrigger = 0;
|
||||
let hideTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
$effect(() => {
|
||||
if (triggerKey === prevTrigger) return;
|
||||
prevTrigger = triggerKey;
|
||||
if (triggerKey === 0) return;
|
||||
counter++;
|
||||
const seed = counter;
|
||||
|
|
@ -21,10 +30,16 @@
|
|||
size: 8 + Math.random() * 8,
|
||||
}));
|
||||
active = true;
|
||||
const timeout = setTimeout(() => {
|
||||
if (hideTimer) clearTimeout(hideTimer);
|
||||
hideTimer = setTimeout(() => {
|
||||
active = false;
|
||||
}, 700);
|
||||
return () => clearTimeout(timeout);
|
||||
});
|
||||
|
||||
// Timer beim Verlassen aufräumen (der Effekt oben kehrt meist früh zurück und gibt
|
||||
// selbst keine Cleanup-Funktion mehr zurück).
|
||||
$effect(() => () => {
|
||||
if (hideTimer) clearTimeout(hideTimer);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -115,7 +115,10 @@
|
|||
will-change: transform;
|
||||
}
|
||||
|
||||
.float { animation: float var(--dur, 3.6s) ease-in-out infinite alternate; }
|
||||
/* fill-mode: backwards hält schon während des animation-delay den 0%-Zustand. Ohne das
|
||||
sitzt das Element verzögert bei transform:none und springt beim Animationsstart auf den
|
||||
0%-Keyframe — das sichtbare „Springen" in den ersten Sekunden. */
|
||||
.float { animation: float var(--dur, 3.6s) ease-in-out infinite alternate backwards; }
|
||||
/* translate3d/translateZ erzwingen eine echte GPU-Compositor-Ebene — WebKit/Safari
|
||||
rendert 3D-transformierte Elemente flüssig, 2D-Transforms ruckeln dort sonst anfangs. */
|
||||
@keyframes float {
|
||||
|
|
@ -123,13 +126,13 @@
|
|||
100% { transform: translate3d(0, -30px, 0) rotate(5deg); }
|
||||
}
|
||||
|
||||
.drift { animation: drift var(--dur, 8s) ease-in-out infinite alternate; }
|
||||
.drift { animation: drift var(--dur, 8s) ease-in-out infinite alternate backwards; }
|
||||
@keyframes drift {
|
||||
from { transform: translate3d(-55px, 0, 0); }
|
||||
to { transform: translate3d(55px, 0, 0); }
|
||||
}
|
||||
|
||||
.twinkle { animation: twinkle var(--dur, 2.2s) ease-in-out infinite; }
|
||||
.twinkle { animation: twinkle var(--dur, 2.2s) ease-in-out infinite backwards; }
|
||||
@keyframes twinkle {
|
||||
0%, 100% { opacity: 0.25; transform: scale(0.5) translateZ(0); }
|
||||
50% { opacity: 1; transform: scale(1.35) translateZ(0); }
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export type Settings = {
|
|||
|
||||
export const DEFAULT_SETTINGS: Settings = {
|
||||
schemaVersion: SCHEMA_VERSION,
|
||||
roundSeconds: 60,
|
||||
roundSeconds: 15,
|
||||
soundOn: true,
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export const ROUND_SECONDS_OPTIONS = [15, 30, 60] as const;
|
|||
|
||||
const initial: Settings =
|
||||
typeof window === 'undefined'
|
||||
? { schemaVersion: 1, roundSeconds: 60, soundOn: true }
|
||||
? { schemaVersion: 1, roundSeconds: 15, soundOn: true }
|
||||
: loadSettings();
|
||||
|
||||
export const settings = writable<Settings>(initial);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user