wat

1 files changed, 119 insertions, 0 deletions

diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0626b4b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,119 @@
+
+<style type="text/css">
+#canvas { white-space: pre; font-family: Menlo, monospace; cursor: crosshair; }
+.b { background: black; color: transparent }
+</style>
+
+<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>
+
+<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
+
+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
+}
+function bind () {
+  aa(document.querySelectorAll("span")).forEach(function(span){
+    span.addEventListener('mousedown', function(e){
+      e.preventDefault()
+      dragging = true
+      erasing = !! (span.className == "b")
+      span.className = erasing ? "" : "b"
+      span.innerHTML = erasing ? " " : "b"
+    })
+    span.addEventListener("mousemove", function(){
+      if (dragging) {
+        span.className = erasing ? "" : "b"
+        span.innerHTML = erasing ? " " : "b"
+      }
+    })
+  })
+  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 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 txt = '/exec -out printf "' + lines.join("\\n") + '"\n'
+  return txt
+}
+
+document.body.addEventListener('copy', function (e) {
+  if (e.clipboardData) {
+    e.preventDefault();
+    e.clipboardData.setData(contentType, ascii());
+  }
+  if (window.clipboardData) {
+    e.returnValue = false;
+    window.clipboardData.setData(contentType, ascii());
+  }
+}, false);
+
+window.cssRule = function (selector, declaration) {
+  var x = document.styleSheets,y=x.length-1;
+  x[y].insertRule(selector+"{"+declaration+"}",x[y].cssRules.length);
+};
+
+init()
+</script>
+