feat: use cardNumber()

djpiper28 · Jun 19, 2024 · 3cfe0f5 · 3cfe0f5
1 parent 4eccca0
commit 3cfe0f5
Showing 1 changed file with 27 additions and 21 deletions.
diff --git a/cahfrontend/src/components/gameItems/PlayerCards.tsx b/cahfrontend/src/components/gameItems/PlayerCards.tsx
@@ -17,27 +17,33 @@ export default function PlayerCards(props: Readonly<Props>) {
   return (
     <div class="flex flex-row flex-wrap gap-2 justify-between">
       <For each={props.cards}>
-        {(card) => (
-          <button
-            class={
-              !!props.selectedCardIds.find((x) => x === card.id)
-                ? "border-4 border-blue-500 rounded-2xl bg-white"
-                : ""
-            }
-            onClick={() => props.onSelectCard?.(card.id)}
-          >
-            {!!props.selectedCardIds.find((x) => x === card.id) ? (
-              <div class="absolute p-1 bg-blue-500 rounded-br-xl">
-                <p class="font-bold text-white">
-                  {props.selectedCardIds.indexOf(card.id) + 1}
-                </p>
-              </div>
-            ) : (
-              <></>
-            )}
-            <Card isWhite={true} cardText={card.name} packName={card.pack} />
-          </button>
-        )}
+        {(card) => {
+          const isSelected = () =>
+            !!props.selectedCardIds.find((x) => x === card.id);
+          /**
+           * Natural counting: 1 bound index.
+           **/
+          const cardNumber = () => props.selectedCardIds.indexOf(card.id) + 1;
+          return (
+            <button
+              class={
+                isSelected()
+                  ? "border-4 border-blue-500 rounded-2xl bg-white"
+                  : ""
+              }
+              onClick={() => props.onSelectCard?.(card.id)}
+            >
+              {isSelected() ? (
+                <div class="absolute p-1 bg-blue-500 rounded-br-xl">
+                  <p class="font-bold text-white">{cardNumber()}</p>
+                </div>
+              ) : (
+                <></>
+              )}
+              <Card isWhite={true} cardText={card.name} packName={card.pack} />
+            </button>
+          );
+        }}
       </For>
     </div>
   );