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" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<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>
|
</head>
|
||||||
<body class="bg-green-100 h-screen">
|
<body class="bg-lime-100 h-screen">
|
||||||
<div class="bg-green-100" id="app"></div>
|
<div class="bg-lime-100" id="app"></div>
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script type="module" src="/src/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
62
client/package-lock.json
generated
62
client/package-lock.json
generated
@ -14,6 +14,7 @@
|
|||||||
"vue-router": "^4.1.4"
|
"vue-router": "^4.1.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@tailwindcss/typography": "^0.5.4",
|
||||||
"@vitejs/plugin-vue": "^3.0.3",
|
"@vitejs/plugin-vue": "^3.0.3",
|
||||||
"autoprefixer": "^10.4.8",
|
"autoprefixer": "^10.4.8",
|
||||||
"postcss": "^8.4.16",
|
"postcss": "^8.4.16",
|
||||||
@ -93,6 +94,20 @@
|
|||||||
"node": ">= 8"
|
"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": {
|
"node_modules/@vitejs/plugin-vue": {
|
||||||
"version": "3.0.3",
|
"version": "3.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.0.3.tgz",
|
||||||
@ -1013,6 +1028,24 @@
|
|||||||
"node": ">=10"
|
"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": {
|
"node_modules/magic-string": {
|
||||||
"version": "0.25.9",
|
"version": "0.25.9",
|
||||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
|
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
|
||||||
@ -1621,6 +1654,17 @@
|
|||||||
"fastq": "^1.6.0"
|
"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": {
|
"@vitejs/plugin-vue": {
|
||||||
"version": "3.0.3",
|
"version": "3.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.0.3.tgz",
|
||||||
@ -2207,6 +2251,24 @@
|
|||||||
"integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
|
"integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
|
||||||
"dev": true
|
"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": {
|
"magic-string": {
|
||||||
"version": "0.25.9",
|
"version": "0.25.9",
|
||||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
|
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
|
||||||
|
|||||||
@ -15,6 +15,7 @@
|
|||||||
"vue-router": "^4.1.4"
|
"vue-router": "^4.1.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@tailwindcss/typography": "^0.5.4",
|
||||||
"@vitejs/plugin-vue": "^3.0.3",
|
"@vitejs/plugin-vue": "^3.0.3",
|
||||||
"autoprefixer": "^10.4.8",
|
"autoprefixer": "^10.4.8",
|
||||||
"postcss": "^8.4.16",
|
"postcss": "^8.4.16",
|
||||||
|
|||||||
@ -1,16 +1,22 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
// This starter template is using Vue 3 <script setup> SFCs
|
import Navbar from '@/components/navbar/Index.vue'
|
||||||
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
|
|
||||||
import Navbar from '@/components/Navbar.vue'
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<div class="container p-3 max-w-5xl mx-auto">
|
<div class="container px-3 py-20 max-w-5xl mx-auto overflow-hidden">
|
||||||
<router-view></router-view>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
</style>
|
</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'
|
import { mdiMenu } from '@mdi/js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "menu",
|
name: "MdiMenu",
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
SvgIcon
|
SvgIcon
|
||||||
@ -16,7 +16,7 @@ export default {
|
|||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
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 { createApp } from 'vue'
|
||||||
import '@/style.css'
|
import '@/style.css'
|
||||||
import App from '@/App.vue'
|
import App from '@/App.vue'
|
||||||
import router from '@/router'
|
import Router from '@/router'
|
||||||
createApp(App).use(router).mount('#app')
|
const app = createApp(App)
|
||||||
|
app.use(Router)
|
||||||
|
app.mount('#app')
|
||||||
|
|||||||
@ -1,30 +1,127 @@
|
|||||||
import { createRouter, createWebHistory } from 'vue-router'
|
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 Home from '@/views/Home.vue'
|
||||||
import About from '@/views/About.vue'
|
|
||||||
import Quiz from '@/views/Quiz.vue'
|
import Quiz from '@/views/Quiz.vue'
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'Home',
|
name: 'Home',
|
||||||
component: Home
|
component: Home,
|
||||||
},
|
meta: {
|
||||||
{
|
index: 0,
|
||||||
path: '/about',
|
svgPath: mdiHome,
|
||||||
name: 'About',
|
title: 'Home'
|
||||||
component: About
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/quiz',
|
path: '/quiz',
|
||||||
name: '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(),
|
history: createWebHistory(),
|
||||||
routes
|
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 base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@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>
|
<template>
|
||||||
|
<Content>
|
||||||
<div class="home">
|
<template v-slot:header>
|
||||||
<h1>Home</h1>
|
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>
|
</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>
|
</template>
|
||||||
@ -1,7 +1,20 @@
|
|||||||
|
<script>
|
||||||
|
import Content from '@/components/Content.vue'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Content
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
<div>
|
||||||
<div class="quiz">
|
<Content>
|
||||||
<h1>Quiz</h1>
|
<template v-slot:header>
|
||||||
|
Take the Quiz
|
||||||
|
</template>
|
||||||
|
<template v-slot:content>
|
||||||
|
This is the Quiz Console
|
||||||
|
</template>
|
||||||
|
</Content>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</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: {},
|
extend: {},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [
|
||||||
|
require('@tailwindcss/typography'),
|
||||||
|
],
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user