From 59bd580136637b0fdc1ca86329d3378409022629 Mon Sep 17 00:00:00 2001 From: y-syo Date: Tue, 30 Sep 2025 16:05:15 +0200 Subject: [PATCH] =?UTF-8?q?=E3=80=8C=F0=9F=8F=97=EF=B8=8F=E3=80=8D=20wip:?= =?UTF-8?q?=20work=20in=20progress,=20not=20done=20yet.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/front/index.html | 2 +- src/front/static/ts/main.ts | 44 +++++++++++++++++++++-- src/front/static/ts/views/Game.ts | 18 ++++++++-- src/front/static/ts/views/LoginPage.ts | 16 ++++++--- src/front/static/ts/views/RegisterPage.ts | 25 +++++++++---- 5 files changed, 88 insertions(+), 17 deletions(-) diff --git a/src/front/index.html b/src/front/index.html index 97c4aea..0e7465d 100644 --- a/src/front/index.html +++ b/src/front/index.html @@ -16,7 +16,7 @@
diff --git a/src/front/static/ts/main.ts b/src/front/static/ts/main.ts index 8ce2cc8..910e75e 100644 --- a/src/front/static/ts/main.ts +++ b/src/front/static/ts/main.ts @@ -1,4 +1,41 @@ -const navigationManager = url => { +export async function isLogged(): boolean { + let uuid_req = await fetch("http://localhost:3001/me", { + method: "GET", + credentials: "include", + }); + if (uuid_req.status == 200) + { + let uuid = await uuid_req.json(); + document.cookie = `uuid=${uuid.user};max-age=${60*60*24*7}`; + + const old_button = document.getElementById("profile-button"); + const logged_dropdown = document.createElement("button"); + logged_dropdown.innerHTML = "logged in, more like locked in ahah i'm gonna kill myself the 12th of October"; + logged_dropdown.classList.add("text-neutral-900", "hover:text-neutral-700", "dark:text-white", "dark:hover:text-neutral-400"); + logged_dropdown.id = "profile-button"; + + // add the dropdown button and the dropdown logic + + old_button.replaceWith(logged_dropdown); + return true; + } + else // 401 + { + document.cookie = `uuid=;max-age=0`; + const old_button = document.getElementById("profile-button"); + const login_button = document.createElement("a"); + login_button.id = "profile-button"; + login_button.text = "login"; + login_button.classList.add("text-neutral-900", "hover:text-neutral-700", "dark:text-white", "dark:hover:text-neutral-400"); + login_button.href = "/login"; + login_button.setAttribute("data-link", ""); + + old_button.replaceWith(login_button); + return false; + } +} + +export const navigationManager = url => { history.pushState(null, null, url); router(); }; @@ -14,6 +51,8 @@ const routes = [ { path: "/login", view: () => import("./views/LoginPage.ts") }, { path: "/register", view: () => import("./views/RegisterPage.ts") }, + + { path: "/tetris", view: () => import("./views/Tetris.ts") }, ]; const router = async () => { @@ -30,7 +69,7 @@ const router = async () => { if (view) view.running = false; - console.log(match); + //console.log(match); const module = await match.route.view(); view = new module.default(); @@ -42,6 +81,7 @@ const router = async () => { window.addEventListener("popstate", router); document.addEventListener("DOMContentLoaded", () => { + isLogged(); document.body.addEventListener("click", e=> { if (e.target.matches("[data-link]")) diff --git a/src/front/static/ts/views/Game.ts b/src/front/static/ts/views/Game.ts index 3bd39b5..b814e1b 100644 --- a/src/front/static/ts/views/Game.ts +++ b/src/front/static/ts/views/Game.ts @@ -59,9 +59,9 @@ export default class extends Aview { document.addEventListener("keyup", e => { keys[e.key] = false; }); function movePaddles() { - if (keys["w"] && leftPaddleY > 0) + if ((keys["w"] || keys["W"]) && leftPaddleY > 0) leftPaddleY -= paddleSpeed * elapsed; - if (keys["s"] && leftPaddleY < canvas.height - paddleHeight) + if ((keys["s"] || keys["S"]) && leftPaddleY < canvas.height - paddleHeight) leftPaddleY += paddleSpeed * elapsed; if (keys["ArrowUp"] && rightPaddleY > 0) rightPaddleY -= paddleSpeed * elapsed; @@ -116,7 +116,14 @@ export default class extends Aview { p1_score++; if (p1_score === 3 || p2_score === 3) + { + // ------------------------------------------------------------------------------------------------------------------------------------------ + // + // insert the fetch to the ScoreStore api here + // + // ------------------------------------------------------------------------------------------------------------------------------------------ match_over = true; + } else { countdown = 3; @@ -191,7 +198,6 @@ export default class extends Aview { moveBall(); } draw(); - console.log(game_playing); if (!game_playing) startCountdown(); if (this.running) @@ -210,6 +216,12 @@ export default class extends Aview { countdownTimer = performance.now(); }); + // -------------------------------------------------------------------------------------------------------------------------------------------------------- + // + // insert logic to set both names + // + // -------------------------------------------------------------------------------------------------------------------------------------------------------- + requestAnimationFrame(gameLoop); } } diff --git a/src/front/static/ts/views/LoginPage.ts b/src/front/static/ts/views/LoginPage.ts index c8dca62..fd7ba3e 100644 --- a/src/front/static/ts/views/LoginPage.ts +++ b/src/front/static/ts/views/LoginPage.ts @@ -1,4 +1,5 @@ import Aview from "./Aview.ts" +import { isLogged, navigationManager } from "../main.ts" export default class extends Aview { @@ -31,28 +32,33 @@ export default class extends Aview { const password = (document.getElementById("password") as HTMLInputElement).value; try { - const response = await fetch("http://localhost:3001/login", { + const data_req = await fetch("http://localhost:3001/login", { method: "POST", headers: { "Content-Type": "application/json", }, credentials: "include", body: JSON.stringify({ user: username, password: password }), }); - const data = await response.json(); + const data = await data_req.json(); - if (response.status === 200) + if (data_req.status === 200) { + isLogged(); navigationManager("/"); } - else if (response.status === 400) + else if (data_req.status === 400) { document.getElementById("login-error-message").innerHTML = "error: " + data.error; document.getElementById("login-error-message").classList.remove("hidden"); } + else + { + throw new Error("invalid response"); + } } catch (error) { - console.log(error); + console.error(error); document.getElementById("login-error-message").innerHTML = "error: server error, try again later..."; document.getElementById("login-error-message").classList.remove("hidden"); } diff --git a/src/front/static/ts/views/RegisterPage.ts b/src/front/static/ts/views/RegisterPage.ts index 13fdf55..0701662 100644 --- a/src/front/static/ts/views/RegisterPage.ts +++ b/src/front/static/ts/views/RegisterPage.ts @@ -1,4 +1,5 @@ import Aview from "./Aview.ts" +import { isLogged, navigationManager } from "../main.ts" export default class extends Aview { @@ -15,7 +16,7 @@ export default class extends Aview { - + @@ -31,28 +32,40 @@ export default class extends Aview { const password = (document.getElementById("password") as HTMLInputElement).value; try { - const response = await fetch("http://localhost:3001/register", { + const data_req = await fetch("http://localhost:3001/register", { method: "POST", headers: { "Content-Type": "application/json", }, credentials: "include", body: JSON.stringify({ user: username, password: password }), }); - const data = await response.json(); + const data = await data_req.json(); - if (response.status === 200) + if (data_req.status === 200) { + let uuid_req = await fetch("http://localhost:3001/me", { + method: "GET", + credentials: "include", + }); + let uuid = await uuid_req.json(); + document.cookie = `uuid=${uuid.user};max-ages=${60*60*24*7}`; + console.log(document.cookie); + isLogged(); navigationManager("/"); } - else if (response.status === 400) + else if (data_req.status === 400) { document.getElementById("login-error-message").innerHTML = "error: " + data.error; document.getElementById("login-error-message").classList.remove("hidden"); } + else + { + throw new Error("invalid response"); + } } catch (error) { - console.log(error); + console.error(error); document.getElementById("login-error-message").innerHTML = "error: server error, try again later..."; document.getElementById("login-error-message").classList.remove("hidden"); }