From a100166505ce83ba53ab6d67f5fa23e371d1e7a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20P=C4=99dzich?= <contact@maciejpedzi.ch>
Date: Sat, 1 Jul 2023 08:28:08 +0200
Subject: [PATCH] Create an About page

---
 src/components/ui/NavMenu.vue |  6 +++++
 src/router/index.ts           | 14 +++++-----
 src/views/About.vue           | 48 +++++++++++++++++++++++++++++++++++
 src/views/Vote.vue            |  4 +--
 4 files changed, 62 insertions(+), 10 deletions(-)
 create mode 100644 src/views/About.vue

diff --git a/src/components/ui/NavMenu.vue b/src/components/ui/NavMenu.vue
index 9b40c3e..303f98a 100644
--- a/src/components/ui/NavMenu.vue
+++ b/src/components/ui/NavMenu.vue
@@ -18,6 +18,12 @@ const showDrawer = ref(false);
   <v-navigation-drawer v-model="showDrawer" temporary>
     <v-list density="compact" nav>
       <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="Source code"
diff --git a/src/router/index.ts b/src/router/index.ts
index cb173f4..13c3b91 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -18,6 +18,11 @@ const routes = [
     name: 'Home',
     component: Home
   },
+  {
+    path: '/about',
+    name: 'About',
+    component: () => import('../views/About.vue')
+  },
   {
     path: '/vote',
     name: 'Vote',
@@ -43,14 +48,7 @@ const routes = [
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
-  routes,
-  scrollBehavior(to, _from, _savedPosition) {
-    if (to.hash) {
-      return {
-        el: to.hash
-      };
-    }
-  }
+  routes
 });
 
 export default router;
diff --git a/src/views/About.vue b/src/views/About.vue
new file mode 100644
index 0000000..7272282
--- /dev/null
+++ b/src/views/About.vue
@@ -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>
diff --git a/src/views/Vote.vue b/src/views/Vote.vue
index 5868d20..0310827 100644
--- a/src/views/Vote.vue
+++ b/src/views/Vote.vue
@@ -38,8 +38,8 @@ watch(userReachedTriviaMilestone, (valueIsTrue) => {
   <section class="w-100 h-100 d-flex flex-column justify-center align-center">
     <div class="text-center">
       <template v-if="userSubmittedAllVotes">
-        <h1 class="mb-7 text-h2">Congratulations!</h1>
-        <p class="px-4 mb-7 text-h5 font-weight-regular">
+        <h1 class="mb-md-5 mb-2 text-md-h2 text-h4">Congratulations!</h1>
+        <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
           button below.
         </p>