42_adjoly/knl_meowscendence
1
0
Fork 0
mirror of https://github.com/KeyZox71/knl_meowscendence.git synced 2025-10-14 10:54:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

「🚧」 test(src/front): testing things, might broke.

Browse Source
This commit is contained in:
y-syo
2025-10-01 22:12:50 +02:00
parent 59bd580136
commit 35f5df4924
4 changed files with 71 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/front/static/ts/main.ts
View File

@ -3,20 +3,53 @@ export async function isLogged(): boolean {
method: "GET",
credentials: "include",
});
if (uuid_req.status == 200)
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
const dropdown = document.createElement("div");
dropdown.classList.add("relative", "inline-block", "group");
dropdown.id = "profile-button";
const button_dropdown = dropdown.appendChild(document.createElement("button"));
button_dropdown.innerHTML = uuid.user;
button_dropdown.classList.add("text-neutral-900", "group-hover:text-neutral-700", "dark:text-white", "dark:group-hover:text-neutral-400");
old_button.replaceWith(logged_dropdown);
const menu_div = dropdown.appendChild(document.createElement("div"));
menu_div.classList.add("float:right", "hidden", "absolute", "right-0", "bg-[#f9f9f9]", "min-w-[160px]", "shadow-lg", "z-10", "group-hover:block");
const profile_a = menu_div.appendChild(document.createElement("a"));
const settings_a = menu_div.appendChild(document.createElement("a"));
const logout_button = menu_div.appendChild(document.createElement("button"));
profile_a.text = "profile";
profile_a.classList.add("block", "no-underline", "px-4", "py-3");
profile_a.href = "/profile";
profile_a.setAttribute("data-link", "");
settings_a.text = "settings";
settings_a.classList.add("block", "no-underline", "px-4", "py-3");
settings_a.href = "/settings";
settings_a.setAttribute("data-link", "");
logout_button.innerHTML = "logout";
logout_button.classList.add("block", "no-underline", "px-4", "py-3");
logout_button.id = "logout-button";
//document.getElementById("logout-button")?.addEventListener("click", async () => {
logout_button.addEventListener("click", async () => {
let req = await fetch("http://localhost:3001/logout", {
method: "GET",
credentials: "include",
});
if (req.status === 200)
isLogged();
else
console.error("logout failed");
});
old_button.replaceWith(dropdown);
return true;
}
else // 401

32
src/front/static/ts/views/Game.ts
View File

@ -1,4 +1,5 @@
import Aview from "./Aview.ts"
import { isLogged } from "../main.js"
export default class extends Aview {
@ -13,10 +14,13 @@ export default class extends Aview {
async getHTML() {
return `
<script type="module" src="static/ts/pong-logic.ts"></script>
<div class="text-center p-5 bg-white rounded-xl shadow space-y-4">
<canvas id="gameCanvas" class="rounded-md" width="400" height="400"></canvas>
<div id="game-buttons" class="hidden flex">
<div class="text-center p-5 bg-white rounded-xl shadow">
<div id="player-inputs" class="flex row">
<input type="text" id="player1" placeholder="Player 1" class="bg-white text-neutral-900 border rounded-md w-full px-4 py-2 mr-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required></input>
<input type="text" id="player2" placeholder="Player 2" class="bg-white text-neutral-900 border rounded-md w-full px-4 py-2 ml-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required></input>
</div>
<canvas id="gameCanvas" class="hidden rounded-md" width="400" height="400"></canvas>
<div id="game-buttons" class="hidden flex mt-4">
<button id="game-retry" class="bg-blue-600 text-white hover:bg-blue-500 w-full mx-4 py-2 rounded-md transition-colors">play again</button>
<a id="game-back" class="bg-gray-600 text-white hover:bg-gray-500 w-full mx-4 py-2 rounded-md transition-colors" href="/pong" data-link>back</a>
</div>
@ -32,6 +36,8 @@ export default class extends Aview {
let match_over: boolean = false;
let p1_score: number = 0;
let p2_score: number = 0;
let p1_name: string;
let p2_name: string;
let countdown: number = 3;
let countdownTimer: number = 0;
@ -46,7 +52,7 @@ export default class extends Aview {
let leftPaddleY: number = canvas.height / 2 - paddleHeight / 2;
let rightPaddleY: number = canvas.height / 2 - paddleHeight / 2;
let paddleSpeed: number = 727 * 0.69;
const paddleSpeed: number = 727 * 0.69;
let ballX: number = canvas.width / 2;
let ballY: number = canvas.height / 2;
let ballSpeed: number = 200;
@ -154,13 +160,14 @@ export default class extends Aview {
ctx.fillRect(ballX, ballY, ballSize, ballSize);
ctx.font = "24px sans-serif";
ctx.fillText(`${p1_score} - ${p2_score}`, canvas.width / 2 - 20, 30);
let text_score = `${p1_name} ${p1_score} - ${p2_score} ${p2_name}`;
ctx.fillText(text_score, canvas.width / 2 - (ctx.measureText(text_score).width / 2), 30);
if (match_over)
{
ctx.font = "48px sans-serif";
const winner = p1_score > p2_score ? "Player 1" : "Player 2";
ctx.fillText(`${winner} won :D`, canvas.width / 2 - 150, canvas.height / 2 + 22);
ctx.font = "32px sans-serif";
const winner = `${p1_score > p2_score ? p1_name : p2_name} won :D`;
ctx.fillText(winner, canvas.width / 2 - (ctx.measureText(winner).width / 2), canvas.height / 2 + 16);
document.getElementById("game-buttons").classList.remove("hidden");
}
}
@ -216,6 +223,13 @@ export default class extends Aview {
countdownTimer = performance.now();
});
p1_name = "Player 1";
p2_name = "Player 2";
if (await isLogged())
{
p1_name = document.cookie.match(new RegExp('(^| )' + "uuid" + '=([^;]+)'))[2];
}
// --------------------------------------------------------------------------------------------------------------------------------------------------------
//
// insert logic to set both names

8
src/front/static/ts/views/LoginPage.ts
View File

@ -11,18 +11,18 @@ export default class extends Aview {
async getHTML() {
return `
<div class="text-center p-10 bg-white dark:bg-neutral-800 rounded-xl shadow space-y-4 flex flex-col">
<form method="dialog" class="text-center p-10 bg-white dark:bg-neutral-800 rounded-xl shadow space-y-4 flex flex-col">
<h1 class="text-4xl font-bold text-blue-600">login</h1>
<input type="text" placeholder="username" id="username" class="bg-white text-neutral-900 border rounded-md w-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"></input>
<input type="password" id="password" placeholder="password" class="bg-white text-neutral-900 border w-full px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></input>
<input type="text" id="username" placeholder="username" class="bg-white text-neutral-900 border rounded-md w-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required></input>
<input type="password" id="password" placeholder="password" class="bg-white text-neutral-900 border w-full px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required></input>
<p id="login-error-message" class="hidden text-red-700 dark:text-red-500"></p>
<button id="login-button" type="submit" class="bg-blue-600 text-white hover:bg-blue-500 w-full py-2 rounded-md transition-colors">login</button>
<a class="text-gray-400 dark:text-gray-600 underline" href="/register" data-link>
register
</a>
</div>
</form>
`;
}

8
src/front/static/ts/views/RegisterPage.ts
View File

@ -11,18 +11,18 @@ export default class extends Aview {
async getHTML() {
return `
<div class="text-center p-10 bg-white dark:bg-neutral-800 rounded-xl shadow space-y-4 flex flex-col">
<form method="dialog" class="text-center p-10 bg-white dark:bg-neutral-800 rounded-xl shadow space-y-4 flex flex-col">
<h1 class="text-4xl font-bold text-blue-600">register</h1>
<input type="text" id="username" placeholder="username" class="bg-white text-neutral-900 border rounded-md w-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"></input>
<input type="password" id="password" placeholder="password" class="bg-white text-neutral-900 border w-full px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></input>
<input type="text" id="username" placeholder="username" class="bg-white text-neutral-900 border rounded-md w-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required></input>
<input type="password" id="password" placeholder="password" class="bg-white text-neutral-900 border w-full px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required></input>
<p id="login-error-message" class="hidden text-red-700 dark:text-red-500"></p>
<button id="register-button" type="submit" class="bg-blue-600 text-white hover:bg-blue-500 w-full py-2 rounded-md transition-colors">register</button>
<a class="text-gray-400 dark:text-gray-600 underline" href="/login" data-link>
i already have an account
</a>
</div>
</form>
`;
}