42_adjoly/knl_meowscendence
1
0
Fork 0
mirror of https://github.com/KeyZox71/knl_meowscendence.git synced 2026-01-01 06:06:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

「🏗️」 wip(front): partial avatar implementation (a lot of reworks to do)

Browse Source
This commit is contained in:
y-syo
2025-10-23 14:46:15 +02:00
parent fa0449ba16
commit d20597ee6a
10 changed files with 181 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/front/static/ts/views/TournamentMenu.ts
View File

@ -1,4 +1,5 @@
import Aview from "./Aview.ts"
import { dragElement } from "./drag.ts";
import { setOnekoState, setBallPos } from "../oneko.ts"
export default class extends Aview {
@ -12,18 +13,37 @@ 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-lg font-bold pb-4">how many players ?</p>
<div class="flex flex-col space-y-4">
<input type="number" id="playerNumber" value="6" placeholder="number of players" class="bg-white text-neutral-900 border rounded-md w-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"></input>
<button type="submit" id="bracket-generate" class="bg-blue-600 text-white hover:bg-blue-500 w-full py-2 rounded-md transition-colors">create the bracket</button>
<div id="bracket"></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]">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 p-10 pt-5 space-y-4 reverse-border">
<p class="text-neutral-900 dark:text-white text-lg font-bold pb-4">how many players ?</p>
<div class="flex flex-col space-y-4">
<select id="playerNumber" class="bg-white text-shadow-neutral-900 p-2 input-border">
<option value="">-- player number --</option>
<option value="2">2 players</option>
<option value="3">3 players</option>
<option value="4">4 players</option>
<option value="6">6 players</option>
<option value="8">8 players</option>
</select>
<button type="submit" id="bracket-generate" class="default-button">create the bracket</button>
<div id="bracket" class="flex flex-col space-y-6 items-center"></div>
</div>
</div>
</div>
`;
}
async run() {
dragElement(document.getElementById("window"));
const generateBracket = async (playerCount: number) => {
document.getElementById("bracket").innerHTML = "";
@ -32,12 +52,10 @@ export default class extends Aview {
const byes = totalSlots - playerCount;
let odd = 0;
if (playerCount % 2)
if (playerCount > 9 || (playerCount != 3 && playerCount % 2 != 0))
{
//console.error("odd numbers are temporarily invalids");
//return ;
++odd;
--playerCount;
console.error("odd numbers are temporarily invalids");
return ;
}
let notPowPlayersCount = 0;
@ -46,9 +64,8 @@ export default class extends Aview {
notPowPlayersCount = playerCount - (2 ** Math.floor(Math.log2(playerCount)));
let initialPlayers = Array.from({ length: 2 ** Math.floor(Math.log2(playerCount))}, (_, i) => `Player ${i + 1}`);
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";
@ -63,8 +80,7 @@ export default class extends Aview {
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";
input.className = "w-32 h-10 p-2 text-sm bg-white disabled:bg-gray-200 input-border";
playerInputColumn.appendChild(input);
});
@ -87,10 +103,10 @@ export default class extends Aview {
const input = document.createElement("input");
input.type = "text";
input.id = `playerName${playerCount}`;
input.value = "";
input.placeholder = `Player ${++playerCount}`;
input.value = `player ${++playerCount}`;
input.placeholder = `player ${++playerCount}`;
input.className =
"w-32 h-10 p-2 text-sm border rounded bg-white shadow disabled:bg-gray-200";
"w-32 h-10 p-2 text-sm bg-white disabled:bg-gray-200 input-border";
roundColumn.appendChild(input);
odd--;
nextRound.push("");
@ -103,9 +119,9 @@ export default class extends Aview {
input.type = "text";
input.id = `playerName${playerCount}`;
input.value = "";
input.placeholder = `Player ${++playerCount}`;
input.placeholder = `player ${++playerCount}`;
input.className =
"w-32 h-10 p-2 text-sm border rounded bg-white shadow disabled:bg-gray-200";
"w-32 h-10 p-2 text-sm bg-white disabled:bg-gray-200 input-border";
roundColumn.appendChild(input);
--notPowPlayersCount;
nextRound.push("");
@ -118,7 +134,7 @@ export default class extends Aview {
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";
"w-32 h-10 flex items-center justify-center bg-white text-center text-sm input-border";
matchDiv.textContent = "";
nextRound.push("");
@ -130,11 +146,22 @@ export default class extends Aview {
currentRound = nextRound;
}
document.getElementById("bracket").appendChild(document.createElement("hr")).classList.add("my-4", "mb-8", "w-64", "reverse-border");
document.getElementById("bracket").appendChild(bracketWrapper);
const btn = document.getElementById("bracket").appendChild(document.createElement("button"));
btn.classList.add("default-button", "w-full");
btn.id = "tournament-play";
btn.onclick = () => {
console.log("ok");
};
btn.innerText = "start tournament !!";
};
document.getElementById("bracket-generate")?.addEventListener("click", () => {
const input: HTMLInputElement = document.getElementById("playerNumber") as HTMLInputElement;
if (input.value == "")
return;
generateBracket(+input.value);
});