cotuongpc1: add remaining pairs

src/cotuongpc1/CoTuongPc1.js

@@ -3,12 +3,10 @@ import {RoundsAndMatches} from './rounds-and-matches/RoundsAndMatches';
 import {RankingTable} from './ranking-table/RankingTable';
 import players from './data/players.json';
 import matches from './data/matches.json';
-import quitPlayerIds from './data/quitPlayerIds';
 import {Rules} from './rules/Rules';
-import {createMatchId, datePlus, roundNameAt} from './utils';
+import {createMatchId, datePlus, getMatchResult, roundNameAt} from './utils';
 import {Banner} from './banner/Banner';
-
-const quitPlayerIdSet = new Set(quitPlayerIds);
+import {Matches} from './matches/Matches';
 
 export let CoTuongPc1 = () => {
     // Matches
@@ -33,6 +31,7 @@ export let CoTuongPc1 = () => {
     // Rounds
     let rounds = [];
     let matchSchedules = {};
+    let remainingPairs = [];
 
     let P = players.length;
     let R = P % 2 === 0 ? P - 1 : P;
@@ -71,10 +70,17 @@ export let CoTuongPc1 = () => {
             let matchSchedule = {
                 roundIndex: r,
                 scheduledDate: datePlus(startDate, i),
-                firstPlayerId: firstPlayer.id,
-                secondPlayerId: secondPlayer.id
+                firstPlayer,
+                secondPlayer
             };
             matchSchedules[matchId] = matchSchedule;
+
+            if (firstPlayer.active &&
+                secondPlayer.active &&
+                getMatchResult(matchesById[matchId]) === -1
+            ) {
+                remainingPairs.push({firstPlayer, secondPlayer});
+            }
         }
         line1.splice(1, 0, line2.shift());
         line2.push(line1.pop());
@@ -97,17 +103,21 @@ export let CoTuongPc1 = () => {
                 <h2>Bảng xếp hạng</h2>
                 <RankingTable
                     players={players}
-                    quitPlayerIdSet={quitPlayerIdSet}
                     matches={matches}
                     matchesById={matchesById}
                     matchSchedules={matchSchedules}
                 />
+                <h2>Cặp đấu còn lại</h2>
+                <Matches
+                    pairs={remainingPairs}
+                    matchesById={matchesById}
+                    latestMatchDate={latestMatchDate}
+                />
                 <h2>Các vòng đấu</h2>
                 <RoundsAndMatches
                     rounds={rounds}
                     matchesById={matchesById}
                     latestMatchDate={latestMatchDate}
-                    quitPlayerIdSet={quitPlayerIdSet}
                 />
             </main>
             <hr/>

src/cotuongpc1/data/players.json

@@ -2,61 +2,73 @@
     {
         "id": "ngocnguyen",
         "name": "Nguyễn Hữu Ngọc",
-        "group": "C"
+        "group": "C",
+        "active": true
     },
     {
         "id": "haicao",
         "name": "Cao Bá Hải",
-        "group": "B"
+        "group": "B",
+        "active": true
     },
     {
         "id": "tungdai",
         "name": "Tùng Đại",
-        "group": "A"
+        "group": "A",
+        "active": true
     },
     {
         "id": "quanvu",
         "name": "Vũ Hồng Quân",
-        "group": "C"
+        "group": "C",
+        "active": true
     },
     {
         "id": "tuanquach",
         "name": "Quách Văn Tuấn",
-        "group": "B"
+        "group": "B",
+        "active": true
     },
     {
         "id": "thinhdoan",
         "name": "Đoàn Quang Thịnh",
-        "group": "B"
+        "group": "B",
+        "active": true
     },
     {
         "id": "quyettran",
         "name": "Trần Văn Quyết",
-        "group": "B"
+        "group": "B",
+        "active": true
     },
     {
         "id": "chuyennguyen",
         "name": "Nguyễn Ngọc Chuyền",
-        "group": "C"
+        "group": "C",
+        "active": true
     },
     {
         "id": "tungnguyen",
         "name": "Tùng Nguyễn",
-        "group": "C"
+        "group": "C",
+        "active": true
     },
     {
         "id": "thanhtran",
         "name": "Trần Ngọc Thanh",
-        "group": "C"
+        "group": "C",
+        "active": false
     },
     {
         "id": "thangle",
         "name": "Lê Duy Thắng",
-        "group": "D"
+        "group": "D",
+        "active": false
     },
     {
         "id": "phongnguyen",
         "name": "Nguyễn Tiến Phong",
-        "group": "D"
+        "group": "D",
+        "active": true
     }
 ]

src/cotuongpc1/matches/Matches.js

@@ -0,0 +1,74 @@
+import './Matches.less';
+import {Player} from '../player/Player';
+import {TableResponsive} from '../table-responsive/TableResponsive';
+import {reformatDate, getMatchResult} from '../utils';
+
+const resultLabels = {
+    '-2': <>&mdash; x &mdash;</>,
+    '-1': <>&mdash; <span><sup>V</sup>/<sub>S</sub></span> &mdash;</>,
+    '0': <>thua</>,
+    '1': <>hòa</>,
+    '2': <>thắng</>,
+};
+
+export let Matches = ({ pairs, matchesById, latestMatchDate }) => {
+    return (
+        <div class="Matches">
+            <TableResponsive>
+                <table>
+                    {pairs.map(({firstPlayer, secondPlayer}) => {
+                        let matchId = `${firstPlayer.id}-${secondPlayer.id}`;
+                        let matchOrEmpty = matchesById[matchId];
+                        let result = getMatchResult(matchOrEmpty);
+                        if (!(firstPlayer.active && secondPlayer.active)) {
+                            result = -2;
+                        }
+                        let resultLabel = resultLabels[result];
+                        let date;
+                        let resultDetails;
+                        if (matchOrEmpty != null) {
+                            date = matchOrEmpty.date;
+                            let gameResults = [];
+                            let counts = {};
+                            for (let game of matchOrEmpty.games) {
+                                if (counts[game.result] != null) {
+                                    counts[game.result]++;
+                                } else {
+                                    counts[game.result] = 1;
+                                    gameResults.push(game.result);
+                                }
+                            }
+                            resultDetails = (
+                                <>{gameResults.map((gameResult) => (
+                                    <> {counts[gameResult]} {resultLabels[gameResult]} </>
+                                ))}</>
+                            );
+                        }
+
+                        return (
+                            <tr key={matchId} class={date === latestMatchDate ? 'recent-match' : ''}>
+                                <td align="right">
+                                    <Player player={firstPlayer} align="right" />
+                                </td>
+                                <td align="center">
+                                    <div class="match-info">
+                                        {date && (
+                                            <div class="date">{reformatDate(date)}</div>
+                                        )}
+                                        <div class="result" data-result={result}>{resultLabel}</div>
+                                        {resultDetails && (
+                                            <div class="result-details">{resultDetails}</div>
+                                        )}
+                                    </div>
+                                </td>
+                                <td align="left">
+                                    <Player player={secondPlayer} />
+                                </td>
+                            </tr>
+                        );
+                    })}
+                </table>
+            </TableResponsive>
+        </div>
+    );
+};

src/cotuongpc1/matches/Matches.less

@@ -0,0 +1,66 @@
+.Matches {
+    table {
+        border-collapse: collapse;
+
+        td, th {
+            padding: 0.5em 0.25em;
+        }
+
+        td {
+            border-top: 1px solid lightgray;
+        }
+
+        tr.recent-match {
+            background: whitesmoke;
+        }
+
+        .match-info {
+            white-space: nowrap;
+
+            > :not(:first-child) {
+                margin-top: 0.1em;
+            }
+
+            .date {
+                font-size: x-small;
+                color: darkgray;
+            }
+
+            .result {
+                &[data-result="-2"] {
+                    color: gray;
+                }
+
+                &[data-result="-1"] {
+                    color: lightgray;
+
+                    span {
+                        font-size: smaller;
+                        font-style: italic;
+                        font-weight: bold;
+                    }
+                }
+
+                &[data-result="0"] {
+                    color: red;
+                    text-transform: uppercase;
+                }
+
+                &[data-result="1"] {
+                    color: blue;
+                    text-transform: uppercase;
+                }
+
+                &[data-result="2"] {
+                    color: green;
+                    text-transform: uppercase;
+                }
+            }
+
+            .result-details {
+                font-size: x-small;
+                color: darkgray;
+            }
+        }
+    }
+}

src/cotuongpc1/ranking-table/RankingTable.js

@@ -3,7 +3,7 @@ import {Player} from '../player/Player';
 import {TableResponsive} from '../table-responsive/TableResponsive';
 import {createMatchId, getGameScore, getMatchResult} from '../utils';
 
-export let RankingTable = ({players, quitPlayerIdSet, matchesById, matchSchedules}) => {
+export let RankingTable = ({players, matchesById, matchSchedules}) => {
     let resultsByPlayerId = {};
     let matchesPerPlayer = players.length - 1;
     for (let player of players) {
@@ -21,11 +21,11 @@ export let RankingTable = ({players, quitPlayerIdSet, matchesById, matchSchedule
         };
     }
 
-    for (let [matchId, { roundIndex, firstPlayerId, secondPlayerId }] of Object.entries(matchSchedules)) {
-        let firstPlayerResult = resultsByPlayerId[firstPlayerId];
-        let secondPlayerResult = resultsByPlayerId[secondPlayerId];
+    for (let [matchId, { roundIndex, firstPlayer, secondPlayer }] of Object.entries(matchSchedules)) {
+        let firstPlayerResult = resultsByPlayerId[firstPlayer.id];
+        let secondPlayerResult = resultsByPlayerId[secondPlayer.id];
 
-        if (quitPlayerIdSet.has(firstPlayerId) || quitPlayerIdSet.has(secondPlayerId)) {
+        if (!(firstPlayer.active && secondPlayer.active)) {
             firstPlayerResult.history[roundIndex] = -2;
             secondPlayerResult.history[roundIndex] = -2;
             continue;
@@ -53,14 +53,14 @@ export let RankingTable = ({players, quitPlayerIdSet, matchesById, matchSchedule
 
         switch (matchResult) {
             case 0:
-                secondPlayerResult.loserIds.push(firstPlayerId);
+                secondPlayerResult.loserIds.push(firstPlayer.id);
                 break;
             case 1:
-                firstPlayerResult.drawerIds.push(secondPlayerId);
-                secondPlayerResult.drawerIds.push(firstPlayerId);
+                firstPlayerResult.drawerIds.push(secondPlayer.id);
+                secondPlayerResult.drawerIds.push(firstPlayer.id);
                 break;
             case 2:
-                firstPlayerResult.loserIds.push(secondPlayerId);
+                firstPlayerResult.loserIds.push(secondPlayer.id);
                 break;
         }