nmcnew/bracketeer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: Creating cells and brackets

Browse Source
This commit is contained in:
nmcnew
2024-10-05 15:00:18 -06:00
parent 187b3413b8
commit 5b4f97c99c
5 changed files with 125 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/lib/DTOs/PlayerCellDto.ts
View File

@@ -1,12 +1,15 @@
export default interface PlayerCellDto { export default interface PlayerCellDto {
name: string, name: string,
playerId: string,
prefix?: string, prefix?: string,
character?: string, character?: string,
seed: number,
} }
export interface Set { export interface PlayerSet {
player1: PlayerCellDto,
player2: PlayerCellDto,
winner?: PlayerCellDto,
matchId: string,
} }
export class Round { export class Round {
constructor(seededPlayers: Array<PlayerCellDto>) {
}
} }

34
src/lib/components/HeadToHeadCell.svelte
View File

@@ -1,31 +1,35 @@
<script lang="ts"> <script lang="ts">
import type PlayerCellDto from '$lib/DTOs/PlayerCellDto'; import type PlayerSet from '$lib/DTOs/PlayerCellDto';
import PlayerCell from './PlayerCell.svelte'; import PlayerCell from './PlayerCell.svelte';
interface HeadToHeadCellProps { interface HeadToHeadCellProps {
player1: PlayerCellDto; playerSet: PlayerSet;
player2: PlayerCellDto;
player1Seed: number;
player2Seed: number;
setId: string;
} }
let { player1, player2, player1Seed, player2Seed, setId }: HeadToHeadCellProps = $props();
let { playerSet } = $props();
console.debug(playerSet);
const winnerStyles = 'border-emerald-800 ring-2 ring-inset ring-emerald-500';
const loserStyles = 'text-neutral-300';
</script> </script>
<div class="flex flex-col"> <div class="flex flex-col">
<div class="text-sm self-center text-zinc-400"> <div class="text-sm self-center text-zinc-400">
╭ Match {setId} ╮ ╭ Match {playerSet.matchId} ╮
</div> </div>
<div class="px-1 flex border rounded-t-md border-zinc-600"> <div
class="px-1 flex border rounded-t-md border-zinc-600 {playerSet.winner.playerId ===
playerSet.player1.playerId
? winnerStyles
: ''}"
>
<div class="flex-1 overflow-hidden"> <div class="flex-1 overflow-hidden">
<PlayerCell playerCell={player1} /> <PlayerCell playerCell={playerSet.player1} />
</div> </div>
<div class="text-zinc-400">{player1Seed}</div> <div class="text-zinc-400">{playerSet.player1.seed}</div>
</div> </div>
<div class="px-1 flex border border-t-0 rounded-b-md border-zinc-600"> <div class="px-1 flex border border-t-0 rounded-b-md border-zinc-600 {loserStyles} ">
<div class="flex-1 overflow-hidden"> <div class="flex-1 overflow-hidden">
<PlayerCell playerCell={player2} /> <PlayerCell playerCell={playerSet.player2} />
</div> </div>
<div class="text-zinc-400">{player2Seed}</div> <div class="text-zinc-400">{playerSet.player2.seed}</div>
</div> </div>
</div> </div>

5
src/lib/components/PlayerCell.svelte
View File

@@ -2,12 +2,13 @@
import type PlayerCellDto from '$lib/DTOs/PlayerCellDto'; import type PlayerCellDto from '$lib/DTOs/PlayerCellDto';
interface PlayerCellProps { interface PlayerCellProps {
playerCell: PlayerCellDto; playerCell: PlayerCellDto;
isWinner?: boolean;
} }
let { playerCell }: PlayerCellProps = $props(); let { playerCell, isWinner }: PlayerCellProps = $props();
</script> </script>
{#if playerCell.prefix != null} {#if playerCell.prefix != null}
<span class="text-neutral-400"> {playerCell.prefix} | </span> <span class="text-inherit text-neutral-400"> {playerCell.prefix} | </span>
{/if} {/if}
{playerCell.name} {playerCell.name}
{#if playerCell.character != null} {#if playerCell.character != null}

225
src/routes/playground/cells/+page.server.ts
View File

@@ -1,137 +1,104 @@
import type { PageServerLoad } from './$types'; import type { PageServerLoad } from './$types';
import type PlayerCellDto from '$lib/DTOs/PlayerCellDto'; import type PlayerCellDto from '$lib/DTOs/PlayerCellDto';
import type { PlayerSet } from '$lib/DTOs/PlayerCellDto';
export const load: PageServerLoad = async ({ params }) => { export const load: PageServerLoad = async ({ params }) => {
const playerCells: Array<PlayerCellDto> = [ const characterClasses = [
{ name: 'Alice' }, "Warrior",
{ name: 'Bob', prefix: 'B', character: 'Knight' }, "Mage",
{ name: 'Charlie', prefix: 'C' }, "Archer",
{ name: 'Diana', character: 'Archer' }, "Rogue",
{ name: 'Ethan', prefix: 'E', character: 'Mage' }, "Paladin",
{ name: 'Fiona' }, { name: 'George', prefix: 'G' }, "Sorcerer",
{ name: 'Hannah', character: 'Warrior' }, "Druid",
{ name: 'Ian', prefix: 'I', character: 'Rogue' }, "Monk",
{ name: 'Jasmine' }, "Necromancer",
{ name: 'Kevin', prefix: 'K', character: 'Paladin' }, "Bard",
{ name: 'Laura', character: 'Cleric' }, "Knight",
{ name: 'Mike', prefix: 'M' }, "Assassin",
{ name: 'Nina', character: 'Druid' }, "Barbarian",
{ name: 'Oscar', prefix: 'O', character: 'Sorcerer' }, "Cleric",
{ name: 'Paula' }, "Wizard",
{ name: 'Quentin', prefix: 'Q' }, "Ranger",
{ name: 'Rachel', character: 'Bard' }, "Enchanter",
{ name: 'Sam', prefix: 'S', character: 'Monk' }, "Samurai",
{ name: 'Tina' }, "Alchemist",
{ name: 'Ulysses', prefix: 'U', character: 'Necromancer' }, "Summoner",
{ name: 'Vera', character: 'Ranger' }, "Beastmaster",
{ name: 'Walter', prefix: 'W' }, "Elementalist",
{ name: 'Xena', character: 'Assassin' }, "Dark Knight",
{ name: 'Yara', prefix: 'Y', character: 'Summoner' }, "Guardian",
{ name: 'Zack' }, "Illusionist",
{ name: 'Amber', prefix: 'Am', character: 'Beastmaster' }, "Pirate",
{ name: 'Blake', character: 'Elementalist' }, "Shadowblade",
{ name: 'Carmen', prefix: 'Cm', character: 'Guardian' }, "Berserker",
{ name: 'Derek' }, "Healer",
{ name: 'Elena', prefix: 'El', character: 'Invoker' }, "Sorceress",
{ name: 'Frank', character: 'Alchemist' }, "Tempest",
{ name: 'Grace', prefix: 'Gr' }, "Sage",
{ name: 'Henry', character: 'Tracker' }, "Priestess",
{ name: 'Isla', prefix: 'Is', character: 'Enchanter' }, "Gladiator",
{ name: 'Jack' }, "Mystic",
{ name: 'Kara', prefix: 'Kr', character: 'Berserker' }, "Elemental",
{ name: 'Liam', character: 'Shadowcaster' }, "Arcane",
{ name: 'Maya', prefix: 'My' }, "Swordsman",
{ name: 'Noah', character: 'Invoker' }, "Invoker",
{ name: 'Olivia', prefix: 'Ol', character: 'Mystic' }, "Warlock",
{ name: 'Peter' }, "Dancer",
{ name: 'Queenie', prefix: 'Qu', character: 'Spellblade' }, "Enforcer",
{ name: 'Ryan', character: 'Templar' }, "Runemaster",
{ name: 'Sophia', prefix: 'So' }, "Shaman",
{ name: 'Thomas', character: 'Warlord' }, "Spiritbinder",
{ name: 'Uma', prefix: 'Um', character: 'Shadowdancer' }, "Templar",
{ name: 'Victor' }, "Mystic",
{ name: 'Wendy', prefix: 'We', character: 'Elementalist' }, "Sorcerer",
{ name: 'Xander', character: 'Runemaster' }, "Valkyrie",
{ name: 'Yvonne', prefix: 'Yv' }, "Paladin",
{ name: 'Zoe', character: 'Chronomancer' }, "Warrior",
{ name: 'Aaron', prefix: 'Aa', character: 'Battle Mage' }, "Bard",
{ name: 'Bella' }, "Monk",
{ name: 'Caleb', prefix: 'Ca', character: 'Guardian' }, "Assassin",
{ name: 'Delilah', character: 'Invoker' }, "Cleric",
{ name: 'Eli', prefix: 'El', character: 'Sorcerer' }, "Ranger",
{ name: 'Faith' }, "Druid",
{ name: 'Gavin', prefix: 'Ga', character: 'Paladin' },
{ name: 'Hailey', character: 'Druid' },
{ name: 'Isaac', prefix: 'Is', character: 'Rogue' },
{ name: 'Julia' },
{ name: 'Kyle', prefix: 'Ky', character: 'Warrior' },
{ name: 'Lily', character: 'Bard' }
]; ];
const round1Matches: Array<{ const names = [
player1: PlayerCellDto; "Alice", "Bob", "Charlie", "Diana", "Ethan", "Fiona", "George", "Hannah",
player2: PlayerCellDto; "Ian", "Julia", "Kevin", "Laura", "Michael", "Nina", "Oscar", "Paula",
seed1: number; "Quentin", "Rachel", "Steven", "Tina", "Uma", "Victor", "Wendy", "Xander",
seed2: number; "Yvonne", "Zach", "Aaron", "Bella", "Caleb", "Daisy", "Eli", "Faith",
matchId: string; "Gavin", "Hazel", "Isaac", "Jasmine", "Kyle", "Lily", "Mason", "Nora",
}> = new Array(); "Owen", "Piper", "Quincy", "Riley", "Sean", "Tara", "Ulysses", "Valerie",
const round2Matches: Array<{ "Walter", "Xenia", "Yusuf", "Zara", "Adam", "Bianca", "Connor", "Delilah",
player1: PlayerCellDto; "Evan", "Faye", "Grant", "Hailey", "Ivan", "Jenna", "Kevin", "Lara"
player2: PlayerCellDto; ];
seed1: number;
seed2: number; const prefixes = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
matchId: string;
}> = new Array(); const generatePlayerCell = (index: number): PlayerCellDto => {
const round3Matches: Array<{ const prefix = prefixes[index % prefixes.length];
player1: PlayerCellDto; return {
player2: PlayerCellDto; name: names[index],
seed1: number; playerId: `p${String(index + 1).padStart(3, "0")}`,
seed2: number; prefix: prefix,
matchId: string; character: characterClasses[index % characterClasses.length],
}> = new Array(); seed: index + 1, // Ensures unique seed
const round4Matches: Array<{ };
player1: PlayerCellDto; };
player2: PlayerCellDto;
seed1: number; const round1: Array<PlayerSet> = new Array<PlayerSet>();
seed2: number; for (let i = 0; i < 32; i++) {
matchId: string; const player1 = generatePlayerCell(i * 2);
}> = new Array(); const set: PlayerSet = {
for (let i = 0; i < playerCells.length / 2; i++) { player1,
round1Matches.push({ player2: generatePlayerCell(i * 2 + 1),
player1: playerCells[i], winner: player1,
player2: playerCells[playerCells.length / 2 + i], matchId: `A${i + 1}`,
seed1: i + 1, }
seed2: playerCells.length - i, round1.push(set);
matchId: `A${i + 1}` }
});
} return { rounds: [round1,] };
for (let i = 0; i < playerCells.length / 4; i++) {
round2Matches.push({
player1: playerCells[i],
player2: playerCells[playerCells.length / 4 + i],
seed1: i + 1,
seed2: playerCells.length / 2 - i,
matchId: `A${i + 33}`
});
}
for (let i = 0; i < playerCells.length / 8; i++) {
round3Matches.push({
player1: playerCells[i],
player2: playerCells[playerCells.length / 8 + i],
seed1: i + 1,
seed2: playerCells.length / 4 - i,
matchId: `A${i + (round1Matches.length + round2Matches.length)}`
});
}
for (let i = 0; i < playerCells.length / 16; i++) {
round4Matches.push({
player1: playerCells[i],
player2: playerCells[playerCells.length / 16 + i],
seed1: i + 1,
seed2: playerCells.length / 8 - i,
matchId: `A${i + (round1Matches.length + round2Matches.length + round3Matches.length)}`
});
}
return { rounds: [round1Matches, round2Matches, round3Matches, round4Matches] };
}; };

8
src/routes/playground/cells/+page.svelte
View File

@@ -9,13 +9,7 @@
{#each data.rounds as round} {#each data.rounds as round}
<div class="min-w-36"> <div class="min-w-36">
{#each round as match} {#each round as match}
<HeadToHeadCell <HeadToHeadCell playerSet={match} />
player1={match.player1}
player2={match.player2}
player1Seed={match.seed1}
player2Seed={match.seed2}
setId={match.matchId}
/>
{/each} {/each}
</div> </div>
{/each} {/each}