Introduce Custom Dialogs

src/api/GameList.ts

@@ -110,6 +110,10 @@ export async function downloadGameInfo(gameName: string): Promise<void> {
     }
 }
 
+export function gameListLength(): number {
+    return gameList.length;
+}
+
 export function downloadGameList(): Promise<void> {
     if (gameListPromise == null) {
         gameListPromise = (async () => {
@@ -127,6 +131,10 @@ export function downloadGameList(): Promise<void> {
     return gameListPromise;
 }
 
+export function platformListLength(): number {
+    return platformList.size;
+}
+
 export function downloadPlatformList(): Promise<void> {
     if (platformListPromise == null) {
         platformListPromise = (async () => {
@@ -139,6 +147,10 @@ export function downloadPlatformList(): Promise<void> {
     return platformListPromise;
 }
 
+export function regionListLength(): number {
+    return regionList.size;
+}
+
 export function downloadRegionList(): Promise<void> {
     if (regionListPromise == null) {
         regionListPromise = (async () => {

src/css/Dialog.scss

@@ -0,0 +1,52 @@
+@import 'variables';
+
+dialog {
+    color: #eee;
+    background: $main-background-color;
+    border: 2px solid $border-color;
+    border-radius: 10px;
+    min-width: 225px;
+    max-width: 400px;
+    padding: $ui-large-margin;
+
+    h1 {
+        font-size: 20px;
+        margin: 5px 0;
+    }
+
+    .buttons {
+        button {
+            font-size: 16px;
+            margin: 0;
+            min-width: 80px;
+
+            &:focus {
+                border-color: #888;
+            }
+        }
+
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        column-gap: $ui-margin;
+    }
+
+    &::backdrop {
+        background: rgba(0, 0, 0, 0.5);
+    }
+
+    input {
+        width: 100%;
+        border: none;
+        border-bottom: 1px solid hsla(0, 0%, 100%, 0.25);
+        background: transparent;
+        color: white;
+        text-overflow: ellipsis;
+        font-family: "fira", sans-serif;
+        font-size: 16px;
+
+        &:focus {
+            outline: 0;
+        }
+    }
+}

src/css/main.scss

@@ -29,6 +29,14 @@ body {
     border: 2px solid $border-color !important;
     border-radius: 10px !important;
     min-height: 48px !important;
+
+    &.toast-bug {
+      border-color: red !important;
+
+      a {
+        color: red;
+      }
+    }
   }
 }
 

src/index.tsx

@@ -30,12 +30,10 @@ try {
         { LiveSplit },
         React,
         { createRoot },
-        { ToastContainer },
     ] = await Promise.all([
         import("./ui/LiveSplit"),
         import("react"),
         import("react-dom/client"),
-        import("react-toastify"),
     ]);
 
     try {
@@ -86,25 +84,17 @@ try {
         const container = document.getElementById("base");
         const root = createRoot(container!);
         root.render(
-            <div>
-                <LiveSplit
-                    splits={splits}
-                    layout={layout}
-                    comparison={comparison}
-                    timingMethod={timingMethod}
-                    hotkeys={hotkeys}
-                    splitsKey={splitsKey}
-                    layoutWidth={layoutWidth}
-                    layoutHeight={layoutHeight}
-                    generalSettings={generalSettings}
-                />
-                <ToastContainer
-                    position="bottom-right"
-                    toastClassName="toast-class"
-                    bodyClassName="toast-body"
-                    theme="dark"
-                />
-            </div>,
+            <LiveSplit
+                splits={splits}
+                layout={layout}
+                comparison={comparison}
+                timingMethod={timingMethod}
+                hotkeys={hotkeys}
+                splitsKey={splitsKey}
+                layoutWidth={layoutWidth}
+                layoutHeight={layoutHeight}
+                generalSettings={generalSettings}
+            />,
         );
     } catch (e: any) {
         if (e.name === "InvalidStateError") {

src/ui/Dialog.tsx

@@ -0,0 +1,103 @@
+import * as React from "react";
+
+import "../css/Dialog.scss";
+
+export interface Options {
+    title: string | JSX.Element,
+    description: string | JSX.Element,
+    textInput?: boolean,
+    defaultText?: string,
+    buttons: string[],
+}
+
+export interface State {
+    options: Options,
+    input: string,
+}
+
+let dialogElement: HTMLDialogElement | null = null;
+let setState: ((options: Options) => void) | undefined;
+let resolveFn: ((_: [number, string]) => void) | undefined;
+
+export function showDialog(options: Options): Promise<[number, string]> {
+    if (dialogElement) {
+        dialogElement.showModal();
+        const closeWith = options.buttons.length - 1;
+        dialogElement.onclose = () => {
+            resolveFn?.([closeWith, ""]);
+        };
+    }
+    setState?.(options);
+    return new Promise((resolve) => resolveFn = resolve);
+}
+
+export default class DialogContainer extends React.Component<unknown, State> {
+    constructor(props: unknown) {
+        super(props);
+
+        this.state = {
+            options: {
+                title: "",
+                description: "",
+                buttons: [],
+            },
+            input: "",
+        };
+    }
+
+    public componentDidMount(): void {
+        setState = (options) => this.setState({
+            options,
+            input: options.defaultText ?? "",
+        });
+    }
+
+    public render() {
+        return <dialog
+            tabIndex={-1}
+            ref={(element) => dialogElement = element}
+            onKeyDown={(e) => {
+                if (e?.key === "ArrowLeft") {
+                    e.preventDefault();
+                    (document.activeElement?.previousElementSibling as any)?.focus();
+                } else if (e?.key === "ArrowRight") {
+                    e.preventDefault();
+                    (document.activeElement?.nextElementSibling as any)?.focus();
+                }
+            }}
+        >
+            <h1>{this.state.options.title}</h1>
+            <p>{this.state.options.description}</p>
+            {
+                this.state.options.textInput && <input
+                    type="text"
+                    value={this.state.input}
+                    autoFocus={true}
+                    onChange={(e) => this.setState({ input: e.target.value })}
+                    onKeyDown={(e) => {
+                        if (e?.key === "Enter") {
+                            e.preventDefault();
+                            dialogElement?.close();
+                            resolveFn?.([0, this.state.input]);
+                        }
+                    }}
+                />
+            }
+            <div className="buttons">
+                {
+                    this.state.options.buttons.map((button, i) => {
+                        return <button
+                            autoFocus={i === 0 && !this.state.options.textInput}
+                            onClick={() => {
+                                dialogElement?.close();
+                                resolveFn?.([i, this.state.input]);
+                            }}
+                        >
+                            {button}
+                        </button>;
+                    })
+                }
+            </div>
+        </dialog>;
+    }
+}

src/ui/LSOEventSink.ts

@@ -1,5 +1,6 @@
 import { EventSink, EventSinkRef, ImageCacheRefMut, LayoutEditorRefMut, LayoutRefMut, LayoutStateRefMut, Run, RunRef, TimeSpan, TimeSpanRef, Timer, TimerPhase, TimingMethod } from "../livesplit-core";
 import { WebEventSink } from "../livesplit-core/livesplit_core";
+import { showDialog } from "./Dialog";
 
 export class LSOEventSink {
     private eventSink: EventSink;
@@ -49,10 +50,18 @@ export class LSOEventSink {
         this.splitsModifiedChanged();
     }
 
-    public reset(): void {
+    public async reset(): Promise<void> {
         let updateSplits = true;
         if (this.timer.currentAttemptHasNewBestTimes()) {
-            updateSplits = confirm("You have beaten some of your best times. Do you want to update them?");
+            const [result] = await showDialog({
+                title: "Save Best Times?",
+                description: "You have beaten some of your best times. Do you want to update them?",
+                buttons: ["Yes", "No", "Don't Reset"],
+            });
+            if (result === 2) {
+                return;
+            }
+            updateSplits = result === 0;
         }
 
         this.timer.reset(updateSplits);