From 1ee970c9222cdf43a36c5545033868b12cae1650 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 20 May 2020 23:46:25 +0100 Subject: [PATCH] added a dynamic, theme depended favicon --- public/index.html | 2 +- public/js/script.js | 1 + public/js/userconfig.js | 27 +++++++++++++++++++++++++++ 3 files changed, 29 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index b58eaaf03..e8e3a5406 100644 --- a/public/index.html +++ b/public/index.html @@ -8,7 +8,7 @@ - +
Signed in
diff --git a/public/js/script.js b/public/js/script.js index afe70d167..17cab5e8e 100644 --- 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 index b6092d7d9..8ccbe55f2 100644 --- 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";