LiveSplit · wooferzfg · May 12, 2020 · May 12, 2020 · Apr 16, 2024 · Apr 17, 2024
diff --git a/src/css/Loading.scss b/src/css/Loading.scss
@@ -0,0 +1,15 @@
+@import 'variables';
+
+$loading-text-font-size: 45px;
+
+@mixin loading {
+  .loading {
+    display: flex;
+    width: fit-content;
+    font-size: $loading-text-font-size;
+
+    .loading-text {
+      margin-left: $ui-margin;
+    }
+  }
+}
diff --git a/src/css/RunEditor.scss b/src/css/RunEditor.scss
@@ -1,6 +1,7 @@
 @use 'sass:math';
 
 @import "ContextMenu";
+@import "Loading";
 @import "Markdown";
 @import "mobile";
 @import "Table";
@@ -19,6 +20,7 @@ $small-button-padding: 1px 3px 1px 3px;
 
 .run-editor {
   @include context-menu;
+  @include loading;
   @include markdown;
   @include table;
   @include toggle;

diff --git a/src/css/SplitsSelection.scss b/src/css/SplitsSelection.scss
@@ -2,23 +2,15 @@
 
 @import 'mobile';
 @import 'variables';
+@import 'Loading';
 @import 'Table';
 @import 'ContextMenu';
 
-$loading-text-font-size: 40px;
 $splits-row-width: 500px;
 $splits-row-height: 40px;
 
 .splits-selection {
-  .loading {
-    display: flex;
-    width: fit-content;
-    font-size: $loading-text-font-size;
-
-    .loading-text {
-      margin-left: $ui-margin;
-    }
-  }
+  @include loading;
 
   .splits-selection-container {
     display: flex;

diff --git a/src/css/Title.scss b/src/css/Title.scss
@@ -1,4 +1,4 @@
-@import "variables";
+@import 'variables';
 
 $game-icon-size: $two-row-height - $vertical-padding * 2;
 

diff --git a/src/css/main.scss b/src/css/main.scss
@@ -2,6 +2,7 @@
 
 @import 'browser_source';
 @import 'variables';
+@import 'Loading';
 
 @font-face {
   font-family: timer;
@@ -132,9 +133,6 @@ button.disabled:active {
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 50px;
 
-  .initial-load-text {
-    margin-left: 10px;
-  }
+  @include loading;
 }
diff --git a/src/index.html b/src/index.html
@@ -11,8 +11,10 @@
 <body>
 	<div id="base">
 		<div class="initial-load">
-			<div class="fa fa-spinner fa-spin"></div>
-			<div class="initial-load-text">Loading...</div>
+			<div class="loading">
+				<div class="fa fa-spinner fa-spin"></div>
+				<div class="loading-text">Loading...</div>
+			</div>
 		</div>
 	</div>
 </body>

diff --git a/src/ui/LiveSplit.tsx b/src/ui/LiveSplit.tsx
@@ -35,7 +35,7 @@ export enum MenuKind {
 type Menu =
     { kind: MenuKind.Timer } |
     { kind: MenuKind.Splits } |
-    { kind: MenuKind.RunEditor, editor: RunEditor, splitsKey?: number } |
+    { kind: MenuKind.RunEditor, editor: RunEditor, splitsKey?: number, persistChanges: boolean } |
     { kind: MenuKind.Layout } |
     { kind: MenuKind.LayoutEditor, editor: LayoutEditor } |
     { kind: MenuKind.SettingsEditor, config: HotkeyConfig } |
@@ -382,13 +382,25 @@ export class LiveSplit extends React.Component<Props, State> {
         this.setLayout(layout);
     }
 
-    public openRunEditor({ splitsKey, run }: EditingInfo) {
+    public openRunEditor({ splitsKey, persistChanges, run }: EditingInfo) {
         const editor = expect(
             RunEditor.new(run),
             "The Run Editor should always be able to be opened.",
         );
         this.setState({
-            menu: { kind: MenuKind.RunEditor, editor, splitsKey },
+            menu: { kind: MenuKind.RunEditor, editor, splitsKey, persistChanges },
+            sidebarOpen: false,
+        });
+    }
+
+    public replaceRunEditor(editor: RunEditor) {
+        this.setState({
+            menu: {
+                kind: MenuKind.RunEditor,
+                editor,
+                splitsKey: undefined,
+                persistChanges: true,
+            },
             sidebarOpen: false,
         });
     }
@@ -397,16 +409,16 @@ export class LiveSplit extends React.Component<Props, State> {
         if (this.state.menu.kind !== MenuKind.RunEditor) {
             panic("No Run Editor to close");
         }
-        const { editor, splitsKey } = this.state.menu;
+        const { editor, persistChanges, splitsKey } = this.state.menu;
         const run = editor.close();
         if (save) {
-            if (splitsKey == null) {
+            if (persistChanges) {
+                Storage.storeRunAndDispose(run, splitsKey);
+            } else {
                 assertNull(
                     this.writeWith((t) => t.setRun(run)),
                     "The Run Editor should always return a valid Run.",
                 );
-            } else {
-                Storage.storeRunAndDispose(run, splitsKey);
             }
         } else {
             run.dispose();

diff --git a/src/ui/RunEditor.tsx b/src/ui/RunEditor.tsx
@@ -30,6 +30,7 @@ export interface Props {
 }
 export interface State {
     editor: LiveSplit.RunEditorStateJson,
+    isLoading: boolean,
     offsetIsValid: boolean,
     attemptCountIsValid: boolean,
     rowState: RowState,
@@ -38,6 +39,7 @@ export interface State {
 
 interface Callbacks {
     renderViewWithSidebar(renderedView: JSX.Element, sidebarContent: JSX.Element): JSX.Element,
+    replaceRunEditor(editor: LiveSplit.RunEditor): void,
     closeRunEditor(save: boolean): void,
 }
 
@@ -83,6 +85,7 @@ export class RunEditor extends React.Component<Props, State> {
         this.state = {
             attemptCountIsValid: true,
             editor: state,
+            isLoading: false,
             offsetIsValid: true,
             rowState: {
                 bestSegmentTime: "",
@@ -113,6 +116,17 @@ export class RunEditor extends React.Component<Props, State> {
     }
 
     private renderView() {
+        if (this.state.isLoading) {
+            return (
+                <div className="run-editor">
+                    <div className="loading">
+                        <div className="fa fa-spinner fa-spin"></div>
+                        <div className="loading-text">Loading...</div>
+                    </div>
+                </div>
+            );
+        }
+
         const gameIcon = this.getGameIcon();
 
         let gameIconContextTrigger: any = null;
@@ -1864,6 +1878,18 @@ export class RunEditor extends React.Component<Props, State> {
     }
 
     private async downloadSplits<T>(apiRun: Run<T>, apiUri: string) {
+        // FIXME: Determine whether there are any unsaved changes in the Run Editor
+        if (!confirm(
+            "Are you sure you want to load these splits? Any unsaved changes will be lost.",
+        )) {
+            return;
+        }
+
+        this.setState({
+            ...this.state,
+            isLoading: true,
+        });
+
         const baseUri = "https://splits.io/api/v3/runs/";
         assert(apiUri.startsWith(baseUri), "Unexpected Splits.io URL");
         const splitsId = apiUri.slice(baseUri.length);
@@ -1874,6 +1900,7 @@ export class RunEditor extends React.Component<Props, State> {
             const platformListDownload = downloadPlatformList();
             const regionListDownload = downloadRegionList();
             const gameInfoDownload = downloadGameInfo(gameName);
+
             await gameInfoDownload;
             await platformListDownload;
             await regionListDownload;
@@ -1888,10 +1915,7 @@ export class RunEditor extends React.Component<Props, State> {
                         apiRun,
                     );
 
-                    // TODO Oh no, not internal pointer stuff
-                    this.props.editor.dispose();
-                    this.props.editor.ptr = newEditor.ptr;
-
+                    this.props.callbacks.replaceRunEditor(newEditor);
                     this.update();
                 } else {
                     toast.error("The downloaded splits are not suitable for being edited.");
@@ -1900,6 +1924,12 @@ export class RunEditor extends React.Component<Props, State> {
         } catch (_) {
             toast.error("Failed to download the splits.");
         }
+
+        this.setState({
+            ...this.state,
+            isLoading: false,
+        });
+        this.update(Tab.RealTime);
     }
 
     private toggleExpandLeaderboardRow(rowIndex: number) {

diff --git a/src/ui/SplitsSelection.tsx b/src/ui/SplitsSelection.tsx
@@ -15,7 +15,8 @@ import DragUpload from "./DragUpload";
 import { ContextMenuTrigger, ContextMenu, MenuItem } from "react-contextmenu";
 
 export interface EditingInfo {
-    splitsKey?: number,
+    splitsKey: number | undefined,
+    persistChanges: boolean,
     run: Run,
 }
 
@@ -179,7 +180,11 @@ export class SplitsSelection extends React.Component<Props, State> {
                         }
                     });
                     if (run !== null) {
-                        this.props.callbacks.openRunEditor({ run });
+                        this.props.callbacks.openRunEditor({
+                            run,
+                            splitsKey: this.props.openedSplitsKey,
+                            persistChanges: false,
+                        });
                     } else {
                         toast.error("You can't edit your run while the timer is running.");
                     }
@@ -265,7 +270,11 @@ export class SplitsSelection extends React.Component<Props, State> {
 
     private async editSplits(splitsKey: number) {
         const run = await this.getRunFromKey(splitsKey);
-        this.props.callbacks.openRunEditor({ splitsKey, run });
+        this.props.callbacks.openRunEditor({
+            splitsKey,
+            persistChanges: true,
+            run,
+        });
     }
 
     private async copySplits(key: number) {