add buttons to delete level/world only #199

client/src/components/popup/erase.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useSelector } from 'react-redux'
 import { useAppDispatch } from '../../hooks'
-import { deleteProgress, selectProgress } from '../../state/progress'
+import { deleteLevelProgress, deleteProgress, deleteWorldProgress, selectProgress } from '../../state/progress'
 import { downloadFile } from '../world_tree'
 import { Button } from '../utils'
 import { Trans, useTranslation } from 'react-i18next'
@@ -27,8 +27,8 @@ export function downloadProgress(gameId: string, gameProgress) {
  */
 export function ErasePopup () {
   let { t } = useTranslation()
-  const {gameId} = React.useContext(GameIdContext)
+  const { gameId, worldId, levelId } = React.useContext(GameIdContext)
-  const {setPage} = useContext(PageContext)
+  const { setPage } = useContext(PageContext)
   const gameProgress = useSelector(selectProgress(gameId))
   const dispatch = useAppDispatch()
   const { setPopupContent } = useContext(PopupContext)
@@ -40,6 +40,18 @@ export function ErasePopup () {
     // ev.preventDefault() // TODO: this is a hack to prevent the buttons below from opening a link
   }
 
+  function eraseLevel (ev) {
+    dispatch(deleteLevelProgress({game: gameId, world: worldId, level: levelId}))
+    setPopupContent(null)
+    ev.preventDefault()
+  }
+
+  function eraseWorld (ev) {
+    dispatch(deleteWorldProgress({game: gameId, world: worldId}))
+    setPopupContent(null)
+    ev.preventDefault()
+  }
+
   const downloadAndErase = (ev) => {
     downloadProgress(gameId, gameProgress)
     eraseProgress(ev)
@@ -49,13 +61,28 @@ export function ErasePopup () {
     <h2>{t("Delete Progress?")}</h2>
     <Trans>
       <p>Do you want to delete your saved progress irreversibly?</p>
+    </Trans>
+    <div className='settings-buttons'>
+      { levelId ?
+        <Button onClick={eraseLevel} to="">{t("Delete this Level")}</Button> : <></>
+      }
+      { worldId ?
+        <Button onClick={eraseWorld} to="">{t("Delete this World")}</Button> : <></>
+      }
+      <Button onClick={eraseProgress} to={`/${gameId}/`}>{t("Delete Everything")}</Button>
+    </div>
+    <Trans>
+      <p>
+        Deleting everything will delete all your proofs and your collected inventory! It's recommended
+        to download your progress first.
+      </p>
       <p>
-        (This deletes your proofs and your collected inventory.
+        (Saves from other games are not deleted.)
-        Saves from other games are not deleted.)
       </p>
     </Trans>
-    <Button onClick={eraseProgress} to={`/${gameId}/`}>{t("Delete")}</Button>
+    <div className='settings-buttons'>
-    <Button onClick={downloadAndErase} to={`/${gameId}/`}>{t("Download & Delete")}</Button>
+      <Button onClick={downloadAndErase} to={`/${gameId}/`}>{t("Download & Delete everything")}</Button>
       <Button onClick={(ev) => {setPopupContent(null); ev.preventDefault()}} to="">{t("Cancel")}</Button>
+    </div>
   </>
 }

client/src/css/popup.css

@@ -23,3 +23,8 @@
   float: right;
   font-size: 1.5rem;
 }
+
+.settings-buttons .btn {
+  margin-top: 0.2rem;
+  margin-bottom: 0.2rem;
+}

client/src/state/progress.ts

@@ -107,9 +107,14 @@ export const progressSlice = createSlice({
     deleteProgress(state: ProgressState, action: PayloadAction<{game: string}>) {
       state.games[action.payload.game.toLowerCase()] = {inventory: [], data: {}, readIntro: false, difficulty: DEFAULT_DIFFICULTY}
     },
+    /** delete progress for this world */
+    deleteWorldProgress(state: ProgressState, action: PayloadAction<{game: string, world: string}>) {
+      // addWorldProgress(state, action)
+      state.games[action.payload.game.toLowerCase()].data[action.payload.world] = {readIntro: false}
+    },
     /** delete progress for this level */
     deleteLevelProgress(state: ProgressState, action: PayloadAction<{game: string, world: string, level: number}>) {
-      addLevelProgress(state, action)
+      // addLevelProgress(state, action)
       state.games[action.payload.game.toLowerCase()].data[action.payload.world][action.payload.level] = initalLevelProgressState
     },
     /** load progress, e.g. from external import */
@@ -223,5 +228,5 @@ export function selectTypewriterMode(game: string) {
 
 /** Export actions to modify the progress */
 export const { changedSelection, codeEdited, levelCompleted, deleteProgress,
-  deleteLevelProgress, loadProgress, helpEdited, changedInventory, changedReadIntro,
+  deleteLevelProgress, deleteWorldProgress, loadProgress, helpEdited, changedInventory, changedReadIntro,
   changedDifficulty, changeTypewriterMode} = progressSlice.actions