Commit 31991a98 authored by Adam Procter's avatar Adam Procter
Browse files

tidy up

cleaned up some bits and added local storage saving for name and microcosm name.
parent dee0cc76
...@@ -629,8 +629,8 @@ to attach them to the start of each source file to most effectively ...@@ -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 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. the "copyright" line and a pointer to where the full notice is found.
nodenoggin-vue3 nodenogg.in
Copyright (C) 2021 nn Copyright (C) 2021 nodenogg
This program is free software: you can redistribute it and/or modify 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 it under the terms of the GNU Affero General Public License as published
......
# nodenogg.in (beta) # 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) ![image of the 2020 alpha interface](https://nodenogg.in/img/interface2020.png)
{ {
"name": "nodenogg.in", "name": "nodenogg.in",
"version": "0.1.0", "version": "0.2.0",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
...@@ -8,24 +8,24 @@ ...@@ -8,24 +8,24 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"core-js": "^3.6.5", "core-js": "^3.9.1",
"vue": "^3.0.0", "vue": "^3.0.9",
"vue-router": "^4.0.0-0", "vue-router": "^4.0.5",
"vuex": "^4.0.0-0" "vuex": "^4.0.0-0"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-babel": "^4.5.12",
"@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-eslint": "^4.5.12",
"@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-router": "^4.5.12",
"@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-plugin-vuex": "^4.5.12",
"@vue/cli-service": "~4.5.0", "@vue/cli-service": "^4.5.12",
"@vue/compiler-sfc": "^3.0.0", "@vue/compiler-sfc": "^3.0.9",
"@vue/eslint-config-prettier": "^6.0.0", "@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"eslint": "^6.7.2", "eslint": "^7.23.0",
"eslint-plugin-prettier": "^3.1.3", "eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^7.0.0-0", "eslint-plugin-vue": "^7.8.0",
"prettier": "^1.19.1" "prettier": "^2.2.1"
}, },
"eslintConfig": { "eslintConfig": {
"root": true, "root": true,
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
</template> </template>
<style> <style>
@import url("https://use.typekit.net/mwd7zcu.css"); @import url('https://use.typekit.net/mwd7zcu.css');
#app { #app {
font-family: source-code-pro, monospace; font-family: source-code-pro, monospace;
......
...@@ -8,16 +8,19 @@ ...@@ -8,16 +8,19 @@
like, this name is always anonymous. like, this name is always anonymous.
</p> </p>
<div class="breaker-one"> <div class="breaker-one">
<label for="name">Name:</label> <label for="name">Your Name: {{ nameFormatted }}</label>
<input <input
v-model.trim="name"
type="text" type="text"
id="name" id="name"
autocomplete="name" autocomplete="name"
placeholder="type name here!" placeholder="type name here!"
autocorrect="off" autocorrect="off"
autocapitalize="none" autocapitalize="none"
@keyup.enter="setName()"
/> />
<button type="button">Store</button> <button type="button" @click="setName()">Store</button>
</div> </div>
<h2>Next start or join a <span class="long">microcosm !</span> 🚀</h2> <h2>Next start or join a <span class="long">microcosm !</span> 🚀</h2>
...@@ -29,14 +32,17 @@ ...@@ -29,14 +32,17 @@
<div class="breaker-two"> <div class="breaker-two">
<label for="microcosm">Microcosm:</label> <label for="microcosm">Microcosm:</label>
<input <input
v-model.trim="microcosm"
ref="microcosm"
type="text" type="text"
id="microcosm" id="microcosm"
autocomplete="microcosm" autocomplete="microcosm"
placeholder="type microcosm name here!" placeholder="type microcosm name here!"
autocorrect="off" autocorrect="off"
autocapitalize="none" autocapitalize="none"
@keyup.enter="setMicrocosm()"
/> />
<button type="button">Start or Join</button> <button type="button" @click="setMicrocosm()">Start or Join</button>
</div> </div>
</form> </form>
</template> </template>
...@@ -47,7 +53,44 @@ export default { ...@@ -47,7 +53,44 @@ export default {
data: function() { data: function() {
return { 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()
} }
} }
} }
......
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"; import store from './store'
createApp(App) createApp(App)
.use(store) .use(store)
.use(router) .use(router)
.mount("#app"); .mount('#app')
import { createRouter, createWebHistory } from "vue-router"; import { createRouter, createWebHistory } from 'vue-router'
import Start from "../views/Start.vue"; import Start from '../views/Start.vue'
const routes = [ const routes = [
{ {
path: "/", path: '/',
name: "Start", name: 'Start',
component: Start component: Start,
}, },
{ {
path: "/credits", path: '/credits',
name: "Credits", name: 'Credits',
// route level code-splitting // route level code-splitting
// this generates a separate chunk (credits.[hash].js) for this route // this generates a separate chunk (credits.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => component: () =>
import(/* webpackChunkName: "credits" */ "../views/Credits.vue") import(/* webpackChunkName: "credits" */ '../views/Credits.vue'),
} },
]; ]
const router = createRouter({ const router = createRouter({
history: createWebHistory(process.env.BASE_URL), history: createWebHistory(process.env.BASE_URL),
routes routes,
}); })
export default router; export default router
import { createStore } from "vuex"; import { createStore } from 'vuex'
export default createStore({ export default createStore({
state: {}, state: {},
mutations: {}, mutations: {},
actions: {}, actions: {},
modules: {} modules: {},
}); })
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<script> <script>
export default { export default {
name: 'Credits' name: 'Credits',
} }
</script> </script>
......
...@@ -4,18 +4,20 @@ ...@@ -4,18 +4,20 @@
<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="tellmemore" href="#" @click="isTellme = !isTellme" <a role="button" class="letsplay" href="#" @click="isStart = true"
>tell me more</a
>
<a role="button" class="letsplay" href="#" @click="isStart = !isStart"
>let's play !</a >let's play !</a
> >
<a role="button" class="tellmemore" href="#" @click="isStart = false"
>tell me more</a
>
</nav> </nav>
<main>
<JoinMicrocosm v-show="isStart" /> <main v-if="isStart">
<JoinMicrocosm />
</main> </main>
<aside>
<TellmeMore v-show="isTellme" /> <aside v-if="isStart == false">
<TellmeMore />
</aside> </aside>
</template> </template>
...@@ -28,14 +30,13 @@ export default { ...@@ -28,14 +30,13 @@ export default {
name: 'Start', name: 'Start',
components: { components: {
JoinMicrocosm, JoinMicrocosm,
TellmeMore TellmeMore,
}, },
data() { data() {
return { return {
isStart: false, isStart: null,
isTellme: false
} }
} },
} }
</script> </script>
......
{
"include": [
"./src/**/*"
],
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"sourceMap": true,
"allowJs": true
}
}
\ No newline at end of file
This diff is collapsed.
Supports Markdown
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