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

「🏗️」 wip: work in progress, not done yet.

Browse Source
This commit is contained in:
y-syo
2025-10-05 18:10:07 +02:00
parent 35f5df4924
commit 156fd2b5a1
5 changed files with 69 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -85,6 +85,8 @@ const routes = [
{ path: "/login", view: () => import("./views/LoginPage.ts") },
{ path: "/register", view: () => import("./views/RegisterPage.ts") },
{ path: "/profile", view: () => import("./views/Profile.ts") },
{ path: "/tetris", view: () => import("./views/Tetris.ts") },
];

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

@ -14,12 +14,14 @@ export default class extends Aview {
async getHTML() {
return `
<div class="text-center p-5 bg-white rounded-xl shadow">
<div id="player-inputs" class="flex row">
<div id="main-div" class="text-center p-5 bg-white rounded-xl shadow">
<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>
</div>
<canvas id="gameCanvas" class="hidden rounded-md" width="400" height="400"></canvas>
<button id="game-start" class="bg-blue-600 text-white hover:bg-blue-500 w-full py-2 rounded-md transition-colors">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>
@ -42,19 +44,19 @@ export default class extends Aview {
let countdown: number = 3;
let countdownTimer: number = 0;
const canvas = document.getElementById("gameCanvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d");
let canvas;
let ctx;
const paddleOffset: number = 15;
const paddleHeight: number = 100;
const paddleWidth: number = 10;
const ballSize: number = 10;
let leftPaddleY: number = canvas.height / 2 - paddleHeight / 2;
let rightPaddleY: number = canvas.height / 2 - paddleHeight / 2;
const paddleSpeed: number = 727 * 0.69;
let ballX: number = canvas.width / 2;
let ballY: number = canvas.height / 2;
let leftPaddleY: number;
let rightPaddleY: number;
let ballX: number;
let ballY: number;
let ballSpeed: number = 200;
let ballSpeedX: number = 300;
let ballSpeedY: number = 10;
@ -222,20 +224,36 @@ export default class extends Aview {
countdown = 3;
countdownTimer = performance.now();
});
let p1_input = document.getElementById("player1");
let p2_input = document.getElementById("player2");
p1_name = "Player 1";
p2_name = "Player 2";
p2_input.value = "Player 2";
if (await isLogged())
{
p1_name = document.cookie.match(new RegExp('(^| )' + "uuid" + '=([^;]+)'))[2];
}
p1_input.value = document.cookie.match(new RegExp('(^| )' + "uuid" + '=([^;]+)'))[2];
else
p1_input.value = "Player 1";
// --------------------------------------------------------------------------------------------------------------------------------------------------------
//
// insert logic to set both names
//
// --------------------------------------------------------------------------------------------------------------------------------------------------------
document.getElementById("game-start")?.addEventListener("click", () => {
p1_name = p1_input.value;
p2_name = p2_input.value;
document.getElementById("player-inputs").remove();
canvas = document.createElement("canvas");
canvas.id = "gameCanvas";
canvas.classList.add("rounded-md");
document.getElementById("main-div").prepend(canvas);
ctx = canvas.getContext("2d");
ctx.canvas.width = 600;
ctx.canvas.height = 600;
leftPaddleY = canvas.height / 2 - paddleHeight / 2;
rightPaddleY = canvas.height / 2 - paddleHeight / 2;
ballX = canvas.width / 2;
ballY = canvas.height / 2;
requestAnimationFrame(gameLoop);
});
}
}

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

@ -13,7 +13,7 @@ export default class extends Aview {
<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" href="/pong" data-link>
<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>

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

@ -13,10 +13,10 @@ export default class extends Aview {
<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" href="/pong/local" data-link>
<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" href="/pong/tournament" data-link>
<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>

24
src/front/static/ts/views/Profile.ts Normal file
View File

@ -0,0 +1,24 @@
import Aview from "./Aview.ts"
import { isLogged, navigationManager } from "../main.ts"
export default class extends Aview {
constructor()
{
super();
if (!isLogged())
navigationManager("/login");
this.setTitle("profile");
}
async getHTML() {
return `
<div id="main-window" class="text-center p-10 bg-white dark:bg-neutral-800 rounded-xl shadow space-y-4">
</div>
`;
}
async run() {
const main = document.getElementById("main-window");
}
}