*

3 files changed, 36 insertions, 29 deletions

diff --git a/editor/links/main.css b/editor/links/main.css
index a06700a..bca287a 100644
--- a/editor/links/main.css
+++ b/editor/links/main.css
@@ -14,7 +14,7 @@ table { margin:0px auto 30px; }
 table tr td { padding:5px 10px; transition: background-color 250ms, color 250ms; font-size:11px; line-height: 20px; position: relative; padding-left:32px;}
 table tr td svg { stroke:none; display: inline-block; margin:0px 15px 0px 0px; position: absolute; left:8px; top:6px;}
 table tr td span {  display: inline-block; }
-#print { font-family: courier; font-size:12px; padding:5px 10px; }
-#print b { font-weight: bold }
+#debug { font-size: 11px }
+#score { text-align: center; margin-bottom: 30px; font-size:11px; }
 
-#benchmark { height:300px; margin:calc(50vh - 150px);}
\ No newline at end of file
+#benchmark { height:300px; margin:calc(50vh - 200px);}
\ No newline at end of file
diff --git a/editor/scripts/benchmark.js b/editor/scripts/benchmark.js
index 69032b2..f1b75d0 100644
--- a/editor/scripts/benchmark.js
+++ b/editor/scripts/benchmark.js
@@ -1,13 +1,16 @@
 'use strict'
 
+/* global theme */
+/* global Color */
+
 function Benchmark () {
-  this.matches = function () {
+  this.matches = () => {
     var a = [{ id: 'b_inv_f_inv', fc: theme.active.f_inv, bc: theme.active.b_inv }]
     for (const fid in theme.active) {
-      if (fid.substr(0, 1) != 'f' || fid.indexOf('_inv') > -1) { continue }
+      if (fid.substr(0, 1) !== 'f' || fid.indexOf('_inv') > -1) { continue }
       const fc = theme.active[fid]
       for (const bid in theme.active) {
-        if (bid.substr(0, 1) != 'b' || bid.indexOf('_inv') > -1) { continue }
+        if (bid.substr(0, 1) !== 'b' || bid.indexOf('_inv') > -1) { continue }
         const bc = theme.active[bid]
         a.push({ id: `${bid}_${fid}`, fc: fc, bc: bc })
       }
@@ -15,32 +18,36 @@ function Benchmark () {
     return a
   }
 
-  this.refresh = function () {
-    console.log('refresh')
-    const el = document.getElementById('print')
-    const html = ''
-    const count = 0
-    const matches = bench.matches()
+  this.refresh = () => {
+    const logs = []
+    let score = 0
+    let errors = 0
 
-    console.log(matches)
-    for (const match of matches) {
+    for (const match of this.matches()) {
       const rating = new Color(match.fc).contrast(new Color(match.bc))
       const cell = document.getElementById(match.id)
-      cell.textContent = `${rating.toFixed(2)}`
-    }
 
-    el.innerHTML = html
-  }
+      let rune = ''
+      if (rating === 1) {
+        rune = '[X]'
+        errors += 1
+      } else if (rating < 1.25) {
+        rune = '[!]'
+        score += 1
+      } else if (rating < 2) {
+        rune = '[~]'
+        score += 2
+      } else {
+        score += 5
+      }
+      cell.innerHTML = `${rating.toFixed(2)}<span style='color:var(--f_inv)'>${rune}<span>`
+    }
 
-  this.log = function (id, fc, bc) {
-    let html = ''
+    const perc = (score / (this.matches().length * 5)) * 100
 
-    if (rating == 1) {
-      html += `Overlap: <b>${id}</b> <i>${bc}</i>\n`
-    } else if (rating < 1.5) {
-      html += `Low contrast(${rating.toFixed(2)}): <b>${id}</b> <i>${bc}</i>\n`
-    }
+    const cat = errors > 0 ? 'fix errors' : perc === 100 ? 'perfect' : perc > 80 ? 'good' : perc > 75 ? 'average' : 'bad'
 
-    return html
+    document.getElementById('score').innerHTML = `<span style='color:var(--f_high)'>${cat}</span> ${score}/${this.matches().length * 5} <span style='color:var(--f_low)'>${perc.toFixed(1)}%</span>`
+    document.getElementById('debug').innerHTML = logs.join('\n')
   }
 }
diff --git a/editor/scripts/color.js b/editor/scripts/color.js
index 3aebfc7..0c52018 100644
--- a/editor/scripts/color.js
+++ b/editor/scripts/color.js
@@ -15,9 +15,9 @@ function Color (hex = '#000000') {
   this.invert = { r: 255 - this.rgb.r, g: 255 - this.rgb.g, b: 255 - this.rgb.b }
 
   this.contrast = function (b) {
-    const a_lum = 0.2126 * _linear(this.r / 256) + 0.7152 * _linear(this.g / 256) + 0.0722 * _linear(this.b / 256)
-    const b_lum = 0.2126 * _linear(b.r / 256) + 0.7152 * _linear(b.g / 256) + 0.0722 * _linear(b.b / 256)
-    return a_lum > b_lum ? (a_lum + 0.05) / (b_lum + 0.05) : (b_lum + 0.05) / (a_lum + 0.05)
+    const lumA = 0.2126 * _linear(this.r / 256) + 0.7152 * _linear(this.g / 256) + 0.0722 * _linear(this.b / 256)
+    const lumB = 0.2126 * _linear(b.r / 256) + 0.7152 * _linear(b.g / 256) + 0.0722 * _linear(b.b / 256)
+    return lumA > lumB ? (lumA + 0.05) / (lumB + 0.05) : (lumB + 0.05) / (lumA + 0.05)
   }
 
   this.rgba = function () {