fix: use dynamic size and ratio

index.html

@@ -178,11 +178,13 @@ <h1 class="title">Value</h1>
 
       document.getElementById('set').addEventListener('click', () => {
         const value = document.getElementById('value').value
+        localStorage.setItem('value', value)
         badgin.set(value ? parseInt(value, 10) : value, options)
       })
 
       document.getElementById('clear').addEventListener('click', () => {
         document.getElementById('value').value = ''
+        localStorage.setItem('value', '')
         badgin.clear()
       })
 
@@ -232,6 +234,13 @@ <h1 class="title">Value</h1>
       script.src = isLocalhost
         ? '/build/index.iife.js'
         : 'https://unpkg.com/badgin/build/index.iife.js'
+      script.onload = () => {
+        const value = localStorage.getItem('value')
+        if (value) {
+          document.getElementById('value').value = localStorage.getItem('value')
+          document.getElementById('set').click()
+        }
+      }
 
       document.head.appendChild(script)
     </script>

src/favicon.ts

@@ -12,6 +12,14 @@ type Favicon = HTMLLinkElement
 
 type BestFavicon = Favicon | null
 
+export const DefaultValue: Value = 0
+
+export const DefaultOptions: Options = {
+  backgroundColor: '#424242',
+  color: '#ffffff',
+  indicator: '!',
+}
+
 // Get all favicons of the page
 const getFavicons = (): Favicon[] => {
   const links = document.head.getElementsByTagName('link')
@@ -86,13 +94,6 @@ const getBestFavicon = (): BestFavicon => {
   return bestFavicon
 }
 
-// Options
-export const defaultOptions: Options = {
-  backgroundColor: '#424242',
-  color: '#ffffff',
-  indicator: '!',
-}
-
 // References to the favicons that we need to track in order to reset and update the counters
 const current: {
   favicons: Favicon[] | null
@@ -104,14 +105,21 @@ const current: {
   favicons: null,
   bestFavicon: null,
   bestFaviconImage: null,
-  value: 0,
-  options: defaultOptions,
+  value: DefaultValue,
+  options: DefaultOptions,
 }
 
 // Get size depending on screen density
+const devicePixelRatioListener = window.matchMedia(
+  'screen and (min-resolution: 2dppx)'
+)
 const getRatio = () => {
   return Math.ceil(window.devicePixelRatio) || 1
 }
+const handleRatioChange = () => {
+  console.log('handleRatioChange')
+  set(current.value, current.options)
+}
 const getSize = () => {
   return 16 * getRatio()
 }
@@ -155,7 +163,9 @@ const drawFavicon = (
   }
 
   // Draw new image
-  context.drawImage(image, 0, 0, image.width, image.height, 0, 0, size, size)
+  image.width = size
+  image.height = size
+  context.drawImage(image, 0, 0, image.width, image.height)
 
   // Draw bubble on the top
   drawBubble(context, value, options)
@@ -193,13 +203,13 @@ const drawBubble = (
   const size = getSize()
   const ratio = getRatio()
   const length = finalValue.length - 1
-  const width = 8 * ratio + 4 * ratio * length
+  const width = Math.min(8 * ratio + 4 * ratio * length, size)
   const height = 7 * ratio
   const top = size - height
-  const left = size - width - ratio
+  const left = size - width
   const bottom = 16 * ratio
   const right = 16 * ratio
-  const radius = 5 * ratio
+  const radius = 3 * ratio
 
   // Bubble
   context.save()
@@ -226,7 +236,7 @@ const drawBubble = (
   context.fillStyle = options.color
   context.textAlign = 'center'
   context.textBaseline = 'top'
-  context.fillText(finalValue, left + width / 2 + 1, 9 * ratio + 1)
+  context.fillText(finalValue, left + width / 2, 9 * ratio + 1)
   context.restore()
 }
 
@@ -248,10 +258,7 @@ export function set(value: Value, options?: Partial<Options>) {
     const bestFavicon = getBestFavicon()
 
     if (bestFavicon) {
-      const size = getSize()
       const bestFaviconImage = document.createElement('img')
-      bestFaviconImage.width = size
-      bestFaviconImage.height = size
 
       // Allow cross origin resource requests if the image is not a data:uri
       if (!bestFavicon.href.match(/^data/)) {
@@ -265,12 +272,15 @@ export function set(value: Value, options?: Partial<Options>) {
       current.bestFavicon = bestFavicon
       current.bestFaviconImage = bestFaviconImage
     }
+
+    // Once the device pixel ratio changes we set the value again
+    devicePixelRatioListener.addListener(handleRatioChange)
   }
   if (!current.favicons) {
     current.favicons = getFavicons()
   }
 
-  // Draw icon
+  // The image is required for setting the badge
   if (!current.bestFaviconImage) {
     return false
   }
@@ -294,6 +304,13 @@ export function clear() {
     return
   }
 
+  // Reset value and options
+  current.value = DefaultValue
+  current.options = DefaultOptions
+
+  // Remove old listener
+  devicePixelRatioListener.removeListener(handleRatioChange)
+
   if (current.favicons) {
     // Remove current favicons
     for (const favicon of getFavicons()) {