diff options
| -rw-r--r-- | css/sally.css | 4 | ||||
| -rw-r--r-- | index.html | 16 | ||||
| -rw-r--r-- | js/app.js | 2 | ||||
| -rw-r--r-- | js/lex.js | 12 | ||||
| -rw-r--r-- | js/tool.js | 10 | ||||
| -rw-r--r-- | js/ui/brush.js | 4 | ||||
| -rw-r--r-- | js/ui/controls.js | 66 |
7 files changed, 81 insertions, 33 deletions
diff --git a/css/sally.css b/css/sally.css index 515442a..6fdbe55 100644 --- a/css/sally.css +++ b/css/sally.css @@ -55,9 +55,9 @@ body.grid div { border-top: 1px solid #444; border-left: 1px solid #444; } body.loading { opacity: 0; } body { transition: 0.1s linear; } .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; } #import_textarea { font-size: 9pt; } -textarea { font-size:12pt; width: 45%; height: 300px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; outline: 0; border: 1px solid #333; background:#010;} +textarea { font-size:12pt; width: 42%; height: 300px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; outline: 0; border: 1px solid #333; background:#010;} +#shader_rapper { display: none; } #import_rapper { display: none; } #cursor_input { position: absolute; top: 0; right: 0; width:30px; opacity: 0; } .selector_el { @@ -18,17 +18,14 @@ <span id="fill_el" class="tool">fill</span><br> <br> <span id="clear_el" class="tool">clear</span><br> - <span id="grid_el" class="tool">grid</span><br> + <span id="grid_el" class="tool">_ grid</span><br> <br> brush size: <span id="width_el" class="ed">5</span> x <span id="height_el" class="ed">5</span><br> canvas size: <span id="canvas_width_el" class="ed">80</span> x <span id="canvas_height_el" class="ed">24</span><br> <br> - <span id="animate_checkbox" class="tool">_ animate</span><br> -<!-- - <span id="fg_checkbox" class="tool">_ fg</span><br> - <span id="bg_checkbox" class="tool">_ bg</span><br> - <span id="char_checkbox" class="tool">_ char</span><br> - --> + <span id="fg_checkbox" class="tool">x fg</span><br> + <span id="bg_checkbox" class="tool">x bg</span><br> + <span id="char_checkbox" class="tool">x char</span><br> </div> <div id="textarea_mode"> @@ -49,7 +46,10 @@ <textarea id="import_textarea"></textarea> </div> - <textarea id="shader_textarea"></textarea> + <div id="shader_rapper"> + <span id="animate_checkbox" class="tool">_ animate</span><br> + <textarea id="shader_textarea"></textarea> + </div> </div> </div> @@ -28,7 +28,7 @@ function build () { brush.generate() brush.build() - controls.grid.use() + // controls.grid.use() } function bind () { canvas.bind() @@ -17,7 +17,7 @@ Lex.prototype.build = function(){ this.span.innerHTML = this.html() } Lex.prototype.css = function(){ - if (this.opacity == 0) return "fabb" + if (this.opacity == 0 && ! this.char) return "fabb" return "f" + letters[mod(this.fg,16)] + "b" + letters[mod(this.bg,16)] } Lex.prototype.html = function(){ @@ -57,6 +57,14 @@ Lex.prototype.clone = function (lex){ this.opacity = lex.opacity this.build() } +Lex.prototype.paint = function (lex){ + if (lex.opacity == 0) return + if (brush.draw_fg) this.fg = lex.fg + if (brush.draw_bg) this.bg = lex.bg + if (brush.draw_char) this.char = lex.char + this.opacity = 1 + this.build() +} Lex.prototype.copy = function () { var lex = new Lex (0,0) lex.clone(this) @@ -108,6 +116,6 @@ Lex.prototype.demolish = function(){ Lex.prototype.key = function(char, keyCode) { if (! char) { return } this.char = char - this.fg = brush.bg + this.fg = brush.fg this.build() } @@ -21,4 +21,14 @@ var Tool = Model({ }) var Checkbox = Tool.extend({ + init: function (span){ + this.__init(span) + var state = this.name[0] == "x" + this.name = this.name.replace(/^[x_] /,"") + this.update(state) + }, + update: function(state){ + if (state) this.el.innerHTML = "x " + this.name + else this.el.innerHTML = "_ " + this.name + } }) diff --git a/js/ui/brush.js b/js/ui/brush.js index 50f6e07..9bc80a5 100644 --- a/js/ui/brush.js +++ b/js/ui/brush.js @@ -73,6 +73,10 @@ var brush = (function(){ brush.bg = 1 brush.opacity = 1 + brush.draw_fg = true + brush.draw_bg = true + brush.draw_char = true + return brush })()
\ No newline at end of file diff --git a/js/ui/controls.js b/js/ui/controls.js index 81403db..6f0fb91 100644 --- a/js/ui/controls.js +++ b/js/ui/controls.js @@ -1,7 +1,7 @@ var controls = (function(){ var controls = {} - + controls.circle = new Tool (circle_el) controls.circle.use = function(){ brush.generate = controls.circle.generate @@ -69,15 +69,18 @@ var controls = (function(){ canvas.clear() } - controls.grid = new Tool (grid_el) + controls.grid = new Checkbox (grid_el) controls.grid.use = function(){ document.body.classList.toggle('grid') + this.update( document.body.classList.contains("grid") ) } controls.grid.show = function(){ document.body.classList.add('grid') + this.update( true ) } controls.grid.hide = function(){ document.body.classList.remove('grid') + this.update( false ) } ClipboardTool = Tool.extend({ @@ -86,43 +89,63 @@ var controls = (function(){ clipboard.hide() } }) + controls.save = new ClipboardTool (save_el) + controls.save.use = function(){ + clipboard.show() + clipboard.export_mode() + } + controls.load = new ClipboardTool (load_el) + controls.load.use = function(){ + clipboard.show() + clipboard.import_mode() + } + + // + ShaderTool = Tool.extend({ use: function(){ - shader_textarea.style.display = "block" + shader_rapper.style.display = "block" shader_textarea.focus() }, blur: function(){ this.__blur() - shader_textarea.style.display = "none" + shader_rapper.style.display = "none" } }) - controls.shader = new ShaderTool (shader_el) - shader_textarea.value = demo_shader.innerHTML shader_textarea.addEventListener("input", function(){ var fn = shader.build(shader_textarea.value) fn && shader.run(canvas) }) + controls.animate = new Checkbox (animate_checkbox) + controls.animate.use = function(state){ + var state = shader.toggle() + this.update(state) + } + + // - controls.save = new ClipboardTool (save_el) - controls.save.use = function(){ - clipboard.show() - clipboard.export_mode() + controls.fg = new Checkbox (fg_checkbox) + controls.fg.use = function(state){ + brush.draw_fg = state || ! brush.draw_fg + this.update(brush.draw_fg) } - controls.load = new ClipboardTool (load_el) - controls.load.use = function(){ - clipboard.show() - clipboard.import_mode() + + controls.bg = new Checkbox (bg_checkbox) + controls.bg.use = function(state){ + brush.draw_bg = state || ! brush.draw_bg + this.update(brush.draw_bg) } - - controls.animate = new Tool (animate_checkbox) - controls.animate.use = function(){ - var state = shader.toggle() - if (state) this.el.innerHTML = "x animate" - else this.el.innerHTML = "_ animate" + + controls.char = new Checkbox (char_checkbox) + controls.char.use = function(state){ + brush.draw_char = state || ! brush.draw_char + this.update(brush.draw_char) } + // + controls.width = new Lex (width_el) controls.height = new Lex (height_el) controls.canvas_width = new Lex (canvas_width_el) @@ -150,6 +173,9 @@ var controls = (function(){ controls.select, controls.clear, controls.grid, + controls.fg, + controls.bg, + controls.char, controls.shader, controls.animate, controls.save, |