Create an About page

This commit is contained in:
Maciej Pędzich 2023-07-01 08:28:08 +02:00
parent 31523c3ef4
commit a100166505
4 changed files with 62 additions and 10 deletions

View File

@ -18,6 +18,12 @@ const showDrawer = ref(false);
<v-navigation-drawer v-model="showDrawer" temporary> <v-navigation-drawer v-model="showDrawer" temporary>
<v-list density="compact" nav> <v-list density="compact" nav>
<v-list-item title="Home" prepend-icon="mdi-home" link to="/" /> <v-list-item title="Home" prepend-icon="mdi-home" link to="/" />
<v-list-item
title="About"
prepend-icon="mdi-information"
link
to="/about"
/>
<v-list-item title="Vote" prepend-icon="mdi-vote" link to="/vote" /> <v-list-item title="Vote" prepend-icon="mdi-vote" link to="/vote" />
<v-list-item <v-list-item
title="Source code" title="Source code"

View File

@ -18,6 +18,11 @@ const routes = [
name: 'Home', name: 'Home',
component: Home component: Home
}, },
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
},
{ {
path: '/vote', path: '/vote',
name: 'Vote', name: 'Vote',
@ -43,14 +48,7 @@ const routes = [
const router = createRouter({ const router = createRouter({
history: createWebHistory(process.env.BASE_URL), history: createWebHistory(process.env.BASE_URL),
routes, routes
scrollBehavior(to, _from, _savedPosition) {
if (to.hash) {
return {
el: to.hash
};
}
}
}); });
export default router; export default router;

48
src/views/About.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<section class="w-100 h-100 px-6 py-6 d-flex flex-column justify-center">
<h2 class="text-h2 text-center mb-6">About</h2>
<div id="about">
<p class="mb-6 text-h5 font-weight-regular">
In RaceMash, you're presented with two randomly picked photographs of F1
cars from the 2022 season. Below them you'll find buttons for placing a
vote for one of the images and an extra one for declaring a draw. Once
you've placed your vote, another pair of images gets picked and the
cycle continues.
</p>
<p class="mb-6 text-h5 font-weight-regular">
Every vote you submit gradually fills up a progress bar and if you reach
25%, 50%, or 75%, you'll be awarded a fun fact about Formula One. If you
submit all votes, you unlock a ranking page that reveals the photos'
final ratings, where the images are ordered by said ratings
descendingly.
</p>
<p class="mb-6 text-h5 font-weight-regular">
But how are these ratings calculated? RaceMash utilises
<a
href="http://www.glicko.net/glicko/glicko2.pdf"
target="_blank"
rel="noopener noreferrer"
>the Glicko-2 system</a
>, where each photo starts with a rating of 1500 points that gets
updated using the aforementioned system every 12 votes you cast.
</p>
<p class="text-h5 font-weight-regular">
This project was developed by
<a
href="https://maciejpedzi.ch"
target="_blank"
rel="noopener noreferrer"
>Maciej Pędzich</a
>
and its source code is available under the Apache 2.0 License.
</p>
</div>
</section>
</template>
<style scoped>
#about {
width: min(65ch, 90%);
margin: 0 auto;
}
</style>

View File

@ -38,8 +38,8 @@ watch(userReachedTriviaMilestone, (valueIsTrue) => {
<section class="w-100 h-100 d-flex flex-column justify-center align-center"> <section class="w-100 h-100 d-flex flex-column justify-center align-center">
<div class="text-center"> <div class="text-center">
<template v-if="userSubmittedAllVotes"> <template v-if="userSubmittedAllVotes">
<h1 class="mb-7 text-h2">Congratulations!</h1> <h1 class="mb-md-5 mb-2 text-md-h2 text-h4">Congratulations!</h1>
<p class="px-4 mb-7 text-h5 font-weight-regular"> <p class="mb-md-6 mb-4 px-6 text-md-h5 text-body-1 font-weight-regular">
You've submitted all votes. Check out the results by clicking the You've submitted all votes. Check out the results by clicking the
button below. button below.
</p> </p>