Migration to Nuxt3

components/easteregg-banner/EastereggBanner.vue

@@ -0,0 +1,64 @@
+<template>
+<ClientOnly>
+    <div v-if="show_banner" class="fixed top-0 left-0 w-full pointer-events-none z-50">
+
+        <div :class="`border rounded-sm mx-auto w-fit max-w-xs md:max-w-md pointer-events-auto
+                    bg-slate-200/90 border-slate-700 dark:bg-slate-800/90 dark:border-slate-400
+                      transition-opacity ${show_banner ? 'opacity-100 duration-300 p-3 px-5 my-2' : 'opacity-0 duration-200'}`"
+            @click="dismiss">
+            
+            <div class="flex text-sm">
+                <div class="flex-1">
+                    <CookieEgg v-if="easteregg === 'cookie'" />
+                    <FutureEgg v-if="easteregg === 'future'" />
+                    <SomethingEgg v-if="easteregg === 'change-something'" />
+                    <PictureBrightEgg v-if="easteregg === 'picture-bright'" />
+                    <PictureNoLightEgg v-if="easteregg === 'picture-nolights'" />
+                    
+                    <div class="mt-1 text-center">
+                        <p v-if="found_eastereggs != total_eastereggs">{{ found_eastereggs }}/{{ total_eastereggs }} {{ $t("easter eggs found") }}</p>
+                        <p v-if="found_eastereggs === total_eastereggs">{{ $t("all easter eggs found") }}</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+</ClientOnly>
+</template>
+
+<script setup lang="ts">
+    const show_banner = ref(false);
+    const easteregg = ref("");
+    const total_eastereggs = ref(getTotalEasterEggsCount());
+    const found_eastereggs = ref(0);
+
+
+    onMounted(() => {
+        found_eastereggs.value = getFoundEasterEggsCount();
+    })
+
+
+    let current_dismiss_timeout:NodeJS.Timeout|null = null;
+
+    function show(easteregg_name:string) {
+        easteregg.value = easteregg_name;
+        found_eastereggs.value = getFoundEasterEggsCount();
+        show_banner.value = true;
+        
+        if (current_dismiss_timeout) { clearTimeout(current_dismiss_timeout) }
+        current_dismiss_timeout = setTimeout(() => {
+            dismiss();
+        }, 7000);
+    }
+
+    function dismiss() {
+        show_banner.value = false;
+    }
+
+
+    defineExpose({
+        show
+    })
+</script>

components/easteregg-banner/eggs/CookieEgg.vue

@@ -0,0 +1,16 @@
+<template>
+
+    <div class="flex justify-center text-sm">
+        <div class="flex items-center justify-center">
+            <div class="w-10 h-10 flex items-center justify-center overflow-hidden">
+                <img src="~/assets/images/cookie.png" alt="" class="h-full w-full" />
+            </div>
+        </div>
+
+        <div class="flex-1 ml-2">
+            <p class="font-bold text-base">{{ $t("cookie.title") }}</p>
+            <p>{{ $t("cookie.description") }}</p>
+        </div>
+    </div>
+
+</template>

components/easteregg-banner/eggs/FutureEgg.vue

@@ -0,0 +1,16 @@
+<template>
+
+    <div class="flex text-sm">
+        <div class="flex items-center justify-center">
+            <div class="w-10 h-10 flex items-center justify-center overflow-hidden">
+                <img src="~/assets/images/future.png" alt="" class="h-full w-full" />
+            </div>
+        </div>
+
+        <div class="flex-1 ml-2">
+            <p class="font-bold text-base">{{ $t("future.title") }}</p>
+            <p>{{ $t("future.description") }}</p>
+        </div>
+    </div>
+    
+</template>

components/easteregg-banner/eggs/PictureBrightEgg.vue

@@ -0,0 +1,25 @@
+<template>
+<ClientOnly>
+    <div class="flex text-sm">
+        <div class="flex items-center justify-center">
+            <div class="w-10 h-10 flex items-center justify-center overflow-hidden">
+                <img src="~/assets/images/sun.png" alt="" class="h-full w-full" />
+            </div>
+        </div>
+
+        <div class="flex-1 ml-2">
+            <p class="font-bold text-base">{{ $t("bright.title") }}</p>
+            <p v-if="!dark_unlocked">{{ $t("bright.description") }}</p>
+            <p v-if="dark_unlocked">{{ $t("bright_either.description") }}</p>
+        </div>
+    </div>
+</ClientOnly>
+</template>
+
+<script setup lang="ts">
+    const dark_unlocked = ref(false);
+
+    onMounted(() => {
+        dark_unlocked.value = getFoundEasterEggs().includes("picture-nolights");
+    });
+</script>

components/easteregg-banner/eggs/PictureNoLightEgg.vue

@@ -0,0 +1,25 @@
+<template>
+<ClientOnly>
+    <div class="flex text-sm">
+        <div class="flex items-center justify-center">
+            <div class="w-10 h-10 flex items-center justify-center overflow-hidden">
+                <img src="~/assets/images/moon.png" alt="" class="h-full w-full" />
+            </div>
+        </div>
+
+        <div class="flex-1 ml-2">
+            <p class="font-bold text-base">{{ $t("dark.title") }}</p>
+            <p v-if="!light_unlocked">{{ $t("dark.description") }}</p>
+            <p v-if="light_unlocked">{{ $t("dark_either.description") }}</p>
+        </div>
+    </div>
+</ClientOnly>
+</template>
+
+<script setup lang="ts">
+    const light_unlocked = ref(false);
+
+    onMounted(() => {
+        light_unlocked.value = getFoundEasterEggs().includes("picture-bright");
+    });
+</script>

components/easteregg-banner/eggs/SomethingEgg.vue

@@ -0,0 +1,16 @@
+<template>
+
+    <div class="flex text-sm">
+        <div class="flex items-center justify-center">
+            <div class="w-10 h-10 flex items-center justify-center overflow-hidden">
+                <img src="~/assets/images/sad.svg" alt="" class="h-full w-full dark:invert" />
+            </div>
+        </div>
+
+        <div class="flex-1 ml-2">
+            <p class="font-bold text-base">{{ $t("something.title") }}</p>
+            <p>{{ $t("something.description") }}</p>
+        </div>
+    </div>
+    
+</template>