add preliminary stuff

src/index.html

@@ -37,6 +37,7 @@
 <link rel="stylesheet" href="/lib/materialize/materialize.min.css">
 <script src="/lib/materialize/materialize.min.js"></script>
 -->
+<script src="/lib/pouchdb.js"></script>
 
 <style type="text/css" />
 @font-face {
@@ -55,6 +56,8 @@
 var layer_ui
 var viewport
 var origViewportSize
+var db
+var storedTables
 
 function initSvgTable(el) {
   svg_table = SVG.adopt(el)
@@ -77,8 +80,13 @@
   layer_ui.addClass('layer_ui')
   viewport.add(svg_table)
 
+  let username = localStorage.getItem('profile_name')
+  let dbName = (username ? username + '-' : '') + base32.short_id()
+  svg_table.node.dataset['db'] = dbName
+  db = new PouchDB(dbName)
+
   makeDraggable(SVG.adopt(byId('svg_viewport')), svg_table)
-  objectsObserver = new LayerObserver(layer_objects.node)
+  objectsObserver = new LayerObserver(layer_objects.node, db)
   uiObserver = new LayerObserver(layer_ui.node)
 
   return svg_table
@@ -130,6 +138,13 @@
 
   svg_table = initSvgTable(document.createElementNS(SVG.ns, 'svg'))
 
+  storedTables = new PouchDB('storedTables')
+  storedTables.put({
+    _id: db.name,
+    name: db.name,
+    createdAt: new Date().toISOString(),
+  })
+
   window.addEventListener("resize", viewportToGameArea)
 
   // Initialize modals

src/multiplayer.js

@@ -139,14 +139,16 @@ function net_fire(payload) {
   }
 }
 
-function LayerObserver(layerEl) {
+function LayerObserver(layerEl, db=null) {
   this._observer = null
   this._layerEl = layerEl
+  this._db = db
+
   this.local_mutations_start = function() {
     //console.log("NET ", this._layerEl.id, "local_mutations_start")
     if (!this._observer) {
-      this._observer = new MutationObserver((mutationsList, observer) => {
-        this.local_mutations_process(mutationsList)
+      this._observer = new MutationObserver(async (mutationsList, observer) => {
+        await this.local_mutations_process(mutationsList)
       })
     }
     this._observer.observe(this._layerEl, {
@@ -168,11 +170,13 @@ function LayerObserver(layerEl) {
       }
       setTimeout(endAnimationFn.bind(this), 1000)
     }
-  },
+  }
+
   this.local_mutations_stop = function() {
     this.local_mutations_process(this._observer.takeRecords())
     this._observer.disconnect()
-  },
+  }
+
   this.local_mutations_process = function(mutationsList) {
     let layerId = this._layerEl.id
     mutationsList.forEach(mut => {
@@ -238,8 +242,9 @@ function LayerObserver(layerEl) {
       this._dirty.changed[elId] = serialized(this._dirty.changed[elId])
     })
     window.requestAnimationFrame(this.run.bind(this))
-  },
-  this.run = function() {
+  }
+
+  this.run = async function() {
     // console.log("LayerObserver", this._layerEl.id, 'RUN')
     if(
       Object.keys(this._dirty.removed).length > 0
@@ -248,6 +253,50 @@ function LayerObserver(layerEl) {
       ||
       Object.keys(this._dirty.changed).length > 0
     ) {
+      if (this._db) {
+        let bulk = []
+        Object.keys(this._dirty.added).forEach(id => {
+          bulk.push({
+            _id: id,
+            serialized: this._dirty.added[id],
+          })
+        })
+        Object.keys(this._dirty.changed).forEach(id => {
+          let dirtyEl = byId(id)
+          bulk.push({
+            _id: id,
+            _rev: dirtyEl.dataset['rev'],
+            serialized: this._dirty.added[id],
+          })
+        })
+        Object.keys(this._dirty.removed).forEach(id => {
+          let dirtyEl = byId(id)
+          bulk.push({
+            _id: id,
+            _rev: dirtyEl.dataset['rev'],
+            _deleted: true,
+          })
+        })
+        console.log("bulk", bulk)
+        this.local_mutations_stop()
+        try {
+          let response = await this._db.bulkDocs(bulk)
+          response.forEach(stub => {
+            console.log('stub', stub)
+            if (stub.ok) {
+              let dirtyEl = byId(stub.id)
+              dirtyEl.dataset['rev'] = stub.rev
+            } else {
+              console.error('pouchdb failure')
+              console.error(stub)
+            }
+          })
+        } catch (err) {
+          console.error('failed to pouchdb.bulkDocs')
+          console.error(err)
+        }
+        this.local_mutations_start()
+      }
       net_fire({
         type: "dirtylayer",
         layerId: this._layerEl.id,
@@ -256,13 +305,15 @@ function LayerObserver(layerEl) {
     }
     this.init()
   }
+
   this.init = function() {
     this._dirty = {
       removed: {},
       added: {},
       changed: {},
     }
   }
+
   this.init()
   this.local_mutations_start()
 }