├── .gitignore
├── dash.svg
├── invalid.svg
├── LICENSE
├── index.html
├── styles.css
├── README.md
├── koodiklinikka-dark.svg
├── app.js
└── tests
└── mock-api.json
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode/
--------------------------------------------------------------------------------
/dash.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/invalid.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
24 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright 2023 Juha-Matti Santala
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 |
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 |
7 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | NHL Bracket
8 |
9 |
10 |
11 |
NHL Bracket Leaderboard 2023
12 |
13 |
18 |
19 |
Haetaan dataa...
20 |
21 |
22 |
23 |
24 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | }
6 |
7 | h1 img {
8 | margin-right: 1em;
9 | }
10 | table {
11 | max-width: 1600px;
12 | width: 100%;
13 | border-collapse: collapse;
14 | margin: auto;
15 | }
16 |
17 | thead {
18 | text-align: left;
19 | }
20 |
21 | tbody > tr:nth-child(2n) {
22 | background: #f5f5f5;
23 | }
24 |
25 | img {
26 | max-width: 40px;
27 | }
28 |
29 | td.correct {
30 | background: green;
31 | }
32 |
33 | td.incorrect {
34 | background: rgb(106, 3, 3);
35 | }
36 |
37 | th {
38 | padding-right: 5px;
39 | }
40 |
41 | th.series {
42 | min-width: 80px;
43 | }
44 |
45 | td {
46 | width: 7%;
47 | }
48 |
49 | td.wide {
50 | width: 15%;
51 | }
52 |
53 | td.narrow {
54 | width: 5%;
55 | }
56 |
57 | td.logo {
58 | text-align: center;
59 | }
60 |
61 | div.series {
62 | display: flex;
63 | align-items: center;
64 | justify-content: center;
65 | }
66 | span {
67 | color: rgb(199, 199, 199);
68 | }
69 |
70 | span.correct-games {
71 | font-weight: 900;
72 | color: white;
73 | }
74 |
75 | div.inner {
76 | display: flex;
77 | align-items: center;
78 | justify-content: center;
79 | }
80 |
81 | #last-updated {
82 | max-width: 100ch;
83 | margin: auto;
84 | margin-top: 2em;
85 | }
86 | footer {
87 | max-width: 100ch;
88 | margin: auto;
89 | }
90 |
91 | #loading {
92 | text-align: center;
93 | }
94 |
95 | input[type="radio"] {
96 | margin-right: 2em;
97 | }
98 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # KK-Bracket
2 |
3 | Käy katsomassa ajossa: [https://kk-bracket.netlify.app](https://kk-bracket.netlify.app)
4 |
5 | Nopia custom-UI NHL:n Playoff Bracket -skabaan [Koodiklinikan](https://koodiklinikka.fi)\* liigalle.
6 |
7 | Tehty, koska NHL:n oma bracket-webbisivu näyttää pienen laatikon keskellä näyttöä eikä oo helppoa hakea aina sarjojen päätyttyä tilanteita.
8 |
9 | ## Saako tän omalle liigalle myös?
10 |
11 | No tokihan! Kopsaa koodi ja navigoi `app.js`. Vaihda `LEAGUE_ID`:ksi oman liigasi NHL Bracket Challenge ID ja `LEAGUE_DISPLAY_NAME`:ksi oman liigasi nimi. Ole hyvä!
12 |
13 | Arvostan jos säilytät footerissa linkitykset tähän repositoryyn ja Juhiksen sivuille. Pakko ei kuitenkaan lisenssin puitteissa ole.
14 |
15 | ## Mitä jos tää lakkaa toimimasta?
16 |
17 | On mahdollista, että NHL sulkee nuo rajapinnat, jolloin nämä bracket-työkalut hajoaa samalla. Jos näin käy, toivottavasti NHL kehittää hyvät työkalut tilalle.
18 |
19 | ## Dev-juttui
20 |
21 | Vanilla-JS:ää, HTML:ää ja CSS:ää ilman mitään krumeluureja.
22 |
23 | Käyttää NHL Bracket Challengen API-rajapintoja, jotka näytti olevan auki.
24 |
25 | ## Contribuoi
26 |
27 | Saa tehä pullareita jotka lisää/korjaa/parantelee. Erityisesti jos teet siitä nätimmän kuin se on nyt.
28 |
29 | ## Lokaalia testausta
30 |
31 | Jos tahtoo testailla lokaalisti eri tiloja ja tilanteita, `tests/`-kansiosta löytyy mock API entryille ja sarjojen tilanteille.
32 |
33 | Ajamalla `npx json-server tests/mock-api.json`, saa käyttöönsä rajapinnan `http://localhost:3000`, jolla endpointit `/picks` ja `/results`. Korvaa `app.js`:ssä `ENTRIES_URL`:ksi `http://localhost:3000/picks` ja `SERIES_URL`:ksi `http://localhost:3000/results`.
34 |
35 | Näin voi kokeilla eri skenaarioita vaihtamalla mock-api.jsonin arvoja. Muista käynnistää `npx json-server tests/mock-api.json` uusiksi muutosten välillä.
36 |
37 | ## Muut huomiot
38 |
39 | Kiitos lehtulle APIen kaivamisesta!
40 |
41 | \* Koodiklinikka on vallan mukava suomalainen ohjelmistokehittäjien ja siitä kiinnostuneiden yhteisö. Meitä on reilu 5000 Slackissa ja #penkkiurheilu-kanavalla seurataan lätkää suurella intohimolla.
42 |
--------------------------------------------------------------------------------
/koodiklinikka-dark.svg:
--------------------------------------------------------------------------------
1 |
39 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | /* A general note: this file uses a lot of == instead of === for a purpose.
2 | * The API is very inconsistent in how it stores information:
3 | * sometimes its numbers and sometimes numeric strings.
4 | *
5 | * Don't blindly refactor them to === or you'll make a mess.
6 | * A better approach would be to actually map what types are used and where.
7 | */
8 |
9 | /* CONFIGURATION */
10 | // If you want to configure this to your league, change the LEAGUE_ID to match
11 | // your league id in NHL Bracket Challenge
12 | // and LEAGUE_DISPLAY_NAME to your league's name for the heading
13 | const LEAGUE_ID = 19868;
14 | const LEAGUE_DISPLAY_NAME = "Apocalypsen";
15 | /* END OF CONFIGURATION */
16 |
17 | const ENTRIES_URL = `https://low6-nhl-brackets-prod.azurewebsites.net/leagues/${LEAGUE_ID}/leaderboard?offset=0&limit=50`;
18 | const SERIES_URL = "https://low6-nhl-brackets-prod.azurewebsites.net/game";
19 |
20 | let ENTRIES_DATA = null;
21 | let SERIES_DATA = null;
22 |
23 | let title = document.querySelector("title");
24 | title.textContent = `${LEAGUE_DISPLAY_NAME} ${title.textContent}`;
25 |
26 | let h1 = document.querySelector("h1");
27 | h1.textContent = `${LEAGUE_DISPLAY_NAME} ${h1.textContent}`;
28 |
29 | /**
30 | * Checks if user's pick for a given series is correct
31 | * @param {object} entry User's entry
32 | * @param {object} game Game result
33 | * @returns user's pick matches the result of game
34 | */
35 | function isCorrectPick(entry, game) {
36 | // User picks are strings, winner_id is number. Lovely.
37 | return parseInt(entry[`match_${game.id}_pick`]) === game.winner_id;
38 | }
39 |
40 | /**
41 | * Checks if user has guessed the right amount of games for a series
42 | *
43 | * @param {object} entry
44 | * @param {object} game
45 | * @returns
46 | */
47 | function isCorrectAmountGames(entry, game) {
48 | // If series isn't finished yet, early return false
49 | if (!game.is_scored) {
50 | return false;
51 | }
52 |
53 | // Amount of wins are strings. Lovely.
54 | const t1_wins = parseInt(game.team_1_wins);
55 | const t2_wins = parseInt(game.team_2_wins);
56 | const seriesLength = t1_wins + t2_wins;
57 | // Amount of wins is a string. Lovely.
58 | const howManyGames = parseInt(entry[`match_${game.id}_match_played`]);
59 |
60 | return seriesLength === howManyGames;
61 | }
62 |
63 | /**
64 | * Given a list of series, checks if they have all finished
65 | * @param {Array} series
66 | * @returns all series have finished
67 | */
68 | function hasFinished(series) {
69 | return series.every((serie) => serie.is_scored);
70 | }
71 |
72 | /**
73 | * Adds dynamic table header cells for series matchups
74 | * in form of "[homeLogo] - [awayLogo]"
75 | *
76 | * @param {Array} games An array of currently displayed series
77 | * @param {Array} teams An array of teams in the playoffs
78 | */
79 | function createHeaders(games, teams) {
80 | const tr = document.querySelector("thead > tr");
81 | games.forEach((game) => {
82 | const th = document.createElement("th");
83 | const div = document.createElement("div");
84 | div.classList.add("series");
85 | th.appendChild(div);
86 | th.classList.add("series");
87 | tr.appendChild(th);
88 |
89 | const homeLogo = document.createElement("img");
90 | homeLogo.alt =
91 | teams.find((team) => team.team_id == game.team_1_id)?.display_name || "?";
92 | homeLogo.src = `https://www-league.nhlstatic.com/images/logos/teams-current-primary-light/${game.team_1_id}.svg`;
93 |
94 | const awayLogo = document.createElement("img");
95 | awayLogo.alt =
96 | teams.find((team) => team.team_id == game.team_2_id)?.display_name || "?";
97 | awayLogo.src = `https://www-league.nhlstatic.com/images/logos/teams-current-primary-light/${game.team_2_id}.svg`;
98 |
99 | const separator = document.createElement("span");
100 | separator.textContent = " - ";
101 | div.appendChild(homeLogo);
102 | div.appendChild(separator);
103 | div.appendChild(awayLogo);
104 | });
105 | }
106 |
107 | /**
108 | * Creates a row based on user's information:
109 | * their rank, name, champion pick, points, possible max points
110 | * and each pick.
111 | *
112 | * If a series has already finished, also show if the pick was correct/incorrect
113 | * and how many games user had guessed
114 | *
115 | * @param {object} entry
116 | * @param {HTMLTableRowElement} tr
117 | * @param {Array} games
118 | * @param {Array} teams
119 | */
120 | function createRow(entry, tr, games, teams) {
121 | const { rank, entry_name, points, possible_points, champion_id } = entry;
122 |
123 | // Create columns
124 | let rankTd = document.createElement("td");
125 | let nameTd = document.createElement("td");
126 | let pointsTd = document.createElement("td");
127 | let possiblePointsTd = document.createElement("td");
128 | let championTd = document.createElement("td");
129 |
130 | tr.appendChild(rankTd);
131 | tr.appendChild(nameTd);
132 | tr.appendChild(championTd);
133 | tr.appendChild(pointsTd);
134 | tr.appendChild(possiblePointsTd);
135 |
136 | rankTd.innerHTML = rank;
137 |
138 | nameTd.innerHTML = entry_name;
139 | nameTd.classList.add("wide");
140 |
141 | let championLogo = document.createElement("img");
142 | championLogo.src = `https://www-league.nhlstatic.com/images/logos/teams-current-primary-light/${champion_id}.svg`;
143 | championLogo.alt = teams.find(
144 | (team) => team.team_id === parseInt(champion_id)
145 | ).display_name;
146 | championTd.appendChild(championLogo);
147 | championTd.classList.add("narrow");
148 | championTd.classList.add("logo");
149 |
150 | pointsTd.innerHTML = points;
151 |
152 | possiblePointsTd.innerHTML = possible_points;
153 |
154 | games.forEach((game) => {
155 | let gameTd = document.createElement("td");
156 | let inner = document.createElement("div");
157 | gameTd.appendChild(inner);
158 | inner.classList.add("inner");
159 | let selectedPick = document.createElement("img");
160 | inner.appendChild(selectedPick);
161 |
162 | gameTd.classList.add("narrow");
163 | gameTd.classList.add("logo");
164 |
165 | const gameId = game.id;
166 | const pickKey = `match_${gameId}_pick`;
167 | const userPick = entry[pickKey];
168 |
169 | // If user's pick is not in the running anymore
170 | if (userPick != game.team_1_id && userPick != game.team_2_id) {
171 | selectedPick.src = `dash.svg`;
172 | selectedPick.alt = "Pick no longer in play";
173 | } else {
174 | selectedPick.src = `https://www-league.nhlstatic.com/images/logos/teams-current-primary-light/${userPick}.svg`;
175 | selectedPick.alt = teams.find(
176 | (team) => team.team_id === parseInt(userPick)
177 | ).display_name;
178 | }
179 |
180 | // If the series is finished, show which picks were right
181 | // and how many games participants guessed the series would take
182 | if (game.winner_id !== null) {
183 | const correctPick = isCorrectPick(entry, game);
184 |
185 | // Only first round has picks for how many games series takes.
186 | if (game.round_sequence === 1) {
187 | const span = document.createElement("span");
188 | span.textContent = `(in ${entry[`match_${game.id}_match_played`]})`;
189 | inner.appendChild(span);
190 | if (game.round_sequence === 1 && isCorrectAmountGames(entry, game)) {
191 | span.classList.add("correct-games");
192 | }
193 | }
194 |
195 | if (correctPick) {
196 | gameTd.classList.add("correct");
197 | } else {
198 | gameTd.classList.add("incorrect");
199 | }
200 | }
201 | tr.appendChild(gameTd);
202 | });
203 | }
204 |
205 | const fieldset = document.querySelector("fieldset");
206 |
207 | function clearTable() {
208 | clearHeaders();
209 | document.querySelector("tbody").innerHTML = "";
210 | }
211 |
212 | function clearHeaders() {
213 | const thead = document.querySelector("thead");
214 | thead.innerHTML = `
215 |