numberz

src/components/DialogueInput.astro

@@ -14,7 +14,7 @@
                 />
             </td>
             <td>
-                <button id="generate">Generate</button>
+                <button id="generate">Refresh</button>
             </td>
             <td rowspan="2" style="vertical-align: top;">
                 <input

src/components/InputFields.astro

@@ -14,9 +14,9 @@
                 />
             </td>
             <td>
-                <button id="generate">Generate</button>
+                <button id="generate">Refresh</button>
             </td>
-            <td rowspan="2">
+            <td>
                 <input
                     type="color"
                     id="color"
@@ -43,6 +43,14 @@
                     <option value="10">10%</option>
                 </select>
             </td>
+            <td>
+                <input
+                    type="color"
+                    id="color2"
+                    autocomplete="off"
+                    value="#ffffff"
+                />
+            </td>
         </tr>
     </table>
 </div>
@@ -102,14 +110,20 @@
         outline: revert;
     }
 
-    input#color {
+    input#color, input#color2 {
         width: 40px;
-        height: 90px;
+        height: 40px;
 
         margin: 0;
+        margin-right: 4px;
         padding: 0px 2px;
     }
 
+    #color2 {
+        position: relative;
+        top: -2px;
+    }
+
     button#generate {
         width: 90px;
         height: 40px;

src/layouts/md.astro

@@ -40,6 +40,7 @@ const {frontmatter} = Astro.props;
 
             li {
                 text-align: left !important;
+                line-height: 24px !important;
             }
 
             @media only screen and (max-width: 1100px) {

src/pages/update-log.md

@@ -9,6 +9,24 @@ embeddesc: the update log
 ---
 <br>
 
+## Numbers `Dec 6, 2023`
+
+- added Numbers to the logo generator
+- added the ability to change seperate colors in the logo generator
+- reduced file size of glyphs for the logo generator
+- **BREAKING** default site behavior changed, outputs now change when you're typing, no more clicking "generate" when creating your images
+    - button has been renamed to "Refresh" instead of "Generate"
+    - old behavior can be toggled with by right clicking the button
+- **BREAKING** behavior on Logo Generator changed
+    - the big font's (one for the "NIKKE" text) way of being positioned vertically has been changed a bit:
+    letters will now be centered vertically with the tallest letter in the word, there should be a small
+    visual difference but everything would be fine.
+
+<br>
+
+---
+<br>
+
 ## More motion `Dec 5, 2023`
 
 - added `jump` motion effect

src/scripts/dialogue.js

@@ -151,6 +151,28 @@ document.querySelectorAll('#generate')[0].addEventListener('click', () => {
     generateText(text, subtext);
 });
 
+let autogen = true;
+
+document.getElementById('generate').oncontextmenu = (e) => {
+    e.preventDefault();
+
+    autogen = !autogen;
+
+    document.getElementById('generate').innerHTML = autogen ? 'Refresh' : 'Generate';
+    document.getElementById('generate').disabled = autogen;
+}
+
+function autogent() {
+    if (autogen) {
+        var text = document.getElementById('character').value;
+        var subtext = document.getElementById('dialog').value;
+        generateText(text, subtext)
+    }
+}
+
+document.getElementById('character').oninput = autogent;
+document.getElementById('dialog').oninput = autogent;
+
 document.querySelectorAll('#clear-char')[0].addEventListener('click', () => {
     char.src = '/nikke-font-generator/images/transparent.png';
     char.onload = function (e) {

src/scripts/logo.js

@@ -5,13 +5,15 @@ import { hexToCSSFilter } from 'hex-to-css-filter';
 const canvas = document.getElementById("font-canvas");
 const ctx = canvas.getContext("2d");
 let loaded = {}
+let heights = {}
 
-let logoglyphs = 'abcdefghijklmnopqrstuvwxyz,.!$&'
+let logoglyphs = 'abcdefghijklmnopqrstuvwxyz,.!$&0123456789'
 for (let i = 0; i < logoglyphs.length; i++) {
     let img = new Image();
     img.src = `../nikke-font-generator/images/nikkefont/${logoglyphs.split('')[i]}.png`;
     img.onload = function (e) {
         loaded[logoglyphs.split('')[i]] = img;
+        heights[logoglyphs.split('')[i]] = img.height;
     }
 }
 
@@ -31,7 +33,19 @@ document.querySelectorAll('#generate')[0].addEventListener('click', () => {
     generateLogoText(text, subtext);
 });
 
+let autogen = true;
+
+document.getElementById('generate').oncontextmenu = (e) => {
+    e.preventDefault();
+
+    autogen = !autogen;
+
+    document.getElementById('generate').innerHTML = autogen ? 'Refresh' : 'Generate';
+    document.getElementById('generate').disabled = autogen;
+}
+
 let color = '#ffffff';
+let color2 = '#ffffff';
 let size = 100;
 
 document.querySelectorAll('#color')[0].addEventListener('change', () => {
@@ -41,17 +55,38 @@ document.querySelectorAll('#color')[0].addEventListener('change', () => {
     generateLogoText(text, subtext)
 });
 
+document.querySelectorAll('#color2')[0].addEventListener('change', () => {
+    var text = document.getElementById('text').value;
+    var subtext = document.getElementById('subtext').value;
+    color2 = document.getElementById('color2').value;
+    generateLogoText(text, subtext)
+});
+
 document.querySelectorAll('#size')[0].addEventListener('change', () => {
     var text = document.getElementById('text').value;
     var subtext = document.getElementById('subtext').value;
     size = parseInt(document.getElementById('size').value);
     generateLogoText(text, subtext)
 });
 
+function autogent() {
+    if (autogen) {
+        var text = document.getElementById('text').value;
+        var subtext = document.getElementById('subtext').value;
+        generateLogoText(text, subtext)
+    }
+}
+
+document.getElementById('text').oninput = autogent;
+document.getElementById('subtext').oninput = autogent;
+
 setTimeout(() => {
     generateLogoText('BARELY', 'ACCURATE NIKKE FONT GENERATOR')
 }, 1000, 1);
 
+const canvasTemp = document.createElement("canvas");
+const ctxTemp = canvasTemp.getContext("2d");
+
 let curx = 0;
 let cury = 0;
 function generateLogoText(text, subtext) {
@@ -78,22 +113,38 @@ function generateLogoText(text, subtext) {
     }
     canvas.height = (cury + 100) * size / 100;
 
-    ctx.filter = 'brightness(0) ' + hexToCSSFilter(color)['filter'].replace(';', '');
+    // ctx.filter = 'brightness(0) ' + hexToCSSFilter(color)['filter'].replace(';', '');
     ctx.scale(size / 100, size / 100);
 
     curx = xoffset;
+    let tallest = 0;
     for (let i = 0; i < lower.length; i++) {
         if (lower.split('')[i] == ' ') {
             curx += 64;
             continue;
         }
-        ctx.drawImage(loaded[lower.split('')[i]], curx > 0 ? curx : 0, 0);
-        curx += loaded[lower.split('')[i]].width + 32;
+
+        let image = loaded[lower.split('')[i]];
+
+        if (image.height > tallest) {
+            tallest = image.height
+        }
+
+        canvasTemp.width = image.width;
+        canvasTemp.height = image.height;
+        ctxTemp.fillStyle = color;
+        ctxTemp.fillRect(0, 0, image.width, image.height);
+        ctxTemp.globalCompositeOperation = "destination-in";
+        ctxTemp.drawImage(image, 0, 0);
+        ctxTemp.globalCompositeOperation = "source-over";
+
+        ctx.drawImage(canvasTemp, curx > 0 ? curx : 0, (tallest - image.height) / 2);
+        curx += image.width + 32;
     }
 
     ctx.font = "48px Butch";
     ctx.letterSpacing = "32px";
-    ctx.fillStyle = "white";
+    ctx.fillStyle = color2;
     ctx.textAlign = "center";
     ctx.fillText(subtext.trim(), Math.abs(textwidth - canvas.width) <= 5 ? textwidth / 2 + 16 : curx / 2, cury + 90);
 }