added most of the onboarding

still connecting to wrong microcosm for Nodes

canvas-10-feb/src/components/NodesLayer.vue

@@ -23,7 +23,6 @@ import { mapState } from 'vuex'
 export default {
   name: 'NodesLayer',
   mixins: [drag],
-  // FIXME : these probably need to be data or computed and not props
   props: { nodeid: Number, nodetext: String },
 
   data() {

canvas-10-feb/src/components/OnBoard.vue

+<template>
+  <div class="notlogged">
+    <h1>nodenogg.in</h1>
+    <p>
+      nodenogg.in is a
+      <span>work in progress</span> collaborative co-creation research and
+      design thinking tool, read more details and links in the
+      <a
+        href="/#/about"
+      >about</a> section.
+    </p>
+
+    <form v-show="parta">
+      <h2>1</h2>
+      <h3>microcosm</h3>
+      <p>
+        create or join a microcosm. a microcosm is a sharable digital space that
+        can be shared privately between a group of individuals. all content /
+        data you contribute is stored locally on your device and then shared
+        privately to others on the same microcosm. you can remove your
+        contributions at any time, they belong to you.
+      </p>
+      <input
+        type="text"
+        v-model.trim="localmicrocosm"
+        placeholder="microcosm name"
+        autocorrect="off"
+        autocapitalize="none"
+        autofocus
+      />
+      <button @click="createMicrocosm(), setFocus()">+</button>
+    </form>
+
+    <form v-show="partb">
+      <h2>2</h2>
+      <h3>object</h3>
+      <p>
+        give yourself an object name, this is what connects you to your content
+        / data. this object name is anonymous and stored privately.
+      </p>
+      <input
+        type="text"
+        v-model.trim="clientid"
+        placeholder="object name"
+        autocorrect="off"
+        autocapitalize="none"
+        ref="objectname"
+      />
+      <button @click="setClient()">+</button>
+    </form>
+
+    <form v-show="partc">
+      <h2>3</h2>
+      <h3>start</h3>
+      <button @click="letsGo()">+</button>
+    </form>
+  </div>
+</template>
+
+<script>
+var delay = 100
+
+export default {
+  data: function() {
+    return {
+      localmicrocosm: '',
+      clientid: '',
+      parta: true,
+      partb: false,
+      partc: false
+    }
+  },
+
+  mounted() {
+    if (localStorage.myNNClient) {
+      this.clientid = localStorage.myNNClient
+      this.localmicrocosm = localStorage.mylastMicrocosm
+      this.createMicrocosm()
+      this.setClient()
+      this.letsGo()
+    }
+  },
+
+  methods: {
+    createMicrocosm() {
+      ;(this.partb = true),
+        this.$store.dispatch('createMicrocosm', this.localmicrocosm)
+      localStorage.setItem('mylastMicrocosm', this.localmicrocosm)
+    },
+    setClient() {
+      ;(this.partc = true),
+        this.$store.dispatch('setClient', this.clientid),
+        localStorage.setItem('myNNClient', this.clientid)
+    },
+    letsGo() {
+      this.$emit('clientAdded')
+      // this.$emit('readyMode')
+    },
+    setFocus() {
+      setTimeout(this.readyFocus, delay)
+    },
+    readyFocus() {
+      this.$refs.objectname.focus()
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+@import url('https://rsms.me/inter/inter.css');
+html {
+  font-family: 'Inter', sans-serif;
+}
+@supports (font-variation-settings: normal) {
+  html {
+    font-family: 'Inter var', sans-serif;
+  }
+}
+ul {
+  font-family: 'Pica 10 Pitch W01';
+  font-size: 16px;
+  line-height: 20px;
+}
+
+li:before {
+  content: '';
+}
+
+b {
+  background-color: yellow;
+  padding-right: 2em;
+}
+
+h1 {
+  font-size: 3em;
+}
+
+h1,
+h2,
+h3,
+p {
+  font-family: 'Inter var', sans-serif;
+  color: black;
+  margin: 0px;
+}
+
+p {
+  margin-top: 2em;
+}
+
+h2 {
+  float: right;
+  font-size: 3em;
+}
+
+h3 {
+  font-size: 3em;
+  margin-top: 0.5em;
+}
+
+form {
+  padding: 1em;
+  border-style: solid;
+  border-width: 0.5em;
+  border-color: #cab6ff;
+  margin-top: 1em;
+}
+
+input {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #cab6ff;
+  padding: 0.5em;
+}
+
+button {
+  font-size: 1.8em;
+  color: black;
+  border-style: solid;
+  border-width: 5px;
+  border-color: black;
+  border-radius: 50%;
+  background-color: white;
+  box-shadow: none;
+  height: 1.5em;
+  width: 1.5em;
+  padding: 0px;
+}
+
+button:active {
+  background-color: #cab6ff;
+}
+
+@media only screen and (min-width: 640px) {
+  /* Style adjustments for viewports that meet the condition */
+
+  .notlogged {
+    grid-column: 1 / 3;
+    grid-row: 1;
+  }
+}
+</style>

canvas-10-feb/src/store/index.js

@@ -2,28 +2,33 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import PouchDB from 'pouchdb'
 import accounts from '../assets/settings.json'
+//PouchDB.debug.enable('*')
 
 Vue.use(Vuex)
-// var rando = Math.random()
-//   .toString(16)
-//   .slice(2)
-var microcosm = 'podcast2020'
-var pouchdb = new PouchDB(microcosm)
+
+if (localStorage.getItem('mylastMicrocosm') == null) {
+  var localmicrocosm = 'firstvisit'
+} else {
+  localmicrocosm = localStorage.getItem('mylastMicrocosm')
+}
+
+var pouchdb = new PouchDB(localmicrocosm)
 var remote =
   'https://' +
   accounts.settings[0].name +
   ':' +
   accounts.settings[0].password +
   '@nn.adamprocter.co.uk/' +
-  microcosm +
+  localmicrocosm +
   '/'
 
 const store = new Vuex.Store({
   state: {
     localnodeid: null,
     global_pos_name: 'positions',
-    // this is set with localStorage or could be random on Every Load
-    // so long as you can edit all nodes
+    global_con_name: 'connections',
+    global_emoji_name: 'emojis',
+    microcosm: '',
     myclient: 'mac',
     activeNode: {},
     // this will be objects containing arrays of all the handles / connections and nodes
@@ -49,9 +54,68 @@ const store = new Vuex.Store({
     ],
     configPositions: [
       //{}
+    ],
+    configConnections: [
+      //{}
+    ],
+    configEmoji: [
+      //{}
     ]
   },
   mutations: {
+    CREATE_MICROCOSM(state, doc) {
+      pouchdb.close().then(function() {
+        localmicrocosm = doc
+        pouchdb = new PouchDB(localmicrocosm)
+        remote =
+          'https://' +
+          accounts.settings[0].name +
+          ':' +
+          accounts.settings[0].password +
+          '@nn.adamprocter.co.uk/' +
+          localmicrocosm +
+          '/'
+        store.dispatch('syncDB')
+      })
+    },
+
+    SET_CLIENT(state, doc) {
+      state.myclient = doc
+      console.log(state.myclient)
+      store.commit('SET_MY_NODE')
+      store.commit('GET_NODES')
+    },
+
+    SET_MY_NODE(state) {
+      pouchdb
+        .get(state.myclient)
+        .then(function(doc) {
+          state.myNodes = doc.nodes
+        })
+        .catch(function(err) {
+          if (err.status == 404) {
+            var uniqueid =
+              Math.random()
+                .toString(36)
+                .substring(2, 15) +
+              Math.random()
+                .toString(36)
+                .substring(2, 15)
+            return pouchdb.put({
+              _id: state.myclient,
+              _attachments: {},
+              myNodes: [
+                {
+                  // FIXME: these are here as GET_NODES cant hunt a blank
+                  nodeid: uniqueid,
+                  nodetext: 'Device ' + state.myclient
+                }
+              ]
+            })
+          }
+        })
+    },
+
     GET_NODES(state) {
       pouchdb
         .allDocs({
@@ -72,8 +136,8 @@ const store = new Vuex.Store({
               state.global_emoji_name != doc.rows[i].key
             ) {
               for (j = 0; j < Object.keys(doc.rows[i].doc.nodes).length; j++) {
-                console.log(doc.rows[i].doc.nodes[j].nodeid)
-                console.log(doc.rows[i].doc.nodes[j].nodetext)
+                // console.log(doc.rows[i].doc.nodes[j].nodeid)
+                // console.log(doc.rows[i].doc.nodes[j].nodetext)
                 const newNode = {
                   nodeid: doc.rows[i].doc.nodes[j].nodeid,
                   nodetext: doc.rows[i].doc.nodes[j].nodetext
@@ -237,7 +301,12 @@ const store = new Vuex.Store({
           })
       })
     },
-
+    createMicrocosm: ({ commit }, e) => {
+      commit('CREATE_MICROCOSM', e)
+    },
+    setClient: ({ commit }, e) => {
+      commit('SET_CLIENT', e)
+    },
     editNode: ({ commit }, { nodeid, nodetext }) => {
       commit('EDIT_NODE', { nodeid, nodetext })
     }

canvas-10-feb/src/views/Home.vue

 <template>
   <div class="home">
+    <OnBoard @clientAdded="clientAdded()" />
+    <div v-if="clientset">
       <NodesLayer
         v-for="value in myNodes"
         v-bind:key="value.nodeid"
         v-bind:nodeid="value.nodeid"
         v-bind:nodetext="value.nodetext"
       />
-    <otherNodeslayer
+      <OtherNodeslayer
         v-for="value in otherNodes"
         v-bind:key="value.nodeid"
         v-bind:nodeid="value.nodeid"
@@ -15,29 +17,45 @@
       <CanvasLayer />
       <ControlsLayer />
     </div>
+  </div>
 </template>
 
 <script>
 // @ is an alias to /src
+import OnBoard from '@/components/OnBoard.vue'
 import CanvasLayer from '@/components/CanvasLayer.vue'
 import NodesLayer from '@/components/NodesLayer.vue'
-import otherNodeslayer from '@/components/otherNodeslayer.vue'
+import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
 import ControlsLayer from '@/components/ControlsLayer.vue'
 
 import { mapState } from 'vuex'
 
 export default {
   name: 'Home',
+
+  data: function() {
+    return {
+      clientset: false
+    }
+  },
+
   components: {
+    OnBoard,
     CanvasLayer,
     NodesLayer,
-    otherNodeslayer,
+    OtherNodeslayer,
     ControlsLayer
   },
   computed: mapState({
     myNodes: state => state.myNodes,
     otherNodes: state => state.otherNodes
-  })
+  }),
+  methods: {
+    clientAdded() {
+      this.clientset = !this.clientset
+      console.log(this.clientset)
+    }
+  }
 }
 </script>