Skip to content

Commit 417ec94

Browse files
edenchazardedenchazard
authored
ft: new year (#94)
* ft: fortune cookie * add badge
1 parent 81bcd60 commit 417ec94

File tree

14 files changed

+1284
-31
lines changed

14 files changed

+1284
-31
lines changed

‎components/ClicksLeaderboard.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ withDefaults(
7474
rank: number;
7575
username: string;
7676
clicks_given: number;
77-
flair: Pick<Item, 'url' | 'name' | 'description'> | null;
77+
flair: Pick<Item, 'url' | 'name' | 'description' | 'artist'> | null;
7878
}>;
7979
total: number;
8080
showTrophies?: boolean;

‎components/DialogFortuneCookie.vue‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<template>
2+
<dialog
3+
ref="fortuneDialog"
4+
class="p-4 rounded-lg max-w-md bg-green-100 dark:bg-stone-200 shadow-xl"
5+
@close="unveiledCookie = false"
6+
>
7+
<header>
8+
<h2>Reveal your fortune!</h2>
9+
</header>
10+
11+
<main class="space-y-4">
12+
<img
13+
class="mx-auto my-12 glow rounded-full"
14+
:src="`${path}/items/fortune-cookie.webp`"
15+
alt="Fortune Cookie"
16+
/>
17+
<p>
18+
Matthias eagerly takes your Dragon Dollars and hands you the fortune
19+
cookie.
20+
</p>
21+
<p>You stare at it with both anticipation and nervousness.</p>
22+
23+
<button
24+
v-if="!unveiledCookie"
25+
type="button"
26+
class="btn-primary w-full"
27+
@click="unveiledCookie = true"
28+
>
29+
Open the cookie
30+
</button>
31+
32+
<template v-else>
33+
<div class="overflow-hidden fortune relative">
34+
<div
35+
class="w-full absolute right-0 h-full fortune-cover bg-green-100 dark:bg-stone-200"
36+
/>
37+
<q
38+
class="block px-4 py-2 bg-orange-300 text-black italic text-center sm:px-8"
39+
>{{ fortune }}</q
40+
>
41+
</div>
42+
43+
<template v-if="reward">
44+
<p class="flex items-center gap-2">
45+
<img :src="itemUrl(reward.url)" :alt="reward.name" />
46+
<template v-if="reward.category === 'trophy'">
47+
You also got a badge!
48+
<NuxtLink to="/badges">See your badges.</NuxtLink>
49+
</template>
50+
</p>
51+
</template>
52+
</template>
53+
</main>
54+
55+
<footer>
56+
<form method="dialog" class="text-right">
57+
<button
58+
type="submit"
59+
class="btn btn-primary"
60+
:disabled="!unveiledCookie"
61+
>
62+
Thank you, Matthias
63+
</button>
64+
</form>
65+
</footer>
66+
</dialog>
67+
</template>
68+
69+
<script lang="ts" setup>
70+
import { itemUrl } from '#imports';
71+
72+
defineProps<{
73+
fortune?: string;
74+
reward?: Item;
75+
}>();
76+
77+
const config = useRuntimeConfig();
78+
const path = config.public.origin + config.public.baseUrl;
79+
const unveiledCookie = ref(false);
80+
const fortuneDialog = useTemplateRef('fortuneDialog');
81+
82+
defineExpose({
83+
showModal() {
84+
fortuneDialog.value?.showModal();
85+
},
86+
});
87+
</script>
88+
89+
<style scoped>
90+
dialog[open] {
91+
animation: fade-in 0.5s ease-in-out;
92+
}
93+
94+
.fortune-cover {
95+
animation: unveil 5s ease-in-out forwards;
96+
animation-delay: 1s;
97+
}
98+
99+
.glow {
100+
animation: animate-glow 3s ease-in-out infinite;
101+
}
102+
103+
@media (prefers-reduced-motion: reduce) {
104+
.fortune-cover,
105+
.glow {
106+
animation: none;
107+
opacity: 1;
108+
}
109+
}
110+
111+
@keyframes animate-glow {
112+
0% {
113+
box-shadow: 0px 0px 34px 20px rgba(255, 189, 46, 0.7);
114+
}
115+
50% {
116+
box-shadow: 0px 0px 34px 20px rgba(255, 189, 46, 1);
117+
}
118+
100% {
119+
box-shadow: 0px 0px 34px 20px rgba(255, 189, 46, 0.7);
120+
}
121+
}
122+
123+
@keyframes unveil {
124+
0% {
125+
width: 100%;
126+
}
127+
100% {
128+
width: 0%;
129+
}
130+
}
131+
132+
@keyframes fade-in {
133+
0% {
134+
opacity: 0;
135+
}
136+
100% {
137+
opacity: 1;
138+
}
139+
}
140+
</style>

‎components/ItemPanel.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!-- eslint-disable vue/no-v-html -->
22
<template>
3-
<VDropdown :triggers="['hover']" class="shrink-0">
3+
<VDropdown :triggers="['hover']" class="shrink-0" :aria-id="id">
44
<img class="inline ml-1" :src="itemUrl(item.url)" :alt="item.name" :width />
55
<template #popper>
66
<div class="w-full max-w-56 p-2">
@@ -16,7 +16,9 @@
1616
import itemUrl from '~/utils/itemUrl';
1717
1818
defineProps<{
19-
item: Item;
19+
item: Pick<Item, 'url' | 'name' | 'description' | 'artist'>;
2020
width?: string;
2121
}>();
22+
23+
const id = useId();
2224
</script>

‎database/schema.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -251,14 +251,14 @@ export const itemsTable = mysqlTable('items', {
251251
.autoincrement()
252252
.primaryKey(),
253253
name: varchar('name', {
254-
length: 24,
254+
length: 48,
255255
}).notNull(),
256256
url: varchar('url', {
257-
length: 24,
257+
length: 64,
258258
}).notNull(),
259259
category: varchar('category', {
260260
length: 24,
261-
enum: ['flair', 'trophy'],
261+
enum: ['flair', 'trophy', 'consumable'],
262262
}).notNull(),
263263
availableFrom: datetime('available_from', {
264264
mode: 'string',

‎drizzle/0028_update_item_seeds.sql‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,5 +50,6 @@ INSERT IGNORE INTO `items` (`id`, `name`, `url`, `category`, `available_from`, `
5050
(45, "Bauble (green)", "bauble-green.webp", 'flair', '2024-12-01 00:00:00', '2025-01-07 00:00:00', "You can hang it on your wreath.", 50, "Inghelene"),
5151
(46, "Bauble (red)", "bauble-red.webp", 'flair', '2024-12-01 00:00:00', "2025-01-07 00:00:00", "You don't have to hang it on your tree, it can also serve as a cat toy.", 50, "Inghelene"),
5252
(47, "Wreath (white)", "wreath-white.webp", 'flair', '2024-12-01 00:00:00', "2025-01-07 00:00:00", "'Tis the season.", 125, "Inghelene"),
53-
(48, "Wreath (multicolour)", "wreath-multicolour.webp", 'flair', '2024-12-01 00:00:00', "2025-01-07 00:00:00", "It's a wreath with gamer RGB lighting!", 125, "Inghelene");
54-
53+
(48, "Wreath (multicolour)", "wreath-multicolour.webp", 'flair', '2024-12-01 00:00:00', "2025-01-07 00:00:00", "It's a wreath with gamer RGB lighting!", 125, "Inghelene"),
54+
(49, "Fortune Cookie", "fortune-cookie.webp", "consumable", "2025-01-01 00:00:00", "2025-01-14 00:00:00", "Even if you get a bad fortune, at least you can eat the cookie.", 100, "Hourai"),
55+
(50, 'New Year 2025', 'badges/new-year-2025.webp', 'trophy', NULL, NULL, 'You had your 2025 fortune revealed by Matthias!', NULL, 'Hourai');

‎drizzle/0034_busy_freak.sql‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
ALTER TABLE `items` MODIFY COLUMN `name` varchar(48) NOT NULL;--> statement-breakpoint
2+
ALTER TABLE `items` MODIFY COLUMN `url` varchar(64) NOT NULL;

0 commit comments

Comments
 (0)