✨ add delete button, separate pokemon details, fix hunting method issue

src/lib/api/HuntingMethod.ts

@@ -90,5 +90,6 @@ export function getToolTip(huntingMethod: HuntingMethod) {
 export const CHAIN_HUNTING_METHODS = new Set([
   HuntingMethod.POKE_RADAR,
   HuntingMethod.CONSECUTIVE_FISHING,
-  HuntingMethod.SOS_BATTLE
+  HuntingMethod.SOS_BATTLE,
+  HuntingMethod.ULTRA_WARP_RIDE
 ])

src/lib/menu/tracker/counters/PokeRadarCounter.svelte

@@ -25,16 +25,20 @@ If you wanted to track a Poké Radar hunt in Pokémon X with the shiny charm equ
 -->
 <script lang="ts">
   import Fraction from '$lib/menu/tracker/counters/Odds.svelte'
-  import { sanitizeInteger } from '$lib/utilities/Strings'
 
-  export let chains: number = 0
-  export let currentChainLength: number = 0
-  export let maxChainLength: number = 0
-  export let generation: number
-  export let shinyCharm: boolean = false
-
-  $: chains = sanitizeInteger(chains)
-  $: currentChainLength = sanitizeInteger(currentChainLength)
+  let {
+    chains = $bindable(0),
+    currentChainLength = $bindable(0),
+    maxChainLength = $bindable(0),
+    generation = $bindable(),
+    shinyCharm = $bindable(false)
+  }: {
+    chains: number
+    currentChainLength: number
+    maxChainLength: number
+    generation: number
+    shinyCharm: boolean
+  } = $props()
 
   function incrementChain() {
     currentChainLength += 1
@@ -62,28 +66,30 @@ If you wanted to track a Poké Radar hunt in Pokémon X with the shiny charm equ
     return odds
   }
 
-  $: odds = getOdds(currentChainLength)
+  let odds = $derived(getOdds(currentChainLength))
 </script>
 
 <div id="counter">
-  <button on:click={resetChain} disabled={currentChainLength === 0}>&#10227;</button>
+  <button onclick={resetChain} disabled={currentChainLength === 0}>&#10227;</button>
   <table>
     <thead>
       <tr>
         <th><label for="chain-length">Chain Length</label></th>
         <th><label for="chains">Number of Chains</label></th>
+        <th><label for="longest-chain">Longest Chain</label></th>
         <th><label for="odds">Odds</label></th>
       </tr>
     </thead>
     <tbody>
       <tr>
-        <td><input id="chain-length" bind:value={currentChainLength} /></td>
-        <td><input id="chains" bind:value={chains} /></td>
+        <td><input type="number" min="0" id="chain-length" bind:value={currentChainLength} /></td>
+        <td><input type="number" min="0" id="chains" bind:value={chains} /></td>
+        <td><input type="number" min="0" id="longest-chain" bind:value={maxChainLength} /></td>
         <td><Fraction id="odds" numerator={odds} denominator={65536} /></td>
       </tr>
     </tbody>
   </table>
-  <button on:click={incrementChain}>&plus;</button>
+  <button onclick={incrementChain}>&plus;</button>
 </div>
 
 <style>
@@ -115,4 +121,15 @@ If you wanted to track a Poké Radar hunt in Pokémon X with the shiny charm equ
     height: 87px;
     font-size: 1.5em;
   }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type='number'] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
 </style>

src/lib/menu/tracker/view/PokemonDetails.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { formatPokemonSpeciesName } from '$lib/api/PokemonSpeciesResource.js'
+  import { formatPokemonName } from '$lib/api/PokemonResource.js'
+  import { delimitedTitleCase } from '$lib/utilities/Strings.js'
+  import type { HuntTracker } from '$lib/api/HuntTracker'
+
+  let { huntTracker = $bindable() }: { huntTracker: HuntTracker } = $props()
+</script>
+
+<section>
+  <h1 class="pokemon-species">{formatPokemonSpeciesName(huntTracker.pokemonSpecies)}</h1>
+  {#if huntTracker.pokemon}
+    <h2 class="pokemon">{formatPokemonName(huntTracker.pokemonSpecies, huntTracker.pokemon)}</h2>
+  {/if}
+  {#if huntTracker.pokemonForm}
+    <h2 class="pokemon-form">{delimitedTitleCase(huntTracker.pokemonForm)}</h2>
+  {/if}
+</section>
+
+<style>
+  section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-length);
+    align-items: center;
+    justify-content: center;
+  }
+</style>

src/lib/menu/tracker/view/ViewTrackers.svelte

@@ -11,9 +11,8 @@
   import SpriteDisplay from '$lib/menu/tracker/sprites/SpriteDisplay.svelte'
   import { CHAIN_HUNTING_METHODS } from '$lib/api/HuntingMethod'
   import type { GenerationalSprites, Sprites } from '$lib/api/SpritesResource'
-  import { delimitedTitleCase } from '$lib/utilities/Strings'
-  import { formatPokemonName } from '$lib/api/PokemonResource'
   import Device from 'svelte-device-info'
+  import PokemonDetails from '$lib/menu/tracker/view/PokemonDetails.svelte'
 
   export let huntTrackers: Writable<HuntTracker[]>
   export let history: Writable<HuntTracker[]>
@@ -67,7 +66,7 @@
     selectedTrackerIndex.update((selectedTrackerIndex) => Math.max(selectedTrackerIndex - 1, 0))
   }
 
-  function closeTracker(index: number, huntTracker: HuntTracker) {
+  function closeTracker(index: number, huntTracker: HuntTracker = $huntTrackers[index]) {
     if (confirm('Are you sure you want to close this shiny hunt?')) {
       deleteTracker(index, huntTracker)
     }
@@ -184,22 +183,20 @@
   {#if creatingTracker}
     <CreateTracker {generations} created={onTrackerCreated} />
   {:else if $huntTrackers.length > 0}
+    <button
+      id="delete-tracker"
+      on:click={() => closeTracker($selectedTrackerIndex)}
+      class:hoverable={Device.canHover}>🗑</button
+    >
     {#each $huntTrackers as huntTracker, index}
       <div
         id="tracker-{index + 1}"
         role="tabpanel"
         aria-labelledby="tab-{index + 1}"
         class:invisible={index !== $selectedTrackerIndex}
       >
-        <span class="pokemon-name">
-          {formatPokemonSpeciesName(huntTracker.pokemonSpecies)}
-        </span>
-        {#if huntTracker.pokemon}
-          <span>{formatPokemonName(huntTracker.pokemonSpecies, huntTracker.pokemon)}</span>
-        {/if}
-        {#if huntTracker.pokemonForm}
-          <span>{delimitedTitleCase(huntTracker.pokemonForm)}</span>
-        {/if}
+        <PokemonDetails {huntTracker} />
+
         <table>
           <thead>
             <tr>
@@ -316,8 +313,7 @@
   [role='tabpanel'] {
     display: flex;
     flex-direction: column;
-    gap: 5px;
-    justify-content: center;
+    gap: var(--padding-length);
   }
 
   [role='tabpanel'] > * {
@@ -329,13 +325,29 @@
     display: none;
   }
 
-  .pokemon-name {
+  .primary-button {
+    font-size: 1.5em;
     font-weight: bold;
-    font-size: 2em;
   }
 
-  .primary-button {
+  #delete-tracker {
+    background: none;
+    position: fixed;
+    padding: 0;
+    color: var(--font-color);
     font-size: 1.5em;
-    font-weight: bold;
+    width: 34px;
+    text-align: center;
+    @media (width > 1530px) {
+      right: calc((100vw - 1500px) / 2 + var(--gap-length));
+    }
+    @media (width <= 1530px) {
+      right: calc(2 * var(--gap-length));
+    }
+  }
+
+  #delete-tracker.hoverable:hover,
+  #delete-tracker:not(.hoverable) {
+    background-color: var(--primary-dark);
   }
 </style>

src/routes/history/+page.svelte

@@ -53,7 +53,7 @@
         <th>Form</th>
         <th>Gender</th>
         <th>Count</th>
-        <th>Status</th>
+        <th>Maximum</th>
       </tr>
     </thead>
     <tbody>