Merge pull request #6 from funkyFangs/improve-tracker-controls

🚸 improve tracker controls

src/lib/api/VarietyResource.ts

@@ -23,7 +23,8 @@ export const VARIETY_BLACKLIST = new Set([
   'pikachu-alola-cap',
   'pikachu-partner-cap',
   'pikachu-starter',
-  'pikachu-world-cap'
+  'pikachu-world-cap',
+  'rockruff-own-tempo'
 ])
 
 export function isVarietySupported(

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

@@ -46,8 +46,8 @@
     </thead>
     <tbody>
       <tr>
-        <td><input id="chain-length" bind:value={currentChainLength} /></td>
-        <td><input id="chains" bind:value={chains} /></td>
+        <td><input id="chain-length" type="number" min="0" bind:value={currentChainLength} /></td>
+        <td><input id="chains" type="number" min="0" bind:value={chains} /></td>
         <td><Fraction id="odds" numerator={1} denominator={odds} /></td>
       </tr>
     </tbody>
@@ -83,4 +83,15 @@
     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/counters/PokeRadarCounter.svelte

@@ -41,7 +41,7 @@ If you wanted to track a Poké Radar hunt in Pokémon X with the shiny charm equ
   } = $props()
 
   function incrementChain() {
-    currentChainLength += 1
+    ++currentChainLength
     maxChainLength = Math.max(currentChainLength, maxChainLength)
   }
 
@@ -76,20 +76,18 @@ If you wanted to track a Poké Radar hunt in Pokémon X with the shiny charm equ
       <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 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 onclick={incrementChain}>&plus;</button>
+  <button onclick={() => incrementChain()}>&plus;</button>
 </div>
 
 <style>

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

@@ -54,8 +54,8 @@
     </thead>
     <tbody>
       <tr>
-        <td><input id="chain-length" bind:value={currentChainLength} /></td>
-        <td><input id="chains" bind:value={chains} /></td>
+        <td><input id="chain-length" type="number" min="0" bind:value={currentChainLength} /></td>
+        <td><input id="chains" type="number" min="0" bind:value={chains} /></td>
         <td><Fraction id="odds" numerator={1} denominator={odds} /></td>
       </tr>
     </tbody>
@@ -91,4 +91,15 @@
     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/counters/StaticCounter.svelte

@@ -33,18 +33,9 @@ If you wanted to count the number of "attempts" with a probability of 1/2, you c
   export let denominator: number = 8192
 
   $: count = sanitizeInteger(count)
-
-  function incrementValue() {
-    count += 1
-  }
-
-  function resetValue() {
-    count = 0
-  }
 </script>
 
 <div id="counter">
-  <button on:click={resetValue} disabled={count === 0}>&#10227;</button>
   <table>
     <thead>
       <tr>
@@ -54,12 +45,12 @@ If you wanted to count the number of "attempts" with a probability of 1/2, you c
     </thead>
     <tbody>
       <tr>
-        <td><input id="count" bind:value={count} /></td>
+        <td><input id="count" type="number" min="0" bind:value={count} /></td>
         <td><Fraction id="odds" bind:numerator bind:denominator /></td>
       </tr>
     </tbody>
   </table>
-  <button on:click={incrementValue}>&plus;</button>
+  <button on:click={() => (count += 1)}>&plus;</button>
 </div>
 
 <style>
@@ -94,4 +85,15 @@ If you wanted to count the number of "attempts" with a probability of 1/2, you c
   label {
     font-weight: bold;
   }
+
+  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/counters/UltraWarpRideCounter.svelte

@@ -59,7 +59,6 @@
         <th><label for="rarity">Rarity</label></th>
         <th><label for="distance">Distance</label></th>
         <th><label for="count">Count</label></th>
-        <th><label for="furthest-distance">Furthest Distance</label></th>
         <th><label for="odds">Odds</label></th>
       </tr>
     </thead>
@@ -74,9 +73,8 @@
             <option value={3}>3</option>
           </select>
         </td>
-        <td><input id="distance" bind:value={distance} /></td>
-        <td><input id="count" bind:value={count} /></td>
-        <td><input id="furthest-distance" bind:value={furthestDistance} /></td>
+        <td><input id="distance" type="number" min="0" bind:value={distance} /></td>
+        <td><input id="count" type="number" min="0" bind:value={count} /></td>
         <td>
           {#if odds !== undefined}
             <Fraction
@@ -103,6 +101,7 @@
     font-weight: bold;
     color: var(--font-color);
     height: 28px;
+    background: none;
   }
 
   input {
@@ -115,14 +114,12 @@
     max-width: 60px;
   }
 
-  #distance,
-  #furthest-distance {
+  #distance {
     max-width: 75px;
   }
 
   #count:focus,
   #distance,
-  #furthest-distance,
   select {
     background-color: var(--primary-light);
     color: var(--font-color);
@@ -141,4 +138,15 @@
     height: 70px;
     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/ViewTrackers.svelte

@@ -359,7 +359,7 @@
 
   #tracker-menu-container {
     grid-column: 3 / 4;
-    grid-row: 1;
+    height: 37px;
     z-index: 1;
   }