diff options
| author | Karan Jayachandra <mail@karanjayachandra.com> | 2025-11-09 11:53:05 +0100 |
|---|---|---|
| committer | Karan Jayachandra <mail@karanjayachandra.com> | 2025-11-09 11:53:05 +0100 |
| commit | 6456fae865aae8b2ba398b5f78f2589c93d0643d (patch) | |
| tree | 1ab854ae7d554b83321532363ef3480d0988b988 | |
| parent | 34d77cd777bd44d7bfe0e3ab3379f9be256ca88b (diff) | |
Working regulars and courts
| -rw-r--r-- | court.mjs | 28 | ||||
| -rw-r--r-- | index.html | 13 | ||||
| -rw-r--r-- | index.js | 29 | ||||
| -rw-r--r-- | player.mjs | 4 |
4 files changed, 59 insertions, 15 deletions
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 `<button id=${"court_" + this.id} ${type}>${this.name}</button>`; + } +} + +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 @@ -3,9 +3,8 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Match Up!</title> - <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"> <link rel="stylesheet" href="index.css"> </head> <body> @@ -15,14 +14,18 @@ <li><strong>Match Up</strong></li> </ul> <ul> - <li><a href="/players">Players</a></li> + <!-- <li><a href="/players">Players</a></li> <li><a href="#">Guests</a></li> - <li><a href="#">Admin</a></li> + <li><a href="#">Admin</a></li> --> </ul> </nav> <div> + <h2>Courts</h2> + <div id="court_list" class="button-grid"></div> + </div> + <div id="regulars"> <h2>Regulars</h2> - <div id="player_list" class="button-grid"></div> + <div id="regular_list" class="button-grid"></div> </div> </main> <script src="player.mjs" type="module"></script> @@ -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 @@ -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 `<button id=${"player_" + this.id} ${type} onclick='togglePlayer(${this.id})'>${this.name}</button>`; + return `<button id=${"regular_" + this.id} ${type}>${this.name}</button>`; } } |