= ({version, className}) => {
return (
-
Version {environment.version}
+
Version {version}
boolean;
+
+ version: string;
}
export const OptionsDialog: FC> =
({
selectWelcoming = GameSelectors.welcoming,
- selectOpen = AppSelectors.isOpen(AppDialogType.OPTIONS)
+ selectOpen = AppSelectors.isOpen(AppDialogType.OPTIONS),
+ version
}) => {
const welcoming = useSelector(selectWelcoming);
return (
@@ -25,7 +28,7 @@ export const OptionsDialog: FC> =
selectOpen={selectOpen}
>
-
+
);
};
diff --git a/src/components/particles/audio.types.tsx b/src/components/particles/audio.types.tsx
index 6417758..6eb954e 100644
--- a/src/components/particles/audio.types.tsx
+++ b/src/components/particles/audio.types.tsx
@@ -4,18 +4,18 @@ import {environment} from '../../environment/environment';
import {UiOption} from './ui/UiSelect';
export const AUDIO_FILES = [
- `${environment.base}/audio/music/bonkers-for-arcades.mp3`,
- `${environment.base}/audio/music/the-ice-cream-man.mp3`,
- `${environment.base}/audio/music/8-bit-perplexion.mp3`,
- `${environment.base}/audio/music/its-raining-pixels.mp3`,
- `${environment.base}/audio/music/arcade-puzzler.mp3`
+ `${environment.base}audio/music/bonkers-for-arcades.mp3`,
+ `${environment.base}audio/music/the-ice-cream-man.mp3`,
+ `${environment.base}audio/music/8-bit-perplexion.mp3`,
+ `${environment.base}audio/music/its-raining-pixels.mp3`,
+ `${environment.base}audio/music/arcade-puzzler.mp3`
];
-export const SOUND_FINISHED = `${environment.base}/audio/sounds/power-down-13.mp3`;
-export const SOUND_LEVEL = `${environment.base}/audio/sounds/retro-chip-power.mp3`;
-export const SOUND_SCORE = `${environment.base}/audio/sounds/ui-quirky-19.mp3`;
-export const SOUND_DROP = `${environment.base}/audio/sounds/zapsplat_bambo_swoosh.mp3`;
-export const SOUND_LEVEL_10 = `${environment.base}/audio/sounds/zapsplat_level_up.mp3`;
+export const SOUND_FINISHED = `${environment.base}audio/sounds/power-down-13.mp3`;
+export const SOUND_LEVEL = `${environment.base}audio/sounds/retro-chip-power.mp3`;
+export const SOUND_SCORE = `${environment.base}audio/sounds/ui-quirky-19.mp3`;
+export const SOUND_DROP = `${environment.base}audio/sounds/zapsplat_bambo_swoosh.mp3`;
+export const SOUND_LEVEL_10 = `${environment.base}audio/sounds/zapsplat_level_up.mp3`;
export const PRELOAD_AUDIO = [
SOUND_FINISHED,
diff --git a/src/components/particles/hooks/usePersist.tsx b/src/components/particles/hooks/usePersist.tsx
index 1925a95..945daa7 100644
--- a/src/components/particles/hooks/usePersist.tsx
+++ b/src/components/particles/hooks/usePersist.tsx
@@ -2,10 +2,10 @@ import {useEffect} from 'react';
import {useSelector} from 'react-redux';
import {useAppDispatch} from '../../../store/app-store';
import {AppActions} from '../../../store/app/app-actions';
-import {APP_PERSIST_DEFAULT, AppPersist} from '../../../store/app/app-model';
+import {AppPersist} from '../../../store/app/app-model';
import {AppSelectors} from '../../../store/app/app-selectors';
-export const usePersist = (storageKey: string) => {
+export const usePersist = (version: string, storageKey: string) => {
const persist = useSelector(AppSelectors.persist);
const dispatch = useAppDispatch();
@@ -13,17 +13,18 @@ export const usePersist = (storageKey: string) => {
const json = localStorage.getItem(storageKey);
if (json) {
try {
- const data: AppPersist = JSON.parse(json);
- if (data?.version === APP_PERSIST_DEFAULT.version) {
- dispatch(AppActions.persist(data));
+ const data: AppPersist & {version: string} = JSON.parse(json);
+ if (data?.version === version) {
+ const {version, ...state} = data;
+ dispatch(AppActions.persist(state));
}
} catch (err) {
console.error('Could not read persist data.', err);
}
}
- }, [storageKey, dispatch]);
+ }, [version, storageKey, dispatch]);
useEffect(() => {
- localStorage.setItem(storageKey, JSON.stringify(persist));
- }, [storageKey, persist]);
+ localStorage.setItem(storageKey, JSON.stringify({...persist, version}));
+ }, [version, storageKey, persist]);
};
diff --git a/src/components/templates/App.tsx b/src/components/templates/App.tsx
index caaa517..3c9ccd2 100644
--- a/src/components/templates/App.tsx
+++ b/src/components/templates/App.tsx
@@ -18,14 +18,18 @@ import {GameDesktop} from './GameDesktop';
import {GameMobile} from './GameMobile';
import {Welcome} from './Welcome';
-export const App: FC = () => {
+export interface AppProps {
+ version: string;
+}
+
+export const App: FC = ({version}) => {
const welcoming = useSelector(GameSelectors.welcoming);
const isWideScreen = useMediaQuery('(min-width:600px)');
const isShortScreen = useMediaQuery('(max-height:850px)');
const isNarrowScreen = useMediaQuery('(max-width:380px)');
usePageView('/');
- usePersist(environment.storageKey);
+ usePersist(version, environment.storageKey);
useTitle();
const game = useMemo(() => {
@@ -49,7 +53,7 @@ export const App: FC = () => {
-
+