[demo] add a weight slider

nclslbrn · Apr 27, 2024 · 607ede1 · 607ede1
1 parent ec59aa7
commit 607ede1
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 19 deletions.
diff --git a/demo/src/index.ts b/demo/src/index.ts
@@ -4,35 +4,46 @@ const app = document.getElementById("app"),
   form = document.createElement("form"),
   svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
   input = document.createElement("textarea"),
+  inputWeight = document.createElement("input"),
   textAtLaunch = "Type text",
   glyphKeys = Array.from(Object.keys(font)).join(""),
   group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 
 const update = () => {
   const userInput = input.value !== textAtLaunch ? input.value : glyphKeys,
     text = userInput.split("") as string[],
-    width = window.innerWidth - 20,
-    height = window.innerHeight - 20,
-    textSize = Math.max(54, Math.min(Math.floor(width * 0.07), 128)),
-    charPerLine = Math.floor(width / textSize),
+    width = window.innerWidth - 40,
+    height = window.innerHeight,
+    baseSize = Math.max(16, Math.min(Math.floor(width * 0.05), 264)),
+    textSize = [baseSize, baseSize * 1.2],
+    charPerLine = Math.floor(width / textSize[0]) - 2,
     nbLines = Math.ceil(text.length / charPerLine),
     margin = [
-      width / (charPerLine * textSize * 2),
-      (height - 40 - nbLines * textSize) / 2,
+      (width - charPerLine * textSize[0]) / 2,
+      (height - 40 - nbLines * textSize[1]) / 2,
     ];
-  console.log(textSize)
+  console.log(textSize);
   group.textContent = "";
 
   for (let y = 0; y < nbLines; y++) {
     const remainingChar = Math.min(charPerLine, text.length - y * charPerLine);
-    
+
     for (let x = 0; x < remainingChar; x++) {
       const char = text[y * charPerLine + x];
-      const lines = getGlyphPath(
-        char,
-        [textSize, textSize],
-        [margin[0] + x * textSize, margin[1] + y * textSize],
+      const lines = getGlyphPath(char, textSize, [
+        margin[0] + x * textSize[0],
+        margin[1] + y * textSize[1],
+      ]);
+      const rect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "rect",
       );
+      rect.setAttribute("x", `${margin[0] + x * textSize[0]}`);
+      rect.setAttribute("y", `${margin[1] + y * textSize[1]}`);
+      rect.setAttribute("width", `${textSize[0]}`);
+      rect.setAttribute("height", `${textSize[1]}`);
+      group.appendChild(rect);
+
       lines.map((d: string) => {
         const path = document.createElementNS(
           "http://www.w3.org/2000/svg",
@@ -48,15 +59,32 @@ const update = () => {
   svg.setAttribute("viewbox", `0 0 ${width} ${height - 40}`);
 };
 
+const updateWeight = () =>
+  group.setAttribute("stroke-width", inputWeight.value);
+
 const init = () => {
   if (app === null) return;
   form.autocomplete = "off";
+
   group.setAttribute("stroke", "#333");
+  group.setAttribute("stroke-width", "2");
+  group.setAttribute("stroke-lineoin", "round");
+  group.setAttribute("stroke-linecap", "round");
   group.setAttribute("fill", "rgba(0, 0, 0, 0)");
+
   svg.appendChild(group);
+
   input.innerText = textAtLaunch;
   input.addEventListener("change", update);
+
+  inputWeight.type = "range";
+  inputWeight.min = "1";
+  inputWeight.value = "4";
+  inputWeight.max = "10";
+  inputWeight.addEventListener("change", updateWeight);
+
   form.appendChild(input);
+  form.appendChild(inputWeight);
   app.appendChild(form);
   app.appendChild(svg);
 };

diff --git a/demo/style.css b/demo/style.css
@@ -16,14 +16,24 @@ body {
 	min-height: 100vh;
 }
 
+#app,
 #app form,
 footer {
 	display: flex;
-	padding: 0 2em;
-  height: 40px;
+  place-items: center center;
+}
+
+#app {
+  flex-flow: column wrap;
+}
+
+#app form,
+footer {
 	flex-flow: row nowrap;
-	align-items: center;
- }
+  height: 40px;
+  width: 90%;
+	padding: 0 5%;
+}
 
 #app form {
   max-height: 40px;
@@ -50,8 +60,10 @@ footer p {
   border: none;
 }
 
-#app svg {
-  background: #fefefecc;
+#app svg g rect {
+  stroke: #ccc;
+  stroke-width: 0.5px;
+  fill: #fefefe66;
 }
 
 @media screen and (min-width: 900px) {

diff --git a/src/glyphs/lowercase.ts b/src/glyphs/lowercase.ts
@@ -448,7 +448,6 @@ const accentTable = {
 // Clone exisiting glyph and add diacritical marks
 const accented = {} as Font;
 Object.keys(accentTable).map((char) => {
-  console.log(char, accentTable[char][1])
   accented[char as keyof typeof accented] = [
     ...lowercase[accentTable[char][0] as keyof Font],
     ...accentTable[char][1].reduce((acc: Glyph, a: keyof Font) => [...acc, ...accent[a]], []),