accurate-r than ever

skuqre · Dec 27, 2023 · 4c42a0e · 4c42a0e
1 parent 15070b9
commit 4c42a0e
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 105 deletions.
diff --git a/src/components/BlablaInput.astro b/src/components/BlablaInput.astro
@@ -48,7 +48,7 @@
         </tr>
         <tr>
             <td colspan="1" class="wholerow">
-                <label class="whole-row" for="char-img-up">
+                <label class="overflowingrow whole-row" for="char-img-up">
                     Upload Character image...
                     <input type="file" id="char-img-up" accept="image/*">
                 </label>
@@ -57,9 +57,10 @@
                     id="char-pres-up"
                     autocomplete="off"
                     placeholder="🔍 Search for a character's image"
+                    class="overflowingrow"
                 />
             </td>
-            <td class="imgpre">
+            <td class="imgpre" colspan="2">
                 <img id="pfp-preview" src="/nikke-font-generator/images/blabla/pfp/nochat.png" class="image-preview" alt="Image preview (if empty, upload one!)" />
             </td>
             <!-- <td style="vertical-align: top;">
@@ -115,7 +116,7 @@
         </tr>
         <tr>
             <td colspan="1" class="wholerow">
-                <label class="whole-row" for="char-img-edit">
+                <label class="overflowingrow whole-row" for="char-img-edit">
                     Change Character image...
                     <input type="file" id="char-img-edit" accept="image/*">
                 </label>
@@ -124,9 +125,10 @@
                     id="char-pres-edit"
                     autocomplete="off"
                     placeholder="🔍 Search for a character's image"
+                    class="overflowingrow"
                 />
             </td>
-            <td class="imgpre">
+            <td class="imgpre" colspan="2">
                 <img id="pfp-preview-edit" src="/nikke-font-generator/images/blabla/pfp/nochat.png" class="image-preview" alt="Image preview (if empty, upload one!)" />
             </td>
         </tr>
@@ -468,6 +470,9 @@
         height: 90px;
         border-radius: 4px;
         background-color: var(--darker);
+
+        float: right;
+        margin-right: 5px;
     }
 
     .wholerow {
@@ -489,4 +494,13 @@
     .logo-img {
         width: 16px;
     }
+
+    label.overflowingrow {
+        width: calc(100% - 8px + 48px);
+    }
+
+    input.overflowingrow {
+        width: calc(100% - 8px + 36px);
+        margin-top: 5px;
+    }
 </style>
diff --git a/src/components/Credits.astro b/src/components/Credits.astro
@@ -4,10 +4,10 @@
 
 <div>
     <p>
-        made by skuqre. more at <a href="https://skuqre.github.io">skuqre.github.io</a> | <a href="/nikke-font-generator/credits">credits</a> | <a href="/nikke-font-generator/usage">usage</a> | <a href="https://github.com/skuqre/nikke-font-generator">source code</a>
+        <b>more tools: </b>  <a href="/nikke-font-generator/">logo generator</a> | <a href="/nikke-font-generator/dialogue">dialogue generator</a> | <a href="/nikke-font-generator/blabla">blabla generator</a>
     </p>
     <p>
-        <a href="/nikke-font-generator/dialogue">dialogue generator</a> | <a href="/nikke-font-generator/">logo generator</a> | <a href="/nikke-font-generator/blabla">blabla generator</a> | <a href="/nikke-font-generator/update-log">update log</a>
+        made by skuqre. more at <a href="https://skuqre.github.io">skuqre.github.io</a> | <a href="/nikke-font-generator/credits">credits</a> | <a href="/nikke-font-generator/usage">usage</a> | <a href="https://github.com/skuqre/nikke-font-generator">source code</a> | <a href="/nikke-font-generator/update-log">update log</a>
     </p>
 </div>
 

diff --git a/src/components/DialogueInput.astro b/src/components/DialogueInput.astro
@@ -134,11 +134,6 @@ import { eyeOn } from "../scripts/util.js";
                 <button class="whole-row" id="export-png">Export as PNG...</button>
             </td>
         </tr>
-        <tr>
-            <td colspan="3" class="wholerow">
-                <button class="whole-row" id="export-gif">Export as animated GIF...</button>
-            </td>
-        </tr>
         <tr>
             <td colspan="3" class="wholerow">
                 <button class="whole-row" id="export-mp4">Export as animated MP4...</button>

diff --git a/src/pages/update-log.md b/src/pages/update-log.md
@@ -9,6 +9,29 @@ embeddesc: the update log
 ---
 <br>
 
+## Accurate-r than ever `Dec 27, 2023`
+
+**blabla gen**
+- tweaked text weight of other chatters
+    - uses text stroke to do so
+- tweaked some ui peeves i got
+
+**dialogue gen**
+- added animation to choices when exporting
+- added animation to narration box when exporting
+- **BREAKING** removed gif exporting
+    - it just really isn't worth it anymore, go convert your mp4 to a gif for a better result
+
+**general**
+- tweaked the way the other tools are displayed (no, the Blabla interface isn't the only thing you can make in this site)
+
+yes I know the exporting indicator is not working as usual, I have to find a better way to find frames than this
+
+<br>
+
+---
+<br>
+
 ## characters `Dec 23, 2023`
 
 **blabla gen**

diff --git a/src/scripts/blabla.js b/src/scripts/blabla.js
@@ -359,10 +359,11 @@ function generateBlabla() {
                 }
             }
 
-            ctx.font = "20px " + (curSpeaker.toLowerCase() == 'commander' ? 'PB' : 'PEB');
-            ctx.fillStyle = "#333333";
+            ctx.font = "20px PB";
+            ctx.fillStyle = "#222222";
             ctx.textBaseline = "top";
             ctx.textAlign = "left";
+            ctx.lineWidth = 0.25;
 
             let width = ctx.measureText(item.message).width;
             let innerBubbleWidth = width + 22 * 2 > 420 ? 420 : width + 22 * 2; // the bubble w/o shadow
@@ -545,6 +546,7 @@ function generateBlabla() {
 
                         for (let j = 0; j < lines.length; j++) {
                             ctx.fillText(lines[j].trim(), curx + 16 - xOffset, cury + 20 + ((31) * j), textWidth);
+                            ctx.strokeText(lines[j].trim(), curx + 16 - xOffset, cury + 20 + ((31) * j), textWidth);
 
                             // ctx.fillStyle = "#ff0000";
                             // ctx.fillRect(curx + 16, cury + 20 + ((31) * j), textWidth, 10);

diff --git a/src/scripts/dialogue.js b/src/scripts/dialogue.js
@@ -1,5 +1,4 @@
 import { draw9slice, dataURLtoFile, eyeOn, eyeOff } from "./util.js";
-import { GIFEncoder, quantize, applyPalette } from "https://unpkg.com/gifenc";
 import { downloadZip } from "https://cdn.jsdelivr.net/npm/client-zip/index.js"
 import { Buffer } from "buffer";
 import * as HME from "h264-mp4-encoder";
@@ -652,7 +651,6 @@ document.querySelectorAll('button#bgautofit')[0].addEventListener('click', () =>
 });
 
 document.querySelectorAll('button#export-png')[0].addEventListener('click', downloadImage);
-document.querySelectorAll('button#export-gif')[0].addEventListener('click', animateTypewrite);
 document.querySelectorAll('button#export-mp4')[0].addEventListener('click', downloadVideo);
 
 
@@ -817,6 +815,9 @@ let maxframes = 0;
 function captureAnimatables() {
     frame = 0
     capture = {
+        oldDialogueLines: subtext2,
+        oldActionLines: document.getElementById('actionbox').value.trim(),
+        oldChoices: document.getElementById('choices').value.trim(),
         brightness: brnum,
         bgvals: [bgpos[0], bgpos[1], scalebg], // x, y, scale
         chvals: [chpos[0], chpos[1], scalech]
@@ -872,6 +873,10 @@ function resetAnimatables() {
 
     brnum = capture.brightness;
 
+    subtext2 = capture.oldDialogueLines;
+    document.getElementById('actionbox').value = capture.oldActionLines;
+    document.getElementById('choices').value = capture.oldChoices;
+
     generateText(text2, subtext2);
 
     document.title = "Barely Accurate NIKKE Dialogue Generator"
@@ -1119,12 +1124,20 @@ function generateText(text, subtext, exporting=false) {
 
             drawGradients(true);
 
-            let startY = (canvassize[1] * (765 / 1080)) - ((choicepng.height * split.length) + (14 * (split.length - 1))) / 2;
+            let mult = easeInOutSine(Math.min(8, frame) / 8);
+
+            if (!exporting) {
+                mult = 1;
+            }
+
+            let startY = (canvassize[1] * ((765 + (1 - mult) * 35) / 1080)) - ((choicepng.height * split.length) + (14 * (split.length - 1))) / 2;
 
             let curY = startY;
             for (let i = 0; i < split.length; i++) {
                 let item = split[i];
 
+                ctx.globalAlpha = mult;
+
                 ctx.drawImage(choicepng, (canvassize[0] - choicepng.width) / 2, curY);
 
                 ctx.font = "21px PEB";
@@ -1134,6 +1147,8 @@ function generateText(text, subtext, exporting=false) {
                 ctx.fillText(item.trim(), canvassize[0] / 2, curY + choicepng.height / 2);
 
                 curY += choicepng.height + 14;
+
+                ctx.globalAlpha = 1;
             }
 
         } else if (document.getElementById('actionbox').value.trim().length > 0) {
@@ -1155,10 +1170,16 @@ function generateText(text, subtext, exporting=false) {
             let cw = ((result * scalena / 100) - 54 - (action.width - (54 + 566)));
             let ch = (248 * scalena / 100 - 54 - (action.height - (54 + 140)))
             let lines = getLinesForParagraphs(ctx, document.getElementById('actionbox').value.trim(), cw - 32 * 2);
+            let linesAlt = null;
             let ath = ((39 * dsc) * lines.length)
 
+            if (exporting) {
+                lines = getLinesForParagraphs(ctx, subtext, cw - 32 * 2);
+                linesAlt = getLinesForParagraphs(ctx, document.getElementById('actionbox').value.trim(), cw - 32 * 2);
+            }
+
             for (let i = 0; i < lines.length; i++) {
-                ctx.fillText(lines[i], (canvassize[0] - ctx.measureText(lines[i]).width) / 2 + xoff, (ay + 248 * (scalena / 100) / 2 - ath / 2) + (7 * dsc) + 4 + ((39 * dsc) * i) + yoff, cw - 32 * 2);
+                ctx.fillText(lines[i], (canvassize[0] - ctx.measureText(linesAlt == null ? lines[i] : linesAlt[i]).width) / 2 + xoff, (ay + 248 * (scalena / 100) / 2 - ath / 2) + (7 * dsc) + 4 + ((39 * dsc) * i) + yoff, cw - 32 * 2);
             }
 
             if (arrowOn) {
@@ -1224,90 +1245,6 @@ function getLines(ctx, text, maxWidth) {
 }
 
 let exporting = false;
-function animateTypewrite() {
-    if (exporting) return;
-    exporting = true;
-
-    captureAnimatables()
-
-    let textc = text2;
-    let subtextc = subtext2;
-
-    let individual = subtextc.split('');
-
-    const encoder = new GIFEncoder(canvas.width, canvas.height);
-
-    let wasArrowOn = arrowOn;
-
-    arrowOn = false;
-    let curText = "";
-    individual.splice(0, 0, '');
-    for (let i = 0; i < individual.length; i++) {
-        curText += individual[i];
-
-        if (individual[i+1] == ' ') {
-            curText += individual[i+1];
-            i++;
-        }
-        if (individual[i+1] == '\\n') {
-            curText += individual[i+1];
-            i++;
-        }
-
-        generateText(textc, curText, true)
-
-        for (let i = 0; i <= 1; i++) {
-            const { data, width, height } = ctx.getImageData(0, 0, canvas.width, canvas.height);
-            const palette = quantize(data, 256);
-            const index = applyPalette(data, palette);
-
-            encoder.writeFrame(index, width, height, { palette: palette, delay: 33.333333, repeat: 0 });
-            frame++;
-
-            document.title = "Exporting: " + (frame / maxframes * 100).toFixed(2) + "%";
-        }
-    }
-
-    arrowOn = wasArrowOn;
-
-    let extra = 1;
-
-    let newframes = document.getElementById('fa').value;
-
-    if (newframes != null) {
-        if (newframes > 0) {
-            if (true) { // document.getElementById('fa-how').value == 'add'
-                extra = parseInt(newframes) + 1 // a frame of peace
-            }
-        }
-    }
-
-    for (let i = 0; i < extra; i++) {
-        const { data, width, height } = ctx.getImageData(0, 0, canvas.width, canvas.height);
-        const palette = quantize(data, 256);
-        const index = applyPalette(data, palette);
-
-        generateText(textc, curText, true)
-        encoder.writeFrame(index, width, height, { palette: palette, delay: 33.333333, repeat: 0 });
-        frame++;
-
-        document.title = "Exporting: " + (frame / maxframes * 100).toFixed(2) + "%";
-    }
-
-    encoder.finish();
-
-    let output = encoder.bytes();
-    let b64 = Buffer.from(output).toString('base64');
-
-    var link = document.createElement('a');
-    link.download = 'nikke-dialogue.gif';
-    link.href = "data:image/gif;base64," + b64;
-    link.click();
-
-    resetAnimatables()
-    alert("Exporting finished!")
-    exporting = false;
-}
 
 function downloadIndividualFrames() {
     if (exporting) return;
@@ -1319,6 +1256,10 @@ function downloadIndividualFrames() {
 
     let individual = subtextc.split('');
 
+    if (document.getElementById('actionbox').value.trim().length > 0) {
+        individual = document.getElementById('actionbox').value.split('')
+    }
+
     let wasArrowOn = arrowOn;
 
     arrowOn = false;
@@ -1337,7 +1278,7 @@ function downloadIndividualFrames() {
             i++;
         }
 
-        generateText(textc, curText)
+        generateText(textc, curText, true)
 
         imgs.push({
             name: "nikke-frame" + i + ".png",
@@ -1347,7 +1288,7 @@ function downloadIndividualFrames() {
 
     arrowOn = wasArrowOn;
 
-    generateText(textc, curText)
+    generateText(textc, curText, true)
     imgs.push({
         name: "nikke-frame" + (individual.length) + ".png",
         input: dataURLtoFile(canvas.toDataURL(), "nikke-frame" + (individual.length) + ".png")
@@ -1391,6 +1332,10 @@ function downloadVideo() {
 
         let individual = subtextc.split('');
 
+        if (document.getElementById('actionbox').value.trim().length > 0) {
+            individual =  document.getElementById('actionbox').value.split('')
+        }
+
         encoder.width = canvas.width % 2 == 0 ? canvas.width : canvas.width + 1;
         encoder.height = canvas.height % 2 == 0 ? canvas.height : canvas.height + 1;
         encoder.quantizationParameter = 15;
@@ -1419,7 +1364,7 @@ function downloadVideo() {
                 encoder.addFrameRgba(ctx.getImageData(0, 0, canvas.width, canvas.height).data);
                 frame++;
 
-                document.title = "Exporting: " + (frame / maxframes * 100).toFixed(2) + "%";
+                document.title = "Exporting...";
             }
         }
 
@@ -1442,7 +1387,7 @@ function downloadVideo() {
             encoder.addFrameRgba(ctx.getImageData(0, 0, canvas.width, canvas.height).data);
             frame++;
 
-            document.title = "Exporting: " + (frame / maxframes * 100).toFixed(2) + "%";
+            document.title = "Exporting...";
         }
 
         encoder.finalize();