keep lex css focus when building (eg try backspace in canvas or pressing up on brush size control)

1 files changed, 11 insertions, 2 deletions

diff --git a/js/lex.js b/js/lex.js
index ff50a03..8911677 100644
--- a/js/lex.js
+++ b/js/lex.js
@@ -11,14 +11,21 @@ function Lex (x,y) {
   this.bg = colors.black
   this.char = " "
   this.opacity = 1
+  this.focused = false
 }
 Lex.prototype.build = function(){
   this.span.className = this.css()
   this.span.innerHTML = this.html()
 }
 Lex.prototype.css = function(){
-  if (this.opacity == 0) return "transparent f" + color_alphabet[mod(this.fg,16)]
-  return "f" + color_alphabet[mod(this.fg,16)] + "b" + color_alphabet[mod(this.bg,16)]
+   return (
+    this.focused ?
+      "focused " : ""
+  ) + (
+    this.opacity === 0 ?
+      "transparent f" + color_alphabet[mod(this.fg,16)] :
+      "f" + color_alphabet[mod(this.fg,16)] + "b" + color_alphabet[mod(this.bg,16)]
+  )
 }
 Lex.prototype.html = function(){
   return this.char == " " ? " " : this.char || " "
@@ -107,10 +114,12 @@ Lex.prototype.isClear = function(){
 Lex.prototype.focus = function(){
   if (focused) focused.blur()
   this.span.classList.add('focused')
+  this.focused = true
   focused = this
 }
 Lex.prototype.blur = function(){
   this.span.classList.remove('focused')
+  this.focused = false
   focused = null
   this.onBlur && this.onBlur()
 }