diff --git a/src/Match/MatchView.js b/src/Match/MatchView.js
new file mode 100644
index 0000000..1e45a9e
--- /dev/null
+++ b/src/Match/MatchView.js
@@ -0,0 +1,75 @@
+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';
+
+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);
+ }).catch((e) => {
+ console.log(e);
+ });
+
+ MatchesService.getMatchLog(id).then((data) => {
+ setLog(getLog(data.log));
+ console.log(log);
+ }).catch((e) => {
+ console.log(e);
+ });
+ }, [id]);
+
+ return (
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/Match/MovesTable.js b/src/Match/MovesTable.js
new file mode 100644
index 0000000..2b0b533
--- /dev/null
+++ b/src/Match/MovesTable.js
@@ -0,0 +1,56 @@
+import "./MovesTable.scss";
+
+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;
+ return <>
+
+
+
+
+
+ | Round |
+ Board State |
+ Move |
+ Player hand |
+
+
+
+ {log.rounds.map((round, index) => {
+ //console.log(round.boardState);
+ boardState = round.boardState.map((x) => {x}
)
+ playerMove = round.playerMove.map((x) => {x}
)
+ playerHand = round.playerHand.map((x) => {x}
)
+ return
+ | {index}. |
+ {boardState} |
+ {playerMove} |
+ {playerHand} |
+
+ })}
+
+
+
+
+
+ setTournamentId(e.target.value)} />
+
+ setPlayerName(e.target.value)} />
+
+ setMaxDate(e.target.value)} />
+
+ setMinDate(e.target.value)} />
+
+ setGameType(e.target.value)} />
+
+ );
+
+}
\ No newline at end of file
diff --git a/src/Matches/MatchesList.css b/src/Matches/MatchesList.css
new file mode 100644
index 0000000..7120b6b
--- /dev/null
+++ b/src/Matches/MatchesList.css
@@ -0,0 +1,39 @@
+.match-list-element {
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px;
+ border-bottom: 1px solid #ccc;
+
+ border-radius: 5px;
+
+ transition: all 0.5s ease-in;
+}
+
+.match-list-element:hover {
+ background-color: #333;
+ cursor: pointer;
+}
+
+.match-list-element-title {
+ font-size: 30px;
+}
+
+.match-list-element-container {
+ display: flex;
+}
+
+.match-list-element-container-info {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+}
+
+.match-list-element-info{
+ font-size: medium;
+}
+
+.match-list-container {
+ width: 60%;
+ margin: 0 auto;
+}
\ No newline at end of file
diff --git a/src/Matches/MatchesList.js b/src/Matches/MatchesList.js
new file mode 100644
index 0000000..c462842
--- /dev/null
+++ b/src/Matches/MatchesList.js
@@ -0,0 +1,31 @@
+import "./MatchesList.css";
+import {useNavigate} from 'react-router-dom';
+
+export default function MatchesList({matchList}) {
+ const navigate = useNavigate();
+ const handleTournamentClick = (matchId) => {
+ return () => navigate(`/match/${matchId}`);
+ };
+
+ const handleMatchChecked = (matchId) => {
+ return () => navigate(`/match/${matchId}`);
+ }
+
+ return <>
+
+ {matchList.map((match) => (
+
+
+
+
{match.tournamentName}
+
+
{match.players.join(', ')}
+
{match.gameType}
+
{match.date}
+
+
+
+ ))}
+