Create testing specific vite config, add multi font support, bugfixes

package.json

@@ -5,6 +5,7 @@
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
+		"build:test": "vite build --config vite.config.test.ts",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",

playwright.config.ts

@@ -6,7 +6,7 @@ const config: PlaywrightTestConfig = {
 		timezoneId: 'Europe/Amsterdam'
 	},
 	webServer: {
-		command: 'npm run build && npm run preview',
+		command: 'npm run build:test && npm run preview',
 		port: 4173
 	},
 	reporter: process.env.CI ? 'github' : 'list',

src/lib/components/settings/DisplaySettings.svelte

@@ -20,14 +20,19 @@
 
 	const setTextColor = () => {
 		$settings.invertedColor = !$settings.invertedColor;
-		$settings.fgColor = $settings.invertedColor ? 65535 : 0;
-		$settings.bgColor = $settings.invertedColor ? 0 : 65535;
 	};
 
 	const textColorOptions: [string, boolean][] = [
 		[$_('colors.black') + ' on ' + $_('colors.white'), false],
 		[$_('colors.white') + ' on ' + $_('colors.black'), true]
 	];
+
+	const fontPreferenceOptions: [string, string][] = $settings.availableFonts?.map((font) => [
+		$_(`fonts.${font}`) !== `fonts.${font}`
+			? $_(`fonts.${font}`)
+			: font.charAt(0).toUpperCase() + font.slice(1),
+		font
+	]);
 </script>
 
 <Row>
@@ -45,6 +50,14 @@
 			on:change={setTextColor}
 		/>
 
+		<SettingsSelect
+			id="fontName"
+			label={$_('section.settings.fontName')}
+			bind:value={$settings.fontName}
+			options={fontPreferenceOptions}
+			size={$uiSettings.inputSize}
+		/>
+
 		<SettingsInput
 			id="timePerScreen"
 			label={$_('section.settings.timePerScreen')}

src/lib/locales/de.json

@@ -67,7 +67,8 @@
 			"dataSource": {
 				"nostr": "Nostr-Verlag",
 				"custom": "Benutzerdefinierter dataquelle"
-			}
+			},
+			"fontName": "Schriftart"
 		},
 		"control": {
 			"systemInfo": "Systeminfo",

src/lib/locales/en.json

@@ -84,7 +84,8 @@
 			},
 			"thirdPartySource": "Use mempool.space/coincap.io",
 			"ceDisableSSL": "Disable SSL",
-			"ceEndpoint": "Endpoint hostname"
+			"ceEndpoint": "Endpoint hostname",
+			"fontName": "Font"
 		},
 		"control": {
 			"systemInfo": "System info",

src/lib/locales/es.json

@@ -66,7 +66,8 @@
 			"dataSource": {
 				"nostr": "editorial nostr",
 				"custom": "Punto final personalizado"
-			}
+			},
+			"fontName": "Fuente"
 		},
 		"control": {
 			"turnOff": "Apagar",

src/lib/locales/nl.json

@@ -58,7 +58,8 @@
 			"hideAll": "Alles verbergen",
 			"flOffWhenDark": "Displaylicht uit als het donker is",
 			"luxLightToggleText": "Stel in op 0 om uit te schakelen",
-			"verticalDesc": "Verticale schermbeschrijving"
+			"verticalDesc": "Verticale schermbeschrijving",
+			"fontName": "Lettertype"
 		},
 		"control": {
 			"systemInfo": "Systeeminformatie",

src/routes/+page.svelte

@@ -105,7 +105,6 @@
 		setupObserver();
 
 		const connectEventSource = () => {
-			console.log('Connecting to EventSource');
 			const evtSource = new EventSource(`${PUBLIC_BASE_URL}/events`);
 
 			evtSource.addEventListener('status', (e) => {

src/routes/Settings.svelte

@@ -114,9 +114,13 @@
 		<CardHeader>
 			<div class="float-end">
 				<small>
-					<button type="button" on:click={showAll}>{$_('section.settings.showAll')}</button>
+					<button type="button" on:click={showAll} id="showAllBtn"
+						>{$_('section.settings.showAll')}</button
+					>
 					|
-					<button type="button" on:click={hideAll}>{$_('section.settings.hideAll')}</button>
+					<button type="button" on:click={hideAll} id="hideAllBtn"
+						>{$_('section.settings.hideAll')}</button
+					>
 				</small>
 			</div>
 			<CardTitle>{$_('section.settings.title')}</CardTitle>

src/routes/Status.svelte

@@ -158,7 +158,7 @@
 					<hr />
 					{#if $status.data}
 						<section class={lightMode ? 'lightMode' : 'darkMode'} style="position: relative;">
-							{#if $status.isUpdating === false && $status.isFake === false}
+							{#if $status.isUpdating === false && ($status.isFake ?? false) === false}
 								<div class="connection-lost-overlay">
 									<div class="overlay-content">
 										<i class="bi bi-wifi-off"></i>

tests/shared.ts

@@ -108,8 +108,10 @@ export const settingsJson = {
 		'ckpool',
 		'eu_ckpool'
 	],
+	availableFonts: ['antonio', 'oswald'],
 	invertedColor: false,
-	isLoaded: true
+	isLoaded: true,
+	isFake: true
 };
 
 export const latestReleaseFake = {
@@ -167,16 +169,31 @@ export const initMock = async ({ page }) => {
 		await route.fulfill({ json: settingsJson });
 	});
 
-	await page.route('**/events', (route) => {
+	await page.route('**/events', async (route) => {
 		const newStatus = statusJson;
 		newStatus.data = ['BLOCK/HEIGHT', '8', '0', '0', '8', '1', '5'];
 		newStatus.isUpdating = true;
 
-		// Respond with a custom SSE message
+		// Format the SSE message correctly
-		route.fulfill({
+		const sseMessage = `data: ${JSON.stringify(newStatus)}\n\n`;
+
+		// Create a readable stream for SSE
+		const stream = new ReadableStream({
+			start(controller) {
+				controller.enqueue(new TextEncoder().encode(sseMessage));
+				// Keep the connection open
+				// controller.close(); // Don't close if you want to send more events
+			}
+		});
+
+		await route.fulfill({
 			status: 200,
-			contentType: 'text/event-stream',
+			headers: {
-			json: `${JSON.stringify(newStatus)}\n\n`
+				'Content-Type': 'text/event-stream',
+				'Cache-Control': 'no-cache',
+				Connection: 'keep-alive'
+			},
+			body: stream
 		});
 	});
 

vite.config.test.ts

@@ -0,0 +1,18 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+	build: {
+		sourcemap: true,
+		minify: false,
+		rollupOptions: {
+			output: {
+				manualChunks: undefined // Disable code splitting
+			}
+		}
+	},
+	test: {
+		include: ['tests/**/*.{test,spec}.{js,ts}']
+	}
+});