86 lines
3.2 KiB
HTML
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>
|