save help in store

client/src/components/level.tsx

@@ -36,7 +36,7 @@ import { Button } from './button'
 import Markdown from './markdown';
 import {Inventory, Documentation} from './inventory';
 import { useGetGameInfoQuery, useLoadLevelQuery } from '../state/api';
-import { changedSelection, codeEdited, selectCode, selectSelections, progressSlice, selectCompleted } from '../state/progress';
+import { changedSelection, codeEdited, selectCode, selectSelections, progressSlice, selectCompleted, helpEdited, selectHelp } from '../state/progress';
 import { DualEditor } from './infoview/main'
 import { DeletedHint, DeletedHints, Hints } from './hints';
 import { DeletedChatContext, InputModeContext, MonacoEditorContext, ProofContext, ProofStep, SelectionContext } from './infoview/context';
@@ -72,6 +72,8 @@ function PlayableLevel({worldId, levelId}) {
   // a new proof has been entered. e.g. to consult messages coming from dead ends
   const [deletedChat, setDeletedChat] = useState<Array<GameHint>>([])
 
+  const store = useStore()
+
   // A set of row numbers where help is displayed
   const [showHelp, setShowHelp] = useState<Set<number>>(new Set())
 
@@ -82,8 +84,6 @@ function PlayableLevel({worldId, levelId}) {
   const [commandLineInput, setCommandLineInput] = useState("")
   const [canUndo, setCanUndo] = useState(initialCode.trim() !== "")
 
-  const [showHiddenHints, setShowHiddenHints] = useState(false)
-
   const [selectedStep, setSelectedStep] = useState<number>()
 
   const theme = useTheme();
@@ -97,6 +97,11 @@ function PlayableLevel({worldId, levelId}) {
     setCommandLineInput("")
   }, [levelId])
 
+  // Load the selected help steps from the store
+  useEffect(() => {
+    setShowHelp(new Set(selectHelp(gameId, worldId, levelId)(store.getState())))
+  }, [])
+
   useEffect(() => {
     // TODO: For some reason this is always called twice
     console.debug('scroll chat')
@@ -126,7 +131,10 @@ function PlayableLevel({worldId, levelId}) {
 
   React.useEffect(() => {
     // Forget whether hidden hints are displayed for steps that don't exist yet
-    setShowHelp(new Set(Array.from(showHelp).filter(i => (i < proof.length))))
+    if (proof.length) {
+      console.debug(Array.from(showHelp))
+      setShowHelp(new Set(Array.from(showHelp).filter(i => (i < proof.length))))
+    }
   }, [proof])
 
   /** Unused. Was implementing an undo button, which has been replaced by `deleteProof` inside
@@ -165,6 +173,14 @@ function PlayableLevel({worldId, levelId}) {
     setCanUndo(code.trim() !== "")
   }
 
+  // save showed help in store
+  useEffect(() => {
+    if (proof.length) {
+      console.debug(`showHelp:\n ${showHelp}`)
+      dispatch(helpEdited({game: gameId, world: worldId, level: levelId, help: Array.from(showHelp)}))
+    }
+  }, [showHelp])
+
   const onDidChangeSelection = (monacoSelections) => {
     const selections = monacoSelections.map(
       ({selectionStartLineNumber, selectionStartColumn, positionLineNumber, positionColumn}) =>

client/src/state/progress.ts

@@ -67,6 +67,7 @@ export const progressSlice = createSlice({
     },
     /** Set the list of rows where help is displayed */
     helpEdited(state: ProgressState, action: PayloadAction<{game: string, world: string, level: number, help: number[]}>) {
+      console.debug(`!setting help to: ${action.payload.help}`)
       state.games[action.payload.game][action.payload.world][action.payload.level].help = action.payload.help
     },
     /** delete all progress for this game */
@@ -103,6 +104,13 @@ export function selectCode(game: string, world: string, level: number) {
   }
 }
 
+/** return the code of the current level */
+export function selectHelp(game: string, world: string, level: number) {
+  return (state) => {
+    return selectLevel(game, world, level)(state).help
+  }
+}
+
 /** return the selections made in the current level */
 export function selectSelections(game: string, world: string, level: number) {
   return (state) => {
@@ -126,4 +134,4 @@ export function selectProgress(game: string) {
 
 /** Export actions to modify the progress */
 export const { changedSelection, codeEdited, levelCompleted, deleteProgress,
-  deleteLevelProgress, loadProgress } = progressSlice.actions
+  deleteLevelProgress, loadProgress, helpEdited } = progressSlice.actions