Prettified the code and cleaned up the light/dark mode

8 files changed, 409 insertions, 359 deletions

diff --git a/court.mjs b/court.mjs
index cb895f0..3a8e551 100644
--- a/court.mjs
+++ b/court.mjs
@@ -1,50 +1,52 @@
 import { Manager } from "./utils.mjs";
 
 class Court {
-    constructor(id, status) {
-        this.id = id;
-        this.status = typeof status !== 'undefined' ? status : true;
-        this.name = "Court " + (id + 1);
-    }
-    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="button is-success"` : 'class="button is-danger"';
-        return `<button id=${"court_" + this.id} ${type}>${this.name}</button>`;
-    }
+  constructor(id, status) {
+    this.id = id;
+    this.status = typeof status !== "undefined" ? status : true;
+    this.name = "Court " + (id + 1);
+  }
+  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="button is-medium is-success"`
+      : 'class="button is-medium is-danger"';
+    return `<button id=${"court_" + this.id} ${type}>${this.name}</button>`;
+  }
 }
 
 export class CourtManager extends Manager {
-    maxCourtCount = 12;
+  maxCourtCount = 12;
 
-    constructor() {
-        super("court", []);
-        console.log("Loading court data.");
-        let data = JSON.parse(localStorage.getItem(this.description));
-        if (data === null || data.length != this.maxCourtCount) {
-            console.log("Court data unavailable: " + data);
-            this.generate();
-            return;
-        }
-        for (let i = 0; i < this.maxCourtCount; i++) {
-            this.listData.push(new Court(data[i].id, data[i].status));
-        }
-        console.log("Loaded " + this.listData.length + " courts.");
-        this.render();
+  constructor() {
+    super("court", []);
+    console.log("Loading court data.");
+    let data = JSON.parse(localStorage.getItem(this.description));
+    if (data === null || data.length != this.maxCourtCount) {
+      console.log("Court data unavailable: " + data);
+      this.generate();
+      return;
+    }
+    for (let i = 0; i < this.maxCourtCount; i++) {
+      this.listData.push(new Court(data[i].id, data[i].status));
     }
-    generate() {
-        console.log("Generating court data.");
-        for (let i = 0; i < this.maxCourtCount; i++) {
-            this.listData.push(new Court(i));
-        }
-        console.log("Generated data for " + this.listData.length + " courts");
-        this.store();
-        this.render();
+    console.log("Loaded " + this.listData.length + " courts.");
+    this.render();
+  }
+  generate() {
+    console.log("Generating court data.");
+    for (let i = 0; i < this.maxCourtCount; i++) {
+      this.listData.push(new Court(i));
     }
-}
\ No newline at end of file
+    console.log("Generated data for " + this.listData.length + " courts");
+    this.store();
+    this.render();
+  }
+}
diff --git a/game.mjs b/game.mjs
index d100096..bc5de34 100644
--- a/game.mjs
+++ b/game.mjs
@@ -1,92 +1,117 @@
 import { getMatchCount, shuffle } from "./utils.mjs";
 
 class Team {
-    constructor(playerOne, playerTwo) {
-        this.playerOne = playerOne;
-        this.playerTwo = playerTwo;
-    }
-    print() {
-        console.log(this.playerOne + " and " + this.playerTwo);
-    }
-    render() {
-        return `<td style="width: 23%;">${this.playerOne}</td><td style="width: 23%;">${this.playerTwo}</td>`;
-    }
+  constructor(playerOne, playerTwo) {
+    this.playerOne = playerOne;
+    this.playerTwo = playerTwo;
+  }
+  print() {
+    console.log(this.playerOne + " and " + this.playerTwo);
+  }
+  render() {
+    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.courtId = court.id;
-        this.team_1 = team_1;
-        this.team_2 = team_2;
-    }
-    print() {
-        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.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>`;
-    }
+  constructor(court, team_1, team_2) {
+    this.courtId = court.id;
+    this.team_1 = team_1;
+    this.team_2 = team_2;
+  }
+  print() {
+    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.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) {
-    let team = new Team(description, description);
-    let games = [];
-    for (const court of courts ) {
-        let game = new Game(court, team, team);
-        games.push(game);
-    }
-    return games;
+  let team = new Team(description, description);
+  let games = [];
+  for (const court of courts) {
+    let game = new Game(court, team, team);
+    games.push(game);
+  }
+  return games;
 }
 
 export class Round {
-    constructor(games, number) {
-        this.games = games;
-        this.description = typeof number === 'undefined' ? "Proposal" : "Round " + number;
-    }
-    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()
-        }
-        output += "</table>";
-        return output;
+  constructor(games, number) {
+    this.games = games;
+    this.description =
+      typeof number === "undefined" ? "Proposal" : "Round " + number;
+  }
+  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();
     }
+    output += "</table>";
+    return output;
+  }
 }
 
 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);
-    }
-    games.sort((a, b) => a.courtId - b.courtId);
-    return games;
-}
\ No newline at end of file
+  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);
+  }
+  games.sort((a, b) => a.courtId - b.courtId);
+  return games;
+}
diff --git a/index.css b/index.css
index 63d12d6..d035b3b 100644
--- a/index.css
+++ b/index.css
@@ -1,17 +1,17 @@
 .button-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-column-gap: 30px;
-    grid-row-gap: 30px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-column-gap: 30px;
+  grid-row-gap: 30px;
 }
 .button-grid button {
-    padding: 10px;
-    text-align: center;
+  padding: 10px;
+  text-align: center;
 }
-#timer-display{
-    text-align: center;
-    width: fit-content;
+#timer-display {
+  text-align: center;
+  width: fit-content;
 }
 table {
-    font-size: 1.4em;
-}
\ No newline at end of file
+  font-size: 1.5em;
+}
diff --git a/index.html b/index.html
index 7ff4652..2c4ea75 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,10 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark">
+<html lang="en" data-theme="light">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Match Up!</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
-    
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
     <link rel="stylesheet" href="index.css">
@@ -26,30 +25,24 @@
         </section>
         <section class="section">
           <div class="field is-grouped is-grouped-centered">
-            <div class="control">
-              <button class="button is-medium is-dark" id="propose">Propose</button>
-            </div>
-            <div class="control">
-              <div class="select is-medium 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-medium is-success" id="confirm">Confirm</button>
+            <button class="button is-medium is-dark" id="propose">Propose</button>
+            <div class="select is-medium is-dark">
+              <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>
+            <button class="button is-medium is-dark" id="confirm">Confirm</button>
           </div>
           <div class="field">
               <div class="field is-grouped is-grouped-centered">
-                <button class="button is-medium is-danger" id="timer-dec">-</button>
-                <input class="input is-medium" id="timer-display" type="text" readonly></input>
-                <button class="button is-medium is-success" id="timer-inc">+</button>
-                <button class="button is-medium is-info" id="timer-start">Start</button>
-                <button class="button is-medium is-info" id="timer-stop">Stop</button>
+                <button class="button is-medium is-dark" id="timer-dec">-</button>
+                <input class="input is-medium is-dark" id="timer-display" type="text" readonly></input>
+                <button class="button is-medium is-dark" id="timer-inc">+</button>
+                <button class="button is-medium is-dark" id="timer-start">Start</button>
+                <button class="button is-medium is-dark" id="timer-stop">Stop</button>
               </div>
             </div>
         </section>
diff --git a/index.js b/index.js
index 6d74bd2..35f564e 100644
--- a/index.js
+++ b/index.js
@@ -2,7 +2,6 @@ import { CourtManager } from "./court.mjs";
 import { PlayerManager, addLoadBehaviour } from "./player.mjs";
 import { Round, generateDummyGames, proposeGames } from "./game.mjs";
 
-
 // Court and player handling
 let c = new CourtManager();
 let p = new PlayerManager();
@@ -11,34 +10,39 @@ 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))};
+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 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();
+});
 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!");
-
-})
\ No newline at end of file
+  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!");
+});
diff --git a/player.mjs b/player.mjs
index 5d8f16a..1614c89 100644
--- a/player.mjs
+++ b/player.mjs
@@ -1,104 +1,115 @@
 import { Manager } from "./utils.mjs";
 
 class Player {
-    constructor(id, name, level, status, totalPlayed) {
-        this.id = id;
-        this.name = name;
-        this.level = typeof level !== 'undefined' ? level : 1;
-        this.status = typeof status !== 'undefined' ? status : false;
-        this.totalPlayed = typeof totalPlayed !== 'undefined' ? status : 0;
-    }
-    toggle() {
-        this.status = !this.status;
-        this.print();
-    }
-    print() {
-        let status = this.status ? "active" : "inactive";
-        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"';
-        return `<button id=${"regular_" + this.id} ${type}>${this.name}</button>`;
-    }
+  constructor(id, name, level, status, totalPlayed) {
+    this.id = id;
+    this.name = name;
+    this.level = typeof level !== "undefined" ? level : 1;
+    this.status = typeof status !== "undefined" ? status : false;
+    this.totalPlayed = typeof totalPlayed !== "undefined" ? status : 0;
+  }
+  toggle() {
+    this.status = !this.status;
+    this.print();
+  }
+  print() {
+    let status = this.status ? "active" : "inactive";
+    console.log(
+      this.name +
+        " has a level of " +
+        this.level +
+        " and is currently " +
+        status
+    );
+  }
+  render() {
+    let type = this.status
+      ? `class="button is-medium is-success"`
+      : 'class="button is-medium is-danger"';
+    return `<button id=${"regular_" + this.id} ${type}>${this.name}</button>`;
+  }
 }
 
 function randomLevel() {
-    const max_level = 10;
-    return Math.floor(Math.random() * max_level + 1);
+  const max_level = 10;
+  return Math.floor(Math.random() * max_level + 1);
 }
 
 function randomStatus() {
-    return Math.random() < 0.5;
+  return Math.random() < 0.5;
 }
 
 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, name, level, true, 0);
+  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, name, level, true, 0);
 }
 
 export class PlayerManager extends Manager {
-    constructor() {
-        super("regular", []);
-        console.log("Loading player data.");
-        let data = JSON.parse(localStorage.getItem(this.description));
-        if (data === null || data.length === 0) {
-            console.log("Player data unavailable: " + data);
-            this.generate();
-            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;
-            this.listData.push(new Player(id, name, level, status, totalPlayed));
-        }
-        console.log("Loaded " + this.listData.length + " players.");
-        this.render();
+  constructor() {
+    super("regular", []);
+    console.log("Loading player data.");
+    let data = JSON.parse(localStorage.getItem(this.description));
+    if (data === null || data.length === 0) {
+      console.log("Player data unavailable: " + data);
+      this.generate();
+      return;
     }
-    generate() {
-        console.log("Generating player data.");
-        let maxPlayerCount = 71;
-        for (let i = 0; i < maxPlayerCount; i++) {
-            let p = new Player(i, "Player " + i, randomLevel(), randomStatus(), 0);
-            this.listData.push(p);
-        }
-        console.log("Generated data for " + this.listData.length + " players");
-        this.store();
-        this.render();
+    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;
+      this.listData.push(new Player(id, name, level, status, totalPlayed));
     }
-    import(data) {
-        var lines = data.split("\n");
-        var players = [];
-        for (var i = 1; i < lines.length; i++) {
-            if(lines[i] == undefined || lines[i].trim() == "") {continue;}
-            players.push(parseLineToPlayer(lines[i]));
-        }
-        console.log("Loaded " + players.length + " Players");
-        for (var i=0; i<players.length; i++) {players[i].print();}
-        this.listData = players;
-        this.store();
-        this.render();
+    console.log("Loaded " + this.listData.length + " players.");
+    this.render();
+  }
+  generate() {
+    console.log("Generating player data.");
+    let maxPlayerCount = 71;
+    for (let i = 0; i < maxPlayerCount; i++) {
+      let p = new Player(i, "Player " + i, randomLevel(), randomStatus(), 0);
+      this.listData.push(p);
     }
+    console.log("Generated data for " + this.listData.length + " players");
+    this.store();
+    this.render();
+  }
+  import(data) {
+    var lines = data.split("\n");
+    var players = [];
+    for (var i = 1; i < lines.length; i++) {
+      if (lines[i] == undefined || lines[i].trim() == "") {
+        continue;
+      }
+      players.push(parseLineToPlayer(lines[i]));
+    }
+    console.log("Loaded " + players.length + " Players");
+    for (var i = 0; i < players.length; i++) {
+      players[i].print();
+    }
+    this.listData = players;
+    this.store();
+    this.render();
+  }
 }
 
 // Try to add this functionality inside the class to call after constructor
 export function addLoadBehaviour(p) {
-    const f = document.querySelector("#player-load input[type=file]");
-    f.addEventListener("change", () => {
-        const file = f.files[0];
-        let importData;
-        console.log("Loading data from "+ file.name);
-        const reader = new FileReader();
-        reader.onload = function(e) {
-            importData = reader.result;
-            p.import(importData);
-        };
-        reader.readAsText(file);
-    })
-    
-}
\ No newline at end of file
+  const f = document.querySelector("#player-load input[type=file]");
+  f.addEventListener("change", () => {
+    const file = f.files[0];
+    let importData;
+    console.log("Loading data from " + file.name);
+    const reader = new FileReader();
+    reader.onload = function (e) {
+      importData = reader.result;
+      p.import(importData);
+    };
+    reader.readAsText(file);
+  });
+}
diff --git a/timer.js b/timer.js
index 2049d0f..207fb66 100644
--- a/timer.js
+++ b/timer.js
@@ -1,86 +1,86 @@
 let minsPerRound = Number(sessionStorage.getItem("minsPerRound")) || 12;
 let timerRunningFlag = Number(sessionStorage.getItem("timerRunningFlag")) || 0;
-let deadline = Number(sessionStorage.getItem("deadline")) || new Date().getTime();
+let deadline =
+  Number(sessionStorage.getItem("deadline")) || new Date().getTime();
 let clock = 0;
 
 function setTimer(m, s) {
-    let timer = document.getElementById("timer-display");
-    m = m < 10 ? ("0" + m) : m;
-    s = s < 10 ? ("0" + s) : s;
-    timer.value = `${m}:${s}`;
+  let timer = document.getElementById("timer-display");
+  m = m < 10 ? "0" + m : m;
+  s = s < 10 ? "0" + s : s;
+  timer.value = `${m}:${s}`;
 }
 
 function setSessionData() {
-    sessionStorage.setItem("deadline", deadline);
-    sessionStorage.setItem("minsPerRound", minsPerRound);
-    sessionStorage.setItem("timerRunningFlag", timerRunningFlag);
+  sessionStorage.setItem("deadline", deadline);
+  sessionStorage.setItem("minsPerRound", minsPerRound);
+  sessionStorage.setItem("timerRunningFlag", timerRunningFlag);
 }
 
 function resetTimer() {
-    clearInterval(clock);
-    setTimer(minsPerRound, 0);
-    timerRunningFlag = 0;
-    setSessionData();
+  clearInterval(clock);
+  setTimer(minsPerRound, 0);
+  timerRunningFlag = 0;
+  setSessionData();
 }
 
 function updateTimer(milliseconds) {
-    const m = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));
-    const s = Math.floor((milliseconds % (1000 * 60)) / 1000);
-    setTimer(m, s);
+  const m = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));
+  const s = Math.floor((milliseconds % (1000 * 60)) / 1000);
+  setTimer(m, s);
 }
 
 function refreshTimer() {
-    const now = new Date().getTime();
-    const millisecondsToDeadline = deadline - now;
-    if (millisecondsToDeadline > 0) {
-        updateTimer(millisecondsToDeadline);
-        return;
-    }
-    resetTimer();
-    const notification = new Notyf({
-        duration: 0, 
-        position: {x: 'center', y: 'top'},
-        dismissible: true,
-    });
-    notification.error("Round completed");
+  const now = new Date().getTime();
+  const millisecondsToDeadline = deadline - now;
+  if (millisecondsToDeadline > 0) {
+    updateTimer(millisecondsToDeadline);
+    return;
+  }
+  resetTimer();
+  const notification = new Notyf({
+    duration: 0,
+    position: { x: "center", y: "top" },
+    dismissible: true,
+  });
+  notification.error("Round completed");
 }
 
 function startTimer(fresh) {
-    if (fresh) {
-        let now = new Date().getTime();
-        const millisecondsToDeadline = minsPerRound * 60 * 1000;
-        deadline = now + millisecondsToDeadline;
-    }
-    timerRunningFlag = 1;
-    setSessionData();
-    clock = setInterval(refreshTimer, 1000);
+  if (fresh) {
+    let now = new Date().getTime();
+    const millisecondsToDeadline = minsPerRound * 60 * 1000;
+    deadline = now + millisecondsToDeadline;
+  }
+  timerRunningFlag = 1;
+  setSessionData();
+  clock = setInterval(refreshTimer, 1000);
 }
 
 window.onload = function () {
-    if (timerRunningFlag) 
-        startTimer(0); 
-    else resetTimer();
+  if (timerRunningFlag) startTimer(0);
+  else resetTimer();
 
-    document.getElementById("timer-start").addEventListener('click', ()=> {
-        if (timerRunningFlag != 0) return;
-        startTimer(1);
-    });
+  document.getElementById("timer-start").addEventListener("click", () => {
+    if (timerRunningFlag != 0) return;
+    startTimer(1);
+  });
 
-    document.getElementById("timer-stop").addEventListener('click', ()=>{
-        resetTimer();
-    });
+  document.getElementById("timer-stop").addEventListener("click", () => {
+    resetTimer();
+  });
 
-    document.getElementById("timer-inc").addEventListener('click', ()=> {
-        if (timerRunningFlag == 0) {
-            minsPerRound += 1;
-            resetTimer();
-        }
-    });
+  document.getElementById("timer-inc").addEventListener("click", () => {
+    if (timerRunningFlag == 0) {
+      minsPerRound += 1;
+      resetTimer();
+    }
+  });
 
-    document.getElementById("timer-dec").addEventListener('click', ()=> {
-        if (timerRunningFlag == 0 && minsPerRound != 0) {
-            minsPerRound -= 1;
-            resetTimer();
-        }
-    });
-}
\ No newline at end of file
+  document.getElementById("timer-dec").addEventListener("click", () => {
+    if (timerRunningFlag == 0 && minsPerRound != 0) {
+      minsPerRound -= 1;
+      resetTimer();
+    }
+  });
+};
diff --git a/utils.mjs b/utils.mjs
index afe200c..b21539e 100644
--- a/utils.mjs
+++ b/utils.mjs
@@ -1,47 +1,62 @@
 export class Manager {
-    constructor(description, listData) {
-        this.description = description;
-        this.listData = listData;
-        this.count = listData.length;
-    }
-    store() {
-        let stringData = JSON.stringify(this.listData);
-        localStorage.setItem(this.description, stringData);
-    }
-    render() {
-        let renderedHTML = this.listData.map((i) => {return i.render();}).join('');
-        let elementId = this.description + '_list';
-        document.getElementById(elementId).innerHTML = renderedHTML;
-        this.addToggleBehaviour();
-    }
-    addToggleBehaviour() {
-        for (let idx = 0; idx < this.listData.length; ++idx) {
-            const elementId = this.description + "_" + this.listData[idx].id;
-            const p = document.getElementById(elementId);
-            p.addEventListener("click", () => {
-                this.listData[idx].toggle();
-                this.store();
-                p.classList.toggle('is-success');
-                p.classList.toggle('is-danger');
-            });
-        }
+  constructor(description, listData) {
+    this.description = description;
+    this.listData = listData;
+    this.count = listData.length;
+  }
+  store() {
+    let stringData = JSON.stringify(this.listData);
+    localStorage.setItem(this.description, stringData);
+  }
+  render() {
+    let renderedHTML = this.listData
+      .map((i) => {
+        return i.render();
+      })
+      .join("");
+    let elementId = this.description + "_list";
+    document.getElementById(elementId).innerHTML = renderedHTML;
+    this.addToggleBehaviour();
+  }
+  addToggleBehaviour() {
+    for (let idx = 0; idx < this.listData.length; ++idx) {
+      const elementId = this.description + "_" + this.listData[idx].id;
+      const p = document.getElementById(elementId);
+      p.addEventListener("click", () => {
+        this.listData[idx].toggle();
+        this.store();
+        p.classList.toggle("is-success");
+        p.classList.toggle("is-danger");
+      });
     }
+  }
 }
 
 export function getMatchCount(regulars, courts) {
-    const activeCourts = courts.filter(function (c) { return c.status });
-    console.log("There are a total of " + activeCourts.length + " courts available.");
-    const activePlayers = regulars.filter(function (p) { return p.status;});
-    console.log("There are a total of " + activePlayers.length + " players available.");
-    var possibleMatches = Math.floor(activePlayers.length / 4);
-    possibleMatches = possibleMatches > activeCourts.length ? activeCourts.length : possibleMatches;
-    return possibleMatches;
+  const activeCourts = courts.filter(function (c) {
+    return c.status;
+  });
+  console.log(
+    "There are a total of " + activeCourts.length + " courts available."
+  );
+  const activePlayers = regulars.filter(function (p) {
+    return p.status;
+  });
+  console.log(
+    "There are a total of " + activePlayers.length + " players available."
+  );
+  var possibleMatches = Math.floor(activePlayers.length / 4);
+  possibleMatches =
+    possibleMatches > activeCourts.length
+      ? activeCourts.length
+      : possibleMatches;
+  return possibleMatches;
 }
 
 export function shuffle(array) {
-    for (let i = array.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [array[i], array[j]] = [array[j], array[i]];
-    }
-    return array;
-}
\ No newline at end of file
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}