feat(game): added coins, level rewards and paid hints

Author: wialy

src/features/game/hooks/use-coins/index.ts

@@ -0,0 +1 @@
+export * from './use-coins';

src/features/game/hooks/use-coins/use-coins.ts

@@ -0,0 +1,23 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export const useCoins = create(
+	persist<{
+		coins: number;
+		addCoins: (coins: number) => void;
+		spendCoins: (coins: number) => void;
+		lastReward: number;
+		reward: (reward: number) => void;
+		clearLastReward: () => void;
+	}>(
+		(set, get) => ({
+			addCoins: (coins) => set((state) => ({ coins: state.coins + coins })),
+			clearLastReward: () => set({ lastReward: 0 }),
+			coins: 0,
+			lastReward: 0,
+			reward: (reward) => set({ coins: get().coins + reward, lastReward: reward }),
+			spendCoins: (coins) => set((state) => ({ coins: state.coins - coins })),
+		}),
+		{ name: 'coins' },
+	),
+);

src/features/game/hooks/use-game/use-game.ts

@@ -3,8 +3,9 @@ import { useDebouncedCallback } from 'use-debounce';
 
 import { VECTOR_ZERO } from '../../../engine/constants';
 import { Entity, isDice, isMovable } from '../../../engine/types/entities';
-import { getIsSameVector } from '../../../engine/utils/get-is-same-vector';
+import { getReward } from '../../utils';
 import { useBoard } from '../use-board';
+import { useCoins } from '../use-coins';
 import { useGameState } from '../use-game-state';
 import { useHighscores } from '../use-highscores';
 import { useGameAnimation } from './use-game-animation';
@@ -19,10 +20,10 @@ const getSnapshot = (entities: Entity[]) =>
 	JSON.stringify(getSortedMovables(entities));
 
 export const useGame = ({ disabled }: { disabled?: boolean }) => {
-	const { countMove, level, moves, setScreen } = useGameState();
-	const { save } = useHighscores();
+	const { countMove, level, maxMoves, moves, setScreen } = useGameState();
+	const { highscores, save } = useHighscores();
+	const { reward } = useCoins();
 
-	// const [entities, setEntities] = useState<Entity[]>([...boardEntities]);
 	const { entities, setEntities } = useBoard();
 	const [isLocked, setIsLocked] = useState(false);
 	const isMounted = useRef(false);
@@ -33,6 +34,22 @@ export const useGame = ({ disabled }: { disabled?: boolean }) => {
 		setEntities,
 	});
 
+	const highscore = highscores.find(({ levelId }) => levelId === level);
+
+	const showWinScreen = useDebouncedCallback(() => {
+		setScreen('won');
+
+		const currentReward = getReward({ maxMoves, moves });
+		const previousReward = highscore?.moves
+			? getReward({ maxMoves, moves: highscore.moves })
+			: 0;
+
+		const amount = Math.max(currentReward - previousReward, 0);
+		reward(amount);
+
+		save({ levelId: level, moves });
+	}, 500);
+
 	useEffect(() => {
 		isMounted.current = true;
 
@@ -64,8 +81,6 @@ export const useGame = ({ disabled }: { disabled?: boolean }) => {
 			void (async () => {
 				await animate();
 
-				setIsLocked(false);
-
 				setEntities((current) => {
 					const result = current.map((entity) =>
 						isMovable(entity)
@@ -81,54 +96,34 @@ export const useGame = ({ disabled }: { disabled?: boolean }) => {
 					if (snapshot.current !== getSnapshot(result) && snapshot.current !== '') {
 						snapshot.current = '';
 						countMove();
+
+						if (result.length > 0) {
+							const dices = result.filter(isDice);
+
+							const allOnTarget = dices.every((dice) => dice.isOnTarget);
+
+							if (allOnTarget) {
+								showWinScreen();
+							} else {
+								setIsLocked(false);
+							}
+						}
 					}
 
 					return result;
 				});
 			})();
 		}
-	}, [animate, countMove, disabled, isAnimating, isLocked, setEntities]);
-
-	const showWinScreen = useDebouncedCallback(() => {
-		setScreen('won');
-		save({ levelId: level, moves: moves + 1 });
-	}, 500);
-
-	const [isComplete, setIsComplete] = useState(false);
-
-	useEffect(() => {
-		if (isComplete) {
-			return;
-		}
-
-		if (disabled) {
-			return;
-		}
-
-		if (entities.length === 0) {
-			return;
-		}
-
-		const dices = entities.filter(isDice);
-		const isAnyMoving = dices.some(
-			(dice) => !getIsSameVector(dice.velocity, VECTOR_ZERO),
-		);
-
-		if (isAnyMoving) {
-			return;
-		}
-
-		const allOnTarget = dices.every((dice) => dice.isOnTarget);
-
-		if (allOnTarget) {
-			setIsComplete(true);
-			showWinScreen();
-		}
-	}, [disabled, entities, isComplete, showWinScreen]);
-
-	useEffect(() => {
-		setIsComplete(false);
-	}, [entities]);
+	}, [
+		animate,
+		countMove,
+		disabled,
+		entities,
+		isAnimating,
+		isLocked,
+		setEntities,
+		showWinScreen,
+	]);
 
-	return { entities, isLocked };
+	return { isLocked };
 };

src/features/game/utils/get-reward.ts

@@ -0,0 +1,13 @@
+export const getReward = ({
+	maxMoves,
+	moves,
+}: {
+	moves: number;
+	maxMoves: number;
+}) => {
+	if (moves >= maxMoves) {
+		return 0;
+	}
+
+	return (maxMoves - moves) * 50;
+};

src/features/game/utils/index.ts

@@ -0,0 +1 @@
+export * from './get-reward';

src/features/ui/components/board-view/board-view.tsx

@@ -53,7 +53,7 @@ export const BoardView = ({ board }: { board: Board }) => {
 				position: 'absolute',
 				top: '50%',
 				transform: `scale(${scale}) translate(${(-(width - 1) * TILE_SIZE) / 2}px, ${
-					(-(height - 1) * TILE_SIZE) / 2
+					(-(height - 0.25) * TILE_SIZE) / 2
 				}px)`,
 			}}
 		>

src/features/ui/components/button/button.module.css

@@ -15,6 +15,10 @@
 	gap: 0.5rem;
 }
 
+.button svg {
+	color: var(--color-yellow);
+}
+
 .button:active:not(:disabled) {
 	background-color: #323232;
 	text-shadow: 0 0 10px white;

src/features/ui/components/game-view/game-view.tsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 
 import { getIdEntities } from '../../../editor/utils/get-id-entities';
 import { useBoard } from '../../../game/hooks/use-board';
+import { useCoins } from '../../../game/hooks/use-coins';
 import { useControls } from '../../../game/hooks/use-controls';
 import { useGame } from '../../../game/hooks/use-game';
 import { useGameState } from '../../../game/hooks/use-game-state';
@@ -13,19 +14,27 @@ import { SwipeArea } from '../swipe-area';
 export const GameView = () => {
 	const { level } = useGameState();
 	const { entities, setEntities } = useBoard();
+	const { clearLastReward } = useCoins();
 
 	const { isFullyVisible } = useScreen();
+
 	const disabled = !isFullyVisible;
 
-	useGame({
+	const { isLocked } = useGame({
 		disabled,
 	});
 
-	const { swipeProps } = useControls({ disabled, setEntities });
+	const controlsDisabled = isLocked || disabled;
+
+	const { swipeProps } = useControls({
+		disabled: controlsDisabled,
+		setEntities,
+	});
 
 	useEffect(() => {
 		setEntities(getIdEntities(level));
-	}, [level, setEntities]);
+		clearLastReward();
+	}, [clearLastReward, level, setEntities]);
 
 	return (
 		<>

src/features/ui/components/hint/hint.module.css

@@ -4,8 +4,20 @@
 	left: 0;
 	right: 0;
 	display: flex;
+	flex-direction: row;
 	justify-content: center;
 	align-items: center;
-	height: 96px;
-	background-color: red;
+	gap: 1rem;
+	padding: 1rem;
+}
+
+.info {
+	display: flex;
+	align-items: center;
+	color: white;
+	gap: 0.5rem;
+}
+
+.coin {
+	color: var(--color-yellow);
 }

src/features/ui/components/hint/hint.tsx

@@ -1,14 +1,19 @@
 import { isMovable, Vector } from '../../../engine/types/entities';
 import { getResolution } from '../../../engine/utils/get-resolution';
 import { useBoard } from '../../../game/hooks/use-board';
+import { useCoins } from '../../../game/hooks/use-coins';
 import { getArrowSymbol } from '../../utils/get-arrow-symbol';
 import { Button } from '../button';
 import { Icon } from '../icon';
 import $$ from './hint.module.css';
 
+const COST = 100;
+
 export const Hint = () => {
 	const { entities, setEntities } = useBoard();
 
+	const { coins, spendCoins } = useCoins();
+
 	const resolve = async () => {
 		let resolution = await getResolution({ entities });
 		let velocity: Vector | undefined;
@@ -25,6 +30,7 @@ export const Hint = () => {
 		}
 
 		if (velocity) {
+			spendCoins(COST);
 			setEntities((current) =>
 				current.map((entity) => {
 					if (isMovable(entity)) {
@@ -48,11 +54,11 @@ export const Hint = () => {
 	return (
 		<div className={$$.hint}>
 			<Button
+				disabled={coins < COST}
 				type="button"
 				onClick={handleClick}
 			>
-				<Icon name="hint" />
-				Hint
+				<Icon name="hint" /> ${COST}
 			</Button>
 		</div>
 	);

src/features/ui/components/icon/icon.tsx

@@ -22,6 +22,12 @@ const ICONS = {
 	arrowTop: (
 		<path d="M11 8.414V18h2V8.414l4.293 4.293 1.414-1.414L12 4.586l-6.707 6.707 1.414 1.414z" />
 	),
+	coin: (
+		<path
+			d="M17.813 3.838C17.6282 3.57906 17.3843 3.36796 17.1015 3.22221C16.8187 3.07647 16.5052 3.00029 16.187 3H7.81304C7.16904 3 6.56104 3.313 6.14604 3.899L2.14604 10.48C2.03427 10.6636 1.9847 10.8784 2.0047 11.0924C2.0247 11.3064 2.11319 11.5083 2.25704 11.668L11.257 21.668C11.3503 21.7729 11.4647 21.8568 11.5927 21.9143C11.7207 21.9718 11.8595 22.0016 11.9998 22.0017C12.1402 22.0018 12.2789 21.9722 12.407 21.9149C12.5351 21.8575 12.6496 21.7737 12.743 21.669L21.743 11.669C21.8872 11.5094 21.9759 11.3075 21.9959 11.0934C22.0159 10.8793 21.9661 10.6645 21.854 10.481L17.813 3.838ZM12 19.505L5.24504 12H18.754L12 19.505ZM4.77704 10L7.81304 5L16.145 4.938L19.222 10H4.77704Z"
+			fill="currentColor"
+		/>
+	),
 	complete: (
 		<>
 			<path

src/features/ui/components/navigation/navigation.module.css

@@ -32,6 +32,21 @@
 	height: 100%;
 }
 
+.row {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: 3rem;
+}
+
+.column {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
 .title {
 	font-size: 1rem;
 	color: var(--color-white);

src/features/ui/components/navigation/navigation.tsx

@@ -1,6 +1,7 @@
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import { useEpisodes } from '../../../editor/hooks/use-episodes';
+import { useCoins } from '../../../game/hooks/use-coins';
 import { useGameState } from '../../../game/hooks/use-game-state';
 import { Button } from '../button';
 import { Icon } from '../icon';
@@ -55,6 +56,7 @@ const Levels = () => {
 
 const Game = () => {
 	const { maxMoves, moves, restart, screen } = useGameState();
+	const { coins } = useCoins();
 
 	const isVisible = screen === 'game';
 
@@ -66,8 +68,16 @@ const Game = () => {
 				<div className={$$.leftAction}>
 					<BackButton label="Levels" />
 				</div>
-				<div className={$$.subtitle}>Moves</div>
-				<div className={$$.title}>{maxMoves - moves}</div>
+				<div className={$$.row}>
+					<div className={$$.column}>
+						<div className={$$.subtitle}>Moves</div>
+						<div className={$$.title}>{maxMoves - moves}</div>
+					</div>
+					<div className={$$.column}>
+						<div className={$$.subtitle}>Coins</div>
+						<div className={$$.title}>${coins}</div>
+					</div>
+				</div>
 				<div className={$$.rightAction}>
 					<Button onClick={restart}>
 						<Icon name="restart" />