feat: pass profile settings to launch scripts

Add launcher profile settings for username and language, then thread those
values into the Windows script launch path. The game setup, game start, and
server start scripts now share the same argument shape:

- game path: local
- game id
- language: en or de
- player name

Expose a local can_host_server flag in the games payload by checking for
server_start.cmd in an installed game's root directory. The detail modal uses
that flag to show Start Server only for installed games with the script, and
the new start_server command invokes server_start.cmd with the same sanitized
settings used by game_setup.cmd and game_start.cmd.

Test Plan:
- just fmt
- just test
- just frontend-test
- just build
- just clippy
- git diff --check

Refs: design/README.md
This commit is contained in:
2026-05-21 09:40:23 +02:00
parent 91c709960a
commit 4f34c4a249
9 changed files with 418 additions and 27 deletions
@@ -21,6 +21,15 @@ export const Icon = {
<path d="M4 2.5v11l10-5.5z" />
</svg>
),
server: (p: Props) => (
<svg viewBox="0 0 16 16" width="13" height="13" strokeWidth={1.5} {...baseStroke} {...p}>
<rect x="2" y="3" width="12" height="4.5" rx="1" />
<rect x="2" y="8.5" width="12" height="4.5" rx="1" />
<circle cx="4.6" cy="5.25" r=".55" fill="currentColor" stroke="none" />
<circle cx="4.6" cy="10.75" r=".55" fill="currentColor" stroke="none" />
<path d="M7 5.25h4.5M7 10.75h4.5" />
</svg>
),
install: (p: Props) => (
<svg viewBox="0 0 16 16" width="12" height="12" strokeWidth={1.7} {...baseStroke} {...p}>
<path d="M8 2v8" />
@@ -16,6 +16,7 @@ interface Props {
onUninstall: (game: Game) => void;
onRemoveDownload: (game: Game) => void;
onCancelDownload: (game: Game) => void;
onStartServer: (game: Game) => void;
onViewFiles: (game: Game) => void;
}
@@ -45,6 +46,7 @@ export const GameDetailModal = ({
onUninstall,
onRemoveDownload,
onCancelDownload,
onStartServer,
onViewFiles,
}: Props) => {
const tags = tagsFromGame(game);
@@ -116,6 +118,16 @@ export const GameDetailModal = ({
onClick={() => onPrimary(game)}
onCancelDownload={onCancelDownload}
/>
{game.installed && game.can_host_server === true && (
<button
type="button"
className="act-btn act-lg act-server"
onClick={() => onStartServer(game)}
>
<Icon.server />
<span className="act-label">Start Server</span>
</button>
)}
{game.installed && (
<button
type="button"
@@ -8,7 +8,8 @@ import {
ASPECT_OPTIONS,
BG_OPTIONS,
DENSITY_OPTIONS,
UISettings,
LANGUAGE_OPTIONS,
type UISettings,
} from '../../hooks/useSettings';
interface Props {
@@ -33,6 +34,26 @@ const Row = ({ label, hint, children }: RowProps) => (
</div>
);
interface TextInputProps {
value: string;
placeholder: string;
maxLength: number;
onChange: (value: string) => void;
}
const SettingsTextInput = ({ value, placeholder, maxLength, onChange }: TextInputProps) => (
<div className="settings-text">
<input
type="text"
value={value}
placeholder={placeholder}
maxLength={maxLength}
spellCheck={false}
onChange={(e) => onChange(e.target.value)}
/>
</div>
);
export const SettingsDialog = ({ settings, onChange, onClose }: Props) => (
<Modal onClose={onClose} className="settings-modal">
<div className="settings-head">
@@ -48,6 +69,25 @@ export const SettingsDialog = ({ settings, onChange, onClose }: Props) => (
</div>
<div className="settings-body">
<section className="settings-section">
<div className="settings-section-title">Profile</div>
<Row label="Username" hint="Shown to other players on the LAN">
<SettingsTextInput
value={settings.username}
placeholder="Enter a username"
maxLength={24}
onChange={(v) => onChange('username', v)}
/>
</Row>
<Row label="Language" hint="Interface language">
<SegmentedRadio
value={settings.language}
options={LANGUAGE_OPTIONS}
onChange={(v) => onChange('language', v)}
/>
</Row>
</section>
<section className="settings-section">
<div className="settings-section-title">Appearance</div>
<Row label="Accent color" hint="Used for primary actions and highlights">
@@ -1,10 +1,12 @@
import { useCallback } from 'react';
import { invoke } from '@tauri-apps/api/core';
import { UseGamesResult } from './useGames';
import { type UseGamesResult } from './useGames';
import { type UISettings } from './useSettings';
export interface GameActions {
play: (id: string) => Promise<void>;
startServer: (id: string) => Promise<void>;
install: (id: string) => Promise<void>;
update: (id: string) => Promise<void>;
uninstall: (id: string) => Promise<void>;
@@ -19,14 +21,33 @@ export interface GameActions {
* are marked as "checking peers" until the backend emits an authoritative
* operation snapshot; cancellation waits for the backend to clear that snapshot.
*/
export const useGameActions = (games: UseGamesResult): GameActions => {
export const useGameActions = (
games: UseGamesResult,
settings: Pick<UISettings, 'language' | 'username'>,
): GameActions => {
const play = useCallback(async (id: string) => {
try {
await invoke('run_game', { id });
await invoke('run_game', {
id,
language: settings.language,
username: settings.username,
});
} catch (err) {
console.error('run_game failed:', err);
}
}, []);
}, [settings.language, settings.username]);
const startServer = useCallback(async (id: string) => {
try {
await invoke('start_server', {
id,
language: settings.language,
username: settings.username,
});
} catch (err) {
console.error('start_server failed:', err);
}
}, [settings.language, settings.username]);
const install = useCallback(async (id: string) => {
try {
@@ -83,5 +104,5 @@ export const useGameActions = (games: UseGamesResult): GameActions => {
}
}, []);
return { play, install, update, uninstall, removeDownload, cancelDownload, viewFiles };
return { play, startServer, install, update, uninstall, removeDownload, cancelDownload, viewFiles };
};
@@ -1,7 +1,7 @@
import { useCallback, useEffect, useState } from 'react';
import { load } from '@tauri-apps/plugin-store';
import { GameFilter, GameSort } from '../lib/types';
import { type GameFilter, type GameSort, type LauncherLanguage } from '../lib/types';
import { SETTINGS_FILE, SETTINGS_FILE_OPTIONS, UI_SETTINGS_KEY } from '../lib/store';
export type Density = 'compact' | 'normal' | 'large';
@@ -15,10 +15,14 @@ export interface UISettings {
aspect: CoverAspect;
sort: GameSort;
filter: GameFilter;
username: string;
language: LauncherLanguage;
}
type StoredGameSort = GameSort | 'size';
type StoredUISettings = Partial<Omit<UISettings, 'sort'> & { sort: StoredGameSort }>;
const DEFAULT_USERNAME = 'Commander';
const MAX_USERNAME_LENGTH = 24;
export const ACCENT_OPTIONS = [
{ value: '#3b82f6', label: 'Blue' },
@@ -47,6 +51,18 @@ export const ASPECT_OPTIONS: ReadonlyArray<{ value: CoverAspect; label: string }
{ value: 'banner', label: 'Banner' },
];
export const LANGUAGE_OPTIONS: ReadonlyArray<{ value: LauncherLanguage; label: string }> = [
{ value: 'en', label: 'English' },
{ value: 'de', label: 'Deutsch' },
];
const defaultLanguage = (): LauncherLanguage => {
if (typeof navigator !== 'undefined' && navigator.language.toLowerCase().startsWith('de')) {
return 'de';
}
return 'en';
};
export const DEFAULT_SETTINGS: UISettings = {
accent: '#3b82f6',
bg: 'gradient',
@@ -54,6 +70,8 @@ export const DEFAULT_SETTINGS: UISettings = {
aspect: 'square',
sort: 'status',
filter: 'local',
username: DEFAULT_USERNAME,
language: defaultLanguage(),
};
const sanitize = (raw: StoredUISettings | undefined): UISettings => ({
@@ -63,12 +81,23 @@ const sanitize = (raw: StoredUISettings | undefined): UISettings => ({
aspect: raw?.aspect ?? DEFAULT_SETTINGS.aspect,
sort: sanitizeSort(raw?.sort),
filter: raw?.filter ?? DEFAULT_SETTINGS.filter,
username: sanitizeUsername(raw?.username),
language: sanitizeLanguage(raw?.language),
});
const sanitizeSort = (sort: StoredGameSort | undefined): GameSort => (
sort === 'size' ? 'sizeDesc' : sort ?? DEFAULT_SETTINGS.sort
);
const sanitizeLanguage = (language: LauncherLanguage | undefined): LauncherLanguage => (
language === 'de' || language === 'en' ? language : DEFAULT_SETTINGS.language
);
const sanitizeUsername = (username: string | undefined): string => {
const trimmed = username?.trim() ?? '';
return trimmed ? Array.from(trimmed).slice(0, MAX_USERNAME_LENGTH).join('') : DEFAULT_USERNAME;
};
export interface UseSettings {
settings: UISettings;
set: <K extends keyof UISettings>(key: K, value: UISettings[K]) => void;
@@ -58,6 +58,7 @@ export interface Game {
status_level?: StatusLevel;
download_progress?: DownloadProgress;
peer_count: number;
can_host_server?: boolean;
}
export interface ActiveOperation {
@@ -78,3 +79,6 @@ export type GameSort = 'az' | 'sizeDesc' | 'sizeAsc' | 'status';
/** Visual state of a card. Derived from backend operation status and local flags. */
export type DerivedState = 'installed' | 'local' | 'downloading' | 'none' | 'busy';
/** Two-character language code passed through to game scripts. */
export type LauncherLanguage = 'en' | 'de';
@@ -807,6 +807,20 @@
background: rgba(255, 255, 255, 0.12);
border-color: var(--bd-3);
}
.act-server {
color: var(--t-1);
background: color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, 0.04));
border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.act-server:hover:not(:disabled) {
background: color-mix(in srgb, var(--accent) 22%, rgba(255, 255, 255, 0.04));
border-color: color-mix(in srgb, var(--accent) 75%, transparent);
filter: none;
}
.act-server svg {
color: var(--accent);
}
.act-busy {
color: var(--t-1);
background: rgba(255, 255, 255, 0.06);
@@ -1475,6 +1489,43 @@
filter: brightness(1.1);
}
/* Settings: text input */
.settings-text {
display: inline-flex;
align-items: center;
width: 220px;
height: 36px;
padding: 0 12px;
background: var(--bg-3);
border: 1px solid var(--bd-1);
border-radius: 8px;
transition:
background 0.15s,
border-color 0.15s,
box-shadow 0.15s;
}
.settings-text:focus-within {
background: var(--bg-2);
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.settings-text input {
min-width: 0;
flex: 1;
background: transparent;
border: 0;
outline: 0;
color: var(--t-1);
font: inherit;
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0;
}
.settings-text input::placeholder {
color: var(--t-3);
font-weight: 500;
}
/* Settings: color swatches */
.swatch-row {
display: inline-flex;
@@ -47,7 +47,7 @@ export const MainWindow = () => {
const { settings, set: setSetting } = useSettings();
const { gameDir, setGameDir, rescan } = useGameDirectory();
const games = useGames(rescan);
const actions = useGameActions(games);
const actions = useGameActions(games, settings);
const thumbnails = useThumbnails();
const [openGameId, setOpenGameId] = useState<string | null>(null);
@@ -172,6 +172,7 @@ export const MainWindow = () => {
onUninstall={handleUninstall}
onRemoveDownload={handleRemoveDownload}
onCancelDownload={(g) => actions.cancelDownload(g.id)}
onStartServer={(g) => actions.startServer(g.id)}
onViewFiles={(g) => actions.viewFiles(g.id)}
/>
)}