diff options
| -rw-r--r-- | css/sally.css | 5 | ||||
| -rw-r--r-- | js/color.js | 6 | ||||
| -rw-r--r-- | js/ui/palette.js | 8 |
3 files changed, 16 insertions, 3 deletions
diff --git a/css/sally.css b/css/sally.css index 3d80ba9..951243c 100644 --- a/css/sally.css +++ b/css/sally.css @@ -88,6 +88,11 @@ textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color: .bucket #canvas_rapper { cursor: url(../img/bucket.png) 3 15, auto; } +#brush_rapper { + border: 1px solid; + display: inline-block; + margin-bottom: 13px; +} .close { position: absolute; top: 20px; right: 20px; z-index: 2; padding: 10px; background: black; cursor: pointer; } #webcam_rapper { display: none; position: absolute; top: 0px; left: 0px; width:100%;height:100%; box-sizing:border-box; border: 40px solid rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5); } #webcam_iframe { position: absolute; top: 0px; left: 0px; width:100%;height:100%; background-color: rgba(0,0,0,0.5); border: 0; } diff --git a/js/color.js b/js/color.js index f3826e8..56c0f54 100644 --- a/js/color.js +++ b/js/color.js @@ -1,4 +1,6 @@ +var fillColor = 1 // black + var color_names = ("white black dark-blue green red dark-red purple orange " + "yellow lime teal cyan blue magenta dark-gray light-gray").split(" "); @@ -54,3 +56,7 @@ var css_lookup = { 'rgb(127, 127, 127)': 'O', 'rgb(210, 210, 210)': 'P', }; +var css_reverse_lookup = {} +Object.keys(css_lookup).forEach(function(color){ + css_reverse_lookup[ css_lookup[color].charCodeAt(0) - 65 ] = color +}) diff --git a/js/ui/palette.js b/js/ui/palette.js index 63ea20e..063e4aa 100644 --- a/js/ui/palette.js +++ b/js/ui/palette.js @@ -1,5 +1,3 @@ -var fillColor = 1 // black - var palette = (function(){ var palette_index = localStorage.getItem("ascii.palette") || 1 @@ -49,6 +47,7 @@ var palette = (function(){ palette.repaint() return } + if (e.ctrlKey || e.which == 3) return brush.fg = lex.fg brush.bg = lex.bg brush.char = lex.char @@ -69,12 +68,15 @@ var palette = (function(){ brush.char = lex.char brush.opacity = lex.opacity brush.generate() + brush_rapper.style.borderColor = css_reverse_lookup[fillColor] return }) }) } - + + brush_rapper.style.borderColor = css_reverse_lookup[fillColor] + return palette })() |