Skip to content

Commit

Permalink
Tournament form and details improvs
Browse files Browse the repository at this point in the history 
Hid tournament details image temporarily
  • Loading branch information
@JakubNiewadzi @jordus100
JakubNiewadzi authored and jordus100 committed Jun 10, 2024
1 parent 9651a7b commit 2658c48
Show file tree
Hide file tree
Showing 9 changed files with 123 additions and 73 deletions.
65 changes: 43 additions & 22 deletions src/Tournaments/TournamentDetails.js
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,68 @@
import './TournamentDetails.scss'
import { getListOfTournaments } from './getListOfTournaments';
import { useParams } from 'react-router-dom';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { login, logout } from '../User/store';
function TournamentDetails({isAuthenticated, user, login, logout }) {
import {getListOfTournaments} from './getListOfTournaments';
import {useParams} from 'react-router-dom';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';
import {login, logout} from '../User/store';
import {TournamentService} from "../services/TournamentService";
import React, {useEffect, useState} from "react";
import {Buffer} from "buffer";

const { tournamentId } = useParams();
const tournament = getListOfTournaments().find(t => t.id === parseInt(tournamentId));
function TournamentDetails({isAuthenticated, user, login, logout}) {

const {tournamentId} = useParams();
const [tournament, setTournament] = useState([]);
const [message, setMessage] = useState('');

useEffect(() => {
TournamentService.getTournament(tournamentId)
.then((response) => {
setTournament(response.data.data);
}
).catch((error) => {
setMessage('Error loading tournaments');
});
}, []);

console.log(tournament);
if (!tournament) {
return <div>Tournament not found</div>;
}

// alert(tournament)

return (
<div className="tournamentWrapper">
<p>Szczegóły Turnieju</p>
<p>Tournament details</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>
<p>Name: {tournament.tournamentTitle}</p>
<p>Current amount of competitors: {tournament.playersBots?.length}</p>
<p>Max amount of competitors: {tournament.playersLimit}</p>
<p>Tournament date: {tournament.tournamentsDate}</p>
<p>Limitations: {tournament.constraints}</p>
<p>Status: {tournament.status}</p>
<p>Game type: {tournament.gameName}</p>
</div>
{/* <img className="tournamentImage" src="" alt=""></img> */}
<div className="tournamentImage"></div>
{/*
<div className="tournamentImage">
<img className='profile-image' src={`data:image/jpeg;base64,${tournament.image}`} alt='tournament image'/>
</div>
*/}
</div>
<p className="tournamentDescription">Opis: {tournament.description}</p>
<p className="tournamentDescription">Description: {tournament.description}</p>
{isAuthenticated ? (
<button className="btn"><Link to={`/tournaments/edit/${tournament.id}`}>Edit Tournament</Link></button>
) : null}
</div>
);
}

const mapStateToProps = (state) => ({
isAuthenticated: state.isAuthenticated,
user: state.user,
});
const mapDispatchToProps = {login,logout,};
});

const mapDispatchToProps = {login, logout,};

export default connect(mapStateToProps, mapDispatchToProps)(TournamentDetails);
9 changes: 9 additions & 0 deletions src/Tournaments/TournamentDetails.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
@import '../index';
@import '../Home';

.tournamentWrapper{
@extend .color-primary-0;

max-width: 70vw;
margin: 0 auto;
margin-top: 20px;
text-align: center;
border: solid $color-primary-3 2px;
border-radius: 15px;
background-color: #181818;
padding: 20px;
color: $color-primary-0;

.tournamentDetails{
display:flex;
flex-direction: row;
Expand All @@ -16,6 +24,7 @@
flex-direction: column;

p{
color: $color-primary-0;
font-size: 20px;
margin: 5px 0
}
Expand Down
36 changes: 18 additions & 18 deletions src/forms/AddGameForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,26 @@ import {GameService} from "../services/GameService";
function AddGameForm({isAuthenticated, user, login, logout}) {
const [name, setName] = useState('');
const [description, setDescription] = useState('');
const [setFile] = useState('');
const [file, setFile] = useState('');
const [message, setMessage] = useState(true);

const handleSubmit = async (e) => {
e.preventDefault();

try {
console.log(name,description)
await GameService.addGameType(10,name,description,"string",true)
console.log(name, description)
await GameService.addGameType(10, name, description, "string", true)
setMessage('Game added succesfully')
} catch (e) {
setMessage('There was a problem with adding game.')
}
};

const onUploadFile = (e) => {
console.log(e.target.value)
setFile(e.target.value)
}

return (
<div className="add-game-form">
<div className="form">
Expand All @@ -45,15 +50,22 @@ function AddGameForm({isAuthenticated, user, login, logout}) {
onChange={e => setDescription(e.target.value)}
maxLength="200"
/>
</div>

<p style={{
color: "#0BE400",
fontSize: "16px"
}}>
The main game program must be a file containing raw code ending with a appropriate file
extension (.py .java .c).<br></br>
</p>
</div>
<div className="form-group short-input">
<label htmlFor="files">Game files</label>
<input
type="file"
id="files"
accept=".zip"
onChange={e => setFile(e.target.value)}
accept=".py,.java,.c"
onChange={onUploadFile}
/>
</div>

Expand All @@ -63,18 +75,6 @@ function AddGameForm({isAuthenticated, user, login, logout}) {
</div>
</form>
</div>
<div className={"text-below-form"}>
<p className="color-primary-3">
Here you can add a new type of a Bot Wars game to the system.<br></br>
Following game files must be in the zip archive:<br></br>
<ul>
<li>The main game program must be a valid Linux executable and must be named: <i>game</i></li>
<li>File defining game interface for bots, named: <i>interface</i></li>
<li>Text file defining possible numbers of players containing a list of numbers
separated by commas, named: <i>interface</i></li>
</ul>
</p>
</div>
<p>{message}</p>
</div>
)
Expand Down
23 changes: 12 additions & 11 deletions src/forms/AddTournamentForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,13 @@ function AddTournamentForm({isAuthenticated, user, login, logout }) {

return (
<div className="form">
<h1>Dodaj nowy turniej</h1>
<h1>Add a new tournament</h1>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="title">Tytuł</label>
<label htmlFor="title">Title</label>
<input
type="text"
placeholder="Tytuł (max 30 znaków)"
placeholder="Title (max 30 characters)"
id="title"
value={title}
onChange={e => setTitle(e.target.value)}
Expand All @@ -58,18 +58,18 @@ function AddTournamentForm({isAuthenticated, user, login, logout }) {
</div>

<div className="form-group">
<label htmlFor="description">Opis</label>
<label htmlFor="description">Description</label>
<textarea
id="description"
placeholder="Opis (max 200 znaków)"
placeholder="Description (max 200 characters)"
value={description}
onChange={e => setDescription(e.target.value)}
maxLength="200"
/>
</div>

<div className="form-group">
<label htmlFor="gameType">Typ Gry</label>
<label htmlFor="gameType">Game Type</label>
<select
id="gameType"
value={gameType}
Expand All @@ -79,7 +79,7 @@ function AddTournamentForm({isAuthenticated, user, login, logout }) {
</div>

<div className="form-group short-input">
<label htmlFor="playerLimit">Limit Graczy</label>
<label htmlFor="playerLimit">Player limit</label>
<input
type="number"
id="playerLimit"
Expand All @@ -89,7 +89,7 @@ function AddTournamentForm({isAuthenticated, user, login, logout }) {
</div>

<div className="form-group short-input">
<label htmlFor="date">Data Rozgrywki</label>
<label htmlFor="date">Tournament date</label>
<input
type="date"
id="date"
Expand All @@ -99,16 +99,17 @@ function AddTournamentForm({isAuthenticated, user, login, logout }) {
</div>

<div className="form-group short-input">
<label htmlFor="image">Zdjęcie</label>
<label htmlFor="image">Image</label>
<input
type="file"
id="image"
accept=".jpg,.jpeg,.png"
/>
</div>

<div className="form-group actions">
<button type="submit" className="submit">Dodaj turniej</button>
<button type="button" className="cancel">Anuluj</button>
<button type="submit" className="submit">Add a tournament</button>
<button type="button" className="cancel">Cancel</button>
</div>

{message && <p>{message}</p>}
Expand Down
23 changes: 12 additions & 11 deletions src/forms/EditTournamentForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ function EditTournamentForm({ isAuthenticated, user, login, logout }) {
const [date, setDate] = useState('');

useEffect(() => {
console.log(tournament)
if (tournament) {
setTitle(tournament.name);
setDescription(tournament.description);
Expand All @@ -38,13 +39,13 @@ function EditTournamentForm({ isAuthenticated, user, login, logout }) {

return (
<div className="form">
<h1>Dodaj nowy turniej</h1>
<h1>Edit a tournament</h1>
<form>
<div className="form-group">
<label htmlFor="title">Tytuł</label>
<label htmlFor="title">Title</label>
<input
type="text"
placeholder="Tytuł (max 30 znaków)"
placeholder="Title (max 30 characters)"
id="title"
value={title}
onChange={e => setTitle(e.target.value)}
Expand All @@ -53,18 +54,18 @@ function EditTournamentForm({ isAuthenticated, user, login, logout }) {
</div>

<div className="form-group">
<label htmlFor="description">Opis</label>
<label htmlFor="description">Description</label>
<textarea
id="description"
placeholder="Opis (max 200 znaków)"
placeholder="Description (max 200 characters)"
value={description}
onChange={e => setDescription(e.target.value)}
maxLength="200"
/>
</div>

<div className="form-group">
<label htmlFor="gameType">Typ Gry</label>
<label htmlFor="gameType">Game Type</label>
<select
id="gameType"
value={gameType}
Expand All @@ -75,7 +76,7 @@ function EditTournamentForm({ isAuthenticated, user, login, logout }) {
</div>

<div className="form-group short-input">
<label htmlFor="playerLimit">Limit Graczy</label>
<label htmlFor="playerLimit">Player limit</label>
<input
type="number"
id="playerLimit"
Expand All @@ -85,7 +86,7 @@ function EditTournamentForm({ isAuthenticated, user, login, logout }) {
</div>

<div className="form-group short-input">
<label htmlFor="date">Data Rozgrywki</label>
<label htmlFor="date">Tournament date</label>
<input
type="date"
id="date"
Expand All @@ -95,16 +96,16 @@ function EditTournamentForm({ isAuthenticated, user, login, logout }) {
</div>

<div className="form-group short-input">
<label htmlFor="image">Zdjęcie</label>
<label htmlFor="image">Image</label>
<input
type="file"
id="image"
/>
</div>

<div className="form-group actions">
<button type="submit" className="submit">Dodaj turniej</button>
<button type="button" className="cancel">Anuluj</button>
<button type="submit" className="submit">Edit this tournament</button>
<button type="button" className="cancel">Cancel</button>
</div>
</form>
</div>
Expand Down
Loading

0 comments on commit 2658c48

Please sign in to comment.