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
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 source diff could not be displayed because it is too large. You can view the blob instead.
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