chore: fix lints and tests

2026-01-19 19:51:10 -08:00
parent da566f408e
commit 27f69cb308
11 changed files with 1128 additions and 1003 deletions
@@ -1,19 +1,19 @@
 <script lang="ts">
-  import { slide } from 'svelte/transition';
-  import { quintOut } from 'svelte/easing';
+  import { slide } from "svelte/transition";
+  import { quintOut } from "svelte/easing";
  import {
    achievementsStore,
    achievementProgress,
    achievementCategories,
-  } from '$lib/stores/achievements';
-  import type { Achievement } from '$lib/types/achievements';
+  } from "$lib/stores/achievements";
+  import type { Achievement } from "$lib/types/achievements";

  interface Props {
    isOpen: boolean;
    onClose?: () => void;
  }

-  const { isOpen = $bindable(false), onClose } = $props<Props>();
+  const { isOpen = $bindable(false), onClose }: Props = $props();
  let selectedCategory = $state<string | null>(null);

  const achievementsState = $derived($achievementsStore);
@@ -21,33 +21,45 @@

  function getRarityColor(rarity: string): string {
    switch (rarity) {
-      case 'legendary': return 'text-yellow-500 dark:text-yellow-400';
-      case 'epic': return 'text-purple-500 dark:text-purple-400';
-      case 'rare': return 'text-blue-500 dark:text-blue-400';
-      default: return 'text-green-500 dark:text-green-400';
+      case "legendary":
+        return "text-yellow-500 dark:text-yellow-400";
+      case "epic":
+        return "text-purple-500 dark:text-purple-400";
+      case "rare":
+        return "text-blue-500 dark:text-blue-400";
+      default:
+        return "text-green-500 dark:text-green-400";
    }
  }

  function getRarityBg(rarity: string): string {
    switch (rarity) {
-      case 'legendary': return 'bg-yellow-500/10';
-      case 'epic': return 'bg-purple-500/10';
-      case 'rare': return 'bg-blue-500/10';
-      default: return 'bg-green-500/10';
+      case "legendary":
+        return "bg-yellow-500/10";
+      case "epic":
+        return "bg-purple-500/10";
+      case "rare":
+        return "bg-blue-500/10";
+      default:
+        return "bg-green-500/10";
    }
  }

  function formatDate(date: Date | undefined): string {
-    if (!date) return '';
-    return new Date(date).toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
+    if (!date) return "";
+    return new Date(date).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
    });
  }

  function getAchievementsForCategory(categoryIds: string[]): Achievement[] {
-    return categoryIds.map(id => achievementsState.achievements[id as keyof typeof achievementsState.achievements]).filter(Boolean);
+    return categoryIds
+      .map(
+        (id) => achievementsState.achievements[id as keyof typeof achievementsState.achievements]
+      )
+      .filter(Boolean);
  }
 </script>

@@ -56,7 +68,7 @@
  <div
    class="fixed inset-0 bg-black/50 z-40"
    onclick={onClose}
-    onkeydown={(e) => e.key === 'Escape' && onClose()}
+    onkeydown={(e) => e.key === "Escape" && onClose?.()}
    role="button"
    tabindex="-1"
    aria-label="Close achievements panel"
@@ -66,7 +78,7 @@
  <div
    class="fixed left-0 top-0 h-full w-96 bg-[var(--bg-primary)] border-r border-[var(--border-color)]
           shadow-2xl z-50 flex flex-col"
-    transition:slide={{ duration: 300, easing: quintOut, axis: 'x' }}
+    transition:slide={{ duration: 300, easing: quintOut, axis: "x" }}
  >
    <!-- Header -->
    <div class="p-6 border-b border-[var(--border-color)]">
@@ -74,18 +86,26 @@
        <h2 class="text-2xl font-bold text-[var(--text-primary)]">Achievements</h2>
        <button
          onclick={onClose}
-          onkeydown={(e) => e.key === 'Enter' && onClose()}
+          onkeydown={(e) => e.key === "Enter" && onClose?.()}
          class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+          aria-label="Close achievements panel"
        >
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            ></path>
          </svg>
        </button>
      </div>

      <!-- Overall progress -->
      <div class="mt-4">
-        <div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 mb-2">
+        <div
+          class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 mb-2"
+        >
          <span>{progress.unlocked} / {progress.total} Unlocked</span>
          <span>{progress.percentage}%</span>
        </div>
@@ -100,14 +120,17 @@

    <!-- Categories -->
    <div class="flex-1 overflow-y-auto">
-      {#each achievementCategories as category}
+      {#each achievementCategories as category (category.name)}
        {@const achievements = getAchievementsForCategory(category.ids)}
-        {@const unlockedCount = achievements.filter(a => a.unlocked).length}
+        {@const unlockedCount = achievements.filter((a) => a.unlocked).length}

        <div class="border-b border-[var(--border-color)]">
          <button
-            onclick={() => selectedCategory = selectedCategory === category.name ? null : category.name}
-            onkeydown={(e) => e.key === 'Enter' && (selectedCategory = selectedCategory === category.name ? null : category.name)}
+            onclick={() =>
+              (selectedCategory = selectedCategory === category.name ? null : category.name)}
+            onkeydown={(e) =>
+              e.key === "Enter" &&
+              (selectedCategory = selectedCategory === category.name ? null : category.name)}
            class="w-full p-4 text-left hover:bg-[var(--bg-secondary)] transition-colors"
          >
            <div class="flex items-center justify-between">
@@ -120,12 +143,19 @@
                  {unlockedCount} / {achievements.length}
                </span>
                <svg
-                  class="w-5 h-5 transition-transform {selectedCategory === category.name ? 'rotate-180' : ''}"
+                  class="w-5 h-5 transition-transform {selectedCategory === category.name
+                    ? 'rotate-180'
+                    : ''}"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M19 9l-7 7-7-7"
+                  ></path>
                </svg>
              </div>
            </div>
@@ -133,9 +163,11 @@

          {#if selectedCategory === category.name}
            <div class="p-4 space-y-3" transition:slide={{ duration: 200, easing: quintOut }}>
-              {#each achievements as achievement}
+              {#each achievements as achievement (achievement.id)}
                <div
-                  class="p-3 rounded-lg border {achievement.unlocked ? 'border-[var(--border-color)] bg-[var(--bg-secondary)]' : 'border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 opacity-50'}"
+                  class="p-3 rounded-lg border {achievement.unlocked
+                    ? 'border-[var(--border-color)] bg-[var(--bg-secondary)]'
+                    : 'border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 opacity-50'}"
                >
                  <div class="flex items-start gap-3">
                    <!-- Icon -->
@@ -149,7 +181,11 @@
                        <h4 class="font-semibold text-[var(--text-primary)]">
                          {achievement.name}
                        </h4>
-                        <span class="text-xs px-2 py-0.5 rounded-full {getRarityBg(achievement.rarity)} {getRarityColor(achievement.rarity)} capitalize">
+                        <span
+                          class="text-xs px-2 py-0.5 rounded-full {getRarityBg(
+                            achievement.rarity
+                          )} {getRarityColor(achievement.rarity)} capitalize"
+                        >
                          {achievement.rarity}
                        </span>
                      </div>
@@ -171,7 +207,10 @@
                          <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-1.5">
                            <div
                              class="bg-gray-500 h-1.5 rounded-full transition-all duration-300"
-                              style="width: {Math.min((achievement.progress / achievement.maxProgress) * 100, 100)}%"
+                              style="width: {Math.min(
+                                (achievement.progress / achievement.maxProgress) * 100,
+                                100
+                              )}%"
                            ></div>
                          </div>
                        </div>
@@ -193,8 +232,12 @@
        <div class="flex items-center gap-2">
          <span class="text-xl">{achievementsState.lastUnlocked.icon}</span>
          <div>
-            <p class="font-semibold text-[var(--text-primary)]">{achievementsState.lastUnlocked.name}</p>
-            <p class="text-xs text-gray-500">{formatDate(achievementsState.lastUnlocked.unlockedAt)}</p>
+            <p class="font-semibold text-[var(--text-primary)]">
+              {achievementsState.lastUnlocked.name}
+            </p>
+            <p class="text-xs text-gray-500">
+              {formatDate(achievementsState.lastUnlocked.unlockedAt)}
+            </p>
          </div>
        </div>
      </div>
@@ -220,4 +263,4 @@
  :global(.overflow-y-auto::-webkit-scrollbar-thumb:hover) {
    background: var(--accent-primary);
  }
-</style>
+</style>