mobile store if game intro has been read

client/src/components/welcome.tsx

@@ -11,7 +11,7 @@ import './welcome.css'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faGlobe, faBook, faHome, faCircleInfo, faArrowRight, faArrowLeft, faShield, faRotateLeft } from '@fortawesome/free-solid-svg-icons'
 import { GameIdContext } from '../app';
-import { selectCompleted, selectDifficulty } from '../state/progress';
+import { changedDifficulty, changedOpenedIntro, selectCompleted, selectDifficulty, selectOpenedIntro } from '../state/progress';
 import { useGetGameInfoQuery, useLoadInventoryOverviewQuery } from '../state/api';
 import Markdown from './markdown';
 import WorldSelectionMenu, { WelcomeMenu } from './world_selection_menu';
@@ -21,6 +21,7 @@ import { Documentation, Inventory } from './inventory';
 import { store } from '../state/store';
 import { useWindowDimensions } from '../window_width';
 import { MobileContext } from './infoview/context';
+import { useAppDispatch } from '../hooks';
 
 cytoscape.use( klay );
 
@@ -61,10 +62,15 @@ function LevelIcon({ worldId, levelId, position, completed, available }) {
 function Welcome() {
   const navigate = useNavigate();
 
+  const gameId = React.useContext(GameIdContext)
+
+  const openedIntro = useSelector(selectOpenedIntro(gameId))
+
   /** Only for mobile layout */
-  const [pageNumber, setPageNumber] = useState(0)
+  const [pageNumber, setPageNumber] = useState(openedIntro ? 1 : 0)
+
+  const dispatch = useAppDispatch()
 
-  const gameId = React.useContext(GameIdContext)
   const gameInfo = useGetGameInfoQuery({game: gameId})
 
   const {mobile} = React.useContext(MobileContext)
@@ -204,7 +210,9 @@ function Welcome() {
               <FontAwesomeIcon icon={faArrowLeft} />&nbsp;<FontAwesomeIcon icon={faGlobe} />
             </Button>
             <Button className="btn btn-next" to=""
-                title="world tree" onClick={() => {setPageNumber(1)}}>
+                title="world tree" onClick={() => {
+                  setPageNumber(1);
+                  dispatch(changedOpenedIntro({game: gameId, openedIntro: true}))}}>
               Game&nbsp;<FontAwesomeIcon icon={faArrowRight}/>
             </Button>
           </div>

client/src/state/progress.ts

@@ -25,6 +25,7 @@ interface WorldProgressState {
 export interface GameProgressState {
   inventory: string[],
   difficulty: number,
+  openedIntro: boolean,
   data: WorldProgressState
 }
 
@@ -52,7 +53,7 @@ const initalLevelProgressState: LevelProgressState = {code: "", completed: false
 /** Add an empty skeleton with progress for the current game */
 function addGameProgress (state: ProgressState, action: PayloadAction<{game: string}>) {
   if (!state.games[action.payload.game]) {
-    state.games[action.payload.game] = {inventory: [], data: {}, difficulty: DEFAULT_DIFFICULTY}
+    state.games[action.payload.game] = {inventory: [], openedIntro: true, data: {}, difficulty: DEFAULT_DIFFICULTY}
   }
 }
 
@@ -95,7 +96,7 @@ export const progressSlice = createSlice({
     },
     /** delete all progress for this game */
     deleteProgress(state: ProgressState, action: PayloadAction<{game: string}>) {
-      state.games[action.payload.game] = {inventory: [], data: {}, difficulty: DEFAULT_DIFFICULTY}
+      state.games[action.payload.game] = {inventory: [], data: {}, openedIntro: true, difficulty: DEFAULT_DIFFICULTY}
     },
     /** delete progress for this level */
     deleteLevelProgress(state: ProgressState, action: PayloadAction<{game: string, world: string, level: number}>) {
@@ -117,6 +118,11 @@ export const progressSlice = createSlice({
       addGameProgress(state, action)
       state.games[action.payload.game].difficulty = action.payload.difficulty
     },
+    /** set the difficulty */
+    changedOpenedIntro(state: ProgressState, action: PayloadAction<{game: string, openedIntro: boolean}>) {
+      addGameProgress(state, action)
+      state.games[action.payload.game].openedIntro = action.payload.openedIntro
+    },
   }
 })
 
@@ -173,14 +179,21 @@ export function selectProgress(game: string) {
   }
 }
 
-/** return progress for the current game if it exists */
+/** return difficulty for the current game if it exists */
 export function selectDifficulty(game: string) {
   return (state) => {
     return state.progress.games[game]?.difficulty ?? DEFAULT_DIFFICULTY
   }
 }
 
+/** return whether the intro has been read */
+export function selectOpenedIntro(game: string) {
+  return (state) => {
+    return state.progress.games[game]?.openedIntro
+  }
+}
+
 /** Export actions to modify the progress */
 export const { changedSelection, codeEdited, levelCompleted, deleteProgress,
-  deleteLevelProgress, loadProgress, helpEdited, changedInventory,
+  deleteLevelProgress, loadProgress, helpEdited, changedInventory, changedOpenedIntro,
   changedDifficulty } = progressSlice.actions