Begin implementing onscreen docs.

desktop/sources/links/main.css

@@ -5,8 +5,8 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_regular
 #ronin { height: calc(100vh - 60px); width:calc(100vw - 60px); -webkit-app-region: drag; padding: 30px;overflow: hidden; }
 #ronin #wrapper { overflow: hidden; position: relative; }
 #ronin #wrapper #commander { z-index: 9000;position: relative;width: 310px;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 - 80px); resize: none; font-size: 12px;line-height: 15px; padding-right: 15px}
+#ronin #wrapper #commander textarea { background: none; width: 100%; height: calc(100vh - 90px); resize: none; font-size: 12px;line-height: 15px; padding-right: 15px}
-#ronin #wrapper #commander div#status { position: absolute; bottom: 0px; }
+#ronin #wrapper #commander div#status { position: absolute; bottom: 0px; text-transform: lowercase;}
 #ronin.hidden #wrapper #commander { margin-left:-331px; }
 
 #ronin canvas#surface,#ronin canvas#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%; left:340px; transition: left 250ms}

desktop/sources/scripts/commander.js

@@ -4,18 +4,28 @@ function Commander (ronin) {
   this._input = document.createElement('textarea')
   this._status = document.createElement('div')
   this._status.id = 'status'
+  this._log = document.createElement('div')
+  this._log.id = 'log'
+  this._source = document.createElement('div')
+  this._source.id = 'source'
+  this._help = document.createElement('div')
+  this._help.id = 'help'
   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._help)
     this.el.appendChild(this._status)
     host.appendChild(this.el)
     this._input.addEventListener('input', this.onInput)
+    this._input.addEventListener('click', this.onClick)
     this.docs.install()
   }
 
   this.start = function () {
-    this._status.textContent = 'Idle. (zoom 100%)'
+    this.setStatus('Ready.')
     this._input.focus()
     this.run()
     this.hide()
@@ -54,21 +64,22 @@ function Commander (ronin) {
   }
 
   this.setStatus = function (msg) {
-    if (!msg || msg === this._status.textContent) { return }
+    if (!msg || msg === this._log.textContent) { return }
-    this._status.textContent = `${(msg + '').substr(0, 40)}`
+    this._log.textContent = `${msg}`
-    console.log(...msg)
+    this._source.textContent = `${ronin.source} ${this._input.value.split('\n').length} lines`
+    console.log(msg)
   }
 
   this.update = function () {
 
   }
 
-  this.onInput = function () {
+  this.onInput = () => {
-
+    console.log('input', this._input.selectionStart)
   }
 
-  this.getQuery = function () {
+  this.onClick = () => {
-
+    console.log('click', this._input.selectionStart)
   }
 
   // Mouse
@@ -83,7 +94,6 @@ function Commander (ronin) {
     this.mouseRect.a.x = e.offsetX
     this.mouseRect.a.y = e.offsetY
     this.mouseRect.t = 'pos'
-    this._status.textContent = `${this.mouseRect.x},${this.mouseRect.y} ${this.mouseRect.w},${this.mouseRect.h}`
     this.capture()
     this.show()
   }
@@ -94,7 +104,6 @@ function Commander (ronin) {
       this.mouseRect.h = e.offsetY - this.mouseRect.y
       this.mouseRect.b.x = e.offsetX
       this.mouseRect.b.y = e.offsetY
-      this._status.textContent = `${this.mouseRect.x},${this.mouseRect.y} ${this.mouseRect.w},${this.mouseRect.h}`
       this.commit()
     }
   }
@@ -106,7 +115,6 @@ function Commander (ronin) {
     this.mouseRect.b.x = e.offsetX
     this.mouseRect.b.y = e.offsetY
     this.mouseRect.t = ''
-    this._status.textContent = `${this.mouseRect.x},${this.mouseRect.y} ${this.mouseRect.w},${this.mouseRect.h}`
     this.commit()
     this._input.focus()
     ronin.surface.clearGuide()

desktop/sources/scripts/source.js

@@ -15,6 +15,7 @@ function Source (ronin) {
     console.log('Source', 'Make a new file..')
     this.path = null
     ronin.surface.clear()
+    ronin.log(`New file.`)
   }
 
   this.open = function () {
@@ -57,6 +58,7 @@ function Source (ronin) {
     if (quitAfter === true) {
       app.exit()
     }
+    ronin.log(`Writing file.`)
   }
 
   this.read = function (loc = this.path) {
@@ -65,6 +67,7 @@ function Source (ronin) {
     console.log('Source', 'Reading ' + loc)
     this.path = loc
     this.load(fs.readFileSync(this.path, 'utf8'))
+    ronin.log(`Reading file.`)
   }
 
   this.run = function () {
@@ -144,7 +147,7 @@ function Source (ronin) {
   }
 
   this.toString = function () {
-    return this.path ? this.name() : 'unsaved'
+    return this.path ? this.name() + '.lisp' : 'unsaved'
   }
 
   function isDifferent (a, b) {

examples/resize.lisp

@@ -1,7 +1,5 @@
 ; resize
-
 (
   (clear) 
   (open "../../PREVIEW.jpg") 
-  (resize 0.5 0.5)
+  (resize 0.5 0.5))
-)

examples/theme.lisp

@@ -1,9 +1,12 @@
-((clear)
+; theme
+(
+  (clear) 
   (def col 
     (lambda 
       (i) 
       (of 
-     ((theme "f_high")
+        (
+          (theme "f_high") 
           (theme "f_med") 
           (theme "f_low") 
           (theme "f_inv") 
@@ -15,14 +18,19 @@
   (def rec 
     (lambda 
       (v i) 
-    (if (gt v 0)
+      (if 
-      ((fill
+        (gt v 0) 
+        (
+          (fill 
             (circle 
               (add 
-          (div (of (frame) "w") 1.6)
+                (div 
+                  (of 
+                    (frame) "w") 1.6) 
                 (mul 1.5 v)) 
               (mul 10 v) 
-         (mul v (div v 5)))
+              (mul v 
+                (div v 5))) 
             (col i)) 
           (rec 
             (sub v 3)