Add text outline
This commit is contained in:
parent
d72a2c6c05
commit
6567579acf
3 changed files with 377 additions and 90 deletions
|
|
@ -77,7 +77,8 @@ body {
|
|||
overflow-wrap: break-word;
|
||||
hyphens: auto;
|
||||
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 */
|
||||
z-index: 0; /* Place BELOW the pseudo-element */
|
||||
/* Remove background to allow parent background to show */
|
||||
|
|
|
|||
|
|
@ -68,18 +68,18 @@
|
|||
<details class="config-section" open>
|
||||
<summary class="config-summary">Board Settings</summary>
|
||||
<div class="config-content space-y-4 pt-2">
|
||||
<div>
|
||||
<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">
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<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">
|
||||
</div>
|
||||
<div>
|
||||
<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">
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<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">
|
||||
</div>
|
||||
<!-- 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">
|
||||
Apply Settings & Generate
|
||||
|
|
@ -128,18 +128,18 @@
|
|||
<details class="config-section">
|
||||
<summary class="config-summary">Background Style</summary>
|
||||
<div class="config-content space-y-4 pt-2">
|
||||
<div class="mt-1 flex space-x-4">
|
||||
<label class="inline-flex items-center">
|
||||
<input type="radio" class="form-radio text-green-600" name="background-type" value="solid">
|
||||
<span class="ml-2">Solid</span>
|
||||
</label>
|
||||
<label class="inline-flex items-center">
|
||||
<input type="radio" class="form-radio text-green-600" name="background-type" value="gradient" checked>
|
||||
<span class="ml-2">Gradient</span>
|
||||
</label>
|
||||
</div>
|
||||
<div id="solid-color-settings">
|
||||
<label for="background-color-picker" class="block text-sm font-medium text-gray-700">Background Color:</label>
|
||||
<div class="mt-1 flex space-x-4">
|
||||
<label class="inline-flex items-center">
|
||||
<input type="radio" class="form-radio text-green-600" name="background-type" value="solid">
|
||||
<span class="ml-2">Solid</span>
|
||||
</label>
|
||||
<label class="inline-flex items-center">
|
||||
<input type="radio" class="form-radio text-green-600" name="background-type" value="gradient" checked>
|
||||
<span class="ml-2">Gradient</span>
|
||||
</label>
|
||||
</div>
|
||||
<div id="solid-color-settings">
|
||||
<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">
|
||||
<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">
|
||||
|
|
@ -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">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="gradient-color-settings" class="space-y-2 hidden">
|
||||
<div>
|
||||
<label for="gradient-color-1" class="block text-sm font-medium text-gray-700">Gradient Start Color:</label>
|
||||
</div>
|
||||
<div id="gradient-color-settings" class="space-y-2 hidden">
|
||||
<div>
|
||||
<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">
|
||||
<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">
|
||||
|
|
@ -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">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="gradient-color-2" class="block text-sm font-medium text-gray-700">Gradient End Color:</label>
|
||||
</div>
|
||||
<div>
|
||||
<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">
|
||||
<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">
|
||||
|
|
@ -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">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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">
|
||||
<option value="to bottom">Top to Bottom</option>
|
||||
<option value="to right">Left to Right</option>
|
||||
<option value="to top">Bottom to Top</option>
|
||||
<option value="to left">Right to Left</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="135deg" selected>Diagonal (135deg)</option>
|
||||
<option value="radial">Radial (Circle)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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">
|
||||
<option value="to bottom">Top to Bottom</option>
|
||||
<option value="to right">Left to Right</option>
|
||||
<option value="to top">Bottom to Top</option>
|
||||
<option value="to left">Right to Left</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="135deg" selected>Diagonal (135deg)</option>
|
||||
<option value="radial">Radial (Circle)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
|
|
@ -218,6 +218,36 @@
|
|||
</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>
|
||||
</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">
|
||||
</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>
|
||||
</details>
|
||||
|
||||
|
|
|
|||
|
|
@ -33,11 +33,21 @@ 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_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_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';
|
||||
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 ---
|
||||
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_IMAGE_URL = ''; // Default no image
|
||||
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_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
|
||||
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 ---
|
||||
function showNotification(message, type = 'info', duration = 3000) {
|
||||
|
|
@ -271,6 +291,13 @@ function saveMarkedStyleSettings() {
|
|||
// 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);
|
||||
|
||||
// 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 ---
|
||||
|
|
@ -309,8 +336,42 @@ function applyMarkedCellStyle(cell) {
|
|||
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 {
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
|
@ -424,36 +485,74 @@ function saveCellStyleSettings() {
|
|||
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
|
||||
// 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 ---
|
||||
function applyCellStyle(cell) {
|
||||
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 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 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
|
||||
cell.style.opacity = ''; // Reset direct opacity
|
||||
|
||||
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.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);
|
||||
}
|
||||
|
||||
// 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 ---
|
||||
|
|
@ -864,8 +963,18 @@ function loadFromLocalStorage() {
|
|||
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 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 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 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;
|
||||
|
|
@ -935,12 +1044,12 @@ function loadFromLocalStorage() {
|
|||
const markedIndices = savedMarkedIndices ? JSON.parse(savedMarkedIndices) : [];
|
||||
|
||||
displayedItems.forEach((item, index) => {
|
||||
const cell = document.createElement('div');
|
||||
cell.classList.add('bingo-cell', 'cursor-pointer');
|
||||
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
|
||||
// applyCellStyle(cell); // Apply default cell style first <-- MOVED DOWN
|
||||
|
||||
// NEW: Create span for text content
|
||||
const textSpan = document.createElement("span");
|
||||
|
|
@ -948,8 +1057,10 @@ function loadFromLocalStorage() {
|
|||
textSpan.textContent = item;
|
||||
cell.appendChild(textSpan);
|
||||
|
||||
applyCellStyle(cell); // <-- MOVED HERE: Apply styles AFTER text span exists
|
||||
|
||||
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
|
||||
applyMarkedCellStyle(cell);
|
||||
}
|
||||
|
|
@ -1022,6 +1133,21 @@ function loadFromLocalStorage() {
|
|||
if (markedBorderOpacitySlider) markedBorderOpacitySlider.value = 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
|
||||
// --- End Restore Marked Style Settings ---
|
||||
|
||||
|
|
@ -1044,6 +1170,19 @@ function loadFromLocalStorage() {
|
|||
if (cellBackgroundImageOpacitySlider) cellBackgroundImageOpacitySlider.value = 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
|
||||
// --- End Restore Default Cell Style Settings ---
|
||||
|
||||
|
|
@ -1111,6 +1250,30 @@ function loadFromLocalStorage() {
|
|||
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 ---
|
||||
document.getElementById('board-bg-color-picker').addEventListener('input', () => {
|
||||
saveBoardBgSettings();
|
||||
|
|
@ -1158,37 +1321,78 @@ function loadFromLocalStorage() {
|
|||
// --- Other Listeners ---
|
||||
window.addEventListener('resize', equalizeCellSizes);
|
||||
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 equalizeCellSizes() {
|
||||
const board = document.getElementById("bingo-board");
|
||||
|
|
@ -1450,6 +1654,30 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
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 ---
|
||||
document.getElementById('board-bg-color-picker').addEventListener('input', () => {
|
||||
saveBoardBgSettings();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue