diff options
Diffstat (limited to 'src')
34 files changed, 1184 insertions, 593 deletions
diff --git a/src/App.svelte b/src/App.svelte new file mode 100644 index 0000000..128685a --- /dev/null +++ b/src/App.svelte @@ -0,0 +1,62 @@ +<script> + import TimerControls from "./lib/components/TimerControls.svelte"; + import GamesSection from "./lib/components/GamesSection.svelte"; + import SkillFactorSelect from "./lib/components/SkillFactorSelect.svelte"; + import ProposeConfirmControls from "./lib/components/ProposeConfirmControls.svelte"; + import CourtList from "./lib/components/CourtList.svelte"; + import RegularList from "./lib/components/RegularList.svelte"; + import GuestList from "./lib/components/GuestList.svelte"; + import AdminPanel from "./lib/components/AdminPanel.svelte"; +</script> + +<header class="container"> + <nav> + <ul><li><img src="icon.svg" alt="Matchup" /></li></ul> + <ul> + <li><TimerControls /></li> + </ul> + </nav> +</header> +<main class="container"> + <section> + <GamesSection /> + </section> + <section> + <SkillFactorSelect /> + <ProposeConfirmControls /> + </section> + <section> + <hgroup> + <h2>Courts</h2> + <p>Reserve courts for training or competition.</p> + </hgroup> + <CourtList /> + </section> + <section> + <hgroup> + <h2>Regulars</h2> + <p>Check in and check out club members.</p> + </hgroup> + <RegularList /> + </section> + <section> + <hgroup> + <h2>Guests</h2> + <p>Add guests to the pool.</p> + </hgroup> + <GuestList /> + </section> + <section> + <hgroup> + <h2>Admin</h2> + <p>Changes here are permanent and cannot be reverted.</p> + </hgroup> + <AdminPanel /> + </section> +</main> +<footer class="container" style="text-align: center;"> + <strong>Matchup</strong> made with ❤️ by <a href="https://karanj.com">Karan</a>. The + source code is licensed + <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">AGPL 3.0</a>. Logo + from <a href="https://www.svgrepo.com">SVG Repo</a>. +</footer> diff --git a/src/data.js b/src/data.js deleted file mode 100644 index 0b0c9ab..0000000 --- a/src/data.js +++ /dev/null @@ -1,111 +0,0 @@ -class Switch { - constructor(id, description, status) { - this.id = id; - this.status = typeof status !== "undefined" ? status : false; - this.description = description; - this.name = this.description + " " + (id + 1); - } - toggle() { - this.status = !this.status; - this.print(); - } - print() { - let status = this.status ? "active" : "inactive"; - console.log(this.name + " is currently " + status); - } - render() { - let color = this.status ? `` : `class="outline secondary"`; - let id = this.description + "_" + this.id; - return `<button id=${id} ${color}>${this.name}</button>`; - } -} - -export class Court extends Switch { - constructor(id, status) { - super(id, "Court", status); - } -} - -export class Regular extends Switch { - constructor(id, status, level, games, firstName, lastName) { - super(id, "Regular", status); - this.level = typeof level !== "undefined" ? level : 1; - this.games = typeof games !== "undefined" ? games : 0; - this.firstName = - typeof firstName !== "undefined" ? firstName : this.description; - this.lastName = typeof lastName !== "undefined" ? lastName : this.id + 1; - this.name = this.firstName + " " + this.lastName; - } -} - -const guestCategories = { - 0: { description: "Beginner", level: 1 }, - 1: { description: "Novice", level: 3 }, - 2: { description: "Intermediate", level: 6 }, -}; - -export class Guest extends Switch { - maxCount = 6; - categoryCount = 3; - - constructor(id, status, games) { - super(id, "Guest", status); - const categoryId = Math.floor(id / this.maxCount) || 0; - this.level = guestCategories[categoryId].level; - this.games = typeof games !== "undefined" ? games : 0; - const guestNumber = (id % this.maxCount) + 1; - this.firstName = guestCategories[categoryId].description; - this.lastName = guestNumber; - this.name = this.firstName + " " + this.lastName; - } -} - -function renderPlayerName(player) { - return `<strong>${player.firstName}</strong> ${player.lastName}`; -} - -export class Team { - constructor(playerOne, playerTwo) { - this.playerOne = playerOne; - this.playerTwo = playerTwo; - } - print() { - console.log("Team consists of:"); - this.playerOne.print(); - this.playerTwo.print(); - } - render() { - const p1 = renderPlayerName(this.playerOne); - const p2 = renderPlayerName(this.playerTwo); - return p1 + `<br/><br/>` + p2; - } -} - -export class Game extends Switch { - constructor(id, status, teamOne, teamTwo) { - super(id, "Game", status); - this.teamOne = teamOne; - this.teamTwo = teamTwo; - } - print() { - const teamOne = - this.teamOne.playerOne.firstName + - " and " + - this.teamOne.playerTwo.firstName; - const teamTwo = - this.teamTwo.playerOne.firstName + - " and " + - this.teamTwo.playerTwo.firstName; - console.log( - "Game " + this.id + ": " + teamOne + " is playing against " + teamTwo - ); - } - render() { - const blockedState = this.teamOne.playerOne.firstName === "RESERVED"; - const playerState = this.teamOne.render() + "<hr>" + this.teamTwo.render(); - const type = blockedState ? `<h5>Reserved</p>` : playerState; - return `<article> - <header>Court ${this.id + 1}</header>${type} - </article>`; - } -} diff --git a/src/lib/components/AdminPanel.svelte b/src/lib/components/AdminPanel.svelte new file mode 100644 index 0000000..2442386 --- /dev/null +++ b/src/lib/components/AdminPanel.svelte @@ -0,0 +1,33 @@ +<script> + import { resetSession } from "../stores/games.svelte.js"; + import { loadRegularsFromCsv } from "../stores/regulars.svelte.js"; + + let fileInput; + + function triggerUpload() { + fileInput.click(); + } + + function handleFileChange(event) { + const file = event.target.files[0]; + if (!file) return; + const reader = new FileReader(); + reader.onload = () => { + loadRegularsFromCsv(reader.result); + }; + reader.readAsText(file); + } +</script> + +<div class="grid"> + <button onclick={resetSession}>Reset Session</button> + <button onclick={triggerUpload}>Upload Database</button> +</div> +<input + type="file" + accept=".csv" + placeholder="Player database" + hidden + bind:this={fileInput} + onchange={handleFileChange} +/> diff --git a/src/lib/components/CourtList.svelte b/src/lib/components/CourtList.svelte new file mode 100644 index 0000000..b307980 --- /dev/null +++ b/src/lib/components/CourtList.svelte @@ -0,0 +1,14 @@ +<script> + import ToggleButton from "./ToggleButton.svelte"; + import { getCourts, toggleCourt } from "../stores/courts.svelte.js"; +</script> + +<div id="Court-list" class="grid-container"> + {#each getCourts() as court (court.id)} + <ToggleButton + label={court.name} + active={court.status} + onclick={() => toggleCourt(court.id)} + /> + {/each} +</div> diff --git a/src/lib/components/GameCard.svelte b/src/lib/components/GameCard.svelte new file mode 100644 index 0000000..7bdacb6 --- /dev/null +++ b/src/lib/components/GameCard.svelte @@ -0,0 +1,17 @@ +<script> + import TeamDisplay from "./TeamDisplay.svelte"; + + let { game } = $props(); + const reserved = $derived(game.teamOne.playerOne.firstName === "RESERVED"); +</script> + +<article> + <header>Court {game.id + 1}</header> + {#if reserved} + <h5>Reserved</h5> + {:else} + <TeamDisplay team={game.teamOne} /> + <hr /> + <TeamDisplay team={game.teamTwo} /> + {/if} +</article> diff --git a/src/lib/components/GameCard.test.js b/src/lib/components/GameCard.test.js new file mode 100644 index 0000000..076a409 --- /dev/null +++ b/src/lib/components/GameCard.test.js @@ -0,0 +1,32 @@ +// @vitest-environment jsdom +import { describe, it, expect } from "vitest"; +import { render, screen } from "@testing-library/svelte"; +import GameCard from "./GameCard.svelte"; +import { createCourt, createRegular } from "../logic/players.js"; +import { + addBlockedGames, + addActiveGames, +} from "../logic/matchmaking.js"; + +describe("GameCard", () => { + it("renders 'Reserved' for a RESERVED placeholder game", () => { + const [game] = addBlockedGames([createCourt(2, false)]); + render(GameCard, { game }); + expect(screen.getByText("Reserved")).toBeInTheDocument(); + expect(screen.getByText("Court 3")).toBeInTheDocument(); + }); + + it("renders both teams' player names for a real match", () => { + const players = [ + createRegular(0, true, 1, 0, "Alice", "A"), + createRegular(1, true, 1, 0, "Bob", "B"), + createRegular(2, true, 1, 0, "Carl", "C"), + createRegular(3, true, 1, 0, "Dana", "D"), + ]; + const [game] = addActiveGames([createCourt(0, true)], players); + render(GameCard, { game }); + expect(screen.queryByText("Reserved")).not.toBeInTheDocument(); + expect(screen.getByText("Alice")).toBeInTheDocument(); + expect(screen.getByText("Dana")).toBeInTheDocument(); + }); +}); diff --git a/src/lib/components/GamesSection.svelte b/src/lib/components/GamesSection.svelte new file mode 100644 index 0000000..a2f4f55 --- /dev/null +++ b/src/lib/components/GamesSection.svelte @@ -0,0 +1,11 @@ +<script> + import GameCard from "./GameCard.svelte"; + import { getGames, getGameDescription } from "../stores/games.svelte.js"; +</script> + +<h1 class="title" id="Game-description">{getGameDescription()}</h1> +<div id="Game-list" class="grid-container"> + {#each getGames() as game (game.id)} + <GameCard {game} /> + {/each} +</div> diff --git a/src/lib/components/GuestList.svelte b/src/lib/components/GuestList.svelte new file mode 100644 index 0000000..2b597eb --- /dev/null +++ b/src/lib/components/GuestList.svelte @@ -0,0 +1,14 @@ +<script> + import ToggleButton from "./ToggleButton.svelte"; + import { getGuests, toggleGuest } from "../stores/guests.svelte.js"; +</script> + +<div id="Guest-list" class="grid-container"> + {#each getGuests() as guest (guest.id)} + <ToggleButton + label={guest.name} + active={guest.status} + onclick={() => toggleGuest(guest.id)} + /> + {/each} +</div> diff --git a/src/lib/components/ProposeConfirmControls.svelte b/src/lib/components/ProposeConfirmControls.svelte new file mode 100644 index 0000000..692ad56 --- /dev/null +++ b/src/lib/components/ProposeConfirmControls.svelte @@ -0,0 +1,8 @@ +<script> + import { propose, confirm } from "../stores/games.svelte.js"; +</script> + +<div class="grid"> + <button onclick={propose}>Propose</button> + <button onclick={confirm}>Confirm</button> +</div> diff --git a/src/lib/components/RegularList.svelte b/src/lib/components/RegularList.svelte new file mode 100644 index 0000000..dd8fb7a --- /dev/null +++ b/src/lib/components/RegularList.svelte @@ -0,0 +1,14 @@ +<script> + import ToggleButton from "./ToggleButton.svelte"; + import { getRegulars, toggleRegular } from "../stores/regulars.svelte.js"; +</script> + +<div id="Regular-list" class="grid-container"> + {#each getRegulars() as regular (regular.id)} + <ToggleButton + label={regular.name} + active={regular.status} + onclick={() => toggleRegular(regular.id)} + /> + {/each} +</div> diff --git a/src/lib/components/SkillFactorSelect.svelte b/src/lib/components/SkillFactorSelect.svelte new file mode 100644 index 0000000..bc882a7 --- /dev/null +++ b/src/lib/components/SkillFactorSelect.svelte @@ -0,0 +1,13 @@ +<script> + import { getSkillFactor, setSkillFactor } from "../stores/skillFactor.svelte.js"; +</script> + +<select + aria-label="State" + bind:value={() => String(getSkillFactor()), setSkillFactor} +> + <option value="10">All Levels</option> + <option value="5">2 Levels</option> + <option value="3">3 Levels</option> + <option value="1">Skill Based</option> +</select> diff --git a/src/lib/components/TeamDisplay.svelte b/src/lib/components/TeamDisplay.svelte new file mode 100644 index 0000000..e175446 --- /dev/null +++ b/src/lib/components/TeamDisplay.svelte @@ -0,0 +1,7 @@ +<script> + let { team } = $props(); +</script> + +<strong>{team.playerOne.firstName}</strong> {team.playerOne.lastName} +<br /><br /> +<strong>{team.playerTwo.firstName}</strong> {team.playerTwo.lastName} diff --git a/src/lib/components/TimerControls.svelte b/src/lib/components/TimerControls.svelte new file mode 100644 index 0000000..5983514 --- /dev/null +++ b/src/lib/components/TimerControls.svelte @@ -0,0 +1,39 @@ +<script> + import { + getDisplay, + getRunning, + start, + stopTimer, + changeMinutes, + } from "../stores/timer.svelte.js"; +</script> + +<fieldset id="timer"> + <button + title="Timer decrement" + disabled={getRunning()} + onclick={() => changeMinutes(-0.5)} + > + <i class="fa-solid fa-minus"></i> + </button> + <input + id="timer-display" + title="Time display" + type="text" + readonly + value={getDisplay()} + /> + <button + title="Timer increment" + disabled={getRunning()} + onclick={() => changeMinutes(0.5)} + > + <i class="fa-solid fa-plus"></i> + </button> + <button title="Timer start" onclick={() => start(true)}> + <i class="fa-solid fa-play"></i> + </button> + <button title="Timer stop" onclick={() => stopTimer()}> + <i class="fa-solid fa-stop"></i> + </button> +</fieldset> diff --git a/src/lib/components/TimerControls.test.js b/src/lib/components/TimerControls.test.js new file mode 100644 index 0000000..3176c17 --- /dev/null +++ b/src/lib/components/TimerControls.test.js @@ -0,0 +1,35 @@ +// @vitest-environment jsdom +import { describe, it, expect, afterEach } from "vitest"; +import { render, screen, fireEvent } from "@testing-library/svelte"; +import TimerControls from "./TimerControls.svelte"; +import { stopTimer } from "../stores/timer.svelte.js"; + +describe("TimerControls", () => { + afterEach(() => { + stopTimer(); + }); + + it("shows the resting display for the default minutes", () => { + render(TimerControls); + expect(screen.getByTitle("Time display")).toHaveValue("12:00"); + }); + + it("disables inc/dec while running, and re-enables on stop", async () => { + render(TimerControls); + const startBtn = screen.getByTitle("Timer start"); + const stopBtn = screen.getByTitle("Timer stop"); + const incBtn = screen.getByTitle("Timer increment"); + const decBtn = screen.getByTitle("Timer decrement"); + + expect(incBtn).not.toBeDisabled(); + expect(decBtn).not.toBeDisabled(); + + await fireEvent.click(startBtn); + expect(incBtn).toBeDisabled(); + expect(decBtn).toBeDisabled(); + + await fireEvent.click(stopBtn); + expect(incBtn).not.toBeDisabled(); + expect(decBtn).not.toBeDisabled(); + }); +}); diff --git a/src/lib/components/ToggleButton.svelte b/src/lib/components/ToggleButton.svelte new file mode 100644 index 0000000..138aa15 --- /dev/null +++ b/src/lib/components/ToggleButton.svelte @@ -0,0 +1,7 @@ +<script> + let { label, active, onclick } = $props(); +</script> + +<button class:outline={!active} class:secondary={!active} {onclick}> + {label} +</button> diff --git a/src/lib/components/ToggleButton.test.js b/src/lib/components/ToggleButton.test.js new file mode 100644 index 0000000..cfbb90d --- /dev/null +++ b/src/lib/components/ToggleButton.test.js @@ -0,0 +1,31 @@ +// @vitest-environment jsdom +import { describe, it, expect, vi } from "vitest"; +import { render, screen, fireEvent } from "@testing-library/svelte"; +import ToggleButton from "./ToggleButton.svelte"; + +describe("ToggleButton", () => { + it("renders the label", () => { + render(ToggleButton, { label: "Court 1", active: true, onclick: () => {} }); + expect(screen.getByText("Court 1")).toBeInTheDocument(); + }); + + it("shows the outline/secondary styling when inactive", () => { + render(ToggleButton, { label: "Court 1", active: false, onclick: () => {} }); + const button = screen.getByRole("button"); + expect(button).toHaveClass("outline", "secondary"); + }); + + it("has no outline/secondary styling when active", () => { + render(ToggleButton, { label: "Court 1", active: true, onclick: () => {} }); + const button = screen.getByRole("button"); + expect(button).not.toHaveClass("outline"); + expect(button).not.toHaveClass("secondary"); + }); + + it("calls onclick when clicked", async () => { + const onclick = vi.fn(); + render(ToggleButton, { label: "Court 1", active: true, onclick }); + await fireEvent.click(screen.getByRole("button")); + expect(onclick).toHaveBeenCalledOnce(); + }); +}); diff --git a/src/lib/logic/csv.js b/src/lib/logic/csv.js new file mode 100644 index 0000000..9e085eb --- /dev/null +++ b/src/lib/logic/csv.js @@ -0,0 +1,23 @@ +import { createRegular } from "./players.js"; +import { randomStatus } from "./random.js"; + +export function parseLineToPlayer(line) { + const info = line.split(","); + const id = Number(info[0].trim()); + const firstName = info[1].trim(); + const lastName = info[2].trim(); + const level = Number(info[3].trim()); + return createRegular(id, randomStatus(), level, 0, firstName, lastName); +} + +export function parseCsv(data) { + const lines = data.split("\n"); + const players = []; + for (let i = 1; i < lines.length; i++) { + if (lines[i] === undefined || lines[i].trim() === "") { + continue; + } + players.push(parseLineToPlayer(lines[i])); + } + return players; +} diff --git a/src/lib/logic/csv.test.js b/src/lib/logic/csv.test.js new file mode 100644 index 0000000..0381c06 --- /dev/null +++ b/src/lib/logic/csv.test.js @@ -0,0 +1,27 @@ +import { describe, it, expect } from "vitest"; +import { parseLineToPlayer, parseCsv } from "./csv.js"; + +describe("parseLineToPlayer", () => { + it("parses id, name, and level columns", () => { + const player = parseLineToPlayer("3, Jane, Doe, 7"); + expect(player.id).toBe(3); + expect(player.firstName).toBe("Jane"); + expect(player.lastName).toBe("Doe"); + expect(player.level).toBe(7); + expect(player.games).toBe(0); + }); +}); + +describe("parseCsv", () => { + it("skips the header row and blank lines", () => { + const csv = "id,firstName,lastName,level\n0, Jane, Doe, 7\n\n1, John, Smith, 3\n"; + const players = parseCsv(csv); + expect(players).toHaveLength(2); + expect(players[0].firstName).toBe("Jane"); + expect(players[1].firstName).toBe("John"); + }); + + it("returns an empty array when there's only a header", () => { + expect(parseCsv("id,firstName,lastName,level")).toEqual([]); + }); +}); diff --git a/src/lib/logic/matchmaking.js b/src/lib/logic/matchmaking.js new file mode 100644 index 0000000..eb8be2e --- /dev/null +++ b/src/lib/logic/matchmaking.js @@ -0,0 +1,113 @@ +import { createRegular, createTeam, createGame } from "./players.js"; +import { normalize } from "./normalize.js"; + +export function shuffle(array) { + const copy = [...array]; + for (let i = copy.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [copy[i], copy[j]] = [copy[j], copy[i]]; + } + return copy; +} + +export function createPlaceholderGame(id, description = "---", status = true) { + const player = createRegular(null, null, null, null, description, ""); + const team = createTeam(player, player); + return createGame(id, status, team, team); +} + +export function isPlaceholderGame(game) { + return ["RESERVED", "---"].includes(game.teamOne.playerOne.firstName); +} + +export function createDefaultGames(count) { + const games = []; + for (let i = 0; i < count; i++) { + games.push(createPlaceholderGame(i, "---", true)); + } + return games; +} + +export function addBlockedGames(inactiveCourts) { + return inactiveCourts.map((court) => + createPlaceholderGame(court.id, "RESERVED", false) + ); +} + +export function addInactiveGames(unusedCourts) { + return unusedCourts.map((court) => + createPlaceholderGame(court.id, "---", false) + ); +} + +export function getPossibleGameCount(activePlayerCount, activeCourtCount) { + return Math.min(Math.floor(activePlayerCount / 4), activeCourtCount); +} + +export function selectPlayers(regulars, guests, count) { + const combined = shuffle([...regulars, ...guests]); + combined.sort((a, b) => a.games - b.games); + const selected = combined.slice(0, count); + selected.sort((a, b) => a.level - b.level); + return selected; +} + +export function pairPlayersIntoTeams(players) { + const teamOne = createTeam(players[0], players[3]); + const teamTwo = createTeam(players[1], players[2]); + return [teamOne, teamTwo]; +} + +export function addActiveGames(usedCourts, selectedPlayers) { + const games = []; + for (let index = 0; index < usedCourts.length; index++) { + const startIndex = 4 * index; + const courtPlayers = selectedPlayers.slice(startIndex, startIndex + 4); + const [teamOne, teamTwo] = pairPlayersIntoTeams(courtPlayers); + games.push(createGame(usedCourts[index].id, false, teamOne, teamTwo)); + } + return games; +} + +export function proposeGames({ courts, regulars, guests, skillFactor }) { + const activeCourts = courts.filter((c) => c.status); + const inactiveCourts = courts.filter((c) => !c.status); + const activeRegulars = regulars.filter((r) => r.status); + const activeGuests = normalize( + guests.filter((g) => g.status), + skillFactor + ); + + const blockedGames = addBlockedGames(inactiveCourts); + const possibleMatches = getPossibleGameCount( + activeRegulars.length + activeGuests.length, + activeCourts.length + ); + const usedCourts = activeCourts.slice(0, possibleMatches); + const unusedCourts = activeCourts.slice(possibleMatches); + const inactiveGames = addInactiveGames(unusedCourts); + const selectedPlayers = selectPlayers( + activeRegulars, + activeGuests, + possibleMatches * 4 + ); + const activeGames = addActiveGames(usedCourts, selectedPlayers); + + return [...blockedGames, ...inactiveGames, ...activeGames].sort( + (a, b) => a.id - b.id + ); +} + +export function collectConfirmedPlayerNames(games) { + const names = []; + for (const game of games) { + if (isPlaceholderGame(game)) continue; + names.push( + game.teamOne.playerOne.name, + game.teamOne.playerTwo.name, + game.teamTwo.playerOne.name, + game.teamTwo.playerTwo.name + ); + } + return names; +} diff --git a/src/lib/logic/matchmaking.test.js b/src/lib/logic/matchmaking.test.js new file mode 100644 index 0000000..0401c1c --- /dev/null +++ b/src/lib/logic/matchmaking.test.js @@ -0,0 +1,188 @@ +import { describe, it, expect } from "vitest"; +import { createCourt, createRegular, createGuest } from "./players.js"; +import { + shuffle, + getPossibleGameCount, + selectPlayers, + pairPlayersIntoTeams, + addBlockedGames, + addInactiveGames, + addActiveGames, + proposeGames, + collectConfirmedPlayerNames, + isPlaceholderGame, +} from "./matchmaking.js"; + +describe("shuffle", () => { + it("returns an array with the same elements, without mutating the input", () => { + const original = [1, 2, 3, 4, 5]; + const copy = [...original]; + const result = shuffle(original); + expect(original).toEqual(copy); + expect(result.slice().sort()).toEqual(original.slice().sort()); + }); +}); + +describe("getPossibleGameCount", () => { + it("is limited by available courts", () => { + expect(getPossibleGameCount(40, 2)).toBe(2); + }); + it("is limited by available players (4 per game)", () => { + expect(getPossibleGameCount(5, 10)).toBe(1); + }); + it("is zero when there are no active courts", () => { + expect(getPossibleGameCount(40, 0)).toBe(0); + }); + it("is zero when there are fewer than 4 active players", () => { + expect(getPossibleGameCount(3, 10)).toBe(0); + }); +}); + +describe("selectPlayers", () => { + it("prefers players with fewer games played", () => { + const regulars = [ + createRegular(0, true, 5, 10, "Most", "Games"), + createRegular(1, true, 5, 0, "Fewest", "Games"), + ]; + const selected = selectPlayers(regulars, [], 1); + expect(selected).toHaveLength(1); + expect(selected[0].name).toBe("Fewest Games"); + }); + + it("sorts the final selection by level ascending", () => { + const regulars = [ + createRegular(0, true, 8, 0, "High", "Level"), + createRegular(1, true, 2, 0, "Low", "Level"), + createRegular(2, true, 5, 0, "Mid", "Level"), + ]; + const selected = selectPlayers(regulars, [], 3); + expect(selected.map((p) => p.level)).toEqual([2, 5, 8]); + }); +}); + +describe("pairPlayersIntoTeams", () => { + it("cross-pairs players by rank (0&3 vs 1&2)", () => { + const players = [{ name: "A" }, { name: "B" }, { name: "C" }, { name: "D" }]; + const [teamOne, teamTwo] = pairPlayersIntoTeams(players); + expect(teamOne.playerOne.name).toBe("A"); + expect(teamOne.playerTwo.name).toBe("D"); + expect(teamTwo.playerOne.name).toBe("B"); + expect(teamTwo.playerTwo.name).toBe("C"); + }); +}); + +describe("addBlockedGames / addInactiveGames", () => { + it("marks games for inactive courts as RESERVED and inactive", () => { + const courts = [createCourt(3, false)]; + const [game] = addBlockedGames(courts); + expect(game.id).toBe(3); + expect(game.status).toBe(false); + expect(isPlaceholderGame(game)).toBe(true); + expect(game.teamOne.playerOne.firstName).toBe("RESERVED"); + }); + + it("marks games for unused active courts as placeholders", () => { + const courts = [createCourt(1, true)]; + const [game] = addInactiveGames(courts); + expect(game.teamOne.playerOne.firstName).toBe("---"); + }); +}); + +describe("addActiveGames", () => { + it("creates one game per used court from the selected players", () => { + const usedCourts = [createCourt(0, true), createCourt(1, true)]; + const players = Array.from({ length: 8 }, (_, i) => + createRegular(i, true, 1, 0, `P${i}`, "") + ); + const games = addActiveGames(usedCourts, players); + expect(games).toHaveLength(2); + expect(games[0].id).toBe(0); + expect(games[1].id).toBe(1); + expect(games[0].teamOne.playerOne.name).toBe("P0 "); + }); +}); + +describe("proposeGames", () => { + it("never assigns more games than active courts", () => { + const courts = [createCourt(0, true), createCourt(1, true)]; + const regulars = Array.from({ length: 20 }, (_, i) => + createRegular(i, true, 1, 0, `R${i}`, "") + ); + const games = proposeGames({ + courts, + regulars, + guests: [], + skillFactor: 10, + }); + expect(games).toHaveLength(2); + }); + + it("does not skip the court right after the used ones (no off-by-one gap)", () => { + const courts = [ + createCourt(0, true), + createCourt(1, true), + createCourt(2, true), + ]; + // Only enough players for exactly 1 active game, so courts 1 and 2 + // should both come back as unused-but-active placeholder games. + const regulars = Array.from({ length: 4 }, (_, i) => + createRegular(i, true, 1, 0, `R${i}`, "") + ); + const games = proposeGames({ + courts, + regulars, + guests: [], + skillFactor: 10, + }); + expect(games.map((g) => g.id)).toEqual([0, 1, 2]); + expect(games[1].teamOne.playerOne.firstName).toBe("---"); + expect(games[2].teamOne.playerOne.firstName).toBe("---"); + }); + + it("gives reserved (inactive) courts a RESERVED placeholder", () => { + const courts = [createCourt(0, false)]; + const games = proposeGames({ + courts, + regulars: [], + guests: [], + skillFactor: 10, + }); + expect(games).toHaveLength(1); + expect(games[0].teamOne.playerOne.firstName).toBe("RESERVED"); + }); + + it("applies the skill factor to guests before pairing", () => { + const courts = [createCourt(0, true)]; + const guests = [ + createGuest(0, true, 0), // Beginner, level 1 + createGuest(6, true, 0), // Novice, level 3 + createGuest(12, true, 0), // Intermediate, level 6 + createGuest(1, true, 0), // Beginner, level 1 + ]; + const games = proposeGames({ + courts, + regulars: [], + guests, + skillFactor: 1, + }); + expect(games).toHaveLength(1); + expect(games[0].status).toBe(false); + }); +}); + +describe("collectConfirmedPlayerNames", () => { + it("excludes placeholder (RESERVED/---) games from the name list", () => { + const usedCourts = [createCourt(0, true)]; + const players = [ + createRegular(0, true, 1, 0, "A", ""), + createRegular(1, true, 1, 0, "B", ""), + createRegular(2, true, 1, 0, "C", ""), + createRegular(3, true, 1, 0, "D", ""), + ]; + const realGame = addActiveGames(usedCourts, players)[0]; + const [reservedGame] = addBlockedGames([createCourt(1, false)]); + + const names = collectConfirmedPlayerNames([realGame, reservedGame]); + expect(names).toEqual(["A ", "D ", "B ", "C "]); + }); +}); diff --git a/src/lib/logic/normalize.js b/src/lib/logic/normalize.js new file mode 100644 index 0000000..cfed0c3 --- /dev/null +++ b/src/lib/logic/normalize.js @@ -0,0 +1,6 @@ +export function normalize(data, factor) { + return data.map((player) => ({ + ...player, + level: Math.ceil(player.level / factor), + })); +} diff --git a/src/lib/logic/normalize.test.js b/src/lib/logic/normalize.test.js new file mode 100644 index 0000000..418e427 --- /dev/null +++ b/src/lib/logic/normalize.test.js @@ -0,0 +1,28 @@ +import { describe, it, expect } from "vitest"; +import { normalize } from "./normalize.js"; + +describe("normalize", () => { + it("collapses all levels into one bucket when factor equals the max level (\"All Levels\")", () => { + const players = [{ level: 1 }, { level: 5 }, { level: 10 }]; + const result = normalize(players, 10); + expect(result.map((p) => p.level)).toEqual([1, 1, 1]); + }); + + it("leaves levels untouched when factor is 1 (\"Skill Based\")", () => { + const players = [{ level: 1 }, { level: 5 }, { level: 10 }]; + const result = normalize(players, 1); + expect(result.map((p) => p.level)).toEqual([1, 5, 10]); + }); + + it("splits levels into two buckets when factor is 5 (\"2 Levels\")", () => { + const players = [{ level: 1 }, { level: 5 }, { level: 6 }, { level: 10 }]; + const result = normalize(players, 5); + expect(result.map((p) => p.level)).toEqual([1, 1, 2, 2]); + }); + + it("does not mutate the input array", () => { + const players = [{ level: 4 }]; + normalize(players, 2); + expect(players[0].level).toBe(4); + }); +}); diff --git a/src/lib/logic/players.js b/src/lib/logic/players.js new file mode 100644 index 0000000..e11c32f --- /dev/null +++ b/src/lib/logic/players.js @@ -0,0 +1,73 @@ +export function createCourt(id, status = false) { + return { + id, + status, + description: "Court", + name: `Court ${id + 1}`, + }; +} + +export const guestCategories = { + 0: { description: "Beginner", level: 1 }, + 1: { description: "Novice", level: 3 }, + 2: { description: "Intermediate", level: 6 }, +}; + +export const GUESTS_PER_CATEGORY = 6; + +export function createRegular( + id, + status = false, + level = 1, + games = 0, + firstName = "Regular", + lastName = id + 1 +) { + return { + id, + status, + description: "Regular", + level, + games, + firstName, + lastName, + name: `${firstName} ${lastName}`, + }; +} + +export function createGuest(id, status = false, games = 0) { + const categoryId = Math.floor(id / GUESTS_PER_CATEGORY) || 0; + const category = guestCategories[categoryId]; + const guestNumber = (id % GUESTS_PER_CATEGORY) + 1; + const firstName = category.description; + const lastName = guestNumber; + return { + id, + status, + description: "Guest", + level: category.level, + games, + firstName, + lastName, + name: `${firstName} ${lastName}`, + }; +} + +export function createTeam(playerOne, playerTwo) { + return { playerOne, playerTwo }; +} + +export function createGame(id, status, teamOne, teamTwo) { + return { + id, + status, + description: "Game", + teamOne, + teamTwo, + name: `Game ${id + 1}`, + }; +} + +export function isReserved(game) { + return game.teamOne.playerOne.firstName === "RESERVED"; +} diff --git a/src/lib/logic/random.js b/src/lib/logic/random.js new file mode 100644 index 0000000..a696860 --- /dev/null +++ b/src/lib/logic/random.js @@ -0,0 +1,8 @@ +export function randomStatus() { + return Math.random() < 0.5; +} + +export function randomLevel() { + const maxLevel = 10; + return Math.floor(Math.random() * maxLevel + 1); +} diff --git a/src/lib/stores/courts.svelte.js b/src/lib/stores/courts.svelte.js new file mode 100644 index 0000000..768bb35 --- /dev/null +++ b/src/lib/stores/courts.svelte.js @@ -0,0 +1,39 @@ +import { createCourt } from "../logic/players.js"; +import { randomStatus } from "../logic/random.js"; + +const STORAGE_KEY = "Court"; +const COURT_COUNT = 12; + +function loadInitialCourts() { + const stored = JSON.parse(localStorage.getItem(STORAGE_KEY)); + if (stored && stored.length > 0) { + return stored.map((c) => createCourt(Number(c.id), Boolean(Number(c.status)))); + } + return Array.from({ length: COURT_COUNT }, (_, i) => createCourt(i, randomStatus())); +} + +let courts = $state(loadInitialCourts()); + +function persist() { + localStorage.setItem(STORAGE_KEY, JSON.stringify(courts)); +} +if (!localStorage.getItem(STORAGE_KEY)) persist(); + +export function getCourts() { + return courts; +} + +export function activeCourts() { + return courts.filter((c) => c.status); +} + +export function inactiveCourts() { + return courts.filter((c) => !c.status); +} + +export function toggleCourt(id) { + const court = courts.find((c) => c.id === id); + if (!court) return; + court.status = !court.status; + persist(); +} diff --git a/src/lib/stores/games.svelte.js b/src/lib/stores/games.svelte.js new file mode 100644 index 0000000..ae76ce3 --- /dev/null +++ b/src/lib/stores/games.svelte.js @@ -0,0 +1,91 @@ +import { createGame, createTeam } from "../logic/players.js"; +import { + proposeGames, + createDefaultGames, + collectConfirmedPlayerNames, +} from "../logic/matchmaking.js"; +import { + getCourts, +} from "./courts.svelte.js"; +import { + getRegulars, + incrementRegularGames, + resetRegulars, +} from "./regulars.svelte.js"; +import { getGuests, incrementGuestGames } from "./guests.svelte.js"; +import { getSkillFactor } from "./skillFactor.svelte.js"; +import { start as startTimer, stopTimer } from "./timer.svelte.js"; + +const GAMES_STORAGE_KEY = "Game"; +const ROUND_STORAGE_KEY = "round"; +const GAME_COUNT = 12; + +function loadInitialGames() { + const stored = JSON.parse(localStorage.getItem(GAMES_STORAGE_KEY)); + if (stored && stored.length > 0) { + return stored.map((g) => + createGame( + Number(g.id), + Boolean(g.status), + createTeam(g.teamOne.playerOne, g.teamOne.playerTwo), + createTeam(g.teamTwo.playerOne, g.teamTwo.playerTwo) + ) + ); + } + return createDefaultGames(GAME_COUNT); +} + +let games = $state(loadInitialGames()); +let round = $state(Number(localStorage.getItem(ROUND_STORAGE_KEY)) || 0); + +function persistGames() { + localStorage.setItem(GAMES_STORAGE_KEY, JSON.stringify(games)); +} + +export function getGames() { + return games; +} + +export function getRound() { + return round; +} + +export function getGameDescription() { + const confirmed = games[0]?.status; + return confirmed ? `Round ${round}` : "Proposal"; +} + +export function propose() { + games = proposeGames({ + courts: getCourts(), + regulars: getRegulars(), + guests: getGuests(), + skillFactor: getSkillFactor(), + }); +} + +export function confirm() { + const alreadyConfirmed = games[0]?.status; + if (alreadyConfirmed) return; + + round += 1; + localStorage.setItem(ROUND_STORAGE_KEY, round); + for (const game of games) game.status = true; + + const selectedNames = collectConfirmedPlayerNames(games); + incrementRegularGames(selectedNames); + incrementGuestGames(selectedNames); + + persistGames(); + startTimer(true); +} + +export function resetSession() { + localStorage.removeItem(ROUND_STORAGE_KEY); + localStorage.removeItem(GAMES_STORAGE_KEY); + localStorage.removeItem("Court"); + localStorage.removeItem("Guest"); + resetRegulars(); + stopTimer(); + window.location.reload(); +} diff --git a/src/lib/stores/guests.svelte.js b/src/lib/stores/guests.svelte.js new file mode 100644 index 0000000..6dc08db --- /dev/null +++ b/src/lib/stores/guests.svelte.js @@ -0,0 +1,46 @@ +import { createGuest } from "../logic/players.js"; +import { randomStatus } from "../logic/random.js"; + +const STORAGE_KEY = "Guest"; +const GUEST_COUNT = 18; + +function loadInitialGuests() { + const stored = JSON.parse(localStorage.getItem(STORAGE_KEY)); + if (stored && stored.length > 0) { + return stored.map((g) => + createGuest(Number(g.id), Boolean(Number(g.status)), Number(g.games)) + ); + } + return Array.from({ length: GUEST_COUNT }, (_, i) => createGuest(i, randomStatus())); +} + +let guests = $state(loadInitialGuests()); + +function persist() { + localStorage.setItem(STORAGE_KEY, JSON.stringify(guests)); +} +if (!localStorage.getItem(STORAGE_KEY)) persist(); + +export function getGuests() { + return guests; +} + +export function activeGuests() { + return guests.filter((g) => g.status); +} + +export function toggleGuest(id) { + const guest = guests.find((g) => g.id === id); + if (!guest) return; + guest.status = !guest.status; + persist(); +} + +export function incrementGuestGames(names) { + for (const guest of guests) { + if (names.includes(guest.name)) { + guest.games += 1; + } + } + persist(); +} diff --git a/src/lib/stores/regulars.svelte.js b/src/lib/stores/regulars.svelte.js new file mode 100644 index 0000000..ccf0d81 --- /dev/null +++ b/src/lib/stores/regulars.svelte.js @@ -0,0 +1,79 @@ +import { uniqueNamesGenerator, names, adjectives } from "unique-names-generator"; +import { createRegular } from "../logic/players.js"; +import { randomStatus, randomLevel } from "../logic/random.js"; +import { parseCsv } from "../logic/csv.js"; + +const STORAGE_KEY = "Regular"; +const REGULAR_COUNT = 71; + +const nameConfig = { + dictionaries: [adjectives, names], + style: "capital", + length: 2, +}; + +function generateRandomRegular(id) { + const [firstName, lastName] = uniqueNamesGenerator(nameConfig).split("_"); + return createRegular(id, randomStatus(), randomLevel(), 0, firstName, lastName); +} + +function loadInitialRegulars() { + const stored = JSON.parse(localStorage.getItem(STORAGE_KEY)); + if (stored && stored.length > 0) { + return stored.map((r) => + createRegular( + Number(r.id), + Boolean(Number(r.status)), + Number(r.level), + Number(r.games), + r.firstName, + r.lastName + ) + ); + } + return Array.from({ length: REGULAR_COUNT }, (_, i) => generateRandomRegular(i)); +} + +let regulars = $state(loadInitialRegulars()); + +function persist() { + localStorage.setItem(STORAGE_KEY, JSON.stringify(regulars)); +} +if (!localStorage.getItem(STORAGE_KEY)) persist(); + +export function getRegulars() { + return regulars; +} + +export function activeRegulars() { + return regulars.filter((r) => r.status); +} + +export function toggleRegular(id) { + const regular = regulars.find((r) => r.id === id); + if (!regular) return; + regular.status = !regular.status; + persist(); +} + +export function incrementRegularGames(playerNames) { + for (const regular of regulars) { + if (playerNames.includes(regular.name)) { + regular.games += 1; + } + } + persist(); +} + +export function resetRegulars() { + for (const regular of regulars) { + regular.games = 0; + regular.status = false; + } + persist(); +} + +export function loadRegularsFromCsv(csvText) { + regulars = parseCsv(csvText); + persist(); +} diff --git a/src/lib/stores/skillFactor.svelte.js b/src/lib/stores/skillFactor.svelte.js new file mode 100644 index 0000000..d031040 --- /dev/null +++ b/src/lib/stores/skillFactor.svelte.js @@ -0,0 +1,9 @@ +let skillFactor = $state(10); // "All Levels" — matches the #skill select's original default + +export function getSkillFactor() { + return skillFactor; +} + +export function setSkillFactor(value) { + skillFactor = Number(value); +} diff --git a/src/lib/stores/timer.svelte.js b/src/lib/stores/timer.svelte.js new file mode 100644 index 0000000..dea1799 --- /dev/null +++ b/src/lib/stores/timer.svelte.js @@ -0,0 +1,106 @@ +import { Notyf } from "notyf"; + +const DEFAULT_MINS = 12; +const MIN_MINS = 0.5; + +const initialMins = Number(sessionStorage.getItem("mins")) || DEFAULT_MINS; +const initialRunning = Boolean(Number(sessionStorage.getItem("running"))); +const initialDeadline = Number(sessionStorage.getItem("deadline")) || Date.now(); +const initialRemainingMs = initialRunning + ? Math.max(initialDeadline - Date.now(), 0) + : initialMins * 60 * 1000; + +let mins = $state(initialMins); +let running = $state(initialRunning); +let deadline = $state(initialDeadline); +let remainingMs = $state(initialRemainingMs); + +let intervalId = null; + +function persist() { + sessionStorage.setItem("mins", mins); + sessionStorage.setItem("running", Number(running)); + sessionStorage.setItem("deadline", deadline); +} + +function showRoundCompletedToast() { + const notyf = new Notyf({ + duration: 0, + position: { x: "center", y: "top" }, + dismissible: true, + }); + notyf.error("Round completed"); +} + +function stopInterval() { + if (intervalId !== null) clearInterval(intervalId); + intervalId = null; +} + +function tick() { + const msToDeadline = deadline - Date.now(); + if (msToDeadline > 0) { + remainingMs = msToDeadline; + return; + } + stopInterval(); + running = false; + remainingMs = mins * 60 * 1000; + persist(); + showRoundCompletedToast(); +} + +export function getMins() { + return mins; +} + +export function getRunning() { + return running; +} + +export function getRemainingMs() { + return remainingMs; +} + +export function formatRemaining(ms) { + const m = Math.floor((ms % (1000 * 60 * 60)) / (1000 * 60)); + const s = Math.floor((ms % (1000 * 60)) / 1000); + const pad = (n) => (n < 10 ? "0" + n : String(n)); + return `${pad(m)}:${pad(s)}`; +} + +export function getDisplay() { + return formatRemaining(remainingMs); +} + +export function stopTimer() { + stopInterval(); + running = false; + remainingMs = mins * 60 * 1000; + persist(); +} + +export function start(fresh = true) { + if (fresh && running) return; + if (fresh) { + deadline = Date.now() + mins * 60 * 1000; + } + running = true; + remainingMs = Math.max(deadline - Date.now(), 0); + persist(); + stopInterval(); + intervalId = setInterval(tick, 1000); +} + +export function changeMinutes(delta) { + mins = Math.max(mins + delta, MIN_MINS); + stopTimer(); +} + +// Resume a timer that was still running across a page reload, otherwise +// settle the display to the resting (not-running) state. +if (initialRunning) { + start(false); +} else { + stopTimer(); +} diff --git a/src/lib/test-setup.js b/src/lib/test-setup.js new file mode 100644 index 0000000..45b115a --- /dev/null +++ b/src/lib/test-setup.js @@ -0,0 +1,7 @@ +import "@testing-library/jest-dom/vitest"; +import { afterEach } from "vitest"; +import { cleanup } from "@testing-library/svelte"; + +afterEach(() => { + cleanup(); +}); diff --git a/src/main.js b/src/main.js index 59f66d0..f6228c9 100644 --- a/src/main.js +++ b/src/main.js @@ -1,178 +1,5 @@ -import "./style.css" -import { Timer } from "./timer"; -import { Team, Game, Regular } from "./data"; -import { Manager, CourtManager, RegularManager, GuestManager } from "./manage"; - - -export class GameManager extends Manager { - timer = new Timer(); - courts = new CourtManager(); - regulars = new RegularManager(); - guests = new GuestManager(); - - constructor() { - super("Game", 12); - this.round = Number(localStorage.getItem("round")) || 0; - this.render(); - addGameBehaviour(this); - } - createItem(i, description, status) { - if (typeof description === "undefined") { - description = "---"; - } - if (typeof status === "undefined") { - status = true; - } - let player = new Regular(null, null, null, null, description, ""); - console.log(player); - let team = new Team(player, player); - return new Game(i, status, team, team); - } - loadItem(data) { - let id = Number(data.id); - let teamOne = new Team(data.teamOne.playerOne, data.teamOne.playerTwo); - let teamTwo = new Team(data.teamTwo.playerOne, data.teamTwo.playerTwo); - let status = Boolean(data.status); - return new Game(id, status, teamOne, teamTwo); - } - addBehaviour() { - let confirmedStatus = this.data[0].status; - let description = confirmedStatus ? "Round " + this.round : "Proposal"; - document.getElementById("Game-description").innerHTML = description; - } - addBlockedGames() { - const inactiveCourts = this.courts.inactive(); - console.log("Total reserved courts are " + inactiveCourts.length + "."); - for (let court of inactiveCourts) { - this.data.push(this.createItem(court.id, "RESERVED", false)); - } - } - addInactiveGames(possibleMatches) { - const activeCourts = this.courts.active(); - const unusedCourts = activeCourts.slice(possibleMatches + 1); - for (let court of unusedCourts) { - this.data.push(this.createItem(court.id, "---", false)); - } - } - addActiveGames(possibleMatches) { - const activeCourts = this.courts.active(); - const usedCourts = activeCourts.slice(0, possibleMatches); - let requiredPlayerCount = possibleMatches * 4; - const selectedPlayers = this.selectPlayers(requiredPlayerCount); - for (let index = 0; index < usedCourts.length; index++) { - const startIndex = 4 * index; - const endIndex = startIndex + 4; - const courtPlayers = selectedPlayers.slice(startIndex, endIndex); - const teamOne = new Team(courtPlayers[0], courtPlayers[3]); - const teamTwo = new Team(courtPlayers[1], courtPlayers[2]); - const game = new Game(usedCourts[index].id, false, teamOne, teamTwo); - this.data.push(game); - } - } - getPossibleGameCount() { - let activeRegularCount = this.regulars.active().length; - let activeGuestCount = this.guests.active().length; - let activePlayerCount = activeRegularCount + activeGuestCount; - console.log("Total players available: " + activePlayerCount); - let activeCourtCount = this.courts.active().length; - console.log("There courts available: " + activeCourtCount); - let possibleMatches = Math.min( - Math.floor(activePlayerCount / 4), - activeCourtCount - ); - return possibleMatches; - } - selectPlayers(count) { - console.log("Required players are " + count); - let activePlayers = this.regulars.active(); - const activeGuests = this.guests.active(); - activePlayers = activePlayers.concat(activeGuests); - console.log("Active players are:"); - activePlayers.map((p) => { - p.print(); - }); - const shuffledPlayers = shuffle(activePlayers); - shuffledPlayers.sort((a, b) => a.games - b.games); - const selectedPlayers = shuffledPlayers.slice(0, count); - selectedPlayers.sort((a, b) => a.level - b.level); - console.log("Selected players are:"); - selectedPlayers.map((p) => { - p.print(); - }); - return selectedPlayers; - } - propose() { - console.log("Proposing new games!"); - this.data = []; - this.addBlockedGames(); - let possibleMatches = this.getPossibleGameCount(); - console.log("Total possible matches are " + possibleMatches + "."); - this.addInactiveGames(possibleMatches); - this.addActiveGames(possibleMatches); - console.log("The matches are:"); - this.data.sort((a, b) => a.id - b.id); - this.data.map((g) => { - g.print(); - }) - this.render(); - } - confirm() { - let confirmedStatus = this.data[0].status; - if (confirmedStatus) { - return; - } - console.log("Confirm the proposal for round " + this.round + "."); - this.round += 1; - localStorage.setItem("round", this.round); - for (let i = 0; i < this.data.length; i++) { - this.data[i].status = true; - } - let selectedPlayers = []; - for (let game of this.data) { - console.log(game); - if ( game.teamOne.playerOne.name !== "RESERVED" ){ - selectedPlayers.push(game.teamOne.playerOne.name); - selectedPlayers.push(game.teamOne.playerTwo.name); - selectedPlayers.push(game.teamTwo.playerOne.name); - selectedPlayers.push(game.teamTwo.playerTwo.name); - } - } - this.regulars.incrementGames(selectedPlayers); - this.guests.incrementGames(selectedPlayers); - this.store(); - this.render(); - document.getElementById("timer-start").click(); - } - reset() { - localStorage.removeItem("round"); - localStorage.removeItem(this.description); - localStorage.removeItem(this.courts.description); - localStorage.removeItem(this.guests.description); - this.regulars.reset(); - document.getElementById("timer-stop").click(); - window.location.reload(); - } -} - -function shuffle(array) { - for (let i = array.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [array[i], array[j]] = [array[j], array[i]]; - } - return array; -} - -function addGameBehaviour(g) { - document.getElementById("propose").addEventListener("click", () => { - g.propose(); - }); - document.getElementById("confirm").addEventListener("click", () => { - g.confirm(); - }); - document.getElementById("reset").addEventListener("click", () => { - g.reset(); - }); -} - -const g = new GameManager(); +import "./style.css"; +import { mount } from "svelte"; +import App from "./App.svelte"; +mount(App, { target: document.getElementById("app") }); diff --git a/src/manage.js b/src/manage.js deleted file mode 100644 index 10a9896..0000000 --- a/src/manage.js +++ /dev/null @@ -1,214 +0,0 @@ -import { Court, Guest, Regular } from "./data"; -import { uniqueNamesGenerator, names, adjectives } from 'unique-names-generator'; - -const config = { - dictionaries: [adjectives, names], - style: 'capital', - length: 2 -} - -export class Manager { - constructor(description, maxCount) { - this.description = description; - this.maxCount = maxCount; - this.data = []; - this.count = this.data.length; - let data = JSON.parse(localStorage.getItem(this.description)); - if (data === null || data.length === 0) { - this.generate(); - return; - } - this.load(data); - } - generate() { - for (let i = 0; i < this.maxCount; i++) { - this.data.push(this.createItem(i)); - } - console.log("Generated " + this.data.length + " " + this.description); - this.store(); - this.render(); - } - load(data) { - for (let i = 0; i < data.length; i++) { - this.data.push(this.loadItem(data[i])); - } - console.log("Loaded " + this.data.length + " " + this.description); - this.render(); - } - store() { - let stringData = JSON.stringify(this.data); - localStorage.setItem(this.data[0].description, stringData); - } - render() { - let renderedHTML = this.data - .map((i) => { - return i.render(); - }) - .join(""); - let elementId = this.data[0].description + "-list"; - document.getElementById(elementId).innerHTML = renderedHTML; - this.addBehaviour(); - } - addBehaviour() { - for (let idx = 0; idx < this.data.length; ++idx) { - const elementId = this.data[0].description + "_" + this.data[idx].id; - const p = document.getElementById(elementId); - p.addEventListener("click", () => { - this.data[idx].toggle(); - this.store(); - p.classList.toggle("secondary"); - p.classList.toggle("outline"); - }); - } - } - active() { - return this.data.filter(function (c) { - return c.status; - }); - } - inactive() { - return this.data.filter(function (c) { - return !c.status; - }); - } -} - -export class CourtManager extends Manager { - constructor() { - super("Court", 12); - } - createItem(i) { - return new Court(i, randomStatus()); - } - loadItem(data) { - let id = Number(data.id); - let status = Boolean(Number(data.status)); - return new Court(id, status); - } -} - -export function randomStatus() { - return Math.random() < 0.5; -} - -function normalize(data) { - let factor = Number(document.getElementById("skill").value); - console.log("Normalize skill by a factor of " + factor + "."); - return data.map(function (p) { - p.skill = Math.ceil(p.skill / factor); - return p; - }); -} - -export class GuestManager extends Manager { - constructor(description, count) { - if (typeof description === "undefined") { - description = "Guest"; - } - if (typeof count === "undefined") { - count = 18; - } - super(description, count); - } - createItem(i) { - return new Guest(i, randomStatus()); - } - loadItem(data) { - let id = Number(data.id); - let status = Boolean(Number(data.status)); - let games = data.games; - return new Guest(id, status, games); - } - active() { - return normalize(super.active()); - } - incrementGames(list) { - for (let index = 0; index < this.data.length; index++) { - if (list.includes(this.data[index].name)) { - console.log("Added game count to " + this.data[index].name); - this.data[index].games += 1; - } - } - this.store(); - } -} - -export function randomLevel() { - const maxLevel = 10; - return Math.floor(Math.random() * maxLevel + 1); -} - -export class RegularManager extends GuestManager { - constructor() { - super("Regular", 71); - addLoadBehaviour(this); - } - createItem(i) { - const name = uniqueNamesGenerator(config); - console.log(name); - const firstName = name.split("_")[0]; - const lastName = name.split("_")[1]; - return new Regular(i, randomStatus(), randomLevel(), 0, firstName, lastName); - } - loadItem(data) { - const id = Number(data.id); - const level = Number(data.level); - const status = Boolean(Number(data.status)); - const games = Number(data.games); - const firstName = data.firstName; - const lastName = data.lastName; - return new Regular(id, status, level, games, firstName, lastName); - } - reset() { - for (let index = 0; index < this.data.length; index++) { - this.data[index].games = 0; - this.data[index].status = false; - } - } -} - -function parseLineToPlayer(data) { - const info = data.split(","); - const id = Number(info[0].trim()); - const firstName = info[1].trim(); - const lastName = info[2].trim(); - const level = Number(info[3].trim()); - return new Regular(id, randomStatus(), level, 0, firstName, lastName); -} - -function parseCsv(data) { - let lines = data.split("\n"); - let players = []; - for (let i = 1; i < lines.length; i++) { - if (lines[i] == undefined || lines[i].trim() == "") { - continue; - } - players.push(parseLineToPlayer(lines[i])); - } - console.log("Loaded " + players.length + " Players"); - for (let i = 0; i < players.length; i++) { - players[i].print(); - } - return players; -} - -document.getElementById("button-player-load").addEventListener("click", () => { - document.getElementById("player-load").click(); -}); - -function addLoadBehaviour(p) { - const f = document.getElementById("player-load"); - f.addEventListener("change", () => { - const file = f.files[0]; - let importData; - console.log("Loading data from " + file.name); - const reader = new FileReader(); - reader.onload = function (e) { - importData = reader.result; - p.data = parseCsv(importData); - p.store(); - p.render(); - }; - reader.readAsText(file); - }); -} diff --git a/src/timer.js b/src/timer.js deleted file mode 100644 index 9b0a8b9..0000000 --- a/src/timer.js +++ /dev/null @@ -1,91 +0,0 @@ -import { Notyf } from "notyf"; - -const milliSecond = 1000; - -export class Timer { - pointer = 0; - mins = Number(sessionStorage.getItem("mins")) || 12; - running = Boolean(Number(sessionStorage.getItem("running"))) || false; - deadline = Number(sessionStorage.getItem("deadline")) || new Date().getTime(); - - constructor() { - this.running ? this.start(false) : this.reset(); - addTimerBehaviour(this); - } - store() { - sessionStorage.setItem("mins", this.mins); - sessionStorage.setItem("running", Number(this.running)); - sessionStorage.setItem("deadline", this.deadline); - } - set(m, s) { - const timer = document.getElementById("timer-display"); - m = m < 10 ? "0" + m : m; - s = s < 10 ? "0" + s : s; - timer.value = `${m}:${s}`; - } - reset() { - clearInterval(this.pointer); - const mins = Math.floor(this.mins); - const secs = (this.mins - mins) * 60; - this.set(mins, secs); - this.running = false; - this.store(); - } - update(ms) { - const m = Math.floor((ms % (milliSecond * 60 * 60)) / (milliSecond * 60)); - const s = Math.floor((ms % (milliSecond * 60)) / milliSecond); - this.set(m, s); - } - refresh(p) { - const now = new Date().getTime(); - const msToDeadline = p.deadline - now; - if (msToDeadline > 0) { - p.update(msToDeadline); - return; - } - p.reset(); - const n = new Notyf({ - duration: 0, - position: { x: "center", y: "top" }, - dismissible: true, - }); - n.error("Round completed"); - } - start(fresh) { - if (fresh) { - const now = new Date().getTime(); - const msToDeadline = this.mins * 60 * 1000; - this.deadline = now + msToDeadline; - } - this.running = true; - this.store(); - this.pointer = setInterval(this.refresh, 1000, this); - } - change(value) { - this.mins += value; - if (this.mins < 0.5) { - this.mins = 0.5; - } - this.reset(); - } -} - -function addTimerBehaviour(t) { - document.getElementById("timer-start").addEventListener("click", () => { - if (t.running) return; - t.start(1); - }); - document.getElementById("timer-stop").addEventListener("click", () => { - t.reset(); - }); - document.getElementById("timer-inc").addEventListener("click", () => { - if (!t.running) { - t.change(0.5); - } - }); - document.getElementById("timer-dec").addEventListener("click", () => { - if (!t.running) { - t.change(-0.5); - } - }); -} |