Making tournament details better

package.json

@@ -10,6 +10,7 @@
     "date-fns": "^3.6.0",
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
+    "react-countdown": "^2.3.5",
     "react-dom": "^18.2.0",
     "react-image-picker-editor": "^1.3.3",
     "react-paginate": "^8.2.0",

src/Tournaments/TournamentBotList.js

@@ -0,0 +1,27 @@
+
+import './TournamentBotList.scss';
+/*
+    {
+        "botId": 1,
+        "botFile": "quake3_bot_1",
+        "userName": "john_doe"
+    }
+*/
+
+export default function TournamentBotList({botList}) {
+    return (
+        <>
+            <div className="tournamentBotListContainer">
+                <div className="tournamentBotList">
+                {botList.map((bot, index) => (
+                    <div key={bot.botId} className={`${index % 2 ? 'light' : 'dark'} tournamentBot`}>
+                        <p>{bot.userName}</p>
+                        <p>{bot.botFile}</p>
+                    </div>
+                ))}
+                </div>
+            </div>
+        </>
+    )
+
+}

src/Tournaments/TournamentBotList.scss

@@ -0,0 +1,24 @@
+.tournamentBotListContainer {
+    overflow-y: scroll;
+    .tournamentBotList {
+    display: flex;
+    flex-direction: column;
+
+    .tournamentBot {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+
+        p {
+            font-size: 20px;
+        }
+    }
+
+    .light {
+        background-color: #545454;
+    }
+
+    .dark {
+        background-color: #333;
+    }
+    }
+}

src/Tournaments/TournamentCountDown.js

@@ -0,0 +1,25 @@
+import Countdown from 'react-countdown';
+import './TournamentCountDown.scss';
+
+export default function TournamentCountDown({date}) {
+    const renderer = ({ hours, minutes, seconds, completed }) => {
+        if (completed) {
+          // Render a completed state
+          return <p>Time's up!</p>;
+        } else {
+          // Render a countdown
+          return <><p>{hours} h</p><p>{minutes} m</p><p>{seconds} s</p></>;
+        }
+      };
+
+    return (
+        <div className="tournamentCountdown">
+        <Countdown 
+            date={date} 
+            renderer={renderer}/>
+        </div>
+    );
+}
+
+
+

src/Tournaments/TournamentCountDown.scss

@@ -0,0 +1,15 @@
+.tournamentCountdown{
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-gap: 5px;
+
+    p {
+        padding: 5px;
+        border: 1px solid black;
+        border-radius: 10px;
+
+        background-color: #555;
+
+        color: red;
+    }
+}

src/Tournaments/TournamentDetails.js

@@ -1,42 +1,115 @@
 import './TournamentDetails.scss'
-import { getListOfTournaments } from './getListOfTournaments';
+import { TournamentService } from '../services/TournamentService';
 import { useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
 import { login, logout } from '../User/store';
+import UserButtons from '../User/UserButtons';
+import TournamentBotList from './TournamentBotList';
+import TournamentCountDown from './TournamentCountDown';
+
 function TournamentDetails({isAuthenticated, user, login, logout }) {
 
     const { tournamentId } = useParams();
-    const tournament = getListOfTournaments().find(t => t.id === parseInt(tournamentId));
-
-    if (!tournament) {
-        return <div>Tournament not found</div>;
-    }
+    const [tournament, setTournament] = useState(null);
+    const [ladder, setLadder] = useState(null);
 
-    // alert(tournament)
-
-    return (
-        <div className="tournamentWrapper">
-            <p>Szczegóły Turnieju</p>
-            <div className="tournamentDetails">
-                <div className="details">
-                    <p>Nazwa: {tournament.name}</p>
-                    <p>Liczba uczestników: {tournament.participantsAmount}</p>
-                    <p>Max liczba uczestników: {tournament.maxParticipants}</p>
-                    <p>Data: {tournament.date}</p>
-                    <p>Ograniczenia: {tournament.limitations}</p>
-                    <p>Status: {tournament.state}</p>
+    const Match = ({ match }) => {
+        const winnerBot = match.PlayersBots.find(player => player.BotId === match.Winner);
+
+        return (
+            <div className="match">
+                <div className="players">
+                    {match.PlayersBots.map(player => (
+                        <div key={player.BotId} className={player.BotId === match.Winner ? 'winner' : 'loser'}>
+                            {player.UserName}
+                        </div>
+                    ))}
+                </div>
+                <div className="result">
+                    Winner: {winnerBot ? winnerBot.UserName : 'No winner yet'}
                 </div>
-                {/* <img className="tournamentImage" src="" alt=""></img> */}
-                <div className="tournamentImage"></div>
             </div>
-            <p className="tournamentDescription">Opis: {tournament.description}</p>
-            {isAuthenticated ? (
-                <button className="btn"><Link to={`/tournaments/edit/${tournament.id}`}>Edit Tournament</Link></button>
-            ) : null}
+        );
+    };
+    useEffect(() => {
+        // Create a WebSocket instance
+        const socket = new WebSocket(`ws://10.242.93.198:8080/tournamentWs/${tournamentId}`);
+
+        // Event listeners
+        socket.addEventListener('open', () => {
+            console.log('Connected to WebSocket server');
+        });
+
+        socket.addEventListener('message', (event) => {
+            console.log('Received message from server:', event.data);
+            setLadder(JSON.parse(event.data));
+            // Perform actions based on the received data
+        });
+
+        socket.addEventListener('close', () => {
+            console.log('Disconnected from WebSocket server');
+        });
+
+        // Clean up on unmount
+        return () => {
+            if (socket.readyState === 1) { // <-- This is important
+                socket.close();
+            }
+        }
+    }, []);
+
+    useEffect(() => {
+        TournamentService.getTournament(tournamentId)
+            .then((response) => {
+                setTournament(response.data.data);
+                console.log(response.data.data);
+            })
+            .catch((error) => {
+                console.error(error);
+            });
+    }, [tournamentId]);
+
+    return (<>{(!tournament || Object.keys(tournament).length === 0) ? <div>Tournament not found</div> :
+        (<>
+            <UserButtons/>
+            <div className="tournamentWrapper">
+                <div className="col1">
+                    <div className="tournamentOverview">
+                        <div className="tournamentOverviewInfo">
+                            <p>Creator: {tournament.creatorName}</p>
+                            <p>Player limit: {tournament.playersLimit}</p>
+                            <p>Planned on: {tournament.tournamentsDate}</p>
+                            <p>Constraints: {tournament.limitations}</p>
+                            <p>Status: {tournament.status}</p>
+                        </div>
+                        {tournament.image &&
+                            <div className='tournamentOverviewImage'>
+                                <img src={tournament.image} alt="tournament"></img>
+                            </div>}
+                        <div className="tournamentOverviewDescription">
+                            <p>Description: {tournament.description}</p>
+                        </div>
+                    </div>
+                </div>
+                <div className="col2">
+                    <div className="tournamentTitle">
+                        <h1>{tournament.tournamentTitle}</h1>
+</div>
+                    <TournamentCountDown date={tournament.tournamentsDate} />
+                    <TournamentBotList botList={tournament.playersBots} />
+                    <div className="ladder">
+                    {ladder && ladder.map(match => (
+    <Match key={match.matchId} match={match} />
+))}
         </div>
+                </div>
+            </div>
+        </>)}
+        </>
     );
 }
+
 const mapStateToProps = (state) => ({
     isAuthenticated: state.isAuthenticated,
     user: state.user,

src/Tournaments/TournamentDetails.scss

@@ -3,31 +3,75 @@
 .tournamentWrapper{
     @extend .color-primary-0;
 
-    max-width: 70vw;
+    width: 100vw;
+    height: 100vh;
     margin: 0 auto;
     text-align: center;
-    .tournamentDetails{
-        display:flex;
-        flex-direction: row;
-        text-align: left;
 
-        .details{
-            display:flex;
-            flex-direction: column;
+    display: grid;
+    grid-template-columns: 30% 70%;
 
-            p{
+
+    .tournamentOverview{
+        height: 90%;
+        display: grid;
+        grid-template-rows: min-content min-content 1fr;
+
+        p {
+            font-size: 20px;
+            text-align: left;
+        }
+
+        div {
+            background-color: white;
+            border-radius: 10px;
+            margin: 10px 0;
+            padding: 10px;
+        }
+
+        .tournamentOverviewImage{
+            img{
+                width: 100%;
+                height: 100%;
                 font-size: 20px;
-                margin: 5px 0
+                text-align: left; 
             }
         }
 
-        .tournamentImage{
-            flex-basis: 50%;
-            background-color: red;
+        .TournamentOverviewDescription {
+
         }
     }
-    .tournamentDescription{
-        font-size: 20px;
-        text-align: left;
-    }
+
+}
+.ladder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 20px;
+}
+
+.match {
+    border: 1px solid #ccc;
+    padding: 10px;
+    margin: 5px;
+    width: 300px;
+}
+
+.players {
+    display: flex;
+    justify-content: space-between;
+}
+
+.winner {
+    font-weight: bold;
+    color: green;
+}
+
+.loser {
+    color: red;
+}
+
+.result {
+    margin-top: 10px;
 }

src/admin/PlayerGames.js

@@ -15,7 +15,7 @@ function PlayerGames({ isAuthenticated, user, login, logout }) {
 
         try {
             const gl = await GameService.getAllForPlayer(username);
-            setGamesList(gl.data.data);
+            setGamesList(gl.data.data.page);
         } catch (e) {
             setMessage('There was a problem with fetching game data.');
         }

src/lists/TournamentsList.js

@@ -27,7 +27,7 @@ function TournamentsList({ tournaments, isAuthenticated }) {
             }).catch((error) => {
                 setMessage('Error loading tournaments');
             });
-    }, [currentDate]);
+    }, []);
 
     const handleTournamentClick = (tournamentId) => {
         navigate(`/tournaments/details/${tournamentId}`);