Add id to wish counter

src/routes/wish/_counter.svelte

@@ -5,19 +5,20 @@
   import Button from '../../components/Button.svelte';
   import Icon from '../../components/Icon.svelte';
 
+  export let id = '';
   export let name = '';
   let total = 0;
   let legendary = 0;
   let rare = 0;
 
-  $: id = `wish-counter-${name.toLowerCase().replace(/ /g, '-')}`;
+  $: path = `wish-counter-${id}`;
 
   onMount(() => {
     readLocalData();
   });
 
   function readLocalData() {
-    const data = localStorage.getItem(id);
+    const data = localStorage.getItem(path);
     if (data !== null) {
       const counterData = JSON.parse(data);
       total = counterData.total;
@@ -32,7 +33,7 @@
       legendary,
       rare,
     });
-    localStorage.setItem(id, data);
+    localStorage.setItem(path, data);
   }
 
   function add(val) {
@@ -67,6 +68,7 @@
 
   function getRare() {
     total += 1;
+    legendary += 1;
     rare = 0;
     saveData();
   }

src/routes/wish/index.svelte

@@ -8,8 +8,8 @@
 <div class="pt-20 lg:ml-64 lg:pt-8 p-8">
   <h1 class="font-display font-black text-5xl text-white mb-2">Wish Counter</h1>
   <div class="grid gap-4 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 max-w-screen-xl">
-    <Counter name="Promotional Character" />
-    <Counter name="Promotional Weapon" />
-    <Counter name="Standard" />
+    <Counter id="character-event" name="Character Event" />
+    <Counter id="weapon-event" name="Weapon Event" />
+    <Counter id="standard" name="Standard" />
   </div>
 </div>