Add gradient picker

beango/css/beango.css

@@ -3,7 +3,9 @@
     margin-bottom: 0px;
 }
 
-html {
+html,
+body {
+    min-height: 100vh;
     /* background: linear-gradient(135deg, #ff7e5f, #feb47b); */ /* Modern gradient background */
 }
 

beango/index.html

@@ -66,8 +66,44 @@
                 <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 class="block text-sm font-medium text-gray-700">Background Type:</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>
+            <div id="solid-color-settings">
                 <label for="background-color-picker" class="block text-sm font-medium text-gray-700">Background Color:</label>
-                <input type="color" id="background-color-picker" name="background-color-picker" value="#FFFFFF" class="mt-1 block w-full h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500">
+                <input type="color" id="background-color-picker" name="background-color-picker" value="#ff7e5f" class="mt-1 block w-full h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500">
+            </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>
+                     <input type="color" id="gradient-color-1" name="gradient-color-1" value="#ff7e5f" class="mt-1 block w-full h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500">
+                 </div>
+                 <div>
+                     <label for="gradient-color-2" class="block text-sm font-medium text-gray-700">Gradient End Color:</label>
+                     <input type="color" id="gradient-color-2" name="gradient-color-2" value="#feb47b" class="mt-1 block w-full h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500">
+                 </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>
              <button onclick="generateBoard()" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                  Apply Settings & Generate

beango/js/beango.js

@@ -8,10 +8,17 @@ const LS_CELL_ITEMS = 'beango_cellItems'; // Original items from textarea/file
 const LS_DISPLAYED_ITEMS = 'beango_displayedItems'; // Items currently shown on the board
 const LS_MARKED_INDICES = 'beango_markedIndices';
 const LS_CONFIG_OPEN = 'beango_configOpen'; // Changed from minimized
-const LS_BACKGROUND_COLOR = 'beango_backgroundColor'; // New key
+const LS_BACKGROUND_TYPE = 'beango_backgroundType'; // 'solid' or 'gradient'
+const LS_SOLID_COLOR = 'beango_solidColor';
+const LS_GRADIENT_COLOR_1 = 'beango_gradientColor1';
+const LS_GRADIENT_COLOR_2 = 'beango_gradientColor2';
+const LS_GRADIENT_DIRECTION = 'beango_gradientDirection';
 
 // --- Default Values ---
-const DEFAULT_BACKGROUND_COLOR = '#F0F0F0'; // Light gray
+const DEFAULT_SOLID_COLOR = '#ff7e5f'; // Default to first color of gradient
+const DEFAULT_GRADIENT_COLOR_1 = '#ff7e5f'; // From main page gradient
+const DEFAULT_GRADIENT_COLOR_2 = '#feb47b'; // From main page gradient
+const DEFAULT_GRADIENT_DIRECTION = '135deg'; // From main page gradient
 
 // --- Notification Function ---
 function showNotification(message, type = 'info', duration = 3000) {
@@ -53,9 +60,76 @@ function showNotification(message, type = 'info', duration = 3000) {
 
 // --- Functions ---
 
-// --- Function to set the HTML background color ---
+// --- Function to set the HTML background (solid or gradient) ---
-function setBackgroundColor(color) {
+function setBackground() {
-    document.documentElement.style.backgroundColor = color;
+    const backgroundType = document.querySelector('input[name="background-type"]:checked').value;
+    const solidColorPicker = document.getElementById('background-color-picker');
+    const gradientColor1Picker = document.getElementById('gradient-color-1');
+    const gradientColor2Picker = document.getElementById('gradient-color-2');
+    const gradientDirectionSelect = document.getElementById('gradient-direction');
+    const htmlStyle = document.documentElement.style;
+    let backgroundValue = '';
+
+    if (backgroundType === 'solid') {
+        const color = solidColorPicker.value;
+        backgroundValue = color;
+        htmlStyle.background = color; // Set solid color as background
+        htmlStyle.backgroundRepeat = 'no-repeat';
+        htmlStyle.backgroundAttachment = 'fixed';
+    } else { // gradient
+        const color1 = gradientColor1Picker.value;
+        const color2 = gradientColor2Picker.value;
+        const direction = gradientDirectionSelect.value;
+        let gradientValue;
+        if (direction === 'radial') {
+            gradientValue = `radial-gradient(circle, ${color1}, ${color2})`;
+        } else if (direction.includes('deg')) { // Handle degree values
+            gradientValue = `linear-gradient(${direction}, ${color1}, ${color2})`;
+        } else {
+            gradientValue = `linear-gradient(${direction}, ${color1}, ${color2})`;
+        }
+        backgroundValue = gradientValue;
+        htmlStyle.background = gradientValue;
+        htmlStyle.backgroundRepeat = 'no-repeat';
+        htmlStyle.backgroundAttachment = 'fixed';
+    }
+    htmlStyle.background = backgroundValue; // Apply the calculated background
+    return backgroundValue; // Return the CSS value for injection
+}
+
+// --- Function to manage visibility of background controls ---
+function toggleBackgroundControls() {
+    const backgroundType = document.querySelector('input[name="background-type"]:checked').value;
+    const solidSettings = document.getElementById('solid-color-settings');
+    const gradientSettings = document.getElementById('gradient-color-settings');
+
+    if (backgroundType === 'solid') {
+        solidSettings.style.display = 'block';
+        gradientSettings.style.display = 'none';
+    } else {
+        solidSettings.style.display = 'none';
+        gradientSettings.style.display = 'block';
+    }
+}
+
+// --- Save current background settings to localStorage ---
+function saveBackgroundSettings() {
+    const backgroundType = document.querySelector('input[name="background-type"]:checked').value;
+    localStorage.setItem(LS_BACKGROUND_TYPE, backgroundType);
+
+    if (backgroundType === 'solid') {
+        localStorage.setItem(LS_SOLID_COLOR, document.getElementById('background-color-picker').value);
+        // Optionally remove gradient keys to keep localStorage clean
+        localStorage.removeItem(LS_GRADIENT_COLOR_1);
+        localStorage.removeItem(LS_GRADIENT_COLOR_2);
+        localStorage.removeItem(LS_GRADIENT_DIRECTION);
+    } else {
+        localStorage.setItem(LS_GRADIENT_COLOR_1, document.getElementById('gradient-color-1').value);
+        localStorage.setItem(LS_GRADIENT_COLOR_2, document.getElementById('gradient-color-2').value);
+        localStorage.setItem(LS_GRADIENT_DIRECTION, document.getElementById('gradient-direction').value);
+        // Optionally remove solid key
+        localStorage.removeItem(LS_SOLID_COLOR);
+    }
 }
 
 function toggleConfig() {
@@ -160,11 +234,50 @@ function generateBoard() {
 
     clearMarks(false); // Clear previous marks visually but don't save yet
     equalizeCellSizes(); // Add this call
-    saveBoardState(); // Save the newly generated state
+    saveBoardState(); // Save the newly generated board state (size, items, displayed, marks)
+
+    // Explicitly save background settings before reload
+    saveBackgroundSettings();
+
+    // Get the new background value and inject a style override before reload
+    const newBackgroundValue = setBackground(); // Apply and get value
+    let overrideStyle = document.getElementById('background-override-style');
+    if (!overrideStyle) {
+        overrideStyle = document.createElement('style');
+        overrideStyle.id = 'background-override-style';
+        document.head.appendChild(overrideStyle);
+    }
+    // Use !important to try and force application during reload flash
+    overrideStyle.textContent = `html { background: ${newBackgroundValue} !important; background-repeat: no-repeat !important; background-attachment: fixed !important; }`;
+
     showNotification(notificationMessage, notificationType);
 
     // Reload the page to ensure correct rendering based on saved state
     location.reload();
+
+    // Reset global variables
+    currentItems = [];
+    displayedItems = [];
+
+    // Reset form inputs
+    document.getElementById('board-size').value = 5; // Default size
+    document.getElementById('cell-contents').value = '';
+    document.getElementById('file-input').value = ''; // Clear file input
+
+    // Reset background inputs to defaults
+    document.querySelector('input[name="background-type"][value="gradient"]').checked = true; // Default to gradient
+    document.getElementById('background-color-picker').value = DEFAULT_SOLID_COLOR;
+    document.getElementById('gradient-color-1').value = DEFAULT_GRADIENT_COLOR_1;
+    document.getElementById('gradient-color-2').value = DEFAULT_GRADIENT_COLOR_2;
+    document.getElementById('gradient-direction').value = DEFAULT_GRADIENT_DIRECTION;
+    toggleBackgroundControls(); // Ensure correct controls are visible
+
+    // Clear the board display
+    const boardHeader = document.getElementById('board-header');
+    if (boardHeader) boardHeader.style.maxWidth = '';
+
+    setBackground(); // Apply default background
+    showNotification('Settings and board reset.', 'success');
 }
 
 function randomizeBoard() {
@@ -255,7 +368,11 @@ function resetSettings() {
     localStorage.removeItem(LS_MARKED_INDICES);
     // Optionally reset config pane state too?
     // localStorage.removeItem(LS_CONFIG_OPEN);
-    localStorage.removeItem(LS_BACKGROUND_COLOR); // Remove saved color
+    localStorage.removeItem(LS_BACKGROUND_TYPE);
+    localStorage.removeItem(LS_SOLID_COLOR);
+    localStorage.removeItem(LS_GRADIENT_COLOR_1);
+    localStorage.removeItem(LS_GRADIENT_COLOR_2);
+    localStorage.removeItem(LS_GRADIENT_DIRECTION);
 
     // Reset global variables
     currentItems = [];
@@ -265,7 +382,14 @@ function resetSettings() {
     document.getElementById('board-size').value = 5; // Default size
     document.getElementById('cell-contents').value = '';
     document.getElementById('file-input').value = ''; // Clear file input
-    document.getElementById('background-color-picker').value = DEFAULT_BACKGROUND_COLOR; // Reset color picker
+
+    // Reset background inputs to defaults
+    document.querySelector('input[name="background-type"][value="gradient"]').checked = true; // Default to gradient
+    document.getElementById('background-color-picker').value = DEFAULT_SOLID_COLOR;
+    document.getElementById('gradient-color-1').value = DEFAULT_GRADIENT_COLOR_1;
+    document.getElementById('gradient-color-2').value = DEFAULT_GRADIENT_COLOR_2;
+    document.getElementById('gradient-direction').value = DEFAULT_GRADIENT_DIRECTION;
+    toggleBackgroundControls(); // Ensure correct controls are visible
 
     // Clear the board display
     const board = document.getElementById('bingo-board');
@@ -282,7 +406,7 @@ function resetSettings() {
     if (boardContainer) boardContainer.style.maxWidth = '';
     if (boardHeader) boardHeader.style.maxWidth = '';
 
-    setBackgroundColor(DEFAULT_BACKGROUND_COLOR); // Reset background color
+    setBackground(); // Apply default background
     showNotification('Settings and board reset.', 'success');
 }
 
@@ -311,7 +435,6 @@ function loadFromLocalStorage() {
     const savedDisplayedItems = localStorage.getItem(LS_DISPLAYED_ITEMS);
     const savedMarkedIndices = localStorage.getItem(LS_MARKED_INDICES);
     const configIsOpen = localStorage.getItem(LS_CONFIG_OPEN) === 'true';
-    const savedBackgroundColor = localStorage.getItem(LS_BACKGROUND_COLOR);
 
     // Restore Config Pane State
     const pane = document.getElementById('config-pane');
@@ -327,32 +450,6 @@ function loadFromLocalStorage() {
     const size = parseInt(savedSize, 10); // Parse size here
     document.getElementById('board-size').value = savedSize;
 
-    // Restore Background Color
-    const colorPicker = document.getElementById('background-color-picker');
-    if (savedBackgroundColor) {
-        colorPicker.value = savedBackgroundColor;
-        setBackgroundColor(savedBackgroundColor);
-    } else {
-        colorPicker.value = DEFAULT_BACKGROUND_COLOR;
-        setBackgroundColor(DEFAULT_BACKGROUND_COLOR);
-    }
-
-    // Update container width based on loaded size - REMOVED
-    // updateBoardContainerMaxWidth(size);
-    // updateBoardContainerMaxWidth(size, '#board-header');
-
-    if (savedItemsText) {
-        try {
-            currentItems = JSON.parse(savedItemsText); // Restore original items array
-            document.getElementById('cell-contents').value = currentItems.join('\n');
-        } catch (e) {
-            showNotification('Error parsing saved items. Resetting items.', 'error');
-            localStorage.removeItem(LS_CELL_ITEMS);
-            currentItems = [];
-            document.getElementById('cell-contents').value = '';
-        }
-    }
-
     // Restore Board only if essential data exists
     if (savedDisplayedItems) {
         try {
@@ -403,6 +500,44 @@ function loadFromLocalStorage() {
              board.innerHTML = '<div class="bingo-cell">Generate a board using the config panel!</div>';
          }
     }
+
+    // --- Restore Background Settings ---
+    const savedBackgroundType = localStorage.getItem(LS_BACKGROUND_TYPE) || 'gradient'; // Default to gradient
+    const savedSolidColor = localStorage.getItem(LS_SOLID_COLOR) || DEFAULT_SOLID_COLOR;
+    const savedGradientColor1 = localStorage.getItem(LS_GRADIENT_COLOR_1) || DEFAULT_GRADIENT_COLOR_1;
+    const savedGradientColor2 = localStorage.getItem(LS_GRADIENT_COLOR_2) || DEFAULT_GRADIENT_COLOR_2;
+    const savedGradientDirection = localStorage.getItem(LS_GRADIENT_DIRECTION) || DEFAULT_GRADIENT_DIRECTION;
+
+    // Set radio button
+    document.querySelector(`input[name="background-type"][value="${savedBackgroundType}"]`).checked = true;
+
+    // Set input values
+    document.getElementById('background-color-picker').value = savedSolidColor;
+    document.getElementById('gradient-color-1').value = savedGradientColor1;
+    document.getElementById('gradient-color-2').value = savedGradientColor2;
+    document.getElementById('gradient-direction').value = savedGradientDirection;
+
+    // Show/hide controls and apply background
+    toggleBackgroundControls();
+    setBackground();
+    // --- End Restore Background Settings ---
+
+    // Restore Config Inputs
+    if (savedItemsText) {
+        try {
+            currentItems = JSON.parse(savedItemsText); // Restore original items array
+            document.getElementById('cell-contents').value = currentItems.join('\n');
+        } catch (e) {
+            showNotification('Error parsing saved items. Resetting items.', 'error');
+            localStorage.removeItem(LS_CELL_ITEMS);
+            currentItems = [];
+            document.getElementById('cell-contents').value = '';
+        }
+    }
+
+    // Update container width based on loaded size - REMOVED
+    // updateBoardContainerMaxWidth(size);
+    // updateBoardContainerMaxWidth(size, '#board-header');
 }
 
 // --- Helper to manage board container width --- DEPRECATED
@@ -564,13 +699,32 @@ function explodeBeans() {
 document.addEventListener('DOMContentLoaded', () => {
     loadFromLocalStorage();
 
-    // Add listener for the color picker
+    // Add listeners for background controls
-    const colorPicker = document.getElementById('background-color-picker');
+    document.querySelectorAll('input[name="background-type"]').forEach(radio => {
-    if (colorPicker) {
+        radio.addEventListener('change', () => {
-        colorPicker.addEventListener('input', (event) => {
+            toggleBackgroundControls();
-            const newColor = event.target.value;
+            setBackground();
-            setBackgroundColor(newColor);
+            saveBackgroundSettings();
-            localStorage.setItem(LS_BACKGROUND_COLOR, newColor);
         });
-    }
+    });
+
+    document.getElementById('background-color-picker').addEventListener('input', () => {
+        setBackground();
+        saveBackgroundSettings();
+    });
+
+    document.getElementById('gradient-color-1').addEventListener('input', () => {
+        setBackground();
+        saveBackgroundSettings();
+    });
+
+     document.getElementById('gradient-color-2').addEventListener('input', () => {
+        setBackground();
+        saveBackgroundSettings();
+    });
+
+     document.getElementById('gradient-direction').addEventListener('change', () => {
+        setBackground();
+        saveBackgroundSettings();
+    });
 });

index.html

@@ -12,7 +12,7 @@
         <img id="bean" src="bean.svg" alt="Bean" onclick="explodeBeans()">
     </div>
     <footer style="position: absolute; bottom: 10px; width: 100%; text-align: center; color: #fff;">
-        by JoJomaw
+        by JoJomaw | <a href="beango/index.html" style="color: #fff; text-decoration: underline;">Beango!</a>
     </footer>
     <script>
         function explodeBeans() {