Added support for groundbaits

Author: codeaid

src/assets/baits/ground.png

@@ -43,7 +43,7 @@
 .FishInfoBaitsCategoryWrapperBaits {
   display: grid;
   grid-gap: 1.5em;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
 }
 
 /**
@@ -53,6 +53,10 @@
   order: 3;
 }
 
+.FishInfoBaitsKindWrapperGround {
+  order: 4;
+}
+
 .FishInfoBaitsKindWrapperLive {
   order: 2;
 }
@@ -76,6 +80,7 @@
 }
 
 .FishInfoBaitsKindHeaderBottom,
+.FishInfoBaitsKindHeaderGround,
 .FishInfoBaitsKindHeaderLive,
 .FishInfoBaitsKindHeaderNatural {
   background-position: right 0.2em center;
@@ -87,6 +92,10 @@
   background-image: url("../../assets/baits/bottom.png");
 }
 
+.FishInfoBaitsKindHeaderGround {
+  background-image: url("../../assets/baits/ground.png");
+}
+
 .FishInfoBaitsKindHeaderLive {
   background-image: url("../../assets/baits/live.png");
 }

src/components/FishInfoBaits/FishInfoBaits.module.css

@@ -3,7 +3,14 @@
 import clsx from 'clsx';
 import { useMemo, useState } from 'react';
 import { Option, Stepper } from 'components';
-import { baitKindMap, baitsBottom, baitsLive, baitsNatural, lures } from 'config/baits';
+import {
+  baitKindMap,
+  baitsBottom,
+  baitsGround,
+  baitsLive,
+  baitsNatural,
+  lures,
+} from 'config/baits';
 import { getFilteredBaitValues, getFilteredLureValues } from 'lib/filter';
 import type { BaitFilterType, BaitFilterValue } from 'types/baits';
 import { FishInfoBaitsBaits } from './FishInfoBaitsBaits';
@@ -42,6 +49,12 @@ export const FishInfoBaits = (props: FishInfoBaitsProps) => {
         styles.FishInfoBaitsKindWrapperBottom,
         styles.FishInfoBaitsKindHeaderBottom,
       ],
+      [
+        getFilteredBaitValues(baitsGround, filter, data),
+        baitKindMap.ground.name,
+        styles.FishInfoBaitsKindWrapperGround,
+        styles.FishInfoBaitsKindHeaderGround,
+      ],
     ],
     [data, filter],
   );
@@ -70,6 +83,7 @@ export const FishInfoBaits = (props: FishInfoBaitsProps) => {
           <FishInfoBaitsBaits
             caption={category}
             headerClassName={headerClassName}
+            key={category}
             values={values}
             wrapperClassName={wrapperClassName}
           />

src/components/FishInfoBaits/FishInfoBaits.tsx

@@ -3,6 +3,7 @@ import type {
   Bait,
   BaitId,
   BaitIdBottom,
+  BaitIdGround,
   BaitIdLive,
   BaitIdNatural,
   BaitKind,
@@ -24,6 +25,16 @@ export const baitsBottom = (
   ] as Bait<BaitIdBottom>[]
 ).sort(sortByName);
 
+export const baitsGround = (
+  [
+    { id: 'advantage', name: 'Advantage' },
+    { id: 'high-impact', name: 'High Impact' },
+    { id: 'lake-mix', name: 'Lake Mix' },
+    { id: 'match-blend', name: 'Match Blend' },
+    { id: 'pro-performance', name: 'Pro Performance' },
+  ] as Bait<BaitIdGround>[]
+).sort(sortByName);
+
 export const baitsLive = (
   [
     { id: 'bloodworm', name: 'Bloodworm' },
@@ -41,7 +52,6 @@ export const baitsNatural = (
     { id: 'dough', name: 'Dough' },
     { id: 'eggs', name: 'Eggs' },
     { id: 'hotdog', name: 'Hotdog' },
-    { id: 'lake-mix', name: 'Lake Mix' },
     { id: 'liver', name: 'Liver' },
     { id: 'marshmallow', name: 'Marshmallow' },
   ] as Bait<BaitIdNatural>[]
@@ -51,6 +61,7 @@ export const baitKinds: BaitKind[] = [
   { id: 'natural', name: 'Natural' },
   { id: 'live', name: 'Live' },
   { id: 'bottom', name: 'Bottom' },
+  { id: 'ground', name: 'Ground' },
 ];
 
 export const lures = (
@@ -77,7 +88,7 @@ export const lureMethods: LureMethod[] = [
   { id: 's', name: 'Stop & Go' },
 ];
 
-export const baitMap = [...baitsBottom, ...baitsLive, ...baitsNatural].reduce(
+export const baitMap = [...baitsBottom, ...baitsGround, ...baitsLive, ...baitsNatural].reduce(
   (acc, curr) => ({
     ...acc,
     [curr.id]: curr,

src/config/baits.ts

@@ -8,6 +8,14 @@ export const baitIdsBottom = [
   'wafters-white',
 ] as const;
 
+export const baitIdsGround = [
+  'advantage',
+  'high-impact',
+  'lake-mix',
+  'match-blend',
+  'pro-performance',
+] as const;
+
 export const baitIdsLive = ['bloodworm', 'leech', 'minnow', 'redworm'] as const;
 
 export const baitIdsNatural = [
@@ -17,7 +25,6 @@ export const baitIdsNatural = [
   'dough',
   'eggs',
   'hotdog',
-  'lake-mix',
   'liver',
   'marshmallow',
 ] as const;
@@ -43,11 +50,12 @@ export type BaitChanceMap = Record<BaitId, number>;
 export type LureChanceMap = Record<LureMethodId, number>;
 
 export type BaitIdBottom = (typeof baitIdsBottom)[number];
+export type BaitIdGround = (typeof baitIdsGround)[number];
 export type BaitIdLive = (typeof baitIdsLive)[number];
 export type BaitIdNatural = (typeof baitIdsNatural)[number];
-export type BaitId = BaitIdBottom | BaitIdLive | BaitIdNatural;
+export type BaitId = BaitIdBottom | BaitIdGround | BaitIdLive | BaitIdNatural;
 
-export type BaitKindId = 'bottom' | 'live' | 'natural';
+export type BaitKindId = 'bottom' | 'ground' | 'live' | 'natural';
 export type BaitType = (typeof baitTypes)[number];
 
 export type LureMethodId = 'c' | 'j' | 's' | 't';