preferences-window.svelte RawHistoryFolder

1<script lang="ts">
2	import XpWindow from './xp-window.svelte';
3	import { desktop } from '$lib/states/desktop.svelte';
4	import {
5		soundsEnabled,
6		setSoundsEnabled,
7		playSound,
8		unlockAudio,
9		type AimSound
10	} from '$lib/aim/sounds.svelte';
11
12	const sounds: { label: string; name: AimSound }[] = [
13		{ label: "Porte qui s'ouvre", name: 'doorOpen' },
14		{ label: 'Porte qui claque', name: 'doorSlam' },
15		{ label: 'Message reçu', name: 'imReceive' },
16		{ label: 'Message envoyé', name: 'imSend' },
17		{ label: 'Bienvenue', name: 'welcome' },
18		{ label: 'Modem 56k', name: 'modem' }
19	];
20	const soundOn = $derived(soundsEnabled());
21	function changeSound(event: Event) {
22		const on = (event.currentTarget as HTMLInputElement).checked;
23		setSoundsEnabled(on);
24		if (on) unlockAudio();
25	}
26	function changeTimestamps(event: Event) {
27		desktop.setShowTimestamps((event.currentTarget as HTMLInputElement).checked);
28	}
29</script>
30
31<XpWindow id="preferences" width={380} height={320} resizableWindow={false}>
32	<div class="content">
33		<label
34			><input type="checkbox" checked={soundOn} onchange={changeSound} /> Sons activés (porte, ding…)</label
35		>
36		<div class="sound-list">
37			{#each sounds as sound (sound.name)}
38				<div class="sound-row">
39					<span>{sound.label}</span><button
40						disabled={!soundOn}
41						onclick={() => {
42							unlockAudio();
43							playSound(sound.name);
44						}}>Tester</button
45					>
46				</div>
47			{/each}
48		</div>
49		<label
50			><input type="checkbox" checked={desktop.showTimestamps} onchange={changeTimestamps} /> Afficher
51			les horodatages</label
52		>
53		<div class="actions"><button onclick={() => desktop.close('preferences')}>Fermer</button></div>
54	</div>
55</XpWindow>
56
57<style>
58	.content {
59		display: flex;
60		flex-direction: column;
61		gap: 8px;
62		height: 100%;
63		overflow: auto;
64		font:
65			11px Tahoma,
66			'Pixelated MS Sans Serif',
67			sans-serif;
68	}
69	.sound-list {
70		display: grid;
71		gap: 3px;
72	}
73	.sound-row {
74		display: flex;
75		align-items: center;
76		justify-content: space-between;
77	}
78	.actions {
79		margin-top: auto;
80		align-self: flex-end;
81	}
82</style>