(not yet) working profile view

index.js

@@ -144,12 +144,10 @@ app.post('/api/login', (req, res) => {
                 req.session.loggedIn = 1;
                 res.redirect('/auth');
             } else if (result.status === -1) {
-                res.render("error", {
+                req.session.userId = result.uid;
-                    helpers: {
+
-                        error: "Nie udało się zalogować",
+                req.session.loggedIn = 1;
-                        fallback: "/login"
+                res.redirect('/auth');
-                    }
-                });
             } else {
                 res.sendStatus(500);
             }
@@ -220,7 +218,7 @@ app.get("/*", (req, res) => {
 
 io.on('connection', async (socket) => {
     const req = socket.request;
-    const session = socket.request.session;
+    const session = req.session;
     socket.session = session;
     if (session.nickname==null) {
         socket.disconnect();
@@ -369,7 +367,7 @@ io.on('connection', async (socket) => {
                 for (let i = 0; i < members.length; i++) {
                     const sid = members[i][0];
                     const socket = io.sockets.sockets.get(sid);
-                    if (socket.request.session.id === playerGame.data.hostId) {
+                    if (socket.session.id === playerGame.data.hostId) {
                         io.to(sid).emit('player idx', 0);
                     } else {
                         io.to(sid).emit('player idx', 1);
@@ -438,8 +436,8 @@ io.on('connection', async (socket) => {
             const playerGame = await GInfo.getPlayerGameData(socket);
 
             if (playerGame.data.state === 'action') {
-                if (bships.checkTurn(playerGame.data, socket.request.session.id)) {
+                if (bships.checkTurn(playerGame.data, socket.session.id)) {
-                    const enemyIdx = socket.request.session.id === playerGame.data.hostId ? 1 : 0;
+                    const enemyIdx = socket.session.id === playerGame.data.hostId ? 1 : 0;
 
                     let hit = await GInfo.shootShip(socket, posX, posY);
 
@@ -461,16 +459,16 @@ io.on('connection', async (socket) => {
                             const members = [...roomMemberIterator(playerGame.id)];
 
                             let hostSocket = io.sockets.sockets.get(members[0][0]);
-                            let hostNickname = hostSocket.request.session.nickname;
+                            let hostNickname = hostsocket.session.nickname;
                             let guestSocket = io.sockets.sockets.get(members[1][0]);
-                            let guestNickname = guestSocket.request.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.request.session.userId, guestSocket.request.session.userId, playerGame.data.boards, !enemyIdx ? 1 : 0);
+                            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);

public/assets/css/main.css

@@ -25,6 +25,26 @@
     align-items: center;
 }
 
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.7rem;
+    margin: 0.5rem;
+    font-family: 'Roboto Mono', monospace;
+}
+
+nav span {
+    cursor: pointer;
+    user-select: none;
+    padding: 0.2rem;
+}
+
+nav span:hover {
+    text-decoration: underline;
+    
+}
+
 .header {
     text-align: center;
 }
@@ -181,4 +201,45 @@
 #preparingGame .modes div * {
     margin: 0;
     width: 100%;
+}
+
+/* Profile */
+#profileView {
+    display: flex;
+    flex-direction: column;
+}
+
+#profileView .profile {
+    display: flex;
+    margin: 3rem;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+}
+
+#profileView .matchList {
+    display: flex;
+    flex-direction: column;
+}
+
+#profileView .matchList div {
+    background: rgba(24, 24, 24, 1);
+    border-radius: 15px;
+    cursor: pointer;
+}
+
+#profileView .matchList div .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;
+
+    background-position: 60%;
+    background-size: 400%;
+    background-repeat: no-repeat;
+    transition: background-position 0.7s;
+}
+
+#profileView .matchList div:hover .statsButton {
+    background-position: 0%;
 }

public/assets/js/socket.js

@@ -21,9 +21,16 @@ socket.on("gameReady", (gameId) => {
 });
 
 var nickname;
+var myProfile;
+
+socket.emit("my profile data", (profile) => {
+    myProfile = profile;
+});
 
 socket.emit("whats my nick", (myNickname) => {
     nickname = myNickname;
+    $("#profileButton").html(nickname);
+    console.log(nickname);
 });
 
 socket.on("game start", (gameInfo) => {
@@ -44,6 +51,7 @@ $("#createGameButton").on("click", function () {
             case "ok":
                 $("#createGameCode").val(response.gameCode);
                 switchView("pvpCreateView");
+                returnLock = true;
                 lockUI(false);
                 break;
 

public/assets/js/spa_lib.js

@@ -1,4 +1,5 @@
 var activeView;
+var returnLock = false;
 
 function switchView(viewContainerId, useReplaceState=false) {
     $(`.container`).css({ opacity: 0, animation: "OutAnim 0.2s 1 ease" });
@@ -46,8 +47,10 @@ window.addEventListener("load", () => {
 
 addEventListener("popstate", (event) => {
     event.preventDefault();
-    let elem = document.querySelector(`.container[data-path="${window.location.pathname}"]`);
+    if (!returnLock) {
-    if (elem != null) {
+        let elem = document.querySelector(`.container[data-path="${window.location.pathname}"]`);
-        switchView(elem.id, true);
+        if (elem != null) {
+            switchView(elem.id, true);
+        }
     }
 });

utils/auth.js

@@ -66,8 +66,9 @@ export class MailAuth {
             const conn = mysql.createConnection(this.mysqlOptions);
             conn.query(`SELECT user_id, nickname FROM accounts WHERE email = ${conn.escape(email)}`, async (error, response) => {
                 if (error) { reject(error); return; }
-                if (response.length !== 0 && await this.redis.get(`loginTimer:${response[0].user_id}`)) {
+                let timer = await this.redis.get(`loginTimer:${response[0].user_id}`);
-                    resolve({ status: -1 });
+                if (response.length !== 0 && timer && timer > 0) {
+                    resolve({ status: -1, uid: response[0].user_id });
                     return;
                 }
 

views/index.handlebars

@@ -1,4 +1,5 @@
-<h1 class="header">Statki</h1>
+<nav><span>Strona główna</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>
         
@@ -74,6 +75,22 @@
     </div>
 </div>
 
+<div class="container" id="profileView" data-title="Statki / Profil" data-path="/profile">
+    <div class="profile">
+        <h1>MaciejkaG</h1>
+        <div>
+            <span>Odznaki</span>
+            <span>Deweloper, Wczesny użytkownik</span>
+        </div>
+    </div>
+    <div class="matchList">
+        <div>
+            <h1 class="dynamic">Zwycięstwo</h1><span> vs. MaciejkaG</span>
+            <h2 class="statsButton">Kliknij by wyświetlić statystyki</h2>
+        </div>
+    </div>
+</div>
+
+<script src="/assets/js/spa_lib.js"></script>
 <script src="/assets/js/socket.js"></script>
-<script src="/assets/js/socket-err-handler.js"></script>
+<script src="/assets/js/socket-err-handler.js"></script>
-<script src="/assets/js/spa_lib.js"></script>