From db45d2d88d639beeeaa1d956adfcdde48628f621 Mon Sep 17 00:00:00 2001
From: EP <ep@Mac.lan>
Date: Wed, 20 Aug 2025 16:55:03 -0700
Subject: [PATCH] Tokenade: add 5 fun weight-class presets (Featherweight,
 Lightweight, Middleweight, Heavyweight, Super Heavyweight) and wire logic

---
 index.html |   8 ++--
 js/app.js  | 120 +++++++++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 117 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 894419b..c225e24 100644
--- a/index.html
+++ b/index.html
@@ -128,9 +128,11 @@
                         </div>
                         <div class="tokenade-presets">
                             <label style="margin-right:8px">Presets</label>
-                            <button class="transform-button" title="Balanced density" @click="applyTokenadePreset('light')">Light</button>
-                            <button class="transform-button" title="High density" @click="applyTokenadePreset('standard')">Standard</button>
-                            <button class="transform-button" title="Extreme density" @click="applyTokenadePreset('heavy')">Heavy</button>
+                            <button class="transform-button" title="Very light density" @click="applyTokenadePreset('feather')">🥊 Featherweight</button>
+                            <button class="transform-button" title="Light density" @click="applyTokenadePreset('light')">🥊 Lightweight</button>
+                            <button class="transform-button" title="Balanced density" @click="applyTokenadePreset('middle')">🥊 Middleweight</button>
+                            <button class="transform-button" title="High density" @click="applyTokenadePreset('heavy')">🥊 Heavyweight</button>
+                            <button class="transform-button" title="Extreme density (use with care)" @click="applyTokenadePreset('super')">🥊 Super Heavyweight</button>
                         </div>
                         <div class="token-bomb-controls options-grid">
                             <label title="Nesting levels; higher = more layers of grouping">
diff --git a/js/app.js b/js/app.js
index 219f350..39206dd 100644
--- a/js/app.js
+++ b/js/app.js
@@ -61,6 +61,9 @@ window.app = new Vue({
         tbIncludeNoise: true,
         tbRandomizeEmojis: true,
         tbAutoCopy: false,
+        tbSingleCarrier: false,
+        tbCarrier: '',
+        tbPayloadEmojis: [],
         tokenBombOutput: '',
         
         // History of copied content
@@ -1732,13 +1735,56 @@ window.app = new Vue({
                 return items.join(sep);
             }
 
-            let block = buildLevel(depth - 1);
-            // Repeat the block to increase token length
-            const blocks = [];
-            for (let i = 0; i < repeats; i++) {
-                blocks.push(block + noise());
+            if (this.tbSingleCarrier) {
+                const carrier = (this.tbCarrier && String(this.tbCarrier)) || (this.selectedEmoji ? String(this.selectedEmoji) : '💥');
+                function countUnits(level) {
+                    if (level === 0) return breadth;
+                    return breadth * countUnits(level - 1);
+                }
+                const unitsPerBlock = countUnits(depth - 1);
+                const totalUnits = Math.max(1, repeats * unitsPerBlock);
+
+                let payload = [];
+                if (this.tbPayloadEmojis && this.tbPayloadEmojis.length > 0) {
+                    for (let i = 0; i < totalUnits; i++) {
+                        payload.push(String(this.tbPayloadEmojis[i % this.tbPayloadEmojis.length]));
+                    }
+                } else {
+                    payload = pickEmojis(totalUnits);
+                }
+
+                function toTagSeqForEmojiChar(ch) {
+                    const cp = ch.codePointAt(0);
+                    const hex = cp.toString(16);
+                    let seq = '';
+                    for (const d of hex) {
+                        if (d >= '0' && d <= '9') {
+                            const base = 0xE0030 + (d.charCodeAt(0) - '0'.charCodeAt(0));
+                            seq += String.fromCodePoint(base);
+                        } else {
+                            const base = 0xE0061 + (d.charCodeAt(0) - 'a'.charCodeAt(0));
+                            seq += String.fromCodePoint(base);
+                        }
+                    }
+                    seq += String.fromCodePoint(0xE007F);
+                    return seq;
+                }
+
+                const vs16 = includeVS ? '\uFE0F' : '';
+                let out = carrier + vs16;
+                for (let i = 0; i < payload.length; i++) {
+                    out += sep + toTagSeqForEmojiChar(payload[i]) + noise();
+                }
+                this.tokenBombOutput = out;
+            } else {
+                let block = buildLevel(depth - 1);
+                // Repeat the block to increase token length
+                const blocks = [];
+                for (let i = 0; i < repeats; i++) {
+                    blocks.push(block + noise());
+                }
+                this.tokenBombOutput = blocks.join(sep);
             }
-            this.tokenBombOutput = blocks.join(sep);
 
             // Provide a quick visual confirmation
             this.showNotification('<i class="fas fa-bomb"></i> Tokenade generated', 'success');
@@ -1749,17 +1795,75 @@ window.app = new Vue({
         },
 
         applyTokenadePreset(preset) {
-            if (preset === 'light') {
+            if (preset === 'feather') {
+                this.tbDepth = 1; this.tbBreadth = 3; this.tbRepeats = 2; this.tbSeparator = 'zwsp';
+                this.tbIncludeVS = false; this.tbIncludeNoise = false; this.tbRandomizeEmojis = true;
+            } else if (preset === 'light') {
                 this.tbDepth = 2; this.tbBreadth = 3; this.tbRepeats = 3; this.tbSeparator = 'zwsp';
                 this.tbIncludeVS = false; this.tbIncludeNoise = true; this.tbRandomizeEmojis = true;
-            } else if (preset === 'standard') {
+            } else if (preset === 'middle') {
                 this.tbDepth = 3; this.tbBreadth = 4; this.tbRepeats = 6; this.tbSeparator = 'zwj';
                 this.tbIncludeVS = true; this.tbIncludeNoise = true; this.tbRandomizeEmojis = true;
             } else if (preset === 'heavy') {
                 this.tbDepth = 4; this.tbBreadth = 6; this.tbRepeats = 12; this.tbSeparator = 'zwj';
                 this.tbIncludeVS = true; this.tbIncludeNoise = true; this.tbRandomizeEmojis = true;
+            } else if (preset === 'super') {
+                this.tbDepth = 5; this.tbBreadth = 8; this.tbRepeats = 18; this.tbSeparator = 'zwj';
+                this.tbIncludeVS = true; this.tbIncludeNoise = true; this.tbRandomizeEmojis = true;
             }
             this.showNotification('<i class="fas fa-sliders-h"></i> Preset applied', 'success');
+        },
+
+        // Live estimator for pre-generation length
+        estimateTokenadeLength() {
+            const depth = Math.max(1, Math.min(8, Number(this.tbDepth) || 1));
+            const breadth = Math.max(1, Math.min(12, Number(this.tbBreadth) || 1));
+            const repeats = Math.max(1, Math.min(100, Number(this.tbRepeats) || 1));
+            const sepLen = this.tbSeparator === 'none' ? 0 : 1;
+            const vsPerEmoji = this.tbIncludeVS ? 1 : 0;
+            const noiseAvg = this.tbIncludeNoise ? 2 : 0;
+
+            function lenLevel(level) {
+                if (level === 0) {
+                    return breadth * (1 + vsPerEmoji);
+                }
+                const inner = lenLevel(level - 1);
+                return breadth * (inner + noiseAvg) + Math.max(0, breadth - 1) * sepLen;
+            }
+
+            if (this.tbSingleCarrier) {
+                function countUnits(level) { return level === 0 ? breadth : breadth * countUnits(level - 1); }
+                const unitsPerBlock = countUnits(depth - 1);
+                const totalUnits = Math.max(1, repeats * unitsPerBlock);
+                const avgDigits = 5; // avg hex digits in tag sequence
+                const perUnit = avgDigits + 1 + sepLen + (this.tbIncludeNoise ? 2 : 0); // tags+term + sep + noise
+                const carrierLen = 1 + (this.tbIncludeVS ? 1 : 0);
+                return carrierLen + totalUnits * perUnit;
+            } else {
+                const blockLen = lenLevel(depth - 1);
+                return repeats * (blockLen + noiseAvg) + Math.max(0, repeats - 1) * sepLen;
+            }
+        },
+
+        setCarrierFromSelected() {
+            if (this.selectedEmoji) this.tbCarrier = String(this.selectedEmoji);
+        },
+        clearTokenadePayload() { this.tbPayloadEmojis = []; },
+        removeTokenadePayloadAt(idx) { this.tbPayloadEmojis.splice(idx, 1); },
+        handleTokenadeDrop(e) {
+            e.preventDefault();
+            const text = e.dataTransfer && (e.dataTransfer.getData('text/plain') || e.dataTransfer.getData('text'));
+            if (!text) return;
+            const parts = window.emojiLibrary.splitEmojis(text);
+            const onlyEmojis = parts.filter(p => /\p{Extended_Pictographic}/u.test(p));
+            this.tbPayloadEmojis.push(...onlyEmojis);
+        },
+        handleTokenadePaste(e) {
+            const text = (e.clipboardData && e.clipboardData.getData('text')) || '';
+            if (!text) return;
+            const parts = window.emojiLibrary.splitEmojis(text);
+            const onlyEmojis = parts.filter(p => /\p{Extended_Pictographic}/u.test(p));
+            this.tbPayloadEmojis.push(...onlyEmojis);
         }
     },
     // Initialize theme and components