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

「✨」 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

18
src/front/index.html
View File

@ -11,17 +11,21 @@
<body class="bg-gray-100 dark:bg-neutral-900 h-screen flex flex-col"> <!--body class="bg-gray-100 dark:bg-neutral-950 h-screen flex flex-col"-->
<!--script src="https://kanel.ovh/oneko.js"></script--> <body class="bg-neutral-950 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>
<nav class="bg-white dark:bg-neutral-800 mx-8 rounded-b-xl shadow-md px-4 sm:px-6 lg:px-8 flex justify-end h-16 items-center space-x-6 m-">
<a class="text-neutral-900 hover:text-neutral-700 dark:text-white dark:hover:text-neutral-400" href="/" data-link>home</a>
<a id="profile-button" class="text-neutral-900 hover:text-neutral-700 dark:text-white dark:hover:text-neutral-400" href="/login" data-link>login</a>
</nav>
<div id="app" class="flex-1 flex items-center justify-center"> <div id="app" class="flex-1 flex items-center justify-center">
</div> </div>
<div class="border-t-2 border-neutral-300 dark:border-neutral-800 sticky bottom-0">
<nav class="bg-neutral-200 dark:bg-neutral-900 shadow-md border-t-2 border-neutral-400 dark:border-neutral-700 px-4 sm:px-6 lg:px-8 flex justify-start h-12 items-center space-x-6 font-[Kubasta]">
<a id="profile-button" class="text-neutral-900 hover:text-neutral-700 dark:text-white dark:hover:text-neutral-400" href="/login" data-link>login</a>
<a class="text-neutral-900 hover:text-neutral-700 dark:text-white dark:hover:text-neutral-400" href="/" data-link>home</a>
</nav>
</div>
<script type="module" src="/static/ts/main.ts"></script> <script type="module" src="/static/ts/main.ts"></script>
</body> </body>
</html> </html>

BIN
src/front/static/assets/fonts/Kubasta.otf Normal file
View File

Binary file not shown.

BIN
src/front/static/assets/fonts/Kubasta.ttf Normal file
View File

Binary file not shown.

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

@ -1,8 +1,49 @@
@import "tailwindcss"; @import "tailwindcss";
@font-face {
font-family: Kubasta;
src: url('../assets/fonts/Kubasta.otf') format("opentype");
}
@source inline("space-y-{18,46,102,214,438,886,1782,3574,7158,14326,28662,57334,114678,229366,458742,917494}"); @source inline("space-y-{18,46,102,214,438,886,1782,3574,7158,14326,28662,57334,114678,229366,458742,917494}");
@source inline("mt-{28,56,84,112}"); @source inline("mt-{28,56,84,112}");
/*@theme { @theme {
--color-accent-500: #f55151; --shadow-2x1: 2px 2px 0px black;
}*/ /*
--color-kanel-700: #ac5c24;
*/
}
.default-border {
@apply border-2
border-t-neutral-100 border-l-neutral-100 border-r-neutral-400 border-b-neutral-400
dark:border-t-neutral-500 dark:border-l-neutral-500 dark:border-r-neutral-700 dark:border-b-neutral-700
;
}
.reverse-border {
@apply border-2
border-t-neutral-400 border-l-neutral-400 border-r-neutral-100 border-b-neutral-100
dark:border-t-neutral-700 dark:border-l-neutral-700 dark:border-r-neutral-500 dark:border-b-neutral-500
;
}
.input-border {
@apply border-2
border-t-neutral-950 border-l-neutral-950 border-r-neutral-200 border-b-neutral-200
dark:border-t-neutral-950 dark:border-l-neutral-950 dark:border-r-neutral-600 dark:border-b-neutral-600
;
}
.default-button {
@apply shadow-2x1
bg-neutral-200 hover:bg-neutral-300 active:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:active:bg-neutral-700
text-neutral-900 dark:text-white
px-4 py-2
delay-0 duration-150 transition-colors
border-2 border-t-neutral-100 dark:border-t-neutral-500 border-l-neutral-100 dark:border-l-neutral-500 border-r-neutral-400 dark:border-r-neutral-700 border-b-neutral-400 dark:border-b-neutral-700
active:border-t-neutral-400 dark:active:border-t-neutral-700 active:border-l-neutral-400 dark:active:border-l-neutral-700 active:border-r-neutral-100 dark:active:border-r-neutral-500 active:border-b-neutral-100 dark:active:border-b-neutral-500
;
}

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

@ -18,7 +18,7 @@ export async function isLogged(): boolean {
button_dropdown.classList.add("text-neutral-900", "group-hover:text-neutral-700", "dark:text-white", "dark:group-hover:text-neutral-400"); button_dropdown.classList.add("text-neutral-900", "group-hover:text-neutral-700", "dark:text-white", "dark:group-hover:text-neutral-400");
const menu_div = dropdown.appendChild(document.createElement("div")); const menu_div = dropdown.appendChild(document.createElement("div"));
menu_div.classList.add("float:right", "hidden", "absolute", "right-0", "bg-[#f9f9f9]", "min-w-[160px]", "shadow-lg", "z-10", "group-hover:block"); menu_div.classList.add("float:right", "hidden", "absolute", "left-0", "bottom-full", "dark:bg-neutral-800", "dark:text-white", "min-w-[160px]", "shadow-lg", "z-10", "group-hover:block");
const profile_a = menu_div.appendChild(document.createElement("a")); const profile_a = menu_div.appendChild(document.createElement("a"));
const settings_a = menu_div.appendChild(document.createElement("a")); const settings_a = menu_div.appendChild(document.createElement("a"));

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

@ -14,13 +14,24 @@ export default class extends Aview {
async getHTML() { async getHTML() {
return ` 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 id="player-inputs" class="flex flex-col space-y-4">
<div class="flex flex-row"> <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> <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>
<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="player2" placeholder="Player 2" class="bg-white text-neutral-900 px-4 py-2 w-full input-border" required></input></span>
</div> </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>
<div id="game-buttons" class="hidden flex mt-4"> <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> <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>
@ -153,6 +164,13 @@ export default class extends Aview {
ctx.fillStyle = "black"; ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height); 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.fillStyle = "white";
ctx.fillRect(paddleOffset, leftPaddleY, paddleWidth, paddleHeight); ctx.fillRect(paddleOffset, leftPaddleY, paddleWidth, paddleHeight);
ctx.fillRect(canvas.width - paddleWidth - paddleOffset, rightPaddleY, paddleWidth, paddleHeight); ctx.fillRect(canvas.width - paddleWidth - paddleOffset, rightPaddleY, paddleWidth, paddleHeight);
@ -161,13 +179,15 @@ export default class extends Aview {
if (game_playing) if (game_playing)
ctx.fillRect(ballX, ballY, ballSize, ballSize); ctx.fillRect(ballX, ballY, ballSize, ballSize);
ctx.font = "24px sans-serif"; ctx.font = "24px Kubasta";
let text_score = `${p1_name} ${p1_score} - ${p2_score} ${p2_name}`; let text_score = `${p1_score} - ${p2_score}`;
ctx.fillText(text_score, canvas.width / 2 - (ctx.measureText(text_score).width / 2), 30); 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) if (match_over)
{ {
ctx.font = "32px sans-serif"; ctx.font = "32px Kubasta";
const winner = `${p1_score > p2_score ? p1_name : p2_name} won :D`; 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); ctx.fillText(winner, canvas.width / 2 - (ctx.measureText(winner).width / 2), canvas.height / 2 + 16);
document.getElementById("game-buttons").classList.remove("hidden"); document.getElementById("game-buttons").classList.remove("hidden");
@ -184,12 +204,12 @@ export default class extends Aview {
countdown--; countdown--;
countdownTimer = now; countdownTimer = now;
} }
ctx.font = "48px sans-serif"; ctx.font = "48px Kubasta";
ctx.fillText(countdown.toString(), canvas.width / 2 - 10, canvas.height / 2 + 24); ctx.fillText(countdown.toString(), canvas.width / 2 - 10, canvas.height / 2 + 24);
} }
else if (countdown === 0) else if (countdown === 0)
{ {
ctx.font = "48px sans-serif"; ctx.font = "48px Kubasta";
ctx.fillText("Go!", canvas.width / 2 - 30, canvas.height / 2 + 24); ctx.fillText("Go!", canvas.width / 2 - 30, canvas.height / 2 + 24);
setTimeout(() => { setTimeout(() => {
game_playing = true; game_playing = true;
@ -240,7 +260,7 @@ export default class extends Aview {
canvas = document.createElement("canvas"); canvas = document.createElement("canvas");
canvas.id = "gameCanvas"; canvas.id = "gameCanvas";
canvas.classList.add("rounded-md"); canvas.classList.add("reverse-border");
document.getElementById("main-div").prepend(canvas); document.getElementById("main-div").prepend(canvas);

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

@ -9,14 +9,24 @@ export default class extends Aview {
} }
async getHTML() { async getHTML() {
// <div class="text-center p-10 bg-white dark:bg-neutral-800 rounded-xl shadow space-y-4"-->
return ` return `
<div class="text-center p-10 bg-white dark:bg-neutral-800 rounded-xl shadow space-y-4"> <div class="default-border">
<h1 class="text-4xl font-bold text-blue-800 dark:text-blue-300">knl_meowscendence :D</h1> <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> <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> <a class="default-button" href="/pong" data-link>
Pong Pong
</a> </a>
</div> </div>
</div>
`; `;
} }
} }

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

@ -10,17 +10,27 @@ export default class extends Aview {
async getHTML() { async getHTML() {
return ` return `
<div class="text-center p-12 bg-white dark:bg-neutral-800 rounded-xl shadow space-y-4"> <div class="default-border">
<p class="text-gray-700 dark:text-white text-3xl font-bold pb-4">pong is funny yay</p> <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"> <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> <a class="default-button" href="/pong/local" data-link>
local match local match
</a> </a>
<a class="bg-red-500 hover:bg-red-400 text-white px-4 py-2 rounded transition-colors" href="/pong/tournament" data-link> <a class="default-button" href="/pong/tournament" data-link>
local tournament local tournament
</a> </a>
</div> </div>
</div> </div>
</div>
`; `;
} }
} }

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

@ -19,6 +19,31 @@ export default class extends Aview {
} }
async run() { 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 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");
} }
} }