Skip to content
Snippets Groups Projects
Commit 214def84 authored by Taha's avatar Taha
Browse files

finished linking frontend to api in menu section

parent b72a2b36
Branches link_Menu_API
No related tags found
1 merge request!2Link menu api
Show whitespace changes
Inline Side-by-side
src/components/CreateGame.js
+ 68
− 126
View file @ 214def84
import './CreateGame.css';
import React from 'react';
import ReturnButton from './ReturnButton';
class CreateGame extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({username: event.target.form[0].value});
}
/*createGame(event) {
this.setState({isGameStarted: true});
console.log("Creating game");
function CreateGame(props) {
function handleCreateGame(event) {
event.preventDefault();
const usernameInput = document.getElementById('username');
const username = usernameInput.value;
const url = 'https://localhost:7080/api/game/';
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username })
})
.then(response =>
if(response.status == 200){
await;
.then(response => {
if (response.ok) {
return response;
}
throw new Error('Network response was not ok.');
})
.then(response => response.text())
.then(data => {
// Manipuler les données de la réponse
console.log(data);
})
.then()
.catch(error => console.error('Error:', error))
if(responseCOde = 200){
const id_game = response.id;
const id_player = response.playerId;
//afficher l'id de la game
//mettre le joueur dans la game
url = 'https://localhost:7080/api/game/'+ id_game + '?playerId=' + id_player;
fetch(url, {
props.gameIdCallBack(data);
fetch('https://localhost:7080/api/game/' + data + '?playerId=1', {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
})
}
}*/
createGame(event) {
this.setState({isGameStarted: true});
console.log("Creating game");
const url = 'https://localhost:7080/api/game/';
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username })
})
.then(response => {
if(response.status == 200) {
return response.json(); // renvoie la réponse sous forme de JSON
} else {
throw new Error('Erreur lors de la création de la partie');
if (response.ok) {
return response;
}
throw new Error(response.text());
})
.catch(error => {
alert(error);
// dont execute the rest of the function
return Promise.reject(error);})
.then(response => response.text())
.then(data => {
const id_game = data.id;
const id_player = data.playerId;
console.log('ID de la partie :', id_game);
// Ajouter le joueur à la partie
const url_join = `https://localhost:7080/api/game/${id_game}?playerId=${id_player}`;
return fetch(url_join, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
});
props.playerIdCallBack(1);
})
.then(response => {
if(response.status == 200) {
console.log('Le joueur a été ajouté à la partie');
} else {
throw new Error('Erreur lors de l\'ajout du joueur à la partie');
}
.catch(error => alert(error));
})
.catch(error => console.error('Error:', error));
.catch(error => alert(error));
}
render() {
return (
<React.StrictMode>
<>
<div>
<button className="button" type="button" onClick={ReturnButton}>
<button className="button" type="button" onClick={props.returnButtonCallBack}>
BACK
</button>
</div>
......@@ -118,20 +63,17 @@ class CreateGame extends React.Component {
<div className="CreateGameForm">
<form id='create'>
<label>
<input type="text" placeholder='username' value={this.state.value} onChange={this.handleChange} />
<input type="text" id="username" placeholder='username' />
</label>
<br />
<input type="submit" value="Submit" />
</form>
<button className="button" type="button" onClick={ this.createGame } >
<button className="button" type="button" onClick={handleCreateGame}>
CREATE
</button>
</div>
</React.StrictMode>
</>
);
}
}
export default CreateGame;
\ No newline at end of file
src/components/JoinGame.js
+ 159
− 75
View file @ 214def84
......@@ -4,50 +4,54 @@ import React from 'react';
import Container from '../Container';
import ReturnButton from './ReturnButton';
import { useState, useEffect } from 'react';
function JoinGame(props) {
const [username, setUsername] = useState('');
const [gameid, setGameId] = useState('');
const [isGameStarted, setIsGameStarted] = useState(false);
class JoinGame extends React.Component {
constructor(props) {
super(props);
this.state = {username: '',
gameid: '',
isGameStarted: false};
this.handleChange = this.handleChange.bind(this);
this.joinGame = this.joinGame.bind(this);
function handleChange(event) {
setUsername(event.target.form[0].value);
setGameId(event.target.form[1].value);
}
handleChange(event) {
this.setState({username: event.target.form[0].value,
gameid: event.target.form[1].value});
}
joinGame(event) {
this.setState({isGameStarted: true});
function joinGame(event) {
setIsGameStarted(true);
console.log("Joining game");
const url = 'https://localhost:7080/api/game/' + this.state.gameid + '/' + this.state.username;
const url = 'https://localhost:7080/api/game/' + gameid + '?playerId=2';
console.log(url)
fetch(url, {
method: 'POST',
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
}
})
.then(response =>
response.json())
.catch(error => console.error('Error:', error))
.then(async response => {
if (response.ok) {
return response;
}
const message = await response.text();
throw new Error(message);
})
.catch(error => {
alert(error);
// dont execute the rest of the function
return Promise.reject(error);})
.then(async response => {
const data = await response.text();
props.gameIdCallBack(data);
props.playerIdCallBack(2);
})
.catch(error => {
alert(error);
});
}
//'https://localhost:7080/api/game/'+ this.state.username, pour créer une game
render() {
if (this.state.isGameStarted) {
if (isGameStarted) {
return (
<Container />
);
......@@ -67,27 +71,107 @@ class JoinGame extends React.Component {
<label>
<input type="text"
placeholder='Username'
value={this.state.username}
onChange={this.handleChange} />
value={username}
onChange={handleChange} />
</label>
<br />
<label>
<input type="text"
placeholder='GameId'
value={this.state.gameid}
onChange={this.handleChange} />
value={gameid}
onChange={handleChange} />
</label>
<br />
<input className="button" type="submit" value="Join" onClick={joinGame} />
</form>
<button className="button" type="button" onClick={ this.joinGame }>
JOIN
</button>
</div>
</React.StrictMode>
);
}
}
// class JoinGame extends React.Component {
// constructor(props) {
// super(props);
// this.state = {username: '',
// gameid: '',
// isGameStarted: false};
// this.handleChange = this.handleChange.bind(this);
// this.joinGame = this.joinGame.bind(this);
// }
// handleChange(event) {
// this.setState({username: event.target.form[0].value,
// gameid: event.target.form[1].value});
// }
// joinGame(event) {
// this.setState({isGameStarted: true});
// console.log("Joining game");
// const url = 'https://localhost:7080/api/game/' + this.state.gameid + '/' + this.state.username;
// console.log(url)
// fetch(url, {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json'
// },
// })
// .then(response =>
// response.json())
// .catch(error => console.error('Error:', error))
// }
// //'https://localhost:7080/api/game/'+ this.state.username, pour créer une game
// render() {
// if (this.state.isGameStarted) {
// return (
// <Container />
// );
// }
// return (
// <React.StrictMode>
// <div>
// <button className="button" type="button" onClick={ReturnButton}>
// BACK
// </button>
// </div>
// <div className = "Title">
// <h1>SPATIAL WAR</h1>
// </div>
// <div className = "JoinGameForm">
// <form /*onSubmit={this.handleSubmit}*/>
// <label>
// <input type="text"
// placeholder='Username'
// value={this.state.username}
// onChange={this.handleChange} />
// </label>
// <br/>
// <label>
// <input type="text"
// placeholder='GameId'
// value={this.state.gameid}
// onChange={this.handleChange} />
// </label>
// <br/>
// </form>
// <button className="button" type="button" onClick={ this.joinGame }>
// JOIN
// </button>
// </div>
// </React.StrictMode>
// );
// }
// }
......
src/index.js
+ 39
− 28
View file @ 214def84
......@@ -7,48 +7,59 @@ import App from "./App";
import JoinGame from './components/JoinGame';
import CreateGame from './components/CreateGame';
import reportWebVitals from './reportWebVitals';
import { useState, useEffect } from 'react';
import './index.css';
function Menu() {
const [page, setPage] = useState('menu');
const [playerId, setPlayerId] = useState(null);
const [gameId, setGameId] = useState(null);
function JoinGameMenu(){
root.render(
<React.StrictMode>
<JoinGame />
</React.StrictMode>
);
function returnButtonCallBack() {
setPage('menu');
}
function CreateGameMenu(){
root.render(
<React.StrictMode>
<CreateGame />
</React.StrictMode>
);
function playerIdCallBack(playerId) {
setPlayerId(playerId);
console.log("playerId: " + playerId);
setPage('game');
}
function gameIdCallBack(gameId) {
console.log("gameId: " + gameId);
setGameId(gameId);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
function Menu(){
root.render(
<React.StrictMode>
if (page === 'menu') {
return (
<>
<div className="Title">
<h1>SPATIAL WAR</h1>
</div>
<div className="Buttons">
<button className="button" type="button" onClick={JoinGameMenu}>
<button className="button" type="button" onClick={() => setPage('join')}>
JOIN GAME
</button>
<button className="button" type="button" onClick={CreateGameMenu}>
<button className="button" type="button" onClick={() => setPage('create')}>
CREATE GAME
</button>
</div>
</React.StrictMode>
);
</>);
} else if (page === 'join') {
return <JoinGame returnButtonCallBack={returnButtonCallBack} playerIdCallBack={playerIdCallBack} gameIdCallBack={gameIdCallBack} />;
}
else if (page === 'create') {
return <CreateGame returnButtonCallBack={returnButtonCallBack} playerIdCallBack={playerIdCallBack} gameIdCallBack={gameIdCallBack} />;
}
else if (page === 'game') {
return <App playerId={playerId} gameId={gameId} />;
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment