From e79c728e6a6172c205d3055645a82820f3225cd5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= <66582202+Vikeo@users.noreply.github.com> Date: Mon, 1 Apr 2024 00:28:59 +0200 Subject: [PATCH] Save game (#35) * save * hide scrollbar on desktop * start menu styling * bump --- package.json | 2 +- src/Components/Misc/InfoModal.tsx | 2 +- src/Components/Players/PlayerMenu.tsx | 13 +- src/Components/Views/StartMenu/StartMenu.tsx | 153 ++++++++++++------- src/Contexts/GlobalSettingsContext.tsx | 11 +- src/Providers/GlobalSettingsProvider.tsx | 57 ++++--- src/index.css | 10 ++ 7 files changed, 170 insertions(+), 78 deletions(-) diff --git a/package.json b/package.json index 2c44c2b..0075fa7 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "life-trinket", "private": true, - "version": "0.9.45", + "version": "0.9.5", "type": "commonjs", "engines": { "node": ">=18", diff --git a/src/Components/Misc/InfoModal.tsx b/src/Components/Misc/InfoModal.tsx index 81c8b9a..3c77ca5 100644 --- a/src/Components/Misc/InfoModal.tsx +++ b/src/Components/Misc/InfoModal.tsx @@ -6,7 +6,7 @@ import { Cross } from '../../Icons/generated'; import { useEffect } from 'react'; import { useAnalytics } from '../../Hooks/useAnalytics'; -export const ModalWrapper = twc.div`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[85vh] bg-background-default p-4 overflow-scroll rounded-2xl border-none text-text-primary w-[95vw] max-w-[548px]`; +export const ModalWrapper = twc.div`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-[47.5%] h-[95%] bg-background-default p-4 overflow-scroll rounded-2xl border-none text-text-primary w-[95vw] max-w-[548px]`; type InfoModalProps = { isOpen: boolean; diff --git a/src/Components/Players/PlayerMenu.tsx b/src/Components/Players/PlayerMenu.tsx index 1fe742e..88d1e6a 100644 --- a/src/Components/Players/PlayerMenu.tsx +++ b/src/Components/Players/PlayerMenu.tsx @@ -110,11 +110,13 @@ const PlayerMenu = ({ settings, setPlaying, setRandomizingPlayer, + saveCurrentGame, + initialGameSettings, } = useGlobalSettings(); const analytics = useAnalytics(); - const { updatePlayer, resetCurrentGame } = usePlayers(); + const { updatePlayer, resetCurrentGame, players } = usePlayers(); const handleColorChange = (event: React.ChangeEvent) => { const updatedPlayer = { ...player, color: event.target.value }; @@ -137,6 +139,7 @@ const PlayerMenu = ({ }; const handleGoToStart = () => { + saveCurrentGame({ players, initialGameSettings }); goToStart(); setRandomizingPlayer(true); }; @@ -443,8 +446,14 @@ const PlayerMenu = ({ className="text-center text-text-primary" style={{ fontSize: extraCountersSize }} > - End Game? + Go to start? +
+ (Game will be saved) +
+ Number of Players + + { + setPlayerOptions({ + ...playerOptions, + numberOfPlayers: value as number, + orientation: Orientation.Landscape, + }); + }} + /> + + + Starting Health + + + setPlayerOptions({ + ...playerOptions, + startingLifeTotal: value as number, + orientation: Orientation.Landscape, + }) + } + /> + Layout { - + NEW GAME + + + {savedGame && ( + + )} ); diff --git a/src/Contexts/GlobalSettingsContext.tsx b/src/Contexts/GlobalSettingsContext.tsx index 9ad3123..252ed9d 100644 --- a/src/Contexts/GlobalSettingsContext.tsx +++ b/src/Contexts/GlobalSettingsContext.tsx @@ -1,5 +1,6 @@ import { createContext } from 'react'; import { InitialGameSettings, Settings } from '../Types/Settings'; +import { Player } from '../Types/Player'; type Version = { installedVersion: string; @@ -8,6 +9,11 @@ type Version = { remoteVersion?: string; }; +export type SavedGame = { + initialGameSettings: InitialGameSettings; + players: Player[]; +} | null; + export type GlobalSettingsContextType = { fullscreen: { isFullscreen: boolean; @@ -25,7 +31,7 @@ export type GlobalSettingsContextType = { goToStart: () => void; showPlay: boolean; setShowPlay: (showPlay: boolean) => void; - initialGameSettings: InitialGameSettings | null; + initialGameSettings: InitialGameSettings; setInitialGameSettings: (initialGameSettings: InitialGameSettings) => void; settings: Settings; setSettings: (settings: Settings) => void; @@ -36,8 +42,9 @@ export type GlobalSettingsContextType = { isPWA: boolean; preStartCompleted: boolean; setPreStartCompleted: (completed: boolean) => void; - version: Version; + savedGame: SavedGame; + saveCurrentGame: (currentGame: SavedGame) => void; }; export const GlobalSettingsContext = diff --git a/src/Providers/GlobalSettingsProvider.tsx b/src/Providers/GlobalSettingsProvider.tsx index df9cfd4..e3b87b6 100644 --- a/src/Providers/GlobalSettingsProvider.tsx +++ b/src/Providers/GlobalSettingsProvider.tsx @@ -3,6 +3,7 @@ import { useWakeLock } from 'react-screen-wake-lock'; import { GlobalSettingsContext, GlobalSettingsContextType, + SavedGame, } from '../Contexts/GlobalSettingsContext'; import { useAnalytics } from '../Hooks/useAnalytics'; import { @@ -21,12 +22,21 @@ export const GlobalSettingsProvider = ({ }) => { const analytics = useAnalytics(); - const savedShowPlay = localStorage.getItem('showPlay'); - const savedGameSettings = localStorage.getItem('initialGameSettings'); - const savedSettings = localStorage.getItem('settings'); - const savedPlaying = localStorage.getItem('playing'); - const savedPreStartComplete = localStorage.getItem('preStartComplete'); + const localSavedGame = localStorage.getItem('savedGame'); + const [savedGame, setCurrentGame] = useState( + localSavedGame ? JSON.parse(localSavedGame) : null + ); + const setCurrentGameAndLocalStorage = (savedGame: SavedGame) => { + if (!savedGame) { + setCurrentGame(savedGame); + localStorage.removeItem('savedGame'); + return; + } + setCurrentGame(savedGame); + localStorage.setItem('savedGame', JSON.stringify(savedGame)); + }; + const savedPlaying = localStorage.getItem('playing'); const [playing, setPlaying] = useState( savedPlaying ? savedPlaying === 'true' : false ); @@ -35,23 +45,42 @@ export const GlobalSettingsProvider = ({ localStorage.setItem('playing', String(playing)); }; + const savedPreStartComplete = localStorage.getItem('preStartComplete'); const [preStartCompleted, setPreStartCompleted] = useState( savedPreStartComplete ? savedPreStartComplete === 'true' : false ); + const savedShowPlay = localStorage.getItem('showPlay'); const [showPlay, setShowPlay] = useState( savedShowPlay ? savedShowPlay === 'true' : false ); + const setShowPlayAndLocalStorage = (showPlay: boolean) => { + setShowPlay(showPlay); + localStorage.setItem('showPlay', String(showPlay)); + }; + const savedSettings = localStorage.getItem('settings'); const [randomizingPlayer, setRandomizingPlayer] = useState( savedSettings ? Boolean(JSON.parse(savedSettings).preStartMode === 'random-king') : true ); + const [settings, setSettings] = useState( + savedSettings ? JSON.parse(savedSettings) : defaultSettings + ); + + const setSettingsAndLocalStorage = (settings: Settings) => { + setSettings(settings); + localStorage.setItem('settings', JSON.stringify(settings)); + }; + + const savedGameSettings = localStorage.getItem('initialGameSettings'); const [initialGameSettings, setInitialGameSettings] = - useState( - savedGameSettings ? JSON.parse(savedGameSettings) : null + useState( + savedGameSettings + ? JSON.parse(savedGameSettings) + : defaultInitialGameSettings ); const setInitialGameSettingsAndLocalStorage = ( @@ -64,15 +93,6 @@ export const GlobalSettingsProvider = ({ ); }; - const [settings, setSettings] = useState( - savedSettings ? JSON.parse(savedSettings) : defaultSettings - ); - - const setSettingsAndLocalStorage = (settings: Settings) => { - setSettings(settings); - localStorage.setItem('settings', JSON.stringify(settings)); - }; - const removeLocalStorage = async () => { localStorage.removeItem('initialGameSettings'); localStorage.removeItem('players'); @@ -252,7 +272,7 @@ export const GlobalSettingsProvider = ({ }, goToStart, showPlay, - setShowPlay, + setShowPlay: setShowPlayAndLocalStorage, playing, setPlaying: setPlayingAndLocalStorage, initialGameSettings, @@ -264,6 +284,8 @@ export const GlobalSettingsProvider = ({ isPWA: window?.matchMedia('(display-mode: standalone)').matches, preStartCompleted, setPreStartCompleted: setPreStartCompletedAndLocalStorage, + savedGame, + saveCurrentGame: setCurrentGameAndLocalStorage, version: { installedVersion: import.meta.env.VITE_APP_VERSION, @@ -285,6 +307,7 @@ export const GlobalSettingsProvider = ({ settings, randomizingPlayer, preStartCompleted, + savedGame, remoteVersion, isLatestVersion, analytics, diff --git a/src/index.css b/src/index.css index a40fade..f539751 100644 --- a/src/index.css +++ b/src/index.css @@ -31,6 +31,16 @@ code { monospace; } +// hide scrollbar globally +::-webkit-scrollbar { + display: none; +} + +* { + scrollbar-width: none; + -ms-overflow-style: none; +} + @layer utilities { .pointer-events-all { pointer-events: all;