text mode, square, circle brushes

author: Julie Lala <jules@okfoc.us> 2014-11-21 05:36:07 -0500
committer: Julie Lala <jules@okfoc.us> 2014-11-21 05:36:07 -0500
commit: 9ba07bc32cd856ab0188b2e149911e4826055d7d (patch)
tree: a64b597dc22275e532b92941304e9fbc3859ccfe /index.html
parent: 8bdb43c30af240811b1dffb22c042af18e555701 (diff)
1 files changed, 257 insertions, 32 deletions
diff --git a/index.html b/index.html
index eec642e..3e0adae 100644
--- a/index.html
+++ b/index.html
@@ -2,17 +2,26 @@
 <link rel="stylesheet" href="css/ak.css" type="text/css" charset="utf-8" />
 <style type="text/css">
 #rapper { white-space: pre; font-family: Menlo, monospace; cursor: crosshair; }
-/* 
 body.grid span { border-right: 1px solid #444; border-top: 1px solid #444; border-bottom: 1px solid #444; }
- */
-span.selected { border-bottom: #fff; }
+body.grid div { border-top: 1px solid #444; border-left: 1px solid #444; }
+body.grid #tools_rapper span { border-left: 1px solid #444; }
+.ed { color: #fff; }
+.focused { text-shadow: 0 3px 3px #fff; border-color: #fff; }
+.tool.focused, .ed.focused { color: white; text-decoration: underline; }
+body.grid .focused { border: 1px solid white; }
 </style>
 <body class="grid">
 
 <div id="canvas_rapper" class="rapper"></div>
-<div id="brush_rapper" class="rapper"></div>
 <div id="palette_rapper" class="rapper"></div>
-<div id="tools_rapper" class="rapper"></div>
+<div id="tools_rapper" class="rapper">
+<span id="square_el" class="tool">square</span>
+<span id="circle_el" class="tool">circle</span>
+<span id="text_el" class="tool">text</span>
+
+brush size: <span id="width_el" class="ed">3</span> x <span id="height_el" class="ed">3</span>
+</div>
+<div id="brush_rapper" class="rapper"></div>
 
 <script>
 var contentType = 'text/plain;charset=utf-8'
@@ -20,14 +29,16 @@ var contentType = 'text/plain;charset=utf-8'
 var cols = 80
 var rows = 24
 var dragging = false
+var drawing = true
 var erasing = false
+var focused
 
-var canvas, tools, palette, brush, colors, mode
+var canvas, tools, palette, brush, mode, current_tool
 
 var color_names = ("white black dark-blue green red dark-red purple orange" +
                    "yellow lime dark-cyan cyan blue magenta dark-gray light-gray").split(" ");
 var letters = "abcdefghijklmnop";
-var colors = {}
+var colors = {}, controls = {}
 color_names.forEach(function(name, i){ colors[name] = i })
 
 // var tools = "square circle rectangle"
@@ -37,7 +48,7 @@ function init () {
   bind()
 }
 function build () {
-	canvas = new Matrix (rows, cols, function(x,y){
+	canvas = new Matrix (cols, rows, function(x,y){
 		var lex = new Lex (x,y)
 		if (x > y || y > x + 20 || x > y / 4 + 10) {
 			lex.clear()
@@ -55,23 +66,77 @@ function build () {
 		lex.build()
 		return lex
 	})
-	palette = new Matrix (2, 32, function(x,y){
+	palette = new Matrix (32, 2, function(x,y){
 		var lex = new Lex (x,y)
 		lex.bg = y>>1
 		lex.build()
 		return lex
 	})
-	canvas.build(canvas_rapper)
-	brush.build(brush_rapper)
-	palette.build(palette_rapper)
+	canvas.append(canvas_rapper)
+	brush.append(brush_rapper)
+	palette.append(palette_rapper)
+	
+	controls.circle = new Tool (circle_el)
+	controls.circle.use = function(){
+		brush.generate = controls.circle.generate
+		brush.generate()
+		drawing = true
+	}
+	controls.circle.generate = function(){
+		var fg = brush.fg, bg = brush.bg
+		var hw = brush.w/2|0, hh = brush.h/2|0
+		brush.forEach(function(lex,x,y) {
+			var len = Math.sqrt(Math.pow(x-hw,2)+Math.pow(y-hh,2))
+			if (len > Math.abs(hw)) {
+				lex.clear()
+			}
+			else {
+				lex.fill(fg,bg)
+			}
+		})
+	}
+	
+	controls.square = new Tool (square_el)
+	controls.square.use = function(){
+		brush.generate = controls.square.generate
+		brush.generate()
+		drawing = true
+	}
+	controls.square.generate = function(){
+		var fg = brush.fg, bg = brush.bg
+		brush.fill(fg,bg)
+	}
+
+	controls.text = new Tool (text_el)
+	controls.text.use = function(){
+		brush.generate = controls.text.generate
+		brush.generate()
+		drawing = false
+	}
+	controls.text.generate = function(){
+	}
+	
+	controls.width = new Lex (width_el)
+	controls.height = new Lex (height_el)
+	
+  controls.circle.focus()
+
+	brush.bg = colors.red
+	brush.generate()
+	brush.build()
 }
 function bind () {
   canvas.forEach(function(lex, x, y){
   	lex.span.addEventListener('mousedown', function(e){
       e.preventDefault()
-      dragging = true
-      erasing = e.which == "3"
-			draw(lex, x, y, erasing)
+      if (drawing) {
+				dragging = true
+				erasing = e.which == "3"
+				draw(lex, x, y, erasing)
+			}
+			else {
+				lex.focus()
+			}
     })
     lex.span.addEventListener("mousemove", function(){
       dragging && draw(lex, x, y, erasing)
@@ -82,18 +147,91 @@ function bind () {
       e.preventDefault()
       dragging = true
       erasing = e.which == "3"
-			brush.fill(lex.fg, lex.bg)
+			brush.fg = lex.fg
+			brush.bg = lex.bg
+			brush.generate()
+    })
+	})
+  brush.forEach(function(lex, x, y){
+  	lex.span.addEventListener('mousedown', function(e){
+      e.preventDefault()
+      dragging = true
+// 			lex.fill(lex.fg, lex.bg)
     })
 	})
   window.addEventListener('mouseup', function(){
     dragging = erasing = false
-  })
+  });
+  
+	[controls.width, controls.height].forEach(function(lex){
+  	lex.span.addEventListener('mousedown', function(e){
+			lex.focus()
+		})
+	});
+	
+	[controls.square, controls.circle, controls.text].forEach(function(tool){
+  	tool.span.addEventListener('mousedown', function(e){
+			tool.focus()
+		})
+	})
+
+	controls.width.key = int_key(function(n, keyCode){
+		controls.width.blur()
+		controls.width.char = ""+n
+		controls.width.build()
+		brush.w = n
+		brush.rebuild()
+	})
+	controls.height.key = int_key(function(n, keyCode){
+		controls.height.blur()
+		controls.height.char = ""+n
+		controls.height.build()
+		brush.h = n
+		brush.rebuild()
+	})
+	window.addEventListener('keydown', function(e){
+		switch (e.keyCode) {
+			case 27: // esc
+				if (focused) focused.blur()
+				break
+			default:
+				if (focused) focused.key(String.fromCharCode(e.keyCode), e.keyCode)
+				break
+		}
+	})
+}
+function int_key (f) {
+	return function (key, keyCode) {
+		var n = parseInt(key)
+		n && f(n)
+	}
+}
+
+function Tool (span) {
+	this.lex = new Lex (span)
+	this.span = span
+}
+Tool.prototype.use = function(){}
+Tool.prototype.focus = function(){
+	current_tool && current_tool.blur()
+	current_tool = this
+	this.span.classList.add('focused')
+	this.use()
+}
+Tool.prototype.blur = function(){
+	current_tool = null
+	this.span.classList.remove('focused')
 }
 
 function Lex (x,y) {
-	this.x = x
-	this.y = y
-	this.span = document.createElement("span")
+	if (typeof x == "number") {
+		this.x = x
+		this.y = y
+		this.span = document.createElement("span")
+	}
+	else {
+		this.span = x
+	}
 	this.fg = colors.white
 	this.bg = colors.black
 	this.char = " "
@@ -118,30 +256,105 @@ Lex.prototype.irc = function(){
 	}
 }
 Lex.prototype.clone = function (lex){
+	if (! erasing && lex.isClear()) return
 	this.fg = lex.fg
 	this.bg = lex.bg
 	this.char = lex.char
 	this.build()
 }
+Lex.prototype.fill = function(fg,bg){
+	this.fg = fg
+	this.bg = bg
+	this.build()
+}
 Lex.prototype.eq = function(lex){
 	return lex && this.fg == lex.fg && this.bg == lex.fg && this.char == lex.char
 }
 Lex.prototype.clear = function(){
-	this.bg=1
-	this.fg=0
+	this.bg = 1
+	this.fg = 0
 	this.char = " "
+	this.build()
+}
+Lex.prototype.isClear = function(){
+	return this.bg == 1 && this.fg == 0 && this.char == " "
+}
+Lex.prototype.focus = function(){
+	if (focused) focused.blur()
+	this.span.classList.add('focused')
+	focused = this
+}
+Lex.prototype.blur = function(){
+	this.span.classList.remove('focused')
+	focused = null
+}
+Lex.prototype.key = function(char, keyCode) {
+	console.log(keyCode, this.y, this.x)
+	switch (keyCode) {
+		case 13: // return
+			canvas.focusLex(0, this.x+1)
+			break
+		case 38: // up
+			canvas.focusLex(this.y, this.x-1)
+			break
+		case 40: // down
+			canvas.focusLex(this.y, this.x+1)
+			break
+		case 37: // left
+			canvas.focusLex(this.y-1, this.x)
+			break
+		case 39: // right
+			canvas.focusLex(this.y+1, this.x)
+			break
+		default:
+			this.char = char
+			this.fg = brush.bg
+			this.build()
+			this.blur()
+			if (this.y < canvas.w-1) {
+				canvas.aa[this.x][this.y+1].focus()
+			}
+	}
+}
+Lex.prototype.demolish = function(){
+	this.span.parentNode.removeChild(this.span)
+	this.span = null
 }
 
 function Matrix (w,h,f){
-	this.w = w, this.h = h
-	var aa = new Array (w)
-	for (var i = 0; i < w; i++) {
-		aa[i] = new Array (h)
-		for (var j = 0; j < h; j++) {
+	this.w = w
+	this.h = h
+	this.f = f
+	this.initialize()
+}
+Matrix.prototype.initialize = function(){
+	var w = this.w, h = this.h, f = this.f
+	var aa = new Array (h)
+	for (var i = 0; i < h; i++) {
+		aa[i] = new Array (w)
+		for (var j = 0; j < w; j++) {
 			aa[i][j] = f(i,j)
 		}
 	}
-	this.aa = h == 1 ? aa[0] : aa
+	this.aa = aa
+}
+Matrix.prototype.rebuild = function (){
+	this.demolish()
+	this.initialize()
+	this.append()
+	this.generate && this.generate()
+}
+Matrix.prototype.demolish = function (){
+	this.forEach(function(lex){
+		lex.demolish()
+	})
+	while (this.rapper.firstChild) {
+    this.rapper.removeChild(this.rapper.firstChild);
+	}
+	this.aa.forEach(function(row){
+		row.length = 0
+	})
+	this.aa.length = 0
 }
 Matrix.prototype.forEach = function(f){
 	this.aa.forEach(function(row, y){
@@ -150,17 +363,28 @@ Matrix.prototype.forEach = function(f){
 		})
 	})
 }
+Matrix.prototype.focusLex = function(y,x){
+	this.aa[mod(x,this.h)][mod(y,this.w)].focus()
+}
 Matrix.prototype.clear = function(){
 	this.forEach(function(lex,x,y){ lex.clear() })
 }
-Matrix.prototype.fill = function(fg,bg){
+Matrix.prototype.fill = function(fg, bg){
+	this.fg = fg
+	this.bg = bg
 	this.forEach(function(lex,x,y){
 		lex.fg = fg
 		lex.bg = bg
 		lex.build()
 	})
 }
-Matrix.prototype.build = function(rapper){
+Matrix.prototype.build = function(){
+	this.forEach(function(lex,x,y){
+		lex.build()
+	})
+}
+Matrix.prototype.append = function(rapper){
+	rapper = this.rapper = rapper || this.rapper
   this.aa.forEach(function(row, y){
   	var div = document.createElement("div")
   	row.forEach(function(lex, x) {
@@ -168,7 +392,6 @@ Matrix.prototype.build = function(rapper){
 		})
 		rapper.appendChild( div )
 	})
-//   rapper.appendChild(frag)
 }
 
 function draw (lex, x, y, erasing) {
@@ -184,7 +407,9 @@ function stamp (canvas, brush, x, y, erasing) {
 		}
 	})
 }
-
+function mod (i,n) {
+  return i - n * Math.floor(i / n)
+}
 function ascii () {
   var lines = canvas.aa.map(function(row, y){
     var last, line = ""
author	Julie Lala <jules@okfoc.us>	2014-11-21 05:36:07 -0500
committer	Julie Lala <jules@okfoc.us>	2014-11-21 05:36:07 -0500
commit	9ba07bc32cd856ab0188b2e149911e4826055d7d (patch)
tree	a64b597dc22275e532b92941304e9fbc3859ccfe /index.html
parent	8bdb43c30af240811b1dffb22c042af18e555701 (diff)