diff options
| -rw-r--r-- | court.mjs | 2 | ||||
| -rw-r--r-- | game.mjs | 202 | ||||
| -rw-r--r-- | index.html | 21 | ||||
| -rw-r--r-- | index.js | 49 | ||||
| -rw-r--r-- | player.mjs | 21 | ||||
| -rw-r--r-- | utils.mjs | 2 |
6 files changed, 176 insertions, 121 deletions
@@ -39,6 +39,7 @@ export class CourtManager extends Manager { } console.log("Loaded " + this.listData.length + " courts."); this.render(); + this.addToggleBehaviour(); } generate() { console.log("Generating court data."); @@ -48,5 +49,6 @@ export class CourtManager extends Manager { console.log("Generated data for " + this.listData.length + " courts"); this.store(); this.render(); + this.addToggleBehaviour(); } } @@ -1,4 +1,5 @@ -import { getMatchCount, shuffle } from "./utils.mjs"; +import { CourtManager } from "./court.mjs"; +import { getMatchCount, shuffle, Manager } from "./utils.mjs"; class Team { constructor(playerOne, playerTwo) { @@ -13,9 +14,9 @@ class Team { } } -export class Game { - constructor(court, team_1, team_2) { - this.courtId = court.id; +class Game { + constructor(courtId, team_1, team_2) { + this.courtId = courtId; this.team_1 = team_1; this.team_2 = team_2; } @@ -27,91 +28,146 @@ export class Game { render() { let type = this.team_1.playerOne === "RESERVED" ? `class="is-danger is-dark"` : ``; - // type = this.team_1.playerOne === "---" ? `class="is-warning is-dark"` : ``; return `<tr ${type}><td align="center" style="width: 8%;">${ this.courtId + 1 }</td>${this.team_1.render()}${this.team_2.render()}</tr>`; } } -export function generateDummyGames(courts, description) { +function generateDummyGames(courts, description) { let team = new Team(description, description); let games = []; for (const court of courts) { - let game = new Game(court, team, team); + let game = new Game(court.id, team, team); games.push(game); } return games; } -export class Round { - constructor(games, number) { - this.games = games; - this.description = - typeof number === "undefined" ? "Proposal" : "Round " + number; +export class GameManager extends Manager { + constructor() { + super("game", []); + this.round = Number(localStorage.getItem("round")) || 0; + this.courts = new CourtManager(); + console.log("Loading game data."); + let data = JSON.parse(localStorage.getItem(this.description)); + if (data === null || data.length === 0) { + console.log("Game data unavailable: " + data); + this.generate(); + return; + } + for (let i = 0; i < data.length; i++) { + let courtId = Number(data[i].courtId); + let teamOne = new Team( + data[i].team_1.playerOne, + data[i].team_1.playerTwo + ); + let teamTwo = new Team( + data[i].team_2.playerOne, + data[i].team_2.playerTwo + ); + this.listData.push(new Game(courtId, teamOne, teamTwo)); + } + console.log("Loaded " + this.listData.length + " games."); + this.render(); + this.addDescription(); } - render() { - let output = `<table class="table is-fullwidth"><thead><th colspan='5'>${this.description}</th><tr><th align="center">Court</th><th align="center" colspan='2'>Team 1</th><th colspan='2' align="center">Team 2</th></tr></thead>`; - for (const game of this.games) { - output += game.render(); + generate() { + console.log("Generating the dummy round."); + this.listData = generateDummyGames(this.courts.listData, "---"); + console.log("Loaded " + this.listData.length + " dummy round."); + this.store(); + this.render(); + this.addDescription(); + } + addDescription() { + let description = this.proposed ? "Proposal" : "Round " + this.round; + document.getElementById("game_description").innerHTML = description; + } + propose(players) { + console.log("Proposing new games!"); + let possibleMatches = getMatchCount(players, this.courts.listData); + let requiredPlayers = possibleMatches * 4; + console.log("Required players are " + requiredPlayers); + const activeCourts = this.courts.listData.filter(function (c) { + return c.status; + }); + const inactiveCourts = this.courts.listData.filter(function (c) { + return !c.status; + }); + const activePlayers = players.filter(function (p) { + return p.status; + }); + console.log("Total reserved courts are " + inactiveCourts.length + "."); + console.log("Total possible matches are " + possibleMatches + "."); + console.log("Active players are:"); + console.log( + activePlayers + .map((i) => { + return i.name; + }) + .join(",") + ); + const shuffledPlayers = shuffle(activePlayers); + shuffledPlayers.sort((a, b) => a.totalPlayed - b.totalPlayed); + const selectedPlayers = shuffledPlayers.slice(0, requiredPlayers); + selectedPlayers.sort((a, b) => a.level - b.level); + console.log("Selected players are:"); + console.log( + selectedPlayers + .map((i) => { + return i.name; + }) + .join(",") + ); + console.log("The matches are:"); + this.listData = generateDummyGames( + activeCourts.slice(possibleMatches + 1), + "---" + ); + this.listData = this.listData.concat( + generateDummyGames(inactiveCourts, "RESERVED") + ); + for (let index = 0; index < possibleMatches; index++) { + const startIndex = 4 * index; + const endIndex = startIndex + 4; + const courtPlayers = selectedPlayers.slice(startIndex, endIndex); + const team_1 = new Team(courtPlayers[0].name, courtPlayers[3].name); + const team_2 = new Team(courtPlayers[1].name, courtPlayers[2].name); + const game = new Game(activeCourts[index].id, team_1, team_2); + game.print(); + this.listData.push(game); } - output += "</table>"; - return output; + this.listData.sort((a, b) => a.courtId - b.courtId); + this.proposed = true; + this.render(); + this.addDescription(); } -} - -export function proposeGames(players, courts) { - console.log("Proposing new games!"); - let possibleMatches = getMatchCount(players, courts); - let requiredPlayers = possibleMatches * 4; - console.log("Required players are " + requiredPlayers); - const activeCourts = courts.filter(function (c) { - return c.status; - }); - const inactiveCourts = courts.filter(function (c) { - return !c.status; - }); - const activePlayers = players.filter(function (p) { - return p.status; - }); - console.log("Total reserved courts are " + inactiveCourts.length + "."); - console.log("Total possible matches are " + possibleMatches + "."); - console.log("Active players are:"); - console.log( - activePlayers - .map((i) => { - return i.name; - }) - .join(",") - ); - const shuffledPlayers = shuffle(activePlayers); - shuffledPlayers.sort((a, b) => a.totalPlayed - b.totalPlayed); - const selectedPlayers = shuffledPlayers.slice(0, requiredPlayers); - selectedPlayers.sort((a, b) => a.level - b.level); - console.log("Selected players are:"); - console.log( - selectedPlayers - .map((i) => { - return i.name; - }) - .join(",") - ); - console.log("The matches are:"); - let games = generateDummyGames( - activeCourts.slice(possibleMatches + 1), - "---" - ); - games = games.concat(generateDummyGames(inactiveCourts, "RESERVED")); - for (let index = 0; index < possibleMatches; index++) { - const startIndex = 4 * index; - const endIndex = startIndex + 4; - const courtPlayers = selectedPlayers.slice(startIndex, endIndex); - const team_1 = new Team(courtPlayers[0].name, courtPlayers[3].name); - const team_2 = new Team(courtPlayers[1].name, courtPlayers[2].name); - const game = new Game(activeCourts[index], team_1, team_2); - game.print(); - games.push(game); + confirm() { + this.proposed = false; + this.round += 1; + localStorage.setItem("round", this.round); + // Need to update the number of games played here + this.store(); + this.addDescription(); + document.getElementById("timer-start").click(); + const notification = new Notyf({ + duration: 30 * 1000, + position: { x: "center", y: "top" }, + types: [ + { + type: "success", + background: "green", + duration: 1000 * 1000, + dismissible: true, + }, + ], + }); + notification.success("Round confirmed!"); + } + reset() { + localStorage.clear("round"); + localStorage.clear("round"); + window.location.reload(); } - games.sort((a, b) => a.courtId - b.courtId); - return games; } @@ -20,8 +20,18 @@ </nav> <div class="container"> <section class="section"> - <h2 class="title">Games</h1> - <div id="game_list"></div> + <h2 class="title">Games</h2> + <table class="table is-fullwidth"> + <thead> + <tr><th colspan="5"><div id="game_description"></div></th></tr> + <tr> + <th>Court</th> + <th colspan='2'>Team 1</th> + <th colspan='2'>Team 2</th> + </tr> + </thead> + <tbody id="game_list"></tbody> + </table> </section> <section class="section"> <div class="field is-grouped is-grouped-centered"> @@ -35,6 +45,7 @@ </select> </div> <button class="button is-medium is-dark" id="confirm">Confirm</button> + <button class="button is-medium is-danger" id="reset">Reset</button> </div> <div class="field"> <div class="field is-grouped is-grouped-centered"> @@ -47,15 +58,15 @@ </div> </section> <section class="section"> - <h2 class="title">Courts</h1> + <h2 class="title">Courts</h2> <div id="court_list" class="button-grid"></div> </section> <section class="section"> - <h2 class="title">Regulars</h1> + <h2 class="title">Regulars</h2> <div id="regular_list" class="button-grid"></div> </section> <section class="section"> - <h2 class="title">Player Update</h3> + <h2 class="title">Player Update</h2> <div id="player-load" class="file is-danger has-name is-boxed"> <label class="file-label"> <input class="file-input" type="file" name="players" accept=".csv"/> @@ -1,48 +1,23 @@ -import { CourtManager } from "./court.mjs"; +import { GameManager } from "./game.mjs"; import { PlayerManager, addLoadBehaviour } from "./player.mjs"; -import { Round, generateDummyGames, proposeGames } from "./game.mjs"; // Court and player handling -let c = new CourtManager(); +let g = new GameManager(); let p = new PlayerManager(); addLoadBehaviour(p); // Game handling -let proposal; -let session = []; // Persist this in local storage with 1 day limit -if (session.length === 0) { - session.push(new Round(generateDummyGames(c.listData, "---"), 0)); -} -document.getElementById("game_list").innerHTML = session.at(-1).render(); document.getElementById("propose").addEventListener("click", () => { - let normalize = Number(document.getElementById("skill").value); - console.log(normalize); - let players = p.listData.map(function (p) { - p.skill = Math.ceil(p.skill / normalize); - return p; - }); - proposal = proposeGames(players, c.listData); - document.getElementById("game_list").innerHTML = new Round(proposal).render(); + let factor = Number(document.getElementById("skill").value); + let players = p.normalize(factor); + console.log(players); + g.propose(players); }); document.getElementById("confirm").addEventListener("click", () => { - console.log( - "Confirm the proposal on screen for round " + session.length + "." - ); - session.push(new Round(proposal, session.length)); - // Need to update the number of games played here - document.getElementById("game_list").innerHTML = session.at(-1).render(); - document.getElementById("timer-start").click(); - const notification = new Notyf({ - duration: 30 * 1000, - position: { x: "center", y: "top" }, - types: [ - { - type: "success", - background: "green", - duration: 1000 * 1000, - dismissible: true, - }, - ], - }); - notification.success("Round confirmed!"); + console.log("Confirm the proposal for round " + g.round + "."); + g.confirm(); +}); +document.getElementById("reset").addEventListener("click", () => { + console.log("Resetting the session!"); + g.reset(); }); @@ -58,15 +58,16 @@ export class PlayerManager extends Manager { return; } for (let i = 0; i < data.length; i++) { - var id = Number(data[i].id); - var name = data[i].name; - var level = data[i].level; - var status = data[i].status; - var totalPlayed = data[i].totalPlayed; + let id = Number(data[i].id); + let name = data[i].name; + let level = data[i].level; + let status = data[i].status; + let totalPlayed = data[i].totalPlayed; this.listData.push(new Player(id, name, level, status, totalPlayed)); } console.log("Loaded " + this.listData.length + " players."); this.render(); + this.addToggleBehaviour(); } generate() { console.log("Generating player data."); @@ -78,6 +79,7 @@ export class PlayerManager extends Manager { console.log("Generated data for " + this.listData.length + " players"); this.store(); this.render(); + this.addToggleBehaviour(); } import(data) { var lines = data.split("\n"); @@ -95,6 +97,15 @@ export class PlayerManager extends Manager { this.listData = players; this.store(); this.render(); + this.addToggleBehaviour(); + } + normalize(factor) { + console.log("Normalize skill by a factor of " + factor + "."); + let players = this.listData.map(function (p) { + p.skill = Math.ceil(p.skill / factor); + return p; + }); + return players; } } @@ -16,7 +16,6 @@ export class Manager { .join(""); let elementId = this.description + "_list"; document.getElementById(elementId).innerHTML = renderedHTML; - this.addToggleBehaviour(); } addToggleBehaviour() { for (let idx = 0; idx < this.listData.length; ++idx) { @@ -39,6 +38,7 @@ export function getMatchCount(regulars, courts) { console.log( "There are a total of " + activeCourts.length + " courts available." ); + console.log(regulars); const activePlayers = regulars.filter(function (p) { return p.status; }); |