diff --git a/src/front/static/css/style.css b/src/front/static/css/style.css index 0d686fe..09f3bdb 100644 --- a/src/front/static/css/style.css +++ b/src/front/static/css/style.css @@ -1,5 +1,8 @@ @import "tailwindcss"; -@theme { +@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; -} +}*/ diff --git a/src/front/static/ts/main.ts b/src/front/static/ts/main.ts index 676a313..8ce2cc8 100644 --- a/src/front/static/ts/main.ts +++ b/src/front/static/ts/main.ts @@ -1,11 +1,3 @@ -/*import MainMenu from "./views/MainMenu.ts"; -import PongMenu from "./views/PongMenu.ts"; - -import LoginPage from "./views/LoginPage.ts"; -import RegisterPage from "./views/RegisterPage.ts"; - -import Game from "./views/Game.ts";*/ - const navigationManager = url => { history.pushState(null, null, url); router(); @@ -14,17 +6,11 @@ const navigationManager = url => { let view; const routes = [ - /*{ path: "/", view: MainMenu }, - - { path: "/pong", view: PongMenu }, - { path: "/pong/solo", view: Game }, - - { path: "/login", view: LoginPage }, - { path: "/register", view: RegisterPage },*/ { path: "/", view: () => import("./views/MainMenu.ts") }, { path: "/pong", view: () => import("./views/PongMenu.ts") }, - { path: "/pong/solo", view: () => import("./views/Game.ts") }, + { path: "/pong/local", view: () => import("./views/Game.ts") }, + { path: "/pong/tournament", view: () => import("./views/TournamentMenu.ts") }, { path: "/login", view: () => import("./views/LoginPage.ts") }, { path: "/register", view: () => import("./views/RegisterPage.ts") }, diff --git a/src/front/static/ts/views/Game.ts b/src/front/static/ts/views/Game.ts index 5610676..3bd39b5 100644 --- a/src/front/static/ts/views/Game.ts +++ b/src/front/static/ts/views/Game.ts @@ -7,7 +7,7 @@ export default class extends Aview { constructor() { super(); - this.setTitle("pog or pong ? :3"); + this.setTitle("pong (local match)"); this.running = true; } @@ -67,7 +67,7 @@ export default class extends Aview { rightPaddleY -= paddleSpeed * elapsed; if (keys["ArrowDown"] && rightPaddleY < canvas.height - paddleHeight) rightPaddleY += paddleSpeed * elapsed; - } + } function getBounceVelocity(paddleY) { const speed = ballSpeed; @@ -209,6 +209,7 @@ export default class extends Aview { countdown = 3; countdownTimer = performance.now(); }); + requestAnimationFrame(gameLoop); } } diff --git a/src/front/static/ts/views/LoginPage.ts b/src/front/static/ts/views/LoginPage.ts index bdfc553..aa7a5c0 100644 --- a/src/front/static/ts/views/LoginPage.ts +++ b/src/front/static/ts/views/LoginPage.ts @@ -13,8 +13,8 @@ export default class extends Aview {

login

- - + + @@ -31,16 +31,16 @@ export default class extends Aview { const password = (document.getElementById("password") as HTMLInputElement).value; try { - /*const response = await fetch("https://localhost/login", { + const response = await fetch("http://localhost:3001/login", { method: "POST", headers: { "Content-Type": "application/json", }, credentials: "include", body: JSON.stringify({ user: username, password: password }), }); - const data = await response.json();*/ - const data = { "error": "invalid password or smth" }; - const response = { status: 400}; + const data = await response.json(); + /*const data = { "error": "invalid password or smth" }; + const response = { status: 400};*/ if (response.status === 200) @@ -56,6 +56,7 @@ export default class extends Aview { } catch (error) { + console.log(error); document.getElementById("login-error-message").innerHTML = "error: server error, try again later..."; document.getElementById("login-error-message").classList.remove("hidden"); } diff --git a/src/front/static/ts/views/PongMenu.ts b/src/front/static/ts/views/PongMenu.ts index 90dabdd..718b1c0 100644 --- a/src/front/static/ts/views/PongMenu.ts +++ b/src/front/static/ts/views/PongMenu.ts @@ -5,16 +5,21 @@ export default class extends Aview { constructor() { super(); - this.setTitle("ponging ur mom"); + this.setTitle("knl is trans(cendence)"); } async getHTML() { return ` -
+

pong is funny yay

- - solo - +
+ + local match + + + local tournament + +
`; } diff --git a/src/front/static/ts/views/RegisterPage.ts b/src/front/static/ts/views/RegisterPage.ts index 7e97a62..d0534ab 100644 --- a/src/front/static/ts/views/RegisterPage.ts +++ b/src/front/static/ts/views/RegisterPage.ts @@ -5,7 +5,7 @@ export default class extends Aview { constructor() { super(); - this.setTitle("ft_trans 🏳️‍⚧️"); + this.setTitle("register"); } async getHTML() { @@ -13,8 +13,8 @@ export default class extends Aview {

register

- - + + diff --git a/src/front/static/ts/views/TournamentMenu.ts b/src/front/static/ts/views/TournamentMenu.ts new file mode 100644 index 0000000..c36b3d7 --- /dev/null +++ b/src/front/static/ts/views/TournamentMenu.ts @@ -0,0 +1,141 @@ +import Aview from "./Aview.ts" + +export default class extends Aview { + + constructor() + { + super(); + this.setTitle("Tournament"); + } + + async getHTML() { + return ` +
+

how many players ?

+
+ + +
+
+
+ `; + } + + async run() { + const generateBracket = async (playerCount: number) => { + document.getElementById("bracket").innerHTML = ""; + + const rounds = Math.ceil(Math.log2(playerCount)); + const totalSlots = 2 ** rounds; + const byes = totalSlots - playerCount; + + let odd = 0; + if (playerCount % 2) + { + console.error("odd numbers are temporarily invalids"); + return ; + /*++odd; + --playerCount;*/ + } + + let notPowPlayersCount = 0; + + if ((playerCount & (playerCount - 1)) != 0) + notPowPlayersCount = playerCount - (2 ** Math.floor(Math.log2(playerCount))); + + + 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"; + + // Round 0: Player input column + const playerInputColumn = document.createElement("div"); + playerInputColumn.className = `flex flex-col mt-${(notPowPlayersCount + odd) * 28} space-y-4`; + + initialPlayers.forEach((name, i) => { + const input = document.createElement("input"); + input.type = "text"; + 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"; + playerInputColumn.appendChild(input); + }); + + bracketWrapper.appendChild(playerInputColumn); + + let currentRound = initialPlayers; + let previousPadding = 4; + for (let round = 1; round <= rounds; round++) + { + const roundColumn = document.createElement("div"); + previousPadding = previousPadding * 2 + 10 + roundColumn.className = `flex flex-col justify-center space-y-${previousPadding}`; + + const nextRound: string[] = []; + + if (!notPowPlayersCount) + { + if (odd) + { + const input = document.createElement("input"); + input.type = "text"; + input.id = `playerName${playerCount}`; + input.value = ""; + input.placeholder = `Player ${++playerCount}`; + input.className = + "w-32 h-10 p-2 text-sm border rounded bg-white shadow disabled:bg-gray-200"; + roundColumn.appendChild(input); + odd--; + nextRound.push(""); + } + } + + while (notPowPlayersCount) + { + const input = document.createElement("input"); + input.type = "text"; + input.id = `playerName${playerCount}`; + input.value = ""; + input.placeholder = `Player ${++playerCount}`; + input.className = + "w-32 h-10 p-2 text-sm border rounded bg-white shadow disabled:bg-gray-200"; + roundColumn.appendChild(input); + --notPowPlayersCount; + nextRound.push(""); + } + + for (let i = 0; i < currentRound.length; i += 2) + { + const p1 = currentRound[i]; + const p2 = currentRound[i + 1]; + + 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"; + + matchDiv.textContent = ""; + nextRound.push(""); + + roundColumn.appendChild(matchDiv); + } + + bracketWrapper.appendChild(roundColumn); + currentRound = nextRound; + } + + document.getElementById("bracket").appendChild(bracketWrapper); + }; + + document.getElementById("bracket-generate")?.addEventListener("click", () => { + const input: HTMLInputElement = document.getElementById("playerNumber") as HTMLInputElement; + generateBracket(+input.value); + }); + + + } +} diff --git a/tailwind.config.js b/tailwind.config.js index d2fdab4..9bd8368 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,5 @@ export default { - content: ['./src/front/**/*.{html,js}'], + content: ['./src/front/**/*.{html,js,ts,css}'], theme: { extend: {}, },