@carmaclouds/core 2.3.1

package/src/modules/spell-slots.js

@@ -0,0 +1,224 @@
+/**
+ * Spell Slots Module
+ *
+ * Handles spell slot display and manual adjustment.
+ * - Displays spell slots grid (regular + Pact Magic)
+ * - Shows total slots summary
+ * - Manual slot adjustment via click
+ *
+ * Loaded as a plain script (no ES6 modules) to export to window.
+ */
+
+(function() {
+  'use strict';
+
+  /**
+   * Build and display spell slots grid
+   */
+  function buildSpellSlotsDisplay() {
+    const container = document.getElementById('spell-slots-container');
+    const debug = window.debug || console;
+
+    if (!container) {
+      debug.warn('⚠️ Spell slots container not found in DOM');
+      return;
+    }
+
+    if (!characterData || !characterData.spellSlots) {
+      container.innerHTML = '<p style="text-align: center; color: #666;">No spell slots available</p>';
+      debug.log('⚠️ No spell slots in character data');
+      // Collapse the section when empty
+      if (typeof collapseSectionByContainerId === 'function') {
+        collapseSectionByContainerId('spell-slots-container');
+      }
+      return;
+    }
+
+    const slotsGrid = document.createElement('div');
+    slotsGrid.className = 'spell-slots-grid';
+
+    let hasAnySlots = false;
+    let totalCurrentSlots = 0;
+    let totalMaxSlots = 0;
+
+    // Check for Pact Magic (Warlock) - stored separately from regular slots
+    const pactMagicSlotLevel = characterData.spellSlots?.pactMagicSlotLevel ||
+                               characterData.otherVariables?.pactMagicSlotLevel ||
+                               characterData.otherVariables?.pactSlotLevelVisible ||
+                               characterData.otherVariables?.pactSlotLevel ||
+                               characterData.otherVariables?.slotLevel;
+    const pactMagicSlots = characterData.spellSlots?.pactMagicSlots ??
+                           characterData.otherVariables?.pactMagicSlots ??
+                           characterData.otherVariables?.pactSlot ?? 0;
+    const pactMagicSlotsMax = characterData.spellSlots?.pactMagicSlotsMax ??
+                              characterData.otherVariables?.pactMagicSlotsMax ??
+                              characterData.otherVariables?.pactSlotMax ?? 0;
+    const hasPactMagic = pactMagicSlotsMax > 0;
+    // Default slot level to 5 (max pact level) if we have slots but couldn't detect level
+    const effectivePactLevel = pactMagicSlotLevel || (hasPactMagic ? 5 : 0);
+
+    debug.log(`🔮 Spell slots display - Pact Magic: level=${pactMagicSlotLevel} (effective=${effectivePactLevel}), slots=${pactMagicSlots}/${pactMagicSlotsMax}, hasPact=${hasPactMagic}`);
+
+    // Add Pact Magic slots first if present
+    if (hasPactMagic) {
+      hasAnySlots = true;
+      totalCurrentSlots += pactMagicSlots;
+      totalMaxSlots += pactMagicSlotsMax;
+
+      const slotCard = document.createElement('div');
+      slotCard.className = pactMagicSlots > 0 ? 'spell-slot-card pact-magic' : 'spell-slot-card pact-magic empty';
+      slotCard.style.cssText = 'background: linear-gradient(135deg, #6b3fa0, #9b59b6); border: 2px solid #8e44ad;';
+
+      slotCard.innerHTML = `
+        <div class="spell-slot-level">Pact (${effectivePactLevel})</div>
+        <div class="spell-slot-count">${pactMagicSlots}/${pactMagicSlotsMax}</div>
+      `;
+
+      // Add click to manually adjust Pact Magic slots
+      slotCard.addEventListener('click', () => {
+        adjustSpellSlot(`pact:${effectivePactLevel}`, pactMagicSlots, pactMagicSlotsMax, true);
+      });
+      slotCard.style.cursor = 'pointer';
+      slotCard.title = 'Click to adjust Pact Magic slots (recharge on short rest)';
+
+      slotsGrid.appendChild(slotCard);
+    }
+
+    // Check each level (1-9) for regular spell slots
+    for (let level = 1; level <= 9; level++) {
+      const slotVar = `level${level}SpellSlots`;
+      const slotMaxVar = `level${level}SpellSlotsMax`;
+
+      // Support both flat keys (level1SpellSlotsMax) and nested format ({ level1: { current, max } })
+      const nestedSlot = characterData.spellSlots[`level${level}`];
+      const maxSlots = characterData.spellSlots[slotMaxVar] || nestedSlot?.max || 0;
+
+      // Only show if character has regular slots at this level
+      if (maxSlots > 0) {
+        hasAnySlots = true;
+        const currentSlots = characterData.spellSlots[slotVar] ?? nestedSlot?.current ?? maxSlots;
+
+        // Track totals
+        totalCurrentSlots += currentSlots;
+        totalMaxSlots += maxSlots;
+
+        const slotCard = document.createElement('div');
+        slotCard.className = currentSlots > 0 ? 'spell-slot-card' : 'spell-slot-card empty';
+
+        slotCard.innerHTML = `
+          <div class="spell-slot-level">Level ${level}</div>
+          <div class="spell-slot-count">${currentSlots}/${maxSlots}</div>
+        `;
+
+        // Add click to manually adjust slots with hover effect
+        slotCard.addEventListener('click', () => {
+          adjustSpellSlot(level, currentSlots, maxSlots);
+        });
+        slotCard.style.cursor = 'pointer';
+        slotCard.title = 'Click to adjust spell slots';
+
+        slotsGrid.appendChild(slotCard);
+      }
+    }
+
+    if (hasAnySlots) {
+      container.innerHTML = '';
+
+      // Add total slots summary
+      const summaryCard = document.createElement('div');
+      summaryCard.className = 'spell-slots-summary';
+      summaryCard.style.cssText = `
+        background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
+        color: white;
+        padding: 12px;
+        border-radius: 8px;
+        text-align: center;
+        margin-bottom: 15px;
+        font-weight: bold;
+        box-shadow: 0 2px 8px rgba(155, 89, 182, 0.3);
+      `;
+
+      const totalPercent = totalMaxSlots > 0 ? (totalCurrentSlots / totalMaxSlots) * 100 : 0;
+      summaryCard.innerHTML = `
+        <div style="font-size: 14px; opacity: 0.9;">Total Spell Slots</div>
+        <div style="font-size: 20px; margin: 4px 0;">${totalCurrentSlots}/${totalMaxSlots}</div>
+        <div style="font-size: 12px; opacity: 0.8;">${Math.round(totalPercent)}% remaining</div>
+      `;
+
+      container.appendChild(summaryCard);
+      container.appendChild(slotsGrid);
+
+      // Add a small note
+      const note = document.createElement('p');
+      note.style.cssText = 'text-align: center; color: #666; font-size: 0.85em; margin-top: 8px;';
+      note.textContent = 'Click a slot to manually adjust';
+      container.appendChild(note);
+
+      debug.log(`✨ Spell slots display: ${totalCurrentSlots}/${totalMaxSlots} total slots`);
+      // Expand the section when it has content
+      if (typeof expandSectionByContainerId === 'function') {
+        expandSectionByContainerId('spell-slots-container');
+      }
+    } else {
+      container.innerHTML = '<p style="text-align: center; color: #666;">No spell slots available</p>';
+      debug.log('⚠️ Character has 0 max slots for all levels');
+      // Collapse the section when empty
+      if (typeof collapseSectionByContainerId === 'function') {
+        collapseSectionByContainerId('spell-slots-container');
+      }
+    }
+  }
+
+  /**
+   * Manually adjust a spell slot
+   * @param {number|string} level - Spell level or "pact:level" for Pact Magic
+   * @param {number} current - Current slots
+   * @param {number} max - Maximum slots
+   * @param {boolean} isPactMagic - Whether this is a Pact Magic slot
+   */
+  function adjustSpellSlot(level, current, max, isPactMagic = false) {
+    // Check if this is a Pact Magic slot (format: "pact:${level}")
+    const isPact = isPactMagic || (typeof level === 'string' && level.startsWith('pact:'));
+    const actualLevel = isPact ? parseInt(level.toString().split(':')[1] || level) : level;
+
+    const slotLabel = isPact ? `Pact Magic (Level ${actualLevel})` : `Level ${actualLevel}`;
+    const newValue = prompt(`Adjust ${slotLabel} Spell Slots\n\nCurrent: ${current}/${max}\n\nEnter new current value (0-${max}):`);
+
+    if (newValue === null) return; // Cancelled
+
+    const parsed = parseInt(newValue);
+    if (isNaN(parsed) || parsed < 0 || parsed > max) {
+      if (typeof showNotification === 'function') {
+        showNotification('❌ Invalid value', 'error');
+      }
+      return;
+    }
+
+    if (isPact) {
+      characterData.spellSlots.pactMagicSlots = parsed;
+    } else {
+      const slotVar = `level${actualLevel}SpellSlots`;
+      characterData.spellSlots[slotVar] = parsed;
+    }
+
+    if (typeof saveCharacterData === 'function') {
+      saveCharacterData();
+    }
+    if (typeof buildSheet === 'function') {
+      buildSheet(characterData);
+    }
+
+    if (typeof showNotification === 'function') {
+      showNotification(`✅ ${slotLabel} slots set to ${parsed}/${max}`);
+    }
+  }
+
+  // Export functions to globalThis
+  Object.assign(globalThis, {
+    buildSpellSlotsDisplay,
+    adjustSpellSlot
+  });
+
+  console.log('✅ Spell Slots module loaded');
+
+})();

package/src/modules/status-bar-bridge.js

@@ -0,0 +1,101 @@
+/**
+ * Status Bar Bridge Module
+ *
+ * Handles communication between the main character sheet and the status bar popup.
+ * Loaded as a plain script (no ES6 modules) to export to globalThis.
+ *
+ * Functions exported to globalThis:
+ * - initStatusBarButton()
+ * - sendStatusUpdate()
+ * - statusBarWindow (variable)
+ */
+
+(function() {
+  'use strict';
+
+  // Track status bar window
+  let statusBarWindow = null;
+
+  /**
+   * Initialize status bar button
+   * Must be called after DOM is ready
+   */
+  function initStatusBarButton() {
+    const statusBarBtn = document.getElementById('status-bar-btn');
+    if (statusBarBtn) {
+      statusBarBtn.addEventListener('click', () => {
+        // Check if browserAPI is available
+        if (typeof browserAPI === 'undefined' || !browserAPI) {
+          if (typeof showNotification !== 'undefined') {
+            showNotification('❌ Extension API not available', 'error');
+          }
+          debug.warn('⚠️ browserAPI not available');
+          return;
+        }
+
+        // Open status bar window
+        const width = 350;
+        const height = 500;
+        const left = window.screenX + window.outerWidth - width - 50;
+        const top = window.screenY + 50;
+
+        statusBarWindow = window.open(
+          browserAPI.runtime.getURL('src/status-bar.html'),
+          'status-bar',
+          `width=${width},height=${height},left=${left},top=${top},scrollbars=no,resizable=yes`
+        );
+
+        if (!statusBarWindow) {
+          if (typeof showNotification !== 'undefined') {
+            showNotification('❌ Failed to open status bar - please allow popups', 'error');
+          }
+          return;
+        }
+
+        debug.log('📊 Status bar opened');
+
+        // Send initial data after a short delay
+        setTimeout(() => {
+          sendStatusUpdate();
+        }, 500);
+      });
+      debug.log('✅ Status bar button initialized');
+    }
+  }
+
+  /**
+   * Send status update to status bar window
+   * Requires characterData to be available in global scope
+   */
+  function sendStatusUpdate() {
+    if (!statusBarWindow || statusBarWindow.closed) return;
+
+    // characterData should be available from popup-sheet.js global scope
+    if (typeof characterData === 'undefined') {
+      debug.warn('⚠️ characterData not available for status update');
+      return;
+    }
+
+    const statusData = {
+      action: 'updateStatusData',
+      data: {
+        name: characterData.name || characterData.character_name,
+        hitPoints: characterData.hitPoints || characterData.hit_points,
+        concentrating: characterData.concentrating || false,
+        concentrationSpell: characterData.concentrationSpell || '',
+        activeBuffs: characterData.activeBuffs || [],
+        activeDebuffs: characterData.activeDebuffs || [],
+        spellSlots: characterData.spellSlots || {}
+      }
+    };
+
+    statusBarWindow.postMessage(statusData, '*');
+    debug.log('📊 Sent status update to status bar');
+  }
+
+  // Export to globalThis
+  globalThis.initStatusBarButton = initStatusBarButton;
+  globalThis.sendStatusUpdate = sendStatusUpdate;
+  globalThis.statusBarWindow = statusBarWindow;
+
+})();

package/src/modules/ui-utilities.js

@@ -0,0 +1,284 @@
+/**
+ * UI Utilities Module
+ *
+ * Generic UI helper functions:
+ * - Collapsible sections (expand/collapse sheet sections)
+ * - Color palette selector (notification color picker)
+ * - Close button handler
+ * - Supabase color sync
+ *
+ * These are reusable UI components that don't contain domain-specific logic.
+ *
+ * Loaded as a plain script (no ES6 modules) to export to globalThis.
+ *
+ * Functions exported to globalThis:
+ * - initCollapsibleSections()
+ * - collapseSectionByContainerId(containerId)
+ * - expandSectionByContainerId(containerId)
+ * - createColorPalette(selectedColor)
+ * - initColorPalette()
+ * - syncColorToSupabase(color)
+ * - initCloseButton()
+ */
+
+(function() {
+  'use strict';
+
+  // ===== COLLAPSIBLE SECTIONS =====
+
+  /**
+   * Initialize collapsible sections
+   * Makes all section headers clickable to toggle visibility
+   */
+  function initCollapsibleSections() {
+    const sections = document.querySelectorAll('.section h3');
+
+    sections.forEach(header => {
+      header.addEventListener('click', function() {
+        const section = this.parentElement;
+        const content = section.querySelector('.section-content');
+
+        // Toggle collapsed class
+        this.classList.toggle('collapsed');
+        content.classList.toggle('collapsed');
+      });
+    });
+  }
+
+  /**
+   * Helper function to collapse a section by its container ID
+   * @param {string} containerId - The ID of the container element
+   */
+  function collapseSectionByContainerId(containerId) {
+    const container = document.getElementById(containerId);
+    if (!container) return;
+
+    const section = container.closest('.section');
+    if (!section) return;
+
+    const header = section.querySelector('h3');
+    const content = section.querySelector('.section-content');
+
+    if (header && content) {
+      header.classList.add('collapsed');
+      content.classList.add('collapsed');
+    }
+  }
+
+  /**
+   * Helper function to expand a section by its container ID
+   * @param {string} containerId - The ID of the container element
+   */
+  function expandSectionByContainerId(containerId) {
+    const container = document.getElementById(containerId);
+    if (!container) return;
+
+    const section = container.closest('.section');
+    if (!section) return;
+
+    const header = section.querySelector('h3');
+    const content = section.querySelector('.section-content');
+
+    if (header && content) {
+      header.classList.remove('collapsed');
+      content.classList.remove('collapsed');
+    }
+  }
+
+  // ===== COLOR PALETTE =====
+
+  /**
+   * Create color palette HTML
+   * @param {string} selectedColor - Currently selected color hex value
+   * @returns {string} HTML string for color palette
+   */
+  function createColorPalette(selectedColor) {
+    const colors = [
+      { name: 'Blue', value: '#3498db', emoji: '🔵' },
+      { name: 'Red', value: '#e74c3c', emoji: '🔴' },
+      { name: 'Green', value: '#27ae60', emoji: '🟢' },
+      { name: 'Purple', value: '#9b59b6', emoji: '🟣' },
+      { name: 'Orange', value: '#e67e22', emoji: '🟠' },
+      { name: 'Yellow', value: '#f1c40f', emoji: '🟡' },
+      { name: 'Grey', value: '#95a5a6', emoji: '⚪' },
+      { name: 'Black', value: '#34495e', emoji: '⚫' },
+      { name: 'Brown', value: '#8b4513', emoji: '🟤' }
+    ];
+
+    return colors.map(color => {
+      const isSelected = color.value === selectedColor;
+      return `
+      <div class="color-swatch"
+           data-color="${color.value}"
+           style="font-size: 1.5em; cursor: pointer; transition: all 0.2s; opacity: ${isSelected ? '1' : '0.85'}; transform: ${isSelected ? 'scale(1.15)' : 'scale(1)'}; filter: ${isSelected ? 'drop-shadow(0 0 4px white)' : 'none'}; text-align: center;"
+           title="${color.name}">${color.emoji}</div>
+    `;
+    }).join('');
+  }
+
+  // Global flag to track if document-level click listener has been added
+  let colorPaletteDocumentListenerAdded = false;
+
+  /**
+   * Initialize color palette selector
+   * Sets up the color picker dropdown for notification colors
+   */
+  function initColorPalette() {
+    // Check if characterData is available
+    if (typeof characterData === 'undefined' || !characterData) {
+      debug.warn('⚠️ characterData not available for color palette initialization');
+      return;
+    }
+
+    // Set default color if not set
+    if (!characterData.notificationColor) {
+      characterData.notificationColor = '#3498db';
+    }
+
+    const toggleBtnOld = document.getElementById('color-toggle');
+    const palette = document.getElementById('color-palette');
+
+    if (!toggleBtnOld || !palette) return;
+
+    // Clone and replace toggle button to remove old listeners
+    const toggleBtn = toggleBtnOld.cloneNode(true);
+    toggleBtnOld.parentNode.replaceChild(toggleBtn, toggleBtnOld);
+
+    // Toggle palette visibility
+    toggleBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const isVisible = palette.style.display === 'grid';
+      palette.style.display = isVisible ? 'none' : 'grid';
+    });
+
+    // Add document-level click listener only once
+    if (!colorPaletteDocumentListenerAdded) {
+      // Close palette when clicking outside
+      document.addEventListener('click', (e) => {
+        const currentToggleBtn = document.getElementById('color-toggle');
+        const currentPalette = document.getElementById('color-palette');
+        if (currentPalette && currentToggleBtn) {
+          if (!currentPalette.contains(e.target) && e.target !== currentToggleBtn && !currentToggleBtn.contains(e.target)) {
+            currentPalette.style.display = 'none';
+          }
+        }
+      });
+      colorPaletteDocumentListenerAdded = true;
+      debug.log('🎨 Added document-level color palette click listener');
+    }
+
+    // Add click handlers to color swatches
+    document.querySelectorAll('.color-swatch').forEach(swatch => {
+      swatch.addEventListener('click', (e) => {
+        const newColor = e.target.dataset.color;
+        const oldColor = characterData.notificationColor;
+        characterData.notificationColor = newColor;
+
+        // Update all swatches appearance
+        document.querySelectorAll('.color-swatch').forEach(s => {
+          const isSelected = s.dataset.color === newColor;
+          s.style.opacity = isSelected ? '1' : '0.6';
+          s.style.transform = isSelected ? 'scale(1.2)' : 'scale(1)';
+          s.style.filter = isSelected ? 'drop-shadow(0 0 4px white)' : 'none';
+        });
+
+        // Update the toggle button emoji (using current element in DOM)
+        const newEmoji = getColorEmoji(newColor);
+        const colorEmojiEl = document.getElementById('color-emoji');
+        if (colorEmojiEl) {
+          colorEmojiEl.textContent = newEmoji;
+        }
+
+        // Close the palette
+        palette.style.display = 'none';
+
+        // Refresh the portrait with the new color
+        if (typeof displayCharacterPortrait === 'function') {
+          displayCharacterPortrait('char-portrait', characterData, 120);
+        }
+
+        // Save to storage
+        saveCharacterData();
+
+        // Sync to Supabase if available
+        syncColorToSupabase(newColor);
+
+        showNotification(`🎨 Notification color changed to ${e.target.title}!`);
+      });
+    });
+  }
+
+  /**
+   * Sync color selection to Supabase
+   * @param {string} color - Hex color value to sync
+   */
+  async function syncColorToSupabase(color) {
+    try {
+      // Check if browserAPI is available
+      if (typeof browserAPI === 'undefined' || !browserAPI) {
+        debug.warn('⚠️ browserAPI not available, cannot sync color to Supabase');
+        return;
+      }
+
+      // Send message to background script to sync to Supabase
+      const response = await browserAPI.runtime.sendMessage({
+        action: 'syncCharacterColor',
+        characterId: characterData.id,
+        color: color
+      });
+
+      if (response && response.success) {
+        debug.log('🎨 Color synced to Supabase successfully');
+      } else {
+        debug.warn('⚠️ Failed to sync color to Supabase:', response?.error);
+      }
+    } catch (error) {
+      debug.warn('⚠️ Error syncing color to Supabase:', error);
+    }
+  }
+
+  // ===== CLOSE BUTTON =====
+
+  /**
+   * Initialize close button
+   * Adds click handler to close the popup window
+   */
+  function initCloseButton() {
+    const closeBtn = document.getElementById('close-btn');
+    if (closeBtn) {
+      closeBtn.addEventListener('click', () => {
+        window.close();
+      });
+    }
+  }
+
+  // ===== EXPORTS =====
+
+  // Export functions to globalThis
+  globalThis.initCollapsibleSections = initCollapsibleSections;
+  globalThis.collapseSectionByContainerId = collapseSectionByContainerId;
+  globalThis.expandSectionByContainerId = expandSectionByContainerId;
+  globalThis.createColorPalette = createColorPalette;
+  globalThis.initColorPalette = initColorPalette;
+  globalThis.syncColorToSupabase = syncColorToSupabase;
+  globalThis.initCloseButton = initCloseButton;
+
+  debug.log('✅ UI Utilities module loaded');
+
+  // ===== AUTO-INITIALIZATION =====
+
+  // Initialize collapsible sections when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initCollapsibleSections);
+  } else {
+    initCollapsibleSections();
+  }
+
+  // Initialize close button when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initCloseButton);
+  } else {
+    initCloseButton();
+  }
+
+})();