Added new confirmation dialog after adding a directory

FortRise · Oct 15, 2023 · 117aa3b · 117aa3b
1 parent 6304cd0
commit 117aa3b
Show file tree

Hide file tree

Showing 10 changed files with 336 additions and 140 deletions.
diff --git a/pyrgos-gui/src/App.svelte b/pyrgos-gui/src/App.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
   import Navbar from "./lib/Navbar.svelte";
   import Menu from "./lib/Menu.svelte";
-  import { appState, route, tfDirs } from "./stores/appStore";
-  import { INSTALLER, MAIN } from "./state/route";
+  import { appState, dialogOpen, fadeOpen, route, tfDirs } from "./stores/appStore";
+  import { INSTALLER, MAIN, MODS } from "./state/route";
   import Installer from "./lib/Installer.svelte";
   import { onMount } from "svelte";
   import { load } from "./state/appState";
-    import { fetchDownloaded } from "./state/tagResponse";
+  import { fetchDownloaded } from "./state/tagResponse";
+  import ConfirmationDialog from "./lib/ConfirmationDialog.svelte";
+    import Fade from "./lib/Fade.svelte";
 
   onMount(async () => {
     const loadedState = await load();
@@ -20,10 +22,23 @@
 <main>
   <Navbar/>
 
+  {#if $fadeOpen}
+    <Fade>
+      {#if $dialogOpen.dialogOpen}
+      <ConfirmationDialog 
+        onConfirm={$dialogOpen.onConfirm} 
+        title={$dialogOpen.title} 
+        yesColor={`${$dialogOpen.yesRecommended ? "blue" : "gray"}`}/>
+      {/if}
+    </Fade>
+  {/if}
+
   {#if $route == MAIN}
     <Menu/>
   {:else if $route == INSTALLER}
     <Installer/>
+  {:else if $route == MODS}
+    <div></div>
   {/if}
 </main>
 

diff --git a/pyrgos-gui/src/api/client.ts b/pyrgos-gui/src/api/client.ts
@@ -1,6 +1,9 @@
-import { invoke } from "@tauri-apps/api";
+import { fs, http, invoke, os } from "@tauri-apps/api";
 import type { AppState } from "../state/appState";
-import { tfDirs } from "../stores/appStore";
+import { availableInstaller, dialogOpen, downloads, fadeOpen, tfDirs } from "../stores/appStore";
+import type { Tag } from "../state/tagResponse";
+import { appDataDir, resolve } from "@tauri-apps/api/path";
+import { download } from "tauri-plugin-upload-api";
 
 export async function changeState(path: string, state: number) {
     await invoke("plugin:client|change_state", { path, state});
@@ -29,4 +32,97 @@ export async function get_tf_path(): Promise<TFDir[]> {
 export async function update() {
     const tfPaths = await get_tf_path();
     tfDirs.update(x => x = tfPaths);
-}
+}
+
+export function showDialog(title: string, yesRecommended: boolean, onConfirm: () => Promise<void>) {
+    dialogOpen.set({
+        dialogOpen: true,
+        yesRecommended,
+        title,
+        onConfirm
+    });
+    fadeOpen.set(true);
+}
+
+export function hideDialog() {
+    dialogOpen.set({
+        dialogOpen: false,
+        yesRecommended: false,
+        title: null,
+        onConfirm: null
+    });
+    fadeOpen.set(false);
+}
+
+export async function fetchLastVersion() {
+    const client = await http.getClient();
+    const response = await client.get<Tag[]>("https://api.github.com/repos/Terria-K/FortRise/git/refs/tags", {
+      responseType: http.ResponseType.JSON,
+      headers: {
+        "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.246"
+      }
+    });
+
+    const latestVersion = response.data
+        .filter(x => x != undefined)
+        .filter(x => !x.ref.includes("pre"))
+        .reverse()[0];
+    return latestVersion;
+}
+
+export async function downloadInstaller(name: string, update: (text: string, bytes: number) => void) {
+    downloads.update(x => x += 1);
+    update("Downloading...", 0);
+    const dirName: string = await appDataDir();
+    const installerPath = await resolve(dirName, "installer", name);
+    const zipPath = await resolve(dirName, "installer", name + '.zip');
+
+    const platform = await os.platform()
+    let postFix = 'NoANSI'
+    if (platform == 'linux' || platform == 'darwin')
+      postFix = "OSXLinux"
+
+    const folderName = `FortRise.Installer.v${name}-${postFix}`;
+    const zipName = `${folderName}.zip`;
+    const url = `https://github.com/Terria-K/FortRise/releases/download/${name}/${zipName}`;
+    let bytes = 0;
+    let totalBytes = "";
+
+    try 
+    {
+      await download(url, zipPath, (x, total) => {
+        const value = (x / 1024) / 1024;
+        if (totalBytes != total.toFixed(2)) 
+        {
+          totalBytes = (total / 1024/ 1024).toFixed(2);
+        }
+        bytes += value;
+        update(bytes.toFixed(2) + "/" + totalBytes + "MB", bytes);
+      });
+
+      update("Extracting...", bytes);
+      await invoke('plugin:fix_fs|extract', { path: zipPath, outPath: installerPath });
+      const path = await resolve(dirName, "installer", name, folderName);
+      const newPath = await resolve(dirName, "installer", name, "executable");
+      await fs.renameFile(path, newPath);
+      availableInstaller.update(x => {
+        x.push(name);
+        return x;
+      });
+
+      update("Cleaning up...", bytes);
+      await fs.removeFile(zipPath);
+    }
+    catch (e)
+    {
+      if (fs.exists(zipPath))
+        await fs.removeFile(zipPath);
+      update("Error while downloading the installer", bytes);
+      console.log(e);
+    }
+    finally 
+    {
+      downloads.update(x => x -= 1);
+      totalBytes = "";
+    }
+  }
diff --git a/pyrgos-gui/src/lib/ClientButton.svelte b/pyrgos-gui/src/lib/ClientButton.svelte
@@ -76,6 +76,9 @@
     <SubButton onClick={playVanilla}>
       <IoMdPlay/>
     </SubButton>
+    <SubButton onClick={async () => await onPatchClick(client)}>
+      <FaHammer/>
+    </SubButton>
     <SubButton onClick={async () => await onUnpatchClick(client)}>
       <FaScrewdriver/>
     </SubButton>

diff --git a/pyrgos-gui/src/lib/ConfirmationDialog.svelte b/pyrgos-gui/src/lib/ConfirmationDialog.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { hideDialog } from "../api/client";
+
+  type ButtonColor = "blue" | "gray";
+  export let title: string;
+  export let yesColor: ButtonColor = "blue";
+  export let noColor: ButtonColor = "gray";
+  export let onConfirm: () => Promise<void>;
+</script>
+
+
+<div class="dialog-holder">
+  <div class="dialog">
+    <p class="dialog-title">{title}</p>
+    <button class={yesColor} on:click={async () => await onConfirm()}>Yes</button>
+    <button class={noColor} on:click={() => {
+      hideDialog();
+    }}>No</button>
+  </div>
+</div>
+
+<style>
+.dialog-holder {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+.dialog {
+  text-align: center;
+  background-color: rgb(27, 27, 27);
+  border-radius: 8px 8px 8px 8px;
+  border-left: 4px solid rgb(101, 255, 242);
+  width: 50%;
+  height: auto;
+  padding-bottom: 16px;
+}
+
+.dialog-title {
+  font-size: 24px;
+}
+
+.blue {
+  cursor: pointer;
+  background-color: rgb(101, 255, 242);
+}
+
+.gray {
+  cursor: pointer;
+  color: white;
+  background-color: rgb(68, 68, 68);
+}
+</style>
diff --git a/pyrgos-gui/src/lib/Fade.svelte b/pyrgos-gui/src/lib/Fade.svelte
@@ -0,0 +1,13 @@
+<div class="fade">
+  <slot/>
+</div>
+
+<style>
+.fade {
+  user-select: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.39);
+}
+</style>
diff --git a/pyrgos-gui/src/lib/InstallerButton.svelte b/pyrgos-gui/src/lib/InstallerButton.svelte
@@ -6,18 +6,16 @@
   import { appDataDir, resolve} from '@tauri-apps/api/path';
   import { onMount } from "svelte";
   import { fs, invoke, os } from "@tauri-apps/api";
-  import { download } from 'tauri-plugin-upload-api';
   import { writable } from "svelte/store";
   import { availableInstaller, downloads } from "../stores/appStore";
+  import { downloadInstaller as downloadInstallerAPI, load } from "../api/client";
 
   export let name: string;
 
   let found = false;
   let loading = false;
 
-  const bytes = writable(0);
   const downloaderText = writable("");
-  let totalBytes: string = "";
 
   onMount(async () => {
     const dirName: string = await appDataDir();
@@ -31,59 +29,11 @@
 
   async function downloadInstaller() {
     loading = true;
-    downloads.update(x => x += 1);
-    console.log($downloads);
-    downloaderText.update(x => x = "Downloading...");
-    const dirName: string = await appDataDir();
-    const installerPath = await resolve(dirName, "installer", name);
-    const zipPath = await resolve(dirName, "installer", name + '.zip');
-
-    const platform = await os.platform()
-    let postFix = 'NoANSI'
-    if (platform == 'linux' || platform == 'darwin')
-      postFix = "OSXLinux"
-
-    const folderName = `FortRise.Installer.v${name}-${postFix}`;
-    const zipName = `${folderName}.zip`;
-    const url = `https://github.com/Terria-K/FortRise/releases/download/${name}/${zipName}`;
-
-    try 
-    {
-      await download(url, zipPath, (x, total) => {
-        const value = (x / 1024) / 1024;
-        if (totalBytes != total.toFixed(2)) 
-        {
-          totalBytes = (total / 1024/ 1024).toFixed(2);
-        }
-        bytes.update(x => x += value);
-        downloaderText.update(x => x = $bytes.toFixed(2) + "/" + totalBytes + "MB");
-      });
-
-      downloaderText.update(x => x = "Extracting...");
-      await invoke('plugin:fix_fs|extract', { path: zipPath, outPath: installerPath });
-      const path = await resolve(dirName, "installer", name, folderName);
-      const newPath = await resolve(dirName, "installer", name, "executable");
-      await fs.renameFile(path, newPath);
-      $availableInstaller.push(name);
-
-      downloaderText.update(x => x = "Cleaning up...");
-      await fs.removeFile(zipPath);
-      loading = false;
-      found = true;
-    }
-    catch (e)
-    {
-      if (fs.exists(zipPath))
-        await fs.removeFile(zipPath);
-      downloaderText.update(x => x = "Error while downloading the installer");
-      console.log(e);
-    }
-    finally 
-    {
-      downloads.update(x => x -= 1);
-      console.log($downloads);
-      totalBytes = "";
-    }
+    await downloadInstallerAPI(name, (text, bytes) => {
+      $downloaderText = text;
+    });
+    loading = false;
+    found = true;
   }
 
   async function openInstallerDirectory() {

diff --git a/pyrgos-gui/src/lib/InstancePopup.svelte b/pyrgos-gui/src/lib/InstancePopup.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+  import MdInfoOutline from "svelte-icons/md/MdInfoOutline.svelte";
+
+  export let launchingText: string;
+  export let launching: boolean;
+</script>
+
+<div class={`instance-popup ${launching ? 'show' : ''}`}>
+  <p>{launchingText}</p>
+  <div class="instance-icon">
+    <MdInfoOutline/>
+  </div>
+</div>
+
+<style>
+.instance-popup {
+  visibility: hidden;
+  transform: scale(0, 0);
+  position: absolute;
+  background-color: rgb(27, 27, 27);
+  border-radius: 8px 8px 8px 8px;
+  border-left: 4px solid rgb(101, 255, 242);
+  right: 20px;
+  bottom: 20px;
+  width: 400px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.instance-popup.show {
+  animation-name: show;
+  animation-duration: 6s;
+}
+
+@keyframes show {
+  0% {
+    visibility: hidden;
+    transform: scale(0, 0);
+  }
+  5% {
+    visibility: visible;
+    transform: scale(1, 1);
+  }
+  95% {
+    visibility: visible;
+    transform: scale(1, 1);
+  }
+  100% {
+    visibility: hidden;
+    transform: scale(0, 0);
+  }
+}
+
+.instance-icon {
+  width: 50px;
+  height: 50px;
+  margin-right: 10px;
+  color: rgb(101, 255, 242);
+}
+
+.instance-popup p {
+  font-size: 20px;
+  font-weight: bolder;
+  margin-left: 8px;
+  margin-top: 16px;
+}
+</style>