From e58a4067ce34b42bd82c82a028f9d14073de90f0 Mon Sep 17 00:00:00 2001 From: Tyler Wilding Date: Sat, 18 Feb 2023 16:53:46 -0500 Subject: [PATCH] frontend: show installation progress properly --- src/components/games/setup/GameSetup.svelte | 48 +- src/components/games/setup/LogViewer.svelte | 4 +- src/components/games/setup/Progress.svelte | 80 ++- src/routes/Game.svelte | 15 +- src/routes/Settings.svelte | 58 +- src/routes/Textures.svelte | 14 +- src/routes/Update.svelte | 2 +- src/routes/settings/Folders.svelte | 70 +-- src/routes/settings/General.svelte | 10 +- src/routes/settings/Versions.svelte | 649 ++++++++++---------- src/splash/Splash.svelte | 32 +- 11 files changed, 494 insertions(+), 488 deletions(-) diff --git a/src/components/games/setup/GameSetup.svelte b/src/components/games/setup/GameSetup.svelte index 3151e6c..5cfe563 100644 --- a/src/components/games/setup/GameSetup.svelte +++ b/src/components/games/setup/GameSetup.svelte @@ -1,10 +1,5 @@ @@ -67,6 +77,16 @@ {/if} + {#if $InstallationProgress.currentStep === 3 && $InstallationProgress.steps[3].status === "success"} +
+
+ +
+
+ {/if} {:else}

import { ProcessLogs } from "$lib/stores/AppStore"; - import Icon from '@iconify/svelte'; + import Icon from "@iconify/svelte"; import { Accordion, AccordionItem } from "flowbite-svelte"; - + Logs
- import { InstallStatus } from "$lib/stores/AppStore"; + import { InstallationProgress } from "$lib/stores/AppStore"; import Icon from "@iconify/svelte"; - // $: progress = $InstallStatus; + $: progress = $InstallationProgress; // NOTE - useful for debugging: - let installationProgress = { - currentStep: 0, - steps: [ - { - status: "success", - }, - { - status: "pending", - }, - { - status: "queued", - }, - { - status: "queued", - }, - ], - }; + // let progress = { + // currentStep: 0, + // steps: [ + // { + // status: "success", + // }, + // { + // status: "pending", + // }, + // { + // status: "queued", + // }, + // { + // status: "queued", + // }, + // ], + // }; const iconContainerStyle = "w-10 h-10 mx-auto border-solid border-2 border-slate-800 bg-slate-900 rounded-full text-lg text-white flex justify-center items-center"; @@ -29,8 +29,7 @@ "w-full rounded items-center align-middle align-center flex-1"; // TODO - this pattern indicates these should probably be their own components... - function progressIcon(stepNum: number) { - const currentStatus = installationProgress.steps[stepNum].status; + function progressIcon(currentStatus: string) { if (currentStatus === "success") { return "material-symbols:check"; } else if (currentStatus === "pending") { @@ -41,17 +40,15 @@ return "mdi:hourglass"; } - function progressIconStyle(stepNum: number) { + function progressIconStyle(currentStatus: string) { let style = ""; - const currentStatus = installationProgress.steps[stepNum].status; if (currentStatus === "pending") { style += " animate-pulse"; } return style; } - function progressIconColor(stepNum: number) { - const currentStatus = installationProgress.steps[stepNum].status; + function progressIconColor(currentStatus: string) { if (currentStatus === "success") { return "#22c55e"; } else if (currentStatus === "pending") { @@ -62,9 +59,8 @@ return "#737373"; } - function progressBarStyle(stepNum: number) { + function progressBarStyle(currentStatus: string) { let style = "w-full py-1 rounded"; - const currentStatus = installationProgress.steps[stepNum].status; if (currentStatus === "success") { style += " bg-green-500"; } else if (currentStatus === "pending") { @@ -87,9 +83,9 @@
@@ -106,15 +102,15 @@ style="width: calc(100% - 2.5rem - 1rem); top: 50%; transform: translate(-50%, -50%)" >
-
+
@@ -129,15 +125,15 @@ style="width: calc(100% - 2.5rem - 1rem); top: 50%; transform: translate(-50%, -50%)" >
-
+
@@ -152,15 +148,15 @@ style="width: calc(100% - 2.5rem - 1rem); top: 50%; transform: translate(-50%, -50%)" >
-
+
diff --git a/src/routes/Game.svelte b/src/routes/Game.svelte index 42df4d2..913a20f 100644 --- a/src/routes/Game.svelte +++ b/src/routes/Game.svelte @@ -1,19 +1,10 @@ diff --git a/src/routes/Settings.svelte b/src/routes/Settings.svelte index 5ea7aef..d53f3e4 100644 --- a/src/routes/Settings.svelte +++ b/src/routes/Settings.svelte @@ -32,35 +32,35 @@ header and the rest of the layout aren't within a shared container -->
- + - - - - - - - - - - + + + + + + + + +
diff --git a/src/routes/Textures.svelte b/src/routes/Textures.svelte index 05ae578..78aa229 100644 --- a/src/routes/Textures.svelte +++ b/src/routes/Textures.svelte @@ -5,7 +5,6 @@ import { appDir, join } from "@tauri-apps/api/path"; import { removeDir, removeFile } from "@tauri-apps/api/fs"; import { SupportedGame } from "$lib/constants"; - import { decompileFromFile } from "$lib/setup/setup"; import { confirm } from "@tauri-apps/api/dialog"; import { Alert, @@ -32,8 +31,10 @@ let selectedTexturePacks: string[] = []; $: disabled = false; + // TODO - deferring this work + onMount(async () => { - packs = await getAllTexturePacks(); + // packs = await getAllTexturePacks(); }); async function handleSelectedPacks(pack) { @@ -52,7 +53,7 @@ async function handleAddTexturePack() { try { await texturePackPrompt(); - packs = await getAllTexturePacks(); + // packs = await getAllTexturePacks(); } catch (error) { console.error(error); } @@ -108,7 +109,7 @@ // extract texture packs in (proper) order to texture_replacements (proper order: for overridding purposes) await extractTextures(selectedTexturePacks); // await decompile game (similar to GameControls function, maybe that function should be moved into a seperate file) - await decompileFromFile(SupportedGame.Jak1); + // await decompileFromFile(SupportedGame.Jak1); // should be ready to play (fingers crossed) } catch (err) { console.error(err); @@ -119,7 +120,8 @@
- {#if packs && packs.length > 0} + TODO +
diff --git a/src/routes/Update.svelte b/src/routes/Update.svelte index 1a77f3a..0466509 100644 --- a/src/routes/Update.svelte +++ b/src/routes/Update.svelte @@ -26,7 +26,7 @@
-
+
{#if $UpdateStore.shouldUpdate}
- import { - getInstallationDirectory, - setInstallationDirectory, - } from "$lib/rpc/config"; - import { folderPrompt } from "$lib/utils/file"; - import { Label, Input } from "flowbite-svelte"; - import { onMount } from "svelte"; - - let currentInstallationDirectory = ""; - - onMount(async () => { - currentInstallationDirectory = await getInstallationDirectory(); - }); - - -
-
- - { - const newInstallDir = await folderPrompt("Pick an Installation Folder"); - if ( - newInstallDir !== undefined && - newInstallDir !== currentInstallationDirectory - ) { - await setInstallationDirectory(newInstallDir); - currentInstallationDirectory = newInstallDir; - } - }} - /> -
-
+ + +
+
+ + { + const newInstallDir = await folderPrompt("Pick an Installation Folder"); + if ( + newInstallDir !== undefined && + newInstallDir !== currentInstallationDirectory + ) { + await setInstallationDirectory(newInstallDir); + currentInstallationDirectory = newInstallDir; + } + }} + /> +
+
diff --git a/src/routes/settings/General.svelte b/src/routes/settings/General.svelte index c87b352..c90ed7c 100644 --- a/src/routes/settings/General.svelte +++ b/src/routes/settings/General.svelte @@ -1,6 +1,4 @@ - - -

- Nothing yet -

+ + +

Nothing yet

diff --git a/src/routes/settings/Versions.svelte b/src/routes/settings/Versions.svelte index 605b3b5..ff62ba8 100644 --- a/src/routes/settings/Versions.svelte +++ b/src/routes/settings/Versions.svelte @@ -1,326 +1,323 @@ - - - - -
-

- Configure your active tooling version -

- - - Official -
-
-

- Official versions are from the `jak-project` GitHub repository -

-
-
- {#if currentOfficialVersion != selectedOfficialVersion} - - {/if} - - -
-
- - - - Select - - - Controls - - Version - Date - Github Link - - - {#each officialReleases as release (release.version)} - - - {#if release.isDownloaded} - - {/if} - - - - - {release.version} - {new Date(release.date).toLocaleDateString()} - - - - {/each} - -
- - - Unofficial -

- Unofficial versions are typically modified `jak-project` releases to - enable changes or new content -

-
-
-

- These are not supported by the OpenGOAL team and will have to be - manually added to the folder at this time -

-
-
- - -
-
- - - Development -

- This list serves as a convenient area to stage, manage and test new - releases (either official or unofficial) -

-
-
-

- This list will always require manual management via it's respective - folder -

-
-
- - -
-
- - -
+ + + + +
+

+ Configure your active tooling version +

+ + + Official +
+
+

+ Official versions are from the `jak-project` GitHub repository +

+
+
+ {#if currentOfficialVersion != selectedOfficialVersion} + + {/if} + + +
+
+ + + + Select + + + Controls + + Version + Date + Changes Link + + + {#each officialReleases as release (release.version)} + + + {#if release.isDownloaded} + + {/if} + + + + + {release.version} + {new Date(release.date).toLocaleDateString()} + + + + {/each} + +
+ + + Unofficial +

+ Unofficial versions are typically modified `jak-project` releases to + enable changes or new content +

+
+
+

+ These are not supported by the OpenGOAL team and will have to be + manually added to the folder at this time +

+
+
+ + +
+
+ + + Development +

+ This list serves as a convenient area to stage, manage and test new + releases (either official or unofficial) +

+
+
+

+ This list will always require manual management via it's respective + folder +

+
+
+ + +
+
+ + +
diff --git a/src/splash/Splash.svelte b/src/splash/Splash.svelte index 754a95a..27c8682 100644 --- a/src/splash/Splash.svelte +++ b/src/splash/Splash.svelte @@ -27,20 +27,20 @@ }); async function selectInstallationFolder(evt) { - // If not -- let's ask the user to set one up - // This is part of what allows for the user to install the games and such wherever they want - currentStatusText = "Pick an Installation Folder"; - // TODO - change to a save dialog instead - const new_install_dir = await folderPrompt("Pick an Installation Folder"); - // TODO - put invokes into a nice typescript interface - if (new_install_dir !== undefined) { - await invoke("set_install_directory", {"newDir": new_install_dir}); - // TODO - we are kinda assuming it succeeded here, improve that - // - what if the install directory no longer exists - // - what if what they provide isn't writable? - installationDirSet = true; - finishSplash(); - } + // If not -- let's ask the user to set one up + // This is part of what allows for the user to install the games and such wherever they want + currentStatusText = "Pick an Installation Folder"; + // TODO - change to a save dialog instead + const new_install_dir = await folderPrompt("Pick an Installation Folder"); + // TODO - put invokes into a nice typescript interface + if (new_install_dir !== undefined) { + await invoke("set_install_directory", { newDir: new_install_dir }); + // TODO - we are kinda assuming it succeeded here, improve that + // - what if the install directory no longer exists + // - what if what they provide isn't writable? + installationDirSet = true; + finishSplash(); + } } async function finishSplash(evt) { @@ -77,7 +77,9 @@ {#if installationDirSet}
{currentStatusText}
{:else} - + {/if}