diff options
| -rw-r--r-- | court.mjs | 2 | ||||
| -rw-r--r-- | index.html | 43 | ||||
| -rw-r--r-- | index.js | 13 | ||||
| -rw-r--r-- | player.mjs | 2 | ||||
| -rw-r--r-- | timer.js | 11 |
5 files changed, 41 insertions, 30 deletions
@@ -13,7 +13,7 @@ export class Court { console.log(this.name + " is currently " + status); } render() { - let type = this.status ? `class="button is-large is-success"` : 'class="button is-large is-dark"'; + let type = this.status ? `class="button is-medium is-success"` : 'class="button is-medium is-dark"'; return `<button id=${"court_" + this.id} ${type}>${this.name}</button>`; } } @@ -1,32 +1,25 @@ <!DOCTYPE html> -<html lang="en" data-theme="light"> +<html lang="en" data-theme="dark"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Match Up!</title> - <script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script> + <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"> </head> <body> <section class="section"> - <div class="container"> - <div class="columns"> - <div class="column is-one-quarter"><img src="icon.svg" style="height: 80%;"></div> - <div class="column is-one-quarter"><h1 class="title">Match Up!</h1></div> - <div class="column"> - <div class="field"> - <div class="field is-grouped is-grouped-right"> - <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> + <nav class="navbar" role="navigation" aria-label="main navigation"> + <div class="navbar-brand"> + <a class="navbar-item" href="https://bulma.io"> + <img src="icon.svg" style="height: 80%;"> Match Up + </a> </div> + </nav> + <div class="container"> <section class="section"> <h2 class="title">Games</h1> <div id="game_list"></div> @@ -34,10 +27,10 @@ <section class="section"> <div class="field is-grouped is-grouped-centered"> <div class="control"> - <button class="button is-large is-dark" id="propose">Propose</button> + <button class="button is-medium is-dark" id="propose">Propose</button> </div> <div class="control"> - <div class="select is-large is-fullwidth"> + <div class="select is-medium is-fullwidth"> <select name="skill" id="skill"> <option value="10">All Levels</option> <option value="5">2 Levels</option> @@ -47,9 +40,18 @@ </div> </div> <div class="control"> - <button class="button is-large is-success" id="confirm">Confirm</button> + <button class="button is-medium is-success" id="confirm">Confirm</button> </div> </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> + </div> + </div> </section> <section class="section"> <h2 class="title">Courts</h1> @@ -78,5 +80,6 @@ </section> <script src="index.js" type="module"></script> <script src="timer.js"></script> + <script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script> </body> </html>
\ No newline at end of file @@ -50,4 +50,17 @@ document.getElementById("confirm").addEventListener("click", () => { 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 @@ -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-large is-success"` : 'class="button is-large is-danger"'; + 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>`; } } @@ -38,16 +38,11 @@ function refreshTimer() { } resetTimer(); const notification = new Notyf({ - duration: 30 * 1000, + duration: 0, position: {x: 'center', y: 'top'}, - types: [{ - type: 'success', - background: 'indianred', - duration: 1000 * 1000, - dismissible: true - }] + dismissible: true, }); - notification.success("Round completed"); + notification.error("Round completed"); } function startTimer(fresh) { |