Add random thing component

src/components/easteregg-banner/EastereggBanner.vue

@@ -10,6 +10,7 @@
                 <div class="flex-1">
                     <CookieEgg v-if="easteregg === 'cookie'" />
                     <FutureEgg v-if="easteregg === 'future'" />
+                    <SomethingEgg v-if="easteregg === 'change-something'" />
                     
                     <div class="mt-1 text-center">
                         <p v-if="found_eastereggs != total_eastereggs">{{ found_eastereggs }}/{{ total_eastereggs }} {{ t("easter eggs found") }}</p>
@@ -29,6 +30,7 @@
     import { getFoundEasterEggsCount, getTotalEasterEggsCount } from "@/utilities/easteregg_handler";
     import CookieEgg from "./eggs/Cookie.vue";
     import FutureEgg from "./eggs/Future.vue";
+    import SomethingEgg from "./eggs/Something.vue";
 
     const show_banner = ref(false);
     const easteregg = ref("");

src/components/easteregg-banner/eggs/Something.vue

@@ -0,0 +1,32 @@
+<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="image" alt="" class="h-full w-full" />
+            </div>
+        </div>
+
+        <div class="flex-1 ml-2">
+            <p class="font-bold text-base">{{ t("title") }}</p>
+            <p>{{ t("description") }}</p>
+        </div>
+    </div>
+    
+</template>
+
+<script setup lang="ts">
+    import { useI18n } from "vue-i18n";
+    import image from "@/assets/images/sad.png";
+
+    const { t } = useI18n({ messages: {
+        "en": {
+            "title": "You didn't like that?",
+            "description": "I hope this one is better"
+        },
+        "it": {
+            "title": "Non ti piaceva?",
+            "description": "Spero che questo sia meglio"
+        }
+    } });
+</script>

src/components/random-something/RandomSomething.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="w-52">
+        <img :src="current_image" alt="" class="h-40 max-w-xs max-w- mx-auto" :onclick="userChangeThing">
+        <p class="text-center text-sm mt-2 select-none">{{ t(current_name) }}</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { ref } from 'vue';
+    import { randomOfArray } from "@/utilities/random";
+    import { useI18n } from "vue-i18n";
+    import { addFoundEasterEgg } from "@/utilities/easteregg_handler";
+    import penguin_image from "@/assets/images/penguin.png";
+    import llama_image from "@/assets/images/llama.png";
+
+    const { t } = useI18n({ messages: {
+        "en": {
+            "penguin": "This is a penguin",
+            "llama": "This is a llama"
+        },
+        "it": {
+            "penguin": "Questo è un pinguino",
+            "llama": "Questo è un lama"
+        }
+    } });
+
+    const things = [
+        { name: "penguin", image: penguin_image },
+        { name: "llama", image: llama_image }
+    ];
+
+    const current_name = ref("");
+    const current_image = ref("");
+    
+    changeThing();
+
+
+    function changeThing() {
+        const to_show_thing = randomOfArray(things.filter((thing) => thing.name !== current_name.value));
+        
+        current_name.value = to_show_thing.name;
+        current_image.value = to_show_thing.image;
+    }
+
+    function userChangeThing() {
+        addFoundEasterEgg("change-something");
+        changeThing();
+    }
+</script>

src/utilities/easteregg_handler.ts

@@ -1,4 +1,4 @@
-const EASTER_EGGS = ["cookie", "future"];
+const EASTER_EGGS = ["cookie", "future", "change-something"];
 
 export function addFoundEasterEgg(name:string):void {
     if (!EASTER_EGGS.includes(name)) { return; }