WIP: Creating cells and brackets
This commit is contained in:
nmcnew
@@ -1,12 +1,15 @@
|
||||
export default interface PlayerCellDto {
|
||||
name: string,
|
||||
playerId: string,
|
||||
prefix?: string,
|
||||
character?: string,
|
||||
seed: number,
|
||||
}
|
||||
export interface Set {
|
||||
|
||||
export interface PlayerSet {
|
||||
player1: PlayerCellDto,
|
||||
player2: PlayerCellDto,
|
||||
winner?: PlayerCellDto,
|
||||
matchId: string,
|
||||
}
|
||||
export class Round {
|
||||
constructor(seededPlayers: Array<PlayerCellDto>) {
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,31 +1,35 @@
|
||||
<script lang="ts">
|
||||
import type PlayerCellDto from '$lib/DTOs/PlayerCellDto';
|
||||
import type PlayerSet from '$lib/DTOs/PlayerCellDto';
|
||||
import PlayerCell from './PlayerCell.svelte';
|
||||
|
||||
interface HeadToHeadCellProps {
|
||||
player1: PlayerCellDto;
|
||||
player2: PlayerCellDto;
|
||||
player1Seed: number;
|
||||
player2Seed: number;
|
||||
setId: string;
|
||||
playerSet: PlayerSet;
|
||||
}
|
||||
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>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<div class="text-sm self-center text-zinc-400">
|
||||
╭ Match {setId} ╮
|
||||
╭ Match {playerSet.matchId} ╮
|
||||
</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">
|
||||
<PlayerCell playerCell={player1} />
|
||||
<PlayerCell playerCell={playerSet.player1} />
|
||||
</div>
|
||||
<div class="text-zinc-400">{player1Seed}</div>
|
||||
<div class="text-zinc-400">{playerSet.player1.seed}</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">
|
||||
<PlayerCell playerCell={player2} />
|
||||
<PlayerCell playerCell={playerSet.player2} />
|
||||
</div>
|
||||
<div class="text-zinc-400">{player2Seed}</div>
|
||||
<div class="text-zinc-400">{playerSet.player2.seed}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,12 +2,13 @@
|
||||
import type PlayerCellDto from '$lib/DTOs/PlayerCellDto';
|
||||
interface PlayerCellProps {
|
||||
playerCell: PlayerCellDto;
|
||||
isWinner?: boolean;
|
||||
}
|
||||
let { playerCell }: PlayerCellProps = $props();
|
||||
let { playerCell, isWinner }: PlayerCellProps = $props();
|
||||
</script>
|
||||
|
||||
{#if playerCell.prefix != null}
|
||||
<span class="text-neutral-400"> {playerCell.prefix} | </span>
|
||||
<span class="text-inherit text-neutral-400"> {playerCell.prefix} | </span>
|
||||
{/if}
|
||||
{playerCell.name}
|
||||
{#if playerCell.character != null}
|
||||
|
||||
@@ -1,137 +1,104 @@
|
||||
import type { PageServerLoad } from './$types';
|
||||
import type PlayerCellDto from '$lib/DTOs/PlayerCellDto';
|
||||
import type { PlayerSet } from '$lib/DTOs/PlayerCellDto';
|
||||
|
||||
export const load: PageServerLoad = async ({ params }) => {
|
||||
const playerCells: Array<PlayerCellDto> = [
|
||||
{ name: 'Alice' },
|
||||
{ name: 'Bob', prefix: 'B', character: 'Knight' },
|
||||
{ name: 'Charlie', prefix: 'C' },
|
||||
{ name: 'Diana', character: 'Archer' },
|
||||
{ name: 'Ethan', prefix: 'E', character: 'Mage' },
|
||||
{ name: 'Fiona' }, { name: 'George', prefix: 'G' },
|
||||
{ name: 'Hannah', character: 'Warrior' },
|
||||
{ name: 'Ian', prefix: 'I', character: 'Rogue' },
|
||||
{ name: 'Jasmine' },
|
||||
{ name: 'Kevin', prefix: 'K', character: 'Paladin' },
|
||||
{ name: 'Laura', character: 'Cleric' },
|
||||
{ name: 'Mike', prefix: 'M' },
|
||||
{ name: 'Nina', character: 'Druid' },
|
||||
{ name: 'Oscar', prefix: 'O', character: 'Sorcerer' },
|
||||
{ name: 'Paula' },
|
||||
{ name: 'Quentin', prefix: 'Q' },
|
||||
{ name: 'Rachel', character: 'Bard' },
|
||||
{ name: 'Sam', prefix: 'S', character: 'Monk' },
|
||||
{ name: 'Tina' },
|
||||
{ name: 'Ulysses', prefix: 'U', character: 'Necromancer' },
|
||||
{ name: 'Vera', character: 'Ranger' },
|
||||
{ name: 'Walter', prefix: 'W' },
|
||||
{ name: 'Xena', character: 'Assassin' },
|
||||
{ name: 'Yara', prefix: 'Y', character: 'Summoner' },
|
||||
{ name: 'Zack' },
|
||||
{ name: 'Amber', prefix: 'Am', character: 'Beastmaster' },
|
||||
{ name: 'Blake', character: 'Elementalist' },
|
||||
{ name: 'Carmen', prefix: 'Cm', character: 'Guardian' },
|
||||
{ name: 'Derek' },
|
||||
{ name: 'Elena', prefix: 'El', character: 'Invoker' },
|
||||
{ name: 'Frank', character: 'Alchemist' },
|
||||
{ name: 'Grace', prefix: 'Gr' },
|
||||
{ name: 'Henry', character: 'Tracker' },
|
||||
{ name: 'Isla', prefix: 'Is', character: 'Enchanter' },
|
||||
{ name: 'Jack' },
|
||||
{ name: 'Kara', prefix: 'Kr', character: 'Berserker' },
|
||||
{ name: 'Liam', character: 'Shadowcaster' },
|
||||
{ name: 'Maya', prefix: 'My' },
|
||||
{ name: 'Noah', character: 'Invoker' },
|
||||
{ name: 'Olivia', prefix: 'Ol', character: 'Mystic' },
|
||||
{ name: 'Peter' },
|
||||
{ name: 'Queenie', prefix: 'Qu', character: 'Spellblade' },
|
||||
{ name: 'Ryan', character: 'Templar' },
|
||||
{ name: 'Sophia', prefix: 'So' },
|
||||
{ name: 'Thomas', character: 'Warlord' },
|
||||
{ name: 'Uma', prefix: 'Um', character: 'Shadowdancer' },
|
||||
{ name: 'Victor' },
|
||||
{ name: 'Wendy', prefix: 'We', character: 'Elementalist' },
|
||||
{ name: 'Xander', character: 'Runemaster' },
|
||||
{ name: 'Yvonne', prefix: 'Yv' },
|
||||
{ name: 'Zoe', character: 'Chronomancer' },
|
||||
{ name: 'Aaron', prefix: 'Aa', character: 'Battle Mage' },
|
||||
{ name: 'Bella' },
|
||||
{ name: 'Caleb', prefix: 'Ca', character: 'Guardian' },
|
||||
{ name: 'Delilah', character: 'Invoker' },
|
||||
{ name: 'Eli', prefix: 'El', character: 'Sorcerer' },
|
||||
{ name: 'Faith' },
|
||||
{ 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 characterClasses = [
|
||||
"Warrior",
|
||||
"Mage",
|
||||
"Archer",
|
||||
"Rogue",
|
||||
"Paladin",
|
||||
"Sorcerer",
|
||||
"Druid",
|
||||
"Monk",
|
||||
"Necromancer",
|
||||
"Bard",
|
||||
"Knight",
|
||||
"Assassin",
|
||||
"Barbarian",
|
||||
"Cleric",
|
||||
"Wizard",
|
||||
"Ranger",
|
||||
"Enchanter",
|
||||
"Samurai",
|
||||
"Alchemist",
|
||||
"Summoner",
|
||||
"Beastmaster",
|
||||
"Elementalist",
|
||||
"Dark Knight",
|
||||
"Guardian",
|
||||
"Illusionist",
|
||||
"Pirate",
|
||||
"Shadowblade",
|
||||
"Berserker",
|
||||
"Healer",
|
||||
"Sorceress",
|
||||
"Tempest",
|
||||
"Sage",
|
||||
"Priestess",
|
||||
"Gladiator",
|
||||
"Mystic",
|
||||
"Elemental",
|
||||
"Arcane",
|
||||
"Swordsman",
|
||||
"Invoker",
|
||||
"Warlock",
|
||||
"Dancer",
|
||||
"Enforcer",
|
||||
"Runemaster",
|
||||
"Shaman",
|
||||
"Spiritbinder",
|
||||
"Templar",
|
||||
"Mystic",
|
||||
"Sorcerer",
|
||||
"Valkyrie",
|
||||
"Paladin",
|
||||
"Warrior",
|
||||
"Bard",
|
||||
"Monk",
|
||||
"Assassin",
|
||||
"Cleric",
|
||||
"Ranger",
|
||||
"Druid",
|
||||
];
|
||||
|
||||
const round1Matches: Array<{
|
||||
player1: PlayerCellDto;
|
||||
player2: PlayerCellDto;
|
||||
seed1: number;
|
||||
seed2: number;
|
||||
matchId: string;
|
||||
}> = new Array();
|
||||
const round2Matches: Array<{
|
||||
player1: PlayerCellDto;
|
||||
player2: PlayerCellDto;
|
||||
seed1: number;
|
||||
seed2: number;
|
||||
matchId: string;
|
||||
}> = new Array();
|
||||
const round3Matches: Array<{
|
||||
player1: PlayerCellDto;
|
||||
player2: PlayerCellDto;
|
||||
seed1: number;
|
||||
seed2: number;
|
||||
matchId: string;
|
||||
}> = new Array();
|
||||
const round4Matches: Array<{
|
||||
player1: PlayerCellDto;
|
||||
player2: PlayerCellDto;
|
||||
seed1: number;
|
||||
seed2: number;
|
||||
matchId: string;
|
||||
}> = new Array();
|
||||
for (let i = 0; i < playerCells.length / 2; i++) {
|
||||
round1Matches.push({
|
||||
player1: playerCells[i],
|
||||
player2: playerCells[playerCells.length / 2 + i],
|
||||
seed1: i + 1,
|
||||
seed2: playerCells.length - i,
|
||||
matchId: `A${i + 1}`
|
||||
});
|
||||
}
|
||||
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] };
|
||||
const names = [
|
||||
"Alice", "Bob", "Charlie", "Diana", "Ethan", "Fiona", "George", "Hannah",
|
||||
"Ian", "Julia", "Kevin", "Laura", "Michael", "Nina", "Oscar", "Paula",
|
||||
"Quentin", "Rachel", "Steven", "Tina", "Uma", "Victor", "Wendy", "Xander",
|
||||
"Yvonne", "Zach", "Aaron", "Bella", "Caleb", "Daisy", "Eli", "Faith",
|
||||
"Gavin", "Hazel", "Isaac", "Jasmine", "Kyle", "Lily", "Mason", "Nora",
|
||||
"Owen", "Piper", "Quincy", "Riley", "Sean", "Tara", "Ulysses", "Valerie",
|
||||
"Walter", "Xenia", "Yusuf", "Zara", "Adam", "Bianca", "Connor", "Delilah",
|
||||
"Evan", "Faye", "Grant", "Hailey", "Ivan", "Jenna", "Kevin", "Lara"
|
||||
];
|
||||
|
||||
const prefixes = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
|
||||
const generatePlayerCell = (index: number): PlayerCellDto => {
|
||||
const prefix = prefixes[index % prefixes.length];
|
||||
return {
|
||||
name: names[index],
|
||||
playerId: `p${String(index + 1).padStart(3, "0")}`,
|
||||
prefix: prefix,
|
||||
character: characterClasses[index % characterClasses.length],
|
||||
seed: index + 1, // Ensures unique seed
|
||||
};
|
||||
};
|
||||
|
||||
const round1: Array<PlayerSet> = new Array<PlayerSet>();
|
||||
for (let i = 0; i < 32; i++) {
|
||||
const player1 = generatePlayerCell(i * 2);
|
||||
const set: PlayerSet = {
|
||||
player1,
|
||||
player2: generatePlayerCell(i * 2 + 1),
|
||||
winner: player1,
|
||||
matchId: `A${i + 1}`,
|
||||
}
|
||||
round1.push(set);
|
||||
}
|
||||
|
||||
return { rounds: [round1,] };
|
||||
};
|
||||
|
||||
|
||||
@@ -9,13 +9,7 @@
|
||||
{#each data.rounds as round}
|
||||
<div class="min-w-36">
|
||||
{#each round as match}
|
||||
<HeadToHeadCell
|
||||
player1={match.player1}
|
||||
player2={match.player2}
|
||||
player1Seed={match.seed1}
|
||||
player2Seed={match.seed2}
|
||||
setId={match.matchId}
|
||||
/>
|
||||
<HeadToHeadCell playerSet={match} />
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
Reference in New Issue
Block a user