Move screen init to term.js

build.sh

@@ -12,9 +12,9 @@ npm run babel -- -o js/app.js --source-maps jssrc/lib \
     jssrc/lang.js \
     jssrc/wifi.js \
     jssrc/term_* \
+    jssrc/debug_screen.js \
     jssrc/term.js \
-    jssrc/soft_keyboard.js \
+    jssrc/soft_keyboard.js
-    jssrc/debug_screen.js
 
 echo 'Building CSS...'
 

jssrc/debug_screen.js

@@ -1,4 +1,4 @@
-if (Screen) {
+window.attachDebugScreen = function (screen) {
   const debugCanvas = mk('canvas')
   const ctx = debugCanvas.getContext('2d')
 
@@ -9,14 +9,14 @@ if (Screen) {
   debugCanvas.style.pointerEvents = 'none'
 
   let addCanvas = function () {
-    if (!debugCanvas.parentNode) qs('#screen').appendChild(debugCanvas)
+    if (!debugCanvas.parentNode) screen.canvas.parentNode.appendChild(debugCanvas)
   }
   let removeCanvas = function () {
-    if (debugCanvas.parentNode) qs('#screen').removeChild(debugCanvas)
+    if (debugCanvas.parentNode) debugCanvas.parentNode.removeChild(debugCanvas)
   }
   let updateCanvasSize = function () {
-    let { width, height, devicePixelRatio } = Screen.window
+    let { width, height, devicePixelRatio } = screen.window
-    let cellSize = Screen.getCellSize()
+    let cellSize = screen.getCellSize()
     debugCanvas.width = width * cellSize.width * devicePixelRatio
     debugCanvas.height = height * cellSize.height * devicePixelRatio
     debugCanvas.style.width = `${width * cellSize.width}px`
@@ -28,14 +28,14 @@ if (Screen) {
 
   let startDrawing
 
-  Screen._debug = {
+  screen._debug = {
     drawStart (reason) {
       lastReason = reason
       startTime = Date.now()
     },
     drawEnd () {
       endTime = Date.now()
-      console.log(`Draw: ${lastReason} (${(endTime - startTime)} ms) with fancy graphics: ${Screen.window.graphics}`)
+      console.log(`Draw: ${lastReason} (${(endTime - startTime)} ms) with fancy graphics: ${screen.window.graphics}`)
       startDrawing()
     },
     setCell (cell, flags) {
@@ -48,8 +48,8 @@ if (Screen) {
   let drawLoop = function () {
     if (isDrawing) requestAnimationFrame(drawLoop)
 
-    let { devicePixelRatio, width, height } = Screen.window
+    let { devicePixelRatio, width, height } = screen.window
-    let { width: cellWidth, height: cellHeight } = Screen.getCellSize()
+    let { width: cellWidth, height: cellHeight } = screen.getCellSize()
     let screenLength = width * height
     let now = Date.now()
 

jssrc/soft_keyboard.js

@@ -7,7 +7,7 @@ $.ready(() => {
   let updateInputPosition = function () {
     if (!keyboardOpen) return
 
-    let [x, y] = Screen.gridToScreen(Screen.cursor.x, Screen.cursor.y)
+    let [x, y] = screen.gridToScreen(screen.cursor.x, screen.cursor.y)
     input.style.transform = `translate(${x}px, ${y}px)`
   }
 
@@ -18,7 +18,7 @@ $.ready(() => {
 
   input.addEventListener('blur', () => (keyboardOpen = false))
 
-  Screen.on('cursor-moved', updateInputPosition)
+  screen.on('cursor-moved', updateInputPosition)
 
   window.kbOpen = function openSoftKeyboard (open) {
     keyboardOpen = open
@@ -88,5 +88,5 @@ $.ready(() => {
     input.value = ''
   })
 
-  Screen.on('open-soft-keyboard', () => input.focus())
+  screen.on('open-soft-keyboard', () => input.focus())
 })

jssrc/term.js

@@ -3,5 +3,47 @@ window.termInit = function (labels, theme) {
   Conn.init()
   Input.init()
   TermUpl.init()
-  Screen.load(labels, theme) // populate labels
+
+  const screen = new window.TermScreen()
+
+  let didNotifyAboutScreen = false
+  Object.defineProperty(window, 'Screen', {
+    get () {
+      if (!didNotifyAboutScreen) {
+        console.warn('Use local variables instead of window.Screen')
+        didNotifyAboutScreen = true
+      }
+      return screen
+    }
+  })
+
+  qs('#screen').appendChild(screen.canvas)
+  screen.load(labels, theme) // load labels and theme
+
+  {
+    let fitScreen = false
+    let fitScreenIfNeeded = function fitScreenIfNeeded () {
+      screen.window.fitIntoWidth = fitScreen ? window.innerWidth - 20 : 0
+      screen.window.fitIntoHeight = fitScreen ? window.innerHeight : 0
+    }
+    fitScreenIfNeeded()
+    window.addEventListener('resize', fitScreenIfNeeded)
+
+    window.toggleFitScreen = function () {
+      fitScreen = !fitScreen
+      const resizeButtonIcon = qs('#resize-button-icon')
+      if (fitScreen) {
+        resizeButtonIcon.classList.remove('icn-resize-small')
+        resizeButtonIcon.classList.add('icn-resize-full')
+      } else {
+        resizeButtonIcon.classList.remove('icn-resize-full')
+        resizeButtonIcon.classList.add('icn-resize-small')
+      }
+      fitScreenIfNeeded()
+    }
+  }
+
+  if (window.attachDebugScreen) window.attachDebugScreen(screen)
+
+  window.screen = screen // for debugging
 }

jssrc/term_screen.js

@@ -68,7 +68,7 @@ for (let gray = 0; gray < 24; gray++) {
   colorTable256.push(`rgb(${value}, ${value}, ${value})`)
 }
 
-class TermScreen {
+window.TermScreen = class TermScreen {
   constructor () {
     this.canvas = mk('canvas')
     this.ctx = this.canvas.getContext('2d')
@@ -1173,30 +1173,3 @@ class TermScreen {
     return character
   }
 }
-
-const Screen = new TermScreen()
-
-Screen.once('load', () => {
-  qs('#screen').appendChild(Screen.canvas)
-})
-
-let fitScreen = false
-function fitScreenIfNeeded () {
-  Screen.window.fitIntoWidth = fitScreen ? window.innerWidth - 20 : 0
-  Screen.window.fitIntoHeight = fitScreen ? window.innerHeight : 0
-}
-fitScreenIfNeeded()
-window.addEventListener('resize', fitScreenIfNeeded)
-
-window.toggleFitScreen = function () {
-  fitScreen = !fitScreen
-  const resizeButtonIcon = qs('#resize-button-icon')
-  if (fitScreen) {
-    resizeButtonIcon.classList.remove('icn-resize-small')
-    resizeButtonIcon.classList.add('icn-resize-full')
-  } else {
-    resizeButtonIcon.classList.remove('icn-resize-full')
-    resizeButtonIcon.classList.add('icn-resize-small')
-  }
-  fitScreenIfNeeded()
-}