Transparent mode

6 files changed, 18 insertions, 4 deletions

diff --git a/README.md b/README.md
index 45f3513..d9d60d0 100644
--- a/README.md
+++ b/README.md
@@ -90,6 +90,7 @@ You can follow the [guide](GUIDE.md) to get started and play your first sounds.
 - `ctrl+-` Zoom Out.
 - `ctrl+0` Zoom Reset.
 - `tab` Toggle interface.
+- `backquote` Toggle background.
 
 ## Special Operators
 
diff --git a/desktop/main.js b/desktop/main.js
index 320c223..6aebf62 100644
--- a/desktop/main.js
+++ b/desktop/main.js
@@ -14,11 +14,11 @@ app.on('ready', () => {
     minWidth: 320,
     minHeight: 320,
     frame: false,
-    autoHideMenuBar: true,
-    backgroundColor: '#000000',
     resizable: true,
-    autoHideMenuBar: true,
-    icon: __dirname + '/icon.ico'
+    icon: __dirname + '/icon.ico',
+    transparent: true,
+    skipTaskbar: true,
+    autoHideMenuBar: true
   })
 
   app.win.loadURL(`file://${__dirname}/sources/index.html`)
diff --git a/desktop/sources/index.html b/desktop/sources/index.html
index 57e765f..80b8e70 100644
--- a/desktop/sources/index.html
+++ b/desktop/sources/index.html
@@ -56,6 +56,7 @@
       terminal.controller.add("default","View","Zoom Out",() => { terminal.modZoom(-0.25); },"CmdOrCtrl+-")
       terminal.controller.add("default","View","Zoom Reset",() => { terminal.modZoom(1,true); },"CmdOrCtrl+0")
       terminal.controller.add("default","View","Toggle Interface",() => { terminal.toggleInterface(); },"Tab")
+      terminal.controller.add("default","View","Toggle Background",() => { terminal.toggleBackground(); },"`")
 
       terminal.controller.add("default","Theme","Open Theme",() => { terminal.theme.open(); },"CmdOrCtrl+Shift+o")
       terminal.controller.add("default","Theme","Reset Theme",() => { terminal.theme.reset(); },"CmdOrCtrl+Shift+Backspace")
diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css
index 03c57f7..b6851c9 100644
--- a/desktop/sources/links/main.css
+++ b/desktop/sources/links/main.css
@@ -1,3 +1,4 @@
 body { font-family: 'input_mono_regular'; padding:30px; overflow: hidden; -webkit-app-region: drag; transition: background-color 500ms; }
+body.transparent { background:transparent !important; }
 canvas { display: block;white-space: pre;font-size: 11px;line-height: 10px; text-transform: uppercase; width:300px; margin:0px auto; -webkit-app-region: drag; opacity: 0; transition: opacity 1000ms}
 canvas.ready { opacity: 1 }
diff --git a/desktop/sources/scripts/keyboard.js b/desktop/sources/scripts/keyboard.js
index 4f7a0f5..88b1b55 100644
--- a/desktop/sources/scripts/keyboard.js
+++ b/desktop/sources/scripts/keyboard.js
@@ -29,6 +29,7 @@ function Keyboard (terminal) {
     if (event.metaKey) { return }
     if (event.ctrlKey) { return }
 
+    if (event.key === 'Backquote') { terminal.toggleBackground(); return }
     if (event.key === 'Tab') { terminal.toggleInterface(); return }
     if (event.key === 'Enter') { terminal.cursor.toggleMode(1); return }
     if (event.key === 'Backspace' || event.key === '.') { terminal.cursor.erase(); return }
diff --git a/desktop/sources/scripts/terminal.js b/desktop/sources/scripts/terminal.js
index 3188313..a277688 100644
--- a/desktop/sources/scripts/terminal.js
+++ b/desktop/sources/scripts/terminal.js
@@ -138,6 +138,10 @@ function Terminal (tile = { w: 20, h: 30 }) {
     this.showInterface = this.showInterface !== true
   }
 
+  this.toggleBackground = function () {
+    document.body.className = document.body.className === 'transparent' ? '' : 'transparent'
+  }
+
   //
 
   this.isCursor = function (x, y) {
@@ -251,11 +255,17 @@ function Terminal (tile = { w: 20, h: 30 }) {
         ctx.fillRect(x * tile.w, (y) * tile.h, tile.w, tile.h)
         ctx.fillStyle = this.theme.active.f_low
       } else if (styles.isPort === 'haste') { // Haste
+        ctx.fillStyle = this.theme.active.background
+        ctx.fillRect(x * tile.w, (y) * tile.h, tile.w, tile.h)
         ctx.fillStyle = this.theme.active.b_med
       } else {
+        ctx.fillStyle = this.theme.active.background
+        ctx.fillRect(x * tile.w, (y) * tile.h, tile.w, tile.h)
         ctx.fillStyle = this.theme.active.f_high
       }
     } else if (styles.isLocked) {
+      ctx.fillStyle = this.theme.active.background
+      ctx.fillRect(x * tile.w, (y) * tile.h, tile.w, tile.h)
       ctx.fillStyle = this.theme.active.f_med
     } else {
       ctx.fillStyle = this.theme.active.f_low