From ec270c3fdf8447e89fb567a05208063ff2fb6c89 Mon Sep 17 00:00:00 2001 From: cpsdqs Date: Mon, 11 Sep 2017 10:55:20 +0200 Subject: [PATCH] Move screen init to term.js --- build.sh | 4 ++-- jssrc/debug_screen.js | 18 ++++++++--------- jssrc/soft_keyboard.js | 6 +++--- jssrc/term.js | 44 +++++++++++++++++++++++++++++++++++++++++- jssrc/term_screen.js | 29 +--------------------------- 5 files changed, 58 insertions(+), 43 deletions(-) diff --git a/build.sh b/build.sh index 3ce4252..736b231 100755 --- a/build.sh +++ b/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/debug_screen.js + jssrc/soft_keyboard.js echo 'Building CSS...' diff --git a/jssrc/debug_screen.js b/jssrc/debug_screen.js index 71d7466..97e2444 100644 --- a/jssrc/debug_screen.js +++ b/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 cellSize = Screen.getCellSize() + let { width, height, devicePixelRatio } = screen.window + 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 { width: cellWidth, height: cellHeight } = Screen.getCellSize() + let { devicePixelRatio, width, height } = screen.window + let { width: cellWidth, height: cellHeight } = screen.getCellSize() let screenLength = width * height let now = Date.now() diff --git a/jssrc/soft_keyboard.js b/jssrc/soft_keyboard.js index 5ad2708..d1cb0d0 100644 --- a/jssrc/soft_keyboard.js +++ b/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()) }) diff --git a/jssrc/term.js b/jssrc/term.js index 23e2133..de89e05 100644 --- a/jssrc/term.js +++ b/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 } diff --git a/jssrc/term_screen.js b/jssrc/term_screen.js index add499d..d9a8b5c 100644 --- a/jssrc/term_screen.js +++ b/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() -}