Several changes

- added dnf requirements installation command from the main branch
- added Runners settings section
  and `RunnersSelectionList` to manage them

README.md

@@ -70,6 +70,12 @@ sudo apt-get install webkit2gtk unzip tar git curl xdelta3 cabextract
 sudo pacman -Syu webkit2gtk unzip tar git curl xdelta3 cabextract
 ```
 
+### dnf
+
+```sh
+sudo dnf install webkit2gtk unzip tar git curl xdelta cabextract
+```
+
 # Additional requirements
 
 | Name | Description |

public/locales/en-us.yaml

@@ -48,6 +48,10 @@ settings:
       fps_unlocker: Unlock FPS
       purge_dxvk_logs: Delete DXVK logs
 
+  # Runners
+  runners:
+    title: Wine version
+
   # DXVKs
   dxvks:
     title: DXVK

public/locales/ru-ru.yaml

@@ -49,6 +49,10 @@ settings:
       fps_unlocker: Разблокировать FPS
       purge_dxvk_logs: Удалять логи DXVK
 
+  # Runners
+  runners:
+    title: Версия Wine
+  
   # DXVKs
   dxvks:
     title: DXVK

src/components/LanguageSelection.vue

@@ -1,52 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import Configs from '../ts/Configs';
-
-import Selectbox from './bases/Selectbox.vue';
-
-export default defineComponent({
-    mixins: [Selectbox],
-    inject: ['languages'],
-
-    data()
-    {
-        return {
-            trueTitle: '',
-            selectionOpen: false,
-            options: {
-                selected: 'en-us',
-                available: this.languages
-            }
-        };
-    },
-
-    created()
-    {
-        const group = this.locale.split('.')[0];
-        const locale = this.locale.substring(this.locale.indexOf('.') + 1);
-
-        this.trueTitle = `settings.${group}.items.${locale}`;
-
-        Configs.get('lang.launcher').then((lang) => {
-            this.options.selected = (lang as string|null) ?? 'en-us';
-
-            const children = document.getElementById(this.prop)!.children;
-
-            /*for (let i = 0; i < children.length; ++i)
-                if (children[i].getAttribute('lang') === )*/
-        });
-    },
-
-    methods: {
-        selectionChanged(value: string)
-        {
-            this.$i18n.locale = value;
-        },
-
-        defaultOption(): Promise<string>
-        {
-            return Configs.get('lang.launcher') as Promise<string>;
-        }
-    }
-});
-</script>

src/components/RunnerSelectionList.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { _ } from 'svelte-i18n';
+
+    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';
+
+    const runnerInstalled = (runner: Runner): boolean => {
+        for (const family of runners)
+            for (const wine of family.runners)
+                if (wine.name === runner.name)
+                    return wine.installed;
+
+        return false;
+    };
+</script>
+
+<div class="list">
+    {#each runners as family}
+        <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}>
+                { runner.title }
+
+                <div>
+                    <span></span>
+
+                    <!-- svelte-ignore a11y-missing-attribute -->
+                    <img class="item-delete" src={Delete}>
+
+                    <!-- svelte-ignore a11y-missing-attribute -->
+                    <img class="item-download" src={Download}>
+                </div>
+            </div>
+        {/each}
+    {/each}
+</div>

src/components/bases/Selectbox.vue

@@ -1,85 +0,0 @@
-<template>
-    <div class="select" :class="{'select-active': selectionOpen}">
-        <span>{{ $t(this.trueTitle) }}</span>
-
-        <div class="select-options">
-            <ul @click="selectItem" :id="prop">
-                <slot></slot>
-            </ul>
-        </div>
-
-        <div class="selected-item" @click="this.selectionOpen = !this.selectionOpen">
-            <span>{{ options.available[options.selected] }}</span>
-
-            <img src="../../assets/svgs/arrow.svg" />
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import Configs from '../../ts/Configs';
-
-export default defineComponent({
-    props: ['locale', 'prop'],
-
-    data()
-    {
-        return {
-            trueTitle: '',
-            selectionOpen: false,
-            options: {
-                selected: '',
-                available: []
-            }
-        };
-    },
-
-    created()
-    {
-        const group = this.locale.split('.')[0];
-        const locale = this.locale.substring(this.locale.indexOf('.') + 1);
-
-        this.trueTitle = `settings.${group}.items.${locale}`;
-
-        this.defaultOption().then((option) => {
-            this.options.selected = option;
-
-            const children = document.getElementById(this.prop)!.children;
-
-            for (let i = 0; i < children.length; ++i)
-                if (children[i].getAttribute('option') === option)
-                    children[i].classList.add('selected');
-        });
-    },
-    
-    methods: {
-        selectItem(event: MouseEvent)
-        {
-            const li = event.target as HTMLElement;
-
-            if (!li.classList.contains('selected'))
-            {
-                const children = li.parentElement!.children;
-
-                for (let i = 0; i < children.length; ++i)
-                    children[i].classList.remove('selected');
-
-                li.classList.add('selected');
-
-                this.options.selected = li.getAttribute('option')!;
-                this.selectionOpen = false;
-
-                this.selectionChanged(this.options.selected);
-
-                Configs.set(this.prop, this.options.selected);
-            }
-        },
-
-        selectionChanged(value: string) {},
-        defaultOption(): Promise<string> { return new Promise((resolve) => resolve('')); }
-    }
-});
-</script>
-
-<style src="../../sass/components/selectbox.sass" lang="sass"></style>

src/settings.svelte

@@ -5,6 +5,7 @@
     import Checkbox from './components/Checkbox.svelte';
     import SelectionBox from './components/SelectionBox.svelte';
     import DXVKSelectionList from './components/DXVKSelectionList.svelte';
+    import RunnerSelectionList from './components/RunnerSelectionList.svelte';
 
     import Window from './ts/neutralino/Window';
 
@@ -55,6 +56,7 @@
     const menuItems = [
         'general',
         'enhancements',
+        'runners',
         'dxvks'
     ];
 
@@ -138,6 +140,12 @@
             <Checkbox lang="settings.enhancements.items.purge_dxvk_logs" prop="purge_dxvk_logs" />
         </div>
 
+        <div class="settings-item" id="runners">
+            <h1>{$_('settings.runners.title')}</h1>
+
+            <RunnerSelectionList />
+        </div>
+
         <div class="settings-item" id="dxvks">
             <h1>{$_('settings.dxvks.title')}</h1>
 

src/ts/launcher/State.ts

@@ -109,8 +109,6 @@ export default class State
             const gameLatest = (await Game.latest).version;
             const patch = await Patch.latest;
 
-            console.log(patch);
-
             if (gameCurrent === null)
                 state = 'game-installation-available';