Added matches list view and match view

src/Match/MatchOverView.js

@@ -0,0 +1,62 @@
+import loseIcon from '../resources/poop.svg';
+import drawIcon from '../resources/poop.svg';
+import winIcon from '../resources/crown.svg';
+
+import './MatchOverView.scss';
+
+export default function MatchOverView({match}) {
+    if (Object.keys(match).length === 0) {
+        return <></>;
+    }
+    const getResult = (res) => {
+       switch(res) {
+        case 0:
+            return 'loser';
+        case 1:
+            return 'draw';
+        case 2:
+            return 'winner';
+       }
+    }
+
+    const getIcon = (res) => {
+        switch(res) {
+            case 0:
+                return loseIcon;
+            case 1:
+                return drawIcon;
+            case 2:
+                return winIcon;
+        }
+    }
+
+    return (<>
+        <div className='match-overview'>
+            <div className='match-overview-border'>
+                <div className='match-overview-container'>
+                    <div className='match-overview-container-top'>
+                        {match.players.map((player, index) => {
+                            return <>
+                                <div className='match-overview-players-list' key={index}>
+                                    <img className="icon" src={getIcon(match.result[player])} alt='icon'/>
+                                    <p className={getResult(match.result[player])}>{player}</p>
+                                </div>
+                            </>
+                        })}
+                    </div>
+                    <div className='separator'></div>
+                    <div className='match-overview-container-middle'>
+                        <p>Tournament:<br/><b>{match.tournamentName}</b></p>
+                        <p>Game:<br/><b>{match.gameType}</b></p>
+                        <p>Played:<br/><b>{match.date}</b></p>
+                    </div>
+                    <div className='separator'></div>
+                    <div className='match-overview-container-bottom'>
+                        <button>Download game</button>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </>);
+}

src/Match/MatchOverView.scss

@@ -0,0 +1,74 @@
+
+.match-overview {
+    margin: 0px 5px;
+    border-radius: 5px;
+    padding: 2px;
+    background-color: rgb(193, 193, 193);
+
+    .match-overview-border {
+        border: 1px solid rgb(151, 151, 151);
+        border-radius: 5px;
+        padding: 5px;
+        height: 100%;
+        background-color: beige;
+
+        .match-overview-container {
+            height: 100%;
+            display: grid;
+            grid-template-columns: 100%;
+            grid-template-rows: min-content 5px min-content 5px auto    ;
+
+            .separator {
+                height: 100%;
+                width: 100%;
+                border: 2px solid rgb(151, 151, 151);
+                border-radius: 5px;
+            }
+
+            .match-overview-container-top {
+                p {
+                    font-weight: bold;
+                    margin: 0px;
+                }                
+
+                .winner {
+                    color: green;
+                }
+
+                .loser {
+                    color: red;
+                }
+
+                .draw {
+                    color: blue;
+                }
+
+                .match-overview-players-list {
+                    display: flex;
+                    margin: 10px 0px;
+                    .icon {
+                        margin: 0px 5px;
+                        width: 20px;
+                        height: 20px;  
+                    }
+                }
+            }
+
+            .match-overview-container-middle {
+                p {
+                    margin: 7px 2px;
+                }
+            }
+
+            .match-overview-container-bottom {
+                display: flex;
+                button {
+                    font-size: 15px;
+                    bottom: 0px;
+                    height: min-content;
+                    margin-top: auto;
+                }
+            }
+        }
+    }
+}

src/Match/MatchView.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import UserButtons from '../User/UserButtons';
+import { MatchesService } from '../services/MatchesService';
+import MovesTable from './MovesTable';
+import MatchOverView from './MatchOverView';
+
+import './MatchView.scss';
+
+function getLog(log) {
+  let table = log.split('\n').map((x) => x.trim());
+  const result = table[table.length - 1];
+  table = table.slice(0, -2)
+  const boardStates = [];
+  const playerMoves = [];
+  const playerHands = [];
+  let currentPlayer = 0;
+  let round, move;
+  const output = {"rounds": [], "result": result};
+  for (let i = 0; i < table.length; i++) {
+    switch (i % 3) {
+      case 0: // player side
+        currentPlayer = parseInt(table[i]);
+        output.rounds.push({"player": currentPlayer});
+        break;
+      case 1: // board state and player hand
+        round = table[i].split('; Table:').map((x) => x.split(';').map((y) => y.trim()));
+        boardStates.push(round[0]);
+        round[1] = round[1].slice(0, -1);
+        playerHands.push(round[1]);
+        output.rounds[output.rounds.length - 1]["boardState"] = round[1];
+        output.rounds[output.rounds.length - 1]["playerHand"] = round[0];
+        break;
+      case 2: // player move
+        move = table[i].trim();
+        if (move === 'fold') {
+          move = ['fold'];
+        } else {
+          console.log(move);
+          move = move.split(' ').map((x) => parseInt(x));
+          move = [playerHands[playerHands.length - 1][move[1]], boardStates[boardStates.length - 1][move[0]]];
+        }
+        playerMoves.push(move); 
+        output.rounds[output.rounds.length - 1]["playerMove"] = move;
+        break;
+    }
+  }
+  return output;
+}
+
+export default function MatchView() {
+  const { id } = useParams();
+
+  const [match, setMatch] = useState({});
+  const [log, setLog] = useState({"rounds": [], "result": ""});
+
+  useEffect(() => {
+    MatchesService.getMatch(id).then((data) => {
+      setMatch(data);
+      console.log("match: " + match)
+    }).catch((e) => {
+      console.log(e);
+    });
+
+    MatchesService.getMatchLog(id).then((data) => {
+      setLog(getLog(data.log));
+    }).catch((e) => {
+      console.log(e);
+    });
+  }, [id]);
+
+  return (
+    <div>
+      <UserButtons />
+      <div className="match-site">
+        <MatchOverView match={match} />
+        <div className="visualisation">
+          <p>Visualisation</p>
+        </div>
+        <MovesTable log={log} />
+      </div>
+    </div>
+  );
+}

src/Match/MatchView.scss

@@ -0,0 +1,16 @@
+.match-site {
+    display: grid;
+    grid-template-columns: 20% 40% 40%;
+    height: 80vh;
+    width: 96vw;
+
+    column-gap: 10px;
+}
+
+.visualisation {
+    background-color: aqua;
+}
+
+.match-overview {
+    background-color: beige;
+}

src/Match/MovesTable.js

@@ -0,0 +1,71 @@
+import "./MovesTable.scss";
+import { useState } from 'react';
+
+function getColor(value) {
+    if (typeof value !== 'string') return 'def';
+    if (value.toUpperCase().includes('RED')) {
+        return 'red';
+    } else if (value.toUpperCase().includes('BLUE')) {
+        return 'blue';
+    } else if (value.toUpperCase().includes('YELLOW')) {
+        return 'yellow';
+    } else if (value.toUpperCase().includes('BROWN')) {
+        return 'brown';
+    } else if (value.toUpperCase().includes('PINK')) {
+        return 'pink';
+    } else if (value.toUpperCase().includes('WHITE')) {
+        return 'white';
+    } else if (value.toUpperCase().includes('GREEN')) {
+        return 'green';
+    }
+    return 'def';
+}
+
+export default function MovesTable({log}) {
+    let boardState, playerMove, playerHand;
+
+    const [move, setMove] = useState(1);
+
+    return <>
+        <div className="move-table">
+            <div className="move-table-container">
+                <div className='move-table-container-scrollable-table'>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Round</th>
+                                <th>Board State</th>
+                                <th>Move</th>
+                                <th>Player hand</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {log.rounds.map((round, index) => {
+                                //console.log(round.boardState);
+                                boardState = round.boardState.map((x) => <p className={getColor(x)}>{x}</p>)
+                                playerMove = round.playerMove.map((x) => <p className={getColor(x)}>{x}</p>)
+                                playerHand = round.playerHand.map((x) => <p className={getColor(x)}>{x}</p>)
+                                return <tr className={`move-element-row ${'player-' + round.player}`}
+                                    key={index}>
+                                    <td>{index}.</td>
+                                    <td>{boardState}</td>
+                                    <td>{playerMove}</td>
+                                    <td>{playerHand}</td>
+                                </tr>
+                            })}
+                        </tbody>
+                    </table>
+                </div>
+                <div className="match-table-btns">
+                <div className="match-table-btns-container">
+                        <button className="match-table-btn">First</button>
+                        <button className="match-table-btn">≪</button>
+                        <button className="match-table-btn">{move}</button>
+                        <button className="match-table-btn">≫</button>
+                        <button className="match-table-btn">Last</button>
+                </div>
+            </div>
+            </div>
+        </div>
+    </>
+}