tidy up

cleaned up some bits and added local storage saving for name and microcosm name.

LICENSE

@@ -629,8 +629,8 @@ to attach them to the start of each source file to most effectively
 state the exclusion of warranty; and each file should have at least
 the "copyright" line and a pointer to where the full notice is found.
 
-    nodenoggin-vue3
-    Copyright (C) 2021  nn
+    nodenogg.in
+    Copyright (C) 2021 nodenogg
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU Affero General Public License as published

README.md

 # nodenogg.in (beta)
 
-This is a rebuilt of nodenogg.in from scatch in vue 3.
+This is a rebuilt of nodenogg.in from scratch in vue 3.
 
 ![image of the 2020 alpha interface](https://nodenogg.in/img/interface2020.png)

package.json

 {
   "name": "nodenogg.in",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -8,24 +8,24 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "core-js": "^3.6.5",
-    "vue": "^3.0.0",
-    "vue-router": "^4.0.0-0",
+    "core-js": "^3.9.1",
+    "vue": "^3.0.9",
+    "vue-router": "^4.0.5",
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/cli-plugin-babel": "^4.5.12",
+    "@vue/cli-plugin-eslint": "^4.5.12",
+    "@vue/cli-plugin-router": "^4.5.12",
+    "@vue/cli-plugin-vuex": "^4.5.12",
+    "@vue/cli-service": "^4.5.12",
+    "@vue/compiler-sfc": "^3.0.9",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
+    "eslint": "^7.23.0",
     "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "^7.0.0-0",
-    "prettier": "^1.19.1"
+    "eslint-plugin-vue": "^7.8.0",
+    "prettier": "^2.2.1"
   },
   "eslintConfig": {
     "root": true,

src/App.vue

@@ -7,7 +7,7 @@
 </template>
 
 <style>
-@import url("https://use.typekit.net/mwd7zcu.css");
+@import url('https://use.typekit.net/mwd7zcu.css');
 
 #app {
   font-family: source-code-pro, monospace;

src/components/JoinMicrocosm.vue

@@ -8,16 +8,19 @@
       like, this name is always anonymous.
     </p>
     <div class="breaker-one">
-      <label for="name">Name:</label>
+      <label for="name">Your Name: {{ nameFormatted }}</label>
+
       <input
+        v-model.trim="name"
         type="text"
         id="name"
         autocomplete="name"
         placeholder="type name here!"
         autocorrect="off"
         autocapitalize="none"
+        @keyup.enter="setName()"
       />
-      <button type="button">Store</button>
+      <button type="button" @click="setName()">Store</button>
     </div>
     <h2>Next start or join a <span class="long">microcosm !</span> 🚀</h2>
 
@@ -29,14 +32,17 @@
     <div class="breaker-two">
       <label for="microcosm">Microcosm:</label>
       <input
+        v-model.trim="microcosm"
+        ref="microcosm"
         type="text"
         id="microcosm"
         autocomplete="microcosm"
         placeholder="type microcosm name here!"
         autocorrect="off"
         autocapitalize="none"
+        @keyup.enter="setMicrocosm()"
       />
-      <button type="button">Start or Join</button>
+      <button type="button" @click="setMicrocosm()">Start or Join</button>
     </div>
   </form>
 </template>
@@ -47,7 +53,44 @@ export default {
 
   data: function() {
     return {
-      name: ''
+      // what you are calling yourself / device
+      name: '',
+      nameSet: false,
+      nameFormatted: '',
+      // Next dataset related to microcosm
+      microcosm: '',
+      microcosmSet: false,
+      microcosmFormatted: ''
+    }
+  },
+
+  methods: {
+    setName() {
+      // 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('')
+      this.nameSet = true
+      localStorage.setItem('nogg_name', this.nameFormatted)
+      // focus on next input field for speed
+      this.focusInput()
+      // now we sent this same data set to the store
+      // this.$store.dispatch('setName', this.nameFormatted),
+    },
+
+    setMicrocosm() {
+      // format microcosm so no spaces or dashes PouchDB/ CouchDB dont like them
+      var lowercasemicrocosm = this.microcosm.toLowerCase()
+      var spacesremoved = lowercasemicrocosm.split(' ').join('')
+      this.microcosmFormatted = spacesremoved.split('-').join('')
+      this.microcosmSet = true
+      localStorage.setItem('nogg_microcosm', this.microcosmFormatted)
+      // now we sent this same data set to the store
+      // this.$store.dispatch('setMicrocosm', this.microcosmFormatted),
+    },
+
+    focusInput() {
+      this.$refs.microcosm.focus()
     }
   }
 }

src/main.js

-import { createApp } from "vue";
-import App from "./App.vue";
-import router from "./router";
-import store from "./store";
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
 
 createApp(App)
   .use(store)
   .use(router)
-  .mount("#app");
+  .mount('#app')

src/router/index.js

-import { createRouter, createWebHistory } from "vue-router";
-import Start from "../views/Start.vue";
+import { createRouter, createWebHistory } from 'vue-router'
+import Start from '../views/Start.vue'
 
 const routes = [
   {
-    path: "/",
-    name: "Start",
-    component: Start
+    path: '/',
+    name: 'Start',
+    component: Start,
   },
   {
-    path: "/credits",
-    name: "Credits",
+    path: '/credits',
+    name: 'Credits',
     // route level code-splitting
     // this generates a separate chunk (credits.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () =>
-      import(/* webpackChunkName: "credits" */ "../views/Credits.vue")
-  }
-];
+      import(/* webpackChunkName: "credits" */ '../views/Credits.vue'),
+  },
+]
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
-  routes
-});
+  routes,
+})
 
-export default router;
+export default router

src/store/index.js

-import { createStore } from "vuex";
+import { createStore } from 'vuex'
 
 export default createStore({
   state: {},
   mutations: {},
   actions: {},
-  modules: {}
-});
+  modules: {},
+})

src/views/Credits.vue

@@ -8,7 +8,7 @@
 
 <script>
 export default {
-  name: 'Credits'
+  name: 'Credits',
 }
 </script>
 

src/views/Start.vue

@@ -4,18 +4,20 @@
     <h2>a messy mapping tool for multiplayer thinking</h2>
   </header>
   <nav class="nav">
-    <a role="button" class="tellmemore" href="#" @click="isTellme = !isTellme"
-      >tell me more</a
-    >
-    <a role="button" class="letsplay" href="#" @click="isStart = !isStart"
+    <a role="button" class="letsplay" href="#" @click="isStart = true"
       >let's play !</a
     >
+    <a role="button" class="tellmemore" href="#" @click="isStart = false"
+      >tell me more</a
+    >
   </nav>
-  <main>
-    <JoinMicrocosm v-show="isStart" />
+
+  <main v-if="isStart">
+    <JoinMicrocosm />
   </main>
-  <aside>
-    <TellmeMore v-show="isTellme" />
+
+  <aside v-if="isStart == false">
+    <TellmeMore />
   </aside>
 </template>
 
@@ -28,14 +30,13 @@ export default {
   name: 'Start',
   components: {
     JoinMicrocosm,
-    TellmeMore
+    TellmeMore,
   },
   data() {
     return {
-      isStart: false,
-      isTellme: false
+      isStart: null,
     }
-  }
+  },
 }
 </script>
 

tsconfig.json

-{
-    "include": [
-      "./src/**/*"
-    ],
-    "compilerOptions": {
-      "module": "es2015",
-      "moduleResolution": "node",
-      "target": "es5",
-      "sourceMap": true,
-      "allowJs": true
-    }
-  }
\ No newline at end of file