move attr bits to own file, make Load Failed text look nicer

js/appcommon.js

@@ -169,6 +169,7 @@ $.ready(function () {
           'Server connection failed! Trying again' +
           '<span class="anim-dots" style="width:1.5em;text-align:left;display:inline-block">.</span>'
         qs('#screen').appendChild(bnr)
+        qs('#screen').classList.add('failed')
         showPage()
       }
     }, 2000)

js/term/screen_attr_bits.js

@@ -0,0 +1,15 @@
+// Bits in the cell attribs word
+
+/* eslint-disable no-multi-spaces */
+exports.ATTR_FG        = (1 << 0)  // 1 if not using default background color (ignore cell bg) - color extension bit
+exports.ATTR_BG        = (1 << 1)  // 1 if not using default foreground color (ignore cell fg) - color extension bit
+exports.ATTR_BOLD      = (1 << 2)  // Bold font
+exports.ATTR_UNDERLINE = (1 << 3)  // Underline decoration
+exports.ATTR_INVERSE   = (1 << 4)  // Invert colors - this is useful so we can clear then with SGR manipulation commands
+exports.ATTR_BLINK     = (1 << 5)  // Blinking
+exports.ATTR_ITALIC    = (1 << 6)  // Italic font
+exports.ATTR_STRIKE    = (1 << 7)  // Strike-through decoration
+exports.ATTR_OVERLINE  = (1 << 8)  // Over-line decoration
+exports.ATTR_FAINT     = (1 << 9)  // Faint foreground color (reduced alpha)
+exports.ATTR_FRAKTUR   = (1 << 10) // Fraktur font (unicode substitution)
+/* eslint-enable no-multi-spaces */

js/term/screen_parser.js

@@ -1,6 +1,17 @@
 const $ = require('../lib/chibi')
 const { qs } = require('../utils')
 
+const {
+  ATTR_FG,
+  ATTR_BG,
+  ATTR_BOLD,
+  ATTR_UNDERLINE,
+  ATTR_BLINK,
+  ATTR_STRIKE,
+  ATTR_OVERLINE,
+  ATTR_FAINT
+} = require('./screen_attr_bits')
+
 // constants for decoding the update blob
 const SEQ_SKIP = 1
 const SEQ_REPEAT = 2
@@ -39,17 +50,6 @@ const OPT_CRLF_MODE        = (1 << 12)
 const OPT_BRACKETED_PASTE  = (1 << 13)
 const OPT_REVERSE_VIDEO    = (1 << 14)
 
-const ATTR_FG        = (1 << 0)  // 1 if not using default background color (ignore cell bg) - color extension bit
-const ATTR_BG        = (1 << 1)  // 1 if not using default foreground color (ignore cell fg) - color extension bit
-const ATTR_BOLD      = (1 << 2)  // Bold font
-const ATTR_UNDERLINE = (1 << 3)  // Underline decoration
-const ATTR_INVERSE   = (1 << 4)  // Invert colors - this is useful so we can clear then with SGR manipulation commands
-const ATTR_BLINK     = (1 << 5)  // Blinking
-const ATTR_ITALIC    = (1 << 6)  // Italic font
-const ATTR_STRIKE    = (1 << 7)  // Strike-through decoration
-const ATTR_OVERLINE  = (1 << 8)  // Over-line decoration
-const ATTR_FAINT     = (1 << 9)  // Faint foreground color (reduced alpha)
-const ATTR_FRAKTUR   = (1 << 10) // Fraktur font (unicode substitution)
 /* eslint-enable no-multi-spaces */
 
 module.exports = class ScreenParser {
@@ -65,7 +65,9 @@ module.exports = class ScreenParser {
    */
   hideLoadFailedMsg () {
     if (!this.contentLoaded) {
+      let scr = qs('#screen')
       let errmsg = qs('#load-failed')
+      if (scr) scr.classList.remove('failed')
       if (errmsg) errmsg.parentNode.removeChild(errmsg)
       this.contentLoaded = true
     }

js/term/screen_renderer.js

@@ -1,4 +1,22 @@
-const { themes, buildColorTable, SELECTION_FG, SELECTION_BG } = require('./themes')
+const {
+  themes,
+  buildColorTable,
+  SELECTION_FG, SELECTION_BG
+} = require('./themes')
+
+const {
+  ATTR_FG,
+  ATTR_BG,
+  ATTR_BOLD,
+  ATTR_UNDERLINE,
+  ATTR_INVERSE,
+  ATTR_BLINK,
+  ATTR_ITALIC,
+  ATTR_STRIKE,
+  ATTR_OVERLINE,
+  ATTR_FAINT,
+  ATTR_FRAKTUR
+} = require('./screen_attr_bits')
 
 // Some non-bold Fraktur symbols are outside the contiguous block
 const frakturExceptions = {
@@ -9,21 +27,6 @@ const frakturExceptions = {
   'Z': '\u2128'
 }
 
-// TODO do not repeat - this is also defined in screen_parser ...
-/* eslint-disable no-multi-spaces */
-const ATTR_FG        = (1 << 0)  // 1 if not using default background color (ignore cell bg) - color extension bit
-const ATTR_BG        = (1 << 1)  // 1 if not using default foreground color (ignore cell fg) - color extension bit
-const ATTR_BOLD      = (1 << 2)  // Bold font
-const ATTR_UNDERLINE = (1 << 3)  // Underline decoration
-const ATTR_INVERSE   = (1 << 4)  // Invert colors - this is useful so we can clear then with SGR manipulation commands
-const ATTR_BLINK     = (1 << 5)  // Blinking
-const ATTR_ITALIC    = (1 << 6)  // Italic font
-const ATTR_STRIKE    = (1 << 7)  // Strike-through decoration
-const ATTR_OVERLINE  = (1 << 8)  // Over-line decoration
-const ATTR_FAINT     = (1 << 9)  // Faint foreground color (reduced alpha)
-const ATTR_FRAKTUR   = (1 << 10) // Fraktur font (unicode substitution)
-/* eslint-enable no-multi-spaces */
-
 module.exports = class ScreenRenderer {
   constructor (screen) {
     this.screen = screen

sass/pages/_term.scss

@@ -140,7 +140,13 @@ body.term {
 	color: red;
 	font-size: 18px;
 	font-weight: bold;
-	margin: 10px 5px 14px 5px;
+	margin: 20px 15px;
+}
+
+#screen.failed {
+	canvas, .screen-margin {
+		display: none;
+	}
 }
 
 #term-nav {