Prettify

Lorp · Feb 1, 2024 · 224bed9 · 224bed9
1 parent b486224
commit 224bed9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/src/fencer.html b/src/fencer.html
@@ -1,13 +1,21 @@
 <!DOCTYPE html>
+
 <html>
 
 <head>
 	<title>Home</title>
+	<meta charset="utf-8">
 	<style>
 
 body {
 	margin: 0;
 	padding: 0;
+	font-family: IBM Plex Sans;
+}
+
+#title-bar {
+	background-color: black;
+	color: white;
 }
 
 .fontinfo {
@@ -78,19 +86,24 @@
 .render-native {
 	font-size: 200px;
 	overflow: hidden;
+	color: #eee;
 }
 
 </style>
 
-<!-- Roboto Mono -->
+<!-- Google Fonts preconnect -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
+
+<!-- Roboto Mono, IBM Plex -->
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&family=Roboto+Mono&display=swap" rel="stylesheet">
 
 </head>
 
 <body>
 
+	<div id="title-bar"><span style="font-weight:bold;">FENCER</span> 🤺 avar2 mappings creator</div>
+
 	<div class="fontinfo">
 		<h3>Fontinfo</h3>
 		<textarea placeholder="Drop font here"></textarea>

diff --git a/src/fencer.js b/src/fencer.js
@@ -1,11 +1,6 @@
 "use strict"
 
-// import the samsa-core module
-//import { SamsaFont, SamsaInstance, SamsaBuffer, SAMSAGLOBAL } from "https://lorp.github.io/samsa-core/src/samsa-core.js";
-//import { * }  from "./models.js";
-
-//export {SamsaFont, SamsaGlyph, SamsaInstance, SamsaBuffer, SAMSAGLOBAL} from "https://lorp.github.io/samsa-core/src/samsa-core.js";
-
+// import samsa-core and fontTools.varLib models
 import { SamsaFont, SamsaInstance, SamsaBuffer, SAMSAGLOBAL } from "https://lorp.github.io/samsa-core/src/samsa-core.js";
 import { normalizeValue, piecewiseLinearMap } from "./models.js";
 
@@ -21,8 +16,7 @@ function onDropFont (e) {
 	e.preventDefault();
 
 	// open font as SamsaFont
-
-
+	// - not yet
 
 
 	// get arrayBuffer from dropped object
@@ -48,12 +42,13 @@ function onDropFont (e) {
 		// set the font face to the arraybuffer
 		const fontFace = new FontFace(font.names[6], arrayBuffer);
 		fontFace.load().then(loadedFace => {
+			const renderEl = document.querySelector(".render-native");
 			document.fonts.add(loadedFace);
-			document.querySelector(".render-native").style.fontFamily = font.names[6];
-			console.log("loaded font: " + font.names[6])
+			renderEl.style.fontFamily = font.names[6];
+			renderEl.style.color = "black";
+			console.log("loaded font: " + font.names[6]);
 		});
 	});
-
 }
 
 function initFencer() {