Update

2026-03-05 22:30:37 +02:00
parent 817bbfb44c
commit 637b5f0167
12 changed files with 1022 additions and 790 deletions
--- a/static/js/ui-controls.js
+++ b/static/js/ui-controls.js
@@ -0,0 +1,75 @@
+(() => {
+    const THEME_KEY = 'scrumPoker.ui.theme';
+    const MODE_KEY = 'scrumPoker.ui.mode';
+    const DEFAULT_THEME = 'win98';
+
+    function applyTheme(theme) {
+        const normalized = theme || DEFAULT_THEME;
+        document.documentElement.setAttribute('data-ui-theme', normalized);
+    }
+
+    function applyMode(mode) {
+        if (mode === 'dark') {
+            document.documentElement.setAttribute('data-theme', 'dark');
+            return;
+        }
+        document.documentElement.removeAttribute('data-theme');
+    }
+
+    function getCurrentMode() {
+        return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
+    }
+
+    function syncControls() {
+        const theme = document.documentElement.getAttribute('data-ui-theme') || DEFAULT_THEME;
+        const mode = getCurrentMode();
+
+        document.querySelectorAll('[data-role="theme-picker"]').forEach((el) => {
+            el.value = theme;
+        });
+
+        document.querySelectorAll('[data-role="mode-toggle"]').forEach((el) => {
+            el.textContent = mode === 'dark' ? 'Light Mode' : 'Dark Mode';
+        });
+    }
+
+    function initUIControls() {
+        if (window.__uiControlsInitialized) {
+            syncControls();
+            return;
+        }
+        window.__uiControlsInitialized = true;
+
+        const savedTheme = localStorage.getItem(THEME_KEY) || DEFAULT_THEME;
+        const savedMode = localStorage.getItem(MODE_KEY) || 'light';
+        applyTheme(savedTheme);
+        applyMode(savedMode);
+        syncControls();
+
+        document.querySelectorAll('[data-role="theme-picker"]').forEach((picker) => {
+            picker.addEventListener('change', (event) => {
+                const value = event.target.value || DEFAULT_THEME;
+                localStorage.setItem(THEME_KEY, value);
+                applyTheme(value);
+                syncControls();
+            });
+        });
+
+        document.querySelectorAll('[data-role="mode-toggle"]').forEach((button) => {
+            button.addEventListener('click', () => {
+                const next = getCurrentMode() === 'dark' ? 'light' : 'dark';
+                localStorage.setItem(MODE_KEY, next);
+                applyMode(next);
+                syncControls();
+            });
+        });
+    }
+
+    window.initUIControls = initUIControls;
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initUIControls, { once: true });
+    } else {
+        initUIControls();
+    }
+})();