42_adjoly/knl_meowscendence
1
0
Fork 0
mirror of https://github.com/KeyZox71/knl_meowscendence.git synced 2026-01-01 06:06:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

「✨」 feat(src/front): frontend is starting to look like something pogit c started working on the design implementation, still a lot to do

Browse Source
This commit is contained in:
y-syo
2025-10-07 18:51:43 +02:00
parent 156fd2b5a1
commit b6c6564dd3
9 changed files with 148 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,19 +14,30 @@ export default class extends Aview {
async getHTML() {
return `
<div id="main-div" class="text-center p-5 bg-white rounded-xl shadow">
<div class="default-border">
<div class="bg-linear-to-r from-orange-200 to-orange-300 flex flex-row min-w-75 justify-between px-2">
<span class="font-[Kubasta]">knl_meowscendence</span>
<div>
<button> - </button>
<button> □ </button>
<a href="/" data-link> × </a>
</div>
</div>
<div id="main-div" class="bg-neutral-200 dark:bg-neutral-800 text-center p-10 space-y-4 reverse-border">
<div id="player-inputs" class="flex flex-col space-y-4">
<div class="flex 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>
<span class="reverse-border w-full ml-2"><input type="text" id="player1" placeholder="Player 1" class="bg-white text-neutral-900 px-4 py-2 input-border" required></input></span>
<span class="reverse-border w-full ml-2"><input type="text" id="player2" placeholder="Player 2" class="bg-white text-neutral-900 px-4 py-2 w-full input-border" required></input></span>
</div>
<button id="game-start" class="bg-blue-600 text-white hover:bg-blue-500 w-full py-2 rounded-md transition-colors">play</button>
<button id="game-start" class="default-button">play</button>
</div>
<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>
</div>
</div>
`;
}
@ -153,6 +164,13 @@ export default class extends Aview {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "white";
ctx.beginPath();
ctx.setLineDash([5, 10]);
ctx.moveTo(canvas.width / 2, 0);
ctx.lineTo(canvas.width / 2, canvas.height);
ctx.stroke();
ctx.fillStyle = "white";
ctx.fillRect(paddleOffset, leftPaddleY, paddleWidth, paddleHeight);
ctx.fillRect(canvas.width - paddleWidth - paddleOffset, rightPaddleY, paddleWidth, paddleHeight);
@ -161,13 +179,15 @@ export default class extends Aview {
if (game_playing)
ctx.fillRect(ballX, ballY, ballSize, ballSize);
ctx.font = "24px sans-serif";
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);
ctx.font = "24px Kubasta";
let text_score = `${p1_score} - ${p2_score}`;
ctx.fillText(text_score, canvas.width / 2 - (ctx.measureText(text_score).width / 2), 25);
ctx.fillText(p1_name, canvas.width / 4 - (ctx.measureText(p1_name).width / 2), 45);
ctx.fillText(p2_name, (canvas.width / 4 * 3) - (ctx.measureText(p2_name).width / 2), 45);
if (match_over)
{
ctx.font = "32px sans-serif";
ctx.font = "32px Kubasta";
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");
@ -184,12 +204,12 @@ export default class extends Aview {
countdown--;
countdownTimer = now;
}
ctx.font = "48px sans-serif";
ctx.font = "48px Kubasta";
ctx.fillText(countdown.toString(), canvas.width / 2 - 10, canvas.height / 2 + 24);
}
else if (countdown === 0)
{
ctx.font = "48px sans-serif";
ctx.font = "48px Kubasta";
ctx.fillText("Go!", canvas.width / 2 - 30, canvas.height / 2 + 24);
setTimeout(() => {
game_playing = true;
@ -240,7 +260,7 @@ export default class extends Aview {
canvas = document.createElement("canvas");
canvas.id = "gameCanvas";
canvas.classList.add("rounded-md");
canvas.classList.add("reverse-border");
document.getElementById("main-div").prepend(canvas);

22
src/front/static/ts/views/MainMenu.ts
View File

@ -9,13 +9,23 @@ export default class extends Aview {
}
async getHTML() {
// <div class="text-center p-10 bg-white dark:bg-neutral-800 rounded-xl shadow space-y-4"-->
return `
<div class="text-center p-10 bg-white dark:bg-neutral-800 rounded-xl shadow space-y-4">
<h1 class="text-4xl font-bold text-blue-800 dark:text-blue-300">knl_meowscendence :D</h1>
<p class="text-gray-900 dark:text-white text-lg pb-4">i like pong</p>
<a class="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded transition-colors" href="/pong" data-link>
Pong
</a>
<div class="default-border">
<div class="bg-linear-to-r from-orange-200 to-orange-300 flex flex-row min-w-75 justify-between px-2">
<span class="font-[Kubasta]">knl_meowscendence</span>
<div>
<button> - </button>
<button> □ </button>
<a href="/" data-link> × </a>
</div>
</div>
<div class="bg-neutral-200 dark:bg-neutral-800 text-center p-10 space-y-4 reverse-border">
<p class="text-gray-900 dark:text-white text-lg pb-4">i like pong</p>
<a class="default-button" href="/pong" data-link>
Pong
</a>
</div>
</div>
`;
}

28
src/front/static/ts/views/PongMenu.ts
View File

@ -10,15 +10,25 @@ export default class extends Aview {
async getHTML() {
return `
<div class="text-center p-12 bg-white dark:bg-neutral-800 rounded-xl shadow space-y-4">
<p class="text-gray-700 dark:text-white text-3xl font-bold pb-4">pong is funny yay</p>
<div class="flex flex-col space-y-4">
<a class="bg-red-500 hover:bg-red-400 text-white px-4 py-2 rounded transition-colors" href="/pong/local" data-link>
local match
</a>
<a class="bg-red-500 hover:bg-red-400 text-white px-4 py-2 rounded transition-colors" href="/pong/tournament" data-link>
local tournament
</a>
<div class="default-border">
<div class="bg-linear-to-r from-orange-200 to-orange-300 flex flex-row min-w-75 justify-between px-2">
<span class="font-[Kubasta]">pong_game.ts</span>
<div>
<button> - </button>
<button> □ </button>
<a href="/" data-link> × </a>
</div>
</div>
<div class="bg-neutral-200 dark:bg-neutral-800 text-center pb-10 pt-5 px-10 space-y-4 reverse-border">
<p class="text-gray-900 dark:text-white text-lg pt-0 pb-4">pong is funny yay</p>
<div class="flex flex-col space-y-4">
<a class="default-button" href="/pong/local" data-link>
local match
</a>
<a class="default-button" href="/pong/tournament" data-link>
local tournament
</a>
</div>
</div>
</div>
`;

25
src/front/static/ts/views/Profile.ts
View File

@ -19,6 +19,31 @@ export default class extends Aview {
}
async run() {
const uuid = document.cookie.match(new RegExp('(^| )' + "uuid" + '=([^;]+)'))[2];
const userdata_req = await fetch(`http://localhost:3002/users/${uuid}`, {
method: "GET",
credentials: "include",
});
if (userdata_req.status == 404)
{
console.error("invalid user");
return ;
}
let userdata = await userdata_req.json();
console.log(userdata_req);
const main = document.getElementById("main-window");
const nametag = main.appendChild(document.createElement("span"));
nametag.innerHTML = `Hiiiiii ${userdata.displayName} ! :D`;
nametag.classList.add("text-neutral-900", "dark:text-white");
const winrate = main.appendChild(document.createElement("div"));
winrate.innerHTML = `wins: ${userdata.wins} | losses: ${userdata.losses} | winrate: ${userdata.wins / (userdata.wins + userdata.losses)}`;
winrate.classList.add("text-neutral-900", "dark:text-white");
}
}