Lot of updates and progress

6 files changed, 72 insertions, 41 deletions

diff --git a/court.mjs b/court.mjs
index b2cd9de..8721bc5 100644
--- a/court.mjs
+++ b/court.mjs
@@ -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>`;
     }
 }
diff --git a/game.mjs b/game.mjs
index 75c4906..d100096 100644
--- a/game.mjs
+++ b/game.mjs
@@ -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
diff --git a/index.css b/index.css
index 4e559cf..63d12d6 100644
--- a/index.css
+++ b/index.css
@@ -11,4 +11,7 @@
 #timer-display{
     text-align: center;
     width: fit-content;
+}
+table {
+    font-size: 1.4em;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 9cefa80..0e84b96 100644
--- a/index.html
+++ b/index.html
@@ -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">
diff --git a/index.js b/index.js
index 7f39140..28b2f05 100644
--- a/index.js
+++ b/index.js
@@ -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
diff --git a/player.mjs b/player.mjs
index 91d146a..ef10e03 100644
--- a/player.mjs
+++ b/player.mjs
@@ -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) {