diff --git a/client/src/ui/components/Tutorial/GameBoardTutorial.tsx b/client/src/ui/components/Tutorial/GameBoardTutorial.tsx index 8ffbbc9..ad3ec21 100644 --- a/client/src/ui/components/Tutorial/GameBoardTutorial.tsx +++ b/client/src/ui/components/Tutorial/GameBoardTutorial.tsx @@ -27,6 +27,7 @@ interface GameBoardProps { isIntermission: boolean; }; onBlockSelect?: (block: Block) => void; + onUpdateState: (intermission: boolean) => void; } const GameBoardTutorial: React.FC = ({ @@ -39,6 +40,7 @@ const GameBoardTutorial: React.FC = ({ totemCount, tutorialProps, onBlockSelect, + onUpdateState, }) => { const isMdOrLarger = useMediaQuery({ query: "(min-width: 768px)" }); const ROWS = 10; @@ -56,6 +58,10 @@ const GameBoardTutorial: React.FC = ({ const [score, setScore] = useState(0); const [isIntermission, setIsIntermission] = useState(false); + const updateValue = () => { + onUpdateState(true); + }; + useEffect(() => { // Every time the initial grid changes, we erase the optimistic data // and set the data to the one returned by the contract @@ -100,11 +106,6 @@ const GameBoardTutorial: React.FC = ({ } }; - const updateValue = (intermission: boolean) => { - setScore((score ?? 0) + 15); - setIsIntermission(intermission); - }; - const handleBonusWaveTx = useCallback(async (rowIndex: number) => { setIsTxProcessing(true); try { @@ -257,10 +258,7 @@ const GameBoardTutorial: React.FC = ({ tutorialStep={tutorialProps?.step ?? 0} intermission={tutorialProps?.isIntermission} tutorialTargetBlock={tutorialProps?.targetBlock ?? null} - onUpdate={(intermission: boolean) => { - // Ignore the intermission parameter since we only care about score updates - setOptimisticScore((prev) => (prev ?? 0) + 1); - }} + onUpdate={updateValue} ref={setBonus} /> diff --git a/client/src/ui/components/Tutorial/Tutorial.tsx b/client/src/ui/components/Tutorial/Tutorial.tsx index ce28819..d39da57 100644 --- a/client/src/ui/components/Tutorial/Tutorial.tsx +++ b/client/src/ui/components/Tutorial/Tutorial.tsx @@ -62,6 +62,10 @@ const Tutorial: React.FC = ({ showGrid, endTutorial }) => { [tutorialStep], ); + const handleUpdateState = (intermission: boolean) => { + setIsIntermission(intermission); + }; + const tutorialTargetBlock = useMemo(() => { switch (tutorialStep) { case 1: @@ -143,6 +147,7 @@ const Tutorial: React.FC = ({ showGrid, endTutorial }) => { targetBlock: tutorialTargetBlock, isIntermission, }} + onUpdateState={handleUpdateState} /> ); diff --git a/client/src/ui/components/Tutorial/TutorialGrid.tsx b/client/src/ui/components/Tutorial/TutorialGrid.tsx index a1b8103..e3c5f20 100644 --- a/client/src/ui/components/Tutorial/TutorialGrid.tsx +++ b/client/src/ui/components/Tutorial/TutorialGrid.tsx @@ -327,7 +327,7 @@ const TutorialGrid: React.FC = forwardRef( const isHighlighted = (block: Block) => { if (!tutorialTargetBlock) return false; - + if (intermission) return false; if (tutorialTargetBlock.type === "row") { return block.y === tutorialTargetBlock.y; } else { @@ -385,6 +385,7 @@ const TutorialGrid: React.FC = forwardRef( setBlocks(updatedBlocks); setIsMoving(true); setGameState(newGravityState); + onUpdate(true); } else { setGameState(newStateOnComplete); }