feat(appearance): accent color, corners, wide layout and game art background

src/utils/appearance.test.js

@@ -0,0 +1,52 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it} from 'vitest';
+import {
+    applyAppearance,
+    cacheAppearance,
+    DEFAULT_APPEARANCE,
+    normalizeAppearance,
+    readCachedAppearance,
+} from './appearance.js';
+
+describe('normalizeAppearance', () => {
+    it('keeps known values', () => {
+        const appearance = {accent: 'blue', corners: 'round', wideLayout: true, backgroundAppid: 620};
+
+        expect(normalizeAppearance(appearance)).toEqual(appearance);
+    });
+
+    it('replaces unknown or missing values with the defaults', () => {
+        expect(normalizeAppearance({accent: 'red;x', corners: 'pointy', wideLayout: 'yes', backgroundAppid: -1}))
+            .toEqual(DEFAULT_APPEARANCE);
+        expect(normalizeAppearance(null)).toEqual(DEFAULT_APPEARANCE);
+        expect(normalizeAppearance({backgroundAppid: 1.5})).toEqual(DEFAULT_APPEARANCE);
+    });
+});
+
+describe('appearance cache', () => {
+    afterEach(() => localStorage.clear());
+
+    it('reads back what was cached', () => {
+        cacheAppearance({accent: 'green', corners: 'sharp', wideLayout: false, backgroundAppid: null});
+
+        expect(readCachedAppearance()).toEqual({accent: 'green', corners: 'sharp', wideLayout: false, backgroundAppid: null});
+    });
+
+    it('falls back to the defaults for a broken or empty cache', () => {
+        expect(readCachedAppearance()).toEqual(DEFAULT_APPEARANCE);
+
+        localStorage.setItem('tbp_appearance', '{broken');
+        expect(readCachedAppearance()).toEqual(DEFAULT_APPEARANCE);
+    });
+});
+
+describe('applyAppearance', () => {
+    it('sets the presets as data attributes for the CSS', () => {
+        const root = document.createElement('html');
+
+        applyAppearance({accent: 'orange', corners: 'round', wideLayout: true, backgroundAppid: 620}, root);
+
+        expect(root.dataset.accent).toBe('orange');
+        expect(root.dataset.corners).toBe('round');
+    });
+});