2025-04-07 12:25:58 -06:00

86 lines
3.2 KiB
HTML

<div class="wompum-demo max-w-2xl mx-auto">
<h2 class="text-2xl font-bold mb-4">Wompum Grid Protocol</h2>
<p>We use a protocol to generate the colorful wompum style grid for articles and other places around the site, learn how it works here.</p>
<div class="mb-8 font-iosevka">
<label class="block mb-2">Enter text to generate a grid:</label>
<input type="text"
class="w-full p-2 border rounded"
placeholder="Type something..."
oninput="updateWompumDemo(this.value)">
</div>
<p>First we generate a sigil by removing spaces, turning to lowercase, removing anything that isn't a consonant, removing repeat letters, find the unicode character number, and finally get the digital root of those numbers. From there the sigil digits are used to choose a color from our pallet.</p>
<div class="transformation-steps space-y-4 mb-8 font-iosevka">
<div>
<span class="font-bold">Original Text:</span>
<span class="text-input-display"></span>
</div>
<div>
<span class="font-bold">Lowercase:</span>
<span class="text-cleaned-display"></span>
</div>
<div>
<span class="font-bold">Consonants only:</span>
<span class="text-consonants-display"></span>
</div>
<div>
<span class="font-bold">Unique consonants:</span>
<span class="text-unique-display"></span>
</div>
<div>
<span class="font-bold">Letters to numbers:</span>
<span class="text-sigil-numbers"></span>
</div>
<div>
<span class="font-bold">Digital root:</span>
<span class="text-sigil-root"></span>
</div>
<div>
<span class="font-bold">The final grid:</span>
</div>
</div>
<div class="wompum-container h-48 mb-8">
<div class="wompum-grid h-full"
data-text=""
data-columns="5"
data-rows="3">
</div>
</div>
<script>
function updateWompumDemo(text) {
// Update displays
document.querySelector('.text-input-display').textContent = text;
document.querySelector('.text-cleaned-display').textContent = text.toLowerCase().replace(/[^a-z]/g, '');
document.querySelector('.text-consonants-display').textContent = text.toLowerCase().replace(/[^a-z]/g, '').replace(/[aeiou]/g, '');
const uniqueConsonants = [...new Set(text.toLowerCase().replace(/[^a-z]/g, '').replace(/[aeiou]/g, ''))].join('');
document.querySelector('.text-unique-display').textContent = uniqueConsonants;
// Show character to number conversion
const charNumbers = [...uniqueConsonants].map(char => char.charCodeAt(0)).join(', ');
document.querySelector('.text-sigil-numbers').textContent = charNumbers;
// Show digital root calculation
const sigilArray = Sigil.generate(text);
document.querySelector('.text-sigil-root').textContent = sigilArray.join(', ');
// Update grid
const grid = document.querySelector('.wompum-demo .wompum-grid');
grid.dataset.text = text;
// Remove existing grid
while (grid.firstChild) {
grid.firstChild.remove();
}
// Reinitialize grid
new WompumGrid(grid).init();
}
</script>
</div>