diff --git a/shared/user-settings.ts b/shared/user-settings.ts index 6f114e9..c80086d 100644 --- a/shared/user-settings.ts +++ b/shared/user-settings.ts @@ -3,6 +3,7 @@ import { z } from "zod"; export const userSettings = z.object({ placeQuestionMark: z.boolean().default(false), longPressOnDesktop: z.boolean().default(false), + showRevealAnimation: z.boolean().default(true), }); export type UserSettings = z.infer; diff --git a/src/components/Board.tsx b/src/components/Board.tsx index e60a2c9..e4f6d11 100644 --- a/src/components/Board.tsx +++ b/src/components/Board.tsx @@ -44,6 +44,7 @@ import "@pixi/canvas-text"; import { themes } from "../themes"; import { weightedPickRandom } from "../../shared/utils"; import gen from "random-seed"; +import type { UserSettings } from "../../shared/user-settings"; interface BoardProps { className?: string; @@ -74,6 +75,7 @@ const toViewportInfo = (viewport: PixiViewport) => { const Board: React.FC = (props) => { const { game, restartGame } = props; const { data: user } = useWSQuery("user.getSelf", null); + const { data: settings } = useWSQuery("user.getSettings", null); const ref = useRef(null); const [width, setWidth] = useState(0); const [height, setHeight] = useState(0); @@ -246,6 +248,7 @@ const Board: React.FC = (props) => { showLastPos={showLastPos} onLeftClick={props.onLeftClick} onRightClick={props.onRightClick} + userSettings={settings} /> ); }); @@ -267,6 +270,7 @@ interface TileProps { showLastPos: boolean; onLeftClick: (x: number, y: number) => void; onRightClick: (x: number, y: number) => void; + userSettings?: UserSettings | undefined; } const Tile = ({ @@ -277,6 +281,7 @@ const Tile = ({ showLastPos, onRightClick, onLeftClick, + userSettings, }: TileProps) => { const resolveSprite = useCallback( (lt: LoadedTexture) => { @@ -322,12 +327,13 @@ const Tile = ({ const [doTick, setDoTick] = useState(true); const frame = useRef(0); useEffect(() => { + if (userSettings?.showRevealAnimation === false) return; if (oldState.current !== `${isRevealed},${isMine},${value}`) { oldState.current = `${isRevealed},${isMine},${value}`; frame.current = 0; setDoTick(true); } - }, [isMine, isRevealed, value]); + }, [isMine, isRevealed, userSettings?.showRevealAnimation, value]); useTick((delta) => { frame.current += delta * 0.1; if (frame.current > 3) { diff --git a/src/views/settings/Settings.tsx b/src/views/settings/Settings.tsx index 61d5cd7..9c475c3 100644 --- a/src/views/settings/Settings.tsx +++ b/src/views/settings/Settings.tsx @@ -62,6 +62,15 @@ const Settings = () => { refetch(); }} /> + Show an animation when a tile is revealed.} + value={settings?.showRevealAnimation ?? true} + onChange={async (value) => { + updateSettings.mutateAsync({ showRevealAnimation: value }); + refetch(); + }} + />