closes #1 by adding headshot feature

static/js/wompum.js

@@ -152,6 +152,93 @@ class ArticleGrid extends WompumGrid {
     }
 }
 
+class RadialWompumGrid {
+    constructor(element, size = 10) {
+        this.element = element; // Remove .parentElement
+        this.segments = size;
+        this.colorCalculator = new ColorCalculator();
+                this.sigil = Sigil.generate(this.element.dataset.text || '');
+    }
+
+    createSegment(index) {
+        const angle = (360 / this.segments);
+        // Add a small gap by reducing the arc angle
+        const gap = 2; // degrees of gap
+        const startAngle = (index * angle) + (gap / 2);
+        const endAngle = ((index + 1) * angle) - (gap / 2);
+        const outerRadius = 50;
+        const innerRadius = 0;
+
+        const start = this.polarToCartesian(startAngle, outerRadius);
+        const end = this.polarToCartesian(endAngle, outerRadius);
+        const innerStart = this.polarToCartesian(startAngle, innerRadius);
+        const innerEnd = this.polarToCartesian(endAngle, innerRadius);
+
+        const largeArcFlag = (angle - gap) > 180 ? 1 : 0;
+
+        const d = [
+            `M ${start.x} ${start.y}`,
+            `A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`,
+            `L ${innerEnd.x} ${innerEnd.y}`,
+            `A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${innerStart.x} ${innerStart.y}`,
+            'Z'
+        ].join(' ');
+
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('d', d);
+        
+        const sigilDigit = this.getSigilDigit(index);
+        // Pass empty array for influences since we don't need adjacent segments
+        const color = this.colorCalculator.getColor(sigilDigit, []);
+        path.setAttribute('fill', color);
+        
+        return path;
+    }
+
+    polarToCartesian(angle, radius) {
+        const radian = (angle - 90) * Math.PI / 180.0;
+        return {
+            x: 50 + (radius * Math.cos(radian)),
+            y: 50 + (radius * Math.sin(radian))
+        };
+    }
+
+    getSigilDigit(position) {
+        if (!this.sigil || !this.sigil.length) return 0;
+        return this.sigil[position % this.sigil.length];
+    }
+
+    getInfluences(index) {
+        const prev = (index - 1 + this.segments) % this.segments;
+        const next = (index + 1) % this.segments;
+        return [
+            this.getSigilDigit(prev),
+            this.getSigilDigit(next)
+        ];
+    }
+
+    createSVG() {
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('viewBox', '0 0 100 100');
+        svg.setAttribute('class', 'wompum-radial-grid');
+
+        for (let i = 0; i < this.segments; i++) {
+            svg.appendChild(this.createSegment(i));
+        }
+
+        return svg;
+    }
+
+    init() {
+        if (!this.sigil || !this.sigil.length) {
+            console.error('No sigil generated from text:', this.element.getAttribute('data-text'));
+            return;
+        }
+        const svg = this.createSVG();
+        this.element.insertBefore(svg, this.element.firstChild);
+    }
+}
+
 // Initialize grids
 document.addEventListener('DOMContentLoaded', () => {
     // Initialize basic grids
@@ -172,4 +259,10 @@ document.addEventListener('DOMContentLoaded', () => {
         const grid = new ArticleGrid(element, metadata);
         grid.init();
     });
+
+    // Initialize radial grids for profile images
+    document.querySelectorAll('.narrator__container').forEach(element => {
+        const grid = new RadialWompumGrid(element);
+        grid.init();
+    });
 });