This commit is contained in:
2026-03-05 22:30:37 +02:00
parent 817bbfb44c
commit 637b5f0167
12 changed files with 1022 additions and 790 deletions

View File

@@ -13,7 +13,6 @@ const SPECIAL_CARD_ORDER = {
'☕': 3,
};
const themeToggleBtn = document.getElementById('theme-toggle');
const roomConfigForm = document.getElementById('room-config-form');
const statusLine = document.getElementById('config-status');
const scaleSelect = document.getElementById('estimation-scale');
@@ -29,14 +28,14 @@ const usernameInput = document.getElementById('username');
const savePresetButton = document.getElementById('save-preset');
const pickerToggleButton = document.getElementById('preset-picker-toggle');
const shareDeckButton = document.getElementById('share-deck');
const presetPicker = document.getElementById('preset-picker');
const presetModalOverlay = document.getElementById('preset-modal-overlay');
const presetModalCloseButton = document.getElementById('preset-modal-close');
const presetModalDoneButton = document.getElementById('preset-modal-done');
const presetList = document.getElementById('preset-list');
const importToggleButton = document.getElementById('import-toggle');
const importPane = document.getElementById('import-pane');
const importInput = document.getElementById('import-b64');
const importApplyButton = document.getElementById('import-apply');
let isDarkMode = false;
let nextCardID = 1;
let currentCards = [];
let draggingCardID = '';
@@ -48,17 +47,6 @@ if (savedUsername && !usernameInput.value) {
usernameInput.value = savedUsername;
}
themeToggleBtn.addEventListener('click', () => {
isDarkMode = !isDarkMode;
if (isDarkMode) {
document.documentElement.setAttribute('data-theme', 'dark');
themeToggleBtn.textContent = 'Light Mode';
return;
}
document.documentElement.removeAttribute('data-theme');
themeToggleBtn.textContent = 'Dark Mode';
});
function parseNumericCard(value) {
if (!/^-?\d+(\.\d+)?$/.test(value)) {
@@ -341,13 +329,13 @@ function renderPresetList() {
}
function showPresetPicker() {
presetPicker.classList.remove('hidden');
presetModalOverlay.classList.remove('hidden');
pickerToggleButton.setAttribute('aria-expanded', 'true');
renderPresetList();
}
function hidePresetPicker() {
presetPicker.classList.add('hidden');
presetModalOverlay.classList.add('hidden');
pickerToggleButton.setAttribute('aria-expanded', 'false');
}
@@ -414,7 +402,7 @@ savePresetButton.addEventListener('click', () => {
});
pickerToggleButton.addEventListener('click', () => {
if (presetPicker.classList.contains('hidden')) {
if (presetModalOverlay.classList.contains('hidden')) {
showPresetPicker();
return;
}
@@ -464,20 +452,15 @@ importApplyButton.addEventListener('click', () => {
}
});
document.addEventListener('click', (event) => {
const target = event.target;
if (!(target instanceof Element)) {
return;
presetModalOverlay.addEventListener('click', (event) => {
if (event.target === presetModalOverlay) {
hidePresetPicker();
}
if (presetPicker.classList.contains('hidden')) {
return;
}
if (presetPicker.contains(target) || pickerToggleButton.contains(target)) {
return;
}
hidePresetPicker();
});
presetModalCloseButton.addEventListener('click', hidePresetPicker);
presetModalDoneButton.addEventListener('click', hidePresetPicker);
customCardInput.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
event.preventDefault();

View File

@@ -3,7 +3,6 @@ const USERNAME_KEY = 'scrumPoker.username';
const roomID = document.body.dataset.roomId;
const params = new URLSearchParams(window.location.search);
const themeToggleBtn = document.getElementById('theme-toggle');
const roomSkeleton = document.getElementById('room-skeleton');
const roomGrid = document.getElementById('room-grid');
const roomTitle = document.getElementById('room-title');
@@ -28,8 +27,6 @@ const joinRoleInput = document.getElementById('join-role');
const joinPasswordInput = document.getElementById('join-password');
const joinAdminTokenInput = document.getElementById('join-admin-token');
const joinError = document.getElementById('join-error');
let isDarkMode = false;
let participantID = params.get('participantId') || '';
let adminToken = params.get('adminToken') || '';
let eventSource = null;
@@ -38,17 +35,6 @@ const savedUsername = localStorage.getItem(USERNAME_KEY) || '';
joinUsernameInput.value = savedUsername;
joinAdminTokenInput.value = adminToken;
themeToggleBtn.addEventListener('click', () => {
isDarkMode = !isDarkMode;
if (isDarkMode) {
document.documentElement.setAttribute('data-theme', 'dark');
themeToggleBtn.textContent = 'Light Mode';
return;
}
document.documentElement.removeAttribute('data-theme');
themeToggleBtn.textContent = 'Dark Mode';
});
function setJoinError(message) {
if (!message) {

75
static/js/ui-controls.js Normal file
View File

@@ -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();
}
})();