diff options
| -rw-r--r-- | index.html | 6 | ||||
| -rw-r--r-- | js/app.js | 30 | ||||
| -rw-r--r-- | js/lex.js | 4 |
3 files changed, 23 insertions, 17 deletions
@@ -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) { @@ -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) } } @@ -21,6 +21,10 @@ Lex.prototype.css = function(){ Lex.prototype.html = function(){ return this.char == " " ? " " : this.char || " " } +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) { |