@ -0,0 +1,90 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useTheme } from '../Style/ThemeContext';
|
||||
import Player from '../model/Player';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import Modal from 'react-bootstrap/Modal';
|
||||
import Offcanvas from 'react-bootstrap/Offcanvas';
|
||||
import Button from 'react-bootstrap/Button';
|
||||
|
||||
interface LobbyContainerProps {
|
||||
roomNum : string
|
||||
HeadPlayer : Player
|
||||
nbPlayer : number
|
||||
//? mettre un "nbplayermax" si le nombre de joueur max peut etre fixé ?
|
||||
}
|
||||
|
||||
const LobbyContainer: React.FC<LobbyContainerProps> = ({roomNum, HeadPlayer, nbPlayer}) => {
|
||||
const theme=useTheme();
|
||||
|
||||
|
||||
|
||||
|
||||
const navigate = useNavigate();
|
||||
const dest = '/lobby?room=' + roomNum;
|
||||
|
||||
//* Modal
|
||||
const [show, setShow] = useState(false);
|
||||
|
||||
const handleClose = () => setShow(false);
|
||||
const handleShow = () => setShow(true);
|
||||
|
||||
const handleContainerClick = () => {
|
||||
|
||||
if (show){
|
||||
handleClose()
|
||||
}
|
||||
else{
|
||||
if (nbPlayer < 6) {
|
||||
navigate(dest);
|
||||
} else {
|
||||
handleShow()
|
||||
//alert('La salle est pleine. Impossible de rejoindre.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let stylefull;
|
||||
let colorfull;
|
||||
if (nbPlayer >= 6) {
|
||||
stylefull = "darkred"
|
||||
colorfull = "darkred"
|
||||
}
|
||||
else {
|
||||
stylefull = "whitesmoke"
|
||||
colorfull = "black"
|
||||
}
|
||||
|
||||
return(
|
||||
<div className='lobbyMainContainer' onClick={handleContainerClick} style={{borderColor:stylefull}}>
|
||||
<header style={{height:'20%', display:'flex', justifyContent:'end'}}>
|
||||
<h6><i>Room : {roomNum}</i></h6>
|
||||
</header>
|
||||
<hr/>
|
||||
<h3><b>{HeadPlayer.pseudo}</b></h3>
|
||||
<div style={{display:'flex', justifyContent:'end', alignItems:'end'}}>
|
||||
<h2 style={{color:colorfull}}>{nbPlayer}/6</h2>
|
||||
</div>
|
||||
{/*
|
||||
<Button onClick={handleContainerClick} variant='danger'>
|
||||
click
|
||||
</Button> */}
|
||||
|
||||
<Modal show={show} onHide={handleClose}>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>Salle pleine</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>La salle est pleine, il est impossible d'y aller pour le moment !</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button variant="secondary" onClick={handleClose}>
|
||||
Ok
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default LobbyContainer;
|
||||
@ -0,0 +1,42 @@
|
||||
.lobbyMainContainer{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background-color: white;
|
||||
|
||||
border: solid 1px whitesmoke;
|
||||
border-radius: 15px;
|
||||
box-shadow: 5px 5px 5px rgb(246, 246, 246);
|
||||
|
||||
width: 300px;
|
||||
/* max-width: 300px; */
|
||||
/* max-width: 20%; */
|
||||
max-height: 200px;
|
||||
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lobbyList{
|
||||
display: flex;
|
||||
/* justify-content: space-around; */
|
||||
/* columns: 4; */
|
||||
flex-wrap: wrap;
|
||||
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.searchLobby{
|
||||
border: solid 1px whitesmoke;
|
||||
border-radius: 15px;
|
||||
padding: 15px;
|
||||
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
|
||||
h1{
|
||||
margin: 50px !important;
|
||||
font-family: "Raleway", sans-serif;
|
||||
}
|
||||
@ -0,0 +1,59 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
/* Style */
|
||||
import './Lobbies.css';
|
||||
import "../Style/Global.css"
|
||||
import { useTheme } from '../Style/ThemeContext';
|
||||
import LobbyContainer from '../Components/LobbyContainer';
|
||||
import Player from '../model/Player';
|
||||
import User from '../model/User';
|
||||
|
||||
|
||||
function Lobbies() {
|
||||
const theme=useTheme();
|
||||
|
||||
|
||||
const lobbyData = [
|
||||
{ roomNum: '63194', headPlayer: new User('1', 'Emma', '', null, null), nbPlayer: 6 },
|
||||
{ roomNum: '81194', headPlayer: new User('2', 'Ray', '', null, null), nbPlayer: 1 },
|
||||
{ roomNum: '22194', headPlayer: new User('3', 'Norman', '', null, null), nbPlayer: 4 },
|
||||
{ roomNum: 'null', headPlayer: new User('null', 'tnull', '', null, null), nbPlayer: 1 },
|
||||
{ roomNum: '111111', headPlayer: new User('11', '1111111', '', null, null), nbPlayer: 1 },
|
||||
{ roomNum: '741852963', headPlayer: new User('3', 'Guest_741852963', '', null, null), nbPlayer: 6 },
|
||||
];
|
||||
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
const filteredLobbies = lobbyData.filter((lobby) =>
|
||||
lobby.roomNum.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
lobby.headPlayer.pseudo.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
|
||||
|
||||
return(
|
||||
<div style={{display:'flex', flexDirection:'column', alignItems:'center'}}>
|
||||
<h1>Bienvenue dans le lobby des lobbies</h1>
|
||||
<input
|
||||
type="text"
|
||||
className='searchLobby'
|
||||
placeholder="Rechercher un lobby..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
<div className="lobbyList">
|
||||
{filteredLobbies.map((lobby, index) => (
|
||||
<LobbyContainer
|
||||
key={index}
|
||||
roomNum={lobby.roomNum}
|
||||
HeadPlayer={lobby.headPlayer}
|
||||
nbPlayer={lobby.nbPlayer}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Lobbies;
|
||||
Loading…
Reference in new issue