feat: Add AniList Badges Easter Event 2025 demo

4 files changed, 115 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;
+}