From 0cfb648ac858dfd8d6e1d0a19f854891a056d403 Mon Sep 17 00:00:00 2001
From: cpsdqs <cpsdqs@gmail.com>
Date: Sun, 8 Oct 2017 13:24:19 +0200
Subject: [PATCH] Rename debug_screen to debug, add heartbeat

---
 js/term/connection.js                 |  1 +
 js/term/{debug_screen.js => debug.js} | 21 ++++++++++++++++++---
 js/term/index.js                      |  4 ++--
 sass/pages/_term.scss                 | 26 ++++++++++++++++++++++++++
 4 files changed, 47 insertions(+), 5 deletions(-)
 rename js/term/{debug_screen.js => debug.js} (96%)

diff --git a/js/term/connection.js b/js/term/connection.js
index 4e48d34..d3cdf03 100644
--- a/js/term/connection.js
+++ b/js/term/connection.js
@@ -194,6 +194,7 @@ module.exports = class TermConnection extends EventEmitter {
   }
 
   heartbeat () {
+    this.emit('heartbeat')
     clearTimeout(this.heartbeatTimeout)
     this.heartbeatTimeout = setTimeout(() => this.onHeartbeatFail(), HEARTBEAT_TIME)
   }
diff --git a/js/term/debug_screen.js b/js/term/debug.js
similarity index 96%
rename from js/term/debug_screen.js
rename to js/term/debug.js
index 680690c..fd7f5ae 100644
--- a/js/term/debug_screen.js
+++ b/js/term/debug.js
@@ -1,6 +1,6 @@
 const { mk } = require('../utils')
 
-module.exports = function attachDebugScreen (screen) {
+module.exports = function attachDebugger (screen, connection) {
   const debugCanvas = mk('canvas')
   const ctx = debugCanvas.getContext('2d')
 
@@ -215,17 +215,34 @@ module.exports = function attachDebugScreen (screen) {
   const toolbar = mk('div')
   toolbar.classList.add('debug-toolbar')
   let toolbarAttached = false
+
+  const heartbeat = mk('div')
+  heartbeat.classList.add('heartbeat')
+  heartbeat.textContent = '❤'
+  toolbar.appendChild(heartbeat)
+
   const dataDisplay = mk('div')
   dataDisplay.classList.add('data-display')
   toolbar.appendChild(dataDisplay)
+
   const internalDisplay = mk('div')
   internalDisplay.classList.add('internal-display')
   toolbar.appendChild(internalDisplay)
+
   toolbar.appendChild(drawInfo)
+
   const buttons = mk('div')
   buttons.classList.add('toolbar-buttons')
   toolbar.appendChild(buttons)
 
+  // heartbeat
+  connection.on('heartbeat', () => {
+    heartbeat.classList.remove('beat')
+    window.requestAnimationFrame(() => {
+      heartbeat.classList.add('beat')
+    })
+  })
+
   {
     const redraw = mk('button')
     redraw.textContent = 'Redraw'
@@ -331,8 +348,6 @@ module.exports = function attachDebugScreen (screen) {
           value = true
         }
 
-        if (key === 'color') console.log(value)
-
         if (key === 'bold') attrs.style += 'font-weight:bold;'
         if (key === 'italic') attrs.style += 'font-style:italic;'
         if (key === 'underline') attrs.style += 'text-decoration:underline;'
diff --git a/js/term/index.js b/js/term/index.js
index c6d8d82..0bbabaa 100644
--- a/js/term/index.js
+++ b/js/term/index.js
@@ -6,7 +6,7 @@ const TermConnection = require('./connection')
 const TermInput = require('./input')
 const TermUpload = require('./upload')
 const initSoftKeyboard = require('./soft_keyboard')
-const attachDebugScreen = require('./debug_screen')
+const attachDebugger = require('./debug')
 const initButtons = require('./buttons')
 
 /** Init the terminal sub-module - called from HTML */
@@ -102,7 +102,7 @@ module.exports = function (opts) {
   qs('#screen').appendChild(screen.canvas)
 
   initSoftKeyboard(screen, input)
-  if (attachDebugScreen) attachDebugScreen(screen)
+  if (attachDebugger) attachDebugger(screen, conn)
 
   let fullscreenIcon = {} // dummy
   let isFullscreen = false
diff --git a/sass/pages/_term.scss b/sass/pages/_term.scss
index 61e68f9..4b7bfa7 100644
--- a/sass/pages/_term.scss
+++ b/sass/pages/_term.scss
@@ -118,6 +118,32 @@ body.term {
 		font-family: $screen-stack;
 		font-size: 12px;
 		white-space: normal;
+
+		.heartbeat {
+			float: right;
+			font-family: $font-stack;
+
+			&.beat {
+				animation-name: heartbeat-beat;
+				animation-duration: 2s;
+				animation-fill-mode: forwards;
+
+				@keyframes heartbeat-beat {
+					0% {
+						transform: scale(1);
+						animation-timing-function: ease-out;
+					}
+					5% {
+						transform: scale(1.2);
+						animation-timing-function: linear;
+					}
+					100% {
+						transform: scale(0);
+						opacity: 0;
+					}
+				}
+			}
+		}
 	}
 }