Commit 283abead authored by Adam Procter's avatar Adam Procter
Browse files

Merge branch 'minorUI' into main

parents 7a47800a d1df3808
# 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_
......
{
"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",
......
......@@ -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;
......
......@@ -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,
},
......
<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
......
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')
......@@ -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')
......
......@@ -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>
......
......@@ -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"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment