Store the comparison and timing method (#923)

We now automatically store the current comparison and timing method into
the Indexed DB. This allows us to restore the comparison and timing
method when the user reloads the page.

Changelog: The comparison and timing method (Real Time / Game Time) that
you choose now stay chosen when you reload LiveSplit One.

src/index.tsx

@@ -43,6 +43,8 @@ try {
             splits,
             splitsKey,
             layout,
+            comparison,
+            timingMethod,
             hotkeys,
             layoutWidth,
             layoutHeight,
@@ -88,6 +90,8 @@ try {
                 <LiveSplit
                     splits={splits}
                     layout={layout}
+                    comparison={comparison}
+                    timingMethod={timingMethod}
                     hotkeys={hotkeys}
                     splitsKey={splitsKey}
                     layoutWidth={layoutWidth}

src/storage/index.tsx

@@ -1,6 +1,6 @@
 import { openDB, IDBPDatabase } from "idb";
 import { Option, assert } from "../util/OptionUtil";
-import { RunRef, Run } from "../livesplit-core";
+import { RunRef, Run, TimingMethod } from "../livesplit-core";
 import { GeneralSettings } from "../ui/SettingsEditor";
 import { FRAME_RATE_AUTOMATIC } from "../util/FrameRate";
 
@@ -257,3 +257,27 @@ export async function loadGeneralSettings(): Promise<GeneralSettings> {
         serverUrl: generalSettings.serverUrl,
     };
 }
+
+export async function storeTimingMethod(timingMethod: TimingMethod) {
+    const db = await getDb();
+
+    await db.put("settings", timingMethod, "timingMethod");
+}
+
+export async function loadTimingMethod(): Promise<TimingMethod> {
+    const db = await getDb();
+
+    return await db.get("settings", "timingMethod") ?? TimingMethod.RealTime;
+}
+
+export async function storeComparison(comparison: string) {
+    const db = await getDb();
+
+    await db.put("settings", comparison, "comparison");
+}
+
+export async function loadComparison(): Promise<string | undefined> {
+    const db = await getDb();
+
+    return await db.get("settings", "comparison");
+}

src/ui/LiveSplit.tsx

@@ -52,6 +52,8 @@ type Menu =
 export interface Props {
     splits?: Uint8Array,
     layout?: Storage.LayoutSettings,
+    comparison?: string,
+    timingMethod: TimingMethod,
     hotkeys?: Storage.HotkeyConfigSettings,
     layoutWidth: number,
     layoutHeight: number,
@@ -97,6 +99,8 @@ export class LiveSplit extends React.Component<Props, State> {
         const splitsKey = await Storage.loadSplitsKey();
         const splits = splitsKey !== undefined ? await Storage.loadSplits(splitsKey) : undefined;
         const layout = await Storage.loadLayout();
+        const comparison = await Storage.loadComparison();
+        const timingMethod = await Storage.loadTimingMethod();
         const hotkeys = await Storage.loadHotkeys();
         const [layoutWidth, layoutHeight] = await Storage.loadLayoutDims();
         const generalSettings = await Storage.loadGeneralSettings();
@@ -105,6 +109,8 @@ export class LiveSplit extends React.Component<Props, State> {
             splits,
             splitsKey,
             layout,
+            comparison,
+            timingMethod,
             hotkeys,
             layoutWidth,
             layoutHeight,
@@ -171,6 +177,11 @@ export class LiveSplit extends React.Component<Props, State> {
             }
         }
 
+        if (props.comparison !== undefined) {
+            timer.setCurrentComparison(props.comparison);
+        }
+        timer.setCurrentTimingMethod(props.timingMethod);
+
         let layout: Option<Layout> = null;
         try {
             const data = props.layout;
@@ -775,17 +786,33 @@ export class LiveSplit extends React.Component<Props, State> {
 
     currentComparisonChanged(): void {
         if (this.state != null) {
-            this.setState({
-                currentComparison: this.state.eventSink.currentComparison(),
-            });
+            const currentComparison = this.state.eventSink.currentComparison();
+
+            (async () => {
+                try {
+                    await Storage.storeComparison(currentComparison);
+                } catch {
+                    // It's fine if this fails.
+                }
+            })();
+
+            this.setState({ currentComparison });
         }
     }
 
     currentTimingMethodChanged(): void {
         if (this.state != null) {
-            this.setState({
-                currentTimingMethod: this.state.eventSink.currentTimingMethod(),
-            });
+            const currentTimingMethod = this.state.eventSink.currentTimingMethod();
+
+            (async () => {
+                try {
+                    await Storage.storeTimingMethod(currentTimingMethod);
+                } catch {
+                    // It's fine if this fails.
+                }
+            })();
+
+            this.setState({ currentTimingMethod });
         }
     }
 

webpack.config.js

@@ -123,6 +123,9 @@ export default async (env, argv) => {
                         appleIcon: {
                             offset: 10,
                         },
+                        appleStartup: {
+                            offset: 15,
+                        },
                         android: {
                             background: true,
                             offset: 10,