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

「🏗️」 wip(front): profile page

Browse Source
This commit is contained in:
y-syo
2025-10-19 09:29:33 +02:00
parent f4afb7fdb5
commit ed2aa325e5
11 changed files with 448 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,29 +1,38 @@
import Aview from "./Aview.ts"
import { dragElement } from "./drag.ts";
import { setOnekoState } from "../oneko.ts"
import { isLogged, navigationManager } from "../main.ts"
export default class extends Aview {
constructor()
{
super();
this.setTitle("profile");
setOnekoState("default");
}
async getHTML() {
return `
<div id="main-window" class="default-border shadow-2x1 bg-neutral-200 dark:bg-neutral-800">
<div class="flex flex-row items-stretch">
<div class="inline-block bg-linear-to-b from-orange-200 to-orange-300 min-h-84 w-6 relative">
<!--div class="absolute bottom-1 left-full whitespace-nowrap origin-bottom-left -rotate-90 font-bold">knl_meowscendence</div-->
<div class="absolute bottom-1 left-full whitespace-nowrap origin-bottom-left -rotate-90 font-bold">girls kissing :3</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]">profile.ts</span>
<div>
<button> - </button>
<button> □ </button>
<a href="/" data-link> × </a>
</div>
<div class="flex flex-col items-center">
<div id="profile-items" class="flex flex-col items-center">
</div>
<div class="bg-neutral-200 dark:bg-neutral-800 text-center pb-10 pt-5 px-10 space-y-4 reverse-border">
<div class="flex flex-col space-y-4 w-full">
<div id="profile-profile" class="default-border h-24 flex flex-row place-content-stretch content-center items-center space-x-6 pr-4">
</div>
<div id="menu-bottom-div" class="hidden mt-auto flex flex-col items-center">
<hr class="my-2 w-32 reverse-border">
<button id="menu-logout" class="menu-default-button">logout</button>
<div class="flex flex-row space-x-4 w-full min-w-145">
<ul id="profile-scorelist" class="reverse-border bg-neutral-300 dark:bg-neutral-900 h-48 w-full overflow-scroll no-scrollbar">
</ul>
<div id="graph-ig-idk-im-scared" class="reverse-border bg-neutral-300 dark:bg-neutral-900 h-48 w-full">
</div>
</div>
</div>
</div>
@ -31,43 +40,15 @@ export default class extends Aview {
`;
}
open: boolean = false;
async run() {
if (!await isLogged())
navigationManager("/");
async run() {
let uuid: String;
if (this.open)
{
this.open = false;
document.getElementById("taskbar-menu").innerHTML = "";
return ;
}
this.open = true;
document.getElementById("taskbar-menu").innerHTML = await this.getHTML();
dragElement(document.getElementById("window"));
let uuid: String;
uuid = document.cookie.match(new RegExp('(^| )' + "uuid" + '=([^;]+)'))[2];
async function getMainHTML() {
if (!(await isLogged()))
{
document.getElementById("menu-bottom-div").classList.add("hidden");
return `
<a class="menu-default-button inline-flex items-center justify-center" href="/login" data-link>login</a>
<a class="menu-default-button inline-flex items-center justify-center" href="/register" data-link>register</a>
`;
}
document.getElementById("menu-bottom-div").classList.remove("hidden");
uuid = document.cookie.match(new RegExp('(^| )' + "uuid" + '=([^;]+)'))[2];
return `
<span class="menu-default-label inline-flex items-center justify-center">hi, ${uuid} !</span>
<hr class="my-2 w-32 reverse-border">
<button class="menu-default-button">profile</button>
<button class="menu-default-button">settings</button>
`;
}
document.getElementById("profile-items").innerHTML = await getMainHTML();
/*const userdata_req = await fetch(`http://localhost:3002/users/${uuid}`, {
const userdata_req = await fetch(`http://localhost:3002/users/${uuid}`, {
method: "GET",
credentials: "include",
});
@ -78,28 +59,56 @@ export default class extends Aview {
}
let userdata = await userdata_req.json();
console.log(userdata_req);*/
const matchCount_req = await fetch(`http://localhost:3002/users/${uuid}/matchHistory/count`, {
method: "GET",
credentials: "include",
});
const matchCount = await matchCount_req.json();
/*const main = document.getElementById("profile-profile");
const nametag = main.appendChild(document.createElement("span"));
const matches_req = await fetch(`http://localhost:3002/users/${uuid}/matchHistory?iStart=0&iEnd=${matchCount.n_matches}`, {
method: "GET",
credentials: "include",
});
const matches = await matches_req.json();
nametag.innerHTML = `Hiiiiii ${userdata.displayName} ! :D`;
const main = document.getElementById("profile-scorelist");
if (!main)
return console.error("what");
console.log(matches);
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);
console.log(match.tx);
}
}
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 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");
const winrate = main.appendChild(document.createElement("div"));
const winrate = profile.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");*/
//console.log(document.getElementById("menu-logout"));
document.getElementById("menu-logout").addEventListener("click", async () => {
let req = await fetch("http://localhost:3001/logout", {
method: "GET",
credentials: "include",
});
if (req.status === 200)
this.run();
else
console.error("logout failed");
});
}
winrate.innerHTML = `
<div> wins: ${userdata.wins} </div>
<div> losses: ${userdata.losses} </div>
<div> winrate: ${Math.round(userdata.wins / (userdata.wins + userdata.losses) * 100)} % </div>
`;
winrate.classList.add("text-neutral-900", "dark:text-white", "grow", "content-center");
}
}