5 files changed, 57 insertions, 13 deletions

diff --git a/js/app.js b/js/app.js
index 3545734..d65f239 100644
--- a/js/app.js
+++ b/js/app.js
@@ -36,28 +36,30 @@ function build () {
 function bind () {
   canvas.bind()
   palette.bind()
- letters.bind()
+  letters.bind()
   brush.bind()
   controls.bind()
   keys.bind()
   
   window.addEventListener('mouseup', function(e){
     dragging = erasing = false
-    if (current_tool.name != 'shader' && current_tool.name != 'load' && current_tool.name != 'save') {
+    if (current_tool.name != 'shader' && current_tool.name != 'load' && current_tool.name != 'save' && is_desktop) {
       cursor_input.focus()
     }
     if (selecting) {
       selection.up(e)
     }
   })
+  window.addEventListener("touchend", function(){
+    dragging = false
+  })
   
   window.addEventListener('mousedown', function(e){
-    if (current_tool.name == "shader") { return }
-    cursor_input.focus()
+    if (current_tool.name != 'shader' && is_desktop) { cursor_input.focus() }
   })
 
   document.addEventListener('DOMContentLoaded', function(){
-    if (current_tool.name != 'shader') { cursor_input.focus() }
+    if (current_tool.name != 'shader' && is_desktop) { cursor_input.focus() }
     document.body.classList.remove('loading')
   })
   
diff --git a/js/tool.js b/js/tool.js
index 807b645..81ab43b 100644
--- a/js/tool.js
+++ b/js/tool.js
@@ -13,7 +13,7 @@ var Tool = Model({
     current_tool = this
     this.span.classList.add('focused')
     this.use()
-    if (this.name != 'shader') { cursor_input.focus() }
+    if (this.name != 'shader' && is_desktop) { cursor_input.focus() }
   },
   blur: function(){
     current_tool = null
@@ -38,14 +38,14 @@ var Checkbox = Tool.extend({
 var BlurredCheckbox = Checkbox.extend({
   focus: function(){
     this.use()
-    if (this.name != 'shader') { cursor_input.focus() }
+    if (this.name != 'shader' && is_desktop) { cursor_input.focus() }
   }
 })
 
 var BlurredTool = Tool.extend({
   focus: function(){
     this.use()
-    if (this.name != 'shader') { cursor_input.focus() }
+    if (this.name != 'shader' && is_desktop) { cursor_input.focus() }
   }
 })
 
diff --git a/js/ui/brush.js b/js/ui/brush.js
index 4b2db3c..ae1e36e 100644
--- a/js/ui/brush.js
+++ b/js/ui/brush.js
@@ -52,9 +52,6 @@ var brush = (function(){
         lex.focus()
       })
     })
-    window.addEventListener("mouseup", function(){
-      dragging = false
-    })
   }
 
   brush.expand = function(i){
diff --git a/js/ui/canvas.js b/js/ui/canvas.js
index 62bd4c3..b656f5d 100644
--- a/js/ui/canvas.js
+++ b/js/ui/canvas.js
@@ -20,6 +20,7 @@ var canvas = current_canvas = (function(){
         e.preventDefault()
       })
       lex.span.addEventListener('mousedown', function(e){
+        if (is_mobile) return
         e.preventDefault()
         dragging = true
         current_canvas = canvas
@@ -46,7 +47,9 @@ var canvas = current_canvas = (function(){
         }
         lex.focus()
       })
+
       lex.span.addEventListener("mousemove", function(e){
+        if (is_mobile) return
         if (! dragging) return
         if (drawing) {
           draw.move(e, lex, point)
@@ -58,6 +61,44 @@ var canvas = current_canvas = (function(){
       })
 
     })
+
+    if (is_mobile) {
+      exports.rapper.addEventListener('touchstart', function(e){
+        e.preventDefault()
+        var x, y, point, lex
+        x = (e.touches[0].pageX - exports.rapper.offsetTop) / exports.aa[0][0].span.offsetWidth
+        y = (e.touches[0].pageY - exports.rapper.offsetTop) / exports.aa[0][0].span.offsetHeight
+        x = ~~clamp(x, 0, exports.aa[0].length-1)
+        y = ~~clamp(y, 0, exports.aa.length-1)
+        point = [x,y]
+        lex = exports.aa[y][x]
+        dragging = true
+        if (drawing) {
+          draw.down(e, lex, point)
+        }
+        else if (filling) {
+          draw.fill(brush, x, y)
+        }
+        lex.focus()
+      })
+      exports.rapper.addEventListener("touchmove", function(e){
+        e.preventDefault()
+        var x, y, point, lex
+        x = (e.touches[0].pageX - exports.rapper.offsetTop) / exports.aa[0][0].span.offsetWidth
+        y = (e.touches[0].pageY - exports.rapper.offsetTop) / exports.aa[0][0].span.offsetHeight
+        x = ~~clamp(x, 0, exports.aa[0].length-1)
+        y = ~~clamp(y, 0, exports.aa.length-1)
+        point = [x,y]
+        lex = exports.aa[y][x]
+        if (! dragging) return
+        shader_el.innerHTML = point.join(",")
+        if (drawing) {
+          draw.move(e, lex, point)
+        }
+        lex.focus()
+      })
+    }
+
   }
 
   return exports
diff --git a/js/util.js b/js/util.js
index 97773d1..2426973 100644
--- a/js/util.js
+++ b/js/util.js
@@ -158,5 +158,9 @@ d=this.apply(a,arguments))===e?a:d}.bind(d):d;a.init&&a.init.apply(a,arguments)
 ]!==e&&(d["__"+c]=b[c]);return a(d)},f},typeof module=="object"&&(module.exports
 =Model);                                                              // c-{{{-<
 
-
-
+// Naive useragent detection pattern
+var is_iphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
+var is_ipad = (navigator.userAgent.match(/iPad/i))
+var is_android = (navigator.userAgent.match(/Android/i))
+var is_mobile = is_iphone || is_ipad || is_android
+var is_desktop = ! is_mobile;