1437 lines
69 KiB
JavaScript
1437 lines
69 KiB
JavaScript
let currentItems = []; // Holds the original list of items provided by the user
|
|
let displayedItems = []; // Holds the items currently displayed on the board
|
|
let notificationTimeout = null; // To manage hiding notifications
|
|
|
|
// --- localStorage Keys ---
|
|
const LS_BOARD_SIZE = 'beango_boardSize';
|
|
const LS_CELL_ITEMS = 'beango_cellItems'; // Original items from textarea/file
|
|
const LS_DISPLAYED_ITEMS = 'beango_displayedItems'; // Items currently shown on the board
|
|
const LS_MARKED_INDICES = 'beango_markedIndices';
|
|
const LS_CONFIG_OPEN = 'beango_configOpen'; // Changed from minimized
|
|
const LS_BACKGROUND_TYPE = 'beango_backgroundType'; // 'solid' or 'gradient'
|
|
const LS_SOLID_COLOR = 'beango_solidColor';
|
|
const LS_SOLID_COLOR_OPACITY = 'beango_solidColorOpacity'; // New
|
|
const LS_GRADIENT_COLOR_1 = 'beango_gradientColor1';
|
|
const LS_GRADIENT_COLOR_1_OPACITY = 'beango_gradientColor1Opacity'; // New
|
|
const LS_GRADIENT_COLOR_2 = 'beango_gradientColor2';
|
|
const LS_GRADIENT_COLOR_2_OPACITY = 'beango_gradientColor2Opacity'; // New
|
|
const LS_GRADIENT_DIRECTION = 'beango_gradientDirection';
|
|
const LS_ORIGINAL_ITEMS = 'beango_originalItems'; // User's raw input
|
|
const LS_HEADER_TEXT = 'beango_headerText';
|
|
const LS_HEADER_IMAGE_URL = 'beango_headerImageUrl';
|
|
const LS_HEADER_TEXT_COLOR = 'beango_headerTextColor';
|
|
const LS_HEADER_TEXT_COLOR_OPACITY = 'beango_headerTextColorOpacity'; // New
|
|
const LS_MARKED_COLOR = 'beango_markedColor';
|
|
const LS_MARKED_COLOR_OPACITY = 'beango_markedColorOpacity'; // New (replaces LS_MARKED_OPACITY)
|
|
const LS_MARKED_IMAGE_URL = 'beango_markedImageUrl';
|
|
const LS_MARKED_IMAGE_OPACITY = 'beango_markedImageOpacity'; // New
|
|
const LS_CELL_BORDER_COLOR = 'beango_cellBorderColor';
|
|
const LS_CELL_BORDER_OPACITY = 'beango_cellBorderOpacity'; // New
|
|
const LS_CELL_BG_COLOR = 'beango_cellBgColor';
|
|
const LS_CELL_BG_OPACITY = 'beango_cellBgOpacity'; // New
|
|
const LS_CELL_BG_IMAGE_URL = 'beango_cellBgImageUrl';
|
|
const LS_CELL_BG_IMAGE_OPACITY = 'beango_cellBgImageOpacity'; // New
|
|
const LS_MARKED_BORDER_COLOR = 'beango_markedBorderColor';
|
|
const LS_MARKED_BORDER_OPACITY = 'beango_markedBorderOpacity'; // New
|
|
const LS_BOARD_BG_COLOR = 'beango_boardBgColor';
|
|
const LS_BOARD_BG_COLOR_OPACITY = 'beango_boardBgColorOpacity'; // New (replaces LS_BOARD_BG_OPACITY)
|
|
const LS_BOARD_BG_IMAGE_URL = 'beango_boardBgImageUrl';
|
|
|
|
// --- Default Values ---
|
|
const DEFAULT_SOLID_COLOR = '#ff7e5f'; // Default to first color of gradient
|
|
const DEFAULT_SOLID_COLOR_OPACITY = 100; // New
|
|
const DEFAULT_GRADIENT_COLOR_1 = '#ff7e5f'; // From main page gradient
|
|
const DEFAULT_GRADIENT_COLOR_1_OPACITY = 100; // New
|
|
const DEFAULT_GRADIENT_COLOR_2 = '#feb47b'; // From main page gradient
|
|
const DEFAULT_GRADIENT_COLOR_2_OPACITY = 100; // New
|
|
const DEFAULT_GRADIENT_DIRECTION = '135deg'; // From main page gradient
|
|
const DEFAULT_HEADER_TEXT = 'Beango!'; // REVERTED default back to Beango!
|
|
const DEFAULT_HEADER_IMAGE_URL = ''; // No default image
|
|
const DEFAULT_HEADER_TEXT_COLOR = '#15803d'; // Tailwind green-700 (approx)
|
|
const DEFAULT_HEADER_TEXT_COLOR_OPACITY = 100; // New
|
|
const DEFAULT_MARKED_COLOR = '#fde047'; // Default yellow
|
|
const DEFAULT_MARKED_COLOR_OPACITY = 80; // New (replaces DEFAULT_MARKED_OPACITY)
|
|
const DEFAULT_MARKED_IMAGE_URL = '';
|
|
const DEFAULT_MARKED_IMAGE_OPACITY = 100; // New
|
|
const DEFAULT_CELL_BORDER_COLOR = '#8B4513'; // Default brown
|
|
const DEFAULT_CELL_BORDER_OPACITY = 100; // New
|
|
const DEFAULT_CELL_BG_COLOR = '#F5F5DC'; // Default beige
|
|
const DEFAULT_CELL_BG_OPACITY = 100; // New
|
|
const DEFAULT_CELL_BG_IMAGE_URL = ''; // Default no image
|
|
const DEFAULT_CELL_BG_IMAGE_OPACITY = 100; // New
|
|
const DEFAULT_MARKED_BORDER_COLOR = '#ca8a04'; // Default darker yellow/orange (Tailwind yellow-600)
|
|
const DEFAULT_MARKED_BORDER_OPACITY = 100; // New
|
|
const DEFAULT_BOARD_BG_COLOR = '#ffffff'; // Default white
|
|
const DEFAULT_BOARD_BG_COLOR_OPACITY = 100; // New (replaces DEFAULT_BOARD_BG_OPACITY)
|
|
const DEFAULT_BOARD_BG_IMAGE_URL = ''; // Default no image
|
|
|
|
// --- Notification Function ---
|
|
function showNotification(message, type = 'info', duration = 3000) {
|
|
const notificationArea = document.getElementById('notification-area');
|
|
if (!notificationArea) return;
|
|
|
|
// Clear any existing timeout
|
|
if (notificationTimeout) {
|
|
clearTimeout(notificationTimeout);
|
|
}
|
|
|
|
notificationArea.textContent = message;
|
|
// Apply Tailwind classes based on type
|
|
notificationArea.className = 'fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50 px-4 py-2 rounded shadow-lg text-white text-sm transition-opacity duration-300'; // Reset classes
|
|
switch (type) {
|
|
case 'success':
|
|
notificationArea.classList.add('bg-green-500');
|
|
break;
|
|
case 'warning':
|
|
notificationArea.classList.add('bg-yellow-500');
|
|
break;
|
|
case 'error':
|
|
notificationArea.classList.add('bg-red-500');
|
|
break;
|
|
default: // info
|
|
notificationArea.classList.add('bg-blue-500');
|
|
break;
|
|
}
|
|
|
|
// Make it visible
|
|
notificationArea.classList.add('opacity-100');
|
|
|
|
// Set timeout to hide
|
|
notificationTimeout = setTimeout(() => {
|
|
notificationArea.classList.remove('opacity-100');
|
|
notificationArea.classList.add('opacity-0');
|
|
}, duration);
|
|
}
|
|
|
|
// --- Helper Function ---
|
|
function hexToRgba(hex, opacityPercent = 100) {
|
|
// Ensure opacityPercent is a number before using it
|
|
let numericOpacity = parseInt(opacityPercent, 10); // Try parsing
|
|
// If parsing failed (e.g., input was not a number string) or input was null/undefined, default to 100
|
|
if (isNaN(numericOpacity)) {
|
|
numericOpacity = 100;
|
|
}
|
|
|
|
// Remove hash if it exists
|
|
hex = hex.replace('#', '');
|
|
|
|
// Handle short hex codes
|
|
if (hex.length === 3) {
|
|
hex = hex.split('').map(char => char + char).join('');
|
|
}
|
|
|
|
// Ensure hex is 6 digits
|
|
if (hex.length !== 6) {
|
|
console.warn(`Invalid hex color: ${hex}. Using fallback.`);
|
|
hex = '000000'; // Default to black on error
|
|
}
|
|
|
|
const r = parseInt(hex.substring(0, 2), 16);
|
|
const g = parseInt(hex.substring(2, 4), 16);
|
|
const b = parseInt(hex.substring(4, 6), 16);
|
|
|
|
// Clamp and normalize opacity using the correctly parsed/defaulted value
|
|
const clampedOpacityPercent = Math.max(0, Math.min(100, numericOpacity));
|
|
const opacity = clampedOpacityPercent / 100;
|
|
|
|
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
|
|
}
|
|
|
|
// --- Functions ---
|
|
|
|
// --- Function to set the HTML background (solid or gradient) ---
|
|
function setBackground() {
|
|
const backgroundType = document.querySelector('input[name="background-type"]:checked').value;
|
|
const solidColorPicker = document.getElementById('background-color-picker');
|
|
const gradientColor1Picker = document.getElementById('gradient-color-1');
|
|
const gradientColor2Picker = document.getElementById('gradient-color-2');
|
|
const gradientDirectionSelect = document.getElementById('gradient-direction');
|
|
const htmlStyle = document.documentElement.style;
|
|
let backgroundValue = '';
|
|
|
|
if (backgroundType === 'solid') {
|
|
const color = solidColorPicker.value;
|
|
const opacity = parseInt(document.getElementById('background-color-opacity-slider').value, 10);
|
|
backgroundValue = hexToRgba(color, opacity);
|
|
htmlStyle.background = backgroundValue; // Set solid color as background
|
|
htmlStyle.backgroundRepeat = 'no-repeat';
|
|
htmlStyle.backgroundAttachment = 'fixed';
|
|
} else { // gradient
|
|
const color1 = gradientColor1Picker.value;
|
|
const opacity1 = parseInt(document.getElementById('gradient-color-1-opacity-slider').value, 10);
|
|
const color2 = gradientColor2Picker.value;
|
|
const opacity2 = parseInt(document.getElementById('gradient-color-2-opacity-slider').value, 10);
|
|
const direction = gradientDirectionSelect.value;
|
|
|
|
const rgba1 = hexToRgba(color1, opacity1);
|
|
const rgba2 = hexToRgba(color2, opacity2);
|
|
|
|
let gradientValue;
|
|
if (direction === 'radial') {
|
|
gradientValue = `radial-gradient(circle, ${rgba1}, ${rgba2})`;
|
|
} else { // Handles 'deg' and direction keywords
|
|
gradientValue = `linear-gradient(${direction}, ${rgba1}, ${rgba2})`;
|
|
}
|
|
backgroundValue = gradientValue;
|
|
htmlStyle.background = gradientValue;
|
|
htmlStyle.backgroundRepeat = 'no-repeat';
|
|
htmlStyle.backgroundAttachment = 'fixed';
|
|
}
|
|
// htmlStyle.background = backgroundValue; // Already set inside if/else
|
|
return backgroundValue; // Return the CSS value for injection (might need adjustment?)
|
|
}
|
|
|
|
// --- Function to manage visibility of background controls ---
|
|
function toggleBackgroundControls() {
|
|
const backgroundType = document.querySelector('input[name="background-type"]:checked').value;
|
|
const solidSettings = document.getElementById('solid-color-settings');
|
|
const gradientSettings = document.getElementById('gradient-color-settings');
|
|
|
|
if (backgroundType === 'solid') {
|
|
solidSettings.style.display = 'block';
|
|
gradientSettings.style.display = 'none';
|
|
} else {
|
|
solidSettings.style.display = 'none';
|
|
gradientSettings.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
// --- Save current background settings to localStorage ---
|
|
function saveBackgroundSettings() {
|
|
const backgroundType = document.querySelector('input[name="background-type"]:checked').value;
|
|
localStorage.setItem(LS_BACKGROUND_TYPE, backgroundType);
|
|
|
|
if (backgroundType === 'solid') {
|
|
localStorage.setItem(LS_SOLID_COLOR, document.getElementById('background-color-picker').value);
|
|
localStorage.setItem(LS_SOLID_COLOR_OPACITY, document.getElementById('background-color-opacity-slider').value);
|
|
// Optionally remove gradient keys
|
|
localStorage.removeItem(LS_GRADIENT_COLOR_1);
|
|
localStorage.removeItem(LS_GRADIENT_COLOR_1_OPACITY);
|
|
localStorage.removeItem(LS_GRADIENT_COLOR_2);
|
|
localStorage.removeItem(LS_GRADIENT_COLOR_2_OPACITY);
|
|
localStorage.removeItem(LS_GRADIENT_DIRECTION);
|
|
} else {
|
|
localStorage.setItem(LS_GRADIENT_COLOR_1, document.getElementById('gradient-color-1').value);
|
|
localStorage.setItem(LS_GRADIENT_COLOR_1_OPACITY, document.getElementById('gradient-color-1-opacity-slider').value);
|
|
localStorage.setItem(LS_GRADIENT_COLOR_2, document.getElementById('gradient-color-2').value);
|
|
localStorage.setItem(LS_GRADIENT_COLOR_2_OPACITY, document.getElementById('gradient-color-2-opacity-slider').value);
|
|
localStorage.setItem(LS_GRADIENT_DIRECTION, document.getElementById('gradient-direction').value);
|
|
// Optionally remove solid key
|
|
localStorage.removeItem(LS_SOLID_COLOR);
|
|
localStorage.removeItem(LS_SOLID_COLOR_OPACITY);
|
|
}
|
|
}
|
|
|
|
function toggleConfig() {
|
|
const pane = document.getElementById('config-pane');
|
|
const isOpen = pane.classList.contains('config-pane-open');
|
|
|
|
if (isOpen) {
|
|
pane.classList.remove('config-pane-open');
|
|
pane.classList.add('config-pane-closed');
|
|
localStorage.setItem(LS_CONFIG_OPEN, 'false');
|
|
} else {
|
|
pane.classList.remove('config-pane-closed');
|
|
pane.classList.add('config-pane-open');
|
|
localStorage.setItem(LS_CONFIG_OPEN, 'true');
|
|
}
|
|
}
|
|
|
|
document.getElementById('file-input').addEventListener('change', function(event) {
|
|
const file = event.target.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
document.getElementById('cell-contents').value = e.target.result;
|
|
showNotification('File loaded. Click Generate/Update to use items.', 'success');
|
|
};
|
|
reader.onerror = function() {
|
|
showNotification('Error reading file.', 'error');
|
|
};
|
|
reader.readAsText(file);
|
|
}
|
|
});
|
|
|
|
function getItemsFromInput() {
|
|
const text = document.getElementById('cell-contents').value.trim();
|
|
return text ? text.split('\n').map(item => item.trim()).filter(item => item) : [];
|
|
}
|
|
|
|
// --- Save current marked style settings to localStorage ---
|
|
function saveMarkedStyleSettings() {
|
|
localStorage.setItem(LS_MARKED_COLOR, document.getElementById('marked-color-picker').value);
|
|
localStorage.setItem(LS_MARKED_COLOR_OPACITY, document.getElementById('marked-color-opacity-slider').value);
|
|
localStorage.setItem(LS_MARKED_IMAGE_URL, document.getElementById('marked-image-url-input').value);
|
|
localStorage.setItem(LS_MARKED_IMAGE_OPACITY, document.getElementById('marked-image-opacity-slider').value); // Save image opacity
|
|
|
|
// Save marked border color and its opacity
|
|
localStorage.setItem(LS_MARKED_BORDER_COLOR, document.getElementById('marked-border-color-picker').value);
|
|
localStorage.setItem(LS_MARKED_BORDER_OPACITY, document.getElementById('marked-border-opacity-slider').value);
|
|
}
|
|
|
|
// --- Apply saved marked styles to a cell ---
|
|
function applyMarkedCellStyle(cell) {
|
|
if (!cell) return;
|
|
|
|
const isMarked = cell.classList.contains('marked');
|
|
const color = localStorage.getItem(LS_MARKED_COLOR) || DEFAULT_MARKED_COLOR;
|
|
const colorOpacity = parseInt(localStorage.getItem(LS_MARKED_COLOR_OPACITY) || DEFAULT_MARKED_COLOR_OPACITY, 10);
|
|
const imageUrl = localStorage.getItem(LS_MARKED_IMAGE_URL) || DEFAULT_MARKED_IMAGE_URL;
|
|
const imageOpacity = parseInt(localStorage.getItem(LS_MARKED_IMAGE_OPACITY) || DEFAULT_MARKED_IMAGE_OPACITY, 10);
|
|
const borderColor = localStorage.getItem(LS_MARKED_BORDER_COLOR) || DEFAULT_MARKED_BORDER_COLOR;
|
|
const borderOpacity = parseInt(localStorage.getItem(LS_MARKED_BORDER_OPACITY) || DEFAULT_MARKED_BORDER_OPACITY, 10);
|
|
|
|
// Reset potentially conflicting styles before applying new ones
|
|
cell.style.backgroundColor = '';
|
|
cell.style.backgroundImage = '';
|
|
// Don't reset border color here, let applyCellStyle handle default if unmarked
|
|
|
|
if (isMarked) {
|
|
// Apply marked border color + opacity
|
|
cell.style.borderColor = hexToRgba(borderColor, borderOpacity);
|
|
|
|
// Always apply the background color + opacity
|
|
cell.style.backgroundColor = hexToRgba(color, colorOpacity);
|
|
|
|
// Apply background image if URL exists via custom property
|
|
if (imageUrl && imageUrl.trim() !== '') {
|
|
cell.style.setProperty('--bg-image-url', `url('${imageUrl}')`);
|
|
cell.style.setProperty('--bg-image-opacity', imageOpacity / 100);
|
|
cell.style.backgroundSize = 'cover';
|
|
cell.style.backgroundPosition = 'center center';
|
|
cell.style.backgroundRepeat = 'no-repeat';
|
|
} else {
|
|
// Explicitly clear background image custom property
|
|
cell.style.removeProperty('--bg-image-url');
|
|
}
|
|
|
|
} else {
|
|
// If unmarked, re-apply default styles (which resets bg color, bg image, border color)
|
|
applyCellStyle(cell);
|
|
}
|
|
}
|
|
|
|
// --- Re-apply styles to all currently marked cells ---
|
|
function refreshMarkedCellStyles() {
|
|
const markedCells = document.querySelectorAll('#bingo-board .bingo-cell.marked');
|
|
markedCells.forEach(cell => {
|
|
applyMarkedCellStyle(cell); // Re-apply based on current settings
|
|
});
|
|
}
|
|
|
|
// --- Save current header settings to localStorage ---
|
|
function saveHeaderSettings() {
|
|
localStorage.setItem(LS_HEADER_TEXT, document.getElementById('header-text-input').value);
|
|
localStorage.setItem(LS_HEADER_IMAGE_URL, document.getElementById('header-image-url-input').value);
|
|
localStorage.setItem(LS_HEADER_TEXT_COLOR, document.getElementById('header-text-color-picker').value);
|
|
localStorage.setItem(LS_HEADER_TEXT_COLOR_OPACITY, document.getElementById('header-text-color-opacity-slider').value);
|
|
}
|
|
|
|
// --- Function to update the header display ---
|
|
function updateHeaderDisplay() {
|
|
// Read text, applying default ONLY if the key is missing
|
|
let headerText = localStorage.getItem(LS_HEADER_TEXT);
|
|
if (headerText === null) { // Check if key exists
|
|
headerText = DEFAULT_HEADER_TEXT; // Apply default only if key missing
|
|
}
|
|
// Read image URL, applying default if missing OR empty (standard || pattern)
|
|
const headerImageUrl = localStorage.getItem(LS_HEADER_IMAGE_URL) || DEFAULT_HEADER_IMAGE_URL;
|
|
const headerContainer = document.getElementById("custom-header-content");
|
|
|
|
if (!headerContainer) return;
|
|
|
|
// Clear existing content
|
|
headerContainer.innerHTML = "";
|
|
|
|
let hasText = headerText && headerText.trim() !== "";
|
|
let hasCustomImage = headerImageUrl && headerImageUrl.trim() !== "";
|
|
|
|
// Add text if it exists
|
|
if (hasText) {
|
|
const h1 = document.createElement("h1");
|
|
h1.className = "text-4xl font-bold"; // Keep other styles
|
|
h1.textContent = headerText;
|
|
let headerTextColor = localStorage.getItem(LS_HEADER_TEXT_COLOR);
|
|
if (headerTextColor === null) { // Check if key exists before applying default
|
|
headerTextColor = DEFAULT_HEADER_TEXT_COLOR;
|
|
}
|
|
let headerTextOpacity = localStorage.getItem(LS_HEADER_TEXT_COLOR_OPACITY);
|
|
if (headerTextOpacity === null) {
|
|
headerTextOpacity = DEFAULT_HEADER_TEXT_COLOR_OPACITY;
|
|
}
|
|
h1.style.color = hexToRgba(headerTextColor, parseInt(headerTextOpacity, 10));
|
|
headerContainer.appendChild(h1);
|
|
}
|
|
|
|
// Add custom image if URL exists
|
|
if (hasCustomImage) {
|
|
const img = document.createElement("img");
|
|
img.src = headerImageUrl;
|
|
img.alt = "Custom Header Image";
|
|
img.className = "max-h-16 max-w-full object-contain"; // Adjust size as needed
|
|
img.onerror = () => {
|
|
img.remove(); // Remove broken image placeholder
|
|
showNotification("Could not load custom header image.", "warning");
|
|
// If there was no text either, maybe add bean?
|
|
if (!hasText && !document.getElementById("bean")) {
|
|
addDefaultBean(headerContainer);
|
|
}
|
|
};
|
|
headerContainer.appendChild(img);
|
|
}
|
|
// If there is NO text and NO custom image, add the default bean
|
|
else if (!hasText) {
|
|
addDefaultBean(headerContainer);
|
|
}
|
|
// Implicitly, if there IS text but NO custom image, nothing else is added here
|
|
// (the bean is not automatically added alongside text anymore unless specified by lack of custom image AND lack of text)
|
|
}
|
|
|
|
// Helper to add the default bean image
|
|
function addDefaultBean(container) {
|
|
const img = document.createElement('img');
|
|
img.id = 'bean';
|
|
img.src = '../bean.svg';
|
|
img.alt = 'Bean';
|
|
img.className = 'w-16 h-16 cursor-pointer'; // Use consistent size
|
|
img.onclick = explodeBeans;
|
|
container.appendChild(img);
|
|
}
|
|
|
|
// --- Save current default cell style settings to localStorage ---
|
|
function saveCellStyleSettings() {
|
|
localStorage.setItem(LS_CELL_BORDER_COLOR, document.getElementById('cell-border-color-picker').value);
|
|
localStorage.setItem(LS_CELL_BORDER_OPACITY, document.getElementById('cell-border-opacity-slider').value);
|
|
localStorage.setItem(LS_CELL_BG_COLOR, document.getElementById('cell-background-color-picker').value);
|
|
localStorage.setItem(LS_CELL_BG_OPACITY, document.getElementById('cell-background-opacity-slider').value);
|
|
localStorage.setItem(LS_CELL_BG_IMAGE_URL, document.getElementById('cell-background-image-url-input').value);
|
|
localStorage.setItem(LS_CELL_BG_IMAGE_OPACITY, document.getElementById('cell-background-image-opacity-slider').value); // Save image opacity
|
|
}
|
|
|
|
// --- Apply saved default cell styles to a cell ---
|
|
function applyCellStyle(cell) {
|
|
if (!cell || cell.classList.contains('marked')) return; // Only apply to non-marked cells
|
|
|
|
const borderColor = localStorage.getItem(LS_CELL_BORDER_COLOR) || DEFAULT_CELL_BORDER_COLOR;
|
|
const borderOpacity = parseInt(localStorage.getItem(LS_CELL_BORDER_OPACITY) || DEFAULT_CELL_BORDER_OPACITY, 10);
|
|
const bgColor = localStorage.getItem(LS_CELL_BG_COLOR) || DEFAULT_CELL_BG_COLOR;
|
|
const bgOpacity = parseInt(localStorage.getItem(LS_CELL_BG_OPACITY) || DEFAULT_CELL_BG_OPACITY, 10);
|
|
const bgImageUrl = localStorage.getItem(LS_CELL_BG_IMAGE_URL) || DEFAULT_CELL_BG_IMAGE_URL;
|
|
const bgImageOpacity = parseInt(localStorage.getItem(LS_CELL_BG_IMAGE_OPACITY) || DEFAULT_CELL_BG_IMAGE_OPACITY, 10);
|
|
|
|
cell.style.borderColor = hexToRgba(borderColor, borderOpacity);
|
|
cell.style.opacity = ''; // Reset direct opacity, handled by color
|
|
|
|
if (bgImageUrl) {
|
|
cell.style.setProperty('--bg-image-url', `url('${bgImageUrl}')`); // NEW: Set CSS custom property
|
|
cell.style.setProperty('--bg-image-opacity', bgImageOpacity / 100); // Set image opacity property
|
|
cell.style.backgroundSize = 'cover';
|
|
cell.style.backgroundPosition = 'center center';
|
|
cell.style.backgroundRepeat = 'no-repeat';
|
|
// Set fallback color with its specific opacity
|
|
cell.style.backgroundColor = hexToRgba(bgColor, bgOpacity);
|
|
} else {
|
|
// Clear image properties if no URL
|
|
cell.style.removeProperty('--bg-image-url'); // NEW: Remove CSS custom property
|
|
cell.style.removeProperty('--bg-image-opacity'); // Remove image opacity property
|
|
cell.style.backgroundColor = hexToRgba(bgColor, bgOpacity);
|
|
}
|
|
}
|
|
|
|
// --- Re-apply default styles to all non-marked cells ---
|
|
function refreshCellStyles() {
|
|
const cells = document.querySelectorAll('#bingo-board .bingo-cell:not(.marked)');
|
|
cells.forEach(cell => {
|
|
applyCellStyle(cell); // Re-apply based on current settings
|
|
});
|
|
}
|
|
|
|
// --- Save board background settings to localStorage ---
|
|
function saveBoardBgSettings() {
|
|
localStorage.setItem(LS_BOARD_BG_COLOR, document.getElementById('board-bg-color-picker').value);
|
|
localStorage.setItem(LS_BOARD_BG_IMAGE_URL, document.getElementById('board-bg-image-url-input').value);
|
|
localStorage.setItem(LS_BOARD_BG_COLOR_OPACITY, document.getElementById('board-bg-color-opacity-slider').value); // Use new ID & key
|
|
}
|
|
|
|
// --- Apply board background style ---
|
|
function applyBoardBgStyle() {
|
|
const container = document.getElementById('bingo-board-container');
|
|
if (!container) return;
|
|
|
|
const bgColor = localStorage.getItem(LS_BOARD_BG_COLOR) || DEFAULT_BOARD_BG_COLOR;
|
|
const bgImageUrl = localStorage.getItem(LS_BOARD_BG_IMAGE_URL) || DEFAULT_BOARD_BG_IMAGE_URL;
|
|
const opacityValue = parseInt(localStorage.getItem(LS_BOARD_BG_COLOR_OPACITY) || DEFAULT_BOARD_BG_COLOR_OPACITY, 10);
|
|
|
|
// Apply opacity - REMOVED direct opacity setting
|
|
// container.style.opacity = opacityValue;
|
|
|
|
// Apply background image or color
|
|
if (bgImageUrl) {
|
|
container.style.backgroundImage = `url('${bgImageUrl}')`;
|
|
container.style.backgroundSize = 'cover';
|
|
container.style.backgroundPosition = 'center center';
|
|
container.style.backgroundRepeat = 'no-repeat';
|
|
// Apply background color with its opacity as fallback / see-through
|
|
container.style.backgroundColor = hexToRgba(bgColor, opacityValue);
|
|
} else {
|
|
container.style.backgroundImage = 'none';
|
|
container.style.backgroundColor = hexToRgba(bgColor, opacityValue);
|
|
}
|
|
}
|
|
|
|
// Helper to save board state
|
|
function saveBoardState() {
|
|
const sizeInput = document.getElementById('board-size');
|
|
const size = sizeInput ? parseInt(sizeInput.value, 10) : 5; // Default to 5 if input missing
|
|
const markedIndices = getMarkedIndices();
|
|
const originalUserItems = getItemsFromInput(); // Get current text from textarea
|
|
|
|
localStorage.setItem(LS_BOARD_SIZE, size);
|
|
localStorage.setItem(LS_CELL_ITEMS, JSON.stringify(currentItems)); // Save items potentially on board (padded/sliced)
|
|
localStorage.setItem(LS_DISPLAYED_ITEMS, JSON.stringify(displayedItems)); // Save displayed items
|
|
localStorage.setItem(LS_MARKED_INDICES, JSON.stringify(markedIndices));
|
|
localStorage.setItem(LS_ORIGINAL_ITEMS, JSON.stringify(originalUserItems)); // Save user's raw input from textarea
|
|
saveBackgroundSettings(); // Save background settings from inputs
|
|
saveHeaderSettings(); // Save header settings from inputs
|
|
saveMarkedStyleSettings(); // Save marked cell style settings
|
|
saveCellStyleSettings(); // Save default cell style settings
|
|
saveBoardBgSettings(); // Save board background settings
|
|
}
|
|
|
|
function generateBoard() {
|
|
const sizeInput = document.getElementById('board-size');
|
|
const size = parseInt(sizeInput.value, 10);
|
|
if (isNaN(size) || size < 1) {
|
|
showNotification("Please enter a valid board size (minimum 1).", 'warning');
|
|
return;
|
|
}
|
|
sizeInput.value = size; // Ensure value reflects parsed int
|
|
|
|
// Get items from input and store them as the canonical list
|
|
const originalUserItems = getItemsFromInput();
|
|
// localStorage.setItem(LS_ORIGINAL_ITEMS, JSON.stringify(originalUserItems)); // Moved to saveBoardState
|
|
|
|
const requiredItems = size * size;
|
|
let itemsForBoard = [...originalUserItems]; // Start with a copy of the user's raw input
|
|
let notificationMessage = 'Board generated successfully!';
|
|
let notificationType = 'success';
|
|
|
|
if (itemsForBoard.length < requiredItems) {
|
|
const diff = requiredItems - itemsForBoard.length;
|
|
notificationMessage = `Warning: Needed ${requiredItems} items, found ${itemsForBoard.length}. Padding with ${diff} placeholder(s).`;
|
|
notificationType = 'warning';
|
|
for (let i = 0; i < diff; i++) {
|
|
itemsForBoard.push(`Placeholder ${i+1}`);
|
|
}
|
|
// currentItems will now hold the padded list for the board
|
|
currentItems = [...itemsForBoard];
|
|
} else if (itemsForBoard.length > requiredItems) {
|
|
notificationMessage = `Info: Found ${itemsForBoard.length} items, randomly selecting ${requiredItems}.`;
|
|
notificationType = 'info';
|
|
itemsForBoard = shuffleArray(itemsForBoard).slice(0, requiredItems);
|
|
// currentItems will now hold the selected subset for the board
|
|
currentItems = [...itemsForBoard];
|
|
} else {
|
|
// If exact number, currentItems are the same as originalUserItems
|
|
currentItems = [...originalUserItems];
|
|
}
|
|
|
|
// Save the items that are actually available for the board (potentially padded/sliced)
|
|
// localStorage.setItem(LS_CELL_ITEMS, JSON.stringify(currentItems)); // Moved to saveBoardState
|
|
|
|
// Shuffle the items specifically for display (use currentItems which has the right size)
|
|
displayedItems = shuffleArray([...currentItems]);
|
|
|
|
const board = document.getElementById("bingo-board");
|
|
board.innerHTML = ""; // Clear previous board
|
|
board.style.gridTemplateColumns = `repeat(${size}, minmax(0, 1fr))`;
|
|
|
|
displayedItems.forEach((item, index) => {
|
|
const cell = document.createElement("div");
|
|
cell.classList.add("bingo-cell", "cursor-pointer");
|
|
// cell.textContent = item; // OLD WAY
|
|
cell.dataset.index = index; // Add index for saving marks
|
|
cell.onclick = () => selectCell(cell);
|
|
applyCellStyle(cell); // Apply default styles upon creation
|
|
|
|
// NEW: Create span for text content
|
|
const textSpan = document.createElement("span");
|
|
textSpan.classList.add("bingo-cell-text");
|
|
textSpan.textContent = item;
|
|
cell.appendChild(textSpan);
|
|
|
|
board.appendChild(cell);
|
|
});
|
|
|
|
clearMarks(false); // Clear previous marks visually AND their styles, but don't save yet
|
|
equalizeCellSizes(); // Add this call
|
|
// saveBoardState(); // REMOVED first call - Save the newly generated board state (size, items, displayed, marks)
|
|
|
|
// Explicitly save background settings before reload - NO, save everything together
|
|
// saveBackgroundSettings();
|
|
|
|
// Get the new background value and inject a style override before reload
|
|
const newBackgroundValue = setBackground(); // Apply and get value
|
|
let overrideStyle = document.getElementById('background-override-style');
|
|
if (!overrideStyle) {
|
|
overrideStyle = document.createElement('style');
|
|
overrideStyle.id = 'background-override-style';
|
|
document.head.appendChild(overrideStyle);
|
|
}
|
|
// Use !important to try and force application during reload flash
|
|
overrideStyle.textContent = `html { background: ${newBackgroundValue} !important; background-repeat: no-repeat !important; background-attachment: fixed !important; }`;
|
|
|
|
showNotification(notificationMessage, notificationType);
|
|
|
|
// *** Save the complete final state just before reload ***
|
|
saveBoardState(); // Includes size, items, displayed, marks, original items, background, header, marked style
|
|
|
|
// Reload the page to ensure correct rendering based on saved state
|
|
location.reload();
|
|
|
|
// Reset global variables
|
|
currentItems = [];
|
|
displayedItems = [];
|
|
|
|
// Reset form inputs
|
|
document.getElementById('board-size').value = 5; // Default size
|
|
document.getElementById('cell-contents').value = '';
|
|
document.getElementById('file-input').value = ''; // Clear file input
|
|
|
|
// Reset background inputs to defaults
|
|
document.querySelector('input[name="background-type"][value="gradient"]').checked = true; // Default to gradient
|
|
document.getElementById('background-color-picker').value = DEFAULT_SOLID_COLOR;
|
|
document.getElementById('background-color-opacity-slider').value = DEFAULT_SOLID_COLOR_OPACITY;
|
|
document.getElementById('gradient-color-1').value = DEFAULT_GRADIENT_COLOR_1;
|
|
document.getElementById('gradient-color-1-opacity-slider').value = DEFAULT_GRADIENT_COLOR_1_OPACITY;
|
|
document.getElementById('gradient-color-2').value = DEFAULT_GRADIENT_COLOR_2;
|
|
document.getElementById('gradient-color-2-opacity-slider').value = DEFAULT_GRADIENT_COLOR_2_OPACITY;
|
|
document.getElementById('gradient-direction').value = DEFAULT_GRADIENT_DIRECTION;
|
|
toggleBackgroundControls(); // Ensure correct controls are visible
|
|
|
|
// Reset header inputs to defaults
|
|
document.getElementById('header-text-input').value = DEFAULT_HEADER_TEXT;
|
|
document.getElementById('header-image-url-input').value = DEFAULT_HEADER_IMAGE_URL;
|
|
document.getElementById('header-text-color-picker').value = DEFAULT_HEADER_TEXT_COLOR;
|
|
document.getElementById('header-text-color-opacity-slider').value = DEFAULT_HEADER_TEXT_COLOR_OPACITY;
|
|
updateHeaderDisplay(); // Apply default header display
|
|
|
|
// Reset marked style inputs to defaults
|
|
document.getElementById('marked-color-picker').value = DEFAULT_MARKED_COLOR;
|
|
document.getElementById('marked-color-opacity-slider').value = DEFAULT_MARKED_COLOR_OPACITY;
|
|
document.getElementById('marked-image-url-input').value = DEFAULT_MARKED_IMAGE_URL;
|
|
document.getElementById('marked-border-color-picker').value = DEFAULT_MARKED_BORDER_COLOR;
|
|
document.getElementById('marked-border-opacity-slider').value = DEFAULT_MARKED_BORDER_OPACITY;
|
|
refreshMarkedCellStyles(); // Apply default styles (which is none, effectively)
|
|
|
|
// Clear the board display
|
|
const boardHeader = document.getElementById('board-header');
|
|
if (boardHeader) boardHeader.style.maxWidth = '';
|
|
|
|
setBackground(); // Apply default background
|
|
showNotification('Settings and board reset.', 'success');
|
|
}
|
|
|
|
function randomizeBoard() {
|
|
const storedItemsRaw = localStorage.getItem(LS_CELL_ITEMS);
|
|
const sizeRaw = localStorage.getItem(LS_BOARD_SIZE);
|
|
|
|
if (!storedItemsRaw || !sizeRaw) {
|
|
showNotification("Cannot randomize: Board state not found. Please generate the board first.", 'warning');
|
|
return;
|
|
}
|
|
|
|
const storedItems = JSON.parse(storedItemsRaw);
|
|
const size = parseInt(sizeRaw, 10);
|
|
const requiredItems = size * size;
|
|
|
|
if (storedItems.length < requiredItems) {
|
|
showNotification(`Cannot randomize: Not enough items saved (${storedItems.length}/${requiredItems}). Please generate the board again.`, 'warning');
|
|
return;
|
|
}
|
|
|
|
// Ensure we use the correct set if placeholders were added or items were sliced
|
|
let itemsToShuffle = [...storedItems];
|
|
if (itemsToShuffle.length > requiredItems) {
|
|
// This case implies items were sliced during generation, which is stored in currentItems
|
|
// Randomizing should still use the items that *could* be on the board
|
|
itemsToShuffle = itemsToShuffle.slice(0, requiredItems);
|
|
|
|
} else if (itemsToShuffle.length < requiredItems) {
|
|
// This case shouldn't happen if generateBoard saved padded items
|
|
showNotification("Cannot randomize: Item count mismatch. Please regenerate the board.", 'error');
|
|
return;
|
|
}
|
|
|
|
displayedItems = shuffleArray([...itemsToShuffle]); // Shuffle the items for display
|
|
|
|
const board = document.getElementById("bingo-board");
|
|
const cells = board.querySelectorAll(".bingo-cell");
|
|
|
|
if (cells.length !== displayedItems.length) {
|
|
showNotification("Cannot randomize: Board size mismatch. Please generate the board again.", 'error');
|
|
return;
|
|
}
|
|
|
|
cells.forEach((cell, index) => {
|
|
// cell.textContent = displayedItems[index]; // OLD WAY
|
|
// NEW: Update or create text span
|
|
let textSpan = cell.querySelector(".bingo-cell-text");
|
|
if (!textSpan) { // Should exist, but create if missing
|
|
textSpan = document.createElement("span");
|
|
textSpan.classList.add("bingo-cell-text");
|
|
cell.innerHTML =
|
|
cell.appendChild(textSpan);
|
|
}
|
|
textSpan.textContent = displayedItems[index];
|
|
|
|
cell.classList.remove("marked"); // Clear marks visually
|
|
applyMarkedCellStyle(cell); // Reset marked styles (which also calls applyCellStyle)
|
|
});
|
|
|
|
clearMarks(false); // Clear visual marks
|
|
saveBoardState(); // Save the new randomized state (including cleared marks)
|
|
showNotification('Board randomized!', 'success');
|
|
}
|
|
|
|
function selectCell(cell) {
|
|
cell.classList.toggle("marked"); // Toggle the dedicated 'marked' class
|
|
applyMarkedCellStyle(cell); // Apply/remove styles based on new state and settings
|
|
saveBoardState(); // RE-ADD: Save updated marks immediately after click
|
|
}
|
|
|
|
function clearMarks(save = true) {
|
|
const cells = document.querySelectorAll('#bingo-board .bingo-cell');
|
|
cells.forEach(cell => {
|
|
if (cell.classList.contains('marked')) {
|
|
cell.classList.remove('marked');
|
|
applyMarkedCellStyle(cell); // Reset styles for this cell
|
|
}
|
|
// Ensure styles are reset even if class was somehow missing
|
|
applyCellStyle(cell); // Ensure default styles are correct after potential mark removal
|
|
});
|
|
if (save) {
|
|
saveBoardState(); // Save cleared marks
|
|
showNotification('Marks cleared.', 'info');
|
|
}
|
|
}
|
|
|
|
// Fisher-Yates (aka Knuth) Shuffle Algorithm
|
|
function shuffleArray(array) {
|
|
let currentIndex = array.length, randomIndex;
|
|
while (currentIndex !== 0) {
|
|
randomIndex = Math.floor(Math.random() * currentIndex);
|
|
currentIndex--;
|
|
[array[currentIndex], array[randomIndex]] = [
|
|
array[randomIndex], array[currentIndex]];
|
|
}
|
|
return array;
|
|
}
|
|
|
|
// Function to reset settings and clear board
|
|
function resetSettings() {
|
|
// Clear localStorage relevant ONLY to the board structure/content
|
|
localStorage.removeItem(LS_BOARD_SIZE);
|
|
localStorage.removeItem(LS_CELL_ITEMS); // The items configured for the board (padded/sliced)
|
|
localStorage.removeItem(LS_DISPLAYED_ITEMS); // The current layout
|
|
localStorage.removeItem(LS_MARKED_INDICES);
|
|
localStorage.removeItem(LS_ORIGINAL_ITEMS); // User's raw input
|
|
|
|
// DO NOT clear these:
|
|
// localStorage.removeItem(LS_CONFIG_OPEN);
|
|
// localStorage.removeItem(LS_BACKGROUND_TYPE);
|
|
// localStorage.removeItem(LS_SOLID_COLOR);
|
|
// localStorage.removeItem(LS_GRADIENT_COLOR_1);
|
|
// localStorage.removeItem(LS_GRADIENT_COLOR_1_OPACITY);
|
|
// localStorage.removeItem(LS_GRADIENT_COLOR_2);
|
|
// localStorage.removeItem(LS_GRADIENT_COLOR_2_OPACITY);
|
|
// localStorage.removeItem(LS_GRADIENT_DIRECTION);
|
|
// localStorage.removeItem(LS_HEADER_TEXT);
|
|
// localStorage.removeItem(LS_HEADER_IMAGE_URL);
|
|
// localStorage.removeItem(LS_MARKED_STYLE_TYPE);
|
|
// localStorage.removeItem(LS_MARKED_COLOR);
|
|
// localStorage.removeItem(LS_MARKED_IMAGE_URL);
|
|
// localStorage.removeItem(LS_MARKED_COLOR_OPACITY);
|
|
// localStorage.removeItem(LS_CELL_BORDER_COLOR); // Keep style on board reset
|
|
// localStorage.removeItem(LS_CELL_BORDER_OPACITY);
|
|
// localStorage.removeItem(LS_CELL_BG_COLOR);
|
|
// localStorage.removeItem(LS_CELL_BG_OPACITY);
|
|
// localStorage.removeItem(LS_CELL_BG_IMAGE_URL);
|
|
|
|
// Reset global variables for board content
|
|
currentItems = [];
|
|
displayedItems = [];
|
|
|
|
// Reset ONLY board-related form inputs
|
|
document.getElementById('board-size').value = 5; // Default size
|
|
document.getElementById('cell-contents').value = '';
|
|
document.getElementById('file-input').value = ''; // Clear file input
|
|
|
|
// DO NOT reset background inputs
|
|
// DO NOT reset header inputs
|
|
// DO NOT reset marked style inputs
|
|
|
|
// Clear the board display
|
|
const board = document.getElementById('bingo-board');
|
|
board.innerHTML = '<div class="bingo-cell">Board Reset. Generate a new board!</div>';
|
|
board.style.gridTemplateColumns = ''; // Clear grid style
|
|
board.style.gridAutoRows = ''; // Also clear gridAutoRows
|
|
|
|
// Reset container width to default
|
|
const boardContainer = document.getElementById('bingo-board-container');
|
|
const boardHeader = document.getElementById('board-header');
|
|
if (boardContainer) boardContainer.style.maxWidth = ''; // Let it resize naturally or via equalize
|
|
if (boardHeader) boardHeader.style.maxWidth = ''; // Let it resize naturally or via equalize
|
|
// Call equalize after potentially changing board content/size
|
|
equalizeCellSizes();
|
|
|
|
// DO NOT reset background - keep current style
|
|
// setBackground();
|
|
// DO NOT reset header display - keep current style
|
|
// updateHeaderDisplay();
|
|
// DO NOT refresh marked styles - keep current style
|
|
// refreshMarkedCellStyles();
|
|
|
|
showNotification('Board settings reset. Generate a new board to apply.', 'success');
|
|
}
|
|
|
|
// --- Helper to get indices of marked cells ---
|
|
function getMarkedIndices() {
|
|
const markedCells = document.querySelectorAll('#bingo-board .bingo-cell.marked');
|
|
const indices = [];
|
|
markedCells.forEach(cell => {
|
|
// Ensure dataset.index exists and is a valid number
|
|
if (cell.dataset && typeof cell.dataset.index !== 'undefined') {
|
|
const index = parseInt(cell.dataset.index, 10);
|
|
if (!isNaN(index)) {
|
|
indices.push(index);
|
|
}
|
|
} else {
|
|
console.warn('Marked cell found without a valid data-index:', cell);
|
|
}
|
|
});
|
|
return indices;
|
|
}
|
|
|
|
// --- Load State on Page Load ---
|
|
function loadFromLocalStorage() {
|
|
const savedSize = localStorage.getItem(LS_BOARD_SIZE) || "5"; // Default to 5
|
|
const savedItemsText = localStorage.getItem(LS_CELL_ITEMS);
|
|
const savedDisplayedItems = localStorage.getItem(LS_DISPLAYED_ITEMS);
|
|
const savedMarkedIndices = localStorage.getItem(LS_MARKED_INDICES);
|
|
const configIsOpen = localStorage.getItem(LS_CONFIG_OPEN) === "true";
|
|
const savedOriginalItemsText = localStorage.getItem(LS_ORIGINAL_ITEMS);
|
|
// Load header text, applying default ONLY if key is missing
|
|
let savedHeaderText = localStorage.getItem(LS_HEADER_TEXT);
|
|
if (savedHeaderText === null) { // Check if key exists
|
|
savedHeaderText = DEFAULT_HEADER_TEXT; // Apply default only if key missing
|
|
}
|
|
const savedHeaderImageUrl = localStorage.getItem(LS_HEADER_IMAGE_URL) || DEFAULT_HEADER_IMAGE_URL;
|
|
let savedHeaderTextColor = localStorage.getItem(LS_HEADER_TEXT_COLOR);
|
|
if (savedHeaderTextColor === null) {
|
|
savedHeaderTextColor = DEFAULT_HEADER_TEXT_COLOR;
|
|
}
|
|
const savedHeaderTextOpacity = localStorage.getItem(LS_HEADER_TEXT_COLOR_OPACITY) || DEFAULT_HEADER_TEXT_COLOR_OPACITY;
|
|
const savedMarkedColor = localStorage.getItem(LS_MARKED_COLOR) || DEFAULT_MARKED_COLOR;
|
|
const savedMarkedColorOpacity = localStorage.getItem(LS_MARKED_COLOR_OPACITY) || DEFAULT_MARKED_COLOR_OPACITY;
|
|
const savedMarkedImageUrl = localStorage.getItem(LS_MARKED_IMAGE_URL) || DEFAULT_MARKED_IMAGE_URL;
|
|
const savedMarkedImageOpacity = localStorage.getItem(LS_MARKED_IMAGE_OPACITY) || DEFAULT_MARKED_IMAGE_OPACITY;
|
|
console.log(`LOAD: LS_MARKED_IMAGE_OPACITY = ${localStorage.getItem(LS_MARKED_IMAGE_OPACITY)}, using: ${savedMarkedImageOpacity}`); // DEBUG LOG
|
|
const savedCellBorderColor = localStorage.getItem(LS_CELL_BORDER_COLOR) || DEFAULT_CELL_BORDER_COLOR;
|
|
const savedCellBorderOpacity = localStorage.getItem(LS_CELL_BORDER_OPACITY) || DEFAULT_CELL_BORDER_OPACITY;
|
|
const savedCellBgColor = localStorage.getItem(LS_CELL_BG_COLOR) || DEFAULT_CELL_BG_COLOR;
|
|
const savedCellBgOpacity = localStorage.getItem(LS_CELL_BG_OPACITY) || DEFAULT_CELL_BG_OPACITY;
|
|
const savedCellBgImageUrl = localStorage.getItem(LS_CELL_BG_IMAGE_URL) || DEFAULT_CELL_BG_IMAGE_URL;
|
|
const savedCellBgImageOpacity = localStorage.getItem(LS_CELL_BG_IMAGE_OPACITY) || DEFAULT_CELL_BG_IMAGE_OPACITY;
|
|
console.log(`LOAD: LS_CELL_BG_IMAGE_OPACITY = ${localStorage.getItem(LS_CELL_BG_IMAGE_OPACITY)}, using: ${savedCellBgImageOpacity}`); // DEBUG LOG
|
|
const savedMarkedBorderColor = localStorage.getItem(LS_MARKED_BORDER_COLOR) || DEFAULT_MARKED_BORDER_COLOR;
|
|
const savedMarkedBorderOpacity = localStorage.getItem(LS_MARKED_BORDER_OPACITY) || DEFAULT_MARKED_BORDER_OPACITY;
|
|
const savedBoardBgColor = localStorage.getItem(LS_BOARD_BG_COLOR) || DEFAULT_BOARD_BG_COLOR;
|
|
const savedBoardBgColorOpacity = localStorage.getItem(LS_BOARD_BG_COLOR_OPACITY) || DEFAULT_BOARD_BG_COLOR_OPACITY;
|
|
const savedBoardBgImageUrl = localStorage.getItem(LS_BOARD_BG_IMAGE_URL) || DEFAULT_BOARD_BG_IMAGE_URL;
|
|
|
|
// Restore Config Pane State
|
|
const pane = document.getElementById('config-pane');
|
|
if (configIsOpen) {
|
|
pane.classList.remove('config-pane-closed');
|
|
pane.classList.add('config-pane-open');
|
|
} else {
|
|
pane.classList.remove('config-pane-open');
|
|
pane.classList.add('config-pane-closed');
|
|
}
|
|
|
|
// Restore Config Inputs
|
|
const size = parseInt(savedSize, 10); // Parse size here
|
|
document.getElementById('board-size').value = savedSize;
|
|
|
|
// Restore Board only if essential data exists
|
|
if (savedDisplayedItems) {
|
|
try {
|
|
displayedItems = JSON.parse(savedDisplayedItems); // Restore displayed items array
|
|
// *** ADDED: Restore currentItems as well ***
|
|
if (savedItemsText) {
|
|
try {
|
|
currentItems = JSON.parse(savedItemsText);
|
|
if (!Array.isArray(currentItems)) {
|
|
console.warn('Loaded LS_CELL_ITEMS was not an array, resetting.');
|
|
currentItems = [];
|
|
}
|
|
} catch (e) {
|
|
showNotification('Error parsing saved cell item pool (LS_CELL_ITEMS). Board may not randomize correctly.', 'warning');
|
|
currentItems = []; // Reset on parse error
|
|
}
|
|
} else {
|
|
// If LS_CELL_ITEMS doesn't exist but LS_DISPLAYED_ITEMS does, it's an inconsistent state.
|
|
// We could try to reconstruct currentItems from displayedItems, but it might lack padding/slicing info.
|
|
// For now, log a warning and reset currentItems.
|
|
console.warn('Inconsistent state: LS_DISPLAYED_ITEMS exists but LS_CELL_ITEMS is missing. Randomization might fail.');
|
|
currentItems = [];
|
|
}
|
|
// *** END ADDED section ***
|
|
} catch (e) {
|
|
showNotification('Error parsing saved board state. Please generate again.', 'error');
|
|
localStorage.removeItem(LS_DISPLAYED_ITEMS);
|
|
localStorage.removeItem(LS_MARKED_INDICES);
|
|
displayedItems = [];
|
|
document.getElementById('bingo-board').innerHTML = '<div class="bingo-cell">Error loading board. Generate New.</div>';
|
|
return; // Stop board restore
|
|
}
|
|
|
|
const requiredItems = size * size;
|
|
|
|
// Check if the loaded data is consistent
|
|
if (!Array.isArray(displayedItems) || displayedItems.length !== requiredItems) {
|
|
showNotification("Saved board data mismatch. Please generate again.", 'warning');
|
|
localStorage.removeItem(LS_DISPLAYED_ITEMS);
|
|
localStorage.removeItem(LS_MARKED_INDICES);
|
|
document.getElementById('bingo-board').innerHTML = '<div class="bingo-cell">Data Mismatch. Generate New.</div>';
|
|
return; // Stop loading the board state
|
|
}
|
|
|
|
const board = document.getElementById('bingo-board');
|
|
board.innerHTML = ''; // Clear placeholder
|
|
board.style.gridTemplateColumns = `repeat(${size}, minmax(0, 1fr))`;
|
|
|
|
const markedIndices = savedMarkedIndices ? JSON.parse(savedMarkedIndices) : [];
|
|
|
|
displayedItems.forEach((item, index) => {
|
|
const cell = document.createElement('div');
|
|
cell.classList.add('bingo-cell', 'cursor-pointer');
|
|
// cell.textContent = item; // OLD WAY
|
|
cell.dataset.index = index; // Ensure index is set for loading marks correctly
|
|
cell.onclick = () => selectCell(cell);
|
|
applyCellStyle(cell); // Apply default cell style first
|
|
|
|
// NEW: Create span for text content
|
|
const textSpan = document.createElement("span");
|
|
textSpan.classList.add("bingo-cell-text");
|
|
textSpan.textContent = item;
|
|
cell.appendChild(textSpan);
|
|
|
|
if (markedIndices.includes(index)) {
|
|
cell.classList.add('marked'); // Apply saved mark using \'marked\' class
|
|
// Apply dynamic marked styles AFTER adding the class and default styles
|
|
applyMarkedCellStyle(cell);
|
|
}
|
|
board.appendChild(cell);
|
|
});
|
|
equalizeCellSizes(); // Add this call
|
|
} else {
|
|
// If no saved board state, show the default message
|
|
const board = document.getElementById('bingo-board');
|
|
// Check if board div exists and has no children before adding message
|
|
if (board && board.children.length === 0) {
|
|
board.innerHTML = '<div class="bingo-cell">Generate a board using the config panel!</div>';
|
|
}
|
|
}
|
|
|
|
// --- Restore Background Settings ---
|
|
const savedBackgroundType = localStorage.getItem(LS_BACKGROUND_TYPE) || 'gradient'; // Default to gradient
|
|
const savedSolidColor = localStorage.getItem(LS_SOLID_COLOR) || DEFAULT_SOLID_COLOR;
|
|
const savedSolidColorOpacity = localStorage.getItem(LS_SOLID_COLOR_OPACITY) || DEFAULT_SOLID_COLOR_OPACITY;
|
|
const savedGradientColor1 = localStorage.getItem(LS_GRADIENT_COLOR_1) || DEFAULT_GRADIENT_COLOR_1;
|
|
const savedGradientColor1Opacity = localStorage.getItem(LS_GRADIENT_COLOR_1_OPACITY) || DEFAULT_GRADIENT_COLOR_1_OPACITY;
|
|
const savedGradientColor2 = localStorage.getItem(LS_GRADIENT_COLOR_2) || DEFAULT_GRADIENT_COLOR_2;
|
|
const savedGradientColor2Opacity = localStorage.getItem(LS_GRADIENT_COLOR_2_OPACITY) || DEFAULT_GRADIENT_COLOR_2_OPACITY;
|
|
const savedGradientDirection = localStorage.getItem(LS_GRADIENT_DIRECTION) || DEFAULT_GRADIENT_DIRECTION;
|
|
|
|
// Set radio button
|
|
document.querySelector(`input[name="background-type"][value="${savedBackgroundType}"]`).checked = true;
|
|
|
|
// Set input values
|
|
document.getElementById('background-color-picker').value = savedSolidColor;
|
|
document.getElementById('background-color-opacity-slider').value = savedSolidColorOpacity;
|
|
document.getElementById('gradient-color-1').value = savedGradientColor1;
|
|
document.getElementById('gradient-color-1-opacity-slider').value = savedGradientColor1Opacity;
|
|
document.getElementById('gradient-color-2').value = savedGradientColor2;
|
|
document.getElementById('gradient-color-2-opacity-slider').value = savedGradientColor2Opacity;
|
|
document.getElementById('gradient-direction').value = savedGradientDirection;
|
|
|
|
// Show/hide controls and apply background
|
|
toggleBackgroundControls();
|
|
setBackground();
|
|
// --- End Restore Background Settings ---
|
|
|
|
// --- Restore Header Settings ---
|
|
document.getElementById('header-text-input').value = savedHeaderText;
|
|
document.getElementById('header-image-url-input').value = savedHeaderImageUrl;
|
|
document.getElementById('header-text-color-picker').value = savedHeaderTextColor;
|
|
document.getElementById('header-text-color-opacity-slider').value = savedHeaderTextOpacity;
|
|
if(document.getElementById('header-text-color-opacity-value')) document.getElementById('header-text-color-opacity-value').textContent = savedHeaderTextOpacity; // Update display span
|
|
updateHeaderDisplay(); // Apply the loaded header
|
|
// --- End Restore Header Settings ---
|
|
|
|
// --- Restore Marked Style Settings ---
|
|
document.getElementById('marked-color-picker').value = savedMarkedColor;
|
|
document.getElementById('marked-color-opacity-slider').value = savedMarkedColorOpacity;
|
|
if(document.getElementById('marked-color-opacity-value')) document.getElementById('marked-color-opacity-value').textContent = savedMarkedColorOpacity;
|
|
document.getElementById('marked-image-url-input').value = savedMarkedImageUrl;
|
|
const markedImageOpacitySlider = document.getElementById('marked-image-opacity-slider');
|
|
const markedImageOpacityValueSpan = document.getElementById('marked-image-opacity-value');
|
|
if (markedImageOpacitySlider) markedImageOpacitySlider.value = savedMarkedImageOpacity;
|
|
if (markedImageOpacityValueSpan) markedImageOpacityValueSpan.textContent = savedMarkedImageOpacity;
|
|
|
|
document.getElementById('marked-border-color-picker').value = savedMarkedBorderColor;
|
|
const markedBorderOpacitySlider = document.getElementById('marked-border-opacity-slider');
|
|
const markedBorderOpacityValueSpan = document.getElementById('marked-border-opacity-value');
|
|
if (markedBorderOpacitySlider) markedBorderOpacitySlider.value = savedMarkedBorderOpacity;
|
|
if (markedBorderOpacityValueSpan) markedBorderOpacityValueSpan.textContent = savedMarkedBorderOpacity;
|
|
|
|
refreshMarkedCellStyles(); // Apply the loaded marked styles
|
|
// --- End Restore Marked Style Settings ---
|
|
|
|
// --- Restore Default Cell Style Settings ---
|
|
document.getElementById('cell-border-color-picker').value = savedCellBorderColor;
|
|
const cellBorderOpacitySlider = document.getElementById('cell-border-opacity-slider');
|
|
const cellBorderOpacityValueSpan = document.getElementById('cell-border-opacity-value');
|
|
if (cellBorderOpacitySlider) cellBorderOpacitySlider.value = savedCellBorderOpacity;
|
|
if (cellBorderOpacityValueSpan) cellBorderOpacityValueSpan.textContent = savedCellBorderOpacity;
|
|
|
|
document.getElementById('cell-background-color-picker').value = savedCellBgColor;
|
|
const cellBackgroundOpacitySlider = document.getElementById('cell-background-opacity-slider');
|
|
const cellBackgroundOpacityValueSpan = document.getElementById('cell-background-opacity-value');
|
|
if (cellBackgroundOpacitySlider) cellBackgroundOpacitySlider.value = savedCellBgOpacity;
|
|
if (cellBackgroundOpacityValueSpan) cellBackgroundOpacityValueSpan.textContent = savedCellBgOpacity;
|
|
|
|
document.getElementById('cell-background-image-url-input').value = savedCellBgImageUrl;
|
|
const cellBackgroundImageOpacitySlider = document.getElementById('cell-background-image-opacity-slider');
|
|
const cellBackgroundImageOpacityValueSpan = document.getElementById('cell-background-image-opacity-value');
|
|
if (cellBackgroundImageOpacitySlider) cellBackgroundImageOpacitySlider.value = savedCellBgImageOpacity;
|
|
if (cellBackgroundImageOpacityValueSpan) cellBackgroundImageOpacityValueSpan.textContent = savedCellBgImageOpacity;
|
|
|
|
// Styles are applied during board creation loop above
|
|
// --- End Restore Default Cell Style Settings ---
|
|
|
|
// --- Restore Board Background Settings ---
|
|
document.getElementById('board-bg-color-picker').value = savedBoardBgColor;
|
|
document.getElementById('board-bg-image-url-input').value = savedBoardBgImageUrl;
|
|
document.getElementById('board-bg-color-opacity-slider').value = savedBoardBgColorOpacity;
|
|
const boardBgOpacitySlider = document.getElementById('board-bg-color-opacity-slider');
|
|
const boardBgOpacityValueSpan = document.getElementById('board-bg-color-opacity-value');
|
|
if (boardBgOpacitySlider) boardBgOpacitySlider.value = savedBoardBgColorOpacity;
|
|
if (boardBgOpacityValueSpan) boardBgOpacityValueSpan.textContent = savedBoardBgColorOpacity;
|
|
applyBoardBgStyle(); // Apply loaded style
|
|
// --- End Restore Board Background Settings ---
|
|
|
|
// Restore the textarea with the original user input if available
|
|
if (savedOriginalItemsText) {
|
|
try {
|
|
const originalItems = JSON.parse(savedOriginalItemsText);
|
|
document.getElementById('cell-contents').value = originalItems.join('\n');
|
|
} catch (e) {
|
|
showNotification('Error parsing saved original items.', 'error');
|
|
localStorage.removeItem(LS_ORIGINAL_ITEMS);
|
|
// Fallback to cell items if original fails
|
|
if (savedItemsText) {
|
|
try {
|
|
document.getElementById('cell-contents').value = JSON.parse(savedItemsText).join('\n');
|
|
} catch { /* ignore inner error */ }
|
|
}
|
|
}
|
|
} else if (savedItemsText) {
|
|
// If no original items saved, use the cell items as fallback for textarea
|
|
try {
|
|
document.getElementById('cell-contents').value = JSON.parse(savedItemsText).join('\n');
|
|
} catch (e) {
|
|
// Already handled loading currentItems above, just ensure textarea is cleared on error
|
|
document.getElementById('cell-contents').value = '';
|
|
}
|
|
}
|
|
|
|
// Update container width based on loaded size - REMOVED
|
|
// updateBoardContainerMaxWidth(size);
|
|
// updateBoardContainerMaxWidth(size, '#board-header');
|
|
|
|
// --- Add Event Listeners for Default Cell Style Controls ---
|
|
document.getElementById('cell-border-color-picker').addEventListener('input', () => {
|
|
saveCellStyleSettings();
|
|
refreshCellStyles(); // Update all non-marked cells
|
|
});
|
|
document.getElementById('cell-border-opacity-slider').addEventListener('input', (e) => {
|
|
if(document.getElementById('cell-border-opacity-value')) document.getElementById('cell-border-opacity-value').textContent = e.target.value;
|
|
saveCellStyleSettings();
|
|
refreshCellStyles(); // Update all non-marked cells
|
|
});
|
|
document.getElementById('cell-background-color-picker').addEventListener('input', () => {
|
|
saveCellStyleSettings();
|
|
refreshCellStyles();
|
|
});
|
|
document.getElementById('cell-background-opacity-slider').addEventListener('input', (e) => {
|
|
if(document.getElementById('cell-background-opacity-value')) document.getElementById('cell-background-opacity-value').textContent = e.target.value;
|
|
saveCellStyleSettings();
|
|
refreshCellStyles();
|
|
});
|
|
document.getElementById('cell-background-image-url-input').addEventListener('input', () => {
|
|
saveCellStyleSettings();
|
|
refreshCellStyles();
|
|
});
|
|
|
|
// --- Add Event Listeners for Board Background Controls ---
|
|
document.getElementById('board-bg-color-picker').addEventListener('input', () => {
|
|
saveBoardBgSettings();
|
|
applyBoardBgStyle();
|
|
});
|
|
document.getElementById('board-bg-image-url-input').addEventListener('input', () => {
|
|
saveBoardBgSettings();
|
|
applyBoardBgStyle();
|
|
});
|
|
document.getElementById('board-bg-color-opacity-slider').addEventListener('input', (e) => {
|
|
if(document.getElementById('board-bg-color-opacity-value')) document.getElementById('board-bg-color-opacity-value').textContent = e.target.value;
|
|
saveBoardBgSettings();
|
|
applyBoardBgStyle();
|
|
});
|
|
|
|
// --- Search Listener ---
|
|
const searchInput = document.getElementById('search-input');
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', () => {
|
|
const searchTerm = searchInput.value.trim().toLowerCase();
|
|
const cells = document.querySelectorAll('#bingo-board .bingo-cell');
|
|
|
|
// Split search term into words
|
|
const searchWords = searchTerm.split(/\s+/).filter(word => word.length > 0);
|
|
|
|
cells.forEach(cell => {
|
|
const textSpan = cell.querySelector('.bingo-cell-text');
|
|
let isMatch = false;
|
|
if (textSpan && searchWords.length > 0) {
|
|
const cellText = textSpan.textContent.trim().toLowerCase();
|
|
// Check if ALL search words are included in the cell text
|
|
isMatch = searchWords.every(word => cellText.includes(word));
|
|
}
|
|
|
|
// Add or remove highlight based on match status
|
|
if (isMatch) {
|
|
cell.classList.add('highlighted');
|
|
} else {
|
|
cell.classList.remove('highlighted');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// --- Other Listeners ---
|
|
window.addEventListener('resize', equalizeCellSizes);
|
|
equalizeCellSizes(); // Initial call after load
|
|
}
|
|
|
|
// --- Helper to manage board container width --- DEPRECATED
|
|
/* function updateBoardContainerMaxWidth(size, element = '#bingo-board-container') {
|
|
const container = document.querySelector(element);
|
|
|
|
if (!container) return;
|
|
|
|
// Remove existing max-w classes
|
|
const classList = container.classList;
|
|
const existingMaxWidthClasses = Array.from(classList).filter(cls => cls.startsWith('max-w-'));
|
|
classList.remove(...existingMaxWidthClasses);
|
|
|
|
// Determine and add the new max-w class
|
|
let maxWidthClass = 'max-w-2xl'; // Default for 5x5
|
|
if (size <= 3) {
|
|
maxWidthClass = 'max-w-lg';
|
|
} else if (size === 4) {
|
|
maxWidthClass = 'max-w-xl';
|
|
} else if (size === 5) {
|
|
maxWidthClass = 'max-w-2xl';
|
|
} else if (size === 6) {
|
|
maxWidthClass = 'max-w-3xl';
|
|
} else if (size === 7) {
|
|
maxWidthClass = 'max-w-4xl';
|
|
} else if (size >= 8) {
|
|
maxWidthClass = 'max-w-5xl'; // Cap here, rely on scroll for larger
|
|
}
|
|
container.classList.add(maxWidthClass);
|
|
} */
|
|
|
|
// --- Function to make all cells square and equal size ---
|
|
function equalizeCellSizes() {
|
|
const board = document.getElementById("bingo-board");
|
|
const cells = board?.querySelectorAll(".bingo-cell");
|
|
if (!board || !cells || cells.length === 0) return;
|
|
|
|
let size = 0;
|
|
const sizeInput = document.getElementById("board-size");
|
|
const sizeFromInput = sizeInput ? parseInt(sizeInput.value, 10) : 0;
|
|
|
|
if (sizeFromInput && !isNaN(sizeFromInput) && sizeFromInput > 0) {
|
|
size = sizeFromInput;
|
|
} else {
|
|
try {
|
|
const gridStyle = window.getComputedStyle(board).gridTemplateColumns;
|
|
const parts = gridStyle.split(" ");
|
|
if (parts.length > 0 && parts[0] !== "none") {
|
|
size = parts.length;
|
|
}
|
|
} catch (e) {
|
|
console.error(
|
|
"Could not determine grid size from styles or input.",
|
|
e
|
|
);
|
|
}
|
|
}
|
|
|
|
if (size <= 0) {
|
|
// Attempt to get size from a potentially existing grid setup if possible
|
|
try {
|
|
const gridStyle = window.getComputedStyle(board).gridTemplateColumns;
|
|
const parts = gridStyle.split(" ");
|
|
if (parts.length > 0 && parts[0] !== "none") {
|
|
size = parts.length;
|
|
}
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
if (size <= 0) {
|
|
console.error("Failed to determine grid size.");
|
|
showNotification("Cannot determine valid grid size. Please generate board again.", "warning");
|
|
return; // Cannot proceed
|
|
}
|
|
}
|
|
|
|
const gap = 4; // From CSS: .bingo-board { gap: 4px; }
|
|
const minCellSize = 100; // Minimum width/height for a cell
|
|
let maxWidthNeeded = 0;
|
|
let maxHeightNeeded = 0;
|
|
|
|
// 1. Reset grid sizing to allow natural measurement of cell content
|
|
board.style.gridTemplateColumns = `repeat(${size}, minmax(0, 1fr))`; // Use fractions initially
|
|
board.style.gridAutoRows = "auto"; // Auto height
|
|
|
|
// 2. Force reflow to apply the reset styles before measuring
|
|
void board.offsetHeight;
|
|
|
|
// 3. First pass: Find the max width and max height based on actual rendered content
|
|
cells.forEach((cell) => {
|
|
// Reset any explicit cell styles (shouldn\'t be needed, but safe)
|
|
cell.style.width = "";
|
|
cell.style.height = "";
|
|
|
|
// Measure the cell\'s natural dimensions after reflow
|
|
const width = cell.offsetWidth;
|
|
const height = cell.offsetHeight;
|
|
maxWidthNeeded = Math.max(maxWidthNeeded, width);
|
|
maxHeightNeeded = Math.max(maxHeightNeeded, height);
|
|
});
|
|
|
|
// 4. Determine the target size for square cells
|
|
const targetSize = Math.max(maxWidthNeeded, maxHeightNeeded, minCellSize);
|
|
|
|
// 5. Apply the calculated fixed size back to the grid
|
|
board.style.gridTemplateColumns = `repeat(${size}, ${targetSize}px)`;
|
|
board.style.gridAutoRows = `${targetSize}px`; // Make cells square
|
|
|
|
// 6. Calculate total board width needed for the container
|
|
const containerPadding = 32; // Based on p-4 class on #bingo-board-container (1rem = 16px, left + right = 32px)
|
|
const totalWidth = targetSize * size + gap * (size - 1) + containerPadding;
|
|
|
|
// 7. Update container max-width
|
|
const boardContainer = document.getElementById("bingo-board-container");
|
|
const boardHeader = document.getElementById("board-header");
|
|
|
|
if (boardContainer) {
|
|
boardContainer.style.maxWidth = `${totalWidth}px`;
|
|
}
|
|
if (boardHeader) {
|
|
// Keep header consistent with board container width
|
|
boardHeader.style.maxWidth = `${totalWidth}px`;
|
|
}
|
|
}
|
|
|
|
function explodeBeans() {
|
|
const container = document.querySelector('#custom-header-content');
|
|
for (let i = 0; i < 20; i++) {
|
|
const newBean = document.createElement('img');
|
|
newBean.src = '../bean.svg';
|
|
newBean.style.position = 'absolute';
|
|
newBean.style.width = '25px';
|
|
newBean.style.height = '25px';
|
|
newBean.style.transition = 'transform 1s ease-out, opacity 1s ease-out';
|
|
newBean.style.opacity = '0';
|
|
|
|
// Initial position at the center of the img tag
|
|
newBean.style.transform = 'translate(100px, 0) scale(0.5)';
|
|
|
|
container.appendChild(newBean);
|
|
|
|
// Random position around the original bean
|
|
const angle = Math.random() * 2 * Math.PI;
|
|
const distance = Math.random() * 100 + 50+100;
|
|
|
|
// Trigger the animation
|
|
setTimeout(() => {
|
|
newBean.style.opacity = '1';
|
|
newBean.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px) scale(1)`;
|
|
}, 0);
|
|
|
|
// Remove the bean after animation
|
|
setTimeout(() => {
|
|
newBean.style.opacity = '0';
|
|
setTimeout(() => {
|
|
container.removeChild(newBean);
|
|
}, 1000);
|
|
}, 1000);
|
|
}
|
|
}
|
|
|
|
// --- Consolidated Event Listeners ---
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Load state first thing
|
|
loadFromLocalStorage();
|
|
|
|
// --- Add Event Listeners for Background Controls ---
|
|
document.querySelectorAll('input[name="background-type"]').forEach(radio => {
|
|
radio.addEventListener('change', () => {
|
|
toggleBackgroundControls();
|
|
setBackground();
|
|
saveBackgroundSettings();
|
|
});
|
|
});
|
|
document.getElementById('background-color-picker').addEventListener('input', () => {
|
|
setBackground();
|
|
saveBackgroundSettings();
|
|
});
|
|
document.getElementById('background-color-opacity-slider').addEventListener('input', (e) => {
|
|
if(document.getElementById('background-color-opacity-value')) document.getElementById('background-color-opacity-value').textContent = e.target.value;
|
|
setBackground();
|
|
saveBackgroundSettings();
|
|
});
|
|
document.getElementById('gradient-color-1').addEventListener('input', () => {
|
|
setBackground();
|
|
saveBackgroundSettings();
|
|
});
|
|
document.getElementById('gradient-color-1-opacity-slider').addEventListener('input', (e) => {
|
|
if(document.getElementById('gradient-color-1-opacity-value')) document.getElementById('gradient-color-1-opacity-value').textContent = e.target.value;
|
|
setBackground();
|
|
saveBackgroundSettings();
|
|
});
|
|
document.getElementById('gradient-color-2').addEventListener('input', () => {
|
|
setBackground();
|
|
saveBackgroundSettings();
|
|
});
|
|
document.getElementById('gradient-color-2-opacity-slider').addEventListener('input', (e) => {
|
|
if(document.getElementById('gradient-color-2-opacity-value')) document.getElementById('gradient-color-2-opacity-value').textContent = e.target.value;
|
|
setBackground();
|
|
saveBackgroundSettings();
|
|
});
|
|
document.getElementById('gradient-direction').addEventListener('change', () => {
|
|
setBackground();
|
|
saveBackgroundSettings();
|
|
});
|
|
|
|
// --- Add Event Listeners for Header Controls ---
|
|
document.getElementById('header-text-input').addEventListener('input', () => {
|
|
saveHeaderSettings(); // Save the new text first
|
|
updateHeaderDisplay(); // Then update display from saved state
|
|
});
|
|
document.getElementById('header-image-url-input').addEventListener('input', () => {
|
|
saveHeaderSettings(); // Save the new URL first
|
|
updateHeaderDisplay(); // Then update display from saved state
|
|
});
|
|
document.getElementById('header-text-color-picker').addEventListener('input', () => {
|
|
saveHeaderSettings();
|
|
updateHeaderDisplay();
|
|
});
|
|
document.getElementById('header-text-color-opacity-slider').addEventListener('input', (e) => {
|
|
if(document.getElementById('header-text-color-opacity-value')) document.getElementById('header-text-color-opacity-value').textContent = e.target.value;
|
|
saveHeaderSettings();
|
|
updateHeaderDisplay();
|
|
});
|
|
|
|
// --- Add Event Listeners for Marked Style Controls ---
|
|
document.getElementById('marked-color-picker').addEventListener('input', () => {
|
|
saveMarkedStyleSettings();
|
|
refreshMarkedCellStyles();
|
|
});
|
|
document.getElementById('marked-color-opacity-slider').addEventListener('input', (e) => {
|
|
if(document.getElementById('marked-color-opacity-value')) document.getElementById('marked-color-opacity-value').textContent = e.target.value;
|
|
saveMarkedStyleSettings();
|
|
refreshMarkedCellStyles();
|
|
});
|
|
document.getElementById('marked-image-url-input').addEventListener('input', () => {
|
|
saveMarkedStyleSettings();
|
|
refreshMarkedCellStyles();
|
|
});
|
|
document.getElementById('marked-image-opacity-slider').addEventListener('input', (e) => {
|
|
if(document.getElementById('marked-image-opacity-value')) document.getElementById('marked-image-opacity-value').textContent = e.target.value;
|
|
saveMarkedStyleSettings();
|
|
refreshMarkedCellStyles();
|
|
});
|
|
document.getElementById('marked-border-color-picker').addEventListener('input', () => {
|
|
saveMarkedStyleSettings();
|
|
refreshMarkedCellStyles();
|
|
});
|
|
document.getElementById('marked-border-opacity-slider').addEventListener('input', (e) => {
|
|
if(document.getElementById('marked-border-opacity-value')) document.getElementById('marked-border-opacity-value').textContent = e.target.value;
|
|
saveMarkedStyleSettings();
|
|
refreshMarkedCellStyles();
|
|
});
|
|
|
|
// --- Add Event Listeners for Default Cell Style Controls ---
|
|
document.getElementById('cell-border-color-picker').addEventListener('input', () => {
|
|
saveCellStyleSettings();
|
|
refreshCellStyles(); // Update all non-marked cells
|
|
});
|
|
document.getElementById('cell-border-opacity-slider').addEventListener('input', (e) => {
|
|
if(document.getElementById('cell-border-opacity-value')) document.getElementById('cell-border-opacity-value').textContent = e.target.value;
|
|
saveCellStyleSettings();
|
|
refreshCellStyles(); // Update all non-marked cells
|
|
});
|
|
document.getElementById('cell-background-color-picker').addEventListener('input', () => {
|
|
saveCellStyleSettings();
|
|
refreshCellStyles();
|
|
});
|
|
document.getElementById('cell-background-opacity-slider').addEventListener('input', (e) => {
|
|
if(document.getElementById('cell-background-opacity-value')) document.getElementById('cell-background-opacity-value').textContent = e.target.value;
|
|
saveCellStyleSettings();
|
|
refreshCellStyles();
|
|
});
|
|
document.getElementById('cell-background-image-url-input').addEventListener('input', () => {
|
|
saveCellStyleSettings();
|
|
refreshCellStyles();
|
|
});
|
|
document.getElementById('cell-background-image-opacity-slider').addEventListener('input', (e) => {
|
|
if(document.getElementById('cell-background-image-opacity-value')) document.getElementById('cell-background-image-opacity-value').textContent = e.target.value;
|
|
saveCellStyleSettings();
|
|
refreshCellStyles();
|
|
});
|
|
|
|
// --- Add Event Listeners for Board Background Controls ---
|
|
document.getElementById('board-bg-color-picker').addEventListener('input', () => {
|
|
saveBoardBgSettings();
|
|
applyBoardBgStyle();
|
|
});
|
|
document.getElementById('board-bg-image-url-input').addEventListener('input', () => {
|
|
saveBoardBgSettings();
|
|
applyBoardBgStyle();
|
|
});
|
|
document.getElementById('board-bg-color-opacity-slider').addEventListener('input', (e) => {
|
|
if(document.getElementById('board-bg-color-opacity-value')) document.getElementById('board-bg-color-opacity-value').textContent = e.target.value;
|
|
saveBoardBgSettings();
|
|
applyBoardBgStyle();
|
|
});
|
|
|
|
// --- Other Listeners ---
|
|
window.addEventListener('resize', equalizeCellSizes);
|
|
equalizeCellSizes(); // Initial call after load
|
|
});
|