diff options
| -rw-r--r-- | court.mjs | 2 | ||||
| -rw-r--r-- | game.mjs | 39 | ||||
| -rw-r--r-- | index.css | 3 | ||||
| -rw-r--r-- | index.html | 34 | ||||
| -rw-r--r-- | index.js | 31 | ||||
| -rw-r--r-- | player.mjs | 4 |
6 files changed, 72 insertions, 41 deletions
@@ -13,7 +13,7 @@ export class Court { console.log(this.name + " is currently " + status); } render() { - let type = this.status ? `class="button is-success"` : 'class="button is-dark"'; + let type = this.status ? `class="button is-large is-success"` : 'class="button is-large is-dark"'; return `<button id=${"court_" + this.id} ${type}>${this.name}</button>`; } } @@ -1,38 +1,38 @@ import { getMatchCount, shuffle } from "./utils.mjs"; class Team { - constructor(player_1, player_2) { - this.player_1 = player_1; - this.player_2 = player_2; + constructor(playerOne, playerTwo) { + this.playerOne = playerOne; + this.playerTwo = playerTwo; } print() { - console.log(this.player_1 + " and " + this.player_2); + console.log(this.playerOne + " and " + this.playerTwo); } render() { - return `<td style="width: 23%;">${this.player_1}</td><td style="width: 23%;">${this.player_2}</td>`; + return `<td style="width: 23%;">${this.playerOne}</td><td style="width: 23%;">${this.playerTwo}</td>`; } } export class Game { constructor(court, team_1, team_2) { - this.court_id = court.id; - this.court_status = court.status; + this.courtId = court.id; this.team_1 = team_1; this.team_2 = team_2; } print() { - let team_1 = this.team_1.player_1 + " and " + this.team_1.player_2; - let team_2 = this.team_2.player_1 + " and " + this.team_2.player_2; + let team_1 = this.team_1.playerOne + " and " + this.team_1.playerTwo; + let team_2 = this.team_2.playerOne + " and " + this.team_2.playerTwo; console.log(team_1 + " is playing against " + team_2); } render() { - let type = this.team_1.player_1 === "RESERVED" ? `class="is-danger is-light"` : ``; - return `<tr ${type}><td align="center" style="width: 8%;">${this.court_id + 1}</td>${this.team_1.render()}${this.team_2.render()}</tr>`; + 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) { - let team = new Team("---", "---"); +export function generateDummyGames(courts, description) { + let team = new Team(description, description); let games = []; for (const court of courts ) { let game = new Game(court, team, team); @@ -42,13 +42,12 @@ export function generateDummyGames(courts) { } export class Round { - constructor(number, games) { - this.number = number; + constructor(games, number) { this.games = games; + this.description = typeof number === 'undefined' ? "Proposal" : "Round " + number; } - render(description) { - let heading = typeof description !== 'undefined' ? description : "Round " + this.number; - let output = `<h2 class="subtitle">${heading}</h3><table class="table is-fullwidth"><thead><tr><th align="center">Court</th><th align="center" colspan='2'>Team 1</th><th colspan='2' align="center">Team 2</th></tr></thead>`; + 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() } @@ -76,7 +75,8 @@ export function proposeGames(players, courts) { console.log("Selected players are:"); console.log(selectedPlayers.map((i) => {return i.name;}).join(',')); console.log("The matches are:"); - let games = []; + 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; @@ -87,5 +87,6 @@ export function proposeGames(players, courts) { game.print(); games.push(game); } + games.sort((a, b) => a.courtId - b.courtId); return games; }
\ No newline at end of file @@ -11,4 +11,7 @@ #timer-display{ text-align: center; width: fit-content; +} +table { + font-size: 1.4em; }
\ No newline at end of file @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en" > +<html lang="en" data-theme="light"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> @@ -18,11 +18,11 @@ <div class="column"> <div class="field"> <div class="field is-grouped is-grouped-right"> - <button class="button is-danger" id="timer-dec">-</button> - <input class="input" id="timer-display" type="text" readonly></input> - <button class="button is-success" id="timer-inc">+</button> - <button class="button is-info" id="timer-start">Start</button> - <button class="button is-info" id="timer-stop">Stop</button> + <button class="button is-large is-danger" id="timer-dec">-</button> + <input class="input is-large" id="timer-display" type="text" readonly></input> + <button class="button is-large is-success" id="timer-inc">+</button> + <button class="button is-large is-info" id="timer-start">Start</button> + <button class="button is-large is-info" id="timer-stop">Stop</button> </div> </div> </div> @@ -32,11 +32,23 @@ <div id="game_list"></div> </section> <section class="section"> - <h2 class="title">Controls</h1> - <div class="button-grid"> - <button class="button is-dark" id="propose">Propose</button> - <!-- <button disabled> - <button class="button is-success">Confirm</button> --> + <div class="field is-grouped is-grouped-centered"> + <div class="control"> + <button class="button is-large is-dark" id="propose">Propose</button> + </div> + <div class="control"> + <div class="select is-large is-fullwidth"> + <select name="skill" id="skill"> + <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> + </div> + </div> + <div class="control"> + <button class="button is-large is-success" id="confirm">Confirm</button> + </div> </div> </section> <section class="section"> @@ -1,15 +1,16 @@ -import { Round, generateDummyGames, proposeGames } from "./game.mjs"; import { generateCourts } from "./court.mjs"; -import { csvToPlayers, generatePlayers } from "./player.mjs"; import { addToggleBehaviour } from "./utils.mjs"; +import { csvToPlayers, generatePlayers } from "./player.mjs"; +import { Round, generateDummyGames, proposeGames } from "./game.mjs"; + // Court handling -let courts = generateCourts(); +let courts = generateCourts(); // Persist this in local storage with 1 day limit addToggleBehaviour(courts, "court_"); // Regulars handling -let regulars = generatePlayers(); +let regulars = generatePlayers(); // Persist this in local storage without limit addToggleBehaviour(regulars, "regular_"); const fileInput = document.querySelector("#player-load input[type=file]"); if (fileInput !== null) { @@ -30,9 +31,23 @@ if (fileInput !== null) { } // Game handling -let round = new Round(0, generateDummyGames(courts)); -document.getElementById("game_list").innerHTML = round.render(); +let proposal; +let session = []; // Persist this in local storage with 1 day limit +if (session.length === 0) {session.push(new Round(generateDummyGames(courts, "---"), 0))}; +document.getElementById("game_list").innerHTML = session.at(-1).render(); document.getElementById("propose").addEventListener("click", () => { - round = new Round(0, proposeGames(regulars, courts)); - document.getElementById("game_list").innerHTML = round.render(); + let normalize = Number(document.getElementById("skill").value); + console.log(normalize); + regulars = regulars.map(function(p) { + p.skill = Math.ceil(p.skill / normalize); + return p; + }) + proposal = proposeGames(regulars, courts); + document.getElementById("game_list").innerHTML = new Round(proposal).render(); +}) +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(); })
\ No newline at end of file @@ -15,7 +15,7 @@ export class Player { console.log(this.name + " has a level of " + this.level + " and is currently " + status); } render() { - let type = this.status ? `class="button is-success"` : 'class="button is-danger"'; + let type = this.status ? `class="button is-large is-success"` : 'class="button is-large is-danger"'; return `<button id=${"regular_" + this.id} ${type}>${this.name}</button>`; } } @@ -42,7 +42,7 @@ function parseLineToPlayer(data) { var id = Number(info[0].trim()); var name = info[1].trim() + " " + info[2].trim(); var level = Number(info[3].trim()); - return new Player(id, name, level, false, 0); + return new Player(id, name, level, true, 0); } export function csvToPlayers(csv) { |