Add an import save comparison page

This adds a new page reachable from the import save file
options menu. It shows the difference between the current save
and the data that is being imported, for confirmation.

Includes an "automatic" variant, which has different wording for when
Electron decides it has access to a newer version of the game.

While in this screen, the autosave is disabled.

This also adds a new BypassWrapper component around the game's tree.
It allows for content to be displayed without rendering the nested
pages (import, recovery). This prevents player scripts from messing
with the screen.
This commit is contained in:
Martin Fournier
2022-01-20 14:55:28 -05:00
parent 974344545d
commit 26432082e2
6 changed files with 440 additions and 43 deletions
+24 -12
View File
@@ -37,7 +37,8 @@ import { ThemeEditorButton } from "../../Themes/ui/ThemeEditorButton";
import { StyleEditorButton } from "../../Themes/ui/StyleEditorButton";
import { formatTime } from "../../utils/helpers/formatTime";
import { OptionSwitch } from "./OptionSwitch";
import { saveObject } from "../../SaveObject";
import { ImportData, saveObject } from "../../SaveObject";
import { convertTimeMsToTimeElapsedString } from "../../utils/StringHelperFunctions";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -58,12 +59,6 @@ interface IProps {
softReset: () => void;
}
interface ImportData {
base64: string;
parsed: any;
exportDate?: Date;
}
export function GameOptionsRoot(props: IProps): React.ReactElement {
const classes = useStyles();
const importInput = useRef<HTMLInputElement>(null);
@@ -125,7 +120,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
try {
const base64Save = await saveObject.getImportStringFromFile(event.target.files);
const data = await saveObject.getImportDataFromString(base64Save);
setImportData(data)
setImportData(data);
setImportSaveOpen(true);
} catch (ex: any) {
SnackbarEvents.emit(ex.toString(), "error", 5000);
@@ -145,6 +140,13 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
setImportData(null);
}
function compareSaveGame(): void {
if (!importData) return;
props.router.toImportSave(importData.base64);
setImportSaveOpen(false);
setImportData(null);
}
return (
<div className={classes.root} style={{ width: "90%" }}>
<Typography variant="h4" gutterBottom>
@@ -534,6 +536,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
open={importSaveOpen}
onClose={() => setImportSaveOpen(false)}
onConfirm={() => confirmedImportGame()}
additionalButton={<Button onClick={compareSaveGame}>Compare Save</Button>}
confirmationText={
<>
Importing a new game will <strong>completely wipe</strong> the current data!
@@ -542,15 +545,24 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
Make sure to have a backup of your current save file before importing.
<br />
The file you are attempting to import seems valid.
<br />
<br />
{importData?.exportDate && (
{(importData?.playerData?.lastSave ?? 0) > 0 && (
<>
The export date of the save file is <strong>{importData?.exportDate.toString()}</strong>
<br />
<br />
The export date of the save file is{" "}
<strong>{new Date(importData?.playerData?.lastSave ?? 0).toLocaleString()}</strong>
</>
)}
{(importData?.playerData?.totalPlaytime ?? 0) > 0 && (
<>
<br />
<br />
Total play time of imported game:{" "}
{convertTimeMsToTimeElapsedString(importData?.playerData?.totalPlaytime ?? 0)}
</>
)}
<br />
<br />
</>
}
/>