jyapayne/justbean
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add text outline

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2025-04-17 22:15:21 -06:00
commit 6567579acf
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
3 changed files with 377 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

3
beango/css/beango.css
View file

@ -77,7 +77,8 @@ body {
overflow-wrap: break-word; overflow-wrap: break-word;
hyphens: auto; hyphens: auto;
font-size: 1.5rem; /* Moved font size here */ font-size: 1.5rem; /* Moved font size here */
color: #000; /* Default text color (can be customized later if needed) */ color: var(--cell-text-color, #000);
text-shadow: var(--cell-text-outline, none);
position: relative; /* Needed for z-index */ position: relative; /* Needed for z-index */
z-index: 0; /* Place BELOW the pseudo-element */ z-index: 0; /* Place BELOW the pseudo-element */
/* Remove background to allow parent background to show */ /* Remove background to allow parent background to show */

150
beango/index.html
View file

@ -68,18 +68,18 @@
<details class="config-section" open> <details class="config-section" open>
<summary class="config-summary">Board Settings</summary> <summary class="config-summary">Board Settings</summary>
<div class="config-content space-y-4 pt-2"> <div class="config-content space-y-4 pt-2">
<div> <div>
<label for="board-size" class="block text-sm font-medium text-gray-700">Board Size (e.g., 5 for 5x5):</label> <label for="board-size" class="block text-sm font-medium text-gray-700">Board Size (e.g., 5 for 5x5):</label>
<input type="number" id="board-size" name="board-size" min="1" value="5" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"> <input type="number" id="board-size" name="board-size" min="1" value="5" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm">
</div> </div>
<div> <div>
<label for="cell-contents" class="block text-sm font-medium text-gray-700">Cell Contents (one item per line):</label> <label for="cell-contents" class="block text-sm font-medium text-gray-700">Cell Contents (one item per line):</label>
<textarea id="cell-contents" name="cell-contents" rows="10" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm" placeholder="Enter bingo items here, one per line..."></textarea> <textarea id="cell-contents" name="cell-contents" rows="10" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm" placeholder="Enter bingo items here, one per line..."></textarea>
</div> </div>
<div> <div>
<label for="file-input" class="block text-sm font-medium text-gray-700">Or Upload File:</label> <label for="file-input" class="block text-sm font-medium text-gray-700">Or Upload File:</label>
<input type="file" id="file-input" name="file-input" accept=".txt" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-green-50 file:text-green-700 hover:file:bg-green-100"> <input type="file" id="file-input" name="file-input" accept=".txt" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-green-50 file:text-green-700 hover:file:bg-green-100">
</div> </div>
<!-- Moved Buttons --> <!-- Moved Buttons -->
<button onclick="generateBoard()" class="w-full mt-4 bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"> <button onclick="generateBoard()" class="w-full mt-4 bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
Apply Settings & Generate Apply Settings & Generate
@ -128,18 +128,18 @@
<details class="config-section"> <details class="config-section">
<summary class="config-summary">Background Style</summary> <summary class="config-summary">Background Style</summary>
<div class="config-content space-y-4 pt-2"> <div class="config-content space-y-4 pt-2">
<div class="mt-1 flex space-x-4"> <div class="mt-1 flex space-x-4">
<label class="inline-flex items-center"> <label class="inline-flex items-center">
<input type="radio" class="form-radio text-green-600" name="background-type" value="solid"> <input type="radio" class="form-radio text-green-600" name="background-type" value="solid">
<span class="ml-2">Solid</span> <span class="ml-2">Solid</span>
</label> </label>
<label class="inline-flex items-center"> <label class="inline-flex items-center">
<input type="radio" class="form-radio text-green-600" name="background-type" value="gradient" checked> <input type="radio" class="form-radio text-green-600" name="background-type" value="gradient" checked>
<span class="ml-2">Gradient</span> <span class="ml-2">Gradient</span>
</label> </label>
</div> </div>
<div id="solid-color-settings"> <div id="solid-color-settings">
<label for="background-color-picker" class="block text-sm font-medium text-gray-700">Background Color:</label> <label for="background-color-picker" class="block text-sm font-medium text-gray-700">Background Color:</label>
<div class="flex items-center space-x-2 mt-1"> <div class="flex items-center space-x-2 mt-1">
<input type="color" id="background-color-picker" name="background-color-picker" value="#ff7e5f" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow"> <input type="color" id="background-color-picker" name="background-color-picker" value="#ff7e5f" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
<div class="w-28 flex flex-col items-center"> <div class="w-28 flex flex-col items-center">
@ -147,10 +147,10 @@
<input type="range" id="background-color-opacity-slider" name="background-color-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"> <input type="range" id="background-color-opacity-slider" name="background-color-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div> </div>
</div> </div>
</div> </div>
<div id="gradient-color-settings" class="space-y-2 hidden"> <div id="gradient-color-settings" class="space-y-2 hidden">
<div> <div>
<label for="gradient-color-1" class="block text-sm font-medium text-gray-700">Gradient Start Color:</label> <label for="gradient-color-1" class="block text-sm font-medium text-gray-700">Gradient Start Color:</label>
<div class="flex items-center space-x-2 mt-1"> <div class="flex items-center space-x-2 mt-1">
<input type="color" id="gradient-color-1" name="gradient-color-1" value="#ff7e5f" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow"> <input type="color" id="gradient-color-1" name="gradient-color-1" value="#ff7e5f" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
<div class="w-28 flex flex-col items-center"> <div class="w-28 flex flex-col items-center">
@ -158,9 +158,9 @@
<input type="range" id="gradient-color-1-opacity-slider" name="gradient-color-1-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"> <input type="range" id="gradient-color-1-opacity-slider" name="gradient-color-1-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<label for="gradient-color-2" class="block text-sm font-medium text-gray-700">Gradient End Color:</label> <label for="gradient-color-2" class="block text-sm font-medium text-gray-700">Gradient End Color:</label>
<div class="flex items-center space-x-2 mt-1"> <div class="flex items-center space-x-2 mt-1">
<input type="color" id="gradient-color-2" name="gradient-color-2" value="#feb47b" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow"> <input type="color" id="gradient-color-2" name="gradient-color-2" value="#feb47b" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
<div class="w-28 flex flex-col items-center"> <div class="w-28 flex flex-col items-center">
@ -168,21 +168,21 @@
<input type="range" id="gradient-color-2-opacity-slider" name="gradient-color-2-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"> <input type="range" id="gradient-color-2-opacity-slider" name="gradient-color-2-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<label for="gradient-direction" class="block text-sm font-medium text-gray-700">Gradient Direction:</label> <label for="gradient-direction" class="block text-sm font-medium text-gray-700">Gradient Direction:</label>
<select id="gradient-direction" name="gradient-direction" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"> <select id="gradient-direction" name="gradient-direction" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm">
<option value="to bottom">Top to Bottom</option> <option value="to bottom">Top to Bottom</option>
<option value="to right">Left to Right</option> <option value="to right">Left to Right</option>
<option value="to top">Bottom to Top</option> <option value="to top">Bottom to Top</option>
<option value="to left">Right to Left</option> <option value="to left">Right to Left</option>
<option value="to top right">Bottom Left to Top Right</option> <option value="to top right">Bottom Left to Top Right</option>
<option value="to bottom left">Top Right to Bottom Left</option> <option value="to bottom left">Top Right to Bottom Left</option>
<option value="135deg" selected>Diagonal (135deg)</option> <option value="135deg" selected>Diagonal (135deg)</option>
<option value="radial">Radial (Circle)</option> <option value="radial">Radial (Circle)</option>
</select> </select>
</div> </div>
</div> </div>
</div> </div>
</details> </details>
@ -218,6 +218,36 @@
</div> </div>
</div> </div>
</div> </div>
<!-- START Text Style Settings for Marked Cells -->
<div class="border-t pt-4 mt-4 space-y-2">
<label class="block text-sm font-medium text-gray-700 mb-1">Text Style (Marked):</label>
<div>
<label for="marked-cell-text-color-picker" class="block text-xs font-medium text-gray-700">Text Color:</label>
<div class="flex items-center space-x-2 mt-1">
<input type="color" id="marked-cell-text-color-picker" name="marked-cell-text-color-picker" value="#000000" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
<div class="w-28 flex flex-col items-center">
<label for="marked-cell-text-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="marked-cell-text-opacity-value">100</span>%</label>
<input type="range" id="marked-cell-text-opacity-slider" name="marked-cell-text-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div>
</div>
</div>
<div>
<label for="marked-cell-outline-color-picker" class="block text-xs font-medium text-gray-700">Outline Color:</label>
<div class="flex items-center space-x-2 mt-1">
<input type="color" id="marked-cell-outline-color-picker" name="marked-cell-outline-color-picker" value="#ffffff" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
<div class="w-28 flex flex-col items-center">
<label for="marked-cell-outline-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="marked-cell-outline-opacity-value">100</span>%</label>
<input type="range" id="marked-cell-outline-opacity-slider" name="marked-cell-outline-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div>
</div>
</div>
<div>
<label for="marked-cell-outline-width-input" class="block text-xs font-medium text-gray-700">Outline Width (px):</label>
<input type="number" id="marked-cell-outline-width-input" name="marked-cell-outline-width-input" min="0" max="5" step="0.5" value="0" class="mt-1 block w-full px-2 py-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 text-sm">
<p class="mt-1 text-xs text-gray-500">Set width to 0 to disable outline for marked cells.</p>
</div>
</div>
<!-- END Text Style Settings for Marked Cells -->
</div> </div>
</details> </details>
@ -252,6 +282,34 @@
<input type="range" id="cell-background-image-opacity-slider" name="cell-background-image-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"> <input type="range" id="cell-background-image-opacity-slider" name="cell-background-image-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div> </div>
</div> </div>
<!-- Text Style Settings -->
<div class="border-t pt-4 mt-4 space-y-2">
<label class="block text-sm font-medium text-gray-700 mb-1">Text Style:</label>
<div>
<label for="cell-text-color-picker" class="block text-xs font-medium text-gray-700">Text Color:</label>
<div class="flex items-center space-x-2 mt-1">
<input type="color" id="cell-text-color-picker" name="cell-text-color-picker" value="#000000" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
<div class="w-28 flex flex-col items-center">
<label for="cell-text-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="cell-text-opacity-value">100</span>%</label>
<input type="range" id="cell-text-opacity-slider" name="cell-text-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div>
</div>
</div>
<div>
<label for="cell-outline-color-picker" class="block text-xs font-medium text-gray-700">Outline Color:</label>
<div class="flex items-center space-x-2 mt-1">
<input type="color" id="cell-outline-color-picker" name="cell-outline-color-picker" value="#ffffff" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
<div class="w-28 flex flex-col items-center">
<label for="cell-outline-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="cell-outline-opacity-value">100</span>%</label>
<input type="range" id="cell-outline-opacity-slider" name="cell-outline-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div>
</div>
</div>
<div>
<label for="cell-outline-width-input" class="block text-xs font-medium text-gray-700">Outline Width (px):</label>
<input type="number" id="cell-outline-width-input" name="cell-outline-width-input" min="0" max="5" step="0.5" value="1" class="mt-1 block w-full px-2 py-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 text-sm">
</div>
</div>
</div> </div>
</details> </details>

314
beango/js/beango.js
View file

@ -33,11 +33,21 @@ const LS_CELL_BG_COLOR = 'beango_cellBgColor';
const LS_CELL_BG_OPACITY = 'beango_cellBgOpacity'; // New const LS_CELL_BG_OPACITY = 'beango_cellBgOpacity'; // New
const LS_CELL_BG_IMAGE_URL = 'beango_cellBgImageUrl'; const LS_CELL_BG_IMAGE_URL = 'beango_cellBgImageUrl';
const LS_CELL_BG_IMAGE_OPACITY = 'beango_cellBgImageOpacity'; // New const LS_CELL_BG_IMAGE_OPACITY = 'beango_cellBgImageOpacity'; // New
const LS_CELL_TEXT_COLOR = 'beango_cellTextColor';
const LS_CELL_TEXT_OPACITY = 'beango_cellTextOpacity';
const LS_CELL_OUTLINE_COLOR = 'beango_cellOutlineColor';
const LS_CELL_OUTLINE_OPACITY = 'beango_cellOutlineOpacity';
const LS_CELL_OUTLINE_WIDTH = 'beango_cellOutlineWidth';
const LS_MARKED_BORDER_COLOR = 'beango_markedBorderColor'; const LS_MARKED_BORDER_COLOR = 'beango_markedBorderColor';
const LS_MARKED_BORDER_OPACITY = 'beango_markedBorderOpacity'; // New const LS_MARKED_BORDER_OPACITY = 'beango_markedBorderOpacity'; // New
const LS_BOARD_BG_COLOR = 'beango_boardBgColor'; 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_COLOR_OPACITY = 'beango_boardBgColorOpacity'; // New (replaces LS_BOARD_BG_OPACITY)
const LS_BOARD_BG_IMAGE_URL = 'beango_boardBgImageUrl'; const LS_BOARD_BG_IMAGE_URL = 'beango_boardBgImageUrl';
const LS_MARKED_CELL_TEXT_COLOR = 'beango_markedCellTextColor';
const LS_MARKED_CELL_TEXT_OPACITY = 'beango_markedCellTextOpacity';
const LS_MARKED_CELL_OUTLINE_COLOR = 'beango_markedCellOutlineColor';
const LS_MARKED_CELL_OUTLINE_OPACITY = 'beango_markedCellOutlineOpacity';
const LS_MARKED_CELL_OUTLINE_WIDTH = 'beango_markedCellOutlineWidth';
// --- Default Values --- // --- Default Values ---
const DEFAULT_SOLID_COLOR = '#ff7e5f'; // Default to first color of gradient const DEFAULT_SOLID_COLOR = '#ff7e5f'; // Default to first color of gradient
@ -63,11 +73,21 @@ const DEFAULT_CELL_BG_COLOR = '#F5F5DC'; // Default beige
const DEFAULT_CELL_BG_OPACITY = 100; // New const DEFAULT_CELL_BG_OPACITY = 100; // New
const DEFAULT_CELL_BG_IMAGE_URL = ''; // Default no image const DEFAULT_CELL_BG_IMAGE_URL = ''; // Default no image
const DEFAULT_CELL_BG_IMAGE_OPACITY = 100; // New const DEFAULT_CELL_BG_IMAGE_OPACITY = 100; // New
const DEFAULT_CELL_TEXT_COLOR = '#000000';
const DEFAULT_CELL_TEXT_OPACITY = 100;
const DEFAULT_CELL_OUTLINE_COLOR = '#ffffff';
const DEFAULT_CELL_OUTLINE_OPACITY = 100;
const DEFAULT_CELL_OUTLINE_WIDTH = 1; // Default 1px
const DEFAULT_MARKED_BORDER_COLOR = '#ca8a04'; // Default darker yellow/orange (Tailwind yellow-600) const DEFAULT_MARKED_BORDER_COLOR = '#ca8a04'; // Default darker yellow/orange (Tailwind yellow-600)
const DEFAULT_MARKED_BORDER_OPACITY = 100; // New const DEFAULT_MARKED_BORDER_OPACITY = 100; // New
const DEFAULT_BOARD_BG_COLOR = '#ffffff'; // Default white 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_COLOR_OPACITY = 100; // New (replaces DEFAULT_BOARD_BG_OPACITY)
const DEFAULT_BOARD_BG_IMAGE_URL = ''; // Default no image const DEFAULT_BOARD_BG_IMAGE_URL = ''; // Default no image
const DEFAULT_MARKED_CELL_TEXT_COLOR = '#000000';
const DEFAULT_MARKED_CELL_TEXT_OPACITY = 100;
const DEFAULT_MARKED_CELL_OUTLINE_COLOR = '#ffffff';
const DEFAULT_MARKED_CELL_OUTLINE_OPACITY = 100;
const DEFAULT_MARKED_CELL_OUTLINE_WIDTH = 1; // Default 1px (no outline for marked)
// --- Notification Function --- // --- Notification Function ---
function showNotification(message, type = 'info', duration = 3000) { function showNotification(message, type = 'info', duration = 3000) {
@ -271,6 +291,13 @@ function saveMarkedStyleSettings() {
// Save marked border color and its 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_COLOR, document.getElementById('marked-border-color-picker').value);
localStorage.setItem(LS_MARKED_BORDER_OPACITY, document.getElementById('marked-border-opacity-slider').value); localStorage.setItem(LS_MARKED_BORDER_OPACITY, document.getElementById('marked-border-opacity-slider').value);
// Save marked text styles
localStorage.setItem(LS_MARKED_CELL_TEXT_COLOR, document.getElementById('marked-cell-text-color-picker').value);
localStorage.setItem(LS_MARKED_CELL_TEXT_OPACITY, document.getElementById('marked-cell-text-opacity-slider').value);
localStorage.setItem(LS_MARKED_CELL_OUTLINE_COLOR, document.getElementById('marked-cell-outline-color-picker').value);
localStorage.setItem(LS_MARKED_CELL_OUTLINE_OPACITY, document.getElementById('marked-cell-outline-opacity-slider').value);
localStorage.setItem(LS_MARKED_CELL_OUTLINE_WIDTH, document.getElementById('marked-cell-outline-width-input').value);
} }
// --- Apply saved marked styles to a cell --- // --- Apply saved marked styles to a cell ---
@ -309,8 +336,42 @@ function applyMarkedCellStyle(cell) {
cell.style.removeProperty('--bg-image-url'); cell.style.removeProperty('--bg-image-url');
} }
// Apply marked text styles
const textSpan = cell.querySelector('.bingo-cell-text');
if (textSpan) {
const textColor = localStorage.getItem(LS_MARKED_CELL_TEXT_COLOR) || DEFAULT_MARKED_CELL_TEXT_COLOR;
const textOpacity = parseInt(localStorage.getItem(LS_MARKED_CELL_TEXT_OPACITY) || DEFAULT_MARKED_CELL_TEXT_OPACITY, 10);
const outlineColor = localStorage.getItem(LS_MARKED_CELL_OUTLINE_COLOR) || DEFAULT_MARKED_CELL_OUTLINE_COLOR;
const outlineOpacity = parseInt(localStorage.getItem(LS_MARKED_CELL_OUTLINE_OPACITY) || DEFAULT_MARKED_CELL_OUTLINE_OPACITY, 10);
let outlineWidth = parseFloat(localStorage.getItem(LS_MARKED_CELL_OUTLINE_WIDTH));
// Default check: // Add log before default check
if (isNaN(outlineWidth) || outlineWidth < 0) {
outlineWidth = DEFAULT_MARKED_CELL_OUTLINE_WIDTH;
}
const rgbaTextColor = hexToRgba(textColor, textOpacity);
textSpan.style.color = rgbaTextColor; // Override default style
if (outlineWidth > 0) {
const rgbaOutlineColor = hexToRgba(outlineColor, outlineOpacity);
const shadow = `
-${outlineWidth}px -${outlineWidth}px 0 ${rgbaOutlineColor},
${outlineWidth}px -${outlineWidth}px 0 ${rgbaOutlineColor},
-${outlineWidth}px ${outlineWidth}px 0 ${rgbaOutlineColor},
${outlineWidth}px ${outlineWidth}px 0 ${rgbaOutlineColor},
${outlineWidth}px 0 0 ${rgbaOutlineColor},
-${outlineWidth}px 0 0 ${rgbaOutlineColor},
0 ${outlineWidth}px 0 ${rgbaOutlineColor},
0 -${outlineWidth}px 0 ${rgbaOutlineColor}
`;
textSpan.style.textShadow = shadow; // Override default style
} else {
textSpan.style.textShadow = "none"; // Override default style
}
}
} else { } else {
// If unmarked, re-apply default styles (which resets bg color, bg image, border color) // If unmarked, re-apply default styles (which resets bg color, bg image, border color, and TEXT styles)
applyCellStyle(cell); applyCellStyle(cell);
} }
} }
@ -424,36 +485,74 @@ function saveCellStyleSettings() {
localStorage.setItem(LS_CELL_BG_OPACITY, document.getElementById('cell-background-opacity-slider').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_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 localStorage.setItem(LS_CELL_BG_IMAGE_OPACITY, document.getElementById('cell-background-image-opacity-slider').value); // Save image opacity
// Save text styles
localStorage.setItem(LS_CELL_TEXT_COLOR, document.getElementById('cell-text-color-picker').value);
localStorage.setItem(LS_CELL_TEXT_OPACITY, document.getElementById('cell-text-opacity-slider').value);
localStorage.setItem(LS_CELL_OUTLINE_COLOR, document.getElementById('cell-outline-color-picker').value);
localStorage.setItem(LS_CELL_OUTLINE_OPACITY, document.getElementById('cell-outline-opacity-slider').value);
localStorage.setItem(LS_CELL_OUTLINE_WIDTH, document.getElementById('cell-outline-width-input').value);
} }
// --- Apply saved default cell styles to a cell --- // --- Apply saved default cell styles to a cell ---
function applyCellStyle(cell) { function applyCellStyle(cell) {
if (!cell || cell.classList.contains('marked')) return; // Only apply to non-marked cells if (!cell || cell.classList.contains('marked')) return; // Only apply to non-marked cells
// Borders
const borderColor = localStorage.getItem(LS_CELL_BORDER_COLOR) || DEFAULT_CELL_BORDER_COLOR; 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 borderOpacity = parseInt(localStorage.getItem(LS_CELL_BORDER_OPACITY) || DEFAULT_CELL_BORDER_OPACITY, 10);
cell.style.borderColor = hexToRgba(borderColor, borderOpacity);
// Background Color / Image
const bgColor = localStorage.getItem(LS_CELL_BG_COLOR) || DEFAULT_CELL_BG_COLOR; 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 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 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); const bgImageOpacity = parseInt(localStorage.getItem(LS_CELL_BG_IMAGE_OPACITY) || DEFAULT_CELL_BG_IMAGE_OPACITY, 10);
cell.style.opacity = ''; // Reset direct opacity
cell.style.borderColor = hexToRgba(borderColor, borderOpacity);
cell.style.opacity = ''; // Reset direct opacity, handled by color
if (bgImageUrl) { if (bgImageUrl) {
cell.style.setProperty('--bg-image-url', `url('${bgImageUrl}')`); // NEW: Set CSS custom property cell.style.setProperty('--bg-image-url', `url('${bgImageUrl}')`);
cell.style.setProperty('--bg-image-opacity', bgImageOpacity / 100); // Set image opacity 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); cell.style.backgroundColor = hexToRgba(bgColor, bgOpacity);
} else { } else {
// Clear image properties if no URL
cell.style.removeProperty('--bg-image-url'); // NEW: Remove CSS custom property cell.style.removeProperty('--bg-image-url'); // NEW: Remove CSS custom property
cell.style.removeProperty('--bg-image-opacity'); // Remove image opacity property cell.style.removeProperty('--bg-image-opacity'); // Remove image opacity property
cell.style.backgroundColor = hexToRgba(bgColor, bgOpacity); cell.style.backgroundColor = hexToRgba(bgColor, bgOpacity);
} }
// Text Styles
const textSpan = cell.querySelector('.bingo-cell-text');
if (textSpan) {
const textColor = localStorage.getItem(LS_CELL_TEXT_COLOR) || DEFAULT_CELL_TEXT_COLOR;
const textOpacity = parseInt(localStorage.getItem(LS_CELL_TEXT_OPACITY) || DEFAULT_CELL_TEXT_OPACITY, 10);
const outlineColor = localStorage.getItem(LS_CELL_OUTLINE_COLOR) || DEFAULT_CELL_OUTLINE_COLOR;
const outlineOpacity = parseInt(localStorage.getItem(LS_CELL_OUTLINE_OPACITY) || DEFAULT_CELL_OUTLINE_OPACITY, 10);
let outlineWidth = parseFloat(localStorage.getItem(LS_CELL_OUTLINE_WIDTH));
if (isNaN(outlineWidth) || outlineWidth < 0) outlineWidth = DEFAULT_CELL_OUTLINE_WIDTH;
const rgbaTextColor = hexToRgba(textColor, textOpacity);
textSpan.style.color = rgbaTextColor;
textSpan.style.setProperty('--cell-text-color', rgbaTextColor);
if (outlineWidth > 0) {
const rgbaOutlineColor = hexToRgba(outlineColor, outlineOpacity);
// Create outline using multiple text shadows
const shadow = `
-${outlineWidth}px -${outlineWidth}px 0 ${rgbaOutlineColor},
${outlineWidth}px -${outlineWidth}px 0 ${rgbaOutlineColor},
-${outlineWidth}px ${outlineWidth}px 0 ${rgbaOutlineColor},
${outlineWidth}px ${outlineWidth}px 0 ${rgbaOutlineColor},
${outlineWidth}px 0 0 ${rgbaOutlineColor},
-${outlineWidth}px 0 0 ${rgbaOutlineColor},
0 ${outlineWidth}px 0 ${rgbaOutlineColor},
0 -${outlineWidth}px 0 ${rgbaOutlineColor}
`;
textSpan.style.textShadow = shadow;
textSpan.style.setProperty('--cell-text-outline', shadow);
} else {
textSpan.style.textShadow = 'none';
textSpan.style.removeProperty('--cell-text-outline');
}
}
} }
// --- Re-apply default styles to all non-marked cells --- // --- Re-apply default styles to all non-marked cells ---
@ -864,8 +963,18 @@ function loadFromLocalStorage() {
const savedCellBgImageUrl = localStorage.getItem(LS_CELL_BG_IMAGE_URL) || DEFAULT_CELL_BG_IMAGE_URL; 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; 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 console.log(`LOAD: LS_CELL_BG_IMAGE_OPACITY = ${localStorage.getItem(LS_CELL_BG_IMAGE_OPACITY)}, using: ${savedCellBgImageOpacity}`); // DEBUG LOG
const savedCellTextColor = localStorage.getItem(LS_CELL_TEXT_COLOR) || DEFAULT_CELL_TEXT_COLOR;
const savedCellTextOpacity = localStorage.getItem(LS_CELL_TEXT_OPACITY) || DEFAULT_CELL_TEXT_OPACITY;
const savedCellOutlineColor = localStorage.getItem(LS_CELL_OUTLINE_COLOR) || DEFAULT_CELL_OUTLINE_COLOR;
const savedCellOutlineOpacity = localStorage.getItem(LS_CELL_OUTLINE_OPACITY) || DEFAULT_CELL_OUTLINE_OPACITY;
const savedCellOutlineWidth = localStorage.getItem(LS_CELL_OUTLINE_WIDTH) || DEFAULT_CELL_OUTLINE_WIDTH;
const savedMarkedBorderColor = localStorage.getItem(LS_MARKED_BORDER_COLOR) || DEFAULT_MARKED_BORDER_COLOR; 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 savedMarkedBorderOpacity = localStorage.getItem(LS_MARKED_BORDER_OPACITY) || DEFAULT_MARKED_BORDER_OPACITY;
const savedMarkedCellTextColor = localStorage.getItem(LS_MARKED_CELL_TEXT_COLOR) || DEFAULT_MARKED_CELL_TEXT_COLOR;
const savedMarkedCellTextOpacity = localStorage.getItem(LS_MARKED_CELL_TEXT_OPACITY) || DEFAULT_MARKED_CELL_TEXT_OPACITY;
const savedMarkedCellOutlineColor = localStorage.getItem(LS_MARKED_CELL_OUTLINE_COLOR) || DEFAULT_MARKED_CELL_OUTLINE_COLOR;
const savedMarkedCellOutlineOpacity = localStorage.getItem(LS_MARKED_CELL_OUTLINE_OPACITY) || DEFAULT_MARKED_CELL_OUTLINE_OPACITY;
const savedMarkedCellOutlineWidth = localStorage.getItem(LS_MARKED_CELL_OUTLINE_WIDTH) || DEFAULT_MARKED_CELL_OUTLINE_WIDTH;
const savedBoardBgColor = localStorage.getItem(LS_BOARD_BG_COLOR) || DEFAULT_BOARD_BG_COLOR; 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 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; const savedBoardBgImageUrl = localStorage.getItem(LS_BOARD_BG_IMAGE_URL) || DEFAULT_BOARD_BG_IMAGE_URL;
@ -935,12 +1044,12 @@ function loadFromLocalStorage() {
const markedIndices = savedMarkedIndices ? JSON.parse(savedMarkedIndices) : []; const markedIndices = savedMarkedIndices ? JSON.parse(savedMarkedIndices) : [];
displayedItems.forEach((item, index) => { displayedItems.forEach((item, index) => {
const cell = document.createElement('div'); const cell = document.createElement("div");
cell.classList.add('bingo-cell', 'cursor-pointer'); cell.classList.add("bingo-cell", "cursor-pointer");
// cell.textContent = item; // OLD WAY // cell.textContent = item; // OLD WAY
cell.dataset.index = index; // Ensure index is set for loading marks correctly cell.dataset.index = index; // Ensure index is set for loading marks correctly
cell.onclick = () => selectCell(cell); cell.onclick = () => selectCell(cell);
applyCellStyle(cell); // Apply default cell style first // applyCellStyle(cell); // Apply default cell style first <-- MOVED DOWN
// NEW: Create span for text content // NEW: Create span for text content
const textSpan = document.createElement("span"); const textSpan = document.createElement("span");
@ -948,8 +1057,10 @@ function loadFromLocalStorage() {
textSpan.textContent = item; textSpan.textContent = item;
cell.appendChild(textSpan); cell.appendChild(textSpan);
applyCellStyle(cell); // <-- MOVED HERE: Apply styles AFTER text span exists
if (markedIndices.includes(index)) { if (markedIndices.includes(index)) {
cell.classList.add('marked'); // Apply saved mark using \'marked\' class cell.classList.add("marked"); // Apply saved mark using 'marked' class
// Apply dynamic marked styles AFTER adding the class and default styles // Apply dynamic marked styles AFTER adding the class and default styles
applyMarkedCellStyle(cell); applyMarkedCellStyle(cell);
} }
@ -1022,6 +1133,21 @@ function loadFromLocalStorage() {
if (markedBorderOpacitySlider) markedBorderOpacitySlider.value = savedMarkedBorderOpacity; if (markedBorderOpacitySlider) markedBorderOpacitySlider.value = savedMarkedBorderOpacity;
if (markedBorderOpacityValueSpan) markedBorderOpacityValueSpan.textContent = savedMarkedBorderOpacity; if (markedBorderOpacityValueSpan) markedBorderOpacityValueSpan.textContent = savedMarkedBorderOpacity;
// Restore marked text styles
document.getElementById('marked-cell-text-color-picker').value = savedMarkedCellTextColor;
const markedCellTextOpacitySlider = document.getElementById('marked-cell-text-opacity-slider');
const markedCellTextOpacityValueSpan = document.getElementById('marked-cell-text-opacity-value');
if (markedCellTextOpacitySlider) markedCellTextOpacitySlider.value = savedMarkedCellTextOpacity;
if (markedCellTextOpacityValueSpan) markedCellTextOpacityValueSpan.textContent = savedMarkedCellTextOpacity;
document.getElementById('marked-cell-outline-color-picker').value = savedMarkedCellOutlineColor;
const markedCellOutlineOpacitySlider = document.getElementById('marked-cell-outline-opacity-slider');
const markedCellOutlineOpacityValueSpan = document.getElementById('marked-cell-outline-opacity-value');
if (markedCellOutlineOpacitySlider) markedCellOutlineOpacitySlider.value = savedMarkedCellOutlineOpacity;
if (markedCellOutlineOpacityValueSpan) markedCellOutlineOpacityValueSpan.textContent = savedMarkedCellOutlineOpacity;
document.getElementById('marked-cell-outline-width-input').value = savedMarkedCellOutlineWidth;
refreshMarkedCellStyles(); // Apply the loaded marked styles refreshMarkedCellStyles(); // Apply the loaded marked styles
// --- End Restore Marked Style Settings --- // --- End Restore Marked Style Settings ---
@ -1044,6 +1170,19 @@ function loadFromLocalStorage() {
if (cellBackgroundImageOpacitySlider) cellBackgroundImageOpacitySlider.value = savedCellBgImageOpacity; if (cellBackgroundImageOpacitySlider) cellBackgroundImageOpacitySlider.value = savedCellBgImageOpacity;
if (cellBackgroundImageOpacityValueSpan) cellBackgroundImageOpacityValueSpan.textContent = savedCellBgImageOpacity; if (cellBackgroundImageOpacityValueSpan) cellBackgroundImageOpacityValueSpan.textContent = savedCellBgImageOpacity;
// Restore text styles
document.getElementById('cell-text-color-picker').value = savedCellTextColor;
const cellTextOpacitySlider = document.getElementById('cell-text-opacity-slider');
const cellTextOpacityValueSpan = document.getElementById('cell-text-opacity-value');
if (cellTextOpacitySlider) cellTextOpacitySlider.value = savedCellTextOpacity;
if (cellTextOpacityValueSpan) cellTextOpacityValueSpan.textContent = savedCellTextOpacity;
document.getElementById('cell-outline-color-picker').value = savedCellOutlineColor;
const cellOutlineOpacitySlider = document.getElementById('cell-outline-opacity-slider');
const cellOutlineOpacityValueSpan = document.getElementById('cell-outline-opacity-value');
if (cellOutlineOpacitySlider) cellOutlineOpacitySlider.value = savedCellOutlineOpacity;
if (cellOutlineOpacityValueSpan) cellOutlineOpacityValueSpan.textContent = savedCellOutlineOpacity;
document.getElementById('cell-outline-width-input').value = savedCellOutlineWidth;
// Styles are applied during board creation loop above // Styles are applied during board creation loop above
// --- End Restore Default Cell Style Settings --- // --- End Restore Default Cell Style Settings ---
@ -1111,6 +1250,30 @@ function loadFromLocalStorage() {
refreshCellStyles(); refreshCellStyles();
}); });
// --- Add Event Listeners for Text Style Controls ---
document.getElementById('cell-text-color-picker').addEventListener('input', () => {
saveCellStyleSettings();
refreshCellStyles();
});
document.getElementById('cell-text-opacity-slider').addEventListener('input', (e) => {
if(document.getElementById('cell-text-opacity-value')) document.getElementById('cell-text-opacity-value').textContent = e.target.value;
saveCellStyleSettings();
refreshCellStyles();
});
document.getElementById('cell-outline-color-picker').addEventListener('input', () => {
saveCellStyleSettings();
refreshCellStyles();
});
document.getElementById('cell-outline-opacity-slider').addEventListener('input', (e) => {
if(document.getElementById('cell-outline-opacity-value')) document.getElementById('cell-outline-opacity-value').textContent = e.target.value;
saveCellStyleSettings();
refreshCellStyles();
});
document.getElementById('cell-outline-width-input').addEventListener('input', () => {
saveCellStyleSettings();
refreshCellStyles();
});
// --- Add Event Listeners for Board Background Controls --- // --- Add Event Listeners for Board Background Controls ---
document.getElementById('board-bg-color-picker').addEventListener('input', () => { document.getElementById('board-bg-color-picker').addEventListener('input', () => {
saveBoardBgSettings(); saveBoardBgSettings();
@ -1158,37 +1321,78 @@ function loadFromLocalStorage() {
// --- Other Listeners --- // --- Other Listeners ---
window.addEventListener('resize', equalizeCellSizes); window.addEventListener('resize', equalizeCellSizes);
equalizeCellSizes(); // Initial call after load equalizeCellSizes(); // Initial call after load
// --- Add Event Listeners for Marked Text Style Controls ---
document.getElementById("marked-cell-text-color-picker").addEventListener("input", () => {
saveMarkedStyleSettings();
refreshMarkedCellStyles();
});
document.getElementById("marked-cell-text-opacity-slider").addEventListener("input", (e) => {
if(document.getElementById("marked-cell-text-opacity-value")) document.getElementById("marked-cell-text-opacity-value").textContent = e.target.value;
saveMarkedStyleSettings();
refreshMarkedCellStyles();
});
document.getElementById("marked-cell-outline-color-picker").addEventListener("input", () => {
saveMarkedStyleSettings();
refreshMarkedCellStyles();
});
document.getElementById("marked-cell-outline-opacity-slider").addEventListener("input", (e) => {
if(document.getElementById("marked-cell-outline-opacity-value")) document.getElementById("marked-cell-outline-opacity-value").textContent = e.target.value;
saveMarkedStyleSettings();
refreshMarkedCellStyles();
});
document.getElementById("marked-cell-outline-width-input").addEventListener("input", () => {
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-text-color-picker").addEventListener("input", () => {
saveCellStyleSettings();
refreshCellStyles();
});
document.getElementById("cell-text-opacity-slider").addEventListener("input", (e) => {
if(document.getElementById("cell-text-opacity-value")) document.getElementById("cell-text-opacity-value").textContent = e.target.value;
saveCellStyleSettings();
refreshCellStyles();
});
document.getElementById("cell-outline-color-picker").addEventListener("input", () => {
saveCellStyleSettings();
refreshCellStyles();
});
document.getElementById("cell-outline-opacity-slider").addEventListener("input", (e) => {
if(document.getElementById("cell-outline-opacity-value")) document.getElementById("cell-outline-opacity-value").textContent = e.target.value;
saveCellStyleSettings();
refreshCellStyles();
});
document.getElementById("cell-outline-width-input").addEventListener("input", () => {
saveCellStyleSettings();
refreshCellStyles();
});
} }
// --- 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 to make all cells square and equal size ---
function equalizeCellSizes() { function equalizeCellSizes() {
const board = document.getElementById("bingo-board"); const board = document.getElementById("bingo-board");
@ -1450,6 +1654,30 @@ document.addEventListener('DOMContentLoaded', () => {
refreshCellStyles(); refreshCellStyles();
}); });
// --- Add Event Listeners for Text Style Controls ---
document.getElementById('cell-text-color-picker').addEventListener('input', () => {
saveCellStyleSettings();
refreshCellStyles();
});
document.getElementById('cell-text-opacity-slider').addEventListener('input', (e) => {
if(document.getElementById('cell-text-opacity-value')) document.getElementById('cell-text-opacity-value').textContent = e.target.value;
saveCellStyleSettings();
refreshCellStyles();
});
document.getElementById('cell-outline-color-picker').addEventListener('input', () => {
saveCellStyleSettings();
refreshCellStyles();
});
document.getElementById('cell-outline-opacity-slider').addEventListener('input', (e) => {
if(document.getElementById('cell-outline-opacity-value')) document.getElementById('cell-outline-opacity-value').textContent = e.target.value;
saveCellStyleSettings();
refreshCellStyles();
});
document.getElementById('cell-outline-width-input').addEventListener('input', () => {
saveCellStyleSettings();
refreshCellStyles();
});
// --- Add Event Listeners for Board Background Controls --- // --- Add Event Listeners for Board Background Controls ---
document.getElementById('board-bg-color-picker').addEventListener('input', () => { document.getElementById('board-bg-color-picker').addEventListener('input', () => {
saveBoardBgSettings(); saveBoardBgSettings();