Skip to content

Commit b5c5709

Browse files
AyfriAyfri
committed
feat(bonus): Display active power up in the atom realm.
1 parent 8b44803 commit b5c5709

File tree

7 files changed

+153
-41
lines changed

7 files changed

+153
-41
lines changed

‎src/lib/components/game/Bonus.svelte‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818
duration: 0,
1919
id: Date.now().toString(),
2020
multiplier: 0,
21-
name: 'Double Atoms',
2221
startTime: Date.now(),
2322
} satisfies PowerUp);
2423
@@ -118,8 +117,8 @@
118117
class:opacity-0={isFadingOut}
119118
style="left: {x}px; top: {y}px;"
120119
onclick={onClick}
121-
onmouseenter={() => isHovered = true}
122-
onmouseleave={() => isHovered = false}
120+
onmouseenter={() => (isHovered = true)}
121+
onmouseleave={() => (isHovered = false)}
123122
aria-label="Collect bonus power-up"
124123
>
125124
<div
@@ -142,12 +141,24 @@
142141

143142
<style>
144143
@keyframes vibrate {
145-
0% { transform: translate(0, 0); }
146-
20% { transform: translate(-1px, 1px); }
147-
40% { transform: translate(-1px, -1px); }
148-
60% { transform: translate(1px, 1px); }
149-
80% { transform: translate(1px, -1px); }
150-
100% { transform: translate(0, 0); }
144+
0% {
145+
transform: translate(0, 0);
146+
}
147+
20% {
148+
transform: translate(-1px, 1px);
149+
}
150+
40% {
151+
transform: translate(-1px, -1px);
152+
}
153+
60% {
154+
transform: translate(1px, 1px);
155+
}
156+
80% {
157+
transform: translate(1px, -1px);
158+
}
159+
100% {
160+
transform: translate(0, 0);
161+
}
151162
}
152163
153164
.vibrate {

‎src/lib/components/hud/ActivePowerUps.svelte‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<script lang="ts">
2+
import { gameManager } from '$helpers/GameManager.svelte';
3+
import { onDestroy, onMount } from 'svelte';
4+
import { fade, fly } from 'svelte/transition';
5+
import { Zap } from 'lucide-svelte';
6+
7+
let now = $state(Date.now());
8+
let interval: ReturnType<typeof setInterval>;
9+
10+
onMount(() => {
11+
interval = setInterval(() => {
12+
now = Date.now();
13+
}, 50);
14+
});
15+
16+
onDestroy(() => {
17+
if (interval) clearInterval(interval);
18+
});
19+
</script>
20+
21+
{#if gameManager.activePowerUps.length > 0}
22+
<div class="flex flex-col gap-2 w-72 md:w-96 pointer-events-none select-none mt-8">
23+
{#each gameManager.activePowerUps as powerUp (powerUp.id)}
24+
{@const elapsed = now - powerUp.startTime}
25+
{@const progress = Math.max(0, Math.min(1, elapsed / powerUp.duration))}
26+
{@const remaining = Math.max(0, powerUp.duration - elapsed)}
27+
28+
<div
29+
class="bg-zinc-900/80 backdrop-blur-md border border-white/10 p-3 rounded-lg shadow-xl relative overflow-hidden group"
30+
in:fly={{ y: -20, duration: 300 }}
31+
out:fade
32+
>
33+
<!-- Progress Bar Background (Diminishing) -->
34+
<div
35+
class="absolute bottom-0 left-0 h-0.5 md:h-1 bg-accent-500 shadow-[0_0_10px_rgba(var(--accent-500),0.5)] transition-all duration-100 ease-linear"
36+
style="width: {(1 - progress) * 100}%"
37+
></div>
38+
39+
<div class="flex items-center gap-3 relative z-10">
40+
<div class="p-1.5 bg-accent-500/10 rounded-md text-accent-400">
41+
<Zap size={16} />
42+
</div>
43+
44+
<div class="flex-1 min-w-0">
45+
<div class="flex justify-between items-baseline mb-0.5">
46+
<span class="font-bold text-sm text-white truncate pr-2">Higgs Boson Bonus</span>
47+
<span class="text-xs text-accent-400 font-mono font-bold whitespace-nowrap">x{powerUp.multiplier}</span>
48+
</div>
49+
<div class="flex justify-between items-center text-[10px] md:text-xs text-zinc-400">
50+
<span class="truncate pr-2">{powerUp.description}</span>
51+
<span class="font-mono tabular-nums text-zinc-300">{(remaining / 1000).toFixed(1)}s</span>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
{/each}
57+
</div>
58+
{/if}

‎src/lib/components/prestige/AtomRealm.svelte‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script lang="ts">
22
import Achievements from '@components/game/Achievements.svelte';
3+
import ActivePowerUps from '@components/hud/ActivePowerUps.svelte';
34
import Atom from '@components/game/Atom.svelte';
45
import Bonus from '@components/game/Bonus.svelte';
56
import Buildings from '@components/game/Buildings.svelte';
@@ -74,6 +75,7 @@
7475
<div class="grid-area-atom relative z-0 flex flex-col items-center justify-start">
7576
<Counter />
7677
<Atom />
78+
<ActivePowerUps />
7779
</div>
7880
{#if !mobile.current}
7981
<div class="grid-area-buildings pt-12">

‎src/lib/data/powerUp.ts‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
1-
import type {Range} from '$lib/types';
1+
import type { Range } from '$lib/types';
22

33
export const POWER_UP_DEFAULT_INTERVAL = [180_000, 300_000] as Range;
44

55
export const POWER_UPS = [
6-
{
7-
duration: 30_000,
8-
multiplier: 1.5,
9-
},
10-
{
11-
duration: 15_000,
12-
multiplier: 2,
13-
},
14-
{
15-
duration: 10_000,
16-
multiplier: 2.5,
17-
},
18-
{
19-
duration: 3000,
20-
multiplier: 6,
21-
},
22-
{
23-
duration: 1000,
24-
multiplier: 25,
25-
},
6+
{
7+
duration: 30_000,
8+
multiplier: 1.5,
9+
},
10+
{
11+
duration: 15_000,
12+
multiplier: 2,
13+
},
14+
{
15+
duration: 10_000,
16+
multiplier: 2.5,
17+
},
18+
{
19+
duration: 3000,
20+
multiplier: 6,
21+
},
22+
{
23+
duration: 1000,
24+
multiplier: 25,
25+
},
2626
];

‎src/lib/types.ts‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,35 @@ export interface Effect {
4848
apply: (currentValue: number, manager: GameManager) => number;
4949
description: string;
5050
target?: BuildingType;
51-
type: 'auto_buy' | 'auto_click' | 'auto_speed' | 'auto_upgrade' | 'building' | 'click' | 'electron_gain' | 'excited_auto_click' | 'excited_photon_chance' | 'excited_photon_double' | 'excited_photon_duration' | 'excited_photon_from_max' | 'excited_photon_stability' | 'global' | 'photon_auto_click' | 'photon_double_chance' | 'photon_duration' | 'photon_size' | 'photon_spawn_interval' | 'photon_stability' | 'power_up_duration' | 'power_up_interval' | 'power_up_multiplier' | 'proton_gain' | 'stability_boost' | 'stability_capacity' | 'stability_speed' | 'xp_gain';
51+
type:
52+
| 'auto_buy'
53+
| 'auto_click'
54+
| 'auto_speed'
55+
| 'auto_upgrade'
56+
| 'building'
57+
| 'click'
58+
| 'electron_gain'
59+
| 'excited_auto_click'
60+
| 'excited_photon_chance'
61+
| 'excited_photon_double'
62+
| 'excited_photon_duration'
63+
| 'excited_photon_from_max'
64+
| 'excited_photon_stability'
65+
| 'global'
66+
| 'photon_auto_click'
67+
| 'photon_double_chance'
68+
| 'photon_duration'
69+
| 'photon_size'
70+
| 'photon_spawn_interval'
71+
| 'photon_stability'
72+
| 'power_up_duration'
73+
| 'power_up_interval'
74+
| 'power_up_multiplier'
75+
| 'proton_gain'
76+
| 'stability_boost'
77+
| 'stability_capacity'
78+
| 'stability_speed'
79+
| 'xp_gain';
5280
}
5381

5482
export type FeatureState = Record<string, boolean>;
@@ -127,7 +155,6 @@ export interface PowerUp {
127155
duration: number;
128156
id: string;
129157
multiplier: number;
130-
name: string;
131158
startTime: number;
132159
}
133160

‎src/routes/+page.svelte‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
actionLabel: 'Open Cloud Save',
5454
title: 'Cloud Save Available',
5555
message: 'A cloud save with more play time is available.',
56-
duration: 12_000
56+
duration: 12_000,
5757
});
5858
}
5959
} catch (error) {
@@ -108,10 +108,10 @@
108108
</script>
109109

110110
<div class="flex flex-col min-h-screen">
111-
<RemoteBanner/>
112-
<NavBar/>
113-
<Toaster/>
114-
<AutoSaveIndicator/>
111+
<RemoteBanner />
112+
<NavBar />
113+
<Toaster />
114+
<AutoSaveIndicator />
115115

116116
{#if realmManager.availableRealms.length > 1}
117117
<div
@@ -121,7 +121,11 @@
121121
<div class="flex flex-col gap-1">
122122
{#each realmManager.availableRealms as realm (realm.id)}
123123
<button
124-
class="flex items-center gap-2 px-2 py-1.5 rounded-sm transition-all duration-200 hover:scale-105 {realmManager.selectedRealmId === realm.id ? 'bg-accent-500/60 border-accent-400/50' : 'bg-white/5 hover:bg-white/10'}"
124+
class="flex items-center gap-2 px-2 py-1.5 rounded-sm transition-all duration-200 hover:scale-105 {(
125+
realmManager.selectedRealmId === realm.id
126+
) ?
127+
'bg-accent-500/60 border-accent-400/50'
128+
: 'bg-white/5 hover:bg-white/10'}"
125129
onclick={() => realmManager.selectRealm(realm.id)}
126130
title="{realm.title} - {formatNumber(realmManager.realmValues[realm.id] ?? 0)} {realm.currency.name.toLowerCase()}"
127131
>
@@ -134,11 +138,13 @@
134138
{/if}
135139

136140
<main
137-
class="relative flex-1 {mobile.current ? 'overflow-y-auto overflow-x-hidden' : 'overflow-hidden'} lg:pb-4 transition-all duration-300"
141+
class="relative flex-1 {mobile.current ? 'overflow-y-auto overflow-x-hidden' : (
142+
'overflow-hidden'
143+
)} lg:pb-4 transition-all duration-300"
138144
style="padding-top: {remoteMessage.message && remoteMessage.isVisible ? 'calc(3rem + 1.5rem)' : '3rem'};"
139145
>
140146
{#if gameManager.features[FeatureTypes.LEVELS]}
141-
<Levels/>
147+
<Levels />
142148
{/if}
143149

144150
<!-- Use transform and opacity for virtual desktop swipe effect -->
@@ -149,7 +155,9 @@
149155
class:translate-x-0={realmManager.selectedRealm.id === realm.id}
150156
class:opacity-0={realmManager.selectedRealm.id !== realm.id}
151157
class:pointer-events-none={realmManager.selectedRealm.id !== realm.id}
152-
style="transform: translateX({realmManager.selectedRealm.id === realm.id ? '0' : (i > realmManager.availableRealms.findIndex(r => r.id === realmManager.selectedRealm.id) ? '100%' : '-100%')}); {realm.background ? `background-image: ${realm.background};` : ''}"
158+
style="transform: translateX({realmManager.selectedRealm.id === realm.id ? '0'
159+
: i > realmManager.availableRealms.findIndex(r => r.id === realmManager.selectedRealm.id) ? '100%'
160+
: '-100%'}); {realm.background ? `background-image: ${realm.background};` : ''}"
153161
>
154162
<div class="absolute inset-0 overflow-y-auto custom-scrollbar">
155163
<div class="flex flex-col min-h-full">

‎static/Changelog.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
# What's new 02-02-2026
2+
3+
- **Bonus Display**: Added a display for active power ups in the atom realm.
4+
- **Building icons**: Added icons for buildings.
5+
- **Prestige Animations**: Added new animations for protonise and electronise.
6+
17
# What's new 01-02-2026
28

39
- **Skill Tree**: Reworked from scratch the skill tree system, skills are now paid with currencies, important features and boosts are now available as skills.

0 commit comments

Comments
 (0)