Added match list

jordus100 · Jun 8, 2024 · 354174c · 354174c
1 parent a0c28f7
commit 354174c
Show file tree

Hide file tree

Showing 18 changed files with 358 additions and 131 deletions.
diff --git a/src/Match/MatchView.js b/src/Match/MatchView.js
@@ -1,12 +1,14 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import UserButtons from '../User/UserButtons';
 import { MatchesService } from '../services/MatchesService';
 import MovesTable from './MovesTable';
+import {MovesTableButtons} from './MovesTable';
 import MatchOverView from './MatchOverView';
 import Visualization from './Visualization';
 
 import './MatchView.scss';
+import { set } from 'date-fns';
 
 function getLog(log) {
   let table = log.split('\n').map((x) => x.trim());
@@ -55,6 +57,13 @@ export default function MatchView() {
   const [match, setMatch] = useState({});
   const [log, setLog] = useState({"rounds": [], "result": ""});
   const [gameData, setGameData] = useState({ gameStates: [] });
+  const canvasRef = useRef(null);
+  const [round, setRound] = useState(0);
+  const setMove = function (value) {
+    if (value == -2 || value >= log.rounds.length) setRound(log.rounds.length - 1);
+    else setRound(Math.min(Math.max(value,0), log.rounds.length - 1));
+    console.log("round: " + round);
+  }
 
   useEffect(() => {
     MatchesService.getMatch(id).then((data) => {
@@ -81,13 +90,13 @@ export default function MatchView() {
 
   return (
     <div>
-      <UserButtons />
       <div className="match-site"> 
         <MatchOverView match={match} />
         <div className="visualization">
-          <Visualization gameData={gameData} />
+          <Visualization gameData={gameData} curentRound={round} />
+          <MovesTableButtons move={round} setMove={setMove}/>
         </div>
-        <MovesTable log={log} />
+        <MovesTable log={log} scrollRef={canvasRef}/>
       </div>
     </div>
   );

diff --git a/src/Match/MovesTable.js b/src/Match/MovesTable.js
@@ -21,15 +21,28 @@ function getColor(value) {
     return 'def';
 }
 
-export default function MovesTable({log}) {
-    let boardState, playerMove, playerHand;
+function MovesTableButtons({move, setMove}) {
+    return(<> 
+            <div className="match-table-btns">
+                <div className="match-table-btns-container">
+                        <button className="match-table-btn" onClick={setMove(0)}>First</button>
+                        <button className="match-table-btn" onClick={setMove(move - 1)}>≪</button>
+                        <button className="match-table-btn">{move + 1}</button>
+                        <button className="match-table-btn" onClick={setMove(move + 1)}>≫</button>
+                        <button className="match-table-btn" onClick={setMove(-2)}>Last</button>
+                </div>
+            </div>
+        </>
+    );
+}
 
-    const [move, setMove] = useState(1);
+export default function MovesTable({log, scrollRef, }) {
+    let boardState, playerMove, playerHand;
 
     return <>
         <div className="move-table">
             <div className="move-table-container">
-                <div className='move-table-container-scrollable-table'>
+                <div className='move-table-container-scrollable-table' ref={scrollRef}>
                     <table>
                         <thead>
                             <tr>
@@ -41,7 +54,6 @@ export default function MovesTable({log}) {
                         </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>)
@@ -56,16 +68,9 @@ export default function MovesTable({log}) {
                         </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>
     </>
-}
+}
+
+export { MovesTableButtons };
diff --git a/src/Match/Visualization.js b/src/Match/Visualization.js
@@ -1,9 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 import './Visualization.scss';
 
-export default function Visualization({ gameData }) {
+export default function Visualization({ gameData, currentMove }) {
   const canvasRef = useRef(null);
   const [gameStateIndex, setGameStateIndex] = useState(0);
+  useEffect(() => {
+    setGameStateIndex(currentMove);
+  }, [currentMove]);
 
   useEffect(() => {
     if (!gameData || !gameData.gameStates || gameData.gameStates.length === 0) return;
@@ -19,7 +22,7 @@ export default function Visualization({ gameData }) {
       try {
         ctx.fillStyle = kolor.toLowerCase();
         ctx.fillRect(x, y, cardWidth, cardHeight);
-        ctx.strokeStyle = 'black';
+        ctx.strokeStyle = 'white'; 
         ctx.lineWidth = 2;
         ctx.strokeRect(x, y, cardWidth, cardHeight);
         ctx.fillStyle = 'black';
@@ -72,7 +75,7 @@ export default function Visualization({ gameData }) {
 
   return (
     <div className="visualization-container">
-      <canvas id="myCanvas" ref={canvasRef} width="1500" height="600"></canvas> {/* Adjusted canvas size */}
+      <canvas id="myCanvas" ref={canvasRef} width="1500" height="600"></canvas>
       <div id="controls">
         <button onClick={() => setGameStateIndex(Math.max(0, gameStateIndex - 1))}>
           Poprzedni układ
@@ -89,9 +92,6 @@ export default function Visualization({ gameData }) {
           value={gameStateIndex + 1}
           onChange={(e) => setGameStateIndex(e.target.value - 1)}
         />
-        <button onClick={() => setGameStateIndex(document.getElementById('moveNumber').value - 1)}>
-          Idź do ruchu
-        </button>
       </div>
     </div>
   );

diff --git a/src/Match/Visualization.scss b/src/Match/Visualization.scss
@@ -1,4 +1,6 @@
 .visualization-container {
+    background-color: #1a1a1a;
+    border-radius: 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -8,8 +10,7 @@
 
   #myCanvas {
     border: 1px solid #000;
-    max-width: 100%;
-    max-height: 100%;
+    width: 100%;
   }
 
   #controls {

diff --git a/src/Matches/MatchesFilterPanel.js b/src/Matches/MatchesFilterPanel.js
@@ -1,18 +1,141 @@
+import React, { useEffect, useState } from 'react';
+import { GameService } from '../services/GameService';
+import { UserService } from '../services/UserService';
+import { TournamentService } from '../services/TournamentService';
+import './MatchesFilterPanel.scss';
+import { set } from 'date-fns';
 
+export default function MatchesFilterPanel({triggerFilter}) {
+    const [maxDate, setMaxDate] = useState('');
+    const [minDate, setMinDate] = useState('');
+
+    const [gameName, setGameName] = useState('');
+    const [games, setGames] = useState([]);
+    const [gameType, setGameType] = useState({});
+
+    const [playerName, setPlayerName] = useState('');
+    const [players, setPlayers] = useState([]);
+    const [player, setPlayer] = useState({});
+
+    const [tournamentName, setTournamentName] = useState('');
+    const [tournaments, setTournaments] = useState([]);
+    const [tournament, setTournament] = useState({});
+
+    const composeAndTriggerFilter = () => {
+        const filter = {};
+        if (tournament !== null || tournamentName !== '') {
+            filter.tournamentName = tournamentName;
+        }
+        if (player !== null || playerName !== '') {
+            filter.userParticipation = playerName;
+        }
+        if (gameType !== null || gameName !== '') {
+            filter.gameName = gameName;
+        }
+        if (maxDate !== null || minDate !== null) {
+            filter.maxPlayOutDate = maxDate;
+        }
+        if (minDate !== null || minDate !== null) {
+            filter.minPlayOutDate = minDate;
+        }
+        triggerFilter ? triggerFilter(filter) : console.log(filter);
+    }
+
+    useEffect(() => {
+        if (gameName === '' || gameName === gameType.gameFileName) {
+            setGames([]);
+            return;
+        }
+        GameService.getByName(gameName, 0, 5)
+        .then((response) => {
+            setGames(response.data.data.page);
+        })
+        .catch((error) => {
+            console.log(error);
+        })}, [gameName, gameType]);
+
+    useEffect(() => {
+        if (playerName === '' || playerName === player.login) {
+            setPlayers([]);
+            return;
+        }
+        UserService.searchPlayersByName(playerName, 0, 5)
+        .then((response) => {
+            setPlayers(response.data.data);
+        }).catch((error) => {
+            console.log(error);
+        })}, [playerName, player]);
+
+    useEffect(() => {
+        if (tournamentName === '' || tournamentName === tournament.tournamentTitle) {
+            setTournaments([]);
+            return;
+        }
+        TournamentService.getByName(tournamentName, 0, 5)
+        .then((response) => {
+            setTournaments(response.data.data.page);
+        }).catch((error) => {
+            console.log(error);
+        })}, [tournamentName, tournament]);
+
+    const gameClickHandler = (game) => {
+        return () => {
+            setGameType(game);
+            setGameName(game.gameFileName);
+        }
+    }
+
+    const playerClickHandler = (player) => {
+        return () => {
+            setPlayer(player);
+            setPlayerName(player.login);
+        }
+    }
+
+    const tournamentClickHandler = (tournament) => {
+        return () => {
+            setTournament(tournament);
+            setTournamentName(tournament.tournamentTitle);
+        }
+    }
 
-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)} />
+        <div className='matches-search-filter-panel'>
+            <label htmlFor="tournamentId">Tournament</label>
+            <input type="text" id="tournament" value={tournamentName} onChange={(e) => setTournamentName(e.target.value)} />
+            <div className='tournaments-list-container'>
+                <div className='tournaments-list'>
+                    {tournaments.map((tournament) => (
+                        <div className='tournaments-list-element' onClick={tournamentClickHandler(tournament)}>
+                            {tournament.tournamentTitle}
+                        </div>))}
+                </div>
+            </div>
             <label htmlFor="playerName">Player Name</label>
-            <input type="text" id="playerName" onChange={(e) => setPlayerName(e.target.value)} />
+            <input type="text" id="playerName" value={playerName} onChange={(e) => setPlayerName(e.target.value)} />
+            <div className='players-list-container'>
+                <div className='players-list'>
+                    {players.map((player) => (
+                        <div className='players-list-element' onClick={playerClickHandler(player)}>
+                            {player.login}
+                        </div>))}
+                </div>
+            </div>
             <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)} />
+            <label htmlFor="gameType">Game</label>
+            <input type="text" id="gameType" value={gameName} onChange={(e) => setGameName(e.target.value)} />
+            <div className='games-list-container'>
+                <div className='games-list'>
+                    {games.map((game) => (
+                        <div className='games-list-element' onClick={gameClickHandler(game)}>
+                            {game.gameFileName}
+                        </div>))}
+                </div>
+            </div>
+            <button onClick={composeAndTriggerFilter}>Filter</button>
         </div>
     );
 

diff --git a/src/Matches/MatchesFilterPanel.scss b/src/Matches/MatchesFilterPanel.scss
@@ -0,0 +1,75 @@
+.matches-search-filter-panel {
+
+    display: flex;
+    flex-direction: column;
+    align-self: start;
+    gap: 5px;
+    background-color: #181818;
+    padding: 20px;
+
+    * {
+        font-size: 20px;
+    }
+
+    .tournaments-list-container {
+        width: 100%;
+        height: 10px;
+        .tournaments-list {
+            position: relative;
+            width: 100%;
+            background-color: #333; 
+            .tournaments-list-element {
+                width: 100%;    
+                padding: 5px;
+                transition: all 0.5s ease;
+
+                &:hover {
+                    background-color: #111;
+                    color: #eee;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    .players-list-container {
+        width: 100%;
+        height: 10px;
+        .players-list {
+            position: relative;
+            width: 100%;
+            background-color: #333; 
+            .players-list-element {
+                width: 100%;    
+                padding: 5px;
+                transition: all 0.5s ease;
+
+                &:hover {
+                    background-color: #111;
+                    color: #eee;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    .games-list-container {
+        width: 100%;
+        height: 10px;
+        .games-list {
+            position: relative;
+            width: 100%;
+            background-color: #333; 
+            .games-list-element {
+                width: 100%;    
+                padding: 5px;
+                transition: all 0.5s ease;
+                &:hover {
+                    background-color: #111;
+                    color: #eee;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+}