Changes

- adding medium size - add clip display - sanitize inWeight before calculation - spacing in results - fix select barbell weight after changing weight set - reactive results when select/deselect clip
jvogit · Mar 6, 2024 · ad2ba28 · ad2ba28
1 parent f894546
commit ad2ba28
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 8 deletions.
diff --git a/svelteww/src/lib/WeightCalculatorlatorForm.svelte b/svelteww/src/lib/WeightCalculatorlatorForm.svelte
@@ -32,6 +32,7 @@
  selectedBarbellWeight) /
  2;
  if (isClipWeightSelected) inWeight -= selectedWeightPlateSet.clipWeight;
+ inWeight = Math.max(0, inWeight);
 
  out = what_weights_unlimited(
  inWeight,
@@ -43,7 +44,7 @@
 <h1>Calculate Weights</h1>
 <form on:submit|preventDefault={calculate}>
  <h2>Weight Plates Set</h2>
- <select bind:value={selectedWeightPlateSet}>
+ <select bind:value={selectedWeightPlateSet} on:change={() => selectedBarbellWeight = selectedWeightPlateSet.barbellWeights[0]}>
  {#each weight_plates as weight_plate}
  <option value={weight_plate}>
  {weight_plate.displayName}
@@ -70,6 +71,7 @@
  <input
  type="checkbox"
  bind:checked={isClipWeightSelected}
+ on:change={calculate}
  name="clip weight"
  />
  {selectedWeightPlateSet.fmtWeightWithUnit(
@@ -84,11 +86,12 @@
 
 {#if out}
  <p>The minimum amount needed is: {outMinAmt}</p>
- <div style="width: 17rem;">
+ <div style="display: flex; flex-direction: column; gap: 10px; width: 17rem;">
  {#each outWeights as weights}
  <BarbellWeight
  weights={weights.sort((a, b) => b - a)}
  weightPlateStyleMap={selectedWeightPlateSet.weightsStyle}
+ clipped={isClipWeightSelected}
  />
  {/each}
  </div>

diff --git a/svelteww/src/lib/weightplate/BarbellWeight.svelte b/svelteww/src/lib/weightplate/BarbellWeight.svelte
@@ -10,6 +10,7 @@
  number,
  [WeightPlateSize, WeightPlateColor]
  >;
+ export let clipped: boolean;
 
  const getWeightPlateSize = (weight: number) => {
  return weightPlateStyleMap.get(weight)![0];
@@ -18,12 +19,28 @@
  const getWeightPlateColor = (weight: number) => {
  return weightPlateStyleMap.get(weight)![1];
  };
+
+ $: clipped_weights = weights.filter(
+ (weight) => getWeightPlateSize(weight) != WeightPlateSize.SMALL,
+ );
+ $: unclipped_weights = weights.filter(
+ (weight) => getWeightPlateSize(weight) === WeightPlateSize.SMALL,
+ );
 </script>
 
 <div class="container">
  <div class="barbell-shaft" />
  <div class="barbell-collar" />
- {#each weights as weight}
+ {#each clipped_weights as weight}
+ <WeightPlate
+ weightSize={getWeightPlateSize(weight)}
+ weightColor={getWeightPlateColor(weight)}
+ />
+ {/each}
+ {#if clipped}
+ <div class="barbell-clip" />
+ {/if}
+ {#each unclipped_weights as weight}
  <WeightPlate
  weightSize={getWeightPlateSize(weight)}
  weightColor={getWeightPlateColor(weight)}
@@ -40,6 +57,17 @@
  height: 100%;
  }
 
+ .barbell-clip {
+ width: 35px;
+ height: 55px;
+ border-radius: 2px;
+ background-image: linear-gradient(
+ to right,
+ silver 0 50%,
+ gray 50% 100%
+ );
+ }
+
  .barbell-sleeve {
  flex-grow: 1;
  height: 25px;

diff --git a/svelteww/src/lib/weightplate/WeightPlate.svelte b/svelteww/src/lib/weightplate/WeightPlate.svelte
@@ -18,6 +18,14 @@
  border-radius: 3px;
  }
 
+ .weight-plate-med {
+ width: 15px;
+ height: 135px;
+ border-style: solid;
+ border-width: 1px;
+ border-radius: 3px;
+ }
+
  .weight-plate-sml {
  width: 15px;
  height: 100px;

diff --git a/svelteww/src/lib/weightplate/weighttypes.ts b/svelteww/src/lib/weightplate/weighttypes.ts
@@ -1,5 +1,6 @@
 export enum WeightPlateSize {
  STD = "weight-plate-std",
+ MEDIUM = "weight-plate-med",
  SMALL = "weight-plate-sml",
 }
 

diff --git a/svelteww/src/routes/weight/+page.svelte b/svelteww/src/routes/weight/+page.svelte
@@ -9,18 +9,19 @@
  [2, [WeightPlateSize.STD, WeightPlateColor.BLUE]],
  [3, [WeightPlateSize.STD, WeightPlateColor.YELLOW]],
  [4, [WeightPlateSize.STD, WeightPlateColor.GREEN]],
- [5, [WeightPlateSize.STD, WeightPlateColor.WHITE]],
- [6, [WeightPlateSize.SMALL, WeightPlateColor.RED]],
+ [5, [WeightPlateSize.MEDIUM, WeightPlateColor.WHITE]],
+ [6, [WeightPlateSize.MEDIUM, WeightPlateColor.RED]],
  [7, [WeightPlateSize.SMALL, WeightPlateColor.BLUE]],
  [8, [WeightPlateSize.SMALL, WeightPlateColor.YELLOW]],
  [9, [WeightPlateSize.SMALL, WeightPlateColor.GREEN]],
  [10, [WeightPlateSize.SMALL, WeightPlateColor.WHITE]],
- ]);
+]);
 </script>
 
-<div style="width: 17rem;">
+<div>
  <BarbellWeight
- weights={[1, 2, 3, 4]}
+ weights={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}
  weightPlateStyleMap={weightMaps}
+ clipped={true}
  />
 </div>