Use block elems for demo title; make 2593 denser

js/demo.js

@@ -452,6 +452,13 @@ let demoshIndex = {
         '*': 17,
         '#': 24
       }
+      let characters = {
+        ' ': ' ',
+        '.': '░',
+        '-': '▒',
+        '*': '▓',
+        '#': '█'
+      }
       for (let i in splash) {
         if (splash[i].length < 79) splash[i] += ' '.repeat(79 - splash[i].length)
       }
@@ -474,7 +481,9 @@ let demoshIndex = {
         if (splash[y][x] === '@') {
           this.emit('write', '\x1b[48;5;8m\x1b[38;5;255m▄\b')
         } else {
-          this.emit('write', `\x1b[48;5;${231 + levels[splash[y][x]]}m \b`)
+          let level = 231 + levels[splash[y][x]]
+          let character = characters[splash[y][x]]
+          this.emit('write', `\x1b[48;5;${level}m\x1b[38;5;${level}m${character}\b`)
         }
       }
       return new Promise((resolve, reject) => {

js/term_screen.js

@@ -820,14 +820,16 @@ window.TermScreen = class TermScreen {
           dotSize = 1
         } else if (codePoint === 0x2593) {
           dotSpacingX = cellWidth / 4
-          dotSpacingY = cellWidth / 5
+          dotSpacingY = cellWidth / 7
           dotSize = 2
         }
 
         let alignRight = false
         for (let dy = 0; dy < cellHeight; dy += dotSpacingY) {
           for (let dx = 0; dx < cellWidth; dx += dotSpacingX) {
-            ctx.rect(x * cellWidth + (alignRight ? cellWidth - dx - dotSize : dx), y * cellHeight + dy, dotSize, dotSize)
+            // prevent overflow
+            let dotSizeY = Math.min(dotSize, cellHeight - dy)
+            ctx.rect(x * cellWidth + (alignRight ? cellWidth - dx - dotSize : dx), y * cellHeight + dy, dotSize, dotSizeY)
           }
           alignRight = !alignRight
         }