maciejpedzich/racemash
1
0
Fork 0
mirror of https://github.com/maciejpedzich/racemash.git synced 2024-11-27 16:15:47 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Apply various styling tweaks

Browse Source
This commit is contained in:
Maciej Pędzich 2023-07-01 08:28:26 +02:00
parent a100166505
commit f3ee4ecdfd
2 changed files with 5 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/views/Home.vue
View File

@ -1,58 +1,14 @@
<template> <template>
<section <section
class="w-screen h-screen text-center d-flex flex-column justify-center align-center" class="w-100 h-100 px-6 text-center d-flex flex-column justify-center align-center"
> >
<h1 class="mb-lg-6 mb-3 text-lg-h1 text-h2">RaceMash</h1> <h1 class="mb-md-6 mb-3 text-md-h1 text-h2">RaceMash</h1>
<p class="mb-lg-9 mb-5 text-lg-h4 text-h5 font-weight-regular"> <p class="mb-md-9 mb-5 text-md-h4 text-h5 font-weight-regular">
It's like FaceMash, but with photos of F1 cars It's like FaceMash, but with photos of F1 cars
</p> </p>
<div id="hero-btns" class="d-flex justify-center flex-wrap mb-12"> <div id="hero-btns" class="d-flex justify-center flex-wrap mb-12">
<v-btn color="primary" size="large" to="/vote">Play</v-btn> <v-btn color="primary" size="large" to="/vote">Play</v-btn>
<v-btn size="large" to="#about">Tell me more</v-btn> <v-btn size="large" to="/about">Tell me more</v-btn>
</div>
</section>
<section
id="about"
class="w-100 py-10 d-flex flex-column justify-center bg-grey-darken-4"
>
<h2 class="text-h2 text-center mb-10">About</h2>
<div class="w-50 mx-auto my-0">
<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. Once
you've submitted 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? Each photograph has a base rating
of 1500 points (as well as a few other parameters you don't need to
worry about) that gets updated using
<a
href="http://www.glicko.net/glicko/glicko2.pdf"
target="_blank"
rel="noopener noreferrer"
>the Glicko-2 system</a
>
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> </div>
</section> </section>
</template> </template>

1
src/views/Ranking.vue
View File

File diff suppressed because one or more lines are too long