diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/data.js | 58 | ||||
| -rw-r--r-- | src/main.js | 25 | ||||
| -rw-r--r-- | src/manage.js | 48 | ||||
| -rw-r--r-- | src/style.css | 10 | ||||
| -rw-r--r-- | src/timer.js | 9 |
5 files changed, 80 insertions, 70 deletions
diff --git a/src/data.js b/src/data.js index 1d4576d..6abad81 100644 --- a/src/data.js +++ b/src/data.js @@ -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 ${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); + console.log(this.constructor.name); 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,15 +75,9 @@ export class Team { this.playerTwo.print(); } render() { - - return `<div class="card"> - <div class="card-content"> - <div class="content"> - <p class="subtitle is-6" style="word-wrap: break-word;">${this.playerOne}</p> - <p class="subtitle is-6" style="word-wrap: break-word;">${this.playerTwo}</p> - </div> - </div> - </div>`; + const p1 = renderPlayerName(this.playerOne); + const p2 = renderPlayerName(this.playerTwo); + return p1 + `<br/><br/>` + p2; } } @@ -88,23 +88,19 @@ 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 placeHolder = `<p class="title is-3">Reserved</p>` - let type = blockedState ? placeHolder : this.teamOne.render() + this.teamTwo.render(); - return `<div class="card"> - <header class="card-header"> - <p class="card-header-title">Court ${this.id + 1}</p> - </header> - <div class="card-content"> - ${type} - </div> - </div>`; + 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> + <h4>Court ${this.id + 1}</h4><hr> + ${type} + </article>`; } } diff --git a/src/main.js b/src/main.js index ec33b18..6d8f35b 100644 --- a/src/main.js +++ b/src/main.js @@ -1,19 +1,11 @@ +import "@picocss/pico"; 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 { 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(); @@ -31,7 +23,9 @@ export class GameManager extends Manager { if (typeof description === "undefined") { description = "---"; } - let team = new Team(description, description); + let player = new Regular(null, null, null, null, description, ""); + console.log(player); + let team = new Team(player, player); return new Game(i, true, team, team); } loadItem(data) { @@ -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); } @@ -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 + "."); @@ -144,7 +137,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,11 +157,9 @@ 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!"); }); } diff --git a/src/manage.js b/src/manage.js index 7449866..f8fe220 100644 --- a/src/manage.js +++ b/src/manage.js @@ -1,4 +1,4 @@ -import { Court, Guest, Player } from "./data"; +import { Court, Guest, Regular } from "./data"; export class Manager { constructor(description, maxCount) { @@ -49,8 +49,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 +94,10 @@ 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 +111,13 @@ export class GuestManager extends Manager { active() { return normalize(super.active()); } + update(list) { + for (let index = 0; index < this.data.length; index++ ){ + if (this.data[index].name in list) { + this.data[index].games += 1; + } + } + } } export function randomLevel() { @@ -116,33 +125,38 @@ 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()); + return new Regular(i, randomStatus(), randomLevel()); } 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); + let firstName = data.firstName; + let 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) { @@ -162,7 +176,7 @@ function parseCsv(data) { } 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 cb46ed5..197597b 100644 --- a/src/style.css +++ b/src/style.css @@ -3,16 +3,18 @@ grid-template-columns: repeat(6, 1fr); grid-gap: 15px; } -.card { - height: 100%; -} #timer-display { text-align: center; width: 100px; } +@media (min-width: 900px) { + #Regular_list button { + height: 100px; + } +} @media (max-width: 900px) { .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) { |