diff options
| author | Julie Lala <jules@okfoc.us> | 2014-11-21 05:57:03 -0500 |
|---|---|---|
| committer | Julie Lala <jules@okfoc.us> | 2014-11-21 05:57:03 -0500 |
| commit | 8cedeefe756a65b79c9b7957a3d4a61240aa0b4b (patch) | |
| tree | a5b33ccf77e0d9c5dfa71dc1b4b407339eb2704d /index.html | |
| parent | f14bd7e76cd622a9b198d56e08c3af68452da587 (diff) | |
minor styling stuff
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 26 |
1 files changed, 19 insertions, 7 deletions
@@ -1,20 +1,22 @@ <link rel="stylesheet" href="css/sally.css" type="text/css" charset="utf-8" /> <link rel="stylesheet" href="css/ak.css" type="text/css" charset="utf-8" /> <style type="text/css"> -#rapper { white-space: pre; font-family: Menlo, monospace; cursor: crosshair; } +.rapper { cursor: crosshair; } 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; } -body.grid #tools_rapper span { border-left: 1px solid #444; } .ed { color: #fff; } .focused { text-shadow: 0 3px 3px #fff; border-color: #fff; } .tool.focused, .ed.focused { color: white; text-decoration: underline; } -body.grid .focused { border: 1px solid white; } +body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset 0 0 2px white; } </style> <body class="grid"> +<div> <div id="canvas_rapper" class="rapper"></div> -<br clear="all"> +</div> +<div style="clear:both"> <div id="palette_rapper" class="rapper"></div> +<div id="brush_rapper" class="rapper"></div> <div id="tools_rapper" class="rapper"> <span id="square_el" class="tool">square</span> <span id="circle_el" class="tool">circle</span> @@ -22,7 +24,7 @@ body.grid .focused { border: 1px solid white; } brush size: <span id="width_el" class="ed">3</span> x <span id="height_el" class="ed">3</span> </div> -<div id="brush_rapper" class="rapper"></div> +</div> <script> var contentType = 'text/plain;charset=utf-8' @@ -130,8 +132,8 @@ function bind () { canvas.forEach(function(lex, x, y){ lex.span.addEventListener('mousedown', function(e){ e.preventDefault() + dragging = true if (drawing) { - dragging = true erasing = e.which == "3" draw(lex, x, y, erasing) } @@ -140,7 +142,13 @@ function bind () { } }) lex.span.addEventListener("mousemove", function(){ - dragging && draw(lex, x, y, erasing) + if (! dragging) return + if (drawing) { + draw(lex, x, y, erasing) + } + else { + lex.focus() + } }) }) palette.forEach(function(lex, x, y){ @@ -217,6 +225,7 @@ function Tool (span) { } Tool.prototype.use = function(){} Tool.prototype.focus = function(){ + focused && focused.blur() current_tool && current_tool.blur() current_tool = this this.span.classList.add('focused') @@ -323,6 +332,9 @@ Lex.prototype.key = function(char, keyCode) { if (this.y < canvas.w-1) { canvas.aa[this.x][this.y+1].focus() } + else { + canvas.focusLex(0, this.x+1) + } } } Lex.prototype.demolish = function(){ |