diff --git a/assets/scss/components/_wompum.scss b/assets/scss/components/_wompum.scss
index ebe8dca..af3fd8f 100644
--- a/assets/scss/components/_wompum.scss
+++ b/assets/scss/components/_wompum.scss
@@ -4,24 +4,57 @@
margin: 0 auto;
}
- &-grid {
+ &-grid,
+ &-article-grid {
display: grid;
gap: 0;
padding: 0;
width: 100%;
}
- .single-default &-grid,
- .single-article &-grid {
- gap: 1rem;
+ // General grid styles
+ &-grid {
+ gap: 2px; // Tighter spacing for general grids
+
+ &[data-rows="1"] {
+ .wompum-cell {
+ height: 100%;
+ }
+ }
+ }
+
+ // Article grid styles
+ &-article-grid {
+ gap: 3px; // Wider spacing for article grids
+
+ .single-default &,
+ .single-article & {
+ gap: 1rem;
+ }
}
&-cell {
width: 100%;
- min-height: 30px;
+ transition: background-color 0.3s ease;
+
+ // Default background for uninitialized cells
background-color: var(--sand-500);
- // Create pseudo-random pattern using prime numbers
+ // Different styling for cells in article grids
+ .wompum-article-grid & {
+ &[data-section="narrator"] {
+ min-height: 35px;
+ }
+ &[data-section="subject"] {
+ min-height: 40px;
+ }
+ &[data-section="facilitator"] {
+ min-height: 35px;
+ }
+ }
+
+ // Fallback patterns using prime numbers
+ // (these will be overridden by JS-generated colors when initialized)
&:nth-child(7n+1) {
background-color: var(--sand-100);
}
diff --git a/layouts/partials/article-wompum.html b/layouts/partials/article-wompum.html
index 73a0b38..e33b8fa 100644
--- a/layouts/partials/article-wompum.html
+++ b/layouts/partials/article-wompum.html
@@ -1,8 +1,7 @@
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 203a809..8b3212f 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,16 +1,25 @@
-
-
-
+
diff --git a/static/js/wompum.js b/static/js/wompum.js
index d6c5a93..6ac1cc5 100644
--- a/static/js/wompum.js
+++ b/static/js/wompum.js
@@ -1,7 +1,6 @@
class WompumGrid {
- constructor(element, metadata) {
+ constructor(element) {
this.gridElement = element;
- this.metadata = metadata;
this.gridSize = {
columns: parseInt(element.dataset.columns) || 7,
rows: parseInt(element.dataset.rows) || 5
@@ -10,27 +9,19 @@ class WompumGrid {
// Set grid template columns based on data attribute or default
this.gridElement.style.gridTemplateColumns = `repeat(${this.gridSize.columns}, 1fr)`;
- // Generate sigils for each metadata component
- this.sigils = {
- narrator: Sigil.generate(metadata.narrator),
- subject: Sigil.generate(metadata.subject),
- facilitator: Sigil.generate(metadata.facilitator)
- };
-
// Initialize color calculator
this.colorCalculator = new ColorCalculator();
- // Store sigils as data attributes for future use
- this.gridElement.dataset.narratorSigil = JSON.stringify(this.sigils.narrator);
- this.gridElement.dataset.subjectSigil = JSON.stringify(this.sigils.subject);
- this.gridElement.dataset.facilitatorSigil = JSON.stringify(this.sigils.facilitator);
+ // Generate sigil from text content if provided
+ const text = element.dataset.text || '';
+ this.sigil = Sigil.generate(text);
+ this.gridElement.dataset.sigil = JSON.stringify(this.sigil);
}
- // Get sigil digit for a cell based on its section and position
- getSigilDigit(section, position) {
- const sigil = this.sigils[section];
- if (!sigil || !sigil.length) return 0;
- return sigil[position % sigil.length];
+ // Get sigil digit for a cell based on its position
+ getSigilDigit(position) {
+ if (!this.sigil || !this.sigil.length) return 0;
+ return this.sigil[position % this.sigil.length];
}
// Get influences from adjacent cells
@@ -60,18 +51,35 @@ class WompumGrid {
return influences;
}
- // Apply metadata-based design to the grid
+ // Create basic grid cells
+ createGrid() {
+ const totalCells = this.gridSize.columns * this.gridSize.rows;
+
+ for (let i = 0; i < totalCells; i++) {
+ const cell = document.createElement('div');
+ const column = i % this.gridSize.columns;
+ const row = Math.floor(i / this.gridSize.columns);
+
+ cell.className = 'wompum-cell';
+ cell.setAttribute('data-cell-index', i);
+ cell.setAttribute('data-column', column);
+ cell.setAttribute('data-row', row);
+
+ // Set sigil digit based on cell position
+ const sigilDigit = this.getSigilDigit(i);
+ cell.setAttribute('data-sigil-digit', sigilDigit);
+
+ this.gridElement.appendChild(cell);
+ }
+ }
+
applyMetadataDesign() {
const cells = this.gridElement.querySelectorAll('.wompum-cell');
cells.forEach(cell => {
- const section = cell.dataset.section;
const column = parseInt(cell.dataset.column);
const row = parseInt(cell.dataset.row);
-
- // Get sigil digit for this cell
- const sigilDigit = this.getSigilDigit(section, row);
- cell.dataset.sigilDigit = sigilDigit;
+ const sigilDigit = parseInt(cell.dataset.sigilDigit);
// Get influences from adjacent cells
const influences = this.getInfluences(column, row);
@@ -82,40 +90,51 @@ class WompumGrid {
});
}
- // Initialize the grid
init() {
if (!this.gridElement) return;
this.createGrid();
this.applyMetadataDesign();
- this.setGridAreas();
+ }
+}
+
+class ArticleGrid extends WompumGrid {
+ constructor(element, metadata) {
+ super(element);
+ this.metadata = metadata;
+
+ // Generate sigils for each metadata component
+ this.sigils = {
+ narrator: Sigil.generate(metadata.narrator),
+ subject: Sigil.generate(metadata.subject),
+ facilitator: Sigil.generate(metadata.facilitator)
+ };
+
+ // Store sigils as data attributes
+ Object.entries(this.sigils).forEach(([key, value]) => {
+ this.gridElement.dataset[`${key}Sigil`] = JSON.stringify(value);
+ });
}
- // Define grid areas for each section
- setGridAreas() {
- const totalColumns = this.gridSize.columns;
- const narratorColumns = 2;
- const facilitatorColumns = 2;
- const subjectColumns = totalColumns - narratorColumns - facilitatorColumns;
-
- this.gridElement.style.gridTemplateAreas = `
- "narrator subject facilitator"
- `;
- // this.gridElement.style.gridTemplateColumns = `${narratorColumns}fr ${subjectColumns}fr ${facilitatorColumns}fr`;
+ getSigilDigit(position, section) {
+ const sigil = this.sigils[section];
+ if (!sigil || !sigil.length) return 0;
+ return sigil[position % sigil.length];
}
- // Create the grid cells with position awareness
createGrid() {
const totalCells = this.gridSize.columns * this.gridSize.rows;
+ const narratorColumns = 2;
+ const facilitatorColumns = 2;
for (let i = 0; i < totalCells; i++) {
const cell = document.createElement('div');
const column = i % this.gridSize.columns;
const row = Math.floor(i / this.gridSize.columns);
- // Determine which section this cell belongs to
+ // Determine section based on column position
let section;
- if (column < 2) section = 'narrator';
- else if (column >= this.gridSize.columns - 2) section = 'facilitator';
+ if (column < narratorColumns) section = 'narrator';
+ else if (column >= this.gridSize.columns - facilitatorColumns) section = 'facilitator';
else section = 'subject';
cell.className = 'wompum-cell';
@@ -124,26 +143,33 @@ class WompumGrid {
cell.setAttribute('data-column', column);
cell.setAttribute('data-row', row);
+ // Set sigil digit based on section and position
+ const sigilDigit = this.getSigilDigit(row, section);
+ cell.setAttribute('data-sigil-digit', sigilDigit);
+
this.gridElement.appendChild(cell);
}
}
}
-// Wait for DOM to be ready
+// Initialize grids
document.addEventListener('DOMContentLoaded', () => {
- // Find all grid elements
- const gridElements = document.querySelectorAll('.wompum-grid');
-
- // Initialize a grid for each element found
- gridElements.forEach(element => {
+ // Initialize basic grids
+ document.querySelectorAll('.wompum-grid').forEach(element => {
+ const grid = new WompumGrid(element);
+ grid.init();
+ });
+
+ // Initialize article grids
+ document.querySelectorAll('.wompum-article-grid').forEach(element => {
let metadata = {};
try {
metadata = JSON.parse(element.dataset.metadata || '{}');
} catch (e) {
- console.error('Error parsing metadata for grid:', e);
+ console.error('Error parsing metadata for article grid:', e);
}
- const wompum = new WompumGrid(element, metadata);
- wompum.init();
+ const grid = new ArticleGrid(element, metadata);
+ grid.init();
});
-});
\ No newline at end of file
+});
\ No newline at end of file