(not yet) working profile view

2024-11-30 03:32:56 +01:00 · 2024-03-19 22:33:14 +01:00 · 2024-03-19 22:33:14 +01:00 · 04385552ac
commit 04385552ac
parent 3f97b240aa
6 changed files with 109 additions and 21 deletions
--- a/index.js
+++ b/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", {
-                    helpers: {
-                        error: "Nie udało się zalogować",
-                        fallback: "/login"
-                    }
-                });
+                req.session.userId = result.uid;
+
+                req.session.loggedIn = 1;
+                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)) {
-                    const enemyIdx = socket.request.session.id === playerGame.data.hostId ? 1 : 0;
+                if (bships.checkTurn(playerGame.data, socket.session.id)) {
+                    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);
--- a/public/assets/css/main.css
+++ b/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%;
 }
--- a/public/assets/js/socket.js
+++ b/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;

--- a/public/assets/js/spa_lib.js
+++ b/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 (elem != null) {
-        switchView(elem.id, true);
+    if (!returnLock) {
+        let elem = document.querySelector(`.container[data-path="${window.location.pathname}"]`);
+        if (elem != null) {
+            switchView(elem.id, true);
+        }
    }
 });
--- a/utils/auth.js
+++ b/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}`)) {
-                    resolve({ status: -1 });
+                let timer = await this.redis.get(`loginTimer:${response[0].user_id}`);
+                if (response.length !== 0 && timer && timer > 0) {
+                    resolve({ status: -1, uid: response[0].user_id });
                    return;
                }

--- a/views/index.handlebars
+++ b/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/spa_lib.js"></script>
+<script src="/assets/js/socket-err-handler.js"></script>