Update cache action usage to v1 in GitHub workflows (#28)

* chore: Update cache action usage to v1 in GitHub workflows * chore: reorganize scripts in package.json * chore: Update package.json version to 2.0.0 * chore: Update next.config.mjs to include output option for exporting * chore: Update audio file paths to use relative URLs * chore: fixed favicon * chore: Remove deprecated version field and update package.json version to 2.0.0
reactgular · Jun 1, 2024 · abf6f35 · abf6f35
1 parent a2082b7
commit abf6f35
Show file tree

Hide file tree

Showing 17 changed files with 79 additions and 74 deletions.
diff --git a/.env b/.env
@@ -1,7 +1,6 @@
 NEXT_PUBLIC_BRAND_NAME=Tetromino
 NEXT_PUBLIC_GITHUB=https://github.com/reactgular/tetromino
 NEXT_PUBLIC_STORAGE_KEY=tetromino
-NEXT_PUBLIC_VERSION=2.0.0
 # Base path for loading audio files
 NEXT_PUBLIC_BASE=/tetromino
 NEXT_PUBLIC_ANALYTICS=
diff --git a/.env.local b/.env.local
@@ -1,3 +1,2 @@
-NEXT_PUBLIC_BASE=http://localhost:3000/
+NEXT_PUBLIC_BASE=/
 NEXT_PUBLIC_ANALYTICS=
-
diff --git a/.github/workflows/deploy-artifacts.yml b/.github/workflows/deploy-artifacts.yml
@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: "📦 Install dependencies"
-        uses: reactgular/cache@main
+        uses: reactgular/cache@v1
         with:
           mode: "install"
 
@@ -31,7 +31,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: "💽 Restore node_modules cache"
-        uses: reactgular/cache@main
+        uses: reactgular/cache@v1
         with:
           mode: "restore"
 
@@ -47,7 +47,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: "💽 Restore node_modules cache"
-        uses: reactgular/cache@main
+        uses: reactgular/cache@v1
         with:
           mode: "restore"
 
@@ -79,7 +79,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: "💽 Restore node_modules cache"
-        uses: reactgular/cache@main
+        uses: reactgular/cache@v1
         with:
           mode: "restore"
 

diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
@@ -16,7 +16,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: "📦 Install dependencies"
-        uses: reactgular/cache@main
+        uses: reactgular/cache@v1
         with:
           mode: "install"
 
@@ -28,7 +28,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: "💽 Restore node_modules cache"
-        uses: reactgular/cache@main
+        uses: reactgular/cache@v1
         with:
           mode: "restore"
 
@@ -44,7 +44,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: "💽 Restore node_modules cache"
-        uses: reactgular/cache@main
+        uses: reactgular/cache@v1
         with:
           mode: "restore"
 
@@ -60,7 +60,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: "💽 Restore node_modules cache"
-        uses: reactgular/cache@main
+        uses: reactgular/cache@v1
         with:
           mode: "restore"
 
@@ -75,7 +75,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: "💽 Restore node_modules cache"
-        uses: reactgular/cache@main
+        uses: reactgular/cache@v1
         with:
           mode: "restore"
 

diff --git a/next.config.mjs b/next.config.mjs
@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    output: "export"
+};
 
 export default nextConfig;
diff --git a/package.json b/package.json
@@ -1,12 +1,13 @@
 {
   "name": "tetromino",
-  "version": "0.1.0",
+  "version": "2.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
     "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "dev": "next dev",
+    "lint": "next lint",
+    "sort": "npx --yes sort-package-json",
+    "start": "next start"
   },
   "dependencies": {
     "@material-ui/core": "^4.12.4",

diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,10 +1,23 @@
 import {App} from '../components/templates/App';
 import {Providers} from '../components/templates/Providers';
 
+/**
+ * Read the package.json within a server component, so we don't
+ * expose the entire package.json to the client.
+ */
+const getPackageJsonVersion = () => {
+    try {
+        return require('../../package.json').version;
+    } catch (err) {
+        console.error('Could not find package.json. Please make sure the file exists and is valid JSON.', err);
+        return '0.0.0';
+    }
+};
+
 export default function Home() {
     return (
         <Providers>
-            <App />
+            <App version={getPackageJsonVersion()} />
         </Providers>
     );
 }
diff --git a/src/components/atoms/app/AppCopyright.tsx b/src/components/atoms/app/AppCopyright.tsx
@@ -4,10 +4,14 @@ import {FaGithub} from 'react-icons/fa';
 import {environment} from '../../../environment/environment';
 import {ClassNameProps} from '../../particles/particles.types';
 
-export const AppCopyright: FC<ClassNameProps> = ({className}) => {
+export interface AppCopyrightProps {
+    version: string;
+}
+
+export const AppCopyright: FC<AppCopyrightProps & ClassNameProps> = ({version, className}) => {
     return (
         <div className={classNames(className, 'flex text-xs space-x-2')}>
-            <div>Version {environment.version}</div>
+            <div>Version {version}</div>
             <a
                 href={environment.github}
                 className="flex text-primary hover:underline items-center space-x-1"

diff --git a/src/components/organisms/dialogs/OptionsDialog.tsx b/src/components/organisms/dialogs/OptionsDialog.tsx
@@ -9,12 +9,15 @@ import {GameOptions} from '../game/GameOptions';
 
 export interface OptionsDialogProps {
     selectWelcoming?: () => boolean;
+
+    version: string;
 }
 
 export const OptionsDialog: FC<OptionsDialogProps & Partial<AppDialogControl>> =
     ({
         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<OptionsDialogProps & Partial<AppDialogControl>> =
                 selectOpen={selectOpen}
             >
                 <GameOptions darkMode={!welcoming} />
-                <AppCopyright className="mt-auto mx-auto mt-5" />
+                <AppCopyright version={version} className="mx-auto mt-5" />
             </AppDialog>
         );
     };
diff --git 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
@@ -2,28 +2,29 @@ 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();
 
     useEffect(() => {
         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
@@ -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<AppProps> = ({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 = () => {
             <PauseDialog />
             <FinishDialog />
             <HighScoresDialog />
-            <OptionsDialog />
+            <OptionsDialog version={version} />
             <CreditsDialog />
         </div>
     );

diff --git a/src/environment/environment.ts b/src/environment/environment.ts
@@ -1,3 +1,5 @@
+const endsInSlash = (str: string): string => str.endsWith('/') ? str : `${str}/`;
+
 export interface Environment {
     analytics: string;
 
@@ -9,6 +11,9 @@ export interface Environment {
 
     storageKey: string;
 
+    /**
+     * @deprecated
+     */
     version: string;
 }
 
@@ -18,5 +23,5 @@ export const environment: Environment = {
     github: process.env.NEXT_PUBLIC_GITHUB as string,
     storageKey: process.env.NEXT_PUBLIC_STORAGE_KEY as string,
     version: process.env.NEXT_PUBLIC_VERSION as string,
-    base: process.env.NEXT_PUBLIC_BASE as string
+    base: endsInSlash(process.env.NEXT_PUBLIC_BASE as string ?? '/')
 };
diff --git a/src/store/app/app-model.ts b/src/store/app/app-model.ts
@@ -102,23 +102,6 @@ export type AppPersist = Pick<
     | 'music_type'
     | 'high_scores'
     | 'keys'
-> & {version: string};
-
-/**
- * Defaults persist values.
- */
-export const APP_PERSIST_DEFAULT: AppPersist = {
-    dark: APP_INITIAL_STATE.dark,
-    ghost_piece: APP_INITIAL_STATE.ghost_piece,
-    start_level: APP_INITIAL_STATE.start_level,
-    sound: APP_INITIAL_STATE.sound,
-    sound_volume: APP_INITIAL_STATE.sound_volume,
-    music: APP_INITIAL_STATE.music,
-    music_volume: APP_INITIAL_STATE.music_volume,
-    music_type: APP_INITIAL_STATE.music_type,
-    high_scores: APP_INITIAL_STATE.high_scores,
-    keys: APP_INITIAL_STATE.keys,
-    version: environment.version
-};
+>;
 
 export const APP_NAME = 'app';
diff --git a/src/store/app/app-selectors.ts b/src/store/app/app-selectors.ts
@@ -1,7 +1,6 @@
 import {createSelector} from '@reduxjs/toolkit';
-import {environment} from '../../environment/environment';
 import {selectRoot} from '../select-root';
-import {AppDialogType, AppPersist} from './app-model';
+import {AppDialogType, AppModel, AppPersist} from './app-model';
 
 export namespace AppSelectors {
     /**
@@ -97,7 +96,6 @@ export namespace AppSelectors {
             keys
         ): AppPersist => {
             return {
-                version: environment.version,
                 dark,
                 ghost_piece,
                 start_level,

diff --git a/src/store/app/app-state.ts b/src/store/app/app-state.ts
@@ -1,9 +1,8 @@
 import {createSlice} from '@reduxjs/toolkit';
 import ReactGA from 'react-ga';
 import {KEY_BINDINGS} from '../../components/particles/key_bindings.types';
-import {environment} from '../../environment/environment';
 import {AppActions} from './app-actions';
-import {APP_INITIAL_STATE, APP_NAME} from './app-model';
+import {APP_INITIAL_STATE, APP_NAME, AppModel} from './app-model';
 
 export namespace AppState {
     const track = (action: string, value?: number) => {
@@ -104,13 +103,7 @@ export namespace AppState {
                     };
                 })
                 .addCase(AppActions.persist, (state, {payload}) => {
-                    const {version, ...restore} = payload;
-                    if (version === environment.version) {
-                        return {
-                            ...state,
-                            ...restore
-                        };
-                    }
+                    return {...payload} satisfies AppModel;
                 });
         }
     });