From 6456fae865aae8b2ba398b5f78f2589c93d0643d Mon Sep 17 00:00:00 2001 From: Karan Jayachandra Date: Sun, 9 Nov 2025 11:53:05 +0100 Subject: Working regulars and courts --- court.mjs | 28 ++++++++++++++++++++++++++++ index.html | 13 ++++++++----- index.js | 29 +++++++++++++++++++++-------- player.mjs | 4 ++-- 4 files changed, 59 insertions(+), 15 deletions(-) create mode 100644 court.mjs diff --git a/court.mjs b/court.mjs new file mode 100644 index 0000000..31f277f --- /dev/null +++ b/court.mjs @@ -0,0 +1,28 @@ +export class Court { + constructor(id) { + this.id = id; + this.name = "Court " + (id + 1); + this.status = true; + } + toggle() { + this.status = !this.status; + this.print(); + } + print() { + let status = this.status ? "active" : "inactive"; + console.log(this.name + " is currently " + status); + } + render() { + let type = this.status ? "" : 'class="outline secondary"'; + return ``; + } +} + +export function generateCourts() { + let courts = []; + const totalCourts = 12; + for (let i = 0; i < totalCourts; i++) { + courts.push(new Court(i)); + } + return courts; +} \ No newline at end of file diff --git a/index.html b/index.html index 5ac86c8..8bc2191 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,8 @@ - Match Up! - + @@ -15,14 +14,18 @@
  • Match Up
    • +

    Courts

    +
    +
    +

    Regulars

    -
    +
    diff --git a/index.js b/index.js index 97c65d6..5d34c96 100644 --- a/index.js +++ b/index.js @@ -1,11 +1,24 @@ +import { generateCourts } from "./court.mjs"; import { generatePlayers } from "./player.mjs"; -// Player handling -let players = generatePlayers(); -let renderedHTML = players.map((p) => {return p.render();}).join(''); -document.getElementById('player_list').innerHTML = renderedHTML; -function togglePlayer(id) { - console.log(players); - let player = players.find((p) => p.id === id); - document.getElementById('player_' + id).outerHTML = player.toggle(); +// Court handling +let courts = generateCourts(); +addToggleBehaviour(courts, "court_"); + +// Regulars handling +let regulars = generatePlayers(); +addToggleBehaviour(regulars, "regular_"); + +function addToggleBehaviour(list, description) { + let renderedHTML = list.map((i) => {return i.render();}).join(''); + let listId = description + 'list'; + document.getElementById(listId).innerHTML = renderedHTML; + for (let index = 0; index < list.length; ++index) { + const p = document.getElementById(description + index); + p.addEventListener("click", () => { + list[index].toggle(); + p.classList.toggle('secondary'); + p.classList.toggle('outline'); + }); + } } \ No newline at end of file diff --git a/player.mjs b/player.mjs index a0e2535..d75e659 100644 --- a/player.mjs +++ b/player.mjs @@ -7,7 +7,7 @@ export class Player { } toggle() { this.status = !this.status; - return this.render(); + this.print(); } print() { let status = this.status ? "active" : "inactive"; @@ -15,7 +15,7 @@ export class Player { } render() { let type = this.status ? "" : 'class="outline secondary"'; - return ``; + return ``; } } -- cgit v1.3.1