1 files changed, 71 insertions, 39 deletions
diff --git a/client/index.js b/client/index.js
index 0a0eed1..276ed2a 100644
--- a/client/index.js
+++ b/client/index.js
@@ -1,6 +1,7 @@
 import keys from './lib/keys'
 import color from './lib/color'
 import kalimba from './lib/kalimba'
+import { browser, requestAudioContext } from './lib/util'
 
 const root = 440
 const s = 50
@@ -14,56 +15,87 @@ const add_off = 0.1
 const mul_off = 0.9
 
 let dragging = false
+let lastFreq = 0
+let notes = []
 
-for (var i = 0; i < ws; i++) {
-  for (var j = 0; j < hs; j++) {
-	  add(i, j)
-	}
-}
+requestAudioContext( () => {
+  for (var i = 0; i < ws; i++) {
+	  notes[i] = []
+    for (var j = 0; j < hs; j++) {
+      notes[i][j] = add(i, j)
+    }
+  }
+})
 
 function add (x, y) {
   const i = x + 1
-	const j = y + 1
+  const j = y + 1
   const div = document.createElement('div')
-	const freq = root * i/j
-	let add = 0
-	let frac = Math.log2(i/j) % 1
-	div.style.left = (x * s) + 'px'
-	div.style.top = (y * s) + 'px'
-	div.innerHTML = `<div>${i}<\/div><div>\/</div><div>${j}<\/div>`
-	if (frac < 0) {
-		frac += 1
-		console.log(frac)
-	}
-	if (i < j) {
+  const freq = root * i/j
+  let add = 0
+  let frac = Math.log2(i/j) % 1
+  div.style.left = (x * s) + 'px'
+  div.style.top = (y * s) + 'px'
+  div.innerHTML = `<div>${i}<\/div><div>\/</div><div>${j}<\/div>`
+  if (frac < 0) {
+    frac += 1
+  }
+  if (i < j) {
     add = -Math.log(j/i) / 3.5
-	}
-	else {
+  }
+  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)
+
+  if (browser.isDesktop) {
+    div.addEventListener('mouseenter', function(){
+      div.style.backgroundColor = color(frac, add + add_on, mul_on)
+      if (dragging) {
+        kalimba.play( freq )
+      }
+    })
+    div.addEventListener('mouseleave', function(){
+      div.style.backgroundColor = color(frac, add + add_off, mul_off)
+    })
+    div.addEventListener('click', function(){
+      kalimba.play( freq )
+    })
 	}
-	if ( frac === 0) {
-		div.style.fontWeight = '900'
-	  div.style.left = (x * s) + 'px'
-  	div.style.top = (y * s) + 'px'
+	else {
+    div.addEventListener('touchstart', function(){
+      kalimba.play( freq )
+			lastFreq = freq
+    })
 	}
-	div.style.backgroundColor = color(frac, add_off + add, mul_off)
-	div.addEventListener('mouseenter', function(){
-	  div.style.backgroundColor = color(frac, add + add_on, mul_on)
-		if (dragging) {
-	    kalimba.play( freq )
-		}
-	})
-	div.addEventListener('mouseleave', function(){
-	  div.style.backgroundColor = color(frac, add + add_off, mul_off)
-	})
-	div.addEventListener('click', function(){
-	  kalimba.play( freq )
-	})
-	document.body.appendChild(div)
+  document.body.appendChild(div)
+	return freq
 }
 
-document.addEventListener('mousedown', () => { dragging = true })
-document.addEventListener('mouseup', () => { dragging = false })
+if (browser.isDesktop) {
+  document.addEventListener('mousedown', () => { dragging = true })
+  document.addEventListener('mouseup', () => { dragging = false })
+}
+else {
+  document.addEventListener('touchstart', () => { dragging = true })
+  document.addEventListener('touchmove', (e) => {
+    e.preventDefault()
+		const x = Math.floor( e.touches[0].pageX / s )
+		const y = Math.floor( e.touches[0].pageY / s )
+		if (! (x in notes) || ! (y in notes[x])) return
+		const freq = notes[x][y]
+		if (freq !== lastFreq) {
+			kalimba.play( freq )
+			lastFreq = freq
+		}
+  })
+  document.addEventListener('touchend', () => { dragging = false })
+}
 
 keys.listen(function(index){
   // const freq = scales.current().index(index)