[feat] christmas

src/lib/UI/MainMenu.svelte

@@ -8,11 +8,13 @@
   import { language } from "src/lang";
   import { getRisuHub } from "src/ts/characterCards";
   import RisuHubIcon from "./Realm/RealmHubIcon.svelte";
+  import Title from "./Title.svelte";
   let openHub = false
+
 </script>
 <div class="h-full w-full flex flex-col overflow-y-auto items-center">
     {#if !openHub}
-      <h2 class="text-4xl text-textcolor mb-0 mt-6 font-black">RisuAI</h2>
+      <Title />
       {#if (!isTauri) && (!isNodeServer)}
         <h3 class="text-textcolor2 mt-1">Version {appVer}{webAppSubVer}</h3>
       {:else}

src/lib/UI/Title.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { openURL } from "src/ts/storage/globalApi";
+
+    let specialDay = ''
+    const today = new Date()
+    if (today.getMonth() === 11 && today.getDate() >= 19) {
+        specialDay = 'christmas'
+    }
+    let iconAnimation = 0
+    let clicks = 0
+    let score = 0
+    let time = 10
+    let miniGameStart = false
+
+</script>
+
+<h2 class="text-4xl text-textcolor mb-0 mt-6 font-black relative">RisuAI
+    {#if specialDay === 'christmas'}
+        <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+        {#if clicks < 5}
+            <img src="./santa.png" alt="santa" class="absolute logo-top"
+                style:top={(-20 + iconAnimation).toFixed(0) + 'px'}
+                style:right={'-30px'}
+                on:click={async () => {
+                    iconAnimation = Math.random() * 300
+                    clicks++
+                    if(clicks === 5){
+                        iconAnimation = 0
+                    }
+                }}
+            >
+        {/if}
+    {/if}
+</h2>
+
+{#if clicks >= 5}
+    <div class="bg-black w-full p-3 mt-4 mb-4 rounded-md max-w-2xl">
+        <span class="font-semibold text-lg">Score: {score}</span><br>
+        <span class="font-semibold text-lg">Time: {time.toFixed(1)}</span>
+        <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+        <img src="./santa.png" alt="santa"
+            style:margin-left={iconAnimation + 'rem'}
+            class:grayscale={!miniGameStart}
+            on:click={async () => {
+                iconAnimation = Math.random() * 30
+                if(!miniGameStart){
+                    if(time === 0){
+                        time = 10
+                        iconAnimation = 0
+                        return
+                    }
+                    time = 10
+                    score = 1
+                    miniGameStart = true
+                    const timer = setInterval(() => {
+                        time -= 1
+                        if(time <= 0){
+                            miniGameStart = false
+                            clearInterval(timer)
+                        }
+                    }, 1000)
+                }
+                else{
+                    score++
+                }
+            }}
+        >
+    </div>
+{/if}