Added better default themes

3 files changed, 77 insertions, 70 deletions

diff --git a/desktop/sources/index.html b/desktop/sources/index.html
index 4d1dd7e..c3ba481 100644
--- a/desktop/sources/index.html
+++ b/desktop/sources/index.html
@@ -53,10 +53,9 @@
       terminal.controller.add("default","Program","Incr. Row",() => { terminal.modGrid(0,1); },"}")
       terminal.controller.add("default","Program","Decr. Row",() => { terminal.modGrid(0,-1); },"{")
 
-      terminal.controller.add("default","Theme","Noir",() => { terminal.theme.noir(); },"CmdOrCtrl+Shift+1")
-      terminal.controller.add("default","Theme","Pale",() => { terminal.theme.pale(); },"CmdOrCtrl+Shift+2")
-      terminal.controller.add("default","Theme","Invert",() => { terminal.theme.invert(); },"CmdOrCtrl+Shift+I")
-      terminal.controller.add("default","Theme","Install",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes'); })
+      terminal.controller.add("default","Theme","Default Theme",() => { terminal.theme.noir(); },"CmdOrCtrl+Shift+1")
+      terminal.controller.add("default","Theme","Light Theme",() => { terminal.theme.pale(); },"CmdOrCtrl+Shift+2")
+      terminal.controller.add("default","Theme","Get More..",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes'); })
 
       terminal.controller.commit()
       terminal.start()
diff --git a/desktop/sources/scripts/lib/theme.js b/desktop/sources/scripts/lib/theme.js
index 0270723..9b8ac21 100644
--- a/desktop/sources/scripts/lib/theme.js
+++ b/desktop/sources/scripts/lib/theme.js
@@ -1,20 +1,14 @@
 'use strict'
 
-function Theme (default_theme = { background: '#222', f_high: '#fff', f_med: '#777', f_low: '#444', f_inv: '#fff', b_high: '#000', b_med: '#aaa', b_low: '#000', b_inv: '#000' }) {
+function Theme (noir, pale) {
   const themer = this
 
+  this.collection = { noir: noir, pale: pale }
+  this.active = this.collection.noir
+
   this.el = document.createElement('style')
   this.el.type = 'text/css'
 
-  this.callback
-  this.active
-
-  this.collection = {
-    default: default_theme,
-    noir: { background: '#222', f_high: '#fff', f_med: '#777', f_low: '#444', f_inv: '#fff', b_high: '#000', b_med: '#aaa', b_low: '#000', b_inv: '#000' },
-    pale: { background: '#e1e1e1', f_high: '#000', f_med: '#777', f_low: '#aaa', f_inv: '#000', b_high: '#000', b_med: '#444', b_low: '#ccc', b_inv: '#fff' }
-  }
-
   this.install = function (host = document.body, callback) {
     console.log('Theme', 'Installing..')
     host.appendChild(this.el)
@@ -23,74 +17,46 @@ function Theme (default_theme = { background: '#222', f_high: '#fff', f_med: '#7
 
   this.start = function () {
     console.log('Theme', 'Starting..')
-    const storage = is_json(localStorage.theme) ? JSON.parse(localStorage.theme) : this.collection.default
-    this.load(!storage.background ? this.collection.default : storage)
+    if (isJson(localStorage.theme)) {
+      const storage = JSON.parse(localStorage.theme)
+      if (validate(storage)) {
+        console.log('Theme', 'Found theme in localStorage!')
+        this.load(storage)
+        return
+      }
+    }
+    this.load(this.collection.noir)
   }
 
-  this.save = function (theme) {
-    console.log('Theme', 'Saving..')
-    this.active = theme
+  this.load = function (data) {
+    const theme = parse(data)
+    if (!validate(theme)) { console.warn('Theme', 'Not a theme', theme); return }
+    console.log('Theme', `Loading theme with background ${theme.background}.`)
+    this.el.innerHTML = `:root { --background: ${theme.background}; --f_high: ${theme.f_high}; --f_med: ${theme.f_med}; --f_low: ${theme.f_low}; --f_inv: ${theme.f_inv}; --b_high: ${theme.b_high}; --b_med: ${theme.b_med}; --b_low: ${theme.b_low}; --b_inv: ${theme.b_inv}; }`
     localStorage.setItem('theme', JSON.stringify(theme))
-  }
-
-  this.load = function (theme, fall_back = this.collection.noir) {
-    if (!theme || !theme.background) { console.warn('Theme', 'Not a theme', theme); return }
-
-    this.save(theme)
-    this.apply(theme)
-
+    this.active = theme
     if (this.callback) {
       this.callback()
     }
   }
 
-  this.apply = function (theme) {
-    this.el.innerHTML = `
-    :root { --background: ${theme.background}; --f_high: ${theme.f_high}; --f_med: ${theme.f_med}; --f_low: ${theme.f_low}; --f_inv: ${theme.f_inv}; --b_high: ${theme.b_high}; --b_med: ${theme.b_med}; --b_low: ${theme.b_low}; --b_inv: ${theme.b_inv}; }`
+  this.reset = function () {
+    this.load(this.collection.noir)
   }
 
-  this.parse = function (any) {
-    if (any && any.background) { return any } else if (any && any.data) { return any.data } else if (any && is_json(any)) { return JSON.parse(any) } else if (any && is_html(any)) { return this.extract(any) }
-
+  function parse (any) {
+    if (any && any.background) { return any } else if (any && any.data) { return any.data } else if (any && isJson(any)) { return JSON.parse(any) } else if (any && isHtml(any)) { return extract(any) }
     return null
   }
 
-  this.extract = function (text) {
-    const svg = new DOMParser().parseFromString(text, 'text/xml')
-
-    try {
-      return {
-        'background': svg.getElementById('background').getAttribute('fill'),
-        'f_high': svg.getElementById('f_high').getAttribute('fill'),
-        'f_med': svg.getElementById('f_med').getAttribute('fill'),
-        'f_low': svg.getElementById('f_low').getAttribute('fill'),
-        'f_inv': svg.getElementById('f_inv').getAttribute('fill'),
-        'b_high': svg.getElementById('b_high').getAttribute('fill'),
-        'b_med': svg.getElementById('b_med').getAttribute('fill'),
-        'b_low': svg.getElementById('b_low').getAttribute('fill'),
-        'b_inv': svg.getElementById('b_inv').getAttribute('fill')
-      }
-    } catch (err) {
-      console.warn('Theme', 'Incomplete SVG Theme', err)
-    }
-  }
-
-  this.reset = function () {
-    this.load(this.collection.default)
-  }
-
   // Defaults
 
-  this.pale = function () {
-    this.load(this.collection.pale)
-  }
-
   this.noir = function () {
     this.load(this.collection.noir)
   }
 
-  this.invert = function () {
-    this.load(this.active.background === this.collection.noir.background ? this.collection.pale : this.collection.noir)
+  this.pale = function () {
+    this.load(this.collection.pale)
   }
 
   // Drag
@@ -104,15 +70,12 @@ function Theme (default_theme = { background: '#222', f_high: '#fff', f_med: '#7
   this.drop = function (e) {
     e.preventDefault()
     e.stopPropagation()
-
     const file = e.dataTransfer.files[0]
-
     if (!file || !file.name) { console.warn('Theme', 'Unnamed file.'); return }
     if (file.name.indexOf('.thm') < 0 && file.name.indexOf('.svg') < 0) { console.warn('Theme', 'Skipped, not a theme'); return }
-
     const reader = new FileReader()
     reader.onload = function (e) {
-      themer.load(themer.parse(e.target.result))
+      themer.load(e.target.result)
     }
     reader.readAsText(file)
   }
@@ -120,6 +83,46 @@ function Theme (default_theme = { background: '#222', f_high: '#fff', f_med: '#7
   window.addEventListener('dragover', this.drag)
   window.addEventListener('drop', this.drop)
 
-  function is_json (text) { try { JSON.parse(text); return true } catch (error) { return false } }
-  function is_html (text) { try { new DOMParser().parseFromString(text, 'text/xml'); return true } catch (error) { return false } }
+  // Helpers
+
+  function validate (json) {
+    if (!json) { return false }
+    if (!json.background) { return false }
+    if (!json.f_high) { return false }
+    if (!json.f_med) { return false }
+    if (!json.f_low) { return false }
+    if (!json.f_inv) { return false }
+    if (!json.b_high) { return false }
+    if (!json.b_med) { return false }
+    if (!json.b_low) { return false }
+    if (!json.b_inv) { return false }
+    return true
+  }
+
+  function extract (text) {
+    const svg = new DOMParser().parseFromString(text, 'text/xml')
+    try {
+      return {
+        'background': svg.getElementById('background').getAttribute('fill'),
+        'f_high': svg.getElementById('f_high').getAttribute('fill'),
+        'f_med': svg.getElementById('f_med').getAttribute('fill'),
+        'f_low': svg.getElementById('f_low').getAttribute('fill'),
+        'f_inv': svg.getElementById('f_inv').getAttribute('fill'),
+        'b_high': svg.getElementById('b_high').getAttribute('fill'),
+        'b_med': svg.getElementById('b_med').getAttribute('fill'),
+        'b_low': svg.getElementById('b_low').getAttribute('fill'),
+        'b_inv': svg.getElementById('b_inv').getAttribute('fill')
+      }
+    } catch (err) {
+      console.warn('Theme', 'Incomplete SVG Theme', err)
+    }
+  }
+
+  function isJson (text) {
+    try { JSON.parse(text); return true } catch (error) { return false }
+  }
+
+  function isHtml (text) {
+    try { new DOMParser().parseFromString(text, 'text/xml'); return true } catch (error) { return false }
+  }
 }
diff --git a/desktop/sources/scripts/terminal.js b/desktop/sources/scripts/terminal.js
index d1de96f..06fb026 100644
--- a/desktop/sources/scripts/terminal.js
+++ b/desktop/sources/scripts/terminal.js
@@ -9,7 +9,12 @@ function Terminal (orca, tile = { w: 20, h: 30 }) {
   this.cursor = new Cursor(orca, this)
   this.source = new Source(orca, this)
   this.controller = new Controller()
-  this.theme = new Theme({ background: '#111111', f_high: '#ffffff', f_med: '#777777', f_low: '#333333', f_inv: '#000000', b_high: '#ffb545', b_med: '#72dec2', b_low: '#444444', b_inv: '#ffffff' })
+
+  // Themes
+  const noir = { background: '#111111', f_high: '#ffffff', f_med: '#777777', f_low: '#333333', f_inv: '#000000', b_high: '#ffb545', b_med: '#72dec2', b_low: '#444444', b_inv: '#ffffff' }
+  const pale = { background: '#efefef', f_high: '#aaaaaa', f_med: '#333333', f_low: '#ffffff', f_inv: '#000000', b_high: '#72dec2', b_med: '#000000', b_low: '#777777', b_inv: '#ffb545' }
+
+  this.theme = new Theme(noir, pale)
 
   this.el = document.createElement('canvas')
   this.size = { width: tile.w * orca.w, height: tile.h * orca.h + (tile.h * 3), ratio: 0.5, grid: { w: 8, h: 8 } }