Merge pull request #63 from daithihearn/daithi-bugfix7

Daithi bugfix7

src/caches/GameSlice.ts

@@ -36,11 +36,12 @@ export const getRound = (state: RootState) => state.game.round
 export const getCards = (state: RootState) => state.game.cards
 export const getSuit = (state: RootState) => state.game.round?.suit
 export const getGameId = (state: RootState) => state.game.id
-export const getHasGame = (state: RootState) => !!state.game.id
-export const getGameStatus = (state: RootState) => state.game.status
-export const isGameActive = (state: RootState) =>
+export const getHasGame = (state: RootState) =>
   state.game.status === GameStatus.ACTIVE ||
   state.game.status === GameStatus.NONE
+export const getGameStatus = (state: RootState) => state.game.status
+export const isGameActive = (state: RootState) =>
+  state.game.status === GameStatus.ACTIVE
 export const getIsRoundCalling = (state: RootState) =>
   state.game.round?.status === RoundStatus.CALLING
 export const getIsRoundCalled = (state: RootState) =>

src/components/Game/AutoActionManager.tsx

@@ -15,7 +15,6 @@ import {
 } from "../../caches/GameSlice"
 import { Round, RoundStatus } from "../../model/Round"
 import { Suit } from "../../model/Suit"
-import { useSnackbar } from "notistack"
 import { getAutoPlayCard } from "../../caches/AutoPlaySlice"
 
 const bestCardLead = (round: Round) => {
@@ -71,7 +70,6 @@ const getWorstCard = (cards: string[], suit: Suit) => {
 
 const AutoActionManager = () => {
   const dispatch = useAppDispatch()
-  const { enqueueSnackbar } = useSnackbar()
 
   const gameId = useAppSelector(getGameId)
   const round = useAppSelector(getRound)
@@ -83,51 +81,32 @@ const AutoActionManager = () => {
   const isMyGo = useAppSelector(getIsMyGo)
   const isInBunker = useAppSelector(getIsInBunker)
 
-  const deal = (id: string) => {
-    console.info(`AutoAction -> deal `)
-    dispatch(GameService.deal(id)).catch((e: Error) =>
-      enqueueSnackbar(e.message, { variant: "error" })
-    )
-  }
+  const deal = (id: string) =>
+    dispatch(GameService.deal(id)).catch(console.error)
 
-  const playCard = (id: string, card: string) => {
-    console.info(`AutoAction -> playCard`)
-    dispatch(GameService.playCard(id, card)).catch((e: Error) =>
-      enqueueSnackbar(e.message, { variant: "error" })
-    )
-  }
+  const playCard = (id: string, card: string) =>
+    dispatch(GameService.playCard(id, card)).catch(console.error)
 
-  const call = (id: string, callAmount: number) => {
-    console.info(`AutoAction -> call ${callAmount}`)
-    dispatch(GameService.call(id, callAmount)).catch((e: Error) =>
-      enqueueSnackbar(e.message, { variant: "error" })
-    )
-  }
+  const call = (id: string, callAmount: number) =>
+    dispatch(GameService.call(id, callAmount)).catch(console.error)
 
-  const buyCards = (gameId: string, cardsToBuy: string[]) => {
-    console.info(`AutoAction -> buy cards`)
-    dispatch(GameService.buyCards(gameId, cardsToBuy)).catch((e: Error) =>
-      enqueueSnackbar(e.message, { variant: "error" })
-    )
-  }
+  const buyCards = (gameId: string, cardsToBuy: string[]) =>
+    dispatch(GameService.buyCards(gameId, cardsToBuy)).catch(console.error)
 
   // Deal when it's your turn
   useEffect(() => {
-    console.info(`Rule -> Deal`)
     if (gameId && canDeal) deal(gameId)
   }, [gameId, canDeal])
 
   // If in the bunker, Pass
   useEffect(() => {
-    console.info(`Rule -> Bunker`)
     if (gameId && isInBunker) call(gameId, 0)
   }, [gameId, isInBunker])
 
   // 1. Play card when you've pre-selected a card
   // 2. Play card when you only have one left
   // 3. Play worst card if best card lead out
   useEffect(() => {
-    console.info(`Rule -> play card`)
     if (
       gameId &&
       isMyGo &&
@@ -145,7 +124,6 @@ const AutoActionManager = () => {
 
   // Buy cards in if you are the goer
   useEffect(() => {
-    console.info(`Rule -> buy cards`)
     if (gameId && canBuyCards) buyCards(gameId, cards)
   }, [gameId, cards, canBuyCards])
 

src/components/Game/Buying.tsx

@@ -1,15 +1,4 @@
-import {
-  Modal,
-  ModalBody,
-  ModalHeader,
-  Button,
-  ButtonGroup,
-  Form,
-  CardImg,
-  CardBody,
-  CardGroup,
-  Card,
-} from "reactstrap"
+import { Button, ButtonGroup, Form, CardBody } from "reactstrap"
 
 import { useCallback, useMemo, useState } from "react"
 
@@ -27,6 +16,7 @@ import {
   removeAllFromHand,
   riskOfMistakeBuyingCards,
 } from "../../utils/GameUtils"
+import ThrowCardsWarningModal from "./ThrowCardsWarningModal"
 
 const Buying = () => {
   const dispatch = useAppDispatch()
@@ -45,8 +35,8 @@ const Buying = () => {
   )
 
   const buyCards = useCallback(
-    (e: React.FormEvent) => {
-      e.preventDefault()
+    (e?: React.FormEvent) => {
+      if (e) e.preventDefault()
       if (riskOfMistakeBuyingCards(suit!, selectedCards, myCards)) {
         showCancelDeleteCardsDialog()
       } else {
@@ -80,55 +70,13 @@ const Buying = () => {
             </ButtonGroup>
           </Form>
 
-          <Modal
-            fade={true}
-            size="lg"
-            toggle={hideCancelDeleteCardsDialog}
-            isOpen={deleteCardsDialog}
-          >
-            <ModalHeader>
-              <CardImg
-                alt="Suit"
-                src={`/cards/originals/${suit}_ICON.svg`}
-                className="thumbnail_size_extra_small left-padding"
-              />{" "}
-              Are you sure you want to throw these cards away?
-            </ModalHeader>
-            <ModalBody className="called-modal">
-              <CardGroup className="gameModalCardGroup">
-                <Card
-                  className="p-6 tableCloth"
-                  style={{ backgroundColor: "#333", borderColor: "#333" }}
-                >
-                  <CardBody className="cardArea">
-                    {removeAllFromHand(selectedCards, myCards).map((card) => (
-                      <img
-                        key={"deleteCardModal_" + card}
-                        alt={card.name}
-                        src={"/cards/thumbnails/" + card + ".png"}
-                        className="thumbnail_size"
-                      />
-                    ))}
-                  </CardBody>
-
-                  <CardBody className="buttonArea">
-                    <ButtonGroup size="lg">
-                      <Button
-                        type="button"
-                        color="primary"
-                        onClick={hideCancelDeleteCardsDialog}
-                      >
-                        Cancel
-                      </Button>
-                      <Button type="button" color="warning" onClick={buyCards}>
-                        Throw Cards
-                      </Button>
-                    </ButtonGroup>
-                  </CardBody>
-                </Card>
-              </CardGroup>
-            </ModalBody>
-          </Modal>
+          <ThrowCardsWarningModal
+            modalVisible={deleteCardsDialog}
+            cancelCallback={hideCancelDeleteCardsDialog}
+            continueCallback={buyCards}
+            suit={suit!}
+            cards={removeAllFromHand(selectedCards, myCards)}
+          />
         </CardBody>
       ) : null}
     </div>

src/components/Game/MyCards.tsx

@@ -14,12 +14,17 @@ import { getGameId, getIsMyGo, getRound } from "../../caches/GameSlice"
 import { useAppDispatch, useAppSelector } from "../../caches/hooks"
 import { useSnackbar } from "notistack"
 import {
+  clearSelectedCards,
   getMyCards,
   replaceMyCards,
   toggleSelect,
   toggleUniqueSelect,
 } from "../../caches/MyCardsSlice"
-import { getAutoPlayCard, toggleAutoPlay } from "../../caches/AutoPlaySlice"
+import {
+  getAutoPlayCard,
+  toggleAutoPlay,
+  clearAutoPlay,
+} from "../../caches/AutoPlaySlice"
 
 interface DoubleClickTracker {
   time: number
@@ -73,20 +78,24 @@ const MyCards: React.FC = () => {
 
       // If the round status is PLAYING then only allow one card to be selected
       if (round && round.status === RoundStatus.PLAYING) {
-        if (
-          doubleClickTracker &&
-          doubleClickTracker.card === card.name &&
+        if (autoPlayCard === card.name) {
+          dispatch(clearAutoPlay())
+          dispatch(clearSelectedCards())
+        } else if (
+          doubleClickTracker?.card === card.name &&
           Date.now() - doubleClickTracker.time < 500
         ) {
           dispatch(toggleAutoPlay(card))
-        } else dispatch(toggleUniqueSelect(card))
-
-        updateDoubleClickTracker({ card: card.name, time: Date.now() })
+        } else {
+          dispatch(toggleUniqueSelect(card))
+          dispatch(clearAutoPlay())
+          updateDoubleClickTracker({ card: card.name, time: Date.now() })
+        }
       } else {
         dispatch(toggleSelect(card))
       }
     },
-    [round, myCards, doubleClickTracker]
+    [round, myCards, autoPlayCard, doubleClickTracker]
   )
 
   const handleOnDragEnd = useCallback(

src/components/Game/SelectSuit.tsx

@@ -1,14 +1,4 @@
-import {
-  Modal,
-  ModalBody,
-  ModalHeader,
-  Button,
-  ButtonGroup,
-  Card,
-  CardImg,
-  CardBody,
-  CardGroup,
-} from "reactstrap"
+import { Button, ButtonGroup, CardBody } from "reactstrap"
 
 import { useCallback, useEffect, useState } from "react"
 
@@ -20,6 +10,7 @@ import { Suit } from "../../model/Suit"
 import { useSnackbar } from "notistack"
 import { getMyCardsWithoutBlanks } from "../../caches/MyCardsSlice"
 import { removeAllFromHand } from "../../utils/GameUtils"
+import ThrowCardsWarningModal from "./ThrowCardsWarningModal"
 
 const SelectSuit = () => {
   const dispatch = useAppDispatch()
@@ -63,6 +54,14 @@ const SelectSuit = () => {
     [gameId, selectedCards]
   )
 
+  const selectFromDummyCallback = useCallback(() => {
+    if (selectedSuit) {
+      dispatch(
+        GameService.chooseFromDummy(gameId!, selectedCards, selectedSuit)
+      ).catch((e: Error) => enqueueSnackbar(e.message, { variant: "error" }))
+    }
+  }, [gameId, selectedCards, selectedSuit])
+
   const hideCancelSelectFromDummyDialog = useCallback(() => {
     setSelectedSuit(undefined)
     setPossibleIssues(false)
@@ -140,63 +139,15 @@ const SelectSuit = () => {
                 </Button>
               </ButtonGroup>
 
-              {possibleIssue && selectedSuit ? (
-                <Modal
-                  fade={true}
-                  size="lg"
-                  toggle={hideCancelSelectFromDummyDialog}
-                  isOpen={possibleIssue}
-                >
-                  <ModalHeader>
-                    <CardImg
-                      alt="Suit"
-                      src={`/cards/originals/${selectedSuit}_ICON.svg`}
-                      className="thumbnail_size_extra_small left-padding"
-                    />{" "}
-                    Are you sure you want to throw these cards away?
-                  </ModalHeader>
-                  <ModalBody className="called-modal">
-                    <CardGroup className="gameModalCardGroup">
-                      <Card
-                        className="p-6 tableCloth"
-                        style={{ backgroundColor: "#333", borderColor: "#333" }}
-                      >
-                        <CardBody className="cardArea">
-                          {removeAllFromHand(selectedCards, myCards).map(
-                            (card) => (
-                              <img
-                                key={`cancelSelectFromDummyModal_${card.name}`}
-                                alt={card.name}
-                                src={`/cards/thumbnails/${card.name}.png`}
-                                className="thumbnail_size"
-                              />
-                            )
-                          )}
-                        </CardBody>
-
-                        <CardBody className="buttonArea">
-                          <ButtonGroup size="lg">
-                            <Button
-                              type="button"
-                              color="primary"
-                              onClick={hideCancelSelectFromDummyDialog}
-                            >
-                              Cancel
-                            </Button>
-                            <Button
-                              type="button"
-                              color="warning"
-                              onClick={() => selectFromDummy(selectedSuit)}
-                            >
-                              Throw Cards
-                            </Button>
-                          </ButtonGroup>
-                        </CardBody>
-                      </Card>
-                    </CardGroup>
-                  </ModalBody>
-                </Modal>
-              ) : null}
+              {selectedSuit && (
+                <ThrowCardsWarningModal
+                  modalVisible={possibleIssue}
+                  cancelCallback={hideCancelSelectFromDummyDialog}
+                  continueCallback={selectFromDummyCallback}
+                  suit={selectedSuit}
+                  cards={removeAllFromHand(selectedCards, myCards)}
+                />
+              )}
             </div>
           ) : (
             <ButtonGroup size="lg">