Add custom resolution, borderless window, quick launch bat generation, custom font

assets/launcher-ui/package.json

@@ -18,13 +18,15 @@
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/vue-fontawesome": "^3.0.8",
     "@vueuse/sound": "^2.0.1",
+    "dedent": "^1.5.3",
     "saucer-app": "^4.2.3",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3"
   },
   "devDependencies": {
     "@tsconfig/node20": "^20.1.4",
     "@types/node": "^20.14.5",
+    "@types/wicg-file-system-access": "^2023.10.5",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "@vue/tsconfig": "^0.5.1",

assets/launcher-ui/src/assets/base.css

@@ -1,3 +1,13 @@
+@font-face {
+  font-family: 'Noble Scarlet';
+  src: url('./msyhsb.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'SGM';
+  src: url('./sgm.woff2') format('woff2');
+}
+
 *,
 *::before,
 *::after {
@@ -8,27 +18,24 @@
   user-select: none;
   -webkit-user-drag: none;
   color-scheme: dark;
+  font-family:
+    SGM,
+    'Noble Scarlet',
+    'Segoe UI',
+    sans-serif;
 }
 
-body {
-  background: #212121;
-  line-height: 1.6;
+option {
   font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
+    'Noble Scarlet',
     'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
     sans-serif;
+}
+
+body {
+  background: #212121;
+  line-height: 1.6;
   font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeSpeed;
   overflow: hidden;
-}
+}

assets/launcher-ui/src/components/Alert.vue

@@ -5,15 +5,16 @@ const message = ref('');
 const color = ref('');
 const element: Ref<HTMLElement | undefined> = ref(undefined);
 
+const queue: { msg: string, colour: string, timeout: number }[] = [];
 let timer: number | undefined = undefined;
 
-window.laochan.alert.__cb = (msg, colour, timeout) => {
+function show(data: { msg: string, colour: string, timeout: number }) {
     if (!element.value) return;
 
     clearTimeout(timer);
 
-    color.value = colour;
-    message.value = msg;
+    color.value = data.colour;
+    message.value = data.msg;
     element.value.classList.remove('out');
     element.value.classList.add('in');
 
@@ -24,8 +25,22 @@ window.laochan.alert.__cb = (msg, colour, timeout) => {
         element.value.classList.add('out');
 
         clearTimeout(timer);
-        timer = undefined;
-    }, timeout);
+
+        // wait for out animation
+        setTimeout(() => {
+            timer = undefined;
+
+            const next = queue.shift();
+            if (next) show(next);
+        }, 250);
+    }, data.timeout);
+};
+
+window.laochan.alert.__cb = (msg, colour, timeout) => {
+    if (timer === undefined)
+        show({ msg, colour, timeout });
+    else
+        queue.push({ msg, colour, timeout });
 };
 </script>
 
@@ -76,15 +91,15 @@ window.laochan.alert.__cb = (msg, colour, timeout) => {
 
 .in {
     animation-name: in;
-    animation-duration: 0.5s;
+    animation-duration: 0.25s;
     animation-direction: normal;
     animation-fill-mode: both;
     animation-timing-function: ease;
 }
 
 .out {
     animation-name: out;
-    animation-duration: 0.5s;
+    animation-duration: 0.25s;
     animation-direction: normal;
     animation-fill-mode: both;
     animation-timing-function: ease;

assets/launcher-ui/src/components/Version.vue

@@ -21,7 +21,7 @@ function num() {
     z-index: 30;
     left: 2em;
     bottom: 1em;
-    opacity: 60%;
-    font-family: 'Courier New', Courier, monospace;
+    color: #555;
+  mix-blend-mode: screen;
 }
 </style>

assets/launcher-ui/src/env.d.ts

@@ -3,6 +3,12 @@ interface Ref<T = any> {
     value: T;
 }
 
+interface DisplayMode {
+    width: number;
+    height: number;
+    hz: number;
+}
+
 interface Window {
     saucer: {
         _idc: number;
@@ -38,6 +44,8 @@ interface Window {
         /// -2 = failed to get default audio device
         /// -3 = failed to active wasapi audio client
         checkWasapiDevice: () => Promise<number>;
+        queryDisplayModes: () => Promise<DisplayMode[]>;
+        selfPath: () => Promise<string>;
         num: () => void;
         alert: {
             show: (message: string, color: string, timeout: number) => void;

assets/launcher-ui/src/main.ts

@@ -58,6 +58,16 @@ window.laochan = {
     checkWasapiDevice() {
         return window.saucer.call<number>('checkWasapiDeviceStatus', []);
     },
+    queryDisplayModes() {
+        return window.saucer.call<string[]>('queryDisplayModes', [])
+            .then(modes => modes.map(v => {
+                const [width, height, hz] = JSON.parse(v);
+                return { width, height, hz };
+            }));
+    },
+    selfPath: () => {
+        return window.saucer.call<string>('selfPath', []);
+    },
     num: () => {},
     ctx: {
         gamePaths: ref<string[][]>([[], [], []]),

assets/launcher-ui/src/modules/iidx.ts

@@ -1,11 +1,11 @@
 import { ref, type Ref } from "vue";
 import { launcher } from "./launcher";
+import dedent from "dedent";
 
 export enum IIDXDisplayMode {
     Fullscreen = 0,
-    Windowed720p = 1,
-    Windowed900p = 2,
-    Windowed1080p = 3,
+    BorderlessWindowed = 1,
+    Windowed = 1,
 }
 
 export enum IIDXSoundMode {
@@ -21,6 +21,10 @@ export enum IIDXLanguage {
 
 export interface IIDXConfig {
     displayMode: IIDXDisplayMode;
+    resolution: {
+        w: number;
+        h: number;
+    };
     soundMode: IIDXSoundMode;
     asioDevice: string;
     useGsm: boolean;
@@ -38,7 +42,7 @@ export class IIDX {
     installed() {
         return !!window.laochan.ctx.gamePaths.value[0].length;
     }
-    
+
     get installPath() {
         if (!this.installed()) {
             return;
@@ -61,7 +65,8 @@ export class IIDX {
         const { devices } = await window.laochan.getAsioDeviceList();
 
         this._config.value = {
-            displayMode: IIDXDisplayMode.Windowed1080p,
+            displayMode: IIDXDisplayMode.BorderlessWindowed,
+            resolution: { w: 0, h: 0 },
             soundMode: IIDXSoundMode.Wasapi,
             asioDevice: devices[0],
             useGsm: true,
@@ -94,13 +99,15 @@ export class IIDX {
             this._config.value = JSON.parse(configJson);
         }
 
-        if (!this._config.value || 
-            this._config.value.asioDevice == undefined || 
+        if (!this._config.value ||
+            this._config.value.asioDevice == undefined ||
             this._config.value.displayMode === undefined ||
+            this._config.value.resolution === undefined ||
             this._config.value.soundMode === undefined ||
-            this._config.value.useGsm === undefined || 
+            this._config.value.useGsm === undefined ||
             this._config.value.language === undefined
         ) {
+            window.laochan.alert.show('IIDX 设置已被重置, 请前往额外设置重新设置', '#B64040', 2000);
             await this.resetConfig();
         }
 
@@ -121,6 +128,9 @@ export class IIDX {
             window.laochan.setParam('IIDX_SOUND_MODE', JSON.stringify(config.soundMode)),
             window.laochan.setParam('IIDX_USE_GSM', JSON.stringify(+config.useGsm)),
             window.laochan.setParam('IIDX_LANGUAGE', JSON.stringify(+config.language)),
+
+            window.laochan.setParam('IIDX_RESOLTION_W', JSON.stringify(config.resolution.w)),
+            window.laochan.setParam('IIDX_RESOLTION_H', JSON.stringify(config.resolution.h)),
         ]);
     }
 
@@ -155,6 +165,45 @@ export class IIDX {
 
         window.laochan.shellExecute(installPath + '\\launcher\\modules\\bm2dx_updater.exe');
     }
+
+    async generateBat() {
+        const config = this._config.value;
+        if (!config) {
+            return '';
+        }
+
+        const selfPath = await window.laochan.selfPath();
+
+        const result = dedent`
+            REM generated by Laochan Launcher
+
+            ${await launcher.exportBatParams()}
+
+            REM IIDX Options
+            SET IIDX_ASIO_DEVICE="${config.asioDevice}"
+            SET IIDX_DISPLAY_MODE=${config.displayMode}
+            SET IIDX_SOUND_MODE=${config.soundMode}
+            SET IIDX_USE_GSM=${+config.useGsm}
+            SET IIDX_LANGUAGE=${+config.language}
+            SET IIDX_RESOLTION_W=${config.resolution.w}
+            SET IIDX_RESOLTION_H=${config.resolution.h}
+
+            start "" "${selfPath}" "-iidx"
+        `;
+
+        const handle = await window.showSaveFilePicker({
+            suggestedName: 'laochan-iidx.bat',
+            startIn: 'desktop',
+            types: [{
+                description: 'Batch File',
+                accept: { 'application/bat': ['.bat', '.cmd'] }
+            }]
+        })
+
+        const writable = await handle.createWritable();
+        await writable.write(result);
+        await writable.close();
+    }
 };
 
 export const iidx = new IIDX();

assets/launcher-ui/src/modules/launcher.ts

@@ -1,3 +1,4 @@
+import dedent from "dedent";
 import { ref } from "vue";
 
 export interface LauncherConfig {
@@ -80,6 +81,19 @@ export class Launcher {
         await window.laochan.setParam('LAOCHAN_ENABLE_CONSOLE', JSON.stringify(+this._config.value.enableConsole));
         await window.laochan.setParam('LAOCHAN_ENABLE_STEAM_OVERLAY', JSON.stringify(+this._config.value.enableSteamOverlay));
     }
+
+    async exportBatParams() {
+        if (!this._config.value)
+            return;
+
+        return dedent`
+            REM Laochan Launcher Params
+            SET LAOCHAN_TOKEN="${this._config.value.token}"
+            SET LAOCHAN_SERVER_URL="${this._config.value.serverUrl}"
+            SET LAOCHAN_ENABLE_CONSOLE=${+this._config.value.enableConsole}
+            SET LAOCHAN_ENABLE_STEAM_OVERLAY=${+this._config.value.enableSteamOverlay}
+        `
+    }
 }
 
 export const launcher = new Launcher();