Modularize patching steps

Author: FrozenAlex

frontend/README.md

@@ -1,9 +1,5 @@
 ## Usage
 
-Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
-
-This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
-
 ```bash
 $ npm install # or pnpm install or yarn install
 ```
@@ -14,7 +10,7 @@ $ npm install # or pnpm install or yarn install
 
 In the project directory, you can run:
 
-### `npm dev` or `npm start`
+### `npm run dev` or `npm start`
 
 Runs the app in the development mode.<br>
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
@@ -26,9 +22,4 @@ The page will reload if you make edits.<br>
 Builds the app for production to the `dist` folder.<br>
 It correctly bundles Solid in production mode and optimizes the build for the best performance.
 
-The build is minified and the filenames include the hashes.<br>
-Your app is ready to be deployed!
-
-## Deployment
-
-You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)
+This build gets included in the apk after the next rebuild of the app.

frontend/src/modals/InstallSteps/DoneStep.tsx

@@ -0,0 +1,71 @@
+import { onMount, Show } from "solid-js";
+import { refetchAppInfo, refetchModdingStatus, refetchSettings } from "../../store";
+import { refetchMods } from "../../state/mods";
+import { useNavigate } from "@solidjs/router";
+import { GlobalPatchingData } from "../PatchingModal";
+import { launchCurrentApp } from "../../api/android";
+import { CustomModal } from "../CustomModal";
+import RunButton from "../../components/Buttons/RunButton";
+import PlayArrowRounded from "@suid/icons-material/PlayArrowRounded";
+import { showConfirmModal } from "../ConfirmModal";
+import { SmallText } from "../../styles/TextStyles";
+
+/**
+ * This step is shown when the patching/installing/restoring is done
+ * @param props 
+ * @returns 
+ */
+export function DoneStep(props: {
+    next: () => void,
+    onClose?: () => void,
+    patchingData: GlobalPatchingData
+    customMessage?: string
+}) {
+
+    let navigate = useNavigate();
+    function startGame() {
+        launchCurrentApp();
+    }
+
+    // Refresh everything just to be sure
+    onMount(() => {
+        refetchModdingStatus();
+        refetchAppInfo();
+        refetchMods();
+        refetchSettings();
+    })
+
+    return (
+        <CustomModal title={"Patching is done!"} open onClose={props.onClose}
+            buttons={<>
+                {/* If success, close the modal */}
+                <RunButton text="Start game" icon={<PlayArrowRounded />} onClick={async () => {
+                    let sure = await showConfirmModal({
+                        title: "Start game",
+                        message: "Are you sure you want to start the game without installing mods? Patched game with no mods does not make sense if you are not a developer.",
+                    })
+
+                    if (sure) {
+                        props?.onClose && props.onClose(); startGame();
+                    } else {
+                        return;
+                    }
+                }} />
+
+                <RunButton text="Install mods" variant='success' onClick={() => {
+                    props?.onClose && props.onClose();
+                    navigate("/mods");
+                }} />
+            </>} >
+
+            <Show when={props.customMessage}>
+                <SmallText>{props.customMessage}</SmallText>
+            </Show>
+            <Show when={!props.customMessage}>
+                <SmallText>
+                    The game is successfully installed, you can now start the game or install the mods.
+                </SmallText>
+            </Show>
+        </CustomModal>
+    )
+}

frontend/src/modals/InstallSteps/InstallStep.tsx

@@ -0,0 +1,97 @@
+import { createSignal, onCleanup, onMount, Show } from "solid-js";
+import { checkIfGameIsInstalled, installGame } from "./utils";
+import toast from "solid-toast";
+import { config } from "../../store";
+import { CustomModal } from "../CustomModal";
+import RunButton from "../../components/Buttons/RunButton";
+import { MediumText, SmallText } from "../../styles/TextStyles";
+import { IBackup } from "../../api/backups";
+
+/**
+ * Here we ask to install the game
+ * @param props 
+ * @returns 
+ */
+export function InstallStep(props: {
+    next: () => void,
+    onClose?: () => void,
+    /**
+     * Selected backup to install (if we want to show additional info)
+     */
+    selectedBackup?: IBackup,
+    /**
+     * Name of the backup to install (required)
+     */
+    backupName: string,
+},
+) {
+
+    const [done, setDone] = createSignal(false);
+    const [error, setError] = createSignal(false);
+    const [inProgress, setInProgress] = createSignal(false);
+    const [isInstalled, setIsInstalled] = createSignal(false);
+
+    const timer: NodeJS.Timeout = setInterval(async () => {
+        if (!inProgress()) return;
+        if (isInstalled()) return;
+
+        let installed = await checkIfGameIsInstalled();
+
+        if (installed) {
+            setIsInstalled(true);
+            setDone(true);
+            setInProgress(false);
+            clearInterval(timer);
+            toast.success("Game is installed successfully");
+        }
+    }, 400);
+
+    onMount(async () => {
+        setInProgress(true);
+
+        let currentApp = config()?.currentApp;
+
+        if (!currentApp) {
+            toast.error("No game selected");
+            return;
+        };
+    });
+
+
+    onCleanup(() => {
+        if (timer) clearInterval(timer);
+    });
+
+    return (
+        <CustomModal title={"Install the patched game"} open onClose={props.onClose}
+            buttons={<>
+                {/* If success, allow to go to next step (Uninstalling) */}
+                <Show when={done() && !error() && isInstalled()}>
+                    <RunButton text="Next step" variant='success' onClick={() => { props.next() }} />
+                </Show>
+                {/* If just started show the patch button */}
+                <Show when={!done() && !error() && !isInstalled()}>
+                    <RunButton text="Install" variant='success' onClick={() => installGame(props.backupName)} />
+                </Show>
+            </>} >
+            <Show when={isInstalled()}>
+                <MediumText>
+                    The game is successfully <span class="text-accent">installed</span>, click on the button below to go to the next step.
+                </MediumText>
+            </Show>
+
+            <Show when={!isInstalled()}>
+                <MediumText>
+                    Install the game on your quest, click on the button below to install the game.
+                    After that, click on the button below to go to the next step.
+                </MediumText>
+                <SmallText>
+                    If the game won't install, check your free space on the quest. You should have at least 3gb free.
+                    If you have enough space, try to restart the quest and try again.
+                    One more issue could be that you have the game badly uninstalled, in this case you need to run adb command to uninstall the game using SideQuest.
+                </SmallText>
+            </Show>
+        </CustomModal>
+    )
+}
+

frontend/src/modals/InstallSteps/PatchingStep.tsx

@@ -0,0 +1,156 @@
+import { createSignal, For, onCleanup, Show } from "solid-js";
+import { PatchingProgressData } from "../../state/eventBus";
+import { currentApplication, refetchModdingStatus } from "../../store";
+import toast from "solid-toast";
+import { patchCurrentApp } from "../../api/patching";
+import { CustomModal } from "../CustomModal";
+import PlayArrowRounded from "@suid/icons-material/PlayArrowRounded";
+import RunButton from "../../components/Buttons/RunButton";
+import { FirePatch } from "../../assets/Icons";
+import { MediumText } from "../../styles/TextStyles";
+import { Box, LinearProgress } from "@suid/material";
+
+/**
+ * Hete we patch the game and listen for patching events
+ */
+export function PatchingStep(props: { 
+    next: () => void, 
+    onClose?: () => void, 
+    setBackupName: (backupName: string) => void,
+}) {
+    const [progress, setProgress] = createSignal(0);
+
+    // TODO: Check for free space before patching
+
+    const [log, setLog] = createSignal<PatchingProgressData[]>([]);
+
+    let logElement: HTMLPreElement | undefined;
+
+    const [done, setDone] = createSignal(false);
+    const [error, setError] = createSignal(false);
+    const [inProgress, setInProgress] = createSignal(false);
+
+    // Update log when a new event is received
+    function onPatchProgress(e: CustomEvent) {
+        let data = e.detail as PatchingProgressData;
+
+        // find previous operation
+        let prevOperation = log().find((l) => l.currentOperation === data.currentOperation);
+
+        if (prevOperation) {
+            // if the operation is the same, replace it
+            setLog((old) => old.map((l) => {
+                if (l.currentOperation === data.currentOperation) {
+                    return data;
+                }
+                return l;
+            }))
+        } else {
+            // if the operation is not the same, add it
+            setLog((old) => [...old, data]);
+        }
+
+        logElement?.scrollTo(0, logElement.scrollHeight);
+
+        setProgress(data.progress * 100);
+
+        if (data.done) {
+            if (data.error) {
+                setError(true);
+                toast.error("Failed to patch the game");
+            } else {
+                setDone(true);
+                props.setBackupName(data.backupName);
+                toast.success("Game patched successfully");
+
+            }
+
+            // Remove the listener
+            // @ts-ignore
+            BackendEvents.removeEventListener("patch-progress", onPatchProgress);
+
+        }
+
+
+    }
+
+    async function startPatching() {
+        setInProgress(true);
+        try {
+            let result = await patchCurrentApp();
+            if (!result) {
+                toast.error("Failed to patch the game");
+                return;
+            }
+            await refetchModdingStatus();
+            setInProgress(true);
+        } catch (e) {
+            console.error(e)
+            toast.error("Failed to patch game");
+            setInProgress(false);
+            setError(true);
+        }
+
+        // @ts-ignore
+        BackendEvents.addEventListener("patch-progress", onPatchProgress);
+    }
+
+    onCleanup(() => {
+        // @ts-ignore
+        BackendEvents.removeEventListener("patch-progress", onPatchProgress);
+    })
+    
+    return (
+        <CustomModal title={"Patching"} open onClose={props.onClose}
+            buttons={<>
+                {/* If success, allow to go to next step (Uninstalling) */}
+                <Show when={done() && !error()}>
+                    <RunButton text="Next step" icon={<PlayArrowRounded />} variant='success' onClick={() => { props.next() }} />
+                </Show>
+                {/* If just started show the patch button */}
+                <Show when={!done() && !error() && !inProgress()}>
+                    <RunButton text="Patch" icon={<FirePatch />} variant='success' onClick={startPatching} />
+                </Show>
+            </>} >
+            <Show when={!inProgress() && !done()}>
+                <MediumText>
+                    To start the patching process, click on the button below.
+                </MediumText>
+            </Show>
+
+            <Show when={inProgress()}>
+                <Box sx={{ width: "100%" }}>
+                    <LinearProgress variant="determinate" value={progress()} />
+                </Box>
+                <pre ref={logElement} style={{
+                    background: "black",
+                    color: "white",
+                    padding: "10px",
+                    "border-radius": "0px",
+                    "min-width": "400px",
+                    "max-width": "100vw",
+                    height: "300px",
+                    "overflow-y": "auto",
+                    "font-size": "12px",
+                }}>
+                    <For each={log()}>
+                        {(line) => <LogLine line={line} />}
+                    </For>
+                </pre>
+            </Show>
+            {/* If done succesfully */}
+            <Show when={!inProgress() && done() && !error()}>
+                <MediumText>
+                    The patching is completed successfully.
+                    To continue, click on the button below.
+                </MediumText>
+
+            </Show>
+
+        </CustomModal>
+    )
+}
+
+function LogLine({ line }: { line: PatchingProgressData }) {
+    return <div>({line.doneOperations - 1}/{line.totalOperations}) {line.currentOperation}{line.done ? "OK" : "..."} </div>
+}