added onboarding UI tweaks

see CHANGELOG.md 0.2.4

CHANGELOG.md

+# 0.2.4
+
+_6th Septemeber 2021_
+
+## Added
+
+- onboarding now slides to next section of form
+- validation if you do not include a name you cannot proceed
+
+## Fixed
+
+- spelling of Hexagon
+
 # 0.2.3
 
 _3rd September 2021_

package.json

 {
   "name": "nodenogg.in",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.17.2",
+    "focus-trap-vue": "3",
     "freeze-dry": "^0.2.5",
     "marked": "^3.0.2",
     "pouchdb": "^7.2.2",

src/components/JoinMicrocosm.vue

@@ -10,7 +10,6 @@
     </p>
     <div class="breaker-one">
       <label for="name">Your Name: {{ nameFormatted }}</label>
-
       <input
         v-model.trim="name"
         type="text"
@@ -29,6 +28,7 @@
       either tell them the microcosm name or share the URL and add the ending;
       /microcosm/<strong>nameofyourmicrocosm</strong>
     </p>
+
     <div class="breaker-two">
       <label for="microcosm">Microcosm:</label>
 
@@ -41,9 +41,9 @@
         autocorrect="off"
         autocapitalize="none"
       />
-
+      <p class="validation">{{ error }}</p>
       <router-link to="/collect">
-        <button type="button" @click="setName(), setMicrocosm()">
+        <button type="button" @click="setName(name), setMicrocosm()">
           Start or Join
         </button>
       </router-link>
@@ -51,6 +51,7 @@
         Change CouchDB Configuration
       </button>
     </div>
+
     <template v-if="settings">
       <h2>Configure your own <span class="long">CouchDB !</span> 👩‍🔧</h2>
 
@@ -117,8 +118,17 @@
 export default {
   name: 'JoinMicrocosm',
 
+  // directives: {
+  //   focus: {
+  //     mounted(el) {
+  //       el.focus()
+  //     },
+  //   },
+  // },
+
   data: function () {
     return {
+      error: '',
       // what you are calling yourself / device
       name: '',
       nameSet: false,
@@ -136,16 +146,21 @@ export default {
   },
 
   methods: {
-    setName() {
+    setName(name) {
       // format name so no spaces or dashes PouchDB/ CouchDB dont like them
       var lowercasename = this.name.toLowerCase()
       var spacesremoved = lowercasename.split(' ').join('')
       this.nameFormatted = spacesremoved.split('-').join('')
+      if (name == '') {
+        this.error = 'Please set your name above first ☺️'
+      } else {
         this.nameSet = true
+      }
       localStorage.setItem('nogg_name', this.nameFormatted)
     },
 
     setMicrocosm() {
+      if (this.nameSet == true) {
         this.$router.push({ path: '/collect' })
         // format microcosm so no spaces or dashes PouchDB/ CouchDB dont like them
         var lowercasemicrocosm = this.microcosm.toLowerCase()
@@ -158,7 +173,9 @@ export default {
         var microcosm = this.microcosmFormatted
         this.$store.dispatch('setMicrocosm', { devicename, microcosm })
         this.$store.dispatch('startDB')
+      }
     },
+
     configureRemote(protocol, username, password, url) {
       // console.log(protocol, username, password, url)
       this.$store.dispatch('configureRemote', {
@@ -191,6 +208,12 @@ h2 {
   color: black;
 }
 
+.validation {
+  font-weight: 700;
+  font-style: bold;
+  color: rgb(104, 39, 255);
+}
+
 .arrow {
   font-size: 6em;
   color: #1cc469;

src/components/MyNodes.vue

@@ -38,7 +38,7 @@
           <option value="square">Square</option>
           <option value="circle">Circle</option>
           <option value="triangle">Triangle</option>
-          <option value="hexegon">Hexegon</option>
+          <option value="hexagon">Hexagon</option>
         </select>
 
         <button @click.prevent="toggleMode(nodes.node_id)">Read</button>
@@ -67,6 +67,14 @@ export default {
 
   components: { VSwatches },
 
+  // directives: {
+  //   focus: {
+  //     mounted(el) {
+  //       el.focus()
+  //     },
+  //   },
+  // },
+
   props: {
     added: Boolean,
   },

src/components/TellmeMore.vue

 <template>
   <div>
     <h1>Messy mapping tool for multiplayer thinking</h1>
-    <p class="info">⚠️This is a non functional beta build of nodenogg.in⚠️</p>
     <p>
       nodenogg.in is free/libre open source software, built in the open,
       inclusive by design, private by design, human led design, humane by

src/main.js

 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store/store'
+import store from './store/store' // Register a global custom directive called `v-focus`
 
 createApp(App).use(store).use(router).mount('#app')

src/views/Collect.vue

@@ -12,7 +12,7 @@ export default {
   mounted() {
     this.$store.dispatch('getMicrocosm')
     // register, i.e. in a `beforeDestroy` hook
-    window.addEventListener('unload', this.someMethod)
+    window.addEventListener('unload', this.removeLocalStorage)
   },
   name: 'Collect',
 
@@ -31,7 +31,7 @@ export default {
     addedNode() {
       this.added = !this.added
     },
-    someMethod() {
+    removeLocalStorage() {
       localStorage.removeItem('nogg_microcosm')
       localStorage.removeItem('nogg_name')
 

src/views/Start.vue

@@ -4,17 +4,19 @@
     <h2>a messy mapping tool for multiplayer thinking</h2>
   </header>
   <nav class="nav">
-    <a role="button" class="letsplay" href="#" @click="isStart = true"
+    <a role="button" class="letsplay" href="#" @click="letsPlay"
       >let's play !</a
     >
-    <a role="button" class="tellmemore" href="#" @click="isStart = false"
+    <a role="button" class="tellmemore" href="#" @click="tellMore"
       >tell me more</a
     >
   </nav>
 
-  <main v-if="isStart"><JoinMicrocosm /></main>
+  <main v-if="isStart" ref="start">
+    <JoinMicrocosm />
+  </main>
 
-  <aside v-if="isStart == false">
+  <aside v-if="isStart == false" ref="moreinfo">
     <TellmeMore />
   </aside>
 </template>
@@ -35,6 +37,27 @@ export default {
       isStart: null,
     }
   },
+
+  methods: {
+    letsPlay() {
+      this.isStart = true
+      setTimeout(() => {
+        const el = this.$refs.start
+        if (el) {
+          el.scrollIntoView({ behavior: 'smooth' })
+        }
+      }, 100)
+    },
+    tellMore() {
+      this.isStart = false
+      setTimeout(() => {
+        const el = this.$refs.moreinfo
+        if (el) {
+          el.scrollIntoView({ behavior: 'smooth' })
+        }
+      }, 100)
+    },
+  },
 }
 </script>
 

yarn.lock

@@ -3709,6 +3709,11 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+focus-trap-vue@3:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/focus-trap-vue/-/focus-trap-vue-3.2.1.tgz#630023bb96bfe45ebcf2e817eee6eb28d4edf52b"
+  integrity sha512-nThbiBo4F9ilwEc3kOYTW63RDbOsWNdz7jWFk9CmA9/LmZ7EJgEszV2MBXaQQMceEsB7h0WuIkkfzQznU5yj+A==
+
 follow-redirects@^1.0.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43"