Merge pull request #28 from funkyFangs/add-new-settings

Add new settings
funkyFangs · Jan 8, 2025 · d33df88 · d33df88
2 parents a8d67fc + a92ec8f
commit d33df88
Show file tree

Hide file tree

Showing 19 changed files with 423 additions and 232 deletions.
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/src/app.less b/src/app.less
@@ -68,7 +68,8 @@ button {
 
 input,
 select,
-button {
+button,
+details {
   &,
   &:hover {
     /* Transitions */

diff --git a/src/lib/menu/HeaderMenu.svelte b/src/lib/menu/HeaderMenu.svelte
@@ -19,19 +19,16 @@ If you wanted to display a header menu titled "My Application" with an anchor ca
 ```
 -->
 <script lang="ts">
-  import { fly } from 'svelte/transition'
   import { Hamburger } from 'svelte-hamburgers'
-  import type { Snippet } from 'svelte'
 
   let {
     title,
-    items = []
+    open = $bindable()
   }: {
     title: string
-    items: Snippet[]
+    open: boolean
   } = $props()
 
-  let open = $state(false)
   let color = $state('white')
 
   function onMouseEnter() {
@@ -50,14 +47,6 @@ If you wanted to display a header menu titled "My Application" with an anchor ca
   <h1 id="title" class="unselectable">{title}</h1>
 </header>
 
-{#if open && items.length}
-  <menu transition:fly={{ x: '-100%' }}>
-    {#each items as item}
-      <li>{@render item()}</li>
-    {/each}
-  </menu>
-{/if}
-
 <style lang="less">
   @import '../../style/palette';
   @import '../../style/positioning';
@@ -83,34 +72,6 @@ If you wanted to display a header menu titled "My Application" with an anchor ca
     }
   }
 
-  menu {
-    /* Positioning */
-    position: fixed;
-    height: calc(100% - 2.5 * @top-bar-height);
-    width: @side-bar-width;
-    max-width: 100vw;
-    padding: @gap-length;
-    top: @top-bar-height;
-    margin: 0;
-    z-index: 3;
-
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-    gap: @gap-length;
-
-    /* Palette */
-    background-color: @asparagus;
-    color: contrast($background-color);
-  }
-
-  li {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-
   #title {
     margin: 0 @gap-length 0 0;
     font-weight: normal;

diff --git a/src/lib/menu/SideBar.svelte b/src/lib/menu/SideBar.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import { fly } from 'svelte/transition'
+
+  let { items }: { items: Snippet[] } = $props()
+</script>
+
+<menu transition:fly={{ x: '-100%' }}>
+  {#each items as item}
+    <li>{@render item()}</li>
+  {/each}
+</menu>
+
+<style lang="less">
+  @import '../../style/palette';
+  @import '../../style/positioning';
+
+  menu {
+    /* Positioning */
+    position: fixed;
+    height: calc(100% - 2.5 * @top-bar-height);
+    width: @side-bar-width;
+    max-width: 100vw;
+    padding: @gap-length;
+    top: @top-bar-height;
+    margin: 0;
+    z-index: 3;
+
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: @gap-length;
+
+    /* Palette */
+    background-color: @asparagus;
+    color: contrast($background-color);
+  }
+
+  li {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>
diff --git a/src/lib/menu/tracker/counters/BrilliantPokemonCounter.svelte b/src/lib/menu/tracker/counters/BrilliantPokemonCounter.svelte
@@ -2,37 +2,55 @@
   import Odds from '$lib/menu/tracker/counters/odds/Odds.svelte'
   import type { HuntTracker } from '$lib/api/HuntTracker'
   import { getBrilliantPokemonOdds } from '$lib/menu/tracker/counters/odds/Odds'
+  import { fade } from 'svelte/transition'
 
   let {
-    index,
     huntTracker,
-    count = $bindable()
+    count = $bindable(),
+    showPercentage,
+    showFraction
   }: {
-    index: number
     huntTracker: HuntTracker
     count: number
+    showPercentage: boolean
+    showFraction: boolean
   } = $props()
 
   function incrementCount() {
     count += 1
   }
 
   let odds = $derived(getBrilliantPokemonOdds(huntTracker))
+  let id = $derived(huntTracker.id)
+  let showOdds = $derived(showFraction || showPercentage)
 </script>
 
-<div id="counter">
+<div class="counter-container">
   <table>
     <thead>
       <tr>
-        <th scope="col"><label for="count-{index}">No. Battled</label></th>
-        <th scope="col"><label for="odds-{index}">Odds</label></th>
+        <th scope="col"><label for="count-{id}">No. Battled</label></th>
+        {#if showOdds}
+          <th transition:fade={{ duration: 200 }} scope="col"
+            ><label for="odds-{id}">Odds</label></th
+          >
+        {/if}
       </tr>
     </thead>
     <tbody>
       <tr>
-        <td><input type="number" min="0" id="count-{index}" bind:value={count} /></td>
-        <td><Odds id="odds-{index}" numerator={odds.numerator} denominator={odds.denominator} /></td
-        >
+        <td><input type="number" min="0" id="count-{id}" bind:value={count} /></td>
+        {#if showOdds}
+          <td transition:fade={{ duration: 200 }}
+            ><Odds
+              id="odds-{id}"
+              numerator={odds.numerator}
+              denominator={odds.denominator}
+              {showFraction}
+              {showPercentage}
+            /></td
+          >
+        {/if}
       </tr>
     </tbody>
   </table>
@@ -43,11 +61,10 @@
   @import '../../../../style/palette';
   @import '../../../../style/positioning';
 
-  #counter {
+  .counter-container {
     display: flex;
     flex-direction: row;
     gap: 5px;
-    align-items: center;
     justify-content: center;
   }
 
@@ -57,7 +74,6 @@
   }
 
   button {
-    height: 87px;
     font-size: 1.5em;
     background-color: @indigo;
     color: contrast($background-color);

diff --git a/src/lib/menu/tracker/counters/ChainCounter.svelte b/src/lib/menu/tracker/counters/ChainCounter.svelte
@@ -2,25 +2,28 @@
   import Odds from '$lib/menu/tracker/counters/odds/Odds.svelte'
   import type { OddsFunction } from '$lib/menu/tracker/counters/odds/Odds'
   import type { HuntTracker } from '$lib/api/HuntTracker'
+  import { fade } from 'svelte/transition'
 
   let {
-    index,
     huntTracker,
     currentChain = $bindable(),
     maxChain = $bindable(),
     count = $bindable(),
     currentChainLabel = 'Chain Length',
     chainLabel = 'Chains',
-    getOdds
+    getOdds,
+    showFraction,
+    showPercentage
   }: {
-    index: number
     huntTracker: HuntTracker
     currentChain: number
     maxChain: number
     count: number
     currentChainLabel?: string
     chainLabel?: string
     getOdds: OddsFunction
+    showFraction: boolean
+    showPercentage: boolean
   } = $props()
 
   function incrementChain() {
@@ -33,10 +36,12 @@
   }
 
   let odds = $derived(getOdds(huntTracker))
+  let id = $derived(huntTracker.id)
+  let showOdds = $derived(showFraction || showPercentage)
 </script>
 
 {#if huntTracker.chain}
-  <div class="counter">
+  <div class="counter-container">
     <button
       onclick={resetChain}
       disabled={currentChain === 0}
@@ -45,27 +50,35 @@
     <table>
       <thead>
         <tr>
-          <th scope="col"><label for="chain-length-{index}">{currentChainLabel}</label></th>
-          <th scope="col"><label for="chains-{index}">{chainLabel}</label></th>
-          <th scope="col"><label for="odds-{index}">Odds</label></th>
+          <th scope="col"><label for="chain-length-{id}">{currentChainLabel}</label></th>
+          <th scope="col"><label for="chains-{id}">{chainLabel}</label></th>
+          {#if showOdds}
+            <th transition:fade={{ duration: 200 }} scope="col"
+              ><label for="odds-{id}">Odds</label></th
+            >
+          {/if}
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>
-            <input type="number" min="0" id="chain-length-{index}" bind:value={currentChain} />
+            <input type="number" min="0" id="chain-length-{id}" bind:value={currentChain} />
           </td>
           <td>
-            <input type="number" min="0" id="chains-{index}" bind:value={count} />
-          </td>
-          <td>
-            <Odds
-              id="odds-{index}"
-              inputs="chain-length"
-              numerator={odds.numerator}
-              denominator={odds.denominator}
-            />
+            <input type="number" min="0" id="chains-{id}" bind:value={count} />
           </td>
+          {#if showOdds}
+            <td transition:fade={{ duration: 200 }}>
+              <Odds
+                id="odds-{id}"
+                inputs="chain-length"
+                numerator={odds.numerator}
+                denominator={odds.denominator}
+                {showFraction}
+                {showPercentage}
+              />
+            </td>
+          {/if}
         </tr>
       </tbody>
     </table>
@@ -99,17 +112,15 @@
     color: contrast($background-color);
   }
 
-  .counter {
+  .counter-container {
     display: flex;
     flex-direction: row;
     gap: 5px;
-    align-items: center;
     justify-content: center;
     max-width: calc(100vw - 4 * @gap-length);
   }
 
   button {
-    height: 87px;
     font-size: 1.5em;
     background-color: @indigo;
     color: contrast($background-color);