mirror of
https://github.com/KeyZox71/knl_meowscendence.git
synced 2025-10-14 10:54:45 +02:00
「✨」 feat(src/front): frontend is starting to look like something pogit c started working on the design implementation, still a lot to do
This commit is contained in:
y-syo
@ -11,17 +11,21 @@
|
||||
|
||||
|
||||
|
||||
<body class="bg-gray-100 dark:bg-neutral-900 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>
|
||||
<!--body class="bg-gray-100 dark:bg-neutral-950 h-screen flex flex-col"-->
|
||||
<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>
|
||||
|
||||
<div id="app" class="flex-1 flex items-center justify-center">
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
BIN
src/front/static/assets/fonts/Kubasta.otf
Normal file
BIN
src/front/static/assets/fonts/Kubasta.otf
Normal file
Binary file not shown.
BIN
src/front/static/assets/fonts/Kubasta.ttf
Normal file
BIN
src/front/static/assets/fonts/Kubasta.ttf
Normal file
Binary file not shown.
@ -1,8 +1,49 @@
|
||||
@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("mt-{28,56,84,112}");
|
||||
|
||||
/*@theme {
|
||||
--color-accent-500: #f55151;
|
||||
}*/
|
||||
@theme {
|
||||
--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
|
||||
;
|
||||
}
|
||||
|
||||
@ -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");
|
||||
|
||||
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 settings_a = menu_div.appendChild(document.createElement("a"));
|
||||
|
||||
@ -14,19 +14,30 @@ export default class extends Aview {
|
||||
|
||||
async getHTML() {
|
||||
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 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>
|
||||
<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>
|
||||
<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>
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -153,6 +164,13 @@ export default class extends Aview {
|
||||
ctx.fillStyle = "black";
|
||||
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.fillRect(paddleOffset, leftPaddleY, paddleWidth, paddleHeight);
|
||||
ctx.fillRect(canvas.width - paddleWidth - paddleOffset, rightPaddleY, paddleWidth, paddleHeight);
|
||||
@ -161,13 +179,15 @@ export default class extends Aview {
|
||||
if (game_playing)
|
||||
ctx.fillRect(ballX, ballY, ballSize, ballSize);
|
||||
|
||||
ctx.font = "24px sans-serif";
|
||||
let text_score = `${p1_name} ${p1_score} - ${p2_score} ${p2_name}`;
|
||||
ctx.fillText(text_score, canvas.width / 2 - (ctx.measureText(text_score).width / 2), 30);
|
||||
ctx.font = "24px Kubasta";
|
||||
let text_score = `${p1_score} - ${p2_score}`;
|
||||
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)
|
||||
{
|
||||
ctx.font = "32px sans-serif";
|
||||
ctx.font = "32px Kubasta";
|
||||
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);
|
||||
document.getElementById("game-buttons").classList.remove("hidden");
|
||||
@ -184,12 +204,12 @@ export default class extends Aview {
|
||||
countdown--;
|
||||
countdownTimer = now;
|
||||
}
|
||||
ctx.font = "48px sans-serif";
|
||||
ctx.font = "48px Kubasta";
|
||||
ctx.fillText(countdown.toString(), canvas.width / 2 - 10, canvas.height / 2 + 24);
|
||||
}
|
||||
else if (countdown === 0)
|
||||
{
|
||||
ctx.font = "48px sans-serif";
|
||||
ctx.font = "48px Kubasta";
|
||||
ctx.fillText("Go!", canvas.width / 2 - 30, canvas.height / 2 + 24);
|
||||
setTimeout(() => {
|
||||
game_playing = true;
|
||||
@ -240,7 +260,7 @@ export default class extends Aview {
|
||||
|
||||
canvas = document.createElement("canvas");
|
||||
canvas.id = "gameCanvas";
|
||||
canvas.classList.add("rounded-md");
|
||||
canvas.classList.add("reverse-border");
|
||||
|
||||
document.getElementById("main-div").prepend(canvas);
|
||||
|
||||
|
||||
@ -9,13 +9,23 @@ export default class extends Aview {
|
||||
}
|
||||
|
||||
async getHTML() {
|
||||
// <div class="text-center p-10 bg-white dark:bg-neutral-800 rounded-xl shadow space-y-4"-->
|
||||
return `
|
||||
<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 transition-colors" href="/pong" data-link>
|
||||
Pong
|
||||
</a>
|
||||
<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 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>
|
||||
<a class="default-button" href="/pong" data-link>
|
||||
Pong
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -10,15 +10,25 @@ 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-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 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 transition-colors" href="/pong/tournament" data-link>
|
||||
local tournament
|
||||
</a>
|
||||
<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]">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">
|
||||
<a class="default-button" href="/pong/local" data-link>
|
||||
local match
|
||||
</a>
|
||||
<a class="default-button" href="/pong/tournament" data-link>
|
||||
local tournament
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -19,6 +19,31 @@ export default class extends Aview {
|
||||
}
|
||||
|
||||
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 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");
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user