Profile page design updates

index.js

@@ -433,7 +433,7 @@ io.on('connection', async (socket) => {
         });
 
         socket.on('shoot', async (posX, posY) => {
-            const playerGame = await GInfo.getPlayerGameData(socket);
+            let playerGame = await GInfo.getPlayerGameData(socket);
 
             if (playerGame.data.state === 'action') {
                 if (bships.checkTurn(playerGame.data, socket.session.id)) {
@@ -459,16 +459,15 @@ io.on('connection', async (socket) => {
                             const members = [...roomMemberIterator(playerGame.id)];
 
                             let hostSocket = io.sockets.sockets.get(members[0][0]);
-                            let hostNickname = hostsocket.session.nickname;
+                            let hostNickname = hostSocket.session.nickname;
                             let guestSocket = io.sockets.sockets.get(members[1][0]);
-                            let guestNickname = guestsocket.session.nickname;
+                            let guestNickname = guestSocket.session.nickname;
 
                             hostSocket.emit("game finished", !enemyIdx ? 1 : 0, guestNickname);
                             guestSocket.emit("game finished", !enemyIdx ? 1 : 0, hostNickname);
 
-                            // const stats = await GInfo.getStats(socket);
-                            const playerGame = await GInfo.getPlayerGameData(socket);
-                            auth.saveMatch(playerGame.id, (new Date).getTime() / 1000 - playerGame.data.startTs, "pvp", hostsocket.session.userId, guestsocket.session.userId, playerGame.data.boards, !enemyIdx ? 1 : 0);
+                            playerGame = await GInfo.getPlayerGameData(socket);
+                            auth.saveMatch(playerGame.id, (new Date).getTime() / 1000 - playerGame.data.startTs, "pvp", hostSocket.session.userId, guestSocket.session.userId, playerGame.data.boards, !enemyIdx ? 1 : 0);
 
                             GInfo.resetTimer(playerGame.id);
                             endGame(playerGame.id, !enemyIdx ? 1 : 0);
@@ -516,10 +515,6 @@ function resetUserGame(req) {
 }
 
 function endGame(gameId) {
-    // const boards = redis.json.get(`game:${gameId}`, { keys: [".boards"] });
-    // const hostUid = redis.json.get(`game:${gameId}`, { keys: [".hostUserId"] });
-    // const guestUid = redis.json.get(`game:${gameId}`, { keys: [".hostUserId"] });
-
     let iterator = roomMemberIterator(gameId);
     if (iterator != null) {
         const members = [...iterator];

public/assets/css/main.css

@@ -207,6 +207,7 @@ nav span:hover {
 #profileView {
     display: flex;
     flex-direction: column;
+    align-items: center;
 }
 
 #profileView .profile {
@@ -214,32 +215,95 @@ nav span:hover {
     margin: 3rem;
     flex-direction: row;
     align-items: center;
-    justify-content: space-around;
+    width: 45vw;
+    justify-content: space-between;
+}
+
+#profileView .stats {
+    display: flex;
+    gap: 1rem;
+    width: 60vw;
 }
 
 #profileView .matchList {
     display: flex;
     flex-direction: column;
+    gap: 2rem;
+    flex: 2;
+
+    overflow-y: scroll;
 }
 
-#profileView .matchList div {
+#profileView .matchList::-webkit-scrollbar {
+    display: none;
+}
+
+#profileView .matchList .match {
     background: rgba(24, 24, 24, 1);
     border-radius: 15px;
     cursor: pointer;
+    padding: 0.7rem;
+
+    height: 5rem;
+    overflow: hidden;
+
+    transition: height 0.3s;
 }
 
-#profileView .matchList div .statsButton {
+#profileView .matchList .match .statsButton {
     background-image: linear-gradient(to right, rgb(255, 255, 255, 1) 20%, rgba(0, 0, 0, 0) 40%);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 
+    margin: 0;
+
     background-position: 60%;
     background-size: 400%;
     background-repeat: no-repeat;
-    transition: background-position 0.7s;
+    transition: background-position 0.9s;
 }
 
-#profileView .matchList div:hover .statsButton {
+#profileView .matchList .match:hover {
+    height: 8rem;
+}
+
+#profileView .matchList .match:hover .statsButton {
     background-position: 0%;
 }
+
+#profileView .matchList .match div h1 {
+    margin: 0;
+}
+
+#profileView .matchList .match div {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    margin-top: 1rem;
+}
+
+#profileView .matchlist .match div span {
+    color: white;
+    font-size: 0.8rem;
+    line-height: 1rem;
+}
+
+#profileView .periodal {
+    flex: 1;
+}
+
+#profileView .periodal .stat {
+    margin-bottom: 1.5rem;
+}
+
+#profileView .periodal .stat h1 {
+    margin: 0.5rem;
+}
+
+#profileView .periodal .stat span {
+
+}

public/assets/js/socket-game.js

@@ -195,3 +195,4 @@ 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";

views/index.handlebars

@@ -79,15 +79,26 @@
     <div class="profile">
         <h1>MaciejkaG</h1>
         <div>
-            <span>Odznaki</span>
+            <span>Odznaki: </span>
             <span>Deweloper, Wczesny użytkownik</span>
         </div>
     </div>
+    <div class="stats">
         <div class="matchList">
-        <div>
-            <h1 class="dynamic">Zwycięstwo</h1><span> vs. MaciejkaG</span>
+            <div class="match">
+                <div><h1 class="dynamic danger">Porażka</h1><span> vs. MaciejkaG</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>
+                <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>100</h1><span>meczów zagranych łącznie</span></div>
+            <div class="stat"><h1>50%</h1><span>winrate</span></div>
+        </div>
     </div>
 </div>