added a dynamic, theme depended favicon

monkeytypegame · May 20, 2020 · 1ee970c · 1ee970c
1 parent 7e36b08
commit 1ee970c
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 1 deletion.
diff --git a/public/index.html b/public/index.html
@@ -8,7 +8,7 @@
   <link rel="stylesheet" href="css/fa.css">
   <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="themes/dark.css" id="currentTheme">
-  <link rel="shortcut icon" href="favicon.png">
+  <link id="favicon" rel="shortcut icon" href="favicon.png">
 </head>
 <body>
   <div class="notification">Signed in</div>

diff --git a/public/js/script.js b/public/js/script.js
@@ -1061,6 +1061,7 @@ if (window.location.hostname === "localhost") {
 }
 
 $(document).ready(() => {
+  updateFavicon(32,14);
   $('body').css('transition', '.25s');
   restartTest();
   if (config.quickTab) {

diff --git a/public/js/userconfig.js b/public/js/userconfig.js
@@ -141,6 +141,7 @@ function previewTheme(name) {
 function setTheme(name) {
     config.theme = name;
     $("#currentTheme").attr("href", `themes/${name}.css`);
+    updateFavicon(32,14);
     try{
         firebase.analytics().logEvent('changedTheme', {
             theme: name
@@ -150,6 +151,32 @@ function setTheme(name) {
     }
 }
 
+function updateFavicon(size,curveSize){
+    var canvas = document.createElement('canvas');
+    canvas.width = size;
+    canvas.height = size;
+    let ctx = canvas.getContext('2d');
+    ctx.beginPath();
+    ctx.moveTo(0,curveSize);
+    //top left
+    ctx.quadraticCurveTo(0, 0, curveSize, 0);
+    ctx.lineTo(size-curveSize,0);
+    //top right
+    ctx.quadraticCurveTo(size, 0, size, curveSize);
+    ctx.lineTo(size,size-curveSize);
+    ctx.quadraticCurveTo(size, size, size-curveSize, size);
+    ctx.lineTo(curveSize,size);
+    ctx.quadraticCurveTo(0, size, 0, size-curveSize);
+    ctx.fillStyle = getComputedStyle(document.body).getPropertyValue('--bg-color').replace(' ','');
+    ctx.fill(); 
+    ctx.font = "900 "+ size/2*1.2 + "px Roboto Mono";
+    ctx.textAlign = "center";
+    ctx.fillStyle = getComputedStyle(document.body).getPropertyValue('--main-color').replace(' ','');
+    ctx.fillText("mt", size/2+(size/32), size/3*2.1);
+    // document.body.appendChild(canvas);
+    $("#favicon").attr('href',canvas.toDataURL('image/png'));
+}
+
 function changeLanguage(language) {
     if (language == null || language == undefined) {
         language = "english";