diff --git a/public/santa.png b/public/santa.png new file mode 100644 index 00000000..89b6d736 Binary files /dev/null and b/public/santa.png differ diff --git a/src/lib/UI/MainMenu.svelte b/src/lib/UI/MainMenu.svelte index 548bbc13..7195ee2e 100644 --- a/src/lib/UI/MainMenu.svelte +++ b/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 +
{#if !openHub} -

RisuAI

+ {#if (!isTauri) && (!isNodeServer)} <h3 class="text-textcolor2 mt-1">Version {appVer}{webAppSubVer}</h3> {:else} diff --git a/src/lib/UI/Title.svelte b/src/lib/UI/Title.svelte new file mode 100644 index 00000000..e5b8daa1 --- /dev/null +++ b/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} \ No newline at end of file