From 5b889944a8b1af4954b5bf3c5d2c67237e64ebce Mon Sep 17 00:00:00 2001 From: Daniele Guido Date: Thu, 21 Dec 2023 14:24:53 +0100 Subject: [PATCH 1/4] add game control in persistent store to be saved in localstorage --- src/components/GameControls.jsx | 54 +++++++++++++++++++++++++-------- src/components/SideMenu.jsx | 8 ++--- src/store/index.js | 16 ++++++++++ 3 files changed, 61 insertions(+), 17 deletions(-) diff --git a/src/components/GameControls.jsx b/src/components/GameControls.jsx index 4d7efd9..0f2da7e 100644 --- a/src/components/GameControls.jsx +++ b/src/components/GameControls.jsx @@ -1,32 +1,60 @@ import { useSpring, a } from '@react-spring/web' -import { MenuOpen, useMenuStore } from '../store' +import { usePersistentStore } from '../store' import './GameControls.css' -import { useEffect } from 'react' +import { useEffect, useRef } from 'react' import RoundButton from './RoundButton' import CloseIcon from './Svg/CloseIcon' import { isMobile } from 'react-device-detect' const GameControls = () => { - const [gameControlsStatus, setGameControlsStatus] = useMenuStore((state) => [ - state.gameControlsStatus, - state.setGameControlsStatus, + const hasSeenGameControlsTimerRef = useRef(null) + const isVisible = useRef(false) + + const [hasSeenGameControls, setHasSeenGameControls] = usePersistentStore((state) => [ + state.hasSeenGameControls, + state.setHasSeenGameControls, ]) const [style, api] = useSpring(() => ({ opacity: 0, + display: 'block', + onRest: () => { + if (!isVisible.current) { + api.set({ + display: 'none', + }) + } + } })) - const hide = () => { - setGameControlsStatus(MenuOpen) - } - useEffect(() => { + console.debug('[GameControls] hasSeenGameControls:', hasSeenGameControls) + if (!hasSeenGameControls) { + console.debug('[GameControls] show') + + hasSeenGameControlsTimerRef.current = setTimeout(() => show(), 500) + } + return () => { + clearTimeout(hasSeenGameControlsTimerRef.current) + } + }, [hasSeenGameControls]) + + const show = () => { + console.debug('[GameControls] show!!!') + isVisible.current = true api.start({ - opacity: gameControlsStatus === 'open' ? 0 : 1, - display: gameControlsStatus === 'open' ? 'none' : 'block', + opacity: 1, + display: 'block', }) - }, [gameControlsStatus]) - console.log('showControls', gameControlsStatus) + } + const hide = () => { + isVisible.current = false + api.start({ + opacity: 0, + }) + setHasSeenGameControls(true) + } + return (
diff --git a/src/components/SideMenu.jsx b/src/components/SideMenu.jsx index ac8e119..4bdbe5b 100644 --- a/src/components/SideMenu.jsx +++ b/src/components/SideMenu.jsx @@ -12,6 +12,7 @@ import { useMenuStore, MenuOpen, usePlayerStore, + usePersistentStore, useWorldStore, SceneCredits, Gameplay, @@ -22,7 +23,7 @@ import { isMobile } from 'react-device-detect' const SideMenu = ({ debug = false }) => { const { pathname } = useLocation() const [menuStatus, set] = useMenuStore((state) => [state.menuStatus, state.setMenuStatus]) - const setGameControlsStatus = useMenuStore((state) => state.setGameControlsStatus) + const setHasSeenGameControls = usePersistentStore((state) => state.setHasSeenGameControls) const saveInitialPropsToPlayerStore = useWorldStore( (state) => state.saveInitialPropsToPlayerStore, ) @@ -102,19 +103,18 @@ const SideMenu = ({ debug = false }) => { Chapters
- {!isMobile ? ( + - ) : null} About diff --git a/src/store/index.js b/src/store/index.js index d556a1f..4b510e5 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -106,6 +106,22 @@ export const SceneCredits = 'credits' export const SceneFakeBook = 'fakebook' export const SceneEnding = 'ending' +export const usePersistentStore = create( + persist( + (set, get) => ({ + acceptCookies: false, + setAcceptCookies: (acceptCookies) => set({ acceptCookies }), + acceptAnalytics: true, + setAcceptAnalytics: (acceptAnalytics) => set({ acceptAnalytics }), + hasSeenGameControls: false, + setHasSeenGameControls: (hasSeenGameControls) => set({ hasSeenGameControls }), + }), + { + name: 'persistent-store', + }, + ), +) + export const usePlayerStore = create( persist( (set, get) => ({ From 7881a41fbc35f26742df295f0a3ff922e3487272 Mon Sep 17 00:00:00 2001 From: Daniele Guido Date: Thu, 21 Dec 2023 14:26:14 +0100 Subject: [PATCH 2/4] fix lint --- src/store/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/store/index.js b/src/store/index.js index 4b510e5..7252e72 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -108,7 +108,7 @@ export const SceneEnding = 'ending' export const usePersistentStore = create( persist( - (set, get) => ({ + (set) => ({ acceptCookies: false, setAcceptCookies: (acceptCookies) => set({ acceptCookies }), acceptAnalytics: true, From bfc03eb26ad7baad0db5e12357e3710e23ad8d0b Mon Sep 17 00:00:00 2001 From: Daniele Guido Date: Thu, 21 Dec 2023 14:28:11 +0100 Subject: [PATCH 3/4] Update GameControls.jsx --- src/components/GameControls.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/GameControls.jsx b/src/components/GameControls.jsx index 0f2da7e..b874a25 100644 --- a/src/components/GameControls.jsx +++ b/src/components/GameControls.jsx @@ -17,7 +17,7 @@ const GameControls = () => { const [style, api] = useSpring(() => ({ opacity: 0, - display: 'block', + display: 'none', onRest: () => { if (!isVisible.current) { api.set({ From e34d52ed69adaccbf12afcb5dcf4224c1561ded2 Mon Sep 17 00:00:00 2001 From: Daniele Guido Date: Thu, 21 Dec 2023 14:32:25 +0100 Subject: [PATCH 4/4] wait fo rthe scene to be Gameplay --- src/components/GameControls.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/GameControls.jsx b/src/components/GameControls.jsx index b874a25..484b788 100644 --- a/src/components/GameControls.jsx +++ b/src/components/GameControls.jsx @@ -1,5 +1,5 @@ import { useSpring, a } from '@react-spring/web' -import { usePersistentStore } from '../store' +import { Gameplay, usePersistentStore, usePlayerStore } from '../store' import './GameControls.css' import { useEffect, useRef } from 'react' import RoundButton from './RoundButton' @@ -9,7 +9,7 @@ import { isMobile } from 'react-device-detect' const GameControls = () => { const hasSeenGameControlsTimerRef = useRef(null) const isVisible = useRef(false) - + const scene = usePlayerStore((state) => state.scene) const [hasSeenGameControls, setHasSeenGameControls] = usePersistentStore((state) => [ state.hasSeenGameControls, state.setHasSeenGameControls, @@ -28,8 +28,8 @@ const GameControls = () => { })) useEffect(() => { - console.debug('[GameControls] hasSeenGameControls:', hasSeenGameControls) - if (!hasSeenGameControls) { + console.debug('[GameControls] hasSeenGameControls:', hasSeenGameControls,' scene: ', scene) + if (scene === Gameplay && !hasSeenGameControls) { console.debug('[GameControls] show') hasSeenGameControlsTimerRef.current = setTimeout(() => show(), 500) @@ -37,7 +37,7 @@ const GameControls = () => { return () => { clearTimeout(hasSeenGameControlsTimerRef.current) } - }, [hasSeenGameControls]) + }, [scene, hasSeenGameControls]) const show = () => { console.debug('[GameControls] show!!!')