Merge pull request #5 from funkyFangs/improve-history

🚸 add history details view
funkyFangs · Oct 31, 2024 · 64a58a0 · 64a58a0
2 parents aaf4ce7 + 74ea9eb
commit 64a58a0
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 66 deletions.
diff --git a/src/lib/menu/tracker/create/CreateTracker.svelte b/src/lib/menu/tracker/create/CreateTracker.svelte
@@ -96,12 +96,6 @@
 
 <div id="create-tracker">
   <table>
-    <thead>
-      <tr>
-        <th scope="col">Field</th>
-        <th scope="col">Value</th>
-      </tr>
-    </thead>
     <tbody>
       <tr>
         <th scope="row"><label for="version">Version</label></th>
@@ -220,10 +214,6 @@
     font-size: 15pt;
   }
 
-  thead > tr > th {
-    font-size: 1.25em;
-  }
-
   td {
     display: flex;
     align-items: center;

diff --git a/src/lib/menu/tracker/view/ViewTrackers.svelte b/src/lib/menu/tracker/view/ViewTrackers.svelte
@@ -117,10 +117,12 @@
               max: 0
             }
           : undefined,
+        complete: false,
         method: createdHuntTracker.method,
         generation: createdHuntTracker.generation,
         versionGroup: createdHuntTracker.versionGroup,
         version: createdHuntTracker.version,
+        shinyCharm: createdHuntTracker.shinyCharm,
         pokemonSpecies: createdHuntTracker.pokemonSpecies.name,
         pokemon:
           createdHuntTracker.pokemon?.name === createdHuntTracker.pokemonSpecies.name
@@ -130,8 +132,7 @@
           createdHuntTracker.pokemonForm?.name === createdHuntTracker.pokemon?.name
             ? undefined
             : createdHuntTracker.pokemonForm?.name,
-        female: createdHuntTracker.female,
-        complete: false
+        female: createdHuntTracker.female
       }
     ])
 

diff --git a/src/routes/history/+page.svelte b/src/routes/history/+page.svelte
@@ -1,82 +1,163 @@
 <script lang="ts">
-  import { formatPokemonSpeciesName } from '$lib/api/PokemonSpeciesResource'
   import { formatVersionName } from '$lib/api/VersionResource'
   import { formatPokemonName } from '$lib/api/PokemonResource'
-  import { HuntingMethod } from '$lib/api/HuntingMethod'
   import type { HuntTracker } from '$lib/api/HuntTracker'
   import { delimitedTitleCase } from '$lib/utilities/Strings'
+  import { formatPokemonSpeciesName } from '$lib/api/PokemonSpeciesResource'
+  import PokemonDetails from '$lib/menu/tracker/view/PokemonDetails.svelte'
+  import { fade } from 'svelte/transition'
+  import { HuntingMethod } from '$lib/api/HuntingMethod'
 
-  export let data
-
+  let { data } = $props()
   const history = data.history
 
-  function getUnit(method: HuntingMethod) {
-    switch (method) {
-      case HuntingMethod.POKE_RADAR:
-        return 'Encounters'
-      case HuntingMethod.CONSECUTIVE_FISHING:
-        return 'Reels'
-      case HuntingMethod.SOS_BATTLE:
-        return 'Allies'
-      case HuntingMethod.ULTRA_WARP_RIDE:
-        return 'Light Years'
-    }
-  }
-
   function getPokemon(record: HuntTracker) {
-    return record.pokemon ? formatPokemonName(record.pokemonSpecies, record.pokemon) : '-'
+    return record.pokemon
+      ? formatPokemonName(record.pokemonSpecies, record.pokemon)
+      : formatPokemonSpeciesName(record.pokemonSpecies)
   }
 
   function getPokemonForm(record: HuntTracker) {
     return record.pokemonForm ? delimitedTitleCase(record.pokemonForm) : '-'
   }
 
-  function getGender(record: HuntTracker) {
-    return record.female === undefined ? '-' : record.female ? 'Female' : 'Male'
+  function getMaxChainHeader(record: HuntTracker) {
+    switch (record.method) {
+      case HuntingMethod.POKE_RADAR:
+      case HuntingMethod.CONSECUTIVE_FISHING:
+      case HuntingMethod.SOS_BATTLE:
+        return 'Longest Chain'
+      case HuntingMethod.ULTRA_WARP_RIDE:
+        return 'Furthest Distance'
+    }
   }
 
-  function getMaximum(record: HuntTracker) {
-    return record.chain ? `${record.chain.max} ${getUnit(record.method)}` : '-'
+  function getMaxChain(record: HuntTracker) {
+    const max = record.chain!.max
+    switch (record.method) {
+      case HuntingMethod.POKE_RADAR:
+        return max === 1 ? '1 Encounter' : `${max} Encounters`
+      case HuntingMethod.CONSECUTIVE_FISHING:
+        return max === 1 ? '1 Reel' : `${max} Reels`
+      case HuntingMethod.SOS_BATTLE:
+        return max === 1 ? '1 Ally' : `${max} Allies`
+      case HuntingMethod.ULTRA_WARP_RIDE:
+        return max === 1 ? '1 Light Year' : `${max} Light Years`
+    }
   }
+
+  let selectedRecord = $state<HuntTracker>()
 </script>
 
 <h1>History</h1>
 
-{#if $history.length}
-  <table>
-    <thead>
-      <tr>
-        <th>Version</th>
-        <th>Method</th>
-        <th>Pokemon</th>
-        <th>Variety</th>
-        <th>Form</th>
-        <th>Gender</th>
-        <th>Count</th>
-        <th>Maximum</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each $history as record}
+<div id="history">
+  {#if $history.length}
+    <p>Click a record to view its details.</p>
+    <table id="records">
+      <thead>
         <tr>
-          <td><span>{formatVersionName(record.version)}</span></td>
-          <td><span>{record.method}</span></td>
-          <td><span>{formatPokemonSpeciesName(record.pokemonSpecies)}</span></td>
-          <td><span>{getPokemon(record)}</span></td>
-          <td><span>{getPokemonForm(record)}</span></td>
-          <td><span>{getGender(record)}</span></td>
-          <td><span>{record.count}</span></td>
-          <td><span>{getMaximum(record)}</span></td>
+          <th>Version</th>
+          <th>Method</th>
+          <th>Pokemon</th>
+          <th>Form</th>
+          <th>Count</th>
         </tr>
-      {/each}
-    </tbody>
-  </table>
-{:else}
-  <p>You don't have any shiny hunts in your history! Complete a shiny hunt to view your history.</p>
-{/if}
+      </thead>
+      <tbody>
+        {#each $history as record}
+          <tr onclick={() => (selectedRecord = record)}>
+            <td>
+              <span>{formatVersionName(record.version)}</span>
+            </td>
+            <td>
+              <span>{record.method}</span>
+            </td>
+            <td>
+              <span>{getPokemon(record)}</span>
+            </td>
+            <td>
+              <span>{getPokemonForm(record)}</span>
+            </td>
+            <td>
+              <span>{record.count}</span>
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+
+    {#if selectedRecord}
+      <div id="record-details" transition:fade={{ duration: 250 }}>
+        <PokemonDetails huntTracker={selectedRecord} />
+        <table>
+          <tbody>
+            <tr>
+              <th scope="row">Generation</th>
+              <td>{selectedRecord.generation}</td>
+            </tr>
+            <tr>
+              <th scope="row">Version</th>
+              <td>{formatVersionName(selectedRecord.version)}</td>
+            </tr>
+            <tr>
+              <th scope="row">Method</th>
+              <td>{selectedRecord.method}</td>
+            </tr>
+            <tr>
+              <th scope="row">Status</th>
+              <td>{selectedRecord.complete ? 'Found' : 'Not Found'}</td>
+            </tr>
+            {#if selectedRecord.shinyCharm !== undefined}
+              <tr>
+                <th scope="row">Shiny Charm</th>
+                <td>{selectedRecord.shinyCharm ? 'Yes' : 'No'}</td>
+              </tr>
+            {/if}
+            {#if selectedRecord.chain}
+              <tr>
+                <th scope="row">{getMaxChainHeader(selectedRecord)}</th>
+                <td>{getMaxChain(selectedRecord)}</td>
+              </tr>
+            {/if}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  {:else}
+    <p>
+      You don't have any shiny hunts in your history! Complete a shiny hunt to view your history.
+    </p>
+  {/if}
+</div>
 
 <style>
-  table {
-    margin-right: var(--gap-length);
+  #history {
+    display: flex;
+    flex-direction: column;
+    gap: var(--padding-length);
+  }
+
+  #records {
+    width: 100%;
+  }
+
+  #records > tbody > tr {
+    transition: background-color 0.125s;
+  }
+
+  #records > tbody > tr:hover {
+    background-color: var(--primary-light);
+  }
+
+  #record-details {
+    padding: var(--gap-length);
+    background-color: var(--primary-darker);
+    border-radius: var(--border-radius);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--padding-length);
   }
 </style>