diff options
| -rw-r--r-- | index.html | 14 | ||||
| -rw-r--r-- | js/matrix.js | 3 | ||||
| -rw-r--r-- | js/ui/brush.js | 1 | ||||
| -rw-r--r-- | js/ui/controls.js | 12 |
4 files changed, 15 insertions, 15 deletions
@@ -6,11 +6,11 @@ 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; } .ed { color: #fff; } -.focused { text-shadow: 0 3px 3px #fff; border-color: #fff; } +.focused { box-shadow: inset 0 0px 3px #fff; border-color: #fff; } .tool.focused, .ed.focused { color: white; text-decoration: underline; } body.loading { opacity: 0; } body { transition: 0.1s linear; } -body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset 0 0 2px white; } +.focused { box-shadow: inset 1px 0 2px white, inset -1px 0 2px white, inset 0 1px 2px white, inset 0 -1px 2px white; } #shader_textarea { display: none; float: right; font-size:12pt; width: 45%; height: 400px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; outline: 0; border: 1px solid #333; background:#010;} #cursor_input { position: absolute; top: 0; right: 0; width:30px; } </style> @@ -45,16 +45,6 @@ body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset lex.fg = (x+y)%16 lex.char = (y%2) ? ":" : "%" -/* - 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 = ":" - } -*/ </script> <script src="js/util.js"></script> <script src="js/color.js"></script> diff --git a/js/matrix.js b/js/matrix.js index 5cecfed..73c2992 100644 --- a/js/matrix.js +++ b/js/matrix.js @@ -52,8 +52,7 @@ 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.fill(fg,bg) lex.build() }) } diff --git a/js/ui/brush.js b/js/ui/brush.js index 1b01081..3055f54 100644 --- a/js/ui/brush.js +++ b/js/ui/brush.js @@ -1,4 +1,5 @@ var brush = (function(){ + var brush = new Matrix (5, 5, function(x,y){ var lex = new Lex (x,y) lex.build() diff --git a/js/ui/controls.js b/js/ui/controls.js index 6f56727..a37ed16 100644 --- a/js/ui/controls.js +++ b/js/ui/controls.js @@ -1,6 +1,8 @@ var controls = (function(){ var controls = {} + + controls.circle = new Tool (circle_el) controls.circle.use = function(){ brush.generate = controls.circle.generate @@ -26,12 +28,14 @@ var controls = (function(){ brush.generate = controls.square.generate brush.generate() drawing = true + console.log('square') } 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 @@ -40,17 +44,20 @@ var controls = (function(){ } controls.text.generate = function(){ } + controls.clear = new Tool (clear_el) controls.clear.use = function(){ canvas.clear() } + controls.grid = new Tool (grid_el) controls.grid.use = function(){ document.body.classList.toggle('grid') } + controls.shader = new Tool (shader_el) controls.shader.use = function(){ shader_textarea.style.display = "block" @@ -67,6 +74,7 @@ var controls = (function(){ fn && shader.run(canvas) }) + controls.animate = new Tool (animate_checkbox) controls.animate.use = function(){ var state = shader.toggle() @@ -74,11 +82,13 @@ var controls = (function(){ else animate_checkbox.innerHTML = "_ animate" } + controls.width = new Lex (width_el) controls.height = new Lex (height_el) controls.canvas_width = new Lex (canvas_width_el) controls.canvas_height = new Lex (canvas_height_el) - // + + // bind controls.bind = function(){ [controls.width, controls.height, controls.canvas_width, controls.canvas_height].forEach(function(lex){ |