Profile page improvements

index.js

@@ -230,6 +230,12 @@ io.on('connection', async (socket) => {
             callback(session.nickname);
         });
 
+        socket.on('my profile', (callback) => {
+            auth.getProfile(session.userId).then((profile) => {
+                callback(profile);
+            });
+        });
+
         socket.on('create lobby', (callback) => {
             if (socket.rooms.size === 1) {
                 let id = genID();

nodemon.json

@@ -0,0 +1,7 @@
+{
+    "ignore": [
+        "public/*",
+        "views/*",
+        "utils/mail/*"
+    ]
+}

public/assets/css/main.css

@@ -257,6 +257,7 @@ nav span:hover {
     -webkit-text-fill-color: transparent;
 
     margin: 0;
+    margin-bottom: 1rem;
 
     background-position: 60%;
     background-size: 400%;
@@ -265,7 +266,7 @@ nav span:hover {
 }
 
 #profileView .matchList .match:hover {
-    height: 8rem;
+    height: 11rem;
 }
 
 #profileView .matchList .match:hover .statsButton {
@@ -303,7 +304,3 @@ nav span:hover {
 #profileView .periodal .stat h1 {
     margin: 0.5rem;
 }
-
-#profileView .periodal .stat span {
-
-}

public/assets/js/socket-game.js

@@ -195,5 +195,8 @@ socket.on('turn update', (turnData) => {
 socket.on('player left', () => {
     window.location.replace("/");
 });
-// SELECT ROUND((1 - 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.nickname = "MaciejkaG";
+
-// 
+// Profile stats: 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.nickname = "MaciejkaG";
+// Match history: 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 = "c231c4f7-e179-11ee-920b-fa163e32c013";
+// Profile: SELECT nickname, account_creation FROM accounts WHERE user_id = "c231c4f7-e179-11ee-920b-fa163e32c013";
+// Badges: SELECT badge, achievement_date FROM badges WHERE user_id = "c231c4f7-e179-11ee-920b-fa163e32c013";

public/assets/js/socket.js

@@ -23,8 +23,39 @@ socket.on("gameReady", (gameId) => {
 var nickname;
 var myProfile;
 
-socket.emit("my profile data", (profile) => {
+socket.emit("my profile", (profile) => {
-    myProfile = profile;
+    console.log(profile);
+    // General profile data
+    let options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+    $("#playerSince").html(new Date(profile.profile.account_creation).toLocaleDateString("pl-PL", options));
+    $("#nickname").html(profile.profile.nickname);
+
+    // Profile stats
+    $("#monthlyPlayed").html(profile.stats.monthly_matches);
+    $("#totalPlayed").html(profile.stats.alltime_matches);
+    $("#winrate").html(`${profile.stats.winrate}%`);
+
+    var matchHistory = profile.matchHistory;
+    var matchHistoryDOM = "";
+
+    options = { hour: '2-digit', minute: '2-digit', time: 'numeric', weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+
+    for (let i = 0; i < matchHistory.length; i++) {
+        const match = matchHistory[i];
+
+        console.log();
+
+        let date = new Date(match.date).toLocaleDateString("pl-PL", options);
+
+        const minutes = Math.floor(match.duration / 60).toLocaleString('pl-PL', { minimumIntegerDigits: 2, useGrouping: false });
+        const seconds = (match.duration - minutes * 60).toLocaleString('pl-PL', { minimumIntegerDigits: 2, useGrouping: false });
+        
+        const duration = `${minutes}:${seconds}`;
+
+        matchHistoryDOM += `<div class="match" data-matchid="${match.match_id}"><div><h1 class="dynamic${match.won === 1 ? "" : " danger"}">${match.won === 1 ? "Zwycięstwo" : "Porażka"}</h1><span> vs. ${match.match_type === "pvp" ? match.opponent : "AI"}</span></div><h2 class="statsButton">Kliknij by wyświetlić statystyki</h2><span>${date}</span><br><span>${duration}</span></div>`;
+    }
+
+    $(".matchList").html(matchHistoryDOM);
 });
 
 socket.emit("whats my nick", (myNickname) => {

utils/auth.js

@@ -18,6 +18,7 @@ const __dirname = path.dirname(__filename);
 export class MailAuth {
     constructor(redis, options, mysqlOptions) {
         this.redis = redis;
+        mysqlOptions.multipleStatements = true;
         this.mysqlOptions = mysqlOptions;
 
         this.mail = nodemailer.createTransport({
@@ -147,6 +148,25 @@ 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) => {
+                if (error) reject(error);
+                else {
+                    if (response[0].length === 0 || response[1].length === 0) {
+                        reject(0);
+                        return;
+                    }
+
+                    const [[profile], [stats], matchHistory] = response;
+
+                    resolve({ profile, stats, matchHistory });
+                }
+            });
+        });
+    }
+
     async finishVerification(uid, authCode) {
         authCode = authCode.replace(/\s+/g, "");
         const rUid = await this.redis.get(`codeAuth:${authCode}`);

views/index.handlebars

@@ -1,4 +1,4 @@
-<nav><span>Strona główna</span> <span id="profileButton" onclick="switchView('profileView')">Profil</span></nav>
+<nav><span onclick="switchView('mainMenuView')">Menu główne</span> <span id="profileButton" onclick="switchView('profileView')">Profil</span></nav>
 {{!-- <h1 class="header">Statki</h1> --}}
 <div class="container" id="mainMenuView" data-title="Statki" data-path="/">
     <div>
@@ -77,27 +77,27 @@
 
 <div class="container" id="profileView" data-title="Statki / Profil" data-path="/profile">
     <div class="profile">
-        <h1>MaciejkaG</h1>
+        <h1 id="nickname">Wczytywanie...</h1>
         <div>
-            <span>Odznaki: </span>
+            <span>Gracz od: </span>
-            <span>Deweloper, Wczesny użytkownik</span>
+            <span id="playerSince">-</span>
         </div>
     </div>
     <div class="stats">
         <div class="matchList">
             <div class="match">
-                <div><h1 class="dynamic danger">Porażka</h1><span> vs. MaciejkaG</span></div>
+                <div><h1 class="dynamic danger">Porażka</h1><span> vs. Wczytywanie...</span></div>
                 <h2 class="statsButton">Kliknij by wyświetlić statystyki</h2>
             </div>
             <div class="match">
-                <div><h1 class="dynamic">Zwycięstwo</h1><span> vs. MaciejkaG</span></div>
+                <div><h1 class="dynamic">Zwycięstwo</h1><span> vs. Wczytywanie...</span></div>
                 <h2 class="statsButton">Kliknij by wyświetlić statystyki</h2>
             </div>
         </div>
         <div class="periodal">
-            <div class="stat"><h1>10</h1><span>meczów zagranych w ostatnim miesiącu</span></div>
+            <div class="stat"><h1 id="monthlyPlayed">-</h1><span>meczów zagranych w ostatnim miesiącu</span></div>
-            <div class="stat"><h1>100</h1><span>meczów zagranych łącznie</span></div>
+            <div class="stat"><h1 id="totalPlayed">-</h1><span>meczów zagranych łącznie</span></div>
-            <div class="stat"><h1>50%</h1><span>winrate</span></div>
+            <div class="stat"><h1 id="winrate">-</h1><span>winrate</span></div>
         </div>
     </div>
 </div>