Settings menu improvements

- added voice selection
- added theme selection
- added discrod rpc toggle
- added hud selection
- added gamemode, fps unlocker and dxvk logs auto-deletion options
- default settings were moved to a separate file
- dxvk list now shows installed and active dxvk
- added `DXVK.current` field

neutralino.config.json

@@ -22,7 +22,7 @@
       "fullScreen": false,
       "alwaysOnTop": false,
       "icon": "/public/icons/64x64.png",
-      "enableInspector": true,
+      "enableInspector": false,
       "borderless": false,
       "maximize": false,
       "hidden": true,

public/locales/en-us.yaml

@@ -5,10 +5,49 @@ settings:
     items:
       # Language selection
       lang:
+        # Launcher language
         launcher:
           title: Launcher
           items:
             en-us: English (US)
             ru-ru: Русский
-    
-      dxvks: DXVK
+
+        # Game voice pack language
+        voice:
+          title: Voice pack
+          items:
+            en-us: English (US)
+            ja-jp: Japanese
+            ko-kr: Korean
+            zn-cn: Chinese
+
+      # Launcher theme
+      theme:
+        title: Theme
+        items:
+          system: System
+          light: Light
+          dark: Dark
+      
+      discord: Discord RPC
+      dxvks: DXVK
+
+  # Enhancements
+  enhancements:
+    title: Enhancements
+    items:
+      # HUD
+      hud:
+        title: HUD
+        items:
+          none: None
+          dxvk: DXVK
+          mangohud: MangoHUD
+      
+      gamemode: GameMode
+      fps_unlocker: Unlock FPS
+      purge_dxvk_logs: Auto-delete DXVK logs
+
+  # DXVKs
+  dxvks:
+    title: DXVK

public/locales/ru-ru.yaml

@@ -5,10 +5,50 @@ settings:
     items:
       # Выбор языка
       lang:
+        # Лаунчер
         launcher:
           title: Лаунчер
           items:
             en-us: English (US)
             ru-ru: Русский
-    
-      dxvks: DXVK
+
+        # Язык озвучки в игре
+        voice:
+          title: Язык озвучки
+          items:
+            en-us: Английский (США)
+            ja-jp: Японский
+            ko-kr: Корейский
+            zn-cn: Китайский
+
+      # Тема лаунчера
+      theme:
+        title: Тема
+        items:
+          system: Системная
+          light: Светлая
+          dark: Тёмная
+      
+      discord: Discord RPC
+      dxvks: DXVK
+
+  # Улучшения
+  enhancements:
+    title: Улучшения
+    items:
+      # HUD
+      hud:
+        title: HUD
+        items:
+          none: Отключён
+          dxvk: DXVK
+          mangohud: MangoHUD
+      
+      # TODO: add hints to the components so I could describe what these options means
+      gamemode: GameMode
+      fps_unlocker: Разблокировать FPS
+      purge_dxvk_logs: Автоматически удалять логи DXVK
+
+  # DXVKs
+  dxvks:
+    title: DXVK

src/components/DXVKSelectionList.svelte

@@ -7,19 +7,27 @@
         DXVK as TDXVK
     } from '../ts/types/DXVK';
     
-    let dxvks: TDXVK[] = [];
+    let dxvks: TDXVK[] = [], selectedVersion;
 
     DXVK.list().then((list) => dxvks = list);
+    DXVK.current.then((current) => selectedVersion = current?.version);
 
     import Delete from '../assets/images/delete.png';
     import Download from '../assets/images/download.png';
-</script>
 
-<h2>{ $_('settings.general.items.dxvks') }</h2>
+    const dxvkInstalled = (dxvk: TDXVK): boolean => {
+        const filtered = dxvks.filter((item) => item.version === dxvk.version);
+
+        if (filtered.length === 1)
+            return filtered[0].installed;
+
+        else return false;
+    };
+</script>
 
 <div class="list">
     {#each dxvks as dxvk}
-        <div class="list-item">
+        <div class="list-item" class:list-item-downloaded={dxvkInstalled(dxvk)} class:list-item-active={dxvk.version === selectedVersion}>
             { dxvk.version }
 
             <div>

src/components/SelectionBox.svelte

@@ -5,7 +5,7 @@
 
     export let prop: string = '';
     export let lang: string = '';
-    export let items: ArrayLike<string> = [];
+    export let items = {};
     export let valueChanged: (value: string) => void = () => {};
 
     import Arrow from '../assets/svgs/arrow.svg';
@@ -44,7 +44,7 @@
                     data-value={itemLang}
 
                     on:click={selectionChanged}
-                    
+
                     on:click={() => {
                         selectedValue = itemLang;
 

src/defaultSettings.ts

@@ -0,0 +1,98 @@
+import Configs from './ts/Configs';
+import constants from './ts/Constants';
+import promisify from './ts/core/promisify';
+
+promisify(async () => {
+    Configs.defaults({
+        lang: {
+            launcher: 'en-us',
+            voice: 'en-us'
+        },
+    
+        /**
+         * Path to wine prefix
+         * 
+         * @default constants.paths.prefix.default
+         */
+        prefix: await constants.paths.prefix.default,
+    
+        /**
+         * Runner name to use, or null if runner is not specified
+         * 
+         * @default null
+         */
+        runner: null,
+    
+        /**
+         * DXVK name to use, or null if DXVK is not specified
+         * 
+         * @default null
+         */
+        dxvk: null,
+    
+        /**
+         * Launcher theme
+         * 
+         * Can be "system", "light" and "dark"
+         * 
+         * @defaul "system"
+         */
+        theme: 'system',
+    
+        /**
+         * HUD
+         * 
+         * "none" if don't use. Otherwise should be "dxvk" or "mangohud"
+         * 
+         * @default "none"
+         */
+        hud: 'none',
+    
+        /**
+         * vkBasalt preset to use
+         * 
+         * null if don't use. Otherwise should be some folder name from the "shaders" folder
+         * 
+         * @default null
+         */
+        shaders: null,
+
+        /**
+         * Discord RPC integration
+         */
+        discord: {
+            /**
+             * If it is enabled
+             * 
+             * @default false
+             */
+            enabled: false,
+
+            // todo
+            texts: {
+                idk: true
+            }
+        },
+
+        /**
+         * Do the launcher should use GameMode
+         * 
+         * @default false
+         */
+        gamemode: false,
+
+        /**
+         * Do the launcher should use FPS unlocker
+         * 
+         * @default false
+         */
+        fps_unlocker: false,
+
+        /**
+         * Do the launcher should automatically delete DXVK log files
+         * 
+         * @default true
+         */
+        purge_dxvk_logs: true
+    });
+});

src/pages/index.ts

@@ -1,43 +1,10 @@
-import Configs from '../ts/Configs';
-import constants from '../ts/Constants';
-
 import '../i18n';
 import App from '../index.svelte';
 
 declare const Neutralino;
 
 Neutralino.init();
-
-Neutralino.events.on('ready', async () => {
-    Configs.defaults({
-        lang: {
-            launcher: 'en-us',
-            voice: 'en-us'
-        },
-
-        // Path to wine prefix
-        prefix: await constants.paths.prefix.default,
-
-        // runner name to use, or null if runner is not specified
-        runner: null,
-
-        /**
-         * HUD
-         * 
-         * null if don't use
-         * otherwise should be "dxvk" or "mangohud"
-         */
-        hud: null,
-
-        /**
-         * vkBasalt preset to use
-         * 
-         * null if don't use
-         * otherwise should be some folder name from the "shaders" folder
-         */
-        shaders: null
-    });
-});
+Neutralino.events.on('ready', () => import('../defaultSettings'));
 
 const app = new App({
     target: document.getElementById('app')!

src/settings.svelte

@@ -6,15 +6,84 @@
     import SelectionBox from './components/SelectionBox.svelte';
     import DXVKSelectionList from './components/DXVKSelectionList.svelte';
 
-    let availableLocales: ArrayLike<string> = [];
+    import Window from './ts/neutralino/Window';
+
+    // TODO: somehow simplify all this variables definitions
+
+    /**
+     * Launcher language
+     */
+    let launcherLocales = {};
 
     $locales.forEach((locale) => {
-        availableLocales[locale] = `settings.general.items.lang.launcher.items.${locale}`;
+        launcherLocales[locale] = `settings.general.items.lang.launcher.items.${locale}`;
     });
 
-    availableLocales = availableLocales;
+    launcherLocales = launcherLocales;
 
-    import Window from './ts/neutralino/Window';
+    /**
+     * Game voice packs languages
+     */
+
+    const voiceLocales = {
+        'en-us': 'settings.general.items.lang.voice.items.en-us',
+        'ja-jp': 'settings.general.items.lang.voice.items.ja-jp',
+        'ko-kr': 'settings.general.items.lang.voice.items.ko-kr',
+        'zn-cn': 'settings.general.items.lang.voice.items.zn-cn'
+    };
+
+    /**
+     * Themes
+     */
+
+    const themes = {
+        'system': 'settings.general.items.theme.items.system',
+        'light': 'settings.general.items.theme.items.light',
+        'dark': 'settings.general.items.theme.items.dark'
+    };
+
+    /**
+     * HUD options
+     */
+
+    const huds = {
+        'none': 'settings.enhancements.items.hud.items.none',
+        'dxvk': 'settings.enhancements.items.hud.items.dxvk',
+        'mangohud': 'settings.enhancements.items.hud.items.mangohud'
+    };
+
+    const menuItems = [
+        'general',
+        'enhancements',
+        'dxvks'
+    ];
+
+    /**
+     * Menu items changing
+     */
+    let selectedItem: string = 'general';
+
+    const changeItem = (event: MouseEvent) => {
+        const item = event.target! as HTMLElement;
+        const settings = document.getElementsByClassName('settings')[0]!;
+
+        settings.scrollTop = document.getElementById(item.getAttribute('data-anchor') as string)!.offsetTop - 16;
+
+        selectedItem = item.getAttribute('data-anchor')!;
+    };
+
+    const updateItems = () => {
+        const settings = document.getElementsByClassName('settings')[0]! as HTMLElement;
+        const settingsItems = <HTMLCollectionOf<HTMLElement>>settings.children;
+
+        let visibleElement;
+
+        for (let i = 0; i < settingsItems.length; ++i)
+            if (settingsItems[i].offsetTop - settings.scrollTop < 180)
+                visibleElement = settingsItems[i];
+
+        selectedItem = visibleElement.getAttribute('id');
+    };
 
     // Do some stuff when all the content will be loaded
     onMount(() => {
@@ -24,20 +93,54 @@
 
 {#if typeof $locale === 'string'}
     <div class="menu">
-        <div class="menu-item menu-item-active" data-anchor="general">{$_('settings.general.title')}</div>
+        {#each menuItems as item}
+            <div class="menu-item" on:click={changeItem} class:menu-item-active={selectedItem === item} data-anchor={item}>{ $_(`settings.${item}.title`) }</div>
+        {/each}
     </div>
 
-    <div class="settings">
+    <div class="settings" on:scroll={updateItems}>
         <div class="settings-item" id="general">
             <h1>{$_('settings.general.title')}</h1>
 
             <SelectionBox
                 lang="settings.general.items.lang.launcher.title"
                 prop="lang.launcher"
-                items={availableLocales}
+                items={launcherLocales}
                 valueChanged={(value) => $locale = value}
             />
 
+            <SelectionBox
+                lang="settings.general.items.lang.voice.title"
+                prop="lang.voice"
+                items={voiceLocales}
+            />
+
+            <SelectionBox
+                lang="settings.general.items.theme.title"
+                prop="theme"
+                items={themes}
+            />
+
+            <Checkbox lang="settings.general.items.discord" prop="discord.enabled" />
+        </div>
+
+        <div class="settings-item" id="enhancements">
+            <h1>{$_('settings.enhancements.title')}</h1>
+
+            <SelectionBox
+                lang="settings.enhancements.items.hud.title"
+                prop="hud"
+                items={huds}
+            />
+
+            <Checkbox lang="settings.enhancements.items.gamemode" prop="gamemode" />
+            <Checkbox lang="settings.enhancements.items.fps_unlocker" prop="fps_unlocker" />
+            <Checkbox lang="settings.enhancements.items.purge_dxvk_logs" prop="purge_dxvk_logs" />
+        </div>
+
+        <div class="settings-item" id="dxvks">
+            <h1>{$_('settings.dxvks.title')}</h1>
+
             <DXVKSelectionList />
         </div>
     </div>

src/ts/core/DXVK.ts

@@ -1,6 +1,7 @@
 import type { DXVK as TDXVK } from '../types/DXVK';
 
 import constants from '../Constants';
+import Configs from '../Configs';
 import AbstractInstaller from './AbstractInstaller';
 
 declare const Neutralino;
@@ -15,6 +16,21 @@ class Stream extends AbstractInstaller
 
 export default class DXVK
 {
+    /**
+     * Get the current using DXVK according to the config file
+     */
+    public static get current(): Promise<TDXVK|null>
+    {
+        return new Promise((resolve) => {
+            Configs.get('dxvk').then((dxvk) => {
+                if (typeof dxvk === 'string')
+                    DXVK.get(dxvk).then((dxvk) => resolve(dxvk));
+
+                else resolve(null);
+            });
+        });
+    }
+
     /**
      * Get DXVKs list
      */
@@ -49,7 +65,7 @@ export default class DXVK
     /**
      * Get DXVK with specified version
      */
-    public static get(version: string): Promise<DXVK|null>
+    public static get(version: string): Promise<TDXVK|null>
     {
         return new Promise((resolve) => {
             this.list().then((list) => {