Add testing code

.gitignore

@@ -0,0 +1 @@
+node_modules

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "RtB-frontend",
+  "version": "1.0.0",
+  "main": "index.js",
+  "author": "Ketchetwahmeegwun T. Southall",
+  "license": "GPLv3",
+  "dependencies": {
+    "@marko-tags/context": "^1.1.0",
+    "jshint": "^2.10.2",
+    "lasso": "^3.3.0",
+    "lasso-cli": "^2.0.11",
+    "lasso-marko": "^2.4.7",
+    "marko": "^4.18.10"
+  }
+}

src/client.js

@@ -0,0 +1,3 @@
+let mapPage = require('./pages/map')
+
+mapPage.renderSync().appendTo(document.body)

src/components/layout.marko

@@ -0,0 +1,28 @@
+$ let rtbComponents = [
+  {
+    UUID: "01",
+  },
+  {
+    UUID: "02",
+  }
+]
+
+class {
+  onCreate() {
+  }
+}
+
+style {
+  .rtb-layout {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+div.rtb-layout -- test
+  for|rtbComponent, index| of=rtbComponents
+    popup
+      rtb-component key=rtbComponent.UUID data=rtbComponent

src/components/mapview.marko

@@ -0,0 +1,42 @@
+class {
+  onCreate() {
+    this.state = {
+      width: 6000,
+      height: 6000,
+      mouseButtons: []
+    }
+    this.subscribeTo(window).on("resize", () => {
+      this.resizeToDisplay()
+    })
+  }
+  onMouseDown(e) {
+    let self = this
+    this.state.mouseButtons[e.button] = true
+    console.log(e.button)
+    window.addEventListener('mouseup', function _func() {
+      self.state.mouseButtons[e.button] = false
+      window.removeEventListener('mouseup', _func, true)
+    }, true)
+  }
+  onRightClick(e) {
+    e.preventDefault()
+  }
+  resizeToDisplay() {
+  }
+}
+
+style {
+  .map-view {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: scroll;
+    z-index: 0;
+  }
+}
+
+div.map-view on-mousedown("onMouseDown") on-contextmenu("onRightClick")
+  canvas.map-view-canvas width=state.width height=state.height

src/components/mithril-component.marko

@@ -0,0 +1,47 @@
+import { JSHINT } from 'jshint'
+
+class {
+  onCreate() {
+    let self = this
+  }
+  updateMithril() {
+    if (!JSHINT(this.input.source, { asi: true, browser: true, devel: true, undef: true }, { m: true, uuid: true, storage: true, })) {
+      this.mithrilObject = {
+        view: function() {
+          return m('.mithril-errors', JSHINT.errors.map((error) => {
+            return m('.mithril-error',
+              m('span.mithril-error-line', error.line),
+              m('span.mithril-separator-line', ':'),
+              m('span.mithril-error-column', error.character),
+              m('span', " "+error.reason)
+            )
+          }))
+        }
+      }
+    } else {
+      this.mithrilObject = new Function('uuid', 'storage', "return (()=>{'use strict'; "+this.input.source+"})()")(this.input.uuid, this.input.storage)
+    }
+
+    this.recreateMithril()
+  }
+  recreateMithril() {
+    m.mount(this.el, this.mithrilObject)
+  }
+  onDestroy() {
+    console.log("destroy")
+    m.mount(this.el, null)
+  }
+  onUpdate() {
+    console.log("update")
+    this.updateMithril()
+  }
+  onRender(out) {
+    console.log(this.el)
+  }
+  onMount() {
+    console.log("mount")
+    this.updateMithril()
+  }
+}
+
+div.mithril-component

src/components/popup.marko

@@ -0,0 +1,139 @@
+class {
+  onCreate() {
+    this.state = {
+      title: "popup",
+      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consequat ex sed nulla bibendum, ut consectetur mauris faucibus. Quisque nisi metus, volutpat eget ipsum in, posuere vestibulum nunc. Fusce fringilla odio at velit gravida euismod a id arcu. Sed finibus fringilla augue sit amet egestas. Nam laoreet erat at lacus molestie, id aliquam quam consequat. Donec sapien mi, luctus id gravida eu, feugiat ut lorem. Suspendisse ultrices quis justo quis sollicitudin.",
+      grabbing: false,
+      minimized: false,
+      x: 50,
+      y: 50,
+      width: 300,
+      height: 400,
+    }
+  }
+  moveTo(x, y) {
+    var parentBox = this.el.parentNode.getBoundingClientRect()
+    if (x + this.el.offsetWidth > parentBox.right) {
+      x = parentBox.right - this.el.offsetWidth
+    } else if (x < 0) {
+      x = 0
+    }
+    if (y + this.el.offsetHeight > parentBox.bottom) {
+      y = parentBox.bottom - this.el.offsetHeight
+    } else if (y < 0) {
+      y = 0
+    }
+    this.state.x = x
+    this.state.y = y
+  }
+  startDrag(e) {
+    this.state.grabbing = true
+    var startX = e.clientX - this.el.offsetLeft
+    var startY = e.clientY - this.el.offsetTop
+
+    let _mouseMove = (e) => {
+      this.moveTo(e.clientX - startX, e.clientY - startY)
+    }
+
+    let _mouseUp = (e) => {
+      this.state.grabbing = false
+      window.removeEventListener('mouseup', _mouseUp, true)
+      window.removeEventListener('mousemove', _mouseMove, true)
+    }
+
+    window.addEventListener('mouseup', _mouseUp, true)
+    window.addEventListener('mousemove', _mouseMove, true)
+  }
+  startResize(e) {
+    var startX = e.clientX
+    var startY = e.clientY
+
+    let _mouseMove = (e) => {
+      this.state.width += e.clientX - startX
+      this.state.height += e.clientY - startY
+      startX = e.clientX, startY = e.clientY
+    }
+
+    let _mouseUp = (e) => {
+      window.removeEventListener('mouseup', _mouseUp, true)
+      window.removeEventListener('mousemove', _mouseMove, true)
+    }
+
+    window.addEventListener('mouseup', _mouseUp, true)
+    window.addEventListener('mousemove', _mouseMove, true)
+
+  }
+  minimize(e) {
+    this.state.minimized = !this.state.minimized
+  }
+  close(e) {
+    this.destroy()
+  }
+}
+
+style {
+  .popup--shown {
+    position: absolute;
+    padding: 1em;
+  }
+  .popup--minimized {
+    position: absolute;
+    padding: 1em;
+  }
+  .popup-controls, .popup-controls--grabbed {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: minmax(1em, 1fr) 1em 1em;
+    border-bottom: 1px solid black;
+    user-select: none;
+    cursor: grab;
+  }
+  .popup-controls--grabbed {
+    cursor: move;
+  }
+  .popup-button--minimize {
+    cursor: pointer;
+  }
+  .popup-button--close {
+    cursor: pointer;
+  }
+  .popup-button--resize {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 1em;
+    height: 1em;
+    border-bottom: 1px solid black;
+    border-right: 1px solid black;
+    cursor: nwse-resize;
+    user-select: none;
+  }
+  .popup-content-container {
+    overflow: auto;
+    position: relative;
+    height: 100%;
+  }
+  .popup-content--hidden {
+    display: none;
+  }
+}
+
+if(state.minimized)
+  div.popup--minimized style={ zIndex: "100", left: (Array.from(document.querySelectorAll(".popup--minimized")).reduce((a, c) => a + c.offsetWidth, 0))}
+    div class="popup-controls"+(state.grabbing ? "--grabbed" : "") on-mousedown('startDrag') 
+      div.popup-title -- ${state.title}
+      div.popup-button--minimize on-click('minimize') -- -
+      div.popup-button--close on-click('close') -- x
+    div.popup-content-container
+      div.popup-content--hidden
+        <${input.renderBody}/>
+else
+  div.popup--shown style={ zIndex: "100", left: state.x, top: state.y, width: state.width, height: state.height }
+    div class="popup-controls"+(state.grabbing ? "--grabbed" : "") on-mousedown('startDrag')
+      div.popup-title -- ${state.title}
+      div.popup-button--minimize on-click('minimize') -- -
+      div.popup-button--close on-click('close') -- x
+    div.popup-content-container
+      div.popup-content
+        <${input.renderBody}/>
+    div.popup-button--resize on-mousedown('startResize')

src/components/rtb-component.marko

@@ -0,0 +1,93 @@
+/*
+We need some sort of Components manager/broker for:
+  * sending streaming requests to update component source, less, and otherwise
+  * acquiring other components
+  * listening/sending other components messages
+
+let uuids = RtB.ComponentsBroker.getComponentsByType("character-sheet")
+RtB.ComponentsBroker.sendToComponent(uuids[0], "update", {
+  StrMod: "+2",
+})
+
+let uuid = RtB.ComponentsBroker.getComponentByID("my-custom-sheet")
+
+RtB.ComponentsBroker.listenToComponent(uuid, "update")
+
+RtB.ComponentsBroker.delete(uuid)
+*/
+class {
+  onCreate() {
+    let self = this
+    this.state = {
+      UUID: "00000000-0000-0000-0000-000000000000",
+      parentUUID: "00000000-0000-0000-0000-000000000000",
+      edit: false,
+      storage: {
+        count: 0,
+      }, // JSON of desired data structure to save for this UUID
+      source: `function inc() {
+  storage.count += 1
+}
+return {
+  view: function(vnode) {
+    return m("div",
+      m("p", "Count: " + storage.count),
+      m("button", { onclick: inc }, "Inc")
+    )
+  }
+}`,
+      style: "",
+    }
+  }
+  onDestroy() {
+  }
+  onUpdate() {
+  }
+  onRender(out) {
+  }
+  onMount() {
+  }
+  cancel() {
+    this.state.edit = false
+  }
+  save() {
+    let textEl = this.getEl("edit")
+    if (this.state.source != textEl.value) {
+        this.state.source = textEl.value
+    }
+  }
+  edit() {
+    this.state.edit = true
+  }
+}
+
+style {
+  .rtb-component {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+  .rtb-component-edit {
+    width: 100%;
+    height: 100%;
+  }
+  .rtb-component-buttons {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+  .rtb-component-buttons button {
+      display: inline-block
+  }
+}
+
+div.rtb-component
+  if(state.edit)
+    textarea.rtb-component-edit key="edit" -- ${state.source}
+    div.rtb-component-buttons
+      button on-click('cancel') -- cancel
+      button on-click('save') -- save
+  else
+    mithril-component source=state.source storage=state.storage style=state.style uuid=state.UUID
+    div.rtb-component-buttons
+      button on-click('edit') -- edit

src/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+  <head>
+    <title>RtB Client v1</title>
+    <style>
+      body {
+        overflow: hidden;
+        margin: 0;
+        height: 100vh;
+        width: 100vw;
+      }
+    </style>
+    <script src="../static/lib/mithril.min.js"></script>
+  <!-- <lasso-head> --><link rel="stylesheet" href="../static/src-index.css"><!-- </lasso-head> --></head>
+  <body>
+  <!-- <lasso-body> --><script src="../static/src-index.js"></script>
+<script>$_mod.ready();</script><!-- </lasso-body> --></body>
+</html>

src/pages/map.marko

@@ -0,0 +1,8 @@
+/*let popupComponent = require('../../components/popup')
+let mapviewComponent = require('../../components/mapview')
+
+popupComponent.renderSync().appendTo(document.body)
+mapviewComponent.renderSync().appendTo(document.body)*/
+
+mapview
+layout