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

「🏗️」 wip(front): partial avatar implementation (a lot of reworks to do)

Browse Source
This commit is contained in:
y-syo
2025-10-23 14:46:15 +02:00
parent fa0449ba16
commit d20597ee6a
10 changed files with 181 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/front/index.html
View File

@ -11,10 +11,7 @@
<!--body class="bg-gray-100 dark:bg-neutral-950 h-screen flex flex-col"-->
<body class="bg-[url(https://y-syo.me/res/bg.jpg)] dark:bg-[url(https://api.kanel.ovh/random)] bg-center bg-cover h-screen flex flex-col">
<!--script src="https://kanel.ovh/oneko.js"></script-->
<!--script src="./static/ts/oneko.js"></script-->
<body class="bg-[url(https://y-syo.me/res/bg.jpg)] dark:bg-[url(https://api.kanel.ovh/random)] bg-center bg-cover h-screen flex flex-col font-[Lexend]">
<div class="absolute flex flex-col items-center space-y-5 top-4 left-5">
<!--a class="absolute flex flex-col items-center top-4 left-5" href="/pong" data-icon-->

1
src/front/static/css/style.css
View File

@ -1,3 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
@import "tailwindcss";
@layer utilities {
.no-scrollbar::-webkit-scrollbar {

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

@ -41,7 +41,7 @@ export default class extends Aview {
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg" height=20 width=20 class="mr-2 justify-self-start" />
login with John Google
</a>
<a target="_blank" href="http://localhost:3001/login/google" class="default-button inline-flex items-center justify-center w-full">
<a target="_blank" href="https://rusty.42angouleme.fr/issues/all" class="default-button inline-flex items-center justify-center w-full">
<img src="https://rusty.42angouleme.fr/assets/favicon-bb06adc80c8495db.ico" height=20 width=20 class="mr-2 justify-self-start" />
login with Rusty
</a>

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

@ -44,6 +44,7 @@ export default class extends Aview {
if (!await isLogged())
navigationManager("/");
let pc: number = 0;
dragElement(document.getElementById("window"));
let uuid: String;
uuid = document.cookie.match(new RegExp('(^| )' + "uuid" + '=([^;]+)'))[2];
@ -63,6 +64,7 @@ export default class extends Aview {
credentials: "include",
});
let matchCount = await matchCount_req.json();
pc += matchCount.n_matches;
let matches_req = await fetch(`http://localhost:3002/users/${uuid}/matchHistory?game=pong&iStart=0&iEnd=${matchCount.n_matches}`, {
method: "GET",
@ -88,7 +90,9 @@ export default class extends Aview {
const header = popup.appendChild(document.createElement("div"));
header.classList.add("bg-linear-to-r", "from-orange-200", "to-orange-300", "flex", "flex-row", "min-w-35", "justify-between", "px-2");
header.id = `${id}-header`;
header.appendChild(document.createElement("span")).innerText = "score.ts";
const title = header.appendChild(document.createElement("span"));
title.classList.add("font-[Kubasta]");
title.innerText = "score-pong.ts";
const btn = header.appendChild(document.createElement("button"));
btn.innerText = " × ";
btn.onclick = () => { document.getElementById(`${id}`).remove(); };
@ -116,6 +120,7 @@ export default class extends Aview {
credentials: "include",
});
matchCount = await matchCount_req.json();
pc += matchCount.n_matches;
matches_req = await fetch(`http://localhost:3002/users/${uuid}/matchHistory?game=tetris&iStart=0&iEnd=${matchCount.n_matches}`, {
method: "GET",
@ -131,7 +136,11 @@ export default class extends Aview {
for (let match of matches.matchHistory) {
const newEntry = document.createElement("li");
newEntry.classList.add("m-1", "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`;
newEntry.innerHTML = match.score.p2 != undefined ?
(match.score.p1Score > match.score.p2Score ? `${match.score.p1} - winner` : `${match.score.p2} - winner`)
:
(`solo game - ${match.score.p1Score}`)
;
main.insertBefore(newEntry, main.firstChild);
const popup: HTMLDivElement = document.createElement("div");
@ -141,7 +150,9 @@ export default class extends Aview {
const header = popup.appendChild(document.createElement("div"));
header.classList.add("bg-linear-to-r", "from-orange-200", "to-orange-300", "flex", "flex-row", "min-w-35", "justify-between", "px-2");
header.id = `${id}-header`;
header.appendChild(document.createElement("span")).innerText = "score.ts";
const title = header.appendChild(document.createElement("span"));
title.classList.add("font-[Kubasta]");
title.innerText = "score-tetris.ts";
const btn = header.appendChild(document.createElement("button"));
btn.innerText = " × ";
btn.onclick = () => { document.getElementById(`${id}`).remove(); };
@ -152,7 +163,11 @@ export default class extends Aview {
popup_content.appendChild(document.createElement("span")).innerText = `${date.toDateString()} ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
const score = popup_content.appendChild(document.createElement("span"));
score.classList.add();
score.innerText = `${match.score.p1} : ${match.score.p1Score} - ${match.score.p2Score} : ${match.score.p2}`;
score.innerText = match.score.p2 != undefined ?
(`${match.score.p1} : ${match.score.p1Score} - ${match.score.p2Score} : ${match.score.p2}`)
:
(`${match.score.p1} : ${match.score.p1Score}`)
;
const tx = popup_content.appendChild(document.createElement("a"));
tx.href = `https://testnet.snowscan.xyz/tx/${match.tx}`;
tx.innerText = "transaction proof";
@ -168,8 +183,12 @@ export default class extends Aview {
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 a = await fetch(`http://localhost:3002/users/${uuid}/avatar`, {
method: "GET",
credentials: "include",
});
picture.src = a.status === 200 ? `http://localhost:3002/users/${uuid}/avatar` : "https://api.kanel.ovh/pp";
picture.classList.add("text-neutral-900", "dark:text-white", "center", "h-18", "w-18", "mx-3", "reverse-border");
const nametag = profile.appendChild(document.createElement("div"));
nametag.innerHTML = `
@ -180,9 +199,9 @@ export default class extends Aview {
const winrate = profile.appendChild(document.createElement("div"));
winrate.innerHTML = `
<div> wins: ${userdata.wins} </div>
<div> losses: ${userdata.losses} </div>
<div> winrate: ${ (userdata.wins != 0 && userdata.losses != 0) ? Math.round(userdata.wins / (userdata.wins + userdata.losses) * 100) + " %" : "-" }</div>
<div> total playcount: ${pc} </div>
<div> pong winrate: ${ (userdata.pong.wins == 0 && userdata.pong.losses == 0) ? "-" : Math.round(userdata.pong.wins / (userdata.pong.wins + userdata.pong.losses) * 100) + " %" } </div>
<div> tetris winrate: ${ (userdata.tetris.wins == 0 && userdata.tetris.losses == 0) ? "-" : Math.round(userdata.tetris.wins / (userdata.tetris.wins + userdata.tetris.losses) * 100) + " %" } </div>
`;
winrate.classList.add("text-neutral-900", "dark:text-white", "grow", "content-center");
}

1
src/front/static/ts/views/ProfileMenu.ts
View File

@ -65,7 +65,6 @@ export default class extends Aview {
<hr class="my-2 w-32 reverse-border">
<a class="menu-default-button inline-flex items-center justify-center" href="/profile" data-link>profile</a>
<a class="menu-default-button inline-flex items-center justify-center" href="/settings" data-link>settings</a>
<a class="menu-default-button inline-flex items-center justify-center" href="/friends" data-link>friends</a>
`;
}

49
src/front/static/ts/views/Settings.ts
View File

@ -24,9 +24,18 @@ export default class extends Aview {
<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">
<input type="text" id="displayName-input" class="bg-white text-neutral-900 px-4 py-2 input-border" required></input>
<button id="displayName-button" type="submit" class="default-button w-full">change display name</button>
<div class="bg-neutral-200 dark:bg-neutral-800 text-center pb-10 pt-5 px-10 space-y-8 reverse-border">
<div class="flex flex-row items-center place-items-center space-x-4">
<input type="text" id="displayName-input" class="bg-white text-neutral-900 px-4 py-2 input-border" required></input>
<button id="displayName-button" type="submit" class="default-button w-full">change display name</button>
</div>
<div id="upload" class="flex flex-row items-center place-items-center space-x-8">
<div id="upload-preview" class="hidden flex flex-col items-center place-items-center space-y-4">
<img id="upload-preview-img" class="w-20 h-20" />
<button id="upload-submit" type="submit" class="default-button">change avatar</button>
</div>
<label for="upload-file" class="default-button">select an avatar...</label><input type="file" id="upload-file" class="hidden" accept="image/*" />
</div>
<button id="deleteAccount-button" type="submit" class="default-button w-full">delete your account</button>
</div>
</div>
@ -80,5 +89,39 @@ export default class extends Aview {
else
console.error("xd"); // xd?????????????
});
const upload = document.getElementById("upload-file") as HTMLInputElement;
upload.addEventListener("change", () => {
const fileList: FileList | null = upload.files;
if (!fileList)
return console.error("empty");
if (!fileList[0].type.startsWith("image/")) {
console.error("invalid file");
return;
}
document.getElementById("upload-preview")?.classList.remove("hidden");
const img = document.getElementById("upload-preview-img") as HTMLImageElement;
img.classList.remove("hidden");
const reader = new FileReader();
reader.onload = (e) => {
if (!e.target)
return;
img.src = e.target.result as string;
};
reader.readAsDataURL(fileList[0]);
});
(document.getElementById("upload-submit") as HTMLButtonElement).onclick = async () => {
const up_req = await fetch(`http://localhost:3002/users/${uuid}/avatar`, {
method: "POST",
headers: { "Content-Type": upload.files[0].type } ,
credentials: "include",
body: upload.files[0], //upload uuuh whatever i have to upload
});
console.log(up_req.status);
};
}
}

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

@ -509,13 +509,10 @@ export default class extends Aview {
this.movePiece(this.direction, 0);
this.move = false;
}
/*if (this.keys["ArrowDown"])
this.softDrop();*/
}
registerListeners() {
window.addEventListener("keydown", (e) => {
removeListeners() {
window.removeEventListener("keydown", (e) => {
this.keys[e.key] = true;
if (this.isGameOver) return;
@ -553,13 +550,55 @@ export default class extends Aview {
}
});
document.removeEventListener("keyup", (e) => {
this.keys[e.key] = false;
});
}
registerListeners() {
window.addEventListener("keydown", (e) => {
this.keys[e.key] = true;
if (this.isGameOver) return;
if (e.key === "p" || e.key === "P" || e.key === "Escape")
this.isPaused = !this.isPaused;
if (this.isPaused) return;
if (e.key === "ArrowLeft")
{
this.inputTimestamp = Date.now();
this.direction = -1;//this.movePiece(-1, 0);
this.move = true;
}
else if (e.key === "ArrowRight")
{
this.inputTimestamp = Date.now();
this.direction = 1;//this.movePiece(1, 0);
this.move = true;
}
else if (e.key === "ArrowDown") this.softDrop();
else if (e.code === "Space") {
//e.preventDefault();
this.hardDrop();
} else if (e.key === "Shift" || e.key === "c" || e.key === "C") {
this.hold();
} else if (e.key === "x" || e.key === "X" || e.key === "ArrowUp") {
//e.preventDefault();
this.rotatePiece("cw");
} else if (e.key === "z" || e.key === "Z" || e.key === "Control") {
this.rotatePiece("ccw");
}
});
document.addEventListener("keyup", (e) => {
this.keys[e.key] = false;
});
}
async loop(timestamp: number) {
if (!view.running) return;
if (!view.running) return this.removeListeners();
if (!this.lastDrop) this.lastDrop = timestamp;
if (!this.isPaused)
{
@ -596,9 +635,7 @@ export default class extends Aview {
credentials: "include",
body: JSON.stringify({
"game": "tetris",
"opponent": "xd",
"myScore": this.score,
"opponentScore": 0,
"date": Date.now(),
}),
});

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

@ -606,16 +606,16 @@ export default class extends Aview {
}
else if (this.id === 0 ? e.code === "KeyS" : e.code === "Numpad5") this.softDrop();
else if (this.id === 0 ? e.code === "Space" : e.code === "Numpad0") {
e.preventDefault();
//e.preventDefault();
this.hardDrop();
} else if (this.id === 0 ? e.code === "ShiftLeft" : e.code === "NumpadEnter") {
e.preventDefault();
//e.preventDefault();
this.hold();
} else if (this.id === 0 ? (e.code === "KeyE" || e.code === "KeyW") : (e.code === "Numpad9" || e.code === "Numpad8")) {
e.preventDefault();
//e.preventDefault();
this.rotatePiece("cw");
} else if (this.id === 0 ? (e.code === "KeyQ" || e.code === "ControlLeft") : e.code === "Numpad7") {
e.preventDefault();
//e.preventDefault();
this.rotatePiece("ccw");
}
});

69
src/front/static/ts/views/TournamentMenu.ts
View File

@ -1,4 +1,5 @@
import Aview from "./Aview.ts"
import { dragElement } from "./drag.ts";
import { setOnekoState, setBallPos } from "../oneko.ts"
export default class extends Aview {
@ -12,18 +13,37 @@ 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-lg font-bold pb-4">how many players ?</p>
<div class="flex flex-col space-y-4">
<input type="number" id="playerNumber" value="6" placeholder="number of players" 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>
<button type="submit" id="bracket-generate" class="bg-blue-600 text-white hover:bg-blue-500 w-full py-2 rounded-md transition-colors">create the bracket</button>
<div id="bracket"></div>
<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>
<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 pt-5 space-y-4 reverse-border">
<p class="text-neutral-900 dark:text-white text-lg font-bold pb-4">how many players ?</p>
<div class="flex flex-col space-y-4">
<select id="playerNumber" class="bg-white text-shadow-neutral-900 p-2 input-border">
<option value="">-- player number --</option>
<option value="2">2 players</option>
<option value="3">3 players</option>
<option value="4">4 players</option>
<option value="6">6 players</option>
<option value="8">8 players</option>
</select>
<button type="submit" id="bracket-generate" class="default-button">create the bracket</button>
<div id="bracket" class="flex flex-col space-y-6 items-center"></div>
</div>
</div>
</div>
`;
}
async run() {
dragElement(document.getElementById("window"));
const generateBracket = async (playerCount: number) => {
document.getElementById("bracket").innerHTML = "";
@ -32,12 +52,10 @@ export default class extends Aview {
const byes = totalSlots - playerCount;
let odd = 0;
if (playerCount % 2)
if (playerCount > 9 || (playerCount != 3 && playerCount % 2 != 0))
{
//console.error("odd numbers are temporarily invalids");
//return ;
++odd;
--playerCount;
console.error("odd numbers are temporarily invalids");
return ;
}
let notPowPlayersCount = 0;
@ -46,9 +64,8 @@ export default class extends Aview {
notPowPlayersCount = playerCount - (2 ** Math.floor(Math.log2(playerCount)));
let initialPlayers = Array.from({ length: 2 ** Math.floor(Math.log2(playerCount))}, (_, i) => `Player ${i + 1}`);
let initialPlayers = Array.from({ length: 2 ** Math.floor(Math.log2(playerCount))}, (_, i) => `player ${i + 1}`);
playerCount = 2 ** Math.floor(Math.log2(playerCount));
//let initialPlayers = Array.from({ length: playerCount }, (_, i) => `Player ${i + 1}`);
const bracketWrapper = document.createElement("div");
bracketWrapper.className = "flex space-x-8 overflow-x-auto";
@ -63,8 +80,7 @@ export default class extends Aview {
input.id = `playerName${i}`;
input.value = "";
input.placeholder = name;
input.className =
"w-32 h-10 p-2 text-sm border rounded bg-white shadow disabled:bg-gray-200";
input.className = "w-32 h-10 p-2 text-sm bg-white disabled:bg-gray-200 input-border";
playerInputColumn.appendChild(input);
});
@ -87,10 +103,10 @@ export default class extends Aview {
const input = document.createElement("input");
input.type = "text";
input.id = `playerName${playerCount}`;
input.value = "";
input.placeholder = `Player ${++playerCount}`;
input.value = `player ${++playerCount}`;
input.placeholder = `player ${++playerCount}`;
input.className =
"w-32 h-10 p-2 text-sm border rounded bg-white shadow disabled:bg-gray-200";
"w-32 h-10 p-2 text-sm bg-white disabled:bg-gray-200 input-border";
roundColumn.appendChild(input);
odd--;
nextRound.push("");
@ -103,9 +119,9 @@ export default class extends Aview {
input.type = "text";
input.id = `playerName${playerCount}`;
input.value = "";
input.placeholder = `Player ${++playerCount}`;
input.placeholder = `player ${++playerCount}`;
input.className =
"w-32 h-10 p-2 text-sm border rounded bg-white shadow disabled:bg-gray-200";
"w-32 h-10 p-2 text-sm bg-white disabled:bg-gray-200 input-border";
roundColumn.appendChild(input);
--notPowPlayersCount;
nextRound.push("");
@ -118,7 +134,7 @@ export default class extends Aview {
const matchDiv = document.createElement("div");
matchDiv.className =
"w-32 h-10 flex items-center justify-center bg-white border rounded shadow text-center text-sm";
"w-32 h-10 flex items-center justify-center bg-white text-center text-sm input-border";
matchDiv.textContent = "";
nextRound.push("");
@ -130,11 +146,22 @@ export default class extends Aview {
currentRound = nextRound;
}
document.getElementById("bracket").appendChild(document.createElement("hr")).classList.add("my-4", "mb-8", "w-64", "reverse-border");
document.getElementById("bracket").appendChild(bracketWrapper);
const btn = document.getElementById("bracket").appendChild(document.createElement("button"));
btn.classList.add("default-button", "w-full");
btn.id = "tournament-play";
btn.onclick = () => {
console.log("ok");
};
btn.innerText = "start tournament !!";
};
document.getElementById("bracket-generate")?.addEventListener("click", () => {
const input: HTMLInputElement = document.getElementById("playerNumber") as HTMLInputElement;
if (input.value == "")
return;
generateBracket(+input.value);
});

8
tailwind.config.js
View File

@ -1,7 +1,13 @@
export default {
content: ['./src/front/**/*.{html,js,ts,css}'],
theme: {
extend: {},
extend: {
fontFamily: {
jersey: ['"Jersey 10"', 'sans-serif'],
},
},
},
},
},
plugins: [],
}