Administrator approval is now required for registering new accounts. If you are registering a new account, and are external to the University, please ask the repository owner to contact ServiceLine to request your account be approved. Repository owners must include the newly registered email address, and specific repository in the request for approval.

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 # 0.2.3
_3rd September 2021_ _3rd September 2021_
......
{ {
"name": "nodenogg.in", "name": "nodenogg.in",
"version": "0.2.3", "version": "0.2.4",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
}, },
"dependencies": { "dependencies": {
"core-js": "^3.17.2", "core-js": "^3.17.2",
"focus-trap-vue": "3",
"freeze-dry": "^0.2.5", "freeze-dry": "^0.2.5",
"marked": "^3.0.2", "marked": "^3.0.2",
"pouchdb": "^7.2.2", "pouchdb": "^7.2.2",
......
...@@ -10,7 +10,6 @@ ...@@ -10,7 +10,6 @@
</p> </p>
<div class="breaker-one"> <div class="breaker-one">
<label for="name">Your Name: {{ nameFormatted }}</label> <label for="name">Your Name: {{ nameFormatted }}</label>
<input <input
v-model.trim="name" v-model.trim="name"
type="text" type="text"
...@@ -29,6 +28,7 @@ ...@@ -29,6 +28,7 @@
either tell them the microcosm name or share the URL and add the ending; either tell them the microcosm name or share the URL and add the ending;
/microcosm/<strong>nameofyourmicrocosm</strong> /microcosm/<strong>nameofyourmicrocosm</strong>
</p> </p>
<div class="breaker-two"> <div class="breaker-two">
<label for="microcosm">Microcosm:</label> <label for="microcosm">Microcosm:</label>
...@@ -41,9 +41,9 @@ ...@@ -41,9 +41,9 @@
autocorrect="off" autocorrect="off"
autocapitalize="none" autocapitalize="none"
/> />
<p class="validation">{{ error }}</p>
<router-link to="/collect"> <router-link to="/collect">
<button type="button" @click="setName(), setMicrocosm()"> <button type="button" @click="setName(name), setMicrocosm()">
Start or Join Start or Join
</button> </button>
</router-link> </router-link>
...@@ -51,6 +51,7 @@ ...@@ -51,6 +51,7 @@
Change CouchDB Configuration Change CouchDB Configuration
</button> </button>
</div> </div>
<template v-if="settings"> <template v-if="settings">
<h2>Configure your own <span class="long">CouchDB !</span> 👩‍🔧</h2> <h2>Configure your own <span class="long">CouchDB !</span> 👩‍🔧</h2>
...@@ -117,8 +118,17 @@ ...@@ -117,8 +118,17 @@
export default { export default {
name: 'JoinMicrocosm', name: 'JoinMicrocosm',
// directives: {
// focus: {
// mounted(el) {
// el.focus()
// },
// },
// },
data: function () { data: function () {
return { return {
error: '',
// what you are calling yourself / device // what you are calling yourself / device
name: '', name: '',
nameSet: false, nameSet: false,
...@@ -136,29 +146,36 @@ export default { ...@@ -136,29 +146,36 @@ export default {
}, },
methods: { methods: {
setName() { setName(name) {
// format name so no spaces or dashes PouchDB/ CouchDB dont like them // format name so no spaces or dashes PouchDB/ CouchDB dont like them
var lowercasename = this.name.toLowerCase() var lowercasename = this.name.toLowerCase()
var spacesremoved = lowercasename.split(' ').join('') var spacesremoved = lowercasename.split(' ').join('')
this.nameFormatted = spacesremoved.split('-').join('') this.nameFormatted = spacesremoved.split('-').join('')
this.nameSet = true if (name == '') {
this.error = 'Please set your name above first ☺️'
} else {
this.nameSet = true
}
localStorage.setItem('nogg_name', this.nameFormatted) localStorage.setItem('nogg_name', this.nameFormatted)
}, },
setMicrocosm() { setMicrocosm() {
this.$router.push({ path: '/collect' }) if (this.nameSet == true) {
// format microcosm so no spaces or dashes PouchDB/ CouchDB dont like them this.$router.push({ path: '/collect' })
var lowercasemicrocosm = this.microcosm.toLowerCase() // format microcosm so no spaces or dashes PouchDB/ CouchDB dont like them
var spacesremoved = lowercasemicrocosm.split(' ').join('') var lowercasemicrocosm = this.microcosm.toLowerCase()
this.microcosmFormatted = spacesremoved.split('-').join('') var spacesremoved = lowercasemicrocosm.split(' ').join('')
this.microcosmSet = true this.microcosmFormatted = spacesremoved.split('-').join('')
localStorage.setItem('nogg_microcosm', this.microcosmFormatted) this.microcosmSet = true
// now we sent this same data set to the store localStorage.setItem('nogg_microcosm', this.microcosmFormatted)
var devicename = this.nameFormatted // now we sent this same data set to the store
var microcosm = this.microcosmFormatted var devicename = this.nameFormatted
this.$store.dispatch('setMicrocosm', { devicename, microcosm }) var microcosm = this.microcosmFormatted
this.$store.dispatch('startDB') this.$store.dispatch('setMicrocosm', { devicename, microcosm })
this.$store.dispatch('startDB')
}
}, },
configureRemote(protocol, username, password, url) { configureRemote(protocol, username, password, url) {
// console.log(protocol, username, password, url) // console.log(protocol, username, password, url)
this.$store.dispatch('configureRemote', { this.$store.dispatch('configureRemote', {
...@@ -191,6 +208,12 @@ h2 { ...@@ -191,6 +208,12 @@ h2 {
color: black; color: black;
} }
.validation {
font-weight: 700;
font-style: bold;
color: rgb(104, 39, 255);
}
.arrow { .arrow {
font-size: 6em; font-size: 6em;
color: #1cc469; color: #1cc469;
......
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<option value="square">Square</option> <option value="square">Square</option>
<option value="circle">Circle</option> <option value="circle">Circle</option>
<option value="triangle">Triangle</option> <option value="triangle">Triangle</option>
<option value="hexegon">Hexegon</option> <option value="hexagon">Hexagon</option>
</select> </select>
<button @click.prevent="toggleMode(nodes.node_id)">Read</button> <button @click.prevent="toggleMode(nodes.node_id)">Read</button>
...@@ -67,6 +67,14 @@ export default { ...@@ -67,6 +67,14 @@ export default {
components: { VSwatches }, components: { VSwatches },
// directives: {
// focus: {
// mounted(el) {
// el.focus()
// },
// },
// },
props: { props: {
added: Boolean, added: Boolean,
}, },
......
<template> <template>
<div> <div>
<h1>Messy mapping tool for multiplayer thinking</h1> <h1>Messy mapping tool for multiplayer thinking</h1>
<p class="info">⚠️This is a non functional beta build of nodenogg.in⚠️</p>
<p> <p>
nodenogg.in is free/libre open source software, built in the open, nodenogg.in is free/libre open source software, built in the open,
inclusive by design, private by design, human led design, humane by inclusive by design, private by design, human led design, humane by
......
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' 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') createApp(App).use(store).use(router).mount('#app')
...@@ -12,7 +12,7 @@ export default { ...@@ -12,7 +12,7 @@ export default {
mounted() { mounted() {
this.$store.dispatch('getMicrocosm') this.$store.dispatch('getMicrocosm')
// register, i.e. in a `beforeDestroy` hook // register, i.e. in a `beforeDestroy` hook
window.addEventListener('unload', this.someMethod) window.addEventListener('unload', this.removeLocalStorage)
}, },
name: 'Collect', name: 'Collect',
...@@ -31,7 +31,7 @@ export default { ...@@ -31,7 +31,7 @@ export default {
addedNode() { addedNode() {
this.added = !this.added this.added = !this.added
}, },
someMethod() { removeLocalStorage() {
localStorage.removeItem('nogg_microcosm') localStorage.removeItem('nogg_microcosm')
localStorage.removeItem('nogg_name') localStorage.removeItem('nogg_name')
......
...@@ -4,17 +4,19 @@ ...@@ -4,17 +4,19 @@
<h2>a messy mapping tool for multiplayer thinking</h2> <h2>a messy mapping tool for multiplayer thinking</h2>
</header> </header>
<nav class="nav"> <nav class="nav">
<a role="button" class="letsplay" href="#" @click="isStart = true" <a role="button" class="letsplay" href="#" @click="letsPlay"
>let's play !</a >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 >tell me more</a
> >
</nav> </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 /> <TellmeMore />
</aside> </aside>
</template> </template>
...@@ -35,6 +37,27 @@ export default { ...@@ -35,6 +37,27 @@ export default {
isStart: null, 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> </script>
......
...@@ -3709,6 +3709,11 @@ flush-write-stream@^1.0.0: ...@@ -3709,6 +3709,11 @@ flush-write-stream@^1.0.0:
inherits "^2.0.3" inherits "^2.0.3"
readable-stream "^2.3.6" 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: follow-redirects@^1.0.0:
version "1.14.1" version "1.14.1"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43" 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