Merge pull request #20 from C2DH/fix/controls

add game control in persistent store to be saved in localstorage

src/components/GameControls.jsx

@@ -1,32 +1,60 @@
 import { useSpring, a } from '@react-spring/web'
-import { MenuOpen, useMenuStore } from '../store'
+import { Gameplay, usePersistentStore, usePlayerStore } 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 scene = usePlayerStore((state) => state.scene)
+ const [hasSeenGameControls, setHasSeenGameControls] = usePersistentStore((state) => [
+ state.hasSeenGameControls,
+ state.setHasSeenGameControls,
  ])
 
  const [style, api] = useSpring(() => ({
  opacity: 0,
+ display: 'none',
+ onRest: () => {
+ if (!isVisible.current) {
+ api.set({
+ display: 'none',
+ })
+ }
+ }
  }))
 
- const hide = () => {
- setGameControlsStatus(MenuOpen)
- }
-
  useEffect(() => {
+ console.debug('[GameControls] hasSeenGameControls:', hasSeenGameControls,' scene: ', scene)
+ if (scene === Gameplay && !hasSeenGameControls) {
+ console.debug('[GameControls] show')
+
+ hasSeenGameControlsTimerRef.current = setTimeout(() => show(), 500)
+ }
+ return () => {
+ clearTimeout(hasSeenGameControlsTimerRef.current)
+ }
+ }, [scene, hasSeenGameControls])
+
+ const show = () => {
+ console.debug('[GameControls] show!!!')
+ isVisible.current = true
+ api.start({
+ opacity: 1,
+ display: 'block',
+ })
+ }
+ const hide = () => {
+ isVisible.current = false
  api.start({
- opacity: gameControlsStatus === 'open' ? 0 : 1,
- display: gameControlsStatus === 'open' ? 'none' : 'block',
+ opacity: 0,
  })
- }, [gameControlsStatus])
- console.log('showControls', gameControlsStatus)
+ setHasSeenGameControls(true)
+ }
+
  return (
  <a.div style={style} className="GameControls">
  <div style={{ marginRight: '0.7rem', position: 'absolute', right: 0, top: '0.7rem' }}>

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 }) => {
  <Link to="/chapters">Chapters</Link>
  </Nav.Item>
  <div className="py-2"></div>
-  {!isMobile ? (
+
  <Nav.Item>
  <button
  className="btn btn-link"
  onClick={() => {
- setGameControlsStatus(MenuClosed)
+ setHasSeenGameControls(false)
  set(MenuClosed)
  }}
  >
  Game Controls
  </button>
  </Nav.Item>
- ) : null}
  <Nav.Item>
  <Link to="/about">About</Link>
  </Nav.Item>

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) => ({
+ 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) => ({