add support for multiple games in redux state

client/src/components/Level.tsx

@@ -76,8 +76,9 @@ function PlayableLevel({worldId, levelId}) {
   const codeviewRef = useRef<HTMLDivElement>(null)
   const introductionPanelRef = useRef<HTMLDivElement>(null)
 
-  const initialCode = useAppSelector(selectCode(worldId, levelId))
-  const initialSelections = useAppSelector(selectSelections(worldId, levelId))
+  const gameId = React.useContext(GameIdContext)
+  const initialCode = useAppSelector(selectCode(gameId, worldId, levelId))
+  const initialSelections = useAppSelector(selectSelections(gameId, worldId, levelId))
 
   const [commandLineMode, setCommandLineMode] = useState(true)
   const [commandLineInput, setCommandLineInput] = useState("")
@@ -126,14 +127,13 @@ function PlayableLevel({worldId, levelId}) {
     }]);
   }
 
-  const gameId = React.useContext(GameIdContext)
   const gameInfo = useGetGameInfoQuery({game: gameId})
   const level = useLoadLevelQuery({game: gameId, world: worldId, level: levelId})
 
   const dispatch = useAppDispatch()
 
   const onDidChangeContent = (code) => {
-    dispatch(codeEdited({world: worldId, level: levelId, code}))
+    dispatch(codeEdited({game: gameId, world: worldId, level: levelId, code}))
 
     setCanUndo(code.trim() !== "")
   }
@@ -142,10 +142,10 @@ function PlayableLevel({worldId, levelId}) {
     const selections = monacoSelections.map(
       ({selectionStartLineNumber, selectionStartColumn, positionLineNumber, positionColumn}) =>
       {return {selectionStartLineNumber, selectionStartColumn, positionLineNumber, positionColumn}})
-    dispatch(changedSelection({world: worldId, level: levelId, selections}))
+    dispatch(changedSelection({game: gameId, world: worldId, level: levelId, selections}))
   }
 
-  const completed = useAppSelector(selectCompleted(worldId, levelId))
+  const completed = useAppSelector(selectCompleted(gameId, worldId, levelId))
 
   const {editor, infoProvider, editorConnection} =
     useLevelEditor(worldId, levelId, codeviewRef, initialCode, initialSelections, onDidChangeContent, onDidChangeSelection)
@@ -408,7 +408,7 @@ function useLoadWorldFiles(worldId) {
         if (model) {
           models.push(model)
         } else {
-          const code = selectCode(worldId, levelId)(store.getState())
+          const code = selectCode(gameId, worldId, levelId)(store.getState())
           models.push(monaco.editor.createModel(code, 'lean4', uri))
         }
       }

client/src/components/Welcome.tsx

@@ -19,7 +19,7 @@ import { GameIdContext } from '../App';
 
 function LevelIcon({ worldId, levelId, position }) {
   const gameId = React.useContext(GameIdContext)
-  const completed = useSelector(selectCompleted(worldId,levelId))
+  const completed = useSelector(selectCompleted(gameId, worldId,levelId))
   // TODO: relative positioning?
   return (
     <Link to={`/game/${gameId}/${worldId}/level/${levelId}`} key={`/game/${gameId}/world/${worldId}/level/${levelId}`}>

client/src/components/infoview/main.tsx

@@ -19,10 +19,12 @@ import { WithRpcSessions } from '../../../../node_modules/lean4-infoview/src/inf
 import { ServerVersion } from '../../../../node_modules/lean4-infoview/src/infoview/serverVersion';
 import { useAppDispatch, useAppSelector } from '../../hooks';
 import { levelCompleted, selectCompleted } from '../../state/progress';
+import { GameIdContext } from '../../App';
 
 
 export function Main(props: {world: string, level: number}) {
     const ec = React.useContext(EditorContext);
+    const gameId = React.useContext(GameIdContext)
 
     const dispatch = useAppDispatch()
 
@@ -33,13 +35,13 @@ export function Main(props: {world: string, level: number}) {
 
             if (ec.events.changedCursorLocation.current &&
                 ec.events.changedCursorLocation.current.uri === params.uri) {
-                dispatch(levelCompleted({world: props.world, level: props.level}))
+                dispatch(levelCompleted({game: gameId, world: props.world, level: props.level}))
             }
         },
         []
     );
 
-    const completed = useAppSelector(selectCompleted(props.world, props.level))
+    const completed = useAppSelector(selectCompleted(gameId, props.world, props.level))
 
     /* Set up updates to the global infoview state on editor events. */
     const config = useEventResult(ec.events.changedInfoviewConfig) ?? defaultInfoviewConfig;