Support for brick font in extra timer window

johnholbrook · Nov 16, 2020 · 323975e · 323975e
1 parent 359c78d
commit 323975e
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 16 deletions.
diff --git a/controller/controller.js b/controller/controller.js
@@ -13,6 +13,16 @@ function getRadioValue(buttons){
     }
 }
 
+function set_timer_font(){
+    let new_choice = document.querySelector("#select-font").value;
+    if (new_choice == "default"){
+        ipcRenderer.send("set-timer-font", "");
+    }
+    else{
+        ipcRenderer.send("set-timer-font", new_choice);
+    }
+}
+
 document.addEventListener('DOMContentLoaded', () => {
     showLogos();
 
@@ -48,17 +58,7 @@ document.addEventListener('DOMContentLoaded', () => {
         displayWindow.webContents.send("set-end-sound", document.querySelector("#end-sound").checked);
     };
 
-    document.querySelector("#select-font").onchange = function(){
-        let new_choice = document.querySelector("#select-font").value;
-        if (new_choice == "default"){
-            // displayWindow.webContents.send("set-timer-font", "");
-            ipcRenderer.send("set-timer-font", "");
-        }
-        else{
-            // displayWindow.webContents.send("set-timer-font", new_choice);
-            ipcRenderer.send("set-timer-font", new_choice);
-        }
-    };
+    document.querySelector("#select-font").onchange = set_timer_font;
 
     document.querySelector("#logo-dir-picker").onchange = function(){
         // console.log(document.querySelector("#logo-dir-picker").files);
@@ -144,6 +144,8 @@ document.addEventListener('DOMContentLoaded', () => {
     document.querySelector("#spawn-extra-timer-window").onclick = function(){
         // console.log("spawn extra timer window button clicked");
         ipcRenderer.send("spawn-extra-timer-window");
+        //terrible hack, I know
+        setTimeout(set_timer_font, 500);
     };
 
     document.querySelector("#schedule-csv-picker").onchange = function(){

diff --git a/display/timer.js b/display/timer.js
@@ -262,6 +262,7 @@ ipcRenderer.on('set-timer-font', function(event, arg) {
 	}
 	else{
 		brick_font = false;
+		setTimerValue(secsToClock(count));
 		document.querySelector('.timer-text').style.fontFamily = arg;
 		document.querySelector("#timer-text-wrapper").classList.remove("brick");
 	}

diff --git a/extraTimer/extraTimer.html b/extraTimer/extraTimer.html
@@ -12,8 +12,8 @@
 
 <body>
     <div class="display-type timer-display" id="timer-display">
-        <div class="timer-numbers-wrapper" id="timer-numbers-wrapper">
-            <div class="timer-numbers"></div>
+        <div class="timer-text-wrapper" id="timer-text-wrapper">
+            <div class="timer-text"></div>
         </div>
     </div>
 </body>

diff --git a/extraTimer/extraTimer.js b/extraTimer/extraTimer.js
@@ -1,10 +1,46 @@
 const { remote, ipcRenderer } = require('electron');
 
+var brick_font = false;
+
+function setTimerValue(text){
+	document.querySelector('.timer-text').innerHTML = brick_font ? textToImage(text) : text;
+}
+
+function textToImage(text){
+    if (text.charAt(1) != ":" || text.length != 4){
+    // if (text.length != 3){
+        console.error("Format: x:yz");
+    }
+    else{
+        let left = text.charAt(0);
+        let mid = text.charAt(2);
+		let right = text.charAt(3);
+
+		return `<svg class="brick-font" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1600 1200">
+        <image x="0px" y="0px" width="650px" height="1200px" href="../fonts/brick_digits/${left}-left.png"></image>
+        <image x="649px" y="0px" width="470px" height="1200px" href="../fonts/brick_digits/${mid}-mid.png"></image>
+        <image x="1118px" y="0px" width="480px" height="1200px" href="../fonts/brick_digits/${right}-right.png"></image>
+	</svg>`
+    }
+}
+
 ipcRenderer.on("set-timer-text", function(event, arg){
-    console.log("Setting timer text to " + arg);
-    document.querySelector(".timer-numbers").innerHTML = arg;
+    setTimerValue(arg);
+    // console.log("Setting timer text to " + arg);
+    // document.querySelector(".timer-text").innerHTML = arg;
 });
 
 ipcRenderer.on("set-timer-font", function(event, arg){
-    document.querySelector(".timer-numbers").style.fontFamily = arg;
+    // document.querySelector(".timer-text").style.fontFamily = arg;
+    if (arg == "bricks"){
+		brick_font = true;
+		setTimerValue(secsToClock(count));
+		document.querySelector("#timer-text-wrapper").classList.add("brick");
+	}
+	else{
+		brick_font = false;
+		setTimerValue(secsToClock(count));
+		document.querySelector('.timer-text').style.fontFamily = arg;
+		document.querySelector("#timer-text-wrapper").classList.remove("brick");
+	}
 });