From 8742548eaa12db63149f4453d9a66e722caf6c73 Mon Sep 17 00:00:00 2001
From: neauoire <aliceffekt@gmail.com>
Date: Tue, 24 Mar 2020 16:42:53 +0900
Subject: [PATCH] *

---
 debug.html           | 32 ++++++++++++++++++++++++
 index.html           | 58 +++++++++++++++++++++++++++++++++++++-------
 links/main.css       | 15 +++++++++++-
 push.sh              | 11 +++++----
 scripts/client.js    | 12 ++++++---
 scripts/lib/acels.js | 41 ++++++++++++++++++++++++++-----
 scripts/lib/build.js | 35 +++++++++++++++++++++++---
 7 files changed, 177 insertions(+), 27 deletions(-)
 create mode 100644 debug.html
diff --git a/debug.html b/debug.html
new file mode 100644
index 0000000..a542bd5
--- /dev/null
+++ b/debug.html
@@ -0,0 +1,32 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ronin</title>
+    <link rel="stylesheet" type="text/css" href="./links/main.css"/>
+<link rel="stylesheet" type="text/css" href="./links/theme.css"/>
+
+    <script type="text/javascript" src="./scripts/lib/acels.js"></script>
+<script type="text/javascript" src="./scripts/lib/lisp.js"></script>
+<script type="text/javascript" src="./scripts/lib/source.js"></script>
+<script type="text/javascript" src="./scripts/lib/theme.js"></script>
+
+    <script type="text/javascript" src="./scripts/client.js"></script>
+<script type="text/javascript" src="./scripts/commander.js"></script>
+<script type="text/javascript" src="./scripts/library.js"></script>
+<script type="text/javascript" src="./scripts/surface.js"></script>
+
+  </head>
+  <body>
+    <script>
+      const client = new Client()
+      client.install(document.body)
+      window.addEventListener('load', () => { 
+        client.start()
+      })
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 22d3477..191a08d 100644
--- a/index.html
+++ b/index.html
@@ -10,15 +10,38 @@
     <script>
 'use strict'
 function Acels (client) {
+  this.el = document.createElement('ul')
+  this.el.id = 'acels'
+  this.order = []
   this.all = {}
   this.roles = {}
   this.pipe = null
-  this.install = (host = window) => {
-    host.addEventListener('keydown', this.onKeyDown, false)
-    host.addEventListener('keyup', this.onKeyUp, false)
+  this.install = (host = document.body) => {
+    window.addEventListener('keydown', this.onKeyDown, false)
+    window.addEventListener('keyup', this.onKeyUp, false)
+    host.appendChild(this.el)
+  }
+  this.start = () => {
+    const cats = this.sort()
+    for (const cat of this.order) {
+      const main = document.createElement('li')
+      const head = document.createElement('a')
+      head.innerText = cat
+      const subs = document.createElement('ul')
+      for (const item of cats[cat]) {
+        const option = document.createElement('li')
+        option.onclick = item.downfn
+        option.innerHTML = item.accelerator ? `${item.name} <i>${item.accelerator.replace('CmdOrCtrl+', '^')}</i>` : `${item.name}`
+        subs.appendChild(option)
+      }
+      main.appendChild(head)
+      main.appendChild(subs)
+      this.el.appendChild(main)
+    }
   }
   this.set = (cat, name, accelerator, downfn, upfn) => {
     if (this.all[accelerator]) { console.warn('Acels', `Trying to overwrite ${this.all[accelerator].name}, with ${name}.`) }
+    if (this.order.indexOf(cat) < 0) { this.order.push(cat) }
     this.all[accelerator] = { cat, name, downfn, upfn, accelerator }
   }
   this.add = (cat, role) => {
@@ -51,7 +74,7 @@ function Acels (client) {
     }
     return accelerator
   }
-  this.pipe = (obj) => {
+  this.route = (obj) => {
     this.pipe = obj
   }
   this.onKeyDown = (e) => {
@@ -80,13 +103,16 @@ function Acels (client) {
   this.toString = () => {
     const cats = this.sort()
     let text = ''
-    for (const cat in cats) {
+    for (const cat of this.order) {
       for (const item of cats[cat]) {
-        text += item.accelerator ? `${cat}: ${item.name} | ${item.accelerator}\n` : ''
+        text += item.accelerator ? `${cat.padEnd(8, ' ')} ${item.name.padEnd(16, ' ')} ${item.accelerator.replace('CmdOrCtrl+', '^')}\n` : ''
       }
     }
     return text.trim()
   }
+  this.toggle = () => {
+    this.el.className = this.el.className === 'hidden' ? '' : 'hidden'
+  }
 }
 'use strict'
 function Lisp (lib = {}) {
@@ -502,9 +528,13 @@ function Client () {
     this.surface.install(this._wrapper)
     this.el.appendChild(this._wrapper)
     host.appendChild(this.el)
-    this.theme.install()
+    this.theme.install(host)
+    this.acels.install(host)
     window.addEventListener('dragover', this.onDrag)
     window.addEventListener('drop', this.onDrop)
+    this.acels.set('∷', 'Toggle Menubar', 'Tab', () => { this.acels.toggle() })
+    this.acels.set('∷', 'Open Theme', 'CmdOrCtrl+Shift+O', () => { this.theme.open() })
+    this.acels.set('∷', 'Reset Theme', 'CmdOrCtrl+Backspace', () => { this.theme.reset() })
     this.acels.set('File', 'New', 'CmdOrCtrl+N', () => { this.source.new(); this.surface.clear(); this.commander.clear() })
     this.acels.set('File', 'Save', 'CmdOrCtrl+S', () => { this.source.write('ronin', 'lisp', this.commander._input.value, 'text/plain') })
     this.acels.set('File', 'Export Image', 'CmdOrCtrl+E', () => { this.source.write('ronin', 'png', this.surface.el.toDataURL('image/png', 1.0), 'image/png') })
@@ -522,13 +552,13 @@ function Client () {
     this.acels.set('Project', 'Reload Run', 'CmdOrCtrl+Shift+R', () => { this.source.revert(); this.commander.run() })
     this.acels.set('Project', 'Re-Indent', 'CmdOrCtrl+Shift+I', () => { this.commander.reindent() })
     this.acels.set('Project', 'Clean', 'Escape', () => { this.commander.cleanup() })
-    this.acels.install(window)
-    this.acels.pipe(this)
+    this.acels.route(this)
   }
   this.start = function () {
     console.log('Ronin', 'Starting..')
     console.info(`${this.acels}`)
     this.theme.start()
+    this.acels.start()
     this.source.start()
     this.commander.start()
     this.surface.start()
@@ -1699,6 +1729,16 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_regular
   #ronin.hidden #wrapper #commander { margin-left:-380px; }
   #ronin #surface,#ronin #guide { left:380px; }
 }
+#acels { position: fixed;width: 30px;background: red;top: 0;left: 0; width: 100vw; color:black; background:white; font-size:11px; line-height: 20px; transition: margin-top 0.25s; z-index: 9999; padding-left: 25px; }
+#acels.hidden { margin-top:-20px; }
+#acels.hidden > li > ul > li { display: none }
+#acels > li { float: left; position: relative; cursor: pointer; padding:0px 5px; display: inline-block; }
+#acels > li:hover { background: black; color:white; }
+#acels > li > ul { display: none; position: absolute; background:white; position: absolute; top:20px; left:0px; color:black; width: 200px}
+#acels > li:hover > ul { display: block; }
+#acels > li > ul > li { padding: 0px 10px; display: block }
+#acels > li > ul > li:hover { background: #ccc; }
+#acels > li > ul > li > i { display: inline-block; float: right; color: #aaa; }
 body { background:var(--background);  }
 #ronin #wrapper { background: var(--background); }
 #ronin #wrapper #commander { background:var(--background); }
diff --git a/links/main.css b/links/main.css
index 461062c..b7ff5e4 100644
--- a/links/main.css
+++ b/links/main.css
@@ -40,4 +40,17 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_regular
   #ronin #wrapper #commander { width:350px; }
   #ronin.hidden #wrapper #commander { margin-left:-380px; }
   #ronin #surface,#ronin #guide { left:380px; }
-}
\ No newline at end of file
+}
+
+/* Acels */
+
+#acels { position: fixed;width: 30px;background: red;top: 0;left: 0; width: 100vw; color:black; background:white; font-size:11px; line-height: 20px; transition: margin-top 0.25s; z-index: 9999; padding-left: 25px; }
+#acels.hidden { margin-top:-20px; }
+#acels.hidden > li > ul > li { display: none }
+#acels > li { float: left; position: relative; cursor: pointer; padding:0px 5px; display: inline-block; }
+#acels > li:hover { background: black; color:white; }
+#acels > li > ul { display: none; position: absolute; background:white; position: absolute; top:20px; left:0px; color:black; width: 200px}
+#acels > li:hover > ul { display: block; }
+#acels > li > ul > li { padding: 0px 10px; display: block }
+#acels > li > ul > li:hover { background: #ccc; }
+#acels > li > ul > li > i { display: inline-block; float: right; color: #aaa; }
\ No newline at end of file
diff --git a/push.sh b/push.sh
index 8a95e66..3f02b0f 100755
--- a/push.sh
+++ b/push.sh
@@ -1,9 +1,10 @@
 #!/bin/bash
 
-rm -r 'release'
-mkdir 'release'
-cp 'index.html' 'release/index.html'
-cp 'README.txt' 'release/README.txt'
+node scripts/lib/build
+rm -r release
+mkdir release
+cp index.html release/index.html
+cp README.txt release/README.txt
 ~/Applications/butler push ~/Repositories/Hundredrabbits/Ronin/release hundredrabbits/ronin:main
 ~/Applications/butler status hundredrabbits/ronin
-rm -r 'release'
\ No newline at end of file
+rm -r release
\ No newline at end of file
diff --git a/scripts/client.js b/scripts/client.js
index 0975bf2..86e9928 100644
--- a/scripts/client.js
+++ b/scripts/client.js
@@ -33,11 +33,17 @@ function Client () {
     this.surface.install(this._wrapper)
     this.el.appendChild(this._wrapper)
     host.appendChild(this.el)
-    this.theme.install()
+
+    this.theme.install(host)
+    this.acels.install(host)
 
     window.addEventListener('dragover', this.onDrag)
     window.addEventListener('drop', this.onDrop)
 
+    this.acels.set('∷', 'Toggle Menubar', 'Tab', () => { this.acels.toggle() })
+    this.acels.set('∷', 'Open Theme', 'CmdOrCtrl+Shift+O', () => { this.theme.open() })
+    this.acels.set('∷', 'Reset Theme', 'CmdOrCtrl+Backspace', () => { this.theme.reset() })
+    
     this.acels.set('File', 'New', 'CmdOrCtrl+N', () => { this.source.new(); this.surface.clear(); this.commander.clear() })
     this.acels.set('File', 'Save', 'CmdOrCtrl+S', () => { this.source.write('ronin', 'lisp', this.commander._input.value, 'text/plain') })
     this.acels.set('File', 'Export Image', 'CmdOrCtrl+E', () => { this.source.write('ronin', 'png', this.surface.el.toDataURL('image/png', 1.0), 'image/png') })
@@ -59,14 +65,14 @@ function Client () {
     this.acels.set('Project', 'Re-Indent', 'CmdOrCtrl+Shift+I', () => { this.commander.reindent() })
     this.acels.set('Project', 'Clean', 'Escape', () => { this.commander.cleanup() })
 
-    this.acels.install(window)
-    this.acels.pipe(this)
+    this.acels.route(this)
   }
 
   this.start = function () {
     console.log('Ronin', 'Starting..')
     console.info(`${this.acels}`)
     this.theme.start()
+    this.acels.start()
     this.source.start()
     this.commander.start()
     this.surface.start()
diff --git a/scripts/lib/acels.js b/scripts/lib/acels.js
index e03f64f..c02832f 100644
--- a/scripts/lib/acels.js
+++ b/scripts/lib/acels.js
@@ -1,17 +1,42 @@
 'use strict'
 
 function Acels (client) {
+  this.el = document.createElement('ul')
+  this.el.id = 'acels'
+
+  this.order = []
   this.all = {}
   this.roles = {}
   this.pipe = null
 
-  this.install = (host = window) => {
-    host.addEventListener('keydown', this.onKeyDown, false)
-    host.addEventListener('keyup', this.onKeyUp, false)
+  this.install = (host = document.body) => {
+    window.addEventListener('keydown', this.onKeyDown, false)
+    window.addEventListener('keyup', this.onKeyUp, false)
+    host.appendChild(this.el)
+  }
+
+  this.start = () => {
+    const cats = this.sort()
+    for (const cat of this.order) {
+      const main = document.createElement('li')
+      const head = document.createElement('a')
+      head.innerText = cat
+      const subs = document.createElement('ul')
+      for (const item of cats[cat]) {
+        const option = document.createElement('li')
+        option.onclick = item.downfn
+        option.innerHTML = item.accelerator ? `${item.name} <i>${item.accelerator.replace('CmdOrCtrl+', '^')}</i>` : `${item.name}`
+        subs.appendChild(option)
+      }
+      main.appendChild(head)
+      main.appendChild(subs)
+      this.el.appendChild(main)
+    }
   }
 
   this.set = (cat, name, accelerator, downfn, upfn) => {
     if (this.all[accelerator]) { console.warn('Acels', `Trying to overwrite ${this.all[accelerator].name}, with ${name}.`) }
+    if (this.order.indexOf(cat) < 0) { this.order.push(cat) }
     this.all[accelerator] = { cat, name, downfn, upfn, accelerator }
   }
 
@@ -49,7 +74,7 @@ function Acels (client) {
     return accelerator
   }
 
-  this.pipe = (obj) => {
+  this.route = (obj) => {
     this.pipe = obj
   }
 
@@ -82,11 +107,15 @@ function Acels (client) {
   this.toString = () => {
     const cats = this.sort()
     let text = ''
-    for (const cat in cats) {
+    for (const cat of this.order) {
       for (const item of cats[cat]) {
-        text += item.accelerator ? `${cat}: ${item.name} | ${item.accelerator}\n` : ''
+        text += item.accelerator ? `${cat.padEnd(8, ' ')} ${item.name.padEnd(16, ' ')} ${item.accelerator.replace('CmdOrCtrl+', '^')}\n` : ''
       }
     }
     return text.trim()
   }
+
+  this.toggle = () => {
+    this.el.className = this.el.className === 'hidden' ? '' : 'hidden'
+  }
 }
diff --git a/scripts/lib/build.js b/scripts/lib/build.js
index acec32a..5d70266 100644
--- a/scripts/lib/build.js
+++ b/scripts/lib/build.js
@@ -18,7 +18,9 @@ function cleanup (txt) {
   return output
 }
 
-const wrapper = `
+// Create release
+
+const release_body = `
 <!DOCTYPE html>
 <html lang="en">
 <html>
@@ -43,6 +45,33 @@ const wrapper = `
   </body>
 </html>`
 
-fs.writeFileSync('index.html', cleanup(wrapper))
+fs.writeFileSync('index.html', cleanup(release_body))
 
-console.log(`Built ${id}`)
\ No newline at end of file
+// Create debug
+
+const debug_body = `
+<!DOCTYPE html>
+<html lang="en">
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${id}</title>
+    ${styles.reduce((acc, item) => { return `${acc}<link rel="stylesheet" type="text/css" href="./links/${item}"/>\n` }, '')}
+    ${libs.reduce((acc, item) => { return `${acc}<script type="text/javascript" src="./scripts/lib/${item}"></script>\n` }, '')}
+    ${scripts.reduce((acc, item) => { return `${acc}<script type="text/javascript" src="./scripts/${item}"></script>\n` }, '')}
+  </head>
+  <body>
+    <script>
+      const client = new Client()
+      client.install(document.body)
+      window.addEventListener('load', () => { 
+        client.start()
+      })
+    </script>
+  </body>
+</html>`
+
+fs.writeFileSync('debug.html', debug_body)
+
+console.log(`Built ${id}`)
