Skip to content

Commit

Permalink
added auth and leaderboards
Browse files Browse the repository at this point in the history
  • Loading branch information
@szy-kenn
szy-kenn committed Sep 26, 2024
1 parent 2573bba commit afdc4a4
Show file tree
Hide file tree
Showing 9 changed files with 890 additions and 713 deletions.
2 changes: 1 addition & 1 deletion dist/bundle.js
View file

Large diffs are not rendered by default.

78 changes: 65 additions & 13 deletions public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,33 +149,71 @@
font-family: "Poppins";
line-height: 125%;
}
.leaderboards-container .leaderboard-card {
.leaderboards-container .leaderboard-cards-container {
display: flex;
flex-direction: column;
gap: 1rem;
}
.leaderboards-container .leaderboard-cards-container .leaderboard-card {
display: grid;
grid-template-columns: 1.35fr 8.65fr;
grid-template-columns: 1fr 9fr;
color: var(--secondary);
padding-right: 0.5rem;
gap: 0.5rem;
}
.leaderboards-container .leaderboard-card .leaderboard-ranking {
.leaderboards-container .leaderboard-cards-container .leaderboard-card .leaderboard-ranking {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.leaderboards-container .leaderboard-card .leaderboard-ranking p {
font-size: 1.25rem;
.leaderboards-container .leaderboard-cards-container .leaderboard-card .leaderboard-ranking p {
font-family: "Poppins";
font-size: 0.925rem;
}
.leaderboards-container .leaderboard-card .leaderboard-content {
.leaderboards-container .leaderboard-cards-container .leaderboard-card .leaderboard-content {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
}
.leaderboards-container .leaderboard-card .leaderboard-content .leaderboard-left {
.leaderboards-container .leaderboard-cards-container .leaderboard-card .leaderboard-content .leaderboard-left {
position: relative;
display: flex;
justify-content: flex-start;
width: 100%;
height: 100%;
gap: 1rem;
}
.leaderboards-container .leaderboard-cards-container .leaderboard-card .leaderboard-content .leaderboard-left .leaderboard-card-avatar-container {
position: relative;
border-radius: 999px;
overflow: hidden;
height: 100%;
aspect-ratio: 1;
}
.leaderboards-container .leaderboard-cards-container .leaderboard-card .leaderboard-content .leaderboard-left .leaderboard-card-avatar-container img {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
}
.leaderboards-container .leaderboard-cards-container .leaderboard-card .leaderboard-content .leaderboard-left .leaderboard-content {
position: relative;
width: fit-content;
height: 100%;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 0.25rem;
}
.leaderboards-container .leaderboard-card .leaderboard-content .leaderboard-left .leaderboard-winrate {
.leaderboards-container .leaderboard-cards-container .leaderboard-card .leaderboard-content .leaderboard-left .leaderboard-content .leaderboard-name {
font-size: 1rem;
font-family: "Poppins";
}
.leaderboards-container .leaderboard-cards-container .leaderboard-card .leaderboard-content .leaderboard-left .leaderboard-content .leaderboard-winrate {
opacity: 0.5;
font-size: 0.825rem;
font-size: 0.875rem;
}

.stats-container .word-to-guess {
Expand Down Expand Up @@ -257,7 +295,21 @@
font-size: 0.75em;
font-family: "Poppins";
}
.stats-container .guess-distrib-container .guess-container .guess-value {
.stats-container .guess-distrib-container .guess-container .guess-value-container {
display: flex;
width: 100%;
align-items: center;
gap: 0.25rem;
}
.stats-container .guess-distrib-container .guess-container .guess-value-container .points-added {
font-family: "Poppins";
font-size: 0.75rem;
vertical-align: middle;
padding: 0.25rem 0.5rem;
border: 1px solid rgba(var(--secondary-rgb), 0.25);
border-radius: 25px;
}
.stats-container .guess-distrib-container .guess-container .guess-value-container .guess-value {
font-family: "Poppins";
font-size: 0.75em;
border-radius: 5px;
Expand All @@ -267,10 +319,10 @@
width: fit-content;
min-width: fit-content;
}
.stats-container .guess-distrib-container .guess-container .guess-value p {
.stats-container .guess-distrib-container .guess-container .guess-value-container .guess-value p {
text-align: right;
}
.stats-container .guess-distrib-container .guess-container .guess-value.added {
.stats-container .guess-distrib-container .guess-container .guess-value-container .guess-value.added {
color: var(--background-color);
font-weight: bold;
background-color: var(--filled-color);
Expand Down
172 changes: 35 additions & 137 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,129 +119,12 @@
</div>

<div class="leaderboards-container container">
<div class="header">
<div class="header" style="gap: 1rem;">
<i data-lucide="trophy"></i>
<p>Leaderboards</p>
</div>
<hr class="separator" />
<div class="leaderboard-card">
<div class="leaderboard-ranking">
<p>1</p>
</div>
<div class="leaderboard-content">
<div class="leaderboard-left">
<p class="leaderboard-name">Ken</p>
<p class="leaderboard-winrate">100% WR</p>
</div>
<p>4684</p>
</div>
</div>
<div class="leaderboard-card">
<div class="leaderboard-ranking">
<p>2</p>
</div>
<div class="leaderboard-content">
<div class="leaderboard-left">
<p class="leaderboard-name">Ken</p>
<p class="leaderboard-winrate">100% WR</p>
</div>
<p>4684</p>
</div>
</div>
<div class="leaderboard-card">
<div class="leaderboard-ranking">
<p>3</p>
</div>
<div class="leaderboard-content">
<div class="leaderboard-left">
<p class="leaderboard-name">Ken</p>
<p class="leaderboard-winrate">100% WR</p>
</div>
<p>4684</p>
</div>
</div>
<div class="leaderboard-card">
<div class="leaderboard-ranking">
<p>4</p>
</div>
<div class="leaderboard-content">
<div class="leaderboard-left">
<p class="leaderboard-name">Ken</p>
<p class="leaderboard-winrate">100% WR</p>
</div>
<p>4684</p>
</div>
</div>
<div class="leaderboard-card">
<div class="leaderboard-ranking">
<p>5</p>
</div>
<div class="leaderboard-content">
<div class="leaderboard-left">
<p class="leaderboard-name">Ken</p>
<p class="leaderboard-winrate">100% WR</p>
</div>
<p>4684</p>
</div>
</div>
<div class="leaderboard-card">
<div class="leaderboard-ranking">
<p>6</p>
</div>
<div class="leaderboard-content">
<div class="leaderboard-left">
<p class="leaderboard-name">Ken</p>
<p class="leaderboard-winrate">100% WR</p>
</div>
<p>4684</p>
</div>
</div>
<div class="leaderboard-card">
<div class="leaderboard-ranking">
<p>7</p>
</div>
<div class="leaderboard-content">
<div class="leaderboard-left">
<p class="leaderboard-name">Ken</p>
<p class="leaderboard-winrate">100% WR</p>
</div>
<p>4684</p>
</div>
</div>
<div class="leaderboard-card">
<div class="leaderboard-ranking">
<p>8</p>
</div>
<div class="leaderboard-content">
<div class="leaderboard-left">
<p class="leaderboard-name">Ken</p>
<p class="leaderboard-winrate">100% WR</p>
</div>
<p>4684</p>
</div>
</div>
<div class="leaderboard-card">
<div class="leaderboard-ranking">
<p>9</p>
</div>
<div class="leaderboard-content">
<div class="leaderboard-left">
<p class="leaderboard-name">Ken</p>
<p class="leaderboard-winrate">100% WR</p>
</div>
<p>4684</p>
</div>
</div>
<div class="leaderboard-card">
<div class="leaderboard-ranking">
<p>10</p>
</div>
<div class="leaderboard-content">
<div class="leaderboard-left">
<p class="leaderboard-name">Ken</p>
<p class="leaderboard-winrate">100% WR</p>
</div>
<p>4684</p>
</div>
<div class="leaderboard-cards-container">
</div>
<hr class="separator" />
<div class="google-sign-in">
Expand Down Expand Up @@ -330,44 +213,58 @@
<div class="guess-distrib-container">
<div class="guess-container">
<p class="guess-number">1</p>
<div class="guess-value">
<p>0</p>
<div class="guess-value-container">
<div class="guess-value">
<p>0</p>
</div>
</div>
</div>
<div class="guess-container">
<p class="guess-number">2</p>
<div class="guess-value">
<p>0</p>
<div class="guess-value-container">
<div class="guess-value">
<p>0</p>
</div>
</div>
</div>
<div class="guess-container">
<p class="guess-number">3</p>
<div class="guess-value">
<p>0</p>
<div class="guess-value-container">
<div class="guess-value">
<p>0</p>
</div>
</div>
</div>
<div class="guess-container">
<p class="guess-number">4</p>
<div class="guess-value">
<p>0</p>
<div class="guess-value-container">
<div class="guess-value">
<p>0</p>
</div>
</div>
</div>
<div class="guess-container">
<p class="guess-number">5</p>
<div class="guess-value">
<p>0</p>
<div class="guess-value-container">
<div class="guess-value">
<p>0</p>
</div>
</div>
</div>
<div class="guess-container">
<p class="guess-number">6</p>
<div class="guess-value">
<p>0</p>
<div class="guess-value-container">
<div class="guess-value">
<p>0</p>
</div>
</div>
</div>
<div class="guess-container" id="guess-distrib-7">
<p class="guess-number">7</p>
<div class="guess-value">
<p>0</p>
<div class="guess-value-container">
<div class="guess-value">
<p>0</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -400,7 +297,8 @@
Account
</div>
<hr class="separator" />
<div class="auth-option google-sign-in">
<div class="auth-option google-sign-in" style="flex-direction: column; gap: 1rem; align-items: center;">
<p style="color: var(--secondary); font-family: 'Poppins'; opacity: 0.5;">Nothing else to do here...</p>
<button id="signInWithGoogleBtn" class="sign-in-google-btn">
<div class="img-container">
<img
Expand All @@ -425,12 +323,12 @@
</div>
<form action="">
<div class="input-container">
<input type="text" class="google-signed-in-username-input" name="displayName" id="username" minlength="3" maxlength="20">
<input type="text" class="google-signed-in-username-input" name="displayName" id="username" minlength="3" maxlength="20" >
<label for="username">Username</label>
</div>

<div class="account-btns-container">
<button class="account-settings-save-btn" type="submit" disabled>
<button class="account-settings-save-btn" type="button" disabled>
<p>Save</p>
</button>
<button id="signOutBtn" class="sign-out-google-btn" type="button">
Expand Down
2 changes: 1 addition & 1 deletion public/js/bundle.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit afdc4a4

Please sign in to comment.