Built skeleton for the web site.
Need to write the text and make the quiz console.
This commit is contained in:
parent
d15a4efbc8
commit
fd1c4ee14d
@ -4,10 +4,10 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Wanderhome Personality Quiz | V.S.</title>
|
||||
<title>Wanderhome Quiz | V.S.</title>
|
||||
</head>
|
||||
<body class="bg-green-100 h-screen">
|
||||
<div class="bg-green-100" id="app"></div>
|
||||
<body class="bg-lime-100 h-screen">
|
||||
<div class="bg-lime-100" id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
62
client/package-lock.json
generated
62
client/package-lock.json
generated
@ -14,6 +14,7 @@
|
||||
"vue-router": "^4.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/typography": "^0.5.4",
|
||||
"@vitejs/plugin-vue": "^3.0.3",
|
||||
"autoprefixer": "^10.4.8",
|
||||
"postcss": "^8.4.16",
|
||||
@ -93,6 +94,20 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/typography": {
|
||||
"version": "0.5.4",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.4.tgz",
|
||||
"integrity": "sha512-QEdg40EmGvE7kKoDei8zr5sf4D1pIayHj4R31bH3lX8x2BtTiR+jNejYPOkhbmy3DXgkMF9jC8xqNiGFAuL9Sg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"lodash.castarray": "^4.4.0",
|
||||
"lodash.isplainobject": "^4.0.6",
|
||||
"lodash.merge": "^4.6.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"tailwindcss": ">=3.0.0 || insiders"
|
||||
}
|
||||
},
|
||||
"node_modules/@vitejs/plugin-vue": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.0.3.tgz",
|
||||
@ -1013,6 +1028,24 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/lodash.castarray": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
|
||||
"integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/lodash.isplainobject": {
|
||||
"version": "4.0.6",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
|
||||
"integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/lodash.merge": {
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
||||
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.25.9",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
|
||||
@ -1621,6 +1654,17 @@
|
||||
"fastq": "^1.6.0"
|
||||
}
|
||||
},
|
||||
"@tailwindcss/typography": {
|
||||
"version": "0.5.4",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.4.tgz",
|
||||
"integrity": "sha512-QEdg40EmGvE7kKoDei8zr5sf4D1pIayHj4R31bH3lX8x2BtTiR+jNejYPOkhbmy3DXgkMF9jC8xqNiGFAuL9Sg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash.castarray": "^4.4.0",
|
||||
"lodash.isplainobject": "^4.0.6",
|
||||
"lodash.merge": "^4.6.2"
|
||||
}
|
||||
},
|
||||
"@vitejs/plugin-vue": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.0.3.tgz",
|
||||
@ -2207,6 +2251,24 @@
|
||||
"integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.castarray": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
|
||||
"integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.isplainobject": {
|
||||
"version": "4.0.6",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
|
||||
"integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.merge": {
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
||||
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
|
||||
"dev": true
|
||||
},
|
||||
"magic-string": {
|
||||
"version": "0.25.9",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
"vue-router": "^4.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/typography": "^0.5.4",
|
||||
"@vitejs/plugin-vue": "^3.0.3",
|
||||
"autoprefixer": "^10.4.8",
|
||||
"postcss": "^8.4.16",
|
||||
|
||||
@ -1,16 +1,22 @@
|
||||
<script setup>
|
||||
// This starter template is using Vue 3 <script setup> SFCs
|
||||
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
|
||||
import Navbar from '@/components/Navbar.vue'
|
||||
import Navbar from '@/components/navbar/Index.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Navbar />
|
||||
<div class="container p-3 max-w-5xl mx-auto">
|
||||
<router-view></router-view>
|
||||
<div class="container px-3 py-20 max-w-5xl mx-auto overflow-hidden">
|
||||
<router-view v-slot="{ Component, route }" ref="main">
|
||||
<transition mode="out-in"
|
||||
:enter-active-class="route.meta.mainEnterActiveClass"
|
||||
:enter-from-class="route.meta.mainEnterFromClass"
|
||||
:leave-active-class="route.meta.mainLeaveActiveClass"
|
||||
:leave-to-class="route.meta.mainLeaveToClass"
|
||||
>
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
19
client/src/components/Content.vue
Normal file
19
client/src/components/Content.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<script>
|
||||
export default {
|
||||
props: ['contentTitle']
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="max-w-2xl mx-auto bg-lime-50 p-3 rounded-xl">
|
||||
<h1 class="text-4xl text-center pb-1 border-b-2 border-solid border-lime-600 mb-6 uncial-antiqua">
|
||||
<slot name="header"></slot>
|
||||
</h1>
|
||||
<div>
|
||||
<slot name="content">
|
||||
<p>Where will the text go?</p>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
</style>
|
||||
@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<nav class="relative bg-lime-900 text-white">
|
||||
<div class="flex max-w-5xl mx-auto items-center justify-between">
|
||||
<!-- Logo -->
|
||||
<div class="inline-flex justify-center items-center">
|
||||
<img src="@/assets/vue.svg" class="p-2" alt="Vite Logo" >
|
||||
<router-link to="/"><span class="text-m md:text-lg h-fit align-middle p-1"><em>Wanderhome</em> Personality Quiz | V.S.</span></router-link>
|
||||
</div>
|
||||
<!-- Menu Items -->
|
||||
<div class="hidden md:flex space-x-3 justify-center items-center">
|
||||
<router-link class="hover:text-orange-500 active:text-blue-500 p-3 h-fit align-middle" to="/">Home</router-link>
|
||||
<router-link class="hover:text-orange-500 active:text-blue-500 p-3 h-fit align-middle" to="/quiz">Take the Quiz</router-link>
|
||||
<router-link class="hover:text-orange-500 active:text-blue-500 p-3 h-fit align-middle" to="/about">About</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
23
client/src/components/icons/AccountQuestion.vue
Normal file
23
client/src/components/icons/AccountQuestion.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<svg-icon type="mdi" :path="path"></svg-icon>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import SvgIcon from '@jamescoyle/vue-icon'
|
||||
import { mdiAccountQuestion } from '@mdi/js'
|
||||
|
||||
export default {
|
||||
name: "MdiAccountQuestion",
|
||||
|
||||
components: {
|
||||
SvgIcon
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
path: mdiAccountQuestion,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
23
client/src/components/icons/Home.vue
Normal file
23
client/src/components/icons/Home.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<svg-icon type="mdi" :path="path"></svg-icon>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import SvgIcon from '@jamescoyle/vue-icon'
|
||||
import { mdiHome } from '@mdi/js'
|
||||
|
||||
export default {
|
||||
name: "MdiHome",
|
||||
|
||||
components: {
|
||||
SvgIcon
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
path: mdiHome,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
23
client/src/components/icons/Information.vue
Normal file
23
client/src/components/icons/Information.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<svg-icon type="mdi" :path="path"></svg-icon>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import SvgIcon from '@jamescoyle/vue-icon'
|
||||
import { mdiInformation } from '@mdi/js'
|
||||
|
||||
export default {
|
||||
name: "MdiInformation",
|
||||
|
||||
components: {
|
||||
SvgIcon
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
path: mdiInformation,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -8,7 +8,7 @@ import SvgIcon from '@jamescoyle/vue-icon'
|
||||
import { mdiMenu } from '@mdi/js'
|
||||
|
||||
export default {
|
||||
name: "menu",
|
||||
name: "MdiMenu",
|
||||
|
||||
components: {
|
||||
SvgIcon
|
||||
@ -16,7 +16,7 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
path: mdiMenu,
|
||||
path: mdiMenu
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
38
client/src/components/navbar/Index.vue
Normal file
38
client/src/components/navbar/Index.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<script>
|
||||
import { mdiAccountQuestion, mdiHome, mdiInformation } from '@mdi/js'
|
||||
import mdiMenu from '@/components/icons/Menu.vue'
|
||||
import Navlink from '@/components/navbar/Navlink.vue'
|
||||
export default {
|
||||
name: 'Navbar',
|
||||
components: {
|
||||
mdiMenu,
|
||||
Navlink
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<nav class="fixed bg-lime-900 text-white shadow-xl w-full">
|
||||
<div class="flex relative px-2 max-w-5xl mx-auto items-center justify-between">
|
||||
<!-- Logo -->
|
||||
<div class="inline-flex justify-center items-center">
|
||||
<img src="@/assets/vue.svg" class="p-2" alt="Vite Logo" >
|
||||
<router-link class-active="" class="transition-all ease-in-out duration-500 hover:text-orange-300 active:text-orange-500" to="/"><span class="text-m md:text-lg h-fit align-middle p-1"><span class="uncial-antiqua">Wanderhome</span> Quiz | V.S.</span></router-link>
|
||||
</div>
|
||||
<!-- Menu Items -->
|
||||
<div class="hidden md:flex space-x-3 justify-center items-center">
|
||||
<Navlink :svgPath="route.meta.svgPath" :text="route.meta.title" :to="route.path" v-for="route in $router.options.routes" :key="route.path" />
|
||||
</div>
|
||||
<button id="menu-btn" class="block md:hidden focus:outline-none">
|
||||
<mdiMenu />
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden md:hidden">
|
||||
<div id="menu" class="absolute flex flex-col self-end font-bold sm:w-auto drop-shadow-md">
|
||||
<Navlink :svgPath="route.meta.svgPath" :text="route.meta.title" :to="route.path" v-for="route in $router.options.routes" :key="route.path" />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
<style scoped>
|
||||
</style>
|
||||
56
client/src/components/navbar/MobileLink.vue
Normal file
56
client/src/components/navbar/MobileLink.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<script>
|
||||
import SvgIcon from '@jamescoyle/vue-icon'
|
||||
|
||||
export default {
|
||||
name: "MobileLink",
|
||||
components: {
|
||||
SvgIcon
|
||||
},
|
||||
props: [
|
||||
"path",
|
||||
"text",
|
||||
"to"
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<a :href="to" class="navlink" target="_blank" rel="noopener noreferrer" v-if="to.startsWith('http')">
|
||||
<div class="inline-flex px-3 py-1">
|
||||
<span class="scale-75">
|
||||
<svg-icon type="mdi" :path="path"></svg-icon>
|
||||
</span>
|
||||
<span>{{ text }}</span>
|
||||
</div>
|
||||
</a>
|
||||
<div class="relative flex" v-else>
|
||||
<div class="relative flex">
|
||||
<router-link active-class="active-link" class="navlink" :to="to">
|
||||
<div class="inline-flex px-3 py-1">
|
||||
<span class="scale-75">
|
||||
<svg-icon type="mdi" :path="path"></svg-icon>
|
||||
</span>
|
||||
<span>{{ text }}</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.navlink.active-link, .navlink.exact-active-link {
|
||||
@apply bg-orange-500;
|
||||
@apply text-white;
|
||||
@apply hover:bg-orange-600;
|
||||
@apply hover:text-white;
|
||||
}
|
||||
.navlink {
|
||||
@apply hover:text-orange-300;
|
||||
@apply bg-lime-800;
|
||||
@apply active:text-orange-500;
|
||||
@apply rounded-lg;
|
||||
@apply h-fit;
|
||||
@apply align-middle;
|
||||
@apply transition-all;
|
||||
@apply ease-in-out;
|
||||
@apply duration-500;
|
||||
}
|
||||
</style>
|
||||
59
client/src/components/navbar/Navlink.vue
Normal file
59
client/src/components/navbar/Navlink.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<script>
|
||||
import SvgIcon from '@jamescoyle/vue-icon'
|
||||
|
||||
export default {
|
||||
name: "Navlink",
|
||||
components: {
|
||||
SvgIcon
|
||||
},
|
||||
props: [
|
||||
"svgPath",
|
||||
"text",
|
||||
"to"
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a :href="to" class="navlink" target="_blank" rel="noopener noreferrer" v-if="to.startsWith('http')">
|
||||
<div class="inline-flex px-3 py-1 space-x-1">
|
||||
<span class="scale-75">
|
||||
<svg-icon type="mdi" :path="svgPath"></svg-icon>
|
||||
</span>
|
||||
<span>{{ text }}</span>
|
||||
</div>
|
||||
</a>
|
||||
<div class="relative flex" v-else>
|
||||
<div class="relative flex">
|
||||
<router-link active-class="active-link" class="navlink" :to="to">
|
||||
<div class="inline-flex px-3 py-1 space-x-1">
|
||||
<span class="scale-75">
|
||||
<svg-icon type="mdi" :path="svgPath"></svg-icon>
|
||||
</span>
|
||||
<span>{{ text }}</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.navlink.active-link, .navlink.exact-active-link {
|
||||
@apply bg-amber-600;
|
||||
@apply text-white;
|
||||
@apply hover:bg-orange-500;
|
||||
@apply hover:text-white;
|
||||
}
|
||||
.navlink {
|
||||
@apply hover:text-orange-300;
|
||||
@apply hover:bg-lime-700;
|
||||
@apply bg-lime-800;
|
||||
@apply active:text-orange-500;
|
||||
@apply rounded-lg;
|
||||
@apply h-fit;
|
||||
@apply align-middle;
|
||||
@apply transition-all;
|
||||
@apply ease-in-out;
|
||||
@apply duration-1000;
|
||||
}
|
||||
</style>
|
||||
26
client/src/components/sidebar/Index.vue
Normal file
26
client/src/components/sidebar/Index.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<script>
|
||||
import Navlink from '@/components/sidebar/Navlink.vue'
|
||||
|
||||
export default {
|
||||
name: 'Sidebar',
|
||||
components: {
|
||||
Navlink
|
||||
},
|
||||
props: [
|
||||
'prefix',
|
||||
'routes'
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex flex-col bg-lime-50 px-3 py-5 rounded-xl">
|
||||
<h1 class="text-xl my-2 border-b-2 border-lime-600 border-solid text-center uncial-antiqua md:text-left">
|
||||
<slot name="header"></slot>
|
||||
</h1>
|
||||
<div class="flex flex-col text-md">
|
||||
<Navlink :svgPath="route.meta.svgPath" :text="route.meta.title" :prefix="prefix" :to="route.path" v-for="route in routes" :key="route.path" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
</style>
|
||||
52
client/src/components/sidebar/Navlink.vue
Normal file
52
client/src/components/sidebar/Navlink.vue
Normal file
@ -0,0 +1,52 @@
|
||||
<script>
|
||||
import SvgIcon from '@jamescoyle/vue-icon'
|
||||
export default {
|
||||
name: 'SideLink',
|
||||
components: {
|
||||
SvgIcon
|
||||
},
|
||||
props: [
|
||||
'prefix',
|
||||
'svgPath',
|
||||
'text',
|
||||
'to'
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<a :href="to" class="navlink" target="_blank" rel="noopener noreferrer" v-if="to.startsWith('http')">
|
||||
<div class="inline-flex px-2 py-1 items-center space-x-1">
|
||||
<span class="scale-75">
|
||||
<svg-icon type="mdi" :path="svgPath"></svg-icon>
|
||||
</span>
|
||||
<span>{{ text }}</span>
|
||||
</div>
|
||||
</a>
|
||||
<router-link exact-active-class="active-link" class="navlink" :to="prefix + '/' + to" v-else>
|
||||
<div class="inline-flex px-2 py-1 items-center space-x-1">
|
||||
<span class="scale-75">
|
||||
<svg-icon type="mdi" :path="svgPath"></svg-icon>
|
||||
</span>
|
||||
<span>{{ text }}</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
<style scoped>
|
||||
.navlink.active-link, .navlink.exact-active-link {
|
||||
@apply border-l-2;
|
||||
@apply border-solid;
|
||||
@apply border-lime-600;
|
||||
@apply drop-shadow-md;
|
||||
}
|
||||
.navlink {
|
||||
font-family: UncialAntiqua;
|
||||
@apply hover:text-orange-600;
|
||||
@apply hover:drop-shadow-lg;
|
||||
@apply active:text-orange-800;
|
||||
@apply h-fit;
|
||||
@apply align-middle;
|
||||
@apply transition-all;
|
||||
@apply ease-in-out;
|
||||
@apply duration-500;
|
||||
}
|
||||
</style>
|
||||
BIN
client/src/fonts/UncialAntiqua-Regular.ttf
Normal file
BIN
client/src/fonts/UncialAntiqua-Regular.ttf
Normal file
Binary file not shown.
@ -1,5 +1,7 @@
|
||||
import { createApp } from 'vue'
|
||||
import '@/style.css'
|
||||
import App from '@/App.vue'
|
||||
import router from '@/router'
|
||||
createApp(App).use(router).mount('#app')
|
||||
import Router from '@/router'
|
||||
const app = createApp(App)
|
||||
app.use(Router)
|
||||
app.mount('#app')
|
||||
|
||||
@ -1,30 +1,127 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
import { mdiAccountGroupOutline, mdiAccountQuestion, mdiCodeTags, mdiHandCoin, mdiHome, mdiInformation } from '@mdi/js'
|
||||
import About from '@/views/about/Index.vue'
|
||||
import AboutPage from '@/views/about/About.vue'
|
||||
import Acknowledgements from '@/views/about/Acknowledgements.vue'
|
||||
import Wanderhome from '@/views/about/Wanderhome.vue'
|
||||
import Home from '@/views/Home.vue'
|
||||
import About from '@/views/About.vue'
|
||||
import Quiz from '@/views/Quiz.vue'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'About',
|
||||
component: About
|
||||
component: Home,
|
||||
meta: {
|
||||
index: 0,
|
||||
svgPath: mdiHome,
|
||||
title: 'Home'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/quiz',
|
||||
name: 'Quiz',
|
||||
component: Quiz
|
||||
component: Quiz,
|
||||
meta: {
|
||||
index: 1,
|
||||
svgPath: mdiAccountQuestion,
|
||||
title: 'Take the Quiz'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'About',
|
||||
component: About,
|
||||
meta: {
|
||||
index: 2,
|
||||
svgPath: mdiInformation,
|
||||
title: 'About'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'About',
|
||||
component: AboutPage,
|
||||
meta: {
|
||||
index: 0,
|
||||
parentIndex: 2,
|
||||
svgPath: mdiInformation,
|
||||
title: 'Background'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'wanderhome',
|
||||
name: 'Wanderhome',
|
||||
component: Wanderhome,
|
||||
meta: {
|
||||
index: 1,
|
||||
parentIndex: 2,
|
||||
svgPath: mdiHandCoin,
|
||||
title: 'About Wanderhome'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'acknowledgements',
|
||||
name: 'Acknowledgements',
|
||||
component: Acknowledgements,
|
||||
meta: {
|
||||
index: 2,
|
||||
parentIndex: 2,
|
||||
svgPath: mdiAccountGroupOutline,
|
||||
title: 'Acknowledgements'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'https://git.vsnt.uk/',
|
||||
name: 'SourceCode',
|
||||
meta: {
|
||||
index: 3,
|
||||
parentIndex: 2,
|
||||
svgPath: mdiCodeTags,
|
||||
title: 'View Source Code'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
const Router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
Router.beforeEach((to, from, next) => {
|
||||
if (to.meta.title != 'Home') {
|
||||
document.title = `Wanderhome Quiz | V.S. - ${to.meta.title}`
|
||||
} else {
|
||||
document.title = `Wanderhome Quiz | V.S.`
|
||||
}
|
||||
next()
|
||||
})
|
||||
|
||||
Router.afterEach( (to, from) => {
|
||||
const enterActiveClass = 'transition-all duration-300 ease-in'
|
||||
const leaveActiveClass = 'transition-all duration-300 ease-out'
|
||||
const baseFromClass = 'transform opacity-0 scale-75'
|
||||
if ( to.fullPath.split('/')[1] !== from.fullPath.split('/')[1] || !from.matched.length ) {
|
||||
const fromIndex = from.meta.parentIndex ? from.meta.parentIndex : from.meta.index
|
||||
const toIndex = to.meta.parentIndex ? to.meta.parentIndex : to.meta.index
|
||||
const slideInDirection = toIndex < fromIndex ? '-translate-x-1/3' : 'translate-x-1/3'
|
||||
const slideOutDirection = toIndex < fromIndex ? 'translate-x-1/3' : '-translate-x-1/3'
|
||||
to.meta.mainEnterActiveClass = enterActiveClass
|
||||
to.meta.mainLeaveActiveClass = leaveActiveClass
|
||||
to.meta.mainEnterFromClass = baseFromClass + ' ' + slideInDirection
|
||||
to.meta.mainLeaveToClass = baseFromClass + ' ' + slideOutDirection
|
||||
} else if ( to.fullPath.split('/')[1] == from.fullPath.split('/')[1] && from.matched.length ) {
|
||||
const fromIndex = from.meta.index
|
||||
const toIndex = to.meta.index
|
||||
const slideInDirection = toIndex < fromIndex ? '-translate-y-1/3' : 'translate-y-1/3'
|
||||
const slideOutDirection = toIndex < fromIndex ? 'translate-y-1/3' : '-translate-y-1/3'
|
||||
to.meta.panelEnterActiveClass = enterActiveClass
|
||||
to.meta.panelLeaveActiveClass = leaveActiveClass
|
||||
to.meta.panelEnterFromClass = baseFromClass + ' ' + slideInDirection
|
||||
to.meta.panelLeaveToClass = baseFromClass + ' ' + slideOutDirection
|
||||
}
|
||||
})
|
||||
|
||||
export default Router
|
||||
@ -1,3 +1,28 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@font-face {
|
||||
font-family: UncialAntiqua;
|
||||
src: local("Uncial Antiqua"),url("./fonts/UncialAntiqua-Regular.ttf");
|
||||
}
|
||||
|
||||
.uncial-antiqua {
|
||||
font-family: 'UncialAntiqua';
|
||||
}
|
||||
|
||||
.text-leader {
|
||||
@apply text-lg;
|
||||
@apply font-light;
|
||||
@apply leading-relaxed;
|
||||
@apply mt-6;
|
||||
@apply mb-4;
|
||||
@apply text-orange-900;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply text-base;
|
||||
@apply leading-relaxed;
|
||||
@apply mt-4;
|
||||
@apply mb-4;
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
<template>
|
||||
|
||||
<div class="home">
|
||||
<h1>About</h1>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@ -1,7 +1,47 @@
|
||||
<script>
|
||||
import Content from '@/components/Content.vue'
|
||||
import AccountQuestion from '@/components/icons/AccountQuestion.vue'
|
||||
export default {
|
||||
components: {
|
||||
AccountQuestion,
|
||||
Content
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
|
||||
<div class="home">
|
||||
<h1>Home</h1>
|
||||
</div>
|
||||
|
||||
<Content>
|
||||
<template v-slot:header>
|
||||
home
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<article class="prose mx-auto">
|
||||
<p class="text-leader">
|
||||
The road ahead is long and meandering.
|
||||
But the journey shapes us as much as we shape it.
|
||||
</p>
|
||||
<p>
|
||||
<em class="uncial-antiqua">Wanderhome</em> by Jay Dragon, published by Possum Creek Games, is a pastoral fantasy table-top role-playing game about anthropomorphic animals journeying across a vast landscape, and what they discover about themselves and the world they inhabit along the way.
|
||||
</p>
|
||||
<p>
|
||||
This quiz will help determine what playbook, or character archetype, you are.
|
||||
You can take the quiz by clicking on the following link:
|
||||
</p>
|
||||
<div class="w-fit mx-auto">
|
||||
<router-link active-class="active-link" class="navlink" to="/quiz">
|
||||
<div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-lime-800 text-white hover:bg-lime-600">
|
||||
<span class="scale-75">
|
||||
<AccountQuestion/>
|
||||
</span>
|
||||
<span>Take the Quiz</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<p class="text-sm">
|
||||
This quiz is not affiliated with, endorsed by, or in any way connected to Possum Creek Games.
|
||||
It is a fan project and a programming exercise by someone who loves Jay’s game.
|
||||
I would nevertheless implore you to play <em>Wanderhome</em> if you haven’t already.
|
||||
</p>
|
||||
</article>
|
||||
</template>
|
||||
</Content>
|
||||
</template>
|
||||
@ -1,7 +1,20 @@
|
||||
<script>
|
||||
import Content from '@/components/Content.vue'
|
||||
export default {
|
||||
components: {
|
||||
Content
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
|
||||
<div class="quiz">
|
||||
<h1>Quiz</h1>
|
||||
<div>
|
||||
<Content>
|
||||
<template v-slot:header>
|
||||
Take the Quiz
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
This is the Quiz Console
|
||||
</template>
|
||||
</Content>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
46
client/src/views/about/About.vue
Normal file
46
client/src/views/about/About.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<script>
|
||||
import Content from '@/components/Content.vue'
|
||||
export default {
|
||||
components: {
|
||||
Content
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div >
|
||||
<Content>
|
||||
<template v-slot:header>
|
||||
Background
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<article class="prose mx-auto">
|
||||
<h2>Why I Made This</h2>
|
||||
<p>
|
||||
Teaching myself programming.
|
||||
</p>
|
||||
<h2>
|
||||
Technical shite
|
||||
</h2>
|
||||
</article>
|
||||
</template>
|
||||
</Content>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.navlink.active-link, .navlink.exact-active-link {
|
||||
@apply bg-orange-500;
|
||||
@apply text-white;
|
||||
@apply hover:bg-orange-600;
|
||||
@apply hover:text-white;
|
||||
}
|
||||
.navlink {
|
||||
@apply hover:text-orange-300;
|
||||
@apply active:text-orange-500;
|
||||
@apply rounded-lg;
|
||||
@apply h-fit;
|
||||
@apply align-middle;
|
||||
@apply transition-all;
|
||||
@apply ease-in-out;
|
||||
@apply duration-500;
|
||||
}
|
||||
</style>
|
||||
30
client/src/views/about/Acknowledgements.vue
Normal file
30
client/src/views/about/Acknowledgements.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<script>
|
||||
import Content from '@/components/Content.vue'
|
||||
export default {
|
||||
components: {
|
||||
Content
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<Content>
|
||||
<template v-slot:header>
|
||||
Acknowledgements
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<article class="prose mx-auto">
|
||||
<p>
|
||||
First and foremost, my thanks to Jay Dragon and Possum Creek Games for creating such a magnificent work of art.
|
||||
</p>
|
||||
<p>
|
||||
I would also like to thank 8bit for his inspiring enthusiasm: I would have arrived at this game a whole lot later if it weren’ for his shilling for it.
|
||||
</p>
|
||||
<p>
|
||||
And I am deeply grateful to my friends along the way: Claire Bath for being the first playtester of the quiz, and
|
||||
</p>
|
||||
</article>
|
||||
</template>
|
||||
</Content>
|
||||
</div>
|
||||
</template>
|
||||
35
client/src/views/about/Index.vue
Normal file
35
client/src/views/about/Index.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<script>
|
||||
import Content from '@/components/Content.vue'
|
||||
import Sidebar from '@/components/sidebar/Index.vue'
|
||||
export default {
|
||||
components: {
|
||||
Content,
|
||||
Sidebar
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex flex-col md:flex-row space-x-6">
|
||||
<div class="flex flex-col w-full md:w-1/3 h-fit">
|
||||
<Sidebar :prefix="$router.options.routes[2].path" :routes="$router.options.routes[2].children">
|
||||
<template v-slot:header>
|
||||
About
|
||||
</template>
|
||||
</Sidebar>
|
||||
</div>
|
||||
<div class="flex w-full md:w-2/3">
|
||||
<router-view v-slot="{ Component, route }" class="w-full" ref="panel" appear>
|
||||
<Transition mode="out-in"
|
||||
:enter-active-class="route.meta.panelEnterActiveClass"
|
||||
:enter-from-class="route.meta.panelEnterFromClass"
|
||||
:leave-active-class="route.meta.panelLeaveActiveClass"
|
||||
:leave-to-class="route.meta.panelLeaveToClass"
|
||||
>
|
||||
<component :is="Component" />
|
||||
</Transition>
|
||||
</router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
24
client/src/views/about/Wanderhome.vue
Normal file
24
client/src/views/about/Wanderhome.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<script>
|
||||
import Content from '@/components/Content.vue'
|
||||
export default {
|
||||
components: {
|
||||
Content
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<Content>
|
||||
<template v-slot:header>
|
||||
About <em>Wanderhome</em>
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<article class="prose mx-auto">
|
||||
<p>
|
||||
<em class="uncial-antiqua">Wanderhome</em> is a pastoral fantasy table-top role-playing game by Jay Dragon, published by Possum Creek Games.
|
||||
</p>
|
||||
</article>
|
||||
</template>
|
||||
</Content>
|
||||
</div>
|
||||
</template>
|
||||
@ -13,5 +13,7 @@ module.exports = {
|
||||
},
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [
|
||||
require('@tailwindcss/typography'),
|
||||
],
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user