diff options
| -rw-r--r-- | assets/icon.ipe | 461 | ||||
| -rw-r--r-- | court.mjs | 2 | ||||
| -rw-r--r-- | game.mjs | 47 | ||||
| -rw-r--r-- | icon.svg | 15 | ||||
| -rw-r--r-- | index.css | 4 | ||||
| -rw-r--r-- | index.html | 79 | ||||
| -rw-r--r-- | index.js | 32 | ||||
| -rw-r--r-- | player.mjs | 2 | ||||
| -rw-r--r-- | timer.js | 91 | ||||
| -rw-r--r-- | utils.mjs | 13 |
10 files changed, 709 insertions, 37 deletions
diff --git a/assets/icon.ipe b/assets/icon.ipe new file mode 100644 index 0000000..d23d37f --- /dev/null +++ b/assets/icon.ipe @@ -0,0 +1,461 @@ +<?xml version="1.0"?> +<!DOCTYPE ipe SYSTEM "ipe.dtd"> +<ipe version="70218" creator="Ipe 7.2.29"> +<info created="D:20251109135743" modified="D:20251109135745"/> +<ipestyle name="basic"> +<symbol name="arrow/arc(spx)"> +<path stroke="sym-stroke" fill="sym-stroke" pen="sym-pen"> +0 0 m +-1 0.333 l +-1 -0.333 l +h +</path> +</symbol> +<symbol name="arrow/farc(spx)"> +<path stroke="sym-stroke" fill="white" pen="sym-pen"> +0 0 m +-1 0.333 l +-1 -0.333 l +h +</path> +</symbol> +<symbol name="arrow/ptarc(spx)"> +<path stroke="sym-stroke" fill="sym-stroke" pen="sym-pen"> +0 0 m +-1 0.333 l +-0.8 0 l +-1 -0.333 l +h +</path> +</symbol> +<symbol name="arrow/fptarc(spx)"> +<path stroke="sym-stroke" fill="white" pen="sym-pen"> +0 0 m +-1 0.333 l +-0.8 0 l +-1 -0.333 l +h +</path> +</symbol> +<symbol name="mark/circle(sx)" transformations="translations"> +<path fill="sym-stroke"> +0.6 0 0 0.6 0 0 e +0.4 0 0 0.4 0 0 e +</path> +</symbol> +<symbol name="mark/disk(sx)" transformations="translations"> +<path fill="sym-stroke"> +0.6 0 0 0.6 0 0 e +</path> +</symbol> +<symbol name="mark/fdisk(sfx)" transformations="translations"> +<group> +<path fill="sym-fill"> +0.5 0 0 0.5 0 0 e +</path> +<path fill="sym-stroke" fillrule="eofill"> +0.6 0 0 0.6 0 0 e +0.4 0 0 0.4 0 0 e +</path> +</group> +</symbol> +<symbol name="mark/box(sx)" transformations="translations"> +<path fill="sym-stroke" fillrule="eofill"> +-0.6 -0.6 m +0.6 -0.6 l +0.6 0.6 l +-0.6 0.6 l +h +-0.4 -0.4 m +0.4 -0.4 l +0.4 0.4 l +-0.4 0.4 l +h +</path> +</symbol> +<symbol name="mark/square(sx)" transformations="translations"> +<path fill="sym-stroke"> +-0.6 -0.6 m +0.6 -0.6 l +0.6 0.6 l +-0.6 0.6 l +h +</path> +</symbol> +<symbol name="mark/fsquare(sfx)" transformations="translations"> +<group> +<path fill="sym-fill"> +-0.5 -0.5 m +0.5 -0.5 l +0.5 0.5 l +-0.5 0.5 l +h +</path> +<path fill="sym-stroke" fillrule="eofill"> +-0.6 -0.6 m +0.6 -0.6 l +0.6 0.6 l +-0.6 0.6 l +h +-0.4 -0.4 m +0.4 -0.4 l +0.4 0.4 l +-0.4 0.4 l +h +</path> +</group> +</symbol> +<symbol name="mark/cross(sx)" transformations="translations"> +<group> +<path fill="sym-stroke"> +-0.43 -0.57 m +0.57 0.43 l +0.43 0.57 l +-0.57 -0.43 l +h +</path> +<path fill="sym-stroke"> +-0.43 0.57 m +0.57 -0.43 l +0.43 -0.57 l +-0.57 0.43 l +h +</path> +</group> +</symbol> +<symbol name="arrow/fnormal(spx)"> +<path stroke="sym-stroke" fill="white" pen="sym-pen"> +0 0 m +-1 0.333 l +-1 -0.333 l +h +</path> +</symbol> +<symbol name="arrow/pointed(spx)"> +<path stroke="sym-stroke" fill="sym-stroke" pen="sym-pen"> +0 0 m +-1 0.333 l +-0.8 0 l +-1 -0.333 l +h +</path> +</symbol> +<symbol name="arrow/fpointed(spx)"> +<path stroke="sym-stroke" fill="white" pen="sym-pen"> +0 0 m +-1 0.333 l +-0.8 0 l +-1 -0.333 l +h +</path> +</symbol> +<symbol name="arrow/linear(spx)"> +<path stroke="sym-stroke" pen="sym-pen"> +-1 0.333 m +0 0 l +-1 -0.333 l +</path> +</symbol> +<symbol name="arrow/fdouble(spx)"> +<path stroke="sym-stroke" fill="white" pen="sym-pen"> +0 0 m +-1 0.333 l +-1 -0.333 l +h +-1 0 m +-2 0.333 l +-2 -0.333 l +h +</path> +</symbol> +<symbol name="arrow/double(spx)"> +<path stroke="sym-stroke" fill="sym-stroke" pen="sym-pen"> +0 0 m +-1 0.333 l +-1 -0.333 l +h +-1 0 m +-2 0.333 l +-2 -0.333 l +h +</path> +</symbol> +<symbol name="arrow/mid-normal(spx)"> +<path stroke="sym-stroke" fill="sym-stroke" pen="sym-pen"> +0.5 0 m +-0.5 0.333 l +-0.5 -0.333 l +h +</path> +</symbol> +<symbol name="arrow/mid-fnormal(spx)"> +<path stroke="sym-stroke" fill="white" pen="sym-pen"> +0.5 0 m +-0.5 0.333 l +-0.5 -0.333 l +h +</path> +</symbol> +<symbol name="arrow/mid-pointed(spx)"> +<path stroke="sym-stroke" fill="sym-stroke" pen="sym-pen"> +0.5 0 m +-0.5 0.333 l +-0.3 0 l +-0.5 -0.333 l +h +</path> +</symbol> +<symbol name="arrow/mid-fpointed(spx)"> +<path stroke="sym-stroke" fill="white" pen="sym-pen"> +0.5 0 m +-0.5 0.333 l +-0.3 0 l +-0.5 -0.333 l +h +</path> +</symbol> +<symbol name="arrow/mid-double(spx)"> +<path stroke="sym-stroke" fill="sym-stroke" pen="sym-pen"> +1 0 m +0 0.333 l +0 -0.333 l +h +0 0 m +-1 0.333 l +-1 -0.333 l +h +</path> +</symbol> +<symbol name="arrow/mid-fdouble(spx)"> +<path stroke="sym-stroke" fill="white" pen="sym-pen"> +1 0 m +0 0.333 l +0 -0.333 l +h +0 0 m +-1 0.333 l +-1 -0.333 l +h +</path> +</symbol> +<anglesize name="22.5 deg" value="22.5"/> +<anglesize name="30 deg" value="30"/> +<anglesize name="45 deg" value="45"/> +<anglesize name="60 deg" value="60"/> +<anglesize name="90 deg" value="90"/> +<arrowsize name="large" value="10"/> +<arrowsize name="small" value="5"/> +<arrowsize name="tiny" value="3"/> +<color name="blue" value="0 0 1"/> +<color name="brown" value="0.647 0.165 0.165"/> +<color name="darkblue" value="0 0 0.545"/> +<color name="darkcyan" value="0 0.545 0.545"/> +<color name="darkgray" value="0.663"/> +<color name="darkgreen" value="0 0.392 0"/> +<color name="darkmagenta" value="0.545 0 0.545"/> +<color name="darkorange" value="1 0.549 0"/> +<color name="darkred" value="0.545 0 0"/> +<color name="gold" value="1 0.843 0"/> +<color name="gray" value="0.745"/> +<color name="green" value="0 1 0"/> +<color name="lightblue" value="0.678 0.847 0.902"/> +<color name="lightcyan" value="0.878 1 1"/> +<color name="lightgray" value="0.827"/> +<color name="lightgreen" value="0.565 0.933 0.565"/> +<color name="lightyellow" value="1 1 0.878"/> +<color name="navy" value="0 0 0.502"/> +<color name="orange" value="1 0.647 0"/> +<color name="pink" value="1 0.753 0.796"/> +<color name="purple" value="0.627 0.125 0.941"/> +<color name="red" value="1 0 0"/> +<color name="seagreen" value="0.18 0.545 0.341"/> +<color name="turquoise" value="0.251 0.878 0.816"/> +<color name="violet" value="0.933 0.51 0.933"/> +<color name="yellow" value="1 1 0"/> +<dashstyle name="dash dot dotted" value="[4 2 1 2 1 2] 0"/> +<dashstyle name="dash dotted" value="[4 2 1 2] 0"/> +<dashstyle name="dashed" value="[4] 0"/> +<dashstyle name="dotted" value="[1 3] 0"/> +<gridsize name="10 pts (~3.5 mm)" value="10"/> +<gridsize name="14 pts (~5 mm)" value="14"/> +<gridsize name="16 pts (~6 mm)" value="16"/> +<gridsize name="20 pts (~7 mm)" value="20"/> +<gridsize name="28 pts (~10 mm)" value="28"/> +<gridsize name="32 pts (~12 mm)" value="32"/> +<gridsize name="4 pts" value="4"/> +<gridsize name="56 pts (~20 mm)" value="56"/> +<gridsize name="8 pts (~3 mm)" value="8"/> +<opacity name="10%" value="0.1"/> +<opacity name="30%" value="0.3"/> +<opacity name="50%" value="0.5"/> +<opacity name="75%" value="0.75"/> +<pen name="fat" value="1.2"/> +<pen name="heavier" value="0.8"/> +<pen name="ultrafat" value="2"/> +<symbolsize name="large" value="5"/> +<symbolsize name="small" value="2"/> +<symbolsize name="tiny" value="1.1"/> +<textsize name="Huge" value="\Huge"/> +<textsize name="LARGE" value="\LARGE"/> +<textsize name="Large" value="\Large"/> +<textsize name="footnote" value="\footnotesize"/> +<textsize name="huge" value="\huge"/> +<textsize name="large" value="\large"/> +<textsize name="script" value="\scriptsize"/> +<textsize name="small" value="\small"/> +<textsize name="tiny" value="\tiny"/> +<textstyle name="center" begin="\begin{center}" end="\end{center}"/> +<textstyle name="item" begin="\begin{itemize}\item{}" end="\end{itemize}"/> +<textstyle name="itemize" begin="\begin{itemize}" end="\end{itemize}"/> +<tiling name="falling" angle="-60" step="4" width="1"/> +<tiling name="rising" angle="30" step="4" width="1"/> +</ipestyle> +<page> +<layer name="alpha"/> +<view layers="alpha" active="alpha"/> +<path layer="alpha" matrix="1 0 -0.0833333 1 -8 208" stroke="black" fill="1"> +96 624 m +92 612 +88 600 +92 588 +96 576 c +96 576 +100 588 +104 600 +100 612 +96 624 c +h +</path> +<path matrix="1 0 0.25 1 -216 208" stroke="black" fill="1"> +96 624 m +92 612 +88 600 +92 588 +96 576 c +96 576 +100 588 +104 600 +100 612 +96 624 c +h +</path> +<path matrix="1 0 0.166667 1 -164 208" stroke="black" fill="1"> +96 624 m +92 612 +88 600 +92 588 +96 576 c +96 576 +100 588 +104 600 +100 612 +96 624 c +h +</path> +<path matrix="1 0 0 1 -60 208" stroke="black" fill="1"> +96 624 m +92 612 +88 600 +92 588 +96 576 c +96 576 +100 588 +104 600 +100 612 +96 624 c +h +</path> +<path matrix="0.999999 -0.00001629 0.0833496 1 -112.01 208.002" stroke="black" fill="white"> +96 624 m +92 612 +88 600 +92 588 +96 576 c +96 576 +100 588 +104 600 +100 612 +96 624 c +h +</path> +<path matrix="1 0 0.0833333 1 -112 208" stroke="black" fill="white"> +92 620 m +4 0 0 -4 96 620 100 620 a +100 616 l +92 616 l +h +</path> +<path matrix="1 0 0.0833337 1 -100 208" stroke="black" fill="1"> +96 624 m +92 612 +88 600 +92 588 +96 576 c +96 576 +100 588 +104 600 +100 612 +96 624 c +h +</path> +<path matrix="1 0 -0.25 1 108 208" stroke="black" fill="1"> +96 624 m +92 612 +88 600 +92 588 +96 576 c +96 576 +100 588 +104 600 +100 612 +96 624 c +h +</path> +<path matrix="1 0 -0.00000003 1 -48 208" stroke="black" fill="1"> +96 624 m +92 612 +88 600 +92 588 +96 576 c +96 576 +100 588 +104 600 +100 612 +96 624 c +h +</path> +<path matrix="1 0 -0.166667 1 56 208" stroke="black" fill="1"> +96 624 m +92 612 +88 600 +92 588 +96 576 c +96 576 +100 588 +104 600 +100 612 +96 624 c +h +</path> +<path matrix="1 -0.00001629 -0.083317 1 3.9901 208.002" stroke="black" fill="1"> +96 624 m +92 612 +88 600 +92 588 +96 576 c +96 576 +100 588 +104 600 +100 612 +96 624 c +h +</path> +<path matrix="1 0 -0.0833333 1 4 208" stroke="black" fill="white"> +92 620 m +4 0 0 -4 96 620 100 620 a +100 616 l +92 616 l +h +</path> +</page> +</ipe> @@ -13,7 +13,7 @@ export class Court { console.log(this.name + " is currently " + status); } render() { - let type = this.status ? "" : 'class="outline secondary"'; + let type = this.status ? `class="button is-success"` : 'class="button is-dark"'; return `<button id=${"court_" + this.id} ${type}>${this.name}</button>`; } } diff --git a/game.mjs b/game.mjs new file mode 100644 index 0000000..7b5d4c9 --- /dev/null +++ b/game.mjs @@ -0,0 +1,47 @@ +class Team { + constructor(player_1, player_2) { + this.player_1 = player_1; + this.player_2 = player_2; + } + print() { + console.log(this.player_1 + " and " + this.player_2); + } + render() { + return `<td style="width: 23%;">${this.player_1}</td><td style="width: 23%;">${this.player_2}</td>`; + } +} + +class Game { + constructor(court, team_1, team_2) { + this.court_id = court.id; + this.court_status = court.status; + 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; + 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>`; + } +} + +export class Round { + constructor(number, courts) { + this.number = number; + this.courts = courts; + } + render() { + let output = `<h2 class="subtitle"> Round ${this.number} </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>`; + let team = new Team("---", "---"); + for (const court of this.courts ) { + let game = new Game(court, team, team); + output += game.render() + } + output += "</table>"; + return output; + } +}
\ No newline at end of file diff --git a/icon.svg b/icon.svg new file mode 100644 index 0000000..d2700a4 --- /dev/null +++ b/icon.svg @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="50" viewBox="0 0 40 50"> +<path fill-rule="evenodd" fill="rgb(100%, 100%, 100%)" fill-opacity="1" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="round" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 36 832 C 33 820 31.5 814 32 808 C 32.5 802 35 796 40 784 C 40 784 41.5 790 42.75 795 C 44 800 45 804 44.25 809 C 43.5 814 41 820 36 832 Z M 36 832 " transform="matrix(1, 0, 0, -1, -22, 833)"/> +<path fill-rule="evenodd" fill="rgb(100%, 100%, 100%)" fill-opacity="1" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="round" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 36 832 C 29 820 25.5 814 24 808 C 22.5 802 23 796 24 784 C 24 784 27.5 790 30.417969 795 C 33.332031 800 35.667969 804 36.582031 809 C 37.5 814 37 820 36 832 Z M 36 832 " transform="matrix(1, 0, 0, -1, -22, 833)"/> +<path fill-rule="evenodd" fill="rgb(100%, 100%, 100%)" fill-opacity="1" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="round" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 36 832 C 30 820 27 814 26 808 C 25 802 26 796 28 784 C 28 784 31 790 33.5 795 C 36 800 38 804 38.5 809 C 39 814 38 820 36 832 Z M 36 832 " transform="matrix(1, 0, 0, -1, -22, 833)"/> +<path fill-rule="evenodd" fill="rgb(100%, 100%, 100%)" fill-opacity="1" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="round" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 36 832 C 32 820 30 814 30 808 C 30 802 32 796 36 784 C 36 784 38 790 39.667969 795 C 41.332031 800 42.667969 804 42.332031 809 C 42 814 40 820 36 832 Z M 36 832 " transform="matrix(1, 0, 0, -1, -22, 833)"/> +<path fill-rule="evenodd" fill="rgb(100%, 100%, 100%)" fill-opacity="1" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="round" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 36 832 C 31 820 28.5 814 28 808 C 27.5 802 29 796 32 784 C 32 784 34.5 790 36.582031 795 C 38.667969 800 40.332031 804 40.417969 809 C 40.5 814 39 820 36 832 Z M 36 832 " transform="matrix(1, 0, 0, -1, -22, 833)"/> +<path fill-rule="evenodd" fill="rgb(100%, 100%, 100%)" fill-opacity="1" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="round" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 31.667969 828 C 32.109375 833.332031 40.109375 833.332031 39.667969 828 L 39.332031 824 L 31.332031 824 Z M 31.667969 828 " transform="matrix(1, 0, 0, -1, -22, 833)"/> +<path fill-rule="evenodd" fill="rgb(100%, 100%, 100%)" fill-opacity="1" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="round" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 48 832 C 43 820 40.5 814 40 808 C 39.5 802 41 796 44 784 C 44 784 46.5 790 48.582031 795 C 50.667969 800 52.332031 804 52.417969 809 C 52.5 814 51 820 48 832 Z M 48 832 " transform="matrix(1, 0, 0, -1, -22, 833)"/> +<path fill-rule="evenodd" fill="rgb(100%, 100%, 100%)" fill-opacity="1" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="round" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 48 832 C 47 820 46.5 814 48 808 C 49.5 802 53 796 60 784 C 60 784 60.5 790 60.917969 795 C 61.332031 800 61.667969 804 60.082031 809 C 58.5 814 55 820 48 832 Z M 48 832 " transform="matrix(1, 0, 0, -1, -22, 833)"/> +<path fill-rule="evenodd" fill="rgb(100%, 100%, 100%)" fill-opacity="1" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="round" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 48 832 C 44 820 42 814 42 808 C 42 802 44 796 48 784 C 48 784 50 790 51.667969 795 C 53.332031 800 54.667969 804 54.332031 809 C 54 814 52 820 48 832 Z M 48 832 " transform="matrix(1, 0, 0, -1, -22, 833)"/> +<path fill-rule="evenodd" fill="rgb(100%, 100%, 100%)" fill-opacity="1" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="round" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 48 832 C 46 820 45 814 46 808 C 47 802 50 796 56 784 C 56 784 57 790 57.832031 795 C 58.667969 800 59.332031 804 58.167969 809 C 57 814 54 820 48 832 Z M 48 832 " transform="matrix(1, 0, 0, -1, -22, 833)"/> +<path fill-rule="evenodd" fill="rgb(100%, 100%, 100%)" fill-opacity="1" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="round" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 48 832 C 45 820 43.5 814 44 808 C 44.5 802 47 796 52 784 C 52 784 53.5 790 54.75 795 C 56 800 57 804 56.25 809 C 55.5 814 53 820 48 832 Z M 48 832 " transform="matrix(1, 0, 0, -1, -22, 833)"/> +<path fill-rule="evenodd" fill="rgb(100%, 100%, 100%)" fill-opacity="1" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="round" stroke="rgb(0%, 0%, 0%)" stroke-opacity="1" stroke-miterlimit="10" d="M 44.332031 828 C 43.890625 833.332031 51.890625 833.332031 52.332031 828 L 52.667969 824 L 44.667969 824 Z M 44.332031 828 " transform="matrix(1, 0, 0, -1, -22, 833)"/> +</svg> @@ -7,4 +7,8 @@ .button-grid button { padding: 10px; text-align: center; +} +#timer-display{ + text-align: center; + width: fit-content; }
\ No newline at end of file @@ -1,34 +1,69 @@ <!DOCTYPE html> -<html lang="en"> +<html lang="en" > <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/@picocss/pico@2/css/pico.min.css"> + <script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script> + <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> - <main class="container"> - <nav> - <ul> - <li><strong>Match Up</strong></li> - </ul> - <ul> - <!-- <li><a href="/players">Players</a></li> - <li><a href="#">Guests</a></li> - <li><a href="#">Admin</a></li> --> - </ul> - </nav> - <div> - <h2>Courts</h2> - <div id="court_list" class="button-grid"></div> + <section class="section"> + <div class="container"> + <div class="columns"> + <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 has-addons"> + <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> + </div> + </div> + </div> </div> - <div id="regulars"> - <h2>Regulars</h2> - <div id="regular_list" class="button-grid"></div> - </div> - </main> - <script src="player.mjs" type="module"></script> + <section class="section"> + <h2 class="title">Games</h1> + <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> + </section> + <section class="section"> + <h2 class="title">Courts</h1> + <div id="court_list" class="button-grid"></div> + </section> + <section class="section"> + <h2 class="title">Regulars</h1> + <div id="regular_list" class="button-grid"></div> + </section> + <section class="section"> + <h2 class="title">Player Update</h3> + <div id="file-js" class="file is-danger has-name is-boxed"> + <label class="file-label"> + <input class="file-input" type="file" name="resume" /> + <span class="file-cta"> + <span class="file-icon"> + <i class="fas fa-cloud-upload-alt"></i> + </span> + <span class="file-label"> Update players... </span> + </span> + <span class="file-name"> No file selected... </span> + </label> + </div> + </section> + </div> + </section> <script src="index.js" type="module"></script> + <script src="timer.js"></script> </body> </html>
\ No newline at end of file @@ -1,5 +1,7 @@ +import { Round } from "./game.mjs"; import { generateCourts } from "./court.mjs"; import { generatePlayers } from "./player.mjs"; +import { addToggleBehaviour } from "./utils.mjs"; // Court handling let courts = generateCourts(); @@ -8,17 +10,21 @@ addToggleBehaviour(courts, "court_"); // Regulars handling let regulars = generatePlayers(); addToggleBehaviour(regulars, "regular_"); - -function addToggleBehaviour(list, description) { - let renderedHTML = list.map((i) => {return i.render();}).join(''); - let listId = description + 'list'; - document.getElementById(listId).innerHTML = renderedHTML; - for (let index = 0; index < list.length; ++index) { - const p = document.getElementById(description + index); - p.addEventListener("click", () => { - list[index].toggle(); - p.classList.toggle('secondary'); - p.classList.toggle('outline'); - }); +const fileInput = document.querySelector("#file-js input[type=file]"); + if (fileInput !== null) { + fileInput.onchange = () => { + if (fileInput.files.length > 0) { + const fileName = document.querySelector("#file-js .file-name"); + fileName.textContent = fileInput.files[0].name; + console.log(fileInput.files[0]); + } } -}
\ No newline at end of file +}; + +// Game handling +let games = new Round(0, courts); +let renderedHTML = games.render(); +document.getElementById("game_list").innerHTML = renderedHTML; +document.getElementById("propose").addEventListener("click", () => { + console.log("Propose new games!"); +})
\ No newline at end of file @@ -14,7 +14,7 @@ export class Player { console.log(this.name + " has a level of " + this.level + " and is currently " + status); } render() { - let type = this.status ? "" : 'class="outline secondary"'; + let type = this.status ? `class="button is-success"` : 'class="button is-danger"'; return `<button id=${"regular_" + this.id} ${type}>${this.name}</button>`; } } diff --git a/timer.js b/timer.js new file mode 100644 index 0000000..25d4610 --- /dev/null +++ b/timer.js @@ -0,0 +1,91 @@ +let minsPerRound = Number(sessionStorage.getItem("minsPerRound")) || 12; +let timerRunningFlag = Number(sessionStorage.getItem("timerRunningFlag")) || 0; +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}`; +} + +function setSessionData() { + sessionStorage.setItem("deadline", deadline); + sessionStorage.setItem("minsPerRound", minsPerRound); + sessionStorage.setItem("timerRunningFlag", timerRunningFlag); +} + +function resetTimer() { + 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); +} + +function refreshTimer() { + const now = new Date().getTime(); + const millisecondsToDeadline = deadline - now; + if (millisecondsToDeadline > 0) { + updateTimer(millisecondsToDeadline); + return; + } + resetTimer(); + const notification = new Notyf({ + duration: 30 * 1000, + position: {x: 'center', y: 'top'}, + types: [{ + type: 'success', + background: 'indianred', + duration: 1000 * 1000, + dismissible: true + }] + }); + notification.success("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); +} + +window.onload = function () { + if (timerRunningFlag) + startTimer(0); + else resetTimer(); + + document.getElementById("timer-start").addEventListener('click', ()=> { + if (timerRunningFlag != 0) return; + startTimer(1); + }); + + document.getElementById("timer-stop").addEventListener('click', ()=>{ + 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 diff --git a/utils.mjs b/utils.mjs new file mode 100644 index 0000000..e639916 --- /dev/null +++ b/utils.mjs @@ -0,0 +1,13 @@ +export function addToggleBehaviour(list, description) { + let renderedHTML = list.map((i) => {return i.render();}).join(''); + let listId = description + 'list'; + document.getElementById(listId).innerHTML = renderedHTML; + for (let index = 0; index < list.length; ++index) { + const p = document.getElementById(description + index); + p.addEventListener("click", () => { + list[index].toggle(); + p.classList.toggle('is-success'); + p.classList.toggle('is-danger'); + }); + } +}
\ No newline at end of file |
