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

More bean

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2025-04-17 16:38:08 -06:00
commit 5809cb02fd
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
3 changed files with 128 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

32
beango/css/beango.css
View file

@ -29,14 +29,40 @@ html {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
min-width: 80px; /* Add minimum width */
aspect-ratio: 1 / 1; /* Ensure square cells */
/* Add transition for background color changes */
transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out, filter 0.15s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
}
/* Add darken filter on hover */
.bingo-cell:hover {
filter: brightness(85%);
}
/* Style for when a cell is actively being clicked */
.bingo-cell:active {
transform: scale(0.95); /* Scale down slightly */
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2); /* Add subtle inset shadow */
background-color: #e0e0d1; /* Slightly darker beige */
}
/* Style for permanently marked cells */
.bingo-cell.marked {
background-color: #fde047; /* Tailwind yellow-300 */
/* Optional: Add other persistent styles like a stronger border */
/* border-color: #ca8a04; */ /* Tailwind yellow-600 */
}
/* Style for when a MARKED cell is actively being clicked */
.bingo-cell.marked:active {
transform: scale(0.95); /* Keep the same transform */
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2); /* Keep the same shadow */
background-color: #facc15; /* Slightly darker yellow (Tailwind yellow-400) */
}
.config-pane {
transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
max-height: 500px; /* Adjust as needed */

8
beango/index.html
View file

@ -7,7 +7,7 @@
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="css/beango.css">
</head>
<body class="flex h-screen overflow-hidden font-sans relative">
<body class="flex flex-col items-center justify-center p-4 font-sans relative">
<!-- Notification Area -->
<div id="notification-area" class="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 opacity-0">
@ -15,8 +15,8 @@
</div>
<!-- Main Content Area (Board and Controls) -->
<div class="flex-grow flex flex-col items-center justify-center p-4 overflow-y-auto">
<div id="board-header" class="bg-white rounded-t-lg p-4 w-full max-w-2xl centered">
<div class="w-full flex flex-col items-center justify-center p-4 overflow-y-auto">
<div id="board-header" class="bg-white rounded-t-lg pt-4 w-full max-w-2xl centered">
<h1 class="text-4xl font-bold text-green-800 mb-6">Beango!</h1>
<img id="bean" src="../bean.svg" alt="Bean" onclick="explodeBeans()">
</div>
@ -50,7 +50,7 @@
</div>
<!-- Configuration Pane (Right Side) -->
<div id="config-pane" class="w-80 bg-white p-6 shadow-lg fixed top-0 right-0 h-full z-20 overflow-y-auto transition-transform duration-300 ease-in-out">
<div id="config-pane" class="w-80 bg-white p-6 shadow-lg fixed top-0 right-0 h-full z-20 overflow-y-auto transition-transform duration-300 ease-in-out config-pane-closed">
<h2 class="text-xl font-semibold text-green-700 mb-4">Configuration</h2>
<div class="space-y-4">
<div>

115
beango/js/beango.js
View file

@ -105,10 +105,6 @@ function generateBoard() {
}
sizeInput.value = size; // Ensure value reflects parsed int
// Update container width based on size
updateBoardContainerMaxWidth(size);
updateBoardContainerMaxWidth(size, '#board-header');
// Get items from input and store them as the canonical list
currentItems = getItemsFromInput();
localStorage.setItem(LS_CELL_ITEMS, JSON.stringify(currentItems)); // Save original items immediately
@ -142,11 +138,11 @@ function generateBoard() {
const board = document.getElementById('bingo-board');
board.innerHTML = ''; // Clear previous board
board.style.gridTemplateColumns = `repeat(${size}, minmax(80px, 1fr))`;
board.style.gridTemplateColumns = `repeat(${size}, minmax(0, 1fr))`;
displayedItems.forEach((item, index) => {
const cell = document.createElement('div');
cell.classList.add('bingo-cell', 'cursor-pointer', 'hover:bg-green-200');
cell.classList.add('bingo-cell', 'cursor-pointer');
cell.textContent = item;
cell.dataset.index = index; // Add index for saving marks
cell.onclick = () => selectCell(cell);
@ -154,6 +150,7 @@ function generateBoard() {
});
clearMarks(false); // Clear previous marks visually but don't save yet
equalizeCellSizes(); // Add this call
saveBoardState(); // Save the newly generated state
showNotification(notificationMessage, notificationType);
}
@ -210,14 +207,14 @@ function randomizeBoard() {
}
function selectCell(cell) {
cell.classList.toggle('bg-yellow-300'); // Toggle mark style directly
cell.classList.toggle('marked'); // Toggle the dedicated 'marked' class
saveBoardState(); // Save updated marks immediately after click
}
function clearMarks(save = true) {
const cells = document.querySelectorAll('#bingo-board .bingo-cell');
cells.forEach(cell => {
cell.classList.remove('bg-yellow-300', 'ring-2', 'ring-blue-500'); // Remove ring class here too
cell.classList.remove('marked', 'ring-2', 'ring-blue-500'); // Use 'marked' class
});
if (save) {
saveBoardState(); // Save cleared marks
@ -261,15 +258,21 @@ function resetSettings() {
board.innerHTML = '<div class="bingo-cell">Settings Reset. Generate a new board!</div>';
board.style.gridTemplateColumns = ''; // Clear grid style
// Reset container width to default
updateBoardContainerMaxWidth(5); // Assuming 5 is the default size
updateBoardContainerMaxWidth(5, '#board-header');
// Reset container width to default - REMOVED
// updateBoardContainerMaxWidth(5); // Assuming 5 is the default size
// updateBoardContainerMaxWidth(5, '#board-header');
// Also clear any inline max-width set by equalizeCellSizes
const boardContainer = document.getElementById('bingo-board-container');
const boardHeader = document.getElementById('board-header');
if (boardContainer) boardContainer.style.maxWidth = '';
if (boardHeader) boardHeader.style.maxWidth = '';
showNotification('Settings and board reset.', 'success');
}
// --- Helper to get indices of marked cells ---
function getMarkedIndices() {
const markedCells = document.querySelectorAll('#bingo-board .bingo-cell.bg-yellow-300');
const markedCells = document.querySelectorAll('#bingo-board .bingo-cell.marked'); // Use 'marked' class selector
const indices = [];
markedCells.forEach(cell => {
// Ensure dataset.index exists and is a valid number
@ -307,9 +310,9 @@ function loadFromLocalStorage() {
const size = parseInt(savedSize, 10); // Parse size here
document.getElementById('board-size').value = savedSize;
// Update container width based on loaded size
updateBoardContainerMaxWidth(size);
updateBoardContainerMaxWidth(size, '#board-header');
// Update container width based on loaded size - REMOVED
// updateBoardContainerMaxWidth(size);
// updateBoardContainerMaxWidth(size, '#board-header');
if (savedItemsText) {
try {
@ -349,21 +352,22 @@ function loadFromLocalStorage() {
const board = document.getElementById('bingo-board');
board.innerHTML = ''; // Clear placeholder
board.style.gridTemplateColumns = `repeat(${size}, minmax(80px, 1fr))`;
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', 'hover:bg-green-200');
cell.classList.add('bingo-cell', 'cursor-pointer');
cell.textContent = item;
cell.dataset.index = index; // Ensure index is set for loading marks correctly
cell.onclick = () => selectCell(cell);
if (markedIndices.includes(index)) {
cell.classList.add('bg-yellow-300'); // Apply saved mark
cell.classList.add('marked'); // Apply saved mark using 'marked' class
}
board.appendChild(cell);
});
equalizeCellSizes(); // Add this call
} else {
// If no saved board state, show the default message
const board = document.getElementById('bingo-board');
@ -374,8 +378,8 @@ function loadFromLocalStorage() {
}
}
// --- Helper to manage board container width ---
function updateBoardContainerMaxWidth(size, element = '#bingo-board-container') {
// --- Helper to manage board container width --- DEPRECATED
/* function updateBoardContainerMaxWidth(size, element = '#bingo-board-container') {
const container = document.querySelector(element);
if (!container) return;
@ -401,6 +405,77 @@ function updateBoardContainerMaxWidth(size, element = '#bingo-board-container')
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;
// Try to determine grid size (number of columns)
let size = 0;
try {
const gridStyle = window.getComputedStyle(board).gridTemplateColumns;
size = gridStyle.split(' ').length;
} catch (e) {
console.error('Could not determine grid size from styles.', e);
// Fallback: try getting from input (less reliable if called before input update)
const sizeInput = document.getElementById('board-size');
size = sizeInput ? parseInt(sizeInput.value, 10) : 0;
if (!size || isNaN(size)) {
showNotification('Cannot determine grid size to resize container.', 'warning');
return; // Cannot calculate container width without size
}
}
if (size <= 0) {
showNotification('Invalid grid size found, cannot resize container.', 'warning');
return;
}
let maxDimension = 0;
const gap = 4; // From CSS: .bingo-board { gap: 4px; }
// First pass: Find the largest dimension
cells.forEach(cell => {
// Reset any previously set inline styles to get natural size
cell.style.width = '';
cell.style.height = '';
// Force reflow/recalc if needed (might not be strictly necessary here)
// cell.offsetHeight;
const width = cell.offsetWidth;
const height = cell.offsetHeight;
maxDimension = Math.max(maxDimension, width, height);
});
// Second pass: Apply sizing to the grid container, not individual cells
/* REMOVED loop applying styles to individual cells
cells.forEach(cell => {
cell.style.width = `${maxDimension}px`;
cell.style.height = `${maxDimension}px`;
});
*/
// Set grid column width and auto row height based on max dimension
board.style.gridTemplateColumns = `repeat(${size}, ${maxDimension}px)`;
board.style.gridAutoRows = `${maxDimension}px`;
// Calculate total board width needed (including gaps AND container padding)
const containerPadding = 32; // Based on p-4 class (1rem = 16px, left + right = 32px)
const totalWidth = (maxDimension * size) + (gap * (size - 1)) + containerPadding;
// 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() {