@carmaclouds/core 2.3.1

package/src/modules/action-filters.js

@@ -0,0 +1,167 @@
+/**
+ * Action Filters Module
+ *
+ * Handles action filtering, categorization, and rebuilding.
+ * Loaded as a plain script (no ES6 modules) to export to window.
+ *
+ * Functions exported to globalThis:
+ * - categorizeAction(action)
+ * - initializeActionFilters()
+ * - rebuildActions()
+ *
+ * State variables exported to globalThis:
+ * - actionFilters
+ */
+
+(function() {
+  'use strict';
+
+  // ===== STATE =====
+
+  // Filter state for actions
+  const actionFilters = {
+    actionType: 'all',
+    category: 'all',
+    search: ''
+  };
+
+  // ===== FUNCTIONS =====
+
+  /**
+   * Helper function to categorize an action
+   * @param {Object} action - Action object
+   * @returns {string} Category: 'healing', 'damage', or 'utility'
+   */
+  function categorizeAction(action) {
+    const name = (action.name || '').toLowerCase();
+    const damageType = (action.damageType || '').toLowerCase();
+    const actionType = (action.actionType || '').toLowerCase();
+
+    // Check for healing based on damage type or name
+    if (damageType.includes('heal') || name.includes('heal') || name.includes('cure')) {
+      return 'healing';
+    }
+
+    // Check for damage based on:
+    // 1. Actual damage formula with dice
+    if (action.damage && action.damage.includes('d')) {
+      return 'damage';
+    }
+    
+    // 2. Has attack roll (weapons, attacks)
+    if (action.attackRoll && action.attackRoll !== '(none)') {
+      return 'damage';
+    }
+    
+    // 3. Action type is explicitly 'attack'
+    if (actionType === 'attack') {
+      return 'damage';
+    }
+    
+    // 4. Name contains attack/weapon keywords
+    if (name.includes('attack') || name.includes('strike') || name.includes('bow') || 
+        name.includes('sword') || name.includes('axe') || name.includes('weapon')) {
+      return 'damage';
+    }
+
+    // Everything else is utility
+    return 'utility';
+  }
+
+  /**
+   * Initialize action filter event listeners
+   */
+  function initializeActionFilters() {
+    // Actions search filter
+    const actionsSearch = document.getElementById('actions-search');
+    if (actionsSearch) {
+      actionsSearch.addEventListener('input', (e) => {
+        actionFilters.search = e.target.value.toLowerCase();
+        rebuildActions();
+      });
+    }
+
+    // Action type filters (action, bonus action, reaction, etc.)
+    document.querySelectorAll('[data-type="action-type"]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        actionFilters.actionType = btn.dataset.filter;
+        document.querySelectorAll('[data-type="action-type"]').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        rebuildActions();
+      });
+    });
+
+    // Action category filters (damage, healing, utility)
+    document.querySelectorAll('[data-type="action-category"]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        actionFilters.category = btn.dataset.filter;
+        document.querySelectorAll('[data-type="action-category"]').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        rebuildActions();
+      });
+    });
+  }
+
+  /**
+   * Rebuild actions with current filters
+   */
+  function rebuildActions() {
+    if (!characterData || !characterData.actions) return;
+
+    // Filter actions based on current filter state
+    let filteredActions = characterData.actions.filter(action => {
+      // Filter by action type (action, bonus, reaction, free)
+      if (actionFilters.actionType !== 'all') {
+        const actionType = (action.actionType || '').toLowerCase();
+        if (actionType !== actionFilters.actionType) {
+          return false;
+        }
+      }
+
+      // Filter by category (damage, healing, utility)
+      if (actionFilters.category !== 'all') {
+        const category = categorizeAction(action);
+        if (category !== actionFilters.category) {
+          return false;
+        }
+      }
+
+      // Filter by search term
+      if (actionFilters.search) {
+        const searchLower = actionFilters.search.toLowerCase();
+        const nameMatch = (action.name || '').toLowerCase().includes(searchLower);
+        const descMatch = (action.description || '').toLowerCase().includes(searchLower);
+        const summaryMatch = (action.summary || '').toLowerCase().includes(searchLower);
+        if (!nameMatch && !descMatch && !summaryMatch) {
+          return false;
+        }
+      }
+
+      return true;
+    });
+
+    debug.log(`🔍 Filtered actions: ${filteredActions.length}/${characterData.actions.length} (type=${actionFilters.actionType}, category=${actionFilters.category}, search="${actionFilters.search}")`);
+
+    const container = document.getElementById('actions-container');
+    buildActionsDisplay(container, filteredActions);
+  }
+
+  // ===== EXPORTS =====
+
+  window.categorizeAction = categorizeAction;
+  window.initializeActionFilters = initializeActionFilters;
+  window.rebuildActions = rebuildActions;
+
+  // Export state variable with getter and setter
+  Object.defineProperty(globalThis, 'actionFilters', {
+    get: () => actionFilters,
+    set: (value) => {
+      if (value && typeof value === 'object') {
+        Object.assign(actionFilters, value);
+      }
+    }
+  });
+
+  console.log('✅ Action Filters module loaded');
+
+})();

package/src/modules/action-options.js

@@ -0,0 +1,117 @@
+/**
+ * Action Options Module
+ *
+ * Handles generation of action options (attack, damage, healing buttons).
+ * Loaded as a plain script (no ES6 modules) to export to globalThis.
+ *
+ * Functions exported to globalThis:
+ * - getActionOptions(action)
+ */
+
+(function() {
+  'use strict';
+
+  /**
+   * Get available action options (attack/damage rolls) with edge case modifications
+   * @param {Object} action - Action object
+   * @returns {Object} Object with { options: [], skipNormalButtons: boolean }
+   */
+  function getActionOptions(action) {
+    const options = [];
+
+    // Check for attack
+    if (action.attackRoll) {
+      // Convert to full formula if it's just a number (legacy data)
+      let formula = action.attackRoll;
+      if (typeof formula === 'number' || (typeof formula === 'string' && !formula.includes('d20'))) {
+        const bonus = parseInt(formula);
+        formula = bonus >= 0 ? `1d20+${bonus}` : `1d20${bonus}`;
+      }
+
+      options.push({
+        type: 'attack',
+        label: '🎯 Attack Roll',
+        formula: formula,
+        icon: '🎯',
+        color: '#e74c3c'
+      });
+    }
+
+    // Check for damage/healing rolls
+    debug.log(`🎲 Action "${action.name}" damage check:`, {
+      damage: action.damage,
+      damageType: typeof action.damage,
+      damageValue: action.damage,
+      attackRoll: action.attackRoll
+    });
+    
+    // Handle damage as string or extract from object
+    let damageFormula = action.damage;
+    if (typeof action.damage === 'object' && action.damage !== null) {
+      damageFormula = action.damage.value || action.damage.calculation || action.damage.formula || '';
+      debug.log(`🔍 Extracted damage from object: "${damageFormula}"`);
+    }
+    
+    const isValidDiceFormula = damageFormula && typeof damageFormula === 'string' && (/\d*d\d+/.test(damageFormula) || /\d*d\d+/.test(damageFormula.replace(/\s*\+\s*/g, '+')));
+    debug.log(`✅ Damage validation result: isValid=${isValidDiceFormula}, formula="${damageFormula}"`);
+    if (isValidDiceFormula) {
+      const isHealing = action.damageType && action.damageType.toLowerCase().includes('heal');
+      const isTempHP = action.damageType && (
+        action.damageType.toLowerCase() === 'temphp' ||
+        action.damageType.toLowerCase() === 'temporary' ||
+        action.damageType.toLowerCase().includes('temp')
+      );
+
+      // Use different text for healing vs damage vs features
+      let btnText;
+      if (isHealing) {
+        btnText = '💚 Heal';
+      } else if (action.actionType === 'feature' || !action.attackRoll) {
+        btnText = '🎲 Roll';
+      } else {
+        btnText = '💥 Damage Roll';
+      }
+
+      options.push({
+        type: isHealing ? 'healing' : (isTempHP ? 'temphp' : 'damage'),
+        label: btnText,
+        formula: damageFormula,
+        icon: isTempHP ? '🛡️' : (isHealing ? '💚' : '💥'),
+        color: isTempHP ? '#3498db' : (isHealing ? '#27ae60' : '#e67e22')
+      });
+    }
+
+    // Apply edge case modifications
+    let edgeCaseResult;
+
+    // Check class feature edge cases first
+    if (isClassFeatureEdgeCase(action.name)) {
+      edgeCaseResult = applyClassFeatureEdgeCaseModifications(action, options);
+      debug.log(`🔍 Edge case applied for "${action.name}": skipNormalButtons = ${edgeCaseResult.skipNormalButtons}`);
+    }
+    // Check racial feature edge cases
+    else if (isRacialFeatureEdgeCase(action.name)) {
+      edgeCaseResult = applyRacialFeatureEdgeCaseModifications(action, options);
+      debug.log(`🔍 Edge case applied for "${action.name}": skipNormalButtons = ${edgeCaseResult.skipNormalButtons}`);
+    }
+    // Check combat maneuver edge cases
+    else if (isCombatManeuverEdgeCase(action.name)) {
+      edgeCaseResult = applyCombatManeuverEdgeCaseModifications(action, options);
+      debug.log(`🔍 Edge case applied for "${action.name}": skipNormalButtons = ${edgeCaseResult.skipNormalButtons}`);
+    }
+    // Default - no edge cases
+    else {
+      edgeCaseResult = { options, skipNormalButtons: false };
+      debug.log(`🔍 No edge case for "${action.name}": skipNormalButtons = false`);
+    }
+
+    return edgeCaseResult;
+  }
+
+  // ===== EXPORTS =====
+
+  globalThis.getActionOptions = getActionOptions;
+
+  console.log('✅ Action Options module loaded');
+
+})();

package/src/modules/card-creator.js

@@ -0,0 +1,142 @@
+/**
+ * Card Creator Utilities
+ * Functions for creating UI card elements
+ */
+
+/**
+ * Create a simple card element
+ * @param {string} title - Card title
+ * @param {string} main - Main content (e.g., bonus value)
+ * @param {string} sub - Sub content (optional)
+ * @param {Function} onClick - Click handler
+ * @returns {HTMLElement} Card element
+ */
+function createCard(title, main, sub, onClick) {
+  const card = document.createElement('div');
+  card.className = 'card';
+  card.innerHTML = `
+    <strong>${title}</strong><br>
+    <span class="bonus">${main}</span><br>
+    ${sub ? `<span class="bonus">${sub}</span>` : ''}
+  `;
+  card.addEventListener('click', onClick);
+  return card;
+}
+
+/**
+ * Create a spell card element
+ * @param {object} spell - Spell data object
+ * @param {number} index - Spell index
+ * @returns {HTMLElement} Spell card element
+ */
+function createSpellCard(spell, index) {
+  const card = document.createElement('div');
+  card.className = 'spell-card';
+
+  const header = document.createElement('div');
+  header.className = 'spell-header';
+
+  // Build tags string
+  let tags = '';
+  if (spell.concentration) {
+    tags += '<span class="concentration-tag">🧠 Concentration</span>';
+  }
+  if (spell.ritual) {
+    tags += '<span class="ritual-tag">📖 Ritual</span>';
+  }
+
+  header.innerHTML = `
+    <div>
+      <span style="font-weight: bold;">${spell.name}</span>
+      ${spell.level ? `<span style="margin-left: 10px; color: var(--text-secondary);">Level ${spell.level}</span>` : ''}
+      ${tags}
+    </div>
+    <div style="display: flex; gap: 8px;">
+      <button class="cast-btn" data-spell-index="${index}">✨ Cast</button>
+      <button class="toggle-btn">▼ Details</button>
+    </div>
+  `;
+
+  const desc = document.createElement('div');
+  desc.className = 'spell-description';
+  desc.id = `spell-desc-${index}`;
+  desc.innerHTML = `
+    ${spell.castingTime ? `<div><strong>Casting Time:</strong> ${spell.castingTime}</div>` : ''}
+    ${spell.range ? `<div><strong>Range:</strong> ${spell.range}</div>` : ''}
+    ${spell.components ? `<div><strong>Components:</strong> ${spell.components}</div>` : ''}
+    ${spell.duration ? `<div><strong>Duration:</strong> ${spell.duration}</div>` : ''}
+    ${spell.school ? `<div><strong>School:</strong> ${spell.school}</div>` : ''}
+    ${spell.source ? `<div><strong>Source:</strong> ${spell.source}</div>` : ''}
+    ${spell.description ? `<div style="margin-top: 10px;">${spell.description}</div>` : ''}
+  `;
+
+  card.appendChild(header);
+  card.appendChild(desc);
+
+  // Toggle description visibility
+  const toggleBtn = header.querySelector('.toggle-btn');
+  toggleBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    desc.classList.toggle('expanded');
+    toggleBtn.textContent = desc.classList.contains('expanded') ? '▲ Hide' : '▼ Details';
+  });
+
+  return card;
+}
+
+/**
+ * Create an action card element
+ * @param {object} action - Action data object
+ * @param {number} index - Action index
+ * @returns {HTMLElement} Action card element
+ */
+function createActionCard(action, index) {
+  const card = document.createElement('div');
+  card.className = 'action-card';
+
+  const header = document.createElement('div');
+  header.innerHTML = `
+    <div style="display: flex; justify-content: space-between; align-items: center;">
+      <div>
+        <strong>${action.name || 'Action'}</strong>
+        ${action.uses ? `<span class="uses-badge">${action.uses} uses</span>` : ''}
+      </div>
+      <div class="action-buttons" style="display: flex; gap: 8px;">
+        ${action.attackRoll ? `<button class="attack-btn" data-action-index="${index}">⚔️ Attack</button>` : ''}
+        ${action.damage ? `<button class="damage-btn" data-action-index="${index}">💥 Damage</button>` : ''}
+        ${action.uses ? `<button class="use-btn" data-action-index="${index}">✨ Use</button>` : ''}
+        <button class="toggle-btn">▼</button>
+      </div>
+    </div>
+  `;
+
+  const desc = document.createElement('div');
+  desc.className = 'action-description';
+  desc.id = `action-desc-${index}`;
+  if (action.description) {
+    desc.innerHTML = `<div>${action.description}</div>`;
+  }
+
+  card.appendChild(header);
+  card.appendChild(desc);
+
+  // Toggle description visibility
+  const toggleBtn = header.querySelector('.toggle-btn');
+  toggleBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    desc.classList.toggle('expanded');
+    toggleBtn.textContent = desc.classList.contains('expanded') ? '▲' : '▼';
+  });
+
+  return card;
+}
+
+// Export for use in other modules
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { createCard, createSpellCard, createActionCard };
+}
+
+// Make available globally for popup-sheet.js
+if (typeof window !== 'undefined') {
+  window.CardCreator = { createCard, createSpellCard, createActionCard };
+}

package/src/modules/character-portrait.js

@@ -0,0 +1,169 @@
+/**
+ * Character Portrait Module
+ * 
+ * Handles character portrait display with circular cropping
+ * Exports to globalThis for use across all extensions
+ */
+
+(function() {
+  'use strict';
+
+  /**
+   * Crop an image to a circle with optional colored border
+   * @param {string} imageUrl - URL of the image to crop
+   * @param {number} size - Size of the output image (default: 200)
+   * @param {string} borderColor - Color of the border (default: null for no border)
+   * @param {number} borderWidth - Width of the border in pixels (default: 4)
+   * @returns {Promise<string>} - Data URL of the cropped circular image
+   */
+  function cropToCircle(imageUrl, size = 200, borderColor = null, borderWidth = 4) {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.crossOrigin = 'anonymous'; // Handle CORS
+      
+      img.onload = () => {
+        try {
+          // Create canvas
+          const canvas = document.createElement('canvas');
+          canvas.width = size;
+          canvas.height = size;
+          const ctx = canvas.getContext('2d');
+          
+          // Calculate the radius for the image circle (accounting for border)
+          const imageRadius = borderColor ? (size / 2) - borderWidth : (size / 2);
+          
+          // Draw circular clip path for the image
+          ctx.save();
+          ctx.beginPath();
+          ctx.arc(size / 2, size / 2, imageRadius, 0, Math.PI * 2);
+          ctx.closePath();
+          ctx.clip();
+          
+          // Calculate scaling to cover the circle (crop to fit)
+          const scale = Math.max((imageRadius * 2) / img.width, (imageRadius * 2) / img.height);
+          const scaledWidth = img.width * scale;
+          const scaledHeight = img.height * scale;
+          
+          // Center the image
+          const x = (size - scaledWidth) / 2;
+          const y = (size - scaledHeight) / 2;
+          
+          // Draw image
+          ctx.drawImage(img, x, y, scaledWidth, scaledHeight);
+          ctx.restore();
+          
+          // Draw border if color is provided
+          if (borderColor) {
+            ctx.beginPath();
+            ctx.arc(size / 2, size / 2, imageRadius, 0, Math.PI * 2);
+            ctx.strokeStyle = borderColor;
+            ctx.lineWidth = borderWidth;
+            ctx.stroke();
+          }
+          
+          // Convert to data URL
+          resolve(canvas.toDataURL('image/png'));
+        } catch (error) {
+          reject(error);
+        }
+      };
+      
+      img.onerror = () => {
+        reject(new Error('Failed to load image'));
+      };
+      
+      img.src = imageUrl;
+    });
+  }
+
+  // Fallback debug object if not available
+  const debug = window.debug || {
+    log: console.log.bind(console),
+    warn: console.warn.bind(console),
+    error: console.error.bind(console)
+  };
+
+  /**
+   * Display character portrait in the specified element
+   * @param {string} elementId - ID of the img element to display portrait in
+   * @param {object} characterData - Character data object
+   * @param {number} size - Size of the portrait (default: 120)
+   */
+  async function displayCharacterPortrait(elementId, characterData, size = 120) {
+    const portraitElement = document.getElementById(elementId);
+    
+    if (!portraitElement) {
+      debug.warn(`⚠️ Portrait element not found: ${elementId}`);
+      return;
+    }
+    
+    if (!characterData) {
+      debug.warn('⚠️ No character data provided for portrait');
+      return;
+    }
+    
+    // Try multiple possible portrait URL fields
+    const portraitUrl = characterData.picture 
+                     || characterData.avatarPicture 
+                     || characterData.avatar
+                     || characterData.image
+                     || (characterData.rawDiceCloudData && characterData.rawDiceCloudData.creature && characterData.rawDiceCloudData.creature.picture)
+                     || (characterData.raw && characterData.raw.creature && characterData.raw.creature.picture)
+                     || (characterData.raw && characterData.raw.picture)
+                     || (characterData.creature && characterData.creature.picture)
+                     || null;
+    
+    if (!portraitUrl) {
+      debug.log('ℹ️ No portrait URL found in character data');
+      portraitElement.style.display = 'none';
+      return;
+    }
+    
+    debug.log('🖼️ Displaying portrait from URL:', portraitUrl);
+    
+    // Get the character's notification color for the border
+    const borderColor = characterData.notificationColor || '#3498db';
+    const borderWidth = 4;
+    
+    // Clear any existing content
+    portraitElement.innerHTML = '';
+    
+    // Create img element
+    const img = document.createElement('img');
+    img.style.width = '100%';
+    img.style.height = '100%';
+    img.style.objectFit = 'cover';
+    img.style.borderRadius = '50%';
+    img.alt = `${characterData.name || 'Character'} portrait`;
+    
+    try {
+      // Try to crop to circle if cropToCircle is available
+      if (typeof cropToCircle === 'function') {
+        const croppedUrl = await cropToCircle(portraitUrl, size, borderColor, borderWidth);
+        img.src = croppedUrl;
+        portraitElement.appendChild(img);
+        portraitElement.style.display = 'block';
+        debug.log('✅ Portrait displayed (cropped with border)');
+      } else {
+        // Fallback: display directly without cropping
+        img.src = portraitUrl;
+        portraitElement.appendChild(img);
+        portraitElement.style.display = 'block';
+        debug.log('✅ Portrait displayed (uncropped)');
+      }
+    } catch (error) {
+      debug.warn('⚠️ Failed to crop portrait:', error);
+      // Fallback to original image
+      img.src = portraitUrl;
+      portraitElement.appendChild(img);
+      portraitElement.style.display = 'block';
+      debug.log('✅ Portrait displayed (uncropped fallback)');
+    }
+  }
+
+  // Export to global scope
+  globalThis.cropToCircle = cropToCircle;
+  globalThis.displayCharacterPortrait = displayCharacterPortrait;
+
+  debug.log('✅ Character Portrait module loaded');
+})();