mirror of
https://github.com/maciejpedzich/racemash.git
synced 2024-11-10 00:53:03 +01:00
Create an About page
This commit is contained in:
parent
31523c3ef4
commit
a100166505
@ -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"
|
||||||
|
@ -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
48
src/views/About.vue
Normal 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>
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user