From bf4e1667f545c3892db7f4e4db3dd80a6739c64e Mon Sep 17 00:00:00 2001 From: Bux42 Date: Sun, 9 Apr 2023 18:30:34 +0200 Subject: [PATCH 1/2] Implement basic local storage for viewer settings --- app/components/maps/SidebarSettings.tsx | 33 ++-- app/lib/contexts/SettingsContext.tsx | 209 ++++++++++++++++++++---- app/package-lock.json | 11 ++ app/package.json | 3 +- 4 files changed, 210 insertions(+), 46 deletions(-) diff --git a/app/components/maps/SidebarSettings.tsx b/app/components/maps/SidebarSettings.tsx index 97fc5c4b..dd9fee4e 100644 --- a/app/components/maps/SidebarSettings.tsx +++ b/app/components/maps/SidebarSettings.tsx @@ -16,13 +16,14 @@ const SidebarSettings = (): JSX.Element => { const windowDimensions = useWindowDimensions(); const { lineType, changeLineType, - showGearChanges, setShowGearChanges, - showFPS, setShowFPS, - showInputOverlay, setShowInputOverlay, - replayLineOpacity, setReplayLineOpacity, - replayCarOpacity, setReplayCarOpacity, - showFullTrail, setShowFullTrail, - showTrailToStart, setShowTrailToStart, + showGearChanges, changeShowGearChanges, + showFPS, changeShowFPS, + showInputOverlay, changeShowInputOverlay, + replayLineOpacity, changeReplayLineOpacity, + replayCarOpacity, changeReplayCarOpacity, + showFullTrail, changeShowFullTrail, + showTrailToStart, changeShowTrailToStart, + revealTrailTime, changeRevealTrailTime, } = useContext( SettingsContext, ); @@ -95,7 +96,7 @@ const SidebarSettings = (): JSX.Element => { className="w-full m-0" min={0} max={1} - onChange={(e: number) => setReplayLineOpacity(e)} + onChange={(e: number) => changeReplayLineOpacity(e)} value={typeof replayLineOpacity === 'number' ? replayLineOpacity : 0} step={0.1} dots @@ -109,7 +110,7 @@ const SidebarSettings = (): JSX.Element => { className="w-full m-0" min={0} max={1} - onChange={(e: number) => setReplayCarOpacity(e)} + onChange={(e: number) => changeReplayCarOpacity(e)} value={typeof replayCarOpacity === 'number' ? replayCarOpacity : 0} step={0.1} dots @@ -125,7 +126,7 @@ const SidebarSettings = (): JSX.Element => { className="select-none" checked={showFullTrail} onChange={(e) => { - setShowFullTrail(e.target.checked); + changeShowFullTrail(e.target.checked); timeLineGlobal.showFullTrail = e.target.checked; }} > @@ -138,7 +139,7 @@ const SidebarSettings = (): JSX.Element => { disabled={showFullTrail} checked={showTrailToStart} onChange={(e) => { - setShowTrailToStart(e.target.checked); + changeShowTrailToStart(e.target.checked); timeLineGlobal.showTrailToStart = e.target.checked; }} > @@ -154,13 +155,13 @@ const SidebarSettings = (): JSX.Element => { addonAfter="ms" className="w-full" disabled={showFullTrail || showTrailToStart} - defaultValue={timeLineGlobal.revealTrailTime} + defaultValue={revealTrailTime} min={0} step={100} precision={0} onChange={(e) => { if (typeof e === 'number') { - timeLineGlobal.revealTrailTime = e; + changeRevealTrailTime(e); } }} /> @@ -173,7 +174,7 @@ const SidebarSettings = (): JSX.Element => { setShowGearChanges(e.target.checked)} + onChange={(e: CheckboxChangeEvent) => changeShowGearChanges(e.target.checked)} checked={showGearChanges} > Show Gear Changes @@ -182,7 +183,7 @@ const SidebarSettings = (): JSX.Element => { setShowInputOverlay(e.target.checked)} + onChange={(e: CheckboxChangeEvent) => changeShowInputOverlay(e.target.checked)} checked={showInputOverlay} > Show Input Overlay @@ -195,7 +196,7 @@ const SidebarSettings = (): JSX.Element => { setShowFPS(e.target.checked)} + onChange={(e: CheckboxChangeEvent) => changeShowFPS(e.target.checked)} checked={showFPS} > Show FPS diff --git a/app/lib/contexts/SettingsContext.tsx b/app/lib/contexts/SettingsContext.tsx index 9e80d438..866f5ac0 100644 --- a/app/lib/contexts/SettingsContext.tsx +++ b/app/lib/contexts/SettingsContext.tsx @@ -1,4 +1,5 @@ import React, { createContext, useState } from 'react'; +import store from 'store2'; import { LineType, LineTypes } from '../../components/viewer/ReplayLines'; import GlobalTimeLineInfos from '../singletons/timeLineInfos'; @@ -16,57 +17,205 @@ export interface SettingsContextProps { lineType: LineType; changeLineType: (lineType: LineType) => void; showGearChanges: boolean; - setShowGearChanges: (showGearChanges: boolean) => void; + changeShowGearChanges: (showGearChanges: boolean) => void; showFPS: boolean; - setShowFPS: (showFPS: boolean) => void; + changeShowFPS: (showFPS: boolean) => void; showInputOverlay: boolean; - setShowInputOverlay: (showInputs: boolean) => void; + changeShowInputOverlay: (showInputs: boolean) => void; replayLineOpacity: number; - setReplayLineOpacity: (setLineOpacity: number) => void; + changeReplayLineOpacity: (setLineOpacity: number) => void; replayCarOpacity: number; - setReplayCarOpacity: (setReplayCarOpacity: number) => void; + changeReplayCarOpacity: (setReplayCarOpacity: number) => void; numColorChange: number; setNumColorChange: (numColorChange: number) => void; showFullTrail: boolean; - setShowFullTrail: (showFullTrail: boolean) => void; + changeShowFullTrail: (showFullTrail: boolean) => void; showTrailToStart: boolean; - setShowTrailToStart: (showFullTrail: boolean) => void; + changeShowTrailToStart: (showFullTrail: boolean) => void; + revealTrailTime: number; + changeRevealTrailTime: (revealTrailTime: number) => void; } export const SettingsContext = createContext({ lineType: LineTypes.default, changeLineType: () => { }, showGearChanges: false, - setShowGearChanges: () => { }, + changeShowGearChanges: () => { }, showFPS: false, - setShowFPS: () => { }, + changeShowFPS: () => { }, showInputOverlay: true, - setShowInputOverlay: () => { }, + changeShowInputOverlay: () => { }, replayLineOpacity: 0.5, - setReplayLineOpacity: () => { }, + changeReplayLineOpacity: () => { }, replayCarOpacity: 0.5, - setReplayCarOpacity: () => { }, + changeReplayCarOpacity: () => { }, numColorChange: 0, setNumColorChange: () => { }, showFullTrail: timeLineInfos.showFullTrail, - setShowFullTrail: () => { }, + changeShowFullTrail: () => { }, showTrailToStart: timeLineInfos.showTrailToStart, - setShowTrailToStart: () => { }, + changeShowTrailToStart: () => { }, + revealTrailTime: timeLineInfos.revealTrailTime, + changeRevealTrailTime: () => { }, }); +const getLineType = (): LineType => { + const storedLineType = store.get('lineType'); + + if (storedLineType && LineTypes[storedLineType.toLowerCase()] !== null) { + const storedLineTypeValue = LineTypes[storedLineType.toLowerCase()]; + return storedLineTypeValue; + } + + return LineTypes.default; +}; + +const getShowGearChanges = (): boolean => { + const storedShowGearChanges = store.get('showGearChanges'); + + if (storedShowGearChanges !== null) { + return storedShowGearChanges; + } + + return false; +}; + +const getShowFPS = (): boolean => { + const storedShowFPS = store.get('showFPS'); + + if (storedShowFPS !== null) { + return storedShowFPS; + } + + return false; +}; + +const getShowInputOverlay = (): boolean => { + const storedShowInputOverlay = store.get('showInputOverlay'); + + if (storedShowInputOverlay !== null) { + return storedShowInputOverlay; + } + + return true; +}; + +const getReplayLineOpacity = (): number => { + const storedReplayLineOpacity = store.get('replayLineOpacity'); + + if (storedReplayLineOpacity !== null) { + return storedReplayLineOpacity; + } + + return 0.5; +}; + +const getReplayCarOpacity = (): number => { + const storedReplayCarOpacity = store.get('replayCarOpacity'); + + if (storedReplayCarOpacity !== null) { + return storedReplayCarOpacity; + } + + return 0.5; +}; + +const getShowFullTrail = (): boolean => { + const storedShowFullTrail = store.get('showFullTrail'); + + if (storedShowFullTrail !== null) { + timeLineInfos.showFullTrail = storedShowFullTrail; + return storedShowFullTrail; + } + + timeLineInfos.showFullTrail = true; + return true; +}; + +const getShowTrailToStart = (): boolean => { + const storedShowTrailToStart = store.get('showTrailToStart'); + + if (storedShowTrailToStart !== null) { + timeLineInfos.showTrailToStart = storedShowTrailToStart; + return storedShowTrailToStart; + } + + timeLineInfos.showTrailToStart = true; + return true; +}; + +const getRevealTrailTime = (): number => { + const storedRevealTrailTime = store.get('revealTrailTime'); + + if (storedRevealTrailTime !== null) { + timeLineInfos.revealTrailTime = storedRevealTrailTime; + return storedRevealTrailTime; + } + + timeLineInfos.revealTrailTime = 1000; + return 1000; +}; + export const SettingsProvider = ({ children }: any): JSX.Element => { - const [lineType, setLineType] = useState(LineTypes.default); - const [showGearChanges, setShowGearChanges] = useState(false); - const [showFPS, setShowFPS] = useState(false); - const [showInputOverlay, setShowInputOverlay] = useState(true); - const [replayLineOpacity, setReplayLineOpacity] = useState(0.5); - const [replayCarOpacity, setReplayCarOpacity] = useState(0.5); + const [lineType, setLineType] = useState(getLineType()); + const [showGearChanges, setShowGearChanges] = useState(getShowGearChanges()); + const [showFPS, setShowFPS] = useState(getShowFPS()); + const [showInputOverlay, setShowInputOverlay] = useState(getShowInputOverlay()); + const [replayLineOpacity, setReplayLineOpacity] = useState(getReplayLineOpacity()); + const [replayCarOpacity, setReplayCarOpacity] = useState(getReplayCarOpacity()); const [numColorChange, setNumColorChange] = useState(0); - const [showFullTrail, setShowFullTrail] = useState(timeLineInfos.showFullTrail); - const [showTrailToStart, setShowTrailToStart] = useState(timeLineInfos.showTrailToStart); + const [showFullTrail, setShowFullTrail] = useState(getShowFullTrail()); + const [showTrailToStart, setShowTrailToStart] = useState(getShowTrailToStart()); + const [revealTrailTime, setRevealTrailTime] = useState(getRevealTrailTime()); + + // console.log("showFullTrail", showFullTrail) const changeLineType = (type: LineType) => { setLineType(type); + store.set('lineType', type.name); + }; + + const changeShowGearChanges = (gearChanges: boolean) => { + setShowGearChanges(gearChanges); + store.set('showGearChanges', gearChanges); + }; + + const changeShowFPS = (show: boolean) => { + setShowFPS(show); + store.set('showFPS', show); + }; + + const changeShowInputOverlay = (show: boolean) => { + setShowInputOverlay(show); + store.set('showInputOverlay', show); + }; + + const changeReplayLineOpacity = (opacity: number) => { + setReplayLineOpacity(opacity); + store.set('replayLineOpacity', opacity); + }; + + const changeReplayCarOpacity = (opacity: number) => { + setReplayCarOpacity(opacity); + store.set('replayCarOpacity', opacity); + }; + + const changeShowFullTrail = (show: boolean) => { + setShowFullTrail(show); + timeLineInfos.showFullTrail = show; + store.set('showFullTrail', show); + }; + + const changeShowTrailToStart = (show: boolean) => { + setShowTrailToStart(show); + timeLineInfos.showTrailToStart = show; + store.set('showTrailToStart', show); + }; + + const changeRevealTrailTime = (time: number) => { + setRevealTrailTime(time); + timeLineInfos.revealTrailTime = time; + store.set('revealTrailTime', time); }; return ( @@ -75,21 +224,23 @@ export const SettingsProvider = ({ children }: any): JSX.Element => { lineType, changeLineType, showGearChanges, - setShowGearChanges, + changeShowGearChanges, showFPS, - setShowFPS, + changeShowFPS, showInputOverlay, - setShowInputOverlay, + changeShowInputOverlay, replayLineOpacity, - setReplayLineOpacity, + changeReplayLineOpacity, replayCarOpacity, - setReplayCarOpacity, + changeReplayCarOpacity, numColorChange, setNumColorChange, showFullTrail, - setShowFullTrail, + changeShowFullTrail, showTrailToStart, - setShowTrailToStart, + changeShowTrailToStart, + revealTrailTime, + changeRevealTrailTime, }} > {children} diff --git a/app/package-lock.json b/app/package-lock.json index 77d324e0..59e85447 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -28,6 +28,7 @@ "react": "^17.0.2", "react-color": "^2.19.3", "react-dom": "^17.0.2", + "store2": "^2.14.2", "tailwindcss": "^2.1.2", "three": "^0.128.0", "three-stdlib": "^2.3.0", @@ -8613,6 +8614,11 @@ "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz", "integrity": "sha1-scPcRtlEmLV4t/05hbgaznExzH0=" }, + "node_modules/store2": { + "version": "2.14.2", + "resolved": "https://registry.npmjs.org/store2/-/store2-2.14.2.tgz", + "integrity": "sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==" + }, "node_modules/string-convert": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", @@ -16079,6 +16085,11 @@ "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz", "integrity": "sha1-scPcRtlEmLV4t/05hbgaznExzH0=" }, + "store2": { + "version": "2.14.2", + "resolved": "https://registry.npmjs.org/store2/-/store2-2.14.2.tgz", + "integrity": "sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==" + }, "string-convert": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", diff --git a/app/package.json b/app/package.json index 08b5fffb..063e3ffb 100644 --- a/app/package.json +++ b/app/package.json @@ -30,6 +30,7 @@ "react": "^17.0.2", "react-color": "^2.19.3", "react-dom": "^17.0.2", + "store2": "^2.14.2", "tailwindcss": "^2.1.2", "three": "^0.128.0", "three-stdlib": "^2.3.0", @@ -57,4 +58,4 @@ "postcss": "^8.2.8", "typescript": "^4.3.2" } -} \ No newline at end of file +} From 651037067ec5f8a49b0d2f047a3c31208c77bdbb Mon Sep 17 00:00:00 2001 From: Bux42 Date: Mon, 10 Apr 2023 12:48:42 +0200 Subject: [PATCH 2/2] create useLocalStorage() hook & clean up code --- app/components/maps/SidebarSettings.tsx | 20 +-- .../hooks/localStorage/localStorage.ts | 18 ++ app/lib/contexts/SettingsContext.constants.ts | 10 ++ app/lib/contexts/SettingsContext.tsx | 156 +++++------------- 4 files changed, 81 insertions(+), 123 deletions(-) create mode 100644 app/lib/api/reactQuery/hooks/localStorage/localStorage.ts create mode 100644 app/lib/contexts/SettingsContext.constants.ts diff --git a/app/components/maps/SidebarSettings.tsx b/app/components/maps/SidebarSettings.tsx index dd9fee4e..de0225fa 100644 --- a/app/components/maps/SidebarSettings.tsx +++ b/app/components/maps/SidebarSettings.tsx @@ -16,11 +16,11 @@ const SidebarSettings = (): JSX.Element => { const windowDimensions = useWindowDimensions(); const { lineType, changeLineType, - showGearChanges, changeShowGearChanges, - showFPS, changeShowFPS, - showInputOverlay, changeShowInputOverlay, - replayLineOpacity, changeReplayLineOpacity, - replayCarOpacity, changeReplayCarOpacity, + showGearChanges, setShowGearChanges, + showFPS, setShowFPS, + showInputOverlay, setShowInputOverlay, + replayLineOpacity, setReplayLineOpacity, + replayCarOpacity, setReplayCarOpacity, showFullTrail, changeShowFullTrail, showTrailToStart, changeShowTrailToStart, revealTrailTime, changeRevealTrailTime, @@ -96,7 +96,7 @@ const SidebarSettings = (): JSX.Element => { className="w-full m-0" min={0} max={1} - onChange={(e: number) => changeReplayLineOpacity(e)} + onChange={(e: number) => setReplayLineOpacity(e)} value={typeof replayLineOpacity === 'number' ? replayLineOpacity : 0} step={0.1} dots @@ -110,7 +110,7 @@ const SidebarSettings = (): JSX.Element => { className="w-full m-0" min={0} max={1} - onChange={(e: number) => changeReplayCarOpacity(e)} + onChange={(e: number) => setReplayCarOpacity(e)} value={typeof replayCarOpacity === 'number' ? replayCarOpacity : 0} step={0.1} dots @@ -174,7 +174,7 @@ const SidebarSettings = (): JSX.Element => { changeShowGearChanges(e.target.checked)} + onChange={(e: CheckboxChangeEvent) => setShowGearChanges(e.target.checked)} checked={showGearChanges} > Show Gear Changes @@ -183,7 +183,7 @@ const SidebarSettings = (): JSX.Element => { changeShowInputOverlay(e.target.checked)} + onChange={(e: CheckboxChangeEvent) => setShowInputOverlay(e.target.checked)} checked={showInputOverlay} > Show Input Overlay @@ -196,7 +196,7 @@ const SidebarSettings = (): JSX.Element => { changeShowFPS(e.target.checked)} + onChange={(e: CheckboxChangeEvent) => setShowFPS(e.target.checked)} checked={showFPS} > Show FPS diff --git a/app/lib/api/reactQuery/hooks/localStorage/localStorage.ts b/app/lib/api/reactQuery/hooks/localStorage/localStorage.ts new file mode 100644 index 00000000..acbecede --- /dev/null +++ b/app/lib/api/reactQuery/hooks/localStorage/localStorage.ts @@ -0,0 +1,18 @@ +import { useState } from 'react'; +import store from 'store2'; + +const useLocalStorage = (key: string, initialValue: any) => { + const [storedValue, setStoredValue] = useState(() => { + const item = store.get(key); + return item !== null ? item : initialValue; + }); + + const setValue = (value: any) => { + setStoredValue(value); + store.set(key, value); + }; + + return [storedValue, setValue]; +}; + +export default useLocalStorage; diff --git a/app/lib/contexts/SettingsContext.constants.ts b/app/lib/contexts/SettingsContext.constants.ts new file mode 100644 index 00000000..0c002ed1 --- /dev/null +++ b/app/lib/contexts/SettingsContext.constants.ts @@ -0,0 +1,10 @@ +/* eslint-disable import/prefer-default-export */ + +export const SHOW_GEAR_CHANGE = false; +export const SHOW_FPS = false; +export const SHOW_INPUT_OVERLAY = true; +export const REPLAY_LINE_OPACITY = 0.5; +export const REPLAY_CAR_OPACITY = 0.5; +export const SHOW_FULL_TRAIL = true; +export const SHOW_TRAIL_TO_START = true; +export const REVEAL_TRAIL_TIME = 1000; diff --git a/app/lib/contexts/SettingsContext.tsx b/app/lib/contexts/SettingsContext.tsx index 866f5ac0..8a30e9a7 100644 --- a/app/lib/contexts/SettingsContext.tsx +++ b/app/lib/contexts/SettingsContext.tsx @@ -2,6 +2,15 @@ import React, { createContext, useState } from 'react'; import store from 'store2'; import { LineType, LineTypes } from '../../components/viewer/ReplayLines'; import GlobalTimeLineInfos from '../singletons/timeLineInfos'; +import useLocalStorage from '../api/reactQuery/hooks/localStorage/localStorage'; +import { + REPLAY_CAR_OPACITY, + REPLAY_LINE_OPACITY, + REVEAL_TRAIL_TIME, + SHOW_FPS, SHOW_FULL_TRAIL, SHOW_GEAR_CHANGE, + SHOW_INPUT_OVERLAY, + SHOW_TRAIL_TO_START, +} from './SettingsContext.constants'; // eslint false positive https://stackoverflow.com/questions/63961803/ // eslint-disable-next-line no-shadow @@ -17,15 +26,15 @@ export interface SettingsContextProps { lineType: LineType; changeLineType: (lineType: LineType) => void; showGearChanges: boolean; - changeShowGearChanges: (showGearChanges: boolean) => void; + setShowGearChanges: (showGearChanges: boolean) => void; showFPS: boolean; - changeShowFPS: (showFPS: boolean) => void; + setShowFPS: (showFPS: boolean) => void; showInputOverlay: boolean; - changeShowInputOverlay: (showInputs: boolean) => void; + setShowInputOverlay: (showInputs: boolean) => void; replayLineOpacity: number; - changeReplayLineOpacity: (setLineOpacity: number) => void; + setReplayLineOpacity: (setLineOpacity: number) => void; replayCarOpacity: number; - changeReplayCarOpacity: (setReplayCarOpacity: number) => void; + setReplayCarOpacity: (setReplayCarOpacity: number) => void; numColorChange: number; setNumColorChange: (numColorChange: number) => void; showFullTrail: boolean; @@ -39,23 +48,23 @@ export interface SettingsContextProps { export const SettingsContext = createContext({ lineType: LineTypes.default, changeLineType: () => { }, - showGearChanges: false, - changeShowGearChanges: () => { }, - showFPS: false, - changeShowFPS: () => { }, - showInputOverlay: true, - changeShowInputOverlay: () => { }, - replayLineOpacity: 0.5, - changeReplayLineOpacity: () => { }, - replayCarOpacity: 0.5, - changeReplayCarOpacity: () => { }, + showGearChanges: SHOW_GEAR_CHANGE, + setShowGearChanges: () => { }, + showFPS: SHOW_FPS, + setShowFPS: () => { }, + showInputOverlay: SHOW_INPUT_OVERLAY, + setShowInputOverlay: () => { }, + replayLineOpacity: REPLAY_LINE_OPACITY, + setReplayLineOpacity: () => { }, + replayCarOpacity: REPLAY_CAR_OPACITY, + setReplayCarOpacity: () => { }, numColorChange: 0, setNumColorChange: () => { }, - showFullTrail: timeLineInfos.showFullTrail, + showFullTrail: SHOW_FULL_TRAIL, changeShowFullTrail: () => { }, - showTrailToStart: timeLineInfos.showTrailToStart, + showTrailToStart: SHOW_TRAIL_TO_START, changeShowTrailToStart: () => { }, - revealTrailTime: timeLineInfos.revealTrailTime, + revealTrailTime: REVEAL_TRAIL_TIME, changeRevealTrailTime: () => { }, }); @@ -70,56 +79,6 @@ const getLineType = (): LineType => { return LineTypes.default; }; -const getShowGearChanges = (): boolean => { - const storedShowGearChanges = store.get('showGearChanges'); - - if (storedShowGearChanges !== null) { - return storedShowGearChanges; - } - - return false; -}; - -const getShowFPS = (): boolean => { - const storedShowFPS = store.get('showFPS'); - - if (storedShowFPS !== null) { - return storedShowFPS; - } - - return false; -}; - -const getShowInputOverlay = (): boolean => { - const storedShowInputOverlay = store.get('showInputOverlay'); - - if (storedShowInputOverlay !== null) { - return storedShowInputOverlay; - } - - return true; -}; - -const getReplayLineOpacity = (): number => { - const storedReplayLineOpacity = store.get('replayLineOpacity'); - - if (storedReplayLineOpacity !== null) { - return storedReplayLineOpacity; - } - - return 0.5; -}; - -const getReplayCarOpacity = (): number => { - const storedReplayCarOpacity = store.get('replayCarOpacity'); - - if (storedReplayCarOpacity !== null) { - return storedReplayCarOpacity; - } - - return 0.5; -}; - const getShowFullTrail = (): boolean => { const storedShowFullTrail = store.get('showFullTrail'); @@ -128,10 +87,9 @@ const getShowFullTrail = (): boolean => { return storedShowFullTrail; } - timeLineInfos.showFullTrail = true; - return true; + timeLineInfos.showFullTrail = SHOW_FULL_TRAIL; + return SHOW_FULL_TRAIL; }; - const getShowTrailToStart = (): boolean => { const storedShowTrailToStart = store.get('showTrailToStart'); @@ -140,8 +98,8 @@ const getShowTrailToStart = (): boolean => { return storedShowTrailToStart; } - timeLineInfos.showTrailToStart = true; - return true; + timeLineInfos.showTrailToStart = SHOW_TRAIL_TO_START; + return SHOW_TRAIL_TO_START; }; const getRevealTrailTime = (): number => { @@ -152,60 +110,32 @@ const getRevealTrailTime = (): number => { return storedRevealTrailTime; } - timeLineInfos.revealTrailTime = 1000; - return 1000; + timeLineInfos.revealTrailTime = REVEAL_TRAIL_TIME; + return REVEAL_TRAIL_TIME; }; export const SettingsProvider = ({ children }: any): JSX.Element => { const [lineType, setLineType] = useState(getLineType()); - const [showGearChanges, setShowGearChanges] = useState(getShowGearChanges()); - const [showFPS, setShowFPS] = useState(getShowFPS()); - const [showInputOverlay, setShowInputOverlay] = useState(getShowInputOverlay()); - const [replayLineOpacity, setReplayLineOpacity] = useState(getReplayLineOpacity()); - const [replayCarOpacity, setReplayCarOpacity] = useState(getReplayCarOpacity()); + const [showGearChanges, setShowGearChanges] = useLocalStorage('showGearChanges', SHOW_GEAR_CHANGE); + const [showFPS, setShowFPS] = useLocalStorage('showFPS', SHOW_FPS); + const [showInputOverlay, setShowInputOverlay] = useLocalStorage('showInputOverlay', SHOW_INPUT_OVERLAY); + const [replayLineOpacity, setReplayLineOpacity] = useLocalStorage('replayLineOpacity', REPLAY_LINE_OPACITY); + const [replayCarOpacity, setReplayCarOpacity] = useLocalStorage('replayCarOpacity', REPLAY_CAR_OPACITY); const [numColorChange, setNumColorChange] = useState(0); const [showFullTrail, setShowFullTrail] = useState(getShowFullTrail()); const [showTrailToStart, setShowTrailToStart] = useState(getShowTrailToStart()); const [revealTrailTime, setRevealTrailTime] = useState(getRevealTrailTime()); - // console.log("showFullTrail", showFullTrail) - const changeLineType = (type: LineType) => { setLineType(type); store.set('lineType', type.name); }; - const changeShowGearChanges = (gearChanges: boolean) => { - setShowGearChanges(gearChanges); - store.set('showGearChanges', gearChanges); - }; - - const changeShowFPS = (show: boolean) => { - setShowFPS(show); - store.set('showFPS', show); - }; - - const changeShowInputOverlay = (show: boolean) => { - setShowInputOverlay(show); - store.set('showInputOverlay', show); - }; - - const changeReplayLineOpacity = (opacity: number) => { - setReplayLineOpacity(opacity); - store.set('replayLineOpacity', opacity); - }; - - const changeReplayCarOpacity = (opacity: number) => { - setReplayCarOpacity(opacity); - store.set('replayCarOpacity', opacity); - }; - const changeShowFullTrail = (show: boolean) => { setShowFullTrail(show); timeLineInfos.showFullTrail = show; store.set('showFullTrail', show); }; - const changeShowTrailToStart = (show: boolean) => { setShowTrailToStart(show); timeLineInfos.showTrailToStart = show; @@ -224,15 +154,15 @@ export const SettingsProvider = ({ children }: any): JSX.Element => { lineType, changeLineType, showGearChanges, - changeShowGearChanges, + setShowGearChanges, showFPS, - changeShowFPS, + setShowFPS, showInputOverlay, - changeShowInputOverlay, + setShowInputOverlay, replayLineOpacity, - changeReplayLineOpacity, + setReplayLineOpacity, replayCarOpacity, - changeReplayCarOpacity, + setReplayCarOpacity, numColorChange, setNumColorChange, showFullTrail,