Several changes

- fixed `runners.json` `Wine-6.16-GE-1` URI
- added recommendable only checkboxes for DXVK and runners lists
- fixed empty config property creation
- added runners installation, deletion and selection abilities
- `Runners.current` field was reworked as a `Runners.current()` method to be able
  to change selected runner according to the config file

public/locales/en-us.yaml

@@ -51,7 +51,11 @@ settings:
   # Runners
   runners:
     title: Wine version
+    items:
+      recommended: Show recommendable only
 
   # DXVKs
   dxvks:
-    title: DXVK
+    title: DXVK
+    items:
+      recommended: Show recommendable only

public/locales/ru-ru.yaml

@@ -52,7 +52,11 @@ settings:
   # Runners
   runners:
     title: Версия Wine
+    items:
+      recommended: Показывать только рекомендуемое
   
   # DXVKs
   dxvks:
-    title: DXVK
+    title: DXVK
+    items:
+      recommended: Показывать только рекомендуемое

public/runners.json

@@ -215,7 +215,7 @@
                 "family": "Wine-GE",
                 "name": "lutris-ge-6.16-1-x86_64",
                 "title": "Wine-6.16-GE-1",
-                "uri": "https://github.com/GloriousEggroll/wine-ge-custom/releases/download/6.16-GE-1/wine-lutris-ge-6.16-1-x86_64.tar.xz",
+                "uri": "https://github.com/GloriousEggroll/wine-ge-custom/releases/download/6.16-GE-1/lutris-ge-6.16-1-x86_64.tar.xz",
                 "files": {
                     "wine": "bin/wine64",
                     "wineserver": "bin/wineserver",

src/components/Checkbox.svelte

@@ -6,6 +6,8 @@
     export let prop: string = '';
     export let lang: string = '';
 
+    export let valueChanged: (value: boolean) => void = () => {};
+
     import Checkmark from '../assets/svgs/checkmark.svg';
 
     import Configs from '../ts/Configs';
@@ -16,7 +18,11 @@
     {
         active = !active;
 
-        Configs.set(prop, active);
+        if (prop)
+            Configs.set(prop, active);
+
+        if (valueChanged)
+            valueChanged(active);
     }
 </script>
 

src/components/DXVKSelectionList.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import { _ } from 'svelte-i18n';
 
+    export let recommendable = true;
+
     import DXVK from '../ts/core/DXVK';
 
     import type {
@@ -27,7 +29,7 @@
 
 <div class="list">
     {#each dxvks as dxvk}
-        <div class="list-item" class:list-item-downloaded={dxvkInstalled(dxvk)} class:list-item-active={dxvk.version === selectedVersion}>
+        <div class="list-item" class:list-item-downloaded={dxvkInstalled(dxvk)} class:list-item-active={dxvk.version === selectedVersion} class:list-item-hidden={recommendable && !dxvk.recommended}>
             { dxvk.version }
 
             <div>

src/components/RunnerSelectionList.svelte

@@ -1,25 +1,63 @@
 <script lang="ts">
     import { _ } from 'svelte-i18n';
 
+    export let recommendable = true;
+
     import Runners from '../ts/core/Runners';
 
     import type { Runner, RunnerFamily } from '../ts/types/Runners';
-    
-    let runners: RunnerFamily[] = [], selectedVersion;
-
-    Runners.list().then((list) => runners = list);
-    Runners.current.then((current) => selectedVersion = current?.name);
 
     import Delete from '../assets/images/delete.png';
     import Download from '../assets/images/download.png';
+    
+    let runners: RunnerFamily[] = [],
+        installedRunners = {},
+        disabledRunners = {},
+        selectedVersion;
+
+    Runners.list().then((list) => {
+        runners = list;
 
-    const runnerInstalled = (runner: Runner): boolean => {
         for (const family of runners)
-            for (const wine of family.runners)
-                if (wine.name === runner.name)
-                    return wine.installed;
+            for (const runner of family.runners)
+            {
+                installedRunners[runner.name] = runner.installed;
+                disabledRunners[runner.name] = false;
+            }
+    });
 
-        return false;
+    Runners.current().then((current) => selectedVersion = current?.name);
+
+    let progress = {};
+
+    const downloadRunner = (runner: Runner) => {
+        Runners.download(runner).then((stream) => {
+            stream?.downloadStart(() => disabledRunners[runner.name] = true);
+
+            stream?.downloadProgress((current, total) => {
+                progress[runner.name] = `${Math.round(current / total * 100)}%`;
+            });
+
+            stream?.unpackProgress((current, total) => {
+                progress[runner.name] = `${Math.round(current / total * 100)}%`;
+            });
+
+            stream?.unpackFinish(() => {
+                installedRunners[runner.name] = true;
+                disabledRunners[runner.name] = false;
+
+                progress[runner.name] = undefined;
+            });
+        });
+    };
+
+    const deleteRunner = (runner: Runner) => {
+        disabledRunners[runner.name] = true;
+
+        Runners.delete(runner).then(() => {
+            installedRunners[runner.name] = false;
+            disabledRunners[runner.name] = false;
+        });
     };
 </script>
 
@@ -28,17 +66,32 @@
         <h2>{ family.title }</h2>
 
         {#each family.runners as runner}
-            <div class="list-item" class:list-item-downloaded={runnerInstalled(runner)} class:list-item-active={runner.name === selectedVersion}>
+            <div
+                class="list-item"
+                class:list-item-downloaded={installedRunners[runner.name]}
+                class:list-item-active={runner.name === selectedVersion}
+                class:list-item-hidden={recommendable && !runner.recommended}
+                class:list-item-downloading={progress[runner.name] !== undefined}
+                class:list-item-disabled={disabledRunners[runner.name]}
+                on:click={() => {
+                    if (installedRunners[runner.name])
+                    {
+                        selectedVersion = runner.name;
+
+                        Runners.current(runner);
+                    }
+                }}
+            >
                 { runner.title }
 
                 <div>
-                    <span></span>
+                    <span>{progress[runner.name] ?? ''}</span>
 
                     <!-- svelte-ignore a11y-missing-attribute -->
-                    <img class="item-delete" src={Delete}>
+                    <img class="item-delete" src={Delete} on:click={() => deleteRunner(runner)}>
 
                     <!-- svelte-ignore a11y-missing-attribute -->
-                    <img class="item-download" src={Download}>
+                    <img class="item-download" src={Download} on:click={() => downloadRunner(runner)}>
                 </div>
             </div>
         {/each}

src/sass/components/selectionList.sass

@@ -63,6 +63,9 @@
             img
                 filter: invert(70%) sepia(13%) saturate(241%) hue-rotate(196deg) brightness(97%) contrast(91%)
 
+        .list-item-hidden
+            display: none
+
         .list-item-downloading
             img
                 display: none !important

src/settings.svelte

@@ -87,6 +87,9 @@
         selectedItem = visibleElement.getAttribute('id');
     };
 
+    let dxvkRecommendable = true,
+        runnersRecommendable = true;
+
     // Do some stuff when all the content will be loaded
     onMount(() => {
         Window.current.show();
@@ -143,13 +146,19 @@
         <div class="settings-item" id="runners">
             <h1>{$_('settings.runners.title')}</h1>
 
-            <RunnerSelectionList />
+            <Checkbox lang="settings.runners.items.recommended" valueChanged={(value) => runnersRecommendable = value} />
+
+            <RunnerSelectionList recommendable={runnersRecommendable} />
         </div>
 
         <div class="settings-item" id="dxvks">
             <h1>{$_('settings.dxvks.title')}</h1>
 
-            <DXVKSelectionList />
+            <Checkbox lang="settings.runners.items.recommended" valueChanged={(value) => dxvkRecommendable = value} />
+
+            <br><br>
+
+            <DXVKSelectionList recommendable={dxvkRecommendable} />
         </div>
     </div>
 {/if}

src/ts/Voice.ts

@@ -86,7 +86,7 @@ export default class Voice
     /**
      * Get updated voice data from the specified version to the latest
      * 
-     * @returns Latest voice pack if current is out of date
+     * @returns null if the difference can't be calculated
      * @returns Error object if company's servers are unreachable or they responded with an error
      */
     public static getDiff(version: string): Promise<VoicePack[]|null>

src/ts/core/Prefix.ts

@@ -72,7 +72,7 @@ export default class Prefix
         ];
 
         return new Promise((resolve) => {
-            Runners.current.then((runner) => {
+            Runners.current().then((runner) => {
                 if (runner === null)
                     resolve(false);
     

src/ts/core/Runners.ts

@@ -23,16 +23,29 @@ class Runners
 {
     /**
      * Get the current using runner according to the config file
+     * or set the new one
      */
-    public static get current(): Promise<Runner|null>
+    public static current(runner: Runner|Runner['name']|null = null): Promise<Runner|null>
     {
-        return new Promise((resolve) => {
-            Configs.get('runner').then((runner) => {
-                if (typeof runner === 'string')
-                    Runners.get(runner).then((runner) => resolve(runner));
+        return new Promise(async (resolve) => {
+            if (runner === null)
+            {
+                Configs.get('runner').then((runner) => {
+                    if (typeof runner === 'string')
+                        Runners.get(runner).then((runner) => resolve(runner));
 
-                else resolve(null);
-            });
+                    else resolve(null);
+                });
+            }
+
+            else
+            {
+                Configs.set('runner', typeof runner === 'string' ?
+                    runner : runner.name);
+
+                resolve(typeof runner === 'string' ?
+                    await this.get(runner) : runner);
+            }
         });
     }
 
@@ -121,6 +134,22 @@ class Runners
             else resolve(new Stream(runner));
         });
     }
+
+    /**
+     * Delete specified runner
+     */
+    public static delete(runner: Runner|Runner['name']): Promise<void>
+    {
+        return new Promise(async (resolve) => {
+            const name = typeof runner !== 'string' ?
+                runner.name : runner;
+
+            Process.run(`rm -rf '${Process.addSlashes(await constants.paths.runnersDir + '/' + name)}'`)
+                .then((process) => {
+                    process.finish(() => resolve());
+                });
+        });
+    }
 }
 
 export default Runners;

src/ts/core/promisify.ts

@@ -22,7 +22,7 @@ type PromiseOptions = {
 };
 
 /**
- * Make a promise from the provided function(s) and run it/them
+ * Make a promise from the provided function(s) and run it(them)
  */
 export default function promisify(callback: callback|Promise<any>|PromiseOptions): Promise<any>
 {

src/ts/launcher/states/Launch.ts

@@ -12,7 +12,7 @@ export default (): Promise<void> => {
          */
         let wineExeutable = 'wine';
 
-        const runner = await Runners.current;
+        const runner = await Runners.current();
 
         if (runner !== null)
         {