From 66b00c81e140afb4cba53bdfd7ea2b79f1fb110a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Gomo=C5=82a?= Date: Fri, 22 Mar 2024 11:47:12 +0100 Subject: [PATCH] Profile page design updates --- index.js | 15 +++---- public/assets/css/main.css | 74 ++++++++++++++++++++++++++++++--- public/assets/js/socket-game.js | 3 +- views/index.handlebars | 21 +++++++--- 4 files changed, 92 insertions(+), 21 deletions(-) diff --git a/index.js b/index.js index dc5cd55..ab322ea 100644 --- a/index.js +++ b/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]; diff --git a/public/assets/css/main.css b/public/assets/css/main.css index b4ca097..46a1f57 100644 --- a/public/assets/css/main.css +++ b/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 { + } \ No newline at end of file diff --git a/public/assets/js/socket-game.js b/public/assets/js/socket-game.js index 48f855a..08de7d4 100644 --- a/public/assets/js/socket-game.js +++ b/public/assets/js/socket-game.js @@ -194,4 +194,5 @@ socket.on('turn update', (turnData) => { socket.on('player left', () => { window.location.replace("/"); -}); \ No newline at end of file +}); +// 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"; \ No newline at end of file diff --git a/views/index.handlebars b/views/index.handlebars index 596dd9f..b8f96ba 100644 --- a/views/index.handlebars +++ b/views/index.handlebars @@ -79,14 +79,25 @@

MaciejkaG

- Odznaki + Odznaki: Deweloper, Wczesny użytkownik
-
-
-

Zwycięstwo

vs. MaciejkaG -

Kliknij by wyświetlić statystyki

+
+
+
+

Porażka

vs. MaciejkaG
+

Kliknij by wyświetlić statystyki

+
+
+

Zwycięstwo

vs. MaciejkaG
+

Kliknij by wyświetlić statystyki

+
+
+
+

10

meczów zagranych w ostatnim miesiącu
+

100

meczów zagranych łącznie
+

50%

winrate