diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/data.js | 54 | ||||
| -rw-r--r-- | src/main.js | 57 | ||||
| -rw-r--r-- | src/manage.js | 79 | ||||
| -rw-r--r-- | src/style.css | 23 | ||||
| -rw-r--r-- | src/timer.js | 9 |
5 files changed, 144 insertions, 78 deletions
diff --git a/src/data.js b/src/data.js index 589b5a3..0b0c9ab 100644 --- a/src/data.js +++ b/src/data.js @@ -3,7 +3,7 @@ class Switch { this.id = id; this.status = typeof status !== "undefined" ? status : false; this.description = description; - this.name = description + " " + (id + 1); + this.name = this.description + " " + (id + 1); } toggle() { this.status = !this.status; @@ -14,10 +14,9 @@ class Switch { console.log(this.name + " is currently " + status); } render() { - let color = this.status ? "is-success" : "is-danger"; - let type = `class="button is-medium ${color}"`; + let color = this.status ? `` : `class="outline secondary"`; let id = this.description + "_" + this.id; - return `<button id=${id} ${type}>${this.name}</button>`; + return `<button id=${id} ${color}>${this.name}</button>`; } } @@ -27,14 +26,15 @@ export class Court extends Switch { } } -export class Player extends Switch { - constructor(id, status, level, games, name) { +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; - if (typeof name !== "undefined") { - this.name = name; - } + this.firstName = + typeof firstName !== "undefined" ? firstName : this.description; + this.lastName = typeof lastName !== "undefined" ? lastName : this.id + 1; + this.name = this.firstName + " " + this.lastName; } } @@ -54,10 +54,16 @@ export class Guest extends Switch { this.level = guestCategories[categoryId].level; this.games = typeof games !== "undefined" ? games : 0; const guestNumber = (id % this.maxCount) + 1; - this.name = guestCategories[categoryId].description + " " + guestNumber; + 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; @@ -69,9 +75,9 @@ export class Team { this.playerTwo.print(); } render() { - let p1 = `<td style="width: 23%; text-align: right;">${this.playerOne}</td>`; - let p2 = `<td style="width: 23%; text-align: left;">${this.playerTwo}</td>`; - return p1 + p2; + const p1 = renderPlayerName(this.playerOne); + const p2 = renderPlayerName(this.playerTwo); + return p1 + `<br/><br/>` + p2; } } @@ -82,18 +88,24 @@ export class Game extends Switch { this.teamTwo = teamTwo; } print() { - let teamOne = this.teamOne.playerOne + " and " + this.teamOne.playerTwo; - let teamTwo = this.teamTwo.playerOne + " and " + this.teamTwo.playerTwo; + 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() { - let blockedState = this.teamOne.playerOne === "RESERVED"; - let type = blockedState ? `class="is-dark"` : ``; - let court = `<td style="width: 8%; text-align: center;">${ - this.id + 1 - }</td>`; - return `<tr ${type}>${court}${this.teamOne.render()}${this.teamTwo.render()}</tr>`; + 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/main.js b/src/main.js index ec33b18..59f66d0 100644 --- a/src/main.js +++ b/src/main.js @@ -1,19 +1,8 @@ -import "notyf/notyf.min.css"; -import "bulma/css/bulma.css"; -import "@fortawesome/fontawesome-free/css/all.css"; -import "./style.css"; -import { Notyf } from "notyf"; +import "./style.css" import { Timer } from "./timer"; -import { Team, Game } from "./data"; +import { Team, Game, Regular } from "./data"; import { Manager, CourtManager, RegularManager, GuestManager } from "./manage"; -export function getNotifier(seconds) { - return new Notyf({ - duration: seconds * milliSecond, - position: { x: "center", y: "top" }, - dismissible: true, - }); -} export class GameManager extends Manager { timer = new Timer(); @@ -27,12 +16,17 @@ export class GameManager extends Manager { this.render(); addGameBehaviour(this); } - createItem(i, description) { + createItem(i, description, status) { if (typeof description === "undefined") { description = "---"; } - let team = new Team(description, description); - return new Game(i, true, team, team); + 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); @@ -44,20 +38,20 @@ export class GameManager extends Manager { addBehaviour() { let confirmedStatus = this.data[0].status; let description = confirmedStatus ? "Round " + this.round : "Proposal"; - document.getElementById("Game_description").innerHTML = description; + 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")); + 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)); + this.data.push(this.createItem(court.id, "---", false)); } } addActiveGames(possibleMatches) { @@ -69,8 +63,8 @@ export class GameManager extends Manager { const startIndex = 4 * index; const endIndex = startIndex + 4; const courtPlayers = selectedPlayers.slice(startIndex, endIndex); - const teamOne = new Team(courtPlayers[0].name, courtPlayers[3].name); - const teamTwo = new Team(courtPlayers[1].name, courtPlayers[2].name); + 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); } @@ -98,7 +92,7 @@ export class GameManager extends Manager { p.print(); }); const shuffledPlayers = shuffle(activePlayers); - shuffledPlayers.sort((a, b) => a.totalPlayed - b.totalPlayed); + 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:"); @@ -125,7 +119,6 @@ export class GameManager extends Manager { confirm() { let confirmedStatus = this.data[0].status; if (confirmedStatus) { - getNotifier().error("Create a proposal first!"); return; } console.log("Confirm the proposal for round " + this.round + "."); @@ -134,7 +127,18 @@ export class GameManager extends Manager { for (let i = 0; i < this.data.length; i++) { this.data[i].status = true; } - // Increment the number of games played + 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(); @@ -144,7 +148,7 @@ export class GameManager extends Manager { localStorage.removeItem(this.description); localStorage.removeItem(this.courts.description); localStorage.removeItem(this.guests.description); - // Clear the number of games played + this.regulars.reset(); document.getElementById("timer-stop").click(); window.location.reload(); } @@ -164,12 +168,11 @@ function addGameBehaviour(g) { }); document.getElementById("confirm").addEventListener("click", () => { g.confirm(); - getNotifier().success("Round confirmed!"); }); document.getElementById("reset").addEventListener("click", () => { g.reset(); - getNotifier().error("Session has been reset!"); }); } const g = new GameManager(); + diff --git a/src/manage.js b/src/manage.js index 7449866..10a9896 100644 --- a/src/manage.js +++ b/src/manage.js @@ -1,4 +1,11 @@ -import { Court, Guest, Player } from "./data"; +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) { @@ -38,7 +45,7 @@ export class Manager { return i.render(); }) .join(""); - let elementId = this.data[0].description + "_list"; + let elementId = this.data[0].description + "-list"; document.getElementById(elementId).innerHTML = renderedHTML; this.addBehaviour(); } @@ -49,8 +56,8 @@ export class Manager { p.addEventListener("click", () => { this.data[idx].toggle(); this.store(); - p.classList.toggle("is-success"); - p.classList.toggle("is-danger"); + p.classList.toggle("secondary"); + p.classList.toggle("outline"); }); } } @@ -94,8 +101,14 @@ function normalize(data) { } export class GuestManager extends Manager { - constructor() { - super("Guest", 18); + 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()); @@ -109,6 +122,15 @@ export class GuestManager extends Manager { 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() { @@ -116,33 +138,42 @@ export function randomLevel() { return Math.floor(Math.random() * maxLevel + 1); } -export class RegularManager extends Manager { +export class RegularManager extends GuestManager { constructor() { super("Regular", 71); addLoadBehaviour(this); } createItem(i) { - return new Player(i, randomStatus(), randomLevel()); + 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) { - let id = Number(data.id); - let name = data.name; - let level = Number(data.level); - let status = Boolean(Number(data.status)); - let games = Number(data.games); - return new Player(id, status, level, games, name); + 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); } - active() { - return normalize(super.active()); + reset() { + for (let index = 0; index < this.data.length; index++) { + this.data[index].games = 0; + this.data[index].status = false; + } } } function parseLineToPlayer(data) { - var info = data.split(","); - var id = Number(info[0].trim()); - var name = info[1].trim() + " " + info[2].trim(); - var level = Number(info[3].trim()); - return new Player(id, randomStatus(), level, 0, name); + 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) { @@ -161,8 +192,12 @@ function parseCsv(data) { return players; } +document.getElementById("button-player-load").addEventListener("click", () => { + document.getElementById("player-load").click(); +}); + function addLoadBehaviour(p) { - const f = document.querySelector("#player-load input[type=file]"); + const f = document.getElementById("player-load"); f.addEventListener("change", () => { const file = f.files[0]; let importData; diff --git a/src/style.css b/src/style.css index 73550ca..357b043 100644 --- a/src/style.css +++ b/src/style.css @@ -1,17 +1,26 @@ -.button-grid { +@import "@picocss/pico"; +@import "notyf/notyf.min.css"; +@import "@fortawesome/fontawesome-free/css/all.css"; + +.grid-container { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(6, 1fr); grid-gap: 15px; } #timer-display { text-align: center; - width: fit-content; + width: 100px; } -table { - font-size: 1.5em; +#timer { + margin: 0; +} +@media (min-width: 900px) { + #Regular-list button { + height: 100px; + } } @media (max-width: 900px) { - .button-grid { + .grid-container { grid-template-columns: repeat(1, 1fr); } -}
\ No newline at end of file +} diff --git a/src/timer.js b/src/timer.js index c00ffdc..9b0a8b9 100644 --- a/src/timer.js +++ b/src/timer.js @@ -1,3 +1,5 @@ +import { Notyf } from "notyf"; + const milliSecond = 1000; export class Timer { @@ -42,7 +44,12 @@ export class Timer { return; } p.reset(); - getNotifier().error("Round completed"); + const n = new Notyf({ + duration: 0, + position: { x: "center", y: "top" }, + dismissible: true, + }); + n.error("Round completed"); } start(fresh) { if (fresh) { |