diff --git a/client/src/components/GameMenu.tsx b/client/src/components/GameMenu.tsx new file mode 100644 index 0000000..970049a --- /dev/null +++ b/client/src/components/GameMenu.tsx @@ -0,0 +1,60 @@ +import * as React from 'react' +import { Button } from './Button' +import { GameIdContext } from '../App'; +import { useStore } from 'react-redux'; +import { useAppDispatch, useAppSelector } from '../hooks'; + +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faDownload, faUpload, faEraser } from '@fortawesome/free-solid-svg-icons' + +import { deleteProgress } from '../state/progress'; + +function GameMenu() { + + const gameId = React.useContext(GameIdContext) + const store = useStore() + + const [eraseMenu, setEraseMenu] = React.useState(false); + const openEraseMenu = () => setEraseMenu(true); + const closeEraseMenu = () => setEraseMenu(false); + + const dispatch = useAppDispatch() + + const downloadProgress = () => {}; + // const uploadProgress = () => {}; + + const eraseProgress = () => { + dispatch(deleteProgress({game: gameId})) + closeEraseMenu() + } + + const downloadAndErase = () => { + downloadProgress () + eraseProgress() + } + + return +} + +export default GameMenu diff --git a/client/src/components/Welcome.tsx b/client/src/components/Welcome.tsx index 846068c..0c66c5b 100644 --- a/client/src/components/Welcome.tsx +++ b/client/src/components/Welcome.tsx @@ -7,6 +7,7 @@ import { useNavigate } from 'react-router-dom'; import { useSelector } from 'react-redux'; import Split from 'react-split' +import GameMenu from './GameMenu'; import {PrivacyPolicy} from './PrivacyPolicy'; cytoscape.use( klay ); @@ -17,6 +18,11 @@ import { Link } from 'react-router-dom'; import Markdown from './Markdown'; import { selectCompleted } from '../state/progress'; import { GameIdContext } from '../App'; +import { Button } from './Button'; + +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faDownload, faUpload, faEraser } from '@fortawesome/free-solid-svg-icons' + const N = 24 // max number of levels per world const R = 800 // radius of a world @@ -33,7 +39,7 @@ function LevelIcon({ worldId, levelId, position }) { // TODO: relative positioning? return ( - + ) @@ -69,7 +75,9 @@ function Welcome() { for (let i = 1; i <= gameInfo.data.worldSize[id]; i++) { svgElements.push( - + ) } @@ -103,6 +111,7 @@ function Welcome() {
+ @@ -112,7 +121,7 @@ function Welcome() {
} - + } diff --git a/client/src/components/welcome.css b/client/src/components/welcome.css index 5a57721..9d07d01 100644 --- a/client/src/components/welcome.css +++ b/client/src/components/welcome.css @@ -191,3 +191,15 @@ svg .world-title { .modal table { width: 100%; } + +.game-menu { + padding: .5em; +} + +.game-menu .btn { + min-width: 5em; + text-align: center; + margin-left: .4em; + margin-right: .4em; + margin-bottom: .2em; +} diff --git a/client/src/state/progress.ts b/client/src/state/progress.ts index 3d0a29c..ce43b4f 100644 --- a/client/src/state/progress.ts +++ b/client/src/state/progress.ts @@ -49,6 +49,9 @@ export const progressSlice = createSlice({ addLevelProgress(state, action) state.level[action.payload.game][action.payload.world][action.payload.level].completed = true }, + deleteProgress(state, action: PayloadAction<{game: string}>) { + state.level[action.payload.game] = {} + }, } }) @@ -85,4 +88,4 @@ export function selectProgress() { } } -export const { changedSelection, codeEdited, levelCompleted } = progressSlice.actions +export const { changedSelection, codeEdited, levelCompleted, deleteProgress } = progressSlice.actions