Support displaying match games (#96)

* Use Popover API to display games

* Add title and refactor

* Update exported types

* Allow a Firefox polyfill

* Update exported interfaces

* Fix any previous selections

.editorconfig

@@ -11,5 +11,5 @@ charset = utf-8
 trim_trailing_whitespace = false
 insert_final_newline = true
 
-[*.yml]
+[*.{yml,scss}]
 indent_size = 2

src/dom.ts

@@ -1,6 +1,6 @@
-import { Match, ParticipantResult, FinalType, GroupType, Id } from 'brackets-model';
+import { Match, ParticipantResult, FinalType, GroupType, Id, MatchGame } from 'brackets-model';
 import { Connection, Placement, Ranking, RankingItem } from './types';
-import { rankingHeader } from './helpers';
+import { isMatchGame, rankingHeader } from './helpers';
 import { t } from './lang';
 
 /**
@@ -14,6 +14,17 @@ export function createTitle(title: string): HTMLElement {
     return h1;
 }
 
+/**
+ * Creates the title of a popover.
+ *
+ * @param title The title to set.
+ */
+export function createPopoverTitle(title: string): HTMLElement {
+    const h4 = document.createElement('h4');
+    h4.innerText = title;
+    return h4;
+}
+
 /**
  * Creates a container which contains a round-robin stage.
  * 
@@ -104,38 +115,49 @@ export function createRoundContainer(roundId: Id, title: string): HTMLElement {
 /**
  * Creates a container which contains a match.
  *
- * @param matchId ID of the match.
- * @param status Status of the match.
+ * @param match A match or a match game.
  */
-export function createMatchContainer(matchId?: Id, status?: number): HTMLElement {
-    const match = document.createElement('div');
-    match.classList.add('match');
-    matchId !== undefined && match.setAttribute('data-match-id', matchId.toString());
-    status !== undefined && match.setAttribute('data-match-status', status.toString());
-    return match;
+export function createMatchContainer(match?: Match | MatchGame): HTMLElement {
+    const div = document.createElement('div');
+    div.classList.add('match');
+
+    if (match) {
+        if (isMatchGame(match))
+            div.setAttribute('data-match-game-id', match.id.toString());
+        else
+            div.setAttribute('data-match-id', match.id.toString());
+
+        div.setAttribute('data-match-status', match.status.toString());
+    }
+
+    return div;
 }
 
 /**
  * Creates a container which contains the label of a match.
  *
  * @param label The label of the match.
  * @param status The status to set as tooltip.
+ * @param onClick Called when the label is clicked.
  */
-export function createMatchLabel(label: string, status: string): HTMLElement {
+export function createMatchLabel(label: string | undefined, status: string, onClick?: (event: MouseEvent) => void): HTMLElement {
     const span = document.createElement('span');
-    span.innerText = label;
+    span.innerText = label || '';
     span.title = status;
+    onClick && span.addEventListener('click', onClick);
     return span;
 }
 
 /**
  * Creates a container which contains the child count label of a match.
  *
  * @param label The child count label of the match.
+ * @param onClick Called when the label is clicked.
  */
-export function createChildCountLabel(label: string): HTMLElement {
+export function createChildCountLabel(label: string, onClick?: (event: MouseEvent) => void): HTMLElement {
     const span = document.createElement('span');
     span.innerText = label;
+    onClick && span.addEventListener('click', onClick);
     return span;
 }
 

src/helpers.ts

@@ -1,5 +1,5 @@
-import { Match, ParticipantResult, GroupType } from 'brackets-model';
-import { RankingHeader, Ranking, RankingFormula, RankingItem, RankingMap, Side } from './types';
+import { Match, ParticipantResult, GroupType, MatchGame } from 'brackets-model';
+import { RankingHeader, Ranking, RankingFormula, RankingItem, RankingMap, Side, MatchWithMetadata } from './types';
 import { t } from './lang';
 
 /**
@@ -73,8 +73,8 @@ export function findRoot(selector?: string): HTMLElement {
  * @param matches The list of first round matches.
  * @param nextMatches The list of second round matches.
  */
-export function completeWithBlankMatches(bracketType: GroupType, matches: Match[], nextMatches?: Match[]): {
-    matches: (Match | null)[],
+export function completeWithBlankMatches(bracketType: GroupType, matches: MatchWithMetadata[], nextMatches?: MatchWithMetadata[]): {
+    matches: (MatchWithMetadata | null)[],
     fromToornament: boolean,
 } {
     if (!nextMatches)
@@ -231,3 +231,22 @@ function createRanking(rankingMap: RankingMap): RankingItem[] {
 
     return ranking;
 }
+
+/**
+ * Indicates whether the input is a match.
+ * 
+ * @param input A match or a match game.
+ */
+export function isMatch(input: Match | MatchGame): input is Match {
+    return 'child_count' in input;
+}
+
+
+/**
+ * Indicates whether the input is a match game.
+ * 
+ * @param input A match or a match game.
+ */
+export function isMatchGame(input: Match | MatchGame): input is MatchGame {
+    return !isMatch(input);
+}

src/i18n/en/translation.json

@@ -8,6 +8,7 @@
         "grand-final": "Winner of $t(abbreviations.loser-bracket) Final"
     },
     "match-label": {
+        "default": "Match {{matchNumber}}",
         "winner-bracket": "$t(abbreviations.winner-bracket)",
         "loser-bracket": "$t(abbreviations.loser-bracket)",
         "standard-bracket": "$t(abbreviations.match)",
@@ -18,7 +19,8 @@
         "double-elimination-final": "{{matchPrefix}} Final",
         "consolation-final": "Consolation Final",
         "grand-final-single": "Grand Final",
-        "grand-final": "$t(abbreviations.grand-final) Round {{roundNumber}}"
+        "grand-final": "$t(abbreviations.grand-final) Round {{roundNumber}}",
+        "match-game": "Game {{gameNumber}}"
     },
     "match-status": {
         "locked": "Locked",