feat: Add AniList Badges Easter Event 2025 demo

5 files changed, 206 insertions, 0 deletions

diff --git a/src/lib/Events/AniListBadges/EasterEvent2025/ClickableAreaPage.svelte b/src/lib/Events/AniListBadges/EasterEvent2025/ClickableAreaPage.svelte
new file mode 100644
index 00000000..65144588
--- /dev/null
+++ b/src/lib/Events/AniListBadges/EasterEvent2025/ClickableAreaPage.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  export let prompt: string;
+  export let images: string[] = [];
+  export let correctIndex: number;
+  export let onComplete: () => void;
+
+  let selectedIndex = -1;
+
+  const handleClick = (index: number) => {
+    selectedIndex = index;
+
+    if (index === correctIndex) setTimeout(onComplete, 500);
+  };
+</script>
+
+<div class="container">
+  <p class="big-text">{prompt}</p>
+
+  {#each images as url, i}
+    <a href={'#'} on:click={() => handleClick(i)}>
+      <img
+        src={url}
+        alt="Option {i + 1}"
+        style={selectedIndex === i
+          ? i === correctIndex
+            ? 'border: 3px solid var(--base0B)'
+            : 'border: 3px solid var(--base0E)'
+          : 'border: 3px solid transparent'}
+      />
+    </a>
+  {/each}
+</div>
+
+<style>
+  img {
+    width: 33vh;
+    cursor: pointer;
+    object-fit: cover;
+  }
+</style>
diff --git a/src/lib/Events/AniListBadges/EasterEvent2025/MultipleChoicePage.svelte b/src/lib/Events/AniListBadges/EasterEvent2025/MultipleChoicePage.svelte
new file mode 100644
index 00000000..c6b49461
--- /dev/null
+++ b/src/lib/Events/AniListBadges/EasterEvent2025/MultipleChoicePage.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  export let prompt: string;
+  export let answers: string[] = [];
+  export let correctIndex: number;
+  export let onComplete: () => void;
+
+  let selected = -1;
+
+  const handleChoice = (index: number) => {
+    if (index === correctIndex) {
+      selected = index;
+
+      setTimeout(onComplete, 500);
+    } else {
+      selected = index;
+    }
+  };
+</script>
+
+<div class="container">
+  <p class="big-text">{prompt}</p>
+
+  {#each answers as answer, i}
+    <button
+      on:click={() => handleChoice(i)}
+      style={selected === i
+        ? i === correctIndex
+          ? 'background: var(--base0B)'
+          : 'background: var(--base0E)'
+        : ''}
+    >
+      {answer}
+    </button>
+  {/each}
+</div>
diff --git a/src/lib/Events/AniListBadges/EasterEvent2025/RiddlePage.svelte b/src/lib/Events/AniListBadges/EasterEvent2025/RiddlePage.svelte
new file mode 100644
index 00000000..a4927f01
--- /dev/null
+++ b/src/lib/Events/AniListBadges/EasterEvent2025/RiddlePage.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  export let riddle: string;
+  export let answer: string;
+  export let onComplete: () => void;
+  export let hint: string | undefined = undefined;
+
+  let userInput = '';
+
+  const checkAnswer = () => {
+    if (userInput.toLowerCase() === answer.toLowerCase()) {
+      setTimeout(onComplete, 500);
+    } else {
+      setTimeout(() => (userInput = ''), 500);
+    }
+  };
+</script>
+
+<div class="container">
+  <p class="big-text">{riddle}</p>
+
+  <input bind:value={userInput} on:keyup={(e) => e.key === 'Enter' && checkAnswer()} />
+
+  <button on:click={checkAnswer}>Submit</button>
+
+  {#if hint}
+    <br />
+
+    <p class="opaque">Hint: {hint}</p>
+  {/if}
+</div>
diff --git a/src/lib/Events/AniListBadges/EasterEvent2025/event.css b/src/lib/Events/AniListBadges/EasterEvent2025/event.css
new file mode 100644
index 00000000..c7556ae8
--- /dev/null
+++ b/src/lib/Events/AniListBadges/EasterEvent2025/event.css
@@ -0,0 +1,10 @@
+.big-text {
+  font-size: 1.5rem;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  align-items: center;
+}
diff --git a/src/routes/anilist-badges-easter-event-2025/+page.svelte b/src/routes/anilist-badges-easter-event-2025/+page.svelte
new file mode 100644
index 00000000..590b0d14
--- /dev/null
+++ b/src/routes/anilist-badges-easter-event-2025/+page.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import ClickableAreaPage from '$lib/Events/AniListBadges/EasterEvent2025/ClickableAreaPage.svelte';
+  import MultipleChoicePage from '$lib/Events/AniListBadges/EasterEvent2025/MultipleChoicePage.svelte';
+  import RiddlePage from '$lib/Events/AniListBadges/EasterEvent2025/RiddlePage.svelte';
+  import '$lib/Events/AniListBadges/EasterEvent2025/event.css';
+
+  const multipleChoiceAnswers = [
+    'The Beginning After the End',
+    'Domestic Girlfriend',
+    'Spy Classroom',
+    'Kaguya-sama: Love is War'
+  ];
+  const clickableAreaAnswers = [
+    'https://media1.tenor.com/m/RkgfXhcewvoAAAAC/rui-tachibana-tachibana-rui.gif',
+    'https://media1.tenor.com/m/fOBbcJOFZ-kAAAAC/hina-hina-tachibana.gif',
+    'https://media1.tenor.com/m/GQT7FHW-w-IAAAAC/anime-domestic-girlfriend.gif'
+  ];
+  let page = 0;
+
+  onMount(() => {
+    const urlParameters = new URLSearchParams(window.location.search);
+    const pageParameter = urlParameters.get('page');
+
+    if (pageParameter) page = parseInt(pageParameter) || 0;
+  });
+
+  const updatePage = (to: number | undefined = undefined) => {
+    const url = new URL(window.location.href);
+
+    if (to) {
+      page = to;
+    } else {
+      page += 1;
+    }
+
+    url.searchParams.set('page', page.toString());
+    window.history.replaceState(null, '', url.toString());
+  };
+</script>
+
+<div class="card main-content">
+  {#if page === 0}
+    <p class="big-text">Welcome to the Easter Egg Hunt!</p>
+    <button on:click={() => updatePage()}>Begin Hunt</button>
+    <br />
+    <p>due.moe × AniList Badges</p>
+  {:else if page === 1}
+    <MultipleChoicePage
+      prompt="Which of these anime has the best adaptation?"
+      answers={multipleChoiceAnswers}
+      correctIndex={1}
+      onComplete={() => updatePage()}
+    />
+  {:else if page === 2}
+    <ClickableAreaPage
+      prompt="Which of these scenes contain a little action?"
+      images={clickableAreaAnswers}
+      correctIndex={2}
+      onComplete={() => updatePage()}
+    />
+  {:else if page === 3}
+    <RiddlePage
+      riddle="An alternate way to refer to Domestic Girlfriend is ..."
+      answer="peak"
+      onComplete={() => updatePage()}
+      hint="peak"
+    />
+  {:else}
+    <p class="big-text">Congratulations! You won!</p>
+
+    <img
+      src="https://media1.tenor.com/m/S8zYyudMjXAAAAAC/domekano-domestic-girlfriend.gif"
+      alt="Anime scene"
+    />
+
+    <br />
+
+    <p>due.moe × AniList Badges</p>
+  {/if}
+</div>
+
+<style>
+  .main-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+</style>