Skip to content
Snippets Groups Projects
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
No related branches found
No related tags found
No related merge requests found
......@@ -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
......
# 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)
{
"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,
......
......@@ -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;
......
......@@ -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()
}
}
}
......
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')
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
import { createStore } from "vuex";
import { createStore } from 'vuex'
export default createStore({
state: {},
mutations: {},
actions: {},
modules: {}
});
modules: {},
})
......@@ -8,7 +8,7 @@
<script>
export default {
name: 'Credits'
name: 'Credits',
}
</script>
......
......@@ -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>
......
{
"include": [
"./src/**/*"
],
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"sourceMap": true,
"allowJs": true
}
}
\ No newline at end of file
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment