Added matches list view and match view

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 (
+    <div>
+      <UserButtons />
+      <MovesTable log={log} />
+    </div>
+  );
+}

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 <>
+        <div className="move-table">
+            <div className="move-table-container">
+                <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>
+    </>
+}

src/Match/MovesTable.scss

@@ -0,0 +1,73 @@
+
+.move-table {
+    height: 50vh;
+    width: fit-content;
+    overflow: hidden;
+
+    .move-table-container {
+        display: grid;
+        align-items: center;
+        justify-content: center;
+        overflow-y: scroll;
+        table {
+            border: 1px solid #000; 
+
+            thead {
+                padding: 10px;
+
+                tr {
+                    th {
+                        font-size: 20px;
+                    }
+                }
+            }
+            tbody {
+                tr {
+                    td {
+                        font-size: 20px;
+                    }
+                }
+            }
+        }
+    }    
+}
+
+p {
+    font-size: 16px;
+}
+
+.red {
+    color: red;
+}
+
+.green {
+    color: green;
+}
+
+.blue {
+    color: blue;
+}
+.yellow {
+    color: yellow;
+}
+.brown {
+    color: brown;
+}
+.pink {
+    color: #ff31e0;
+}
+.white {
+    color: white;
+}
+
+.move-element-row{
+
+}
+
+.player-0 {
+    background-color: #313131;
+}
+
+.player-1 {
+    background-color: #1b1b1b;
+}

src/Matches/MatchesFilterPanel.js

@@ -0,0 +1,19 @@
+
+
+export default function MatchesFilterPanel({setTournamentId, setPlayerName, setMaxDate, setMinDate, setGameType}) {
+    return (
+        <div>
+            <label htmlFor="tournamentId">Tournament Id</label>
+            <input type="number" id="tournamentId" onChange={(e) => setTournamentId(e.target.value)} />
+            <label htmlFor="playerName">Player Name</label>
+            <input type="text" id="playerName" onChange={(e) => setPlayerName(e.target.value)} />
+            <label htmlFor="maxDate">Max Date</label>
+            <input type="date" id="maxDate" onChange={(e) => setMaxDate(e.target.value)} />
+            <label htmlFor="minDate">Min Date</label>
+            <input type="date" id="minDate" onChange={(e) => setMinDate(e.target.value)} />
+            <label htmlFor="gameType">Game Type</label>
+            <input type="text" id="gameType" onChange={(e) => setGameType(e.target.value)} />
+        </div>
+    );
+
+}

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;
+}

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 <>
+        <div className='match-list-container'>
+        {matchList.map((match) => (
+            <div className='match-list-element' key={match.id}>
+                <div className='match-list-element-container'>
+                    <input type="checkbox" onChange={handleMatchChecked(match.id)} />
+                    <div className='match-list-element-title' onClick={handleTournamentClick(match.id)} >{match.tournamentName}</div>
+                    <div className='match-list-element-info-container'>
+                        <div className='match-list-element-info'>{match.players.join(', ')}</div>
+                        <div className='match-list-element-info'>{match.gameType}</div>
+                        <div className='match-list-element-info'>{match.date}</div>
+                    </div>
+                </div>
+            </div>
+        ))}
+        </div>
+        </>
+}

src/Matches/MatchesSearch.css

@@ -0,0 +1,4 @@
+.matches-list-container {
+    display: grid;
+    grid-template-columns: 25% 70%;
+}

src/Matches/MatchesSearch.js

@@ -0,0 +1,38 @@
+import { useParams } from 'react-router-dom';
+import UserButtons from '../User/UserButtons';
+import { useEffect, useState } from 'react';
+import { MatchesService } from '../services/MatchesService';
+import MatchesList from './MatchesList';
+import MatchesFilterPanel from './MatchesFilterPanel';
+import './MatchesSearch.css';
+
+export default function MatchesSearch() {
+  const { tournamentid, playername, maxdate, mindate, gametype } = useParams();
+
+  const [tournamentId, setTournamentId] = useState(parseInt(tournamentid) ? parseInt(tournamentid) : null);
+  const [playerName, setPlayerName] = useState(playername ? playername : null);
+  const [maxDate, setMaxDate] = useState(maxdate ? new Date(maxdate) : null);
+  const [minDate, setMinDate] = useState(mindate ? new Date(mindate) : null);
+  const [gameType, setGameType] = useState(gametype ? gametype : null);
+
+  const [matches, setMatches] = useState([]);
+
+  useEffect(() => {
+    MatchesService.getMatches(1, 10, tournamentId, maxDate, minDate, gameType).then((data) => {
+      setMatches(data);
+    }).catch((e) => {
+      console.log(e);
+    });
+  }, [tournamentId, playerName, maxDate, minDate, gameType]);
+
+  return (
+    <div>
+      <UserButtons />
+      <h1>Matches</h1>
+      <div className="matches-list-container">
+        <MatchesFilterPanel setTournamentId={setTournamentId} setPlayerName={setPlayerName} setMaxDate={setMaxDate} setMinDate={setMinDate} setGameType={setGameType} />
+        <MatchesList matchList={matches} />
+      </div>
+    </div>
+  );
+}

src/index.js

@@ -28,6 +28,8 @@ import { Provider } from 'react-redux';
 import store from './User/store';
 import { getListOfTournaments } from './Tournaments/getListOfTournaments';
 import UserSettings from './User/Settings/UserSettings';
+import MatchesSearch from './Matches/MatchesSearch';
+import MatchView from './Match/MatchView';
 
 const games = [{name:'Szachy', id:1}, {name:'Warcaby', id:2}, {name:'Scrabble', id:3}, {name:'Chińczyk', id:4}, {name:'Go', id:5}]
 
@@ -50,6 +52,14 @@ const router = createBrowserRouter([
         path: "/games/add",
         element: <AddGameForm games={games}/>,
     },
+    {
+        path: "/matches/:tournamentId?/:playerName?/:maxDate?/:minDate?/:gameType?",
+        element: <MatchesSearch />,
+    },
+    {
+        path: "/match/:id",
+        element: <MatchView />,
+    },
     {
         path: "/tournaments/add",
         element: <AddTournamentForm />,