diff --git a/src/front/index.html b/src/front/index.html index 0e7465d..97d50d2 100644 --- a/src/front/index.html +++ b/src/front/index.html @@ -11,17 +11,21 @@ - - - - + + +
+
+ +
+ + diff --git a/src/front/static/assets/fonts/Kubasta.otf b/src/front/static/assets/fonts/Kubasta.otf new file mode 100644 index 0000000..06001b2 Binary files /dev/null and b/src/front/static/assets/fonts/Kubasta.otf differ diff --git a/src/front/static/assets/fonts/Kubasta.ttf b/src/front/static/assets/fonts/Kubasta.ttf new file mode 100644 index 0000000..18f5b82 Binary files /dev/null and b/src/front/static/assets/fonts/Kubasta.ttf differ diff --git a/src/front/static/css/style.css b/src/front/static/css/style.css index 09f3bdb..e189baa 100644 --- a/src/front/static/css/style.css +++ b/src/front/static/css/style.css @@ -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 + ; +} diff --git a/src/front/static/ts/main.ts b/src/front/static/ts/main.ts index 0443d91..8c58b42 100644 --- a/src/front/static/ts/main.ts +++ b/src/front/static/ts/main.ts @@ -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")); diff --git a/src/front/static/ts/views/Game.ts b/src/front/static/ts/views/Game.ts index 5988cc4..36cf348 100644 --- a/src/front/static/ts/views/Game.ts +++ b/src/front/static/ts/views/Game.ts @@ -14,19 +14,30 @@ export default class extends Aview { async getHTML() { return ` -
+
+
+ knl_meowscendence +
+ + + × +
+
+ + +
- - + +
- +
+
`; } @@ -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); diff --git a/src/front/static/ts/views/MainMenu.ts b/src/front/static/ts/views/MainMenu.ts index ce2946f..d6d70d8 100644 --- a/src/front/static/ts/views/MainMenu.ts +++ b/src/front/static/ts/views/MainMenu.ts @@ -9,13 +9,23 @@ export default class extends Aview { } async getHTML() { + //
return ` -
-

knl_meowscendence :D

-

i like pong

- - Pong - +
+
+ knl_meowscendence +
+ + + × +
+
+
+

i like pong

+ + Pong + +
`; } diff --git a/src/front/static/ts/views/PongMenu.ts b/src/front/static/ts/views/PongMenu.ts index 5b9eee7..91efa38 100644 --- a/src/front/static/ts/views/PongMenu.ts +++ b/src/front/static/ts/views/PongMenu.ts @@ -10,15 +10,25 @@ export default class extends Aview { async getHTML() { return ` -
-

pong is funny yay

-
- - local match - - - local tournament - +
+
+ pong_game.ts +
+ + + × +
+
+
+

pong is funny yay

+
`; diff --git a/src/front/static/ts/views/Profile.ts b/src/front/static/ts/views/Profile.ts index d81aba9..16fa93d 100644 --- a/src/front/static/ts/views/Profile.ts +++ b/src/front/static/ts/views/Profile.ts @@ -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"); } }