fix colors

1 files changed, 20 insertions, 4 deletions

diff --git a/client/index.js b/client/index.js
index 73ace90..728fd60 100644
--- a/client/index.js
+++ b/client/index.js
@@ -25,19 +25,35 @@ function add (x, y) {
   const i = x + 1
 	const j = y + 1
   const div = document.createElement('div')
+	let add = 0
+	let frac = Math.log2(i/j) % 1
 	div.style.left = (x * s) + 'px'
 	div.style.top = (y * s) + 'px'
-	div.style.backgroundColor = color(i/j, add_off, mul_off)
-  div.style.opacity = Math.min(j/i * Math.sqrt(3), 1)
 	div.innerHTML = `<div>${i}<\/div><div>\/</div><div>${j}<\/div>`
+	if (frac < 0) {
+		frac += 1
+		console.log(frac)
+	}
+	if (i < j) {
+    add = -Math.log(j/i) / 3.5
+	}
+	else {
+    add = Math.log(i/j) / 6
+	}
+	if ( frac === 0) {
+		div.style.fontWeight = '900'
+	  div.style.left = (x * s) + 'px'
+  	div.style.top = (y * s) + 'px'
+	}
+	div.style.backgroundColor = color(frac, add_off + add, mul_off)
 	div.addEventListener('mouseenter', function(){
-	  div.style.backgroundColor = color(i/j, add_on, mul_on)
+	  div.style.backgroundColor = color(frac, add + add_on, mul_on)
 		if (dragging) {
 	    kalimba.play( root * i/j )
 		}
 	})
 	div.addEventListener('mouseleave', function(){
-	  div.style.backgroundColor = color(i/j, add_off, mul_off)
+	  div.style.backgroundColor = color(frac, add + add_off, mul_off)
 	})
 	div.addEventListener('click', function(){
 	  kalimba.play( root * i/j )