From f8e202f1b6604c5113b96e74af2afb723531d7e8 Mon Sep 17 00:00:00 2001
From: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Fri, 2 Aug 2019 07:47:10 +0900
Subject: [PATCH] Added run button

---
 desktop/sources/links/main.css       | 11 ++++---
 desktop/sources/links/theme.css      |  4 ++-
 desktop/sources/scripts/commander.js | 47 +++++++++++++++-------------
 desktop/sources/scripts/source.js    |  2 +-
 4 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css
index f200e2f..0dfadf6 100644
--- a/desktop/sources/links/main.css
+++ b/desktop/sources/links/main.css
@@ -6,8 +6,9 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_regular
 #ronin #wrapper { overflow: hidden; position: relative; }
 #ronin #wrapper #commander { z-index: 9000;position: relative;width: calc(50vw - 30px);height: calc(100vh - 60px);-webkit-app-region: no-drag;padding-right: 30px;transition: margin-left 250ms;}
 #ronin #wrapper #commander textarea { background: none; width: 100%; height: calc(100vh - 105px); resize: none; font-size: 12px;line-height: 15px; padding-right: 15px}
-#ronin #wrapper #commander #status { position: absolute; bottom: 0px; text-transform: lowercase; line-height: 15px; height: 30px; overflow: hidden; width: calc(100% - 30px);}
-#ronin #wrapper #commander #status #source { position: absolute;right: 0px;bottom: 0px; white-space: pre}
+#ronin #wrapper #commander #status { position: absolute; bottom: 0px; text-transform: lowercase; line-height: 15px; height: 30px; overflow: hidden; width: calc(100% - 75px); padding-left:45px;}
+#ronin #wrapper #commander #status #run { display: block; width: 26px; height: 26px; position: absolute; top: 0px; border-radius: 15px; left:0px; cursor: pointer; border:2px solid #fff; transition: background-color 250ms, border-color 250ms}
+#ronin #wrapper #commander #status #run:hover { background: none; transition: none }
 #ronin.expand #wrapper #commander { width:100%; }
 #ronin #surface,#ronin #guide { position: absolute; top:0px; -webkit-user-select: none;-webkit-app-region: no-drag; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='1' fill='%23555'></circle></svg>"); background-size: 10px 10px; background-position: -4px -4px; width:100%; height:100%;  transition: left 250ms}
 
@@ -23,7 +24,7 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_regular
 #ronin #surface { border-radius: 2px }
 
 @media (min-width: 720px) {
-  #ronin #wrapper #commander { width:400px; }
-  #ronin.hidden #wrapper #commander { margin-left:-430px; }
-  #ronin #surface,#ronin #guide { left:430px; }
+  #ronin #wrapper #commander { width:350px; }
+  #ronin.hidden #wrapper #commander { margin-left:-380px; }
+  #ronin #surface,#ronin #guide { left:380px; }
 }
\ No newline at end of file
diff --git a/desktop/sources/links/theme.css b/desktop/sources/links/theme.css
index 70585e6..868ec02 100644
--- a/desktop/sources/links/theme.css
+++ b/desktop/sources/links/theme.css
@@ -3,4 +3,6 @@ body { background:var(--background);  }
 #ronin #wrapper #commander { background:var(--background); }
 #ronin #wrapper #commander textarea { color:var(--f_high); }
 #ronin #wrapper #commander #status { color:var(--f_med); }
-#ronin #wrapper #commander #status #source { color:var(--f_low); }
\ No newline at end of file
+#ronin #wrapper #commander #status #source { color:var(--f_low); }
+#ronin #wrapper #commander #status #run { background-color: var(--b_inv); border-color: var(--b_inv) }
+#ronin #wrapper #commander #status #run.active { background:var(--f_high); border-color:var(--f_high); transition: none }
\ No newline at end of file
diff --git a/desktop/sources/scripts/commander.js b/desktop/sources/scripts/commander.js
index f197e31..97d62b8 100644
--- a/desktop/sources/scripts/commander.js
+++ b/desktop/sources/scripts/commander.js
@@ -6,21 +6,23 @@ function Commander (ronin) {
   this._status.id = 'status'
   this._log = document.createElement('div')
   this._log.id = 'log'
-  this._source = document.createElement('div')
-  this._source.id = 'source'
   this._docs = document.createElement('div')
   this._docs.id = 'help'
+  this._run = document.createElement('a')
+  this._run.id = 'run'
+  this._run.setAttribute('title', 'Run(c-R)')
   this.isVisible = true
 
   this.install = function (host) {
     this.el.appendChild(this._input)
     this._status.appendChild(this._log)
-    this._status.appendChild(this._source)
     this._status.appendChild(this._docs)
+    this._status.appendChild(this._run)
     this.el.appendChild(this._status)
     host.appendChild(this.el)
     this._input.addEventListener('input', this.onInput)
     this._input.addEventListener('click', this.onClick)
+    this._run.addEventListener('click', () => { this.run() })
 
     this._input.onkeydown = (e) => {
       if (e.keyCode == 9 || e.which == 9) { e.preventDefault(); this.inject('  ') }
@@ -42,6 +44,7 @@ function Commander (ronin) {
       ronin.surface.maximize()
     }
     ronin.interpreter.run(txt)
+    this.feedback()
   }
 
   this.load = function (txt) {
@@ -95,16 +98,11 @@ function Commander (ronin) {
     // Logs
     if (msg && msg !== this._log.textContent) {
       this._log.textContent = `${msg}`
-      // console.log(msg)
-    }
-    // Source
-    const rect = ronin.surface.getFrame()
-    const _source = `${ronin.source}[${this._input.value.split('\n').length}]\n${rect.w}x${rect.h}`
-    if (_source !== this._source.textContent) {
-      this._source.textContent = _source
     }
     // Docs
-    const _docs = this.docs.print(this.getLastfn())
+    const lstFn = this.getLastfn()
+    const rect = ronin.surface.getFrame()
+    const _docs = this.docs.hasDocs(lstFn) === true ? this.docs.print(lstFn) : `${ronin.source}:${this.length()} ${rect.w}x${rect.h}`
     if (_docs !== this._docs.textContent) {
       this._docs.textContent = `${_docs}`
     }
@@ -212,6 +210,15 @@ function Commander (ronin) {
     }
   }
 
+  this.length = function () {
+    return this._input.value.split('\n').length
+  }
+
+  this.feedback = function () {
+    this._run.className = 'active'
+    setTimeout(() => { this._run.className = '' }, 150)
+  }
+
   // Docs micro-module
 
   this.docs = {
@@ -245,24 +252,22 @@ function Commander (ronin) {
         return `${acc}- \`(${example.trim()})\` ${this.dict[item].note}\n`
       }, '')
     },
+    hasDocs: function (name) {
+      return !!this.dict[name]
+    },
     print: function (name) {
-      return this.dict[name] ? `(${name} ${this.dict[name].params.reduce((acc, item) => { return `${acc}${item} ` }, '').trim()})` : 'idle.'
+      return `(${name} ${this.dict[name].params.reduce((acc, item) => { return `${acc}${item} ` }, '').trim()})`
     }
   }
 
   // Splash
 
-  this.splash = `; welcome to ronin - v2.24
+  this.splash = `; welcome to ronin
+; v2.25
 (clear) 
-(def frame-rect 
-  (frame))
-(def align { 
-  :x (sub (div frame-rect:c 2) 150) 
-  :y (sub frame-rect:m 150)})
-(fill 
-  (svg align:x align:y "M15,15 L15,15 L285,15 L285,285 L15,285 Z") "#fff")
+(def logo-path "M60,60 L195,60 A45,45 0 0,1 240,105 A45,45 0 0,1 195,150 L60,150 M195,150 A45,45 0 0,1 240,195 L240,240 ")
 (stroke 
-  (svg align:x align:y "M60,60 L195,60 A45,45 0 0,1 240,105 A45,45 0 0,1 195,150 L60,150 M195,150 A45,45 0 0,1 240,195 L240,240 ") "#000" 5)`
+  (svg 185 180 logo-path) "white" 5)`
 
   String.prototype.insert = function (s, i) { return [this.slice(0, i), `${s}`, this.slice(i)].join('') }
 }
diff --git a/desktop/sources/scripts/source.js b/desktop/sources/scripts/source.js
index 2ffa3c3..70b18b6 100644
--- a/desktop/sources/scripts/source.js
+++ b/desktop/sources/scripts/source.js
@@ -138,7 +138,7 @@ function Source (ronin) {
   }
 
   this.toString = function () {
-    return this.path ? this.name() + '.lisp' : '*new'
+    return this.path ? this.name() + '.lisp' : 'new'
   }
 
   function isDifferent (a, b) {