size and color

skuqre · Oct 14, 2023 · 4ef38c7 · 4ef38c7
1 parent d8fbda8
commit 4ef38c7
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^3.3.0"
+    "astro": "^3.3.0",
+    "hex-to-css-filter": "^5.4.0"
   }
-}
+}
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/src/components/GlobalStyle.astro b/src/components/GlobalStyle.astro
@@ -21,6 +21,11 @@
         --darkerer: #151515;
         --darkest: #101010;
     }
+
+    *:focus {
+        outline: none;
+    }
+
     html {
         color: white;
         background-color: var(--darkest);

diff --git a/src/components/InputFields.astro b/src/components/InputFields.astro
@@ -13,7 +13,17 @@
                     placeholder='"NIKKE" text here...'
                 />
             </td>
-            <td rowspan="2"><button id="generate">Generate Text</button></td>
+            <td>
+                <button id="generate">Generate</button>
+            </td>
+            <td rowspan="2">
+                <input
+                    type="color"
+                    id="color"
+                    autocomplete="off"
+                    value="#ffffff"
+                />
+            </td>
         </tr>
         <tr>
             <td>
@@ -24,6 +34,15 @@
                     placeholder='"Goddess of Victory" text here...'
                 />
             </td>
+            <td>
+                <select id="size" name="Size">
+                    <option value="100">100%</option>
+                    <option value="75">75%</option>
+                    <option value="50">50%</option>
+                    <option value="25">25%</option>
+                    <option value="10">10%</option>
+                </select>
+            </td>
         </tr>
     </table>
 </div>
@@ -61,6 +80,20 @@
         margin-top: 0;
     }
 
+    select#size {
+        width: 90px;
+        height: 40px;
+        padding-left: 8px;
+        font-size: 16px;
+        top: -2px; /* perfectionism */
+        background-color: var(--darker);
+        color: lightgray;
+        border: none;
+        border-radius: 4px;
+        font-family: 'pretendard', sans-serif;
+        position: relative;
+    }
+
     button {
         all: unset;
     }
@@ -69,9 +102,17 @@
         outline: revert;
     }
 
+    input#color {
+        width: 40px;
+        height: 90px;
+
+        margin: 0;
+        padding: 0px 2px;
+    }
+
     button#generate {
-        width: 88px;
-        height: 88px;
+        width: 90px;
+        height: 40px;
         background-color: var(--darker);
         border-radius: 4px;
         color: lightgray;
@@ -82,12 +123,11 @@
         transition-duration: 0.1s;
         transition-timing-function: ease-in-out;
 
+        margin-left: 0px;
         margin-right: 4px;
     }
 
     button#generate:hover {
-        width: 88px;
-        height: 88px;
         background-color: #f4d2594b;
         color: white;
         text-decoration: none;

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -9,7 +9,7 @@ import Anise from '../components/Anise.astro';
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<link rel="icon" type="image/png" href="/nikke-font-generator/favicon.png" />
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
 		<title>Barely Accurate NIKKE Font Generator</title>
@@ -26,6 +26,8 @@ import Anise from '../components/Anise.astro';
 		<Anise />
 
 		<script>
+			import { hexToCSSFilter } from 'hex-to-css-filter';
+
 			// We out here with the terrible JS code
 			// We got that shit running 24/7
 			const canvas = document.getElementById("font-canvas");
@@ -54,6 +56,23 @@ import Anise from '../components/Anise.astro';
 				var text = document.getElementById('text').value;
 				var subtext = document.getElementById('subtext').value;
 
+				generateLogoText(text, subtext);
+			});
+
+			let color = '#ffffff';
+			let size = 100;
+
+			document.querySelectorAll('#color')[0].addEventListener('change', () => {
+				var text = document.getElementById('text').value;
+				var subtext = document.getElementById('subtext').value;
+				color = document.getElementById('color').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)
 			});
 
@@ -63,7 +82,7 @@ import Anise from '../components/Anise.astro';
 
 			let curx = 0;
 			let cury = 0;
-			function generateLogoText(text, subtext) {
+			function generateLogoText(text: String, subtext: String) {
 				let lower = text.toLowerCase();
 				curx = 0;
 				cury = 0;
@@ -80,12 +99,15 @@ import Anise from '../components/Anise.astro';
 						cury = loaded[lower.split('')[i]].height;
 					}
 				}
-				canvas.width = textwidth > curx ? textwidth : curx;
+				canvas.width = (textwidth > curx ? textwidth : curx) * size/100;
 				let xoffset = 0
 				if (textwidth > curx) {
 					xoffset = (textwidth - curx) / 2
 				}
-				canvas.height = cury + 100;
+				canvas.height = (cury + 100) * size/100;
+
+				ctx.filter = 'brightness(0) ' + hexToCSSFilter(color)['filter'].replace(';', '');
+				ctx.scale(size/100, size/100);
 
 				curx = xoffset;
 				for (let i = 0; i < lower.length; i++) {