experimental palette

1 files changed, 44 insertions, 17 deletions

diff --git a/js/ui/palette.js b/js/ui/palette.js
index 871dd74..f42ad6b 100644
--- a/js/ui/palette.js
+++ b/js/ui/palette.js
@@ -1,15 +1,32 @@
+var fillColor = 1  // black
+
 var palette = (function(){
 
-	var palette_index = localStorage.getItem("ascii.palette") || 1
-	var palette_list = [all_hue, all_inv_hue, mirc_color, mirc_color_reverse]
-	var palette_fn = palette_list[palette_index]
-  var palette = new Matrix (32, 2, function(x,y){
+  var palette_index = localStorage.getItem("ascii.palette") || 1
+  var palette_list = [all_hue, all_inv_hue, mirc_color, mirc_color_reverse]
+  var palette_fn = palette_list[palette_index]
+  var palette_chars = "  ▓▒░"
+  var palette = new Matrix (32, 5, function(x,y){
     var lex = new Lex (x,y)
-    lex.bg = palette_fn(x>>1)
-    lex.opacity = 1
-    lex.build()
     return lex
   })
+  palette.repaint = function(){
+  	palette.forEach(function(lex,x,y){
+  		if (y < 2) {
+				lex.bg = palette_fn(x>>1)
+				lex.fg = fillColor
+			}
+			else {
+				lex.bg = fillColor
+				lex.fg = palette_fn(x>>1)
+			}
+			lex.char = palette_chars[y]
+			lex.opacity = 1
+			lex.build()
+			if (lex.char == "_") lex.char = " "
+		})
+	}
+  palette.repaint()
 
   palette.bind = function(){
     palette.forEach(function(lex, x, y){
@@ -19,25 +36,35 @@ var palette = (function(){
       lex.span.addEventListener('mousedown', function(e){
         e.preventDefault()
         if (e.shiftKey) {
-        	palette_index = (palette_index+1) % palette_list.length
-        	localStorage.setItem("ascii.palette", palette_index)
-					palette_fn = palette_list[palette_index]
-        	palette.forEach(function(lex,x,y){
-        		lex.bg = palette_fn(x>>1)
-        		lex.build()
-        	})
-        	return
+          palette_index = (palette_index+1) % palette_list.length
+          localStorage.setItem("ascii.palette", palette_index)
+          palette_fn = palette_list[palette_index]
+          palette.repaint()
+          return
         }
-        brush.fg = lex.bg
+        brush.fg = lex.fg
         brush.bg = lex.bg
+        brush.char = lex.char
+        brush.opacity = lex.opacity
         if (! brush.modified) {
           brush.generate()
         }
         if (filling || e.ctrlKey) {
-        	fillColor = lex.bg
+          fillColor = lex.bg
         }
       })
 
+      lex.span.addEventListener('contextmenu', function(e){
+        e.preventDefault()
+				fillColor = y ? lex.fg : lex.bg
+				palette.repaint()
+        brush.fg = lex.fg
+        brush.char = lex.char
+        brush.opacity = lex.opacity
+				brush.generate()
+				return
+      })
+
     })
   }