From d662414b1903b41d577e4a74d5e685eecbc17316 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Gomo=C5=82a?= <me@maciejka.xyz>
Date: Mon, 25 Mar 2024 08:39:06 +0100
Subject: [PATCH] Menu responsiveness, to-do board

---
 public/assets/css/main.css       | 12 +++++++++
 public/assets/css/responsive.css | 42 ++++++++++++++++++++++++++++++++
 utils/auth.js                    |  2 +-
 views/layouts/main.handlebars    |  1 +
 4 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 public/assets/css/responsive.css

diff --git a/public/assets/css/main.css b/public/assets/css/main.css
index f4da11f..5579742 100644
--- a/public/assets/css/main.css
+++ b/public/assets/css/main.css
@@ -52,6 +52,8 @@ nav span:hover {
 /* index */
 #mainMenuView .modes {
     display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
     gap: 2rem;
 }
 
@@ -74,6 +76,8 @@ nav span:hover {
 /* PvP/index */
 #pvpMenuView .modes {
     display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
     gap: 2rem;
 }
 
@@ -96,6 +100,8 @@ nav span:hover {
 /* PvP/create */
 #pvpCreateView .modes {
     display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
     gap: 2rem;
 }
 
@@ -138,6 +144,8 @@ nav span:hover {
 /* PvP/join */
 #pvpJoinView .modes {
     display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
     gap: 2rem;
 }
 
@@ -182,6 +190,8 @@ nav span:hover {
 /* Preparation */
 #preparingGame .modes {
     display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
     gap: 2rem;
 }
 
@@ -214,6 +224,7 @@ nav span:hover {
     display: flex;
     margin: 3rem;
     flex-direction: row;
+    flex-wrap: wrap;
     align-items: center;
     width: 45vw;
     justify-content: space-between;
@@ -223,6 +234,7 @@ nav span:hover {
     display: flex;
     gap: 1rem;
     width: 60vw;
+    flex-wrap: wrap;
 }
 
 #profileView .matchList {
diff --git a/public/assets/css/responsive.css b/public/assets/css/responsive.css
new file mode 100644
index 0000000..1e061d1
--- /dev/null
+++ b/public/assets/css/responsive.css
@@ -0,0 +1,42 @@
+@media only screen and (max-width: 1280px) {
+    #profileView .stats  {
+        flex-direction: column;
+    }
+
+    #profileView .profile {
+        width: auto;
+        justify-content: center;
+        text-align: center;
+    }
+}
+
+@media only screen and (max-width: 820px) {
+    #pvpCreateView .modes div {
+        max-width: 90vw;
+        height: 19rem;
+        padding: 0.5rem 1.5rem;
+        box-sizing: border-box;
+    }
+
+    #pvpJoinView .modes div {
+        max-width: 90vw;
+        height: 8rem;
+        padding: 2rem 1.5rem;
+    }
+
+    #profileView .matchList .match:hover {
+        height: 16rem;
+    }
+
+    #profileView .stats {
+        width: 90vw;
+    }
+
+    #profileView .matchList .match {
+        height: 7rem;
+    }
+
+    #profileView .match div {
+        flex-direction: column;
+    }
+}
\ No newline at end of file
diff --git a/utils/auth.js b/utils/auth.js
index cd8be22..a72ada4 100644
--- a/utils/auth.js
+++ b/utils/auth.js
@@ -151,7 +151,7 @@ export class MailAuth {
     getProfile(userId) {
         return new Promise((resolve, reject) => {
             const conn = mysql.createConnection(this.mysqlOptions);
-            conn.query(`SELECT nickname, account_creation FROM accounts WHERE user_id = ${conn.escape(userId)}; SELECT ROUND((AVG(statistics.won)) * 100) AS winrate, COUNT(statistics.match_id) AS alltime_matches, COUNT(CASE WHEN (YEAR(matches.date) = YEAR(NOW()) AND MONTH(matches.date) = MONTH(NOW())) THEN matches.match_id END) AS monthly_matches FROM accounts NATURAL JOIN statistics NATURAL JOIN matches WHERE accounts.user_id = ${conn.escape(userId)}; SELECT statistics.match_id, accounts.nickname AS opponent, matches.match_type, statistics.won, matches.duration, matches.date FROM statistics JOIN matches ON matches.match_id = statistics.match_id JOIN accounts ON accounts.user_id = (CASE WHEN matches.host_id != statistics.user_id THEN matches.host_id ELSE matches.guest_id END) WHERE statistics.user_id = ${conn.escape(userId)};`, async (error, response) => {
+            conn.query(`SELECT nickname, account_creation FROM accounts WHERE user_id = ${conn.escape(userId)}; SELECT ROUND((AVG(statistics.won)) * 100) AS winrate, COUNT(statistics.match_id) AS alltime_matches, COUNT(CASE WHEN (YEAR(matches.date) = YEAR(NOW()) AND MONTH(matches.date) = MONTH(NOW())) THEN matches.match_id END) AS monthly_matches FROM accounts NATURAL JOIN statistics NATURAL JOIN matches WHERE accounts.user_id = ${conn.escape(userId)}; SELECT statistics.match_id, accounts.nickname AS opponent, matches.match_type, statistics.won, matches.duration, matches.date FROM statistics JOIN matches ON matches.match_id = statistics.match_id JOIN accounts ON accounts.user_id = (CASE WHEN matches.host_id != statistics.user_id THEN matches.host_id ELSE matches.guest_id END) WHERE statistics.user_id = ${conn.escape(userId)} LIMIT 10;`, async (error, response) => {
                 if (error) reject(error);
                 else {
                     if (response[0].length === 0 || response[1].length === 0) {
diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars
index 79502a4..775ef8b 100644
--- a/views/layouts/main.handlebars
+++ b/views/layouts/main.handlebars
@@ -12,6 +12,7 @@
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
     <link rel="stylesheet" href="/assets/css/board.css">
     <link rel="stylesheet" href="/assets/css/main.css">
+    <link rel="stylesheet" href="/assets/css/responsive.css">
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
 </head>
 <body>