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

Merge branch 'front' into add-friends-list

Browse Source
This commit is contained in:
Adam
2025-10-20 13:46:08 +02:00
committed by GitHub
parent e316992cb6 8a9224bd88
commit e8896932ef
4 changed files with 69 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -75,8 +75,6 @@ window.addEventListener("popstate", router);
document.addEventListener("DOMContentLoaded", () => {
isLogged();
document.body.addEventListener("click", e => {
if (!e.target.closest("#taskbar-menu") && !e.target.matches("#profile-button")) {
profile_view.open = false;
@ -121,9 +119,18 @@ function updateClock()
clock.innerHTML = `${days[now.getDay()]} ${now.getDate()} ${months[now.getMonth()]} ` + hours + ":" + minutes;
}
friends_view.run();
async function pingClock() {
if (await isLogged()) {
fetch(`http://localhost:3002/ping`, {
method: "POST",
credentials: "include"
});
}
}
setInterval(updateClock, 5000);
updateClock();
setInterval(pingClock, 30000);
oneko();

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

@ -49,15 +49,14 @@ export default class extends Aview {
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();
method: "GET",
credentials: "include",
});
if (userdata_req.status == 404) {
console.error("invalid user");
return;
}
let userdata = await userdata_req.json();
const matchCount_req = await fetch(`http://localhost:3002/users/${uuid}/matchHistory/count`, {
method: "GET",
@ -75,39 +74,40 @@ export default class extends Aview {
if (!main)
return console.error("what");
console.log(matches);
if (matches.matchHistory)
{
for (let match of matches.matchHistory)
{
if (matches.matchHistory) {
for (let match of matches.matchHistory) {
const newEntry = document.createElement("li");
newEntry.classList.add("m-2", "default-button", "bg-neutral-200", "dark:bg-neutral-800", "text-neutral-900", "dark:text-white");
newEntry.innerHTML = match.score.p1Score > match.score.p2Score ? `${match.score.p1} - winner` : `${match.score.p2} - winner`;
main.insertBefore(newEntry, main.firstChild);
// ###########################################################################################################################################
//
// ADD TX LINK : https://testnet.snowscan.xyz/tx/${match.tx}
//
// ###########################################################################################################################################
console.log(match.tx);
}
}
const profile = document.getElementById("profile-profile");
const profile = document.getElementById("profile-profile");
if (!profile) return;
const picture = profile.appendChild(document.createElement("img"));
picture.src = "https://api.kanel.ovh/pp";
picture.classList.add("text-neutral-900", "dark:text-white", "center", "h-18", "w-18", "mx-3");
const picture = profile.appendChild(document.createElement("img"));
picture.src = "https://api.kanel.ovh/pp";
picture.classList.add("text-neutral-900", "dark:text-white", "center", "h-18", "w-18", "mx-3");
const nametag = profile.appendChild(document.createElement("div"));
nametag.innerHTML = `
const nametag = profile.appendChild(document.createElement("div"));
nametag.innerHTML = `
<div class="text-lg">Hi ${userdata.displayName} ! :D</div>
<div class="italic">${uuid}<div>
`;
nametag.classList.add("text-neutral-900", "dark:text-white");
nametag.classList.add("text-neutral-900", "dark:text-white");
const winrate = profile.appendChild(document.createElement("div"));
winrate.innerHTML = `
const winrate = profile.appendChild(document.createElement("div"));
winrate.innerHTML = `
<div> wins: ${userdata.wins} </div>
<div> losses: ${userdata.losses} </div>
<div> winrate: ${Math.round(userdata.wins / (userdata.wins + userdata.losses) * 100)} % </div>
<div> winrate: ${ (userdata.wins != 0 && userdata.losses != 0) ? Math.round(userdata.wins / (userdata.wins + userdata.losses) * 100) + " %" : "-" }</div>
`;
winrate.classList.add("text-neutral-900", "dark:text-white", "grow", "content-center");
}

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

@ -29,11 +29,11 @@ export default class extends Aview {
<p class="text-gray-900 dark:text-white text-lg pt-0 pb-4">welcome ! please register.</p>
<input type="text" id="username" placeholder="username" class="bg-white text-neutral-900 px-4 py-2 input-border" required></input>
<input type="password" id="password" placeholder="password" class="bg-white text-neutral-900 px-4 py-2 input-border" required></input>
<p id="login-error-message" class="hidden text-red-700 dark:text-red-500"></p>
</br>
<button id="register-button" type="submit" class="default-button w-full">register</button>
</form>
<p id="login-error-message" class="hidden text-red-700 dark:text-red-500 pt-4"></p>
<hr class="my-4 w-64 reverse-border">
<div class="flex flex-col space-y-4 w-full">

83
src/front/static/ts/views/Tetris.ts
View File

@ -16,7 +16,7 @@ export default class extends Aview {
return `
<div id="window" class="absolute default-border">
<div id="window-header" 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>
<span class="font-[Kubasta]">tetris_game.ts</span>
<div>
<button> - </button>
<button> □ </button>
@ -27,13 +27,13 @@ export default class extends Aview {
<div id="main-div" class="bg-neutral-200 dark:bg-neutral-800 text-center p-10 space-y-4 reverse-border">
<div class="flex flex-row justify-center items-start space-x-4">
<canvas id="hold" class="reverse-border" width="140" heigth="80"></canvas>
<canvas id="hold" class="reverse-border" width="140" height="100"></canvas>
<canvas id="board" class="reverse-border" width="300" height="600"></canvas>
<canvas id="queue" class="reverse-border" width="140" height="420"></canvas>
</div>
<div id="game-buttons" class="hidden flex">
<button id="game-retry" class="default-button">play again</button>
<a id="game-back" class="default-button" href="/tetris" data-link>back</a>
<div id="game-buttons" class="hidden flex mt-4">
<button id="game-retry" class="default-button w-full mx-4 py-2">play again</button>
<a id="game-back" class="default-button w-full mx-4 py-2" href="/tetris" data-link>back</a>
</div>
</div>
</div>
@ -242,7 +242,10 @@ export default class extends Aview {
}
findColorIndex() {
for (const row of this.shape) for (const v of row) if (v) return v;
for (const row of this.shape)
for (const v of row)
if (v)
return v;
return 1;
}
@ -314,6 +317,11 @@ export default class extends Aview {
throw console.error("no canvas :c");
this.holdCtx = this.holdCanvas.getContext("2d");
this.queueCtx = this.queueCanvas.getContext("2d");
if (!this.holdCtx || !this.queueCtx)
return;
this.holdCtx.clearRect(0, 0, 200, 200);
this.queueCtx.clearRect(0, 0, 500, 500);
this.board = this.createEmptyBoard();
this.fillBag();
@ -424,7 +432,6 @@ export default class extends Aview {
if (linesCleared > 0) {
this.lines += linesCleared;
// scoring like classic tetris
const points = [0, 40, 100, 300, 1200];
this.score += (points[linesCleared] || 0) * this.level;
// level up every 10 lines (Fixed Goal System)
@ -440,7 +447,7 @@ export default class extends Aview {
if (!this.piece) return;
if (this.isLocking && this.lockRotationCount < 15)
this.lockRotationCount++;
// Try rotation with wall kicks
// Try wall kicks
const originalIndex = this.piece.rotationIndex;
if (dir === "cw") this.piece.rotateCW();
else this.piece.rotateCCW();
@ -450,7 +457,7 @@ export default class extends Aview {
if (!this.collides(this.piece)) return;
this.piece.x -= k;
}
// no valid kick, revert
// no kick, revert
this.piece.rotationIndex = originalIndex;
this.piece.shape = this.piece.rotations[originalIndex];
}
@ -479,7 +486,6 @@ export default class extends Aview {
softDrop() {
if (!this.piece) return;
if (!this.movePiece(0, 1)) return;
//this.lockPiece();
else this.score += 1;
}
@ -571,8 +577,12 @@ export default class extends Aview {
}
}
this.draw();
if (this.isGameOver)
return;
{
document.getElementById("game-buttons")?.classList.remove("hidden");
return ;
}
requestAnimationFrame(this.loop.bind(this));
}
@ -627,19 +637,8 @@ export default class extends Aview {
for (const row of this.holdPiece.rotations[0]) {
let x: number = 0;
for (const val of row) {
if (val) {
this.fillBlock(x, y, this.canHold ? COLORS[this.holdPiece.findColorIndex()] : ["#8c8c84", "#393934"], this.holdCtx);
/*this.holdCtx.fillStyle = ;
this.holdCtx.fillRect(
x * BLOCK +
1 +
(4 - this.holdPiece.rotations[0].length) * 15 +
10,
y * BLOCK + 1 + 20,
BLOCK - 2,
BLOCK - 2,
);*/
}
if (val)
this.fillBlock(x + (4 - this.holdPiece.rotations[0].length)/ 2 + 0.35, y + 0.5, this.canHold ? COLORS[this.holdPiece.findColorIndex()] : ["#8c8c84", "#393934"], this.holdCtx);
x++;
}
y++;
@ -655,25 +654,8 @@ export default class extends Aview {
for (const row of TETROMINOES[nextPiece][0]) {
let x: number = 0;
for (const val of row) {
if (val) {
this.queueCtx.fillStyle =
COLORS[
["I", "J", "L", "O", "S", "T", "Z"].indexOf(nextPiece) + 1
][0];
this.queueCtx.fillRect(
x * BLOCK +
1 +
(4 - TETROMINOES[nextPiece][0].length) * 15 +
10,
y * BLOCK +
1 +
placement * 80 +
20 -
(nextPiece === "I" ? 15 : 0),
BLOCK - 2,
BLOCK - 2,
);
}
if (val)
this.fillBlock(x + (4 - TETROMINOES[nextPiece][0].length) / 2 + 0.25, y + 0.5 + placement * 2.69 - (nextPiece ==="I" ? 0.35 : 0), COLORS[["I", "J", "L", "O", "S", "T", "Z"].indexOf(nextPiece) + 1], this.queueCtx);
x++;
}
y++;
@ -694,17 +676,15 @@ export default class extends Aview {
return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, '0')}`;
}
fillBlock(x: number, y: number, color: string[], ctx) {
fillBlock(x: number, y: number, color: string[], ctx: CanvasRenderingContext2D | null) {
if (!ctx) return;
//const ctx = this.ctx;
//ctx.fillStyle = color;
const grad = ctx.createLinearGradient(x * BLOCK, y * BLOCK, x * BLOCK, y * BLOCK + BLOCK);
grad.addColorStop(0, color[0]);
grad.addColorStop(1, color[1]);
ctx.fillStyle = grad;
ctx.fillRect(x * BLOCK + 4, y * BLOCK + 4, BLOCK - 4, BLOCK - 4);
const X = x * BLOCK;
const Y = y * BLOCK;
ctx.fillRect(Math.round(x * BLOCK) + 4, Math.round(y * BLOCK) + 4, BLOCK - 4, BLOCK - 4);
const X = Math.round(x * BLOCK);
const Y = Math.round(y * BLOCK);
const W = BLOCK;
const H = BLOCK;
const S = 4;
@ -779,7 +759,7 @@ export default class extends Aview {
ctx.font = "24px Kubasta";
ctx.textAlign = "center";
ctx.fillText(
"PAUSED",
"paused",
this.canvas.width / 2,
this.canvas.height / 2 + 8,
);
@ -793,7 +773,7 @@ export default class extends Aview {
ctx.font = "28px Kubasta";
ctx.textAlign = "center";
ctx.fillText(
"GAME OVER",
"game over",
this.canvas.width / 2,
this.canvas.height / 2 + 8,
);
@ -830,6 +810,7 @@ export default class extends Aview {
}
}
document.getElementById("game-retry")?.addEventListener("click", () => { document.getElementById("game-buttons")?.classList.add("hidden"); const game = new Game("board"); });
const game = new Game("board");
}
}