fix width/height

3 files changed, 23 insertions, 17 deletions

diff --git a/index.html b/index.html
index 733c782..de811fc 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,7 @@
 <link rel="stylesheet" href="css/sally.css" type="text/css" charset="utf-8" />
 <link rel="stylesheet" href="css/ak.css" type="text/css" charset="utf-8" />
 <style type="text/css">
+
 .rapper { cursor: crosshair; }
 body.grid span { border-right: 1px solid #444; border-top: 1px solid #444; border-bottom: 1px solid #444; }
 body.grid div { border-top: 1px solid #444; border-left: 1px solid #444; }
@@ -22,6 +23,7 @@ body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset
   <span id="square_el" class="tool">square</span>
   <span id="circle_el" class="tool">circle</span>
   <span id="text_el" class="tool">text</span>
+  <span id="clear_el" class="tool">clear</span>
 
   brush size: <span id="width_el" class="ed">5</span> x <span id="height_el" class="ed">5</span>
   canvas size: <span id="canvas_width_el" class="ed">80</span> x <span id="canvas_height_el" class="ed">24</span>
@@ -30,9 +32,9 @@ body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset
 
 </body>
 <script type="text/javascript-shader" id="demo_shader">
-lex.bg = colors[color_hue_order[Math.floor((x+y*y)/20)%16]]
+	lex.bg = colors[color_hue_order[Math.floor((x+y*y)/20)%16]]
 	lex.fg = (x+y)%16
-		lex.char = (y%2) ? ":" : "%" 
+	lex.char = (y%2) ? ":" : "%" 
 
 /*
 	if (x > y || y > x + 20 || x > y / 4 + 10) {
diff --git a/js/app.js b/js/app.js
index 1e975ea..9db7895 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,7 +1,7 @@
 var contentType = 'text/plain;charset=utf-8'
 
-var cols = 200
-var rows = 200
+var cols = 80
+var rows = 24
 var dragging = false
 var drawing = true
 var erasing = false
@@ -84,7 +84,13 @@ function build () {
 	}
 	controls.text.generate = function(){
 	}
-	
+
+	controls.clear = new Tool (clear_el)
+	controls.clear.use = function(){
+		canvas.clear()
+	}
+
+
 	controls.width = new Lex (width_el)
 	controls.height = new Lex (height_el)
 	controls.canvas_width = new Lex (canvas_width_el)
@@ -108,18 +114,14 @@ function bind () {
 				erasing = (e.which == "3" || e.ctrlKey)
 				draw(lex, x, y, erasing)
 			}
-			else {
-				lex.focus()
-			}
+			lex.focus()
     })
     lex.span.addEventListener("mousemove", function(){
 			if (! dragging) return
 			if (drawing) {
 				draw(lex, x, y, erasing)
 			}
-			else {
-				lex.focus()
-			}
+			lex.focus()
     })
   })
   palette.forEach(function(lex, x, y){
@@ -149,7 +151,7 @@ function bind () {
 		})
 	});
 	
-	[controls.square, controls.circle, controls.text].forEach(function(tool){
+	[controls.square, controls.circle, controls.text, controls.clear].forEach(function(tool){
   	tool.span.addEventListener('mousedown', function(e){
 			tool.focus()
 		})
@@ -171,22 +173,20 @@ function bind () {
 	})
 
 	controls.canvas_width.key = int_key(function(n, keyCode){
+		controls.canvas_width.read()
 		if (controls.canvas_width.char.length == 1) {
 			n = parseInt(controls.canvas_width.char) * 10 + n
 		}
-		controls.canvas_width.blur()
 		controls.canvas_width.char = ""+n
 		controls.canvas_width.build()
 		canvas.w = n
 		canvas.rebuild()
 	})
 	controls.canvas_height.key = int_key(function(n, keyCode){
-	console.log(controls.canvas_height.char.length)
-	console.log(controls.canvas_height.char,n)
+		controls.canvas_height.read()
 		if (controls.canvas_height.char.length == 1) {
 			n = parseInt(controls.canvas_height.char) * 10 + n
 		}
-		controls.canvas_height.blur()
 		controls.canvas_height.char = ""+n
 		controls.canvas_height.build()
 		canvas.h = n
@@ -221,7 +221,7 @@ function bind () {
 function int_key (f) {
 	return function (key, keyCode) {
 		var n = parseInt(key)
-		n && f(n)
+		! isNaN(n) && f(n)
 	}
 }
 
diff --git a/js/lex.js b/js/lex.js
index f235672..086fc90 100644
--- a/js/lex.js
+++ b/js/lex.js
@@ -21,6 +21,10 @@ Lex.prototype.css = function(){
 Lex.prototype.html = function(){
 	return this.char == " " ? "&nbsp;" : this.char || "&nbsp;"
 }
+Lex.prototype.read = function(){
+	this.char = this.span.innerHTML
+	return this.char
+}
 Lex.prototype.irc = function(){
 	var char = this.char == "%" ? '%%' : this.char || " "
 	if (this.bg == 1 && this.fg == 0) {