more of a real ansi editor

author: Julie Lala <jules@okfoc.us> 2014-11-21 03:54:10 -0500
committer: Julie Lala <jules@okfoc.us> 2014-11-21 03:54:10 -0500
commit: 90442f7b68dcdcf4866719669149f8937c10fffc (patch)
tree: 557f64da074c381a390dafcabce4969e2858ea9c /index.html
parent: 4c83966dc73ed338a073bb53d899f3741c2dd12b (diff)
1 files changed, 168 insertions, 65 deletions
diff --git a/index.html b/index.html
index 0626b4b..1e44854 100644
--- a/index.html
+++ b/index.html
@@ -1,99 +1,202 @@
-
+<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">
-#canvas { white-space: pre; font-family: Menlo, monospace; cursor: crosshair; }
-.b { background: black; color: transparent }
+#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; }
 </style>
+<body class="grid">
 
-<div id="canvas"></div>
-
-<select id="color">
-<option value="15" selected>light gray</option>
-<option value="1">black</option>
-<option value="2">blue</option>
-<option value="3">green</option>
-<option value="5">red</option>
-<option value="6">magenta</option>
-<option value="7">orange</option>
-<option value="10">cyan</option>
-</select>
+<div id="canvas_rapper" class="rapper"></div>
+<div id="brush_rapper" class="rapper"></div>
+<div id="palette_rapper" class="rapper"></div>
 
 <script>
 var contentType = 'text/plain;charset=utf-8'
 
-var fg = "15", bg = "0"
 var cols = 80
 var rows = 24
 var dragging = false
 var erasing = false
 
+var canvas, tools, palette, brush, colors, mode
+
+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 = {}
+color_names.forEach(function(name, i){ colors[name] = i })
+
 function init () {
   build()
   bind()
 }
 function build () {
-  var body = ""
-  for (var i = 0; i < rows; i++) {
-    for (var j = 0; j < cols; j++) {
-      body += "<span y='" + i + "' x='" + j + "'> </span>"
-    }
-    body += "<br>"
-  }
-  canvas.innerHTML = body
+	canvas = new Matrix (rows, cols, function(x,y){
+		var lex = new Lex (x,y)
+		if (x > y || y > x + 20 || x > y / 4 + 10) {
+			lex.clear()
+		}
+		else {
+			lex.bg = x+y*y
+			lex.fg = (x+y)%2
+			lex.char = ":"
+		}
+		lex.build()
+		return lex
+	})
+	brush = new Matrix (5, 5, function(x,y){
+		var lex = new Lex (x,y)
+		lex.build()
+		return lex
+	})
+	palette = new Matrix (2, 32, 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)
 }
 function bind () {
-  aa(document.querySelectorAll("span")).forEach(function(span){
-    span.addEventListener('mousedown', function(e){
+  canvas.forEach(function(lex, x, y){
+  	lex.span.addEventListener('mousedown', function(e){
       e.preventDefault()
       dragging = true
-      erasing = !! (span.className == "b")
-      span.className = erasing ? "" : "b"
-      span.innerHTML = erasing ? " " : "b"
+      erasing = e.which == "3"
+			draw(lex, x, y, erasing)
     })
-    span.addEventListener("mousemove", function(){
-      if (dragging) {
-        span.className = erasing ? "" : "b"
-        span.innerHTML = erasing ? " " : "b"
-      }
+    lex.span.addEventListener("mousemove", function(){
+      dragging && draw(lex, x, y, erasing)
     })
   })
+  palette.forEach(function(lex, x, y){
+  	lex.span.addEventListener('mousedown', function(e){
+      e.preventDefault()
+      dragging = true
+      erasing = e.which == "3"
+			brush.fill(lex.fg, lex.bg)
+    })
+	})
   window.addEventListener('mouseup', function(){
     dragging = erasing = false
   })
-  color.addEventListener('change', function(){
-    fg = bg = color.value
-    var c = document.querySelector("option:checked").innerHTML
-    cssRule(".b", "background: " + c)
-  })
 }
-function aa (alike) {
-  return Array.prototype.slice.call(alike)
+
+function Lex (x,y) {
+	this.x = x
+	this.y = y
+	this.span = document.createElement("span")
+	this.fg = colors.white
+	this.bg = colors.black
+	this.char = " "
+}
+Lex.prototype.build = function(){
+	this.span.className = this.css()
+	this.span.innerHTML = this.html()
+}
+Lex.prototype.css = function(){
+	return "f" + letters[this.fg&15] + "b" + letters[this.bg&15]
+}
+Lex.prototype.html = function(){
+	return this.char == " " ? "&nbsp;" : this.char
+}
+Lex.prototype.irc = function(){
+	if (this.bg == 1 && this.fg == 0) {
+// 		return "\\x03" + "," + (this.bg&15) + this.char
+		return this.char
+	}
+	else {
+		return "\\x03" + (this.fg&15) + "," + (this.bg&15) + this.char
+	}
+}
+Lex.prototype.clone = function (lex){
+	this.fg = lex.fg
+	this.bg = lex.bg
+	this.char = lex.char
+	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.char = " "
+}
+
+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++) {
+			aa[i][j] = f(i,j)
+		}
+	}
+	this.aa = h == 1 ? aa[0] : aa
+}
+Matrix.prototype.forEach = function(f){
+	this.aa.forEach(function(row, y){
+		row.forEach(function(lex, x){
+			f(lex, x, y)
+		})
+	})
+}
+Matrix.prototype.clear = function(){
+	this.forEach(function(lex,x,y){ lex.clear() })
+}
+Matrix.prototype.fill = function(fg,bg){
+	this.forEach(function(lex,x,y){
+		lex.fg = fg
+		lex.bg = bg
+		lex.build()
+	})
+}
+Matrix.prototype.build = function(rapper){
+  this.aa.forEach(function(row, y){
+  	var div = document.createElement("div")
+  	row.forEach(function(lex, x) {
+			div.appendChild(lex.span)
+		})
+		rapper.appendChild( div )
+	})
+//   rapper.appendChild(frag)
+}
+
+function draw (lex, x, y, erasing) {
+	stamp (canvas, brush, x, y, erasing)
+}
+function stamp (canvas, brush, x, y, erasing) {
+	hh = brush.w/2|0
+	brush.forEach(function(lex, s, t){
+		s += x-hh
+		t += y-hh
+		if (s >= 0 || s < canvas.w || t >= 0 && t < canvas.h) {
+			canvas.aa[t][s].clone(lex)
+		}
+	})
 }
 
 function ascii () {
-  var lines = []
-  canvas.innerText.split("\n").forEach(function(row){
-    if (row.indexOf("b") == -1) return
-    var last_c = " "
-    var line = ""
-    row.replace(/\s+$/,"").split("").forEach(function(c){
-      if (c == last_c) {
-        line += c
-      }
-      else {
-        if (c == "b") {
-          line += "\\x03" + fg + "," + bg + c
-        }
-        else {
-          line += "\\x03" + c
-        }
-        last_c = c
-      }
-    })
-    if (last_c == "b") {
-      line += "\\x03"
-    }
-    lines.push(line)
-  })
+  var lines = canvas.aa.map(function(row, y){
+    var last, line = ""
+    row.forEach(function(lex, x) {
+			if (lex.eq(last)) {
+				line += lex.char
+			}
+			else {
+				if (x > 0 && last && (last.bg != 1 || last.fg != 0)) line += "\\x03"
+				line += lex.irc()
+				last = lex
+			}
+		})
+    return line.replace(/\s+$/,"")
+	}).filter(function(line){ return line.length > 0 })
   var txt = '/exec -out printf "' + lines.join("\\n") + '"\n'
   return txt
 }
author	Julie Lala <jules@okfoc.us>	2014-11-21 03:54:10 -0500
committer	Julie Lala <jules@okfoc.us>	2014-11-21 03:54:10 -0500
commit	90442f7b68dcdcf4866719669149f8937c10fffc (patch)
tree	557f64da074c381a390dafcabce4969e2858ea9c /index.html
parent	4c83966dc73ed338a073bb53d899f3741c2dd12b (diff)