feat: added rerolls

src/App.tsx

@@ -5,12 +5,13 @@ import { PlottingProvider } from './pages/Plotting/Plotting.constate'
 import { GAME_MODES } from './math/math'
 
 import './App.css'
-import { useGameModeContext } from './shared/GameState.constate'
+import { useGameModeContext } from './hooks/GameState.constate'
 import { Inventory } from './pages/Inventory/Inventory'
 import { Duel } from './pages/Duel/Duel'
 import { MainMenu } from './pages/MainMenu/MainMenu'
-import { GhostPreviewProvider } from './shared/GhostPreview.constate'
+import { GhostPreviewProvider } from './hooks/GhostPreview.constate'
 import { Intro } from './pages/Intro/Intro'
+import { RerollsProvider } from './hooks/Rerolls.constate'
 
 function App() {
   const { gameMode } = useGameModeContext()
@@ -75,7 +76,9 @@ function App() {
         </GhostPreviewProvider>
       </div>
       <GhostPreviewProvider>
-        <Inventory />
+        <RerollsProvider>
+          <Inventory />
+        </RerollsProvider>
       </GhostPreviewProvider>
     </>
   )

src/components/Reroll/Reroll.tsx

@@ -5,7 +5,7 @@ interface RerollProps {
   className?: string
   left: number
   style?: CSSProperties
-  handleReroll: () => void
+  handleReroll?: () => void
   handleMouseDown?: () => void
 }
 

src/shared/DeckState.constate.ts → src/hooks/DeckState.constate.ts

@@ -7,7 +7,7 @@ import { getDeckPoolArithmetic } from '../pages/Arithmetic/Arithmetic.utils'
 import { getDeckPoolDuel } from '../pages/Duel/Duel.utils'
 import { getDeckPoolPlotting } from '../pages/Plotting/Plotting.utils'
 import { INITIAL_DECK } from '../pages/Tutorial/Tutorial.const'
-import { introDeck, mainMenuDeck } from './decks.data'
+import { introDeck, mainMenuDeck } from '../shared/decks.data'
 
 const initialState: Record<GAME_MODES, Array<CardType>> = {
   [GAME_MODES.ARITHMETICS]: getDeckPoolArithmetic(),
@@ -38,10 +38,38 @@ export const [DeckProvider, useDeck] = constate(() => {
     [deckState]
   )
 
+  const refreshDeck = useCallback((mode: GAME_MODES) => {
+    if(mode === GAME_MODES.INTRO) return;
+    if(mode === GAME_MODES.MAIN_MENU) return;
+    if(mode === GAME_MODES.TUTORIAL) return;
+    if(mode === GAME_MODES.PLOTTING) {
+      setDeckState((prev) => ({
+        ...prev,
+        [mode]: getDeckPoolPlotting({})
+      }))  
+      return;
+    }
+    if(mode === GAME_MODES.ARITHMETICS) {
+      setDeckState((prev) => ({
+        ...prev,
+        [mode]: getDeckPoolArithmetic()
+      }))  
+      return;
+    }
+    if(mode === GAME_MODES.DUEL_FUNCTION) {
+      setDeckState((prev) => ({
+        ...prev,
+        [mode]: getDeckPoolDuel()
+      }))  
+      return;
+    }
+  }, [deckState])
+
   return {
     deckState,
     updateDeck,
     getDeck,
+    refreshDeck,
     setDeckState
   }
 })

src/hooks/Rerolls.constate.ts

@@ -0,0 +1,35 @@
+import constate from "constate";
+import { useState } from "react";
+import { ArithmeticCardTypeEnum } from "../math/arithmetic";
+import { CardType } from "../math/CardType";
+import { useDeck } from "./DeckState.constate";
+import { useGameModeContext } from "./GameState.constate";
+
+interface RerollsValues {
+  left: number;
+  setLeft: (l: number) => void;
+  restoreLeft: () => void;
+  reroll: () => void;
+}
+
+const INITIAL_VALUE = 3
+
+// 2️⃣ Wrap your hook with the constate factory
+export const [RerollsProvider, useRerolls] = constate((): RerollsValues => {
+  const { refreshDeck } = useDeck()
+  const { gameMode } = useGameModeContext()
+  const [left, setLeft] = useState(INITIAL_VALUE)
+
+  const reroll = () => {
+    if(left === 0) return;
+    refreshDeck(gameMode)
+    setLeft(left - 1)
+  }
+
+  return { 
+    left,
+    setLeft,
+    restoreLeft: () => setLeft(INITIAL_VALUE),
+    reroll
+   };
+});

src/main.tsx

@@ -3,8 +3,8 @@ import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
 import { InventoryProvider } from './pages/Inventory/Inventory.constate'
-import { DeckProvider } from './shared/DeckState.constate'
-import { GameModeProvider } from './shared/GameState.constate'
+import { DeckProvider } from './hooks/DeckState.constate'
+import { GameModeProvider } from './hooks/GameState.constate'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>

src/pages/Arithmetic/Arithmetic.tsx

@@ -7,14 +7,16 @@ import { CardType } from '../../math/CardType'
 import { DIFFICULTIES, GAME_MODES } from '../../math/math'
 import { formatNumber } from '../../math/utils'
 import { ARITHMETIC_VALUES, generateTargetArithmetic, getDeckPoolArithmetic } from './Arithmetic.utils'
-import { useGameModeContext } from '../../shared/GameState.constate'
+import { useGameModeContext } from '../../hooks/GameState.constate'
 
 import { NavigatorCard } from '../../math/NavigatorCard'
 import { Reroll } from '../../components/Reroll/Reroll'
-import { useGhostPreviewContext } from '../../shared/GhostPreview.constate'
+import { useGhostPreviewContext } from '../../hooks/GhostPreview.constate'
 import { GhostPreview } from '../../components/GhostPreview/GhostPreview'
 import { NavigatorTypeView } from '../../components/NavigatorTypeView/NavigatorTypeView'
-import { useDeck } from '../../shared/DeckState.constate'
+import { useDeck } from '../../hooks/DeckState.constate'
+import { arithmeticWinDeck, REROLL_POWER_NAME } from '../../shared/decks.data'
+import { useInventoryContext } from '../Inventory/Inventory.constate'
 
 interface AddCardProps {
   card: CardType
@@ -27,9 +29,8 @@ interface ArithmeticProps {
 
 const START_NEW_NAME = 'Start new game?'
 
-const lessonEndDeck = [new NavigatorCard(START_NEW_NAME)]
-
 export const Arithmetic: FC<ArithmeticProps> = () => {
+  const { powers, addPower } = useInventoryContext()
   const { selectedCard, setSelectedCard } = useGhostPreviewContext()
   const { getDeck, updateDeck } = useDeck()
   const deck = getDeck(GAME_MODES.ARITHMETICS)
@@ -56,6 +57,11 @@ export const Arithmetic: FC<ArithmeticProps> = () => {
   const mode = hardMode ? DIFFICULTIES.HARD : DIFFICULTIES.EASY
   const preciseness = ARITHMETIC_VALUES[mode].preciseness
 
+  const lessonEndDeck = useMemo(() => {
+    const newArrs = arithmeticWinDeck.filter(x => !powers.find(y => y.getName() === x.getName()))
+    return [new NavigatorCard(START_NEW_NAME)].concat(newArrs)
+  }, [powers])
+
   useEffect(() => {
     if (equalizerResult === count) {
       setPrediction(-5)
@@ -123,6 +129,10 @@ export const Arithmetic: FC<ArithmeticProps> = () => {
       handleStartNewGame()
       return
     }
+    if (card.getName() === REROLL_POWER_NAME) {
+      addPower(card)
+      return
+    }
   }
 
   return (

src/pages/Duel/Duel.tsx

@@ -12,16 +12,16 @@ import {
   getDeckPoolDuel,
   getEnemyDeckPoolArithmetic
 } from './Duel.utils'
-import { useGameModeContext } from '../../shared/GameState.constate'
+import { useGameModeContext } from '../../hooks/GameState.constate'
 
 import { NavigatorCard } from '../../math/NavigatorCard'
 import { Reroll } from '../../components/Reroll/Reroll'
 import { Numberator } from '../../math/Numberator'
 import { Switcher } from '../../math/Switcher'
-import { useGhostPreviewContext } from '../../shared/GhostPreview.constate'
+import { useGhostPreviewContext } from '../../hooks/GhostPreview.constate'
 import { NavigatorTypeView } from '../../components/NavigatorTypeView/NavigatorTypeView'
 import { GhostPreview } from '../../components/GhostPreview/GhostPreview'
-import { useDeck } from '../../shared/DeckState.constate'
+import { useDeck } from '../../hooks/DeckState.constate'
 
 interface AddCardProps {
   card: CardType

src/pages/Intro/Intro.tsx

@@ -3,11 +3,11 @@ import { CardsHand } from '../../components/CardsHand/CardsHand'
 import { CardType } from '../../math/CardType'
 import { GAME_MODES } from '../../math/math'
 import { NavigatorCard } from '../../math/NavigatorCard'
-import { useGhostPreviewContext } from '../../shared/GhostPreview.constate'
+import { useGhostPreviewContext } from '../../hooks/GhostPreview.constate'
 import { useInventoryContext } from '../Inventory/Inventory.constate'
 import { GhostPreview } from '../../components/GhostPreview/GhostPreview'
 import { NavigatorTypeView } from '../../components/NavigatorTypeView/NavigatorTypeView'
-import { useDeck } from '../../shared/DeckState.constate'
+import { useDeck } from '../../hooks/DeckState.constate'
 import { NAVIGATION_POWER_NAME } from '../../shared/decks.data'
 
 interface IntroProps {
@@ -33,8 +33,10 @@ export const Intro: FC<IntroProps> = () => {
     }
   }
 
+  const isPowersAdded = useMemo(() => powers.find(x => x.getName() === NAVIGATION_POWER_NAME), [powers])
+
   useEffect(() => {
-    if (powers.length > 0) {
+    if (isPowersAdded) {
       timerRef.current = setTimeout(() => {
         setGatherPower(true)
       }, 1000)
@@ -44,7 +46,7 @@ export const Intro: FC<IntroProps> = () => {
         clearTimeout(timerRef.current)
       }
     }
-  }, [powers.length])
+  }, [isPowersAdded])
 
   return (
     <div className='root'>
@@ -85,7 +87,7 @@ export const Intro: FC<IntroProps> = () => {
         }}
       >
         <CardsHand
-        className={powers.length > 0 ? 'cardsHide' : ''}
+        className={isPowersAdded ? 'cardsHide' : ''}
           keys={deck.map((x) => x.getId().toString())}
         >
           {deck.map((x) => {

src/pages/Inventory/Inventory.constate.ts

@@ -1,7 +1,7 @@
-import constate from "constate";
-import { useState } from "react";
-import { ArithmeticCardTypeEnum } from "../../math/arithmetic";
-import { CardType } from "../../math/CardType";
+import constate from 'constate'
+import { useState } from 'react'
+import { ArithmeticCardTypeEnum } from '../../math/arithmetic'
+import { CardType } from '../../math/CardType'
 
 const INITIAL_MATH_OPERATORS: ArithmeticCardTypeEnum[] = []
 
@@ -20,33 +20,35 @@ interface InventoryValues {
   addPower: addPowerDescriptor
 }
 
+const initialPowers: Array<CardType> = []
+
 // 2️⃣ Wrap your hook with the constate factory
 export const [InventoryProvider, useInventoryContext] = constate((): InventoryValues => {
   const [mathOperators, sOperators] = useState(INITIAL_MATH_OPERATORS)
-  const [powers, setPowers] = useState<Array<CardType>>([])
+  const [powers, setPowers] = useState<Array<CardType>>(initialPowers)
 
   const setMathOperators: setMathOperatorsDescriptor = (operators: ArithmeticCardTypeEnum[]) => {
     sOperators(operators)
   }
 
   const addMathOperator: addMathOperatorsDescriptor = (operator: ArithmeticCardTypeEnum) => {
-    sOperators((prev) => prev.filter(x => x !== operator).concat(operator))
+    sOperators((prev) => prev.filter((x) => x !== operator).concat(operator))
   }
 
   const setPower: setPowerDescriptor = (newPowers: CardType[]) => {
     setPowers(newPowers)
   }
 
   const addPower: addPowerDescriptor = (newPower: CardType) => {
-    setPowers((prev) => prev.filter(x => x !== newPower).concat(newPower))
+    setPowers((prev) => prev.filter((x) => x !== newPower).concat(newPower))
   }
 
-  return { 
+  return {
     powers,
     mathOperators,
     setMathOperators,
     addMathOperator,
     setPower,
-    addPower,
-   };
-});
+    addPower
+  }
+})

src/pages/Inventory/Inventory.tsx

@@ -7,13 +7,15 @@ import { CardType } from '../../math/CardType'
 import { ArithmeticCardTypeEnumToClass, GAME_MODES } from '../../math/math'
 import { NavigatorCard } from '../../math/NavigatorCard'
 import { Numberator } from '../../math/Numberator'
-import { NAVIGATION_POWER_NAME } from '../../shared/decks.data'
-import { useGameModeContext } from '../../shared/GameState.constate'
-import { useGhostPreviewContext } from '../../shared/GhostPreview.constate'
+import { NAVIGATION_POWER_NAME, REROLL_POWER_NAME } from '../../shared/decks.data'
+import { useGameModeContext } from '../../hooks/GameState.constate'
+import { useGhostPreviewContext } from '../../hooks/GhostPreview.constate'
 
 import { useInventoryContext } from './Inventory.constate'
 
 import s from './Inventory.module.css'
+import { Reroll } from '../../components/Reroll/Reroll'
+import { useRerolls } from '../../hooks/Rerolls.constate'
 
 interface InventoryProps {
   //
@@ -28,12 +30,18 @@ export const Inventory: FC<InventoryProps> = () => {
   const { setGameMode } = useGameModeContext()
   const { mathOperators, powers } = useInventoryContext()
   const { selectedCard, setSelectedCard } = useGhostPreviewContext()
+  const { reroll, restoreLeft, left } = useRerolls()
 
   const handleCardClick = (card: CardType) => {
     if (card.getName() === NAVIGATION_POWER_NAME) {
+      restoreLeft()
       setGameMode(GAME_MODES.MAIN_MENU)
       return
     }
+    if (card.getName() === REROLL_POWER_NAME) {
+      reroll()
+      return
+    }
   }
 
   const powersWithBlocked = useMemo(() => {
@@ -96,6 +104,18 @@ export const Inventory: FC<InventoryProps> = () => {
                     ?
                   </div>
                 )
+
+              if (x.getName() === REROLL_POWER_NAME) {
+                return (
+                  <Reroll
+                    key={x.getId()}
+                    left={left}
+                    style={style}
+                    className={[isSelected ? 'border' : '', 'card'].join(' ')}
+                    handleMouseDown={() => setSelectedCard((prev) => (prev?.getId() === x.getId() ? null : x))}
+                  />
+                )
+              }
               return (
                 <NavigatorTypeView
                   key={x.getId()}

src/pages/MainMenu/MainMenu.tsx

@@ -3,16 +3,16 @@ import { CSSProperties, FC, useEffect, useRef, useState } from 'react'
 import { CardsHand } from '../../components/CardsHand/CardsHand'
 
 import { GAME_MODES } from '../../math/math'
-import { useGameModeContext } from '../../shared/GameState.constate'
+import { useGameModeContext } from '../../hooks/GameState.constate'
 
 import { NavigatorCard } from '../../math/NavigatorCard'
 import { NavigatorTypeView } from '../../components/NavigatorTypeView/NavigatorTypeView'
 import { MainMenuLoader } from './MainMenuLoader'
 import { CardType } from '../../math/CardType'
 import { GhostPreview } from '../../components/GhostPreview/GhostPreview'
-import { useGhostPreviewContext } from '../../shared/GhostPreview.constate'
+import { useGhostPreviewContext } from '../../hooks/GhostPreview.constate'
 import { ARITHMETIC_NAME, DUEL_NAME, PLOTTING_NAME, TUTORIAL_NAME } from '../../shared/decks.data'
-import { useDeck } from '../../shared/DeckState.constate'
+import { useDeck } from '../../hooks/DeckState.constate'
 
 interface MainMenuProps {
   //

src/pages/Plotting/Plotting.constate.ts

@@ -3,8 +3,8 @@ import { useState } from 'react'
 import { CardType } from '../../math/CardType'
 import { FormulaeCardType } from '../../math/formulae'
 import { GAME_MODES } from '../../math/math'
-import { useDeck } from '../../shared/DeckState.constate'
-import { useGameModeContext } from '../../shared/GameState.constate'
+import { useDeck } from '../../hooks/DeckState.constate'
+import { useGameModeContext } from '../../hooks/GameState.constate'
 
 export const [PlottingProvider, usePlottingContext] = constate(() => {
   const [chain, setChain] = useState<FormulaeCardType[]>([])