Crypteam
/
Cryptid
4
0
Fork 0
Code Issues 10 Pull Requests Packages Projects 9 Releases Wiki Activity
Labels Milestones
New Pull Request

lobbyfix 🎨 #93

Merged
pierre.ferreira merged 7 commits from lobbyfix into master 7 months ago
Conversation 0 Commits 7 Files Changed 6
6 changed files with 186 additions and 89 deletions
Show Stats Download Patch File Download Diff File

128
cryptide_project/src/Components/LobbyContainer.tsx
Unescape View File

@ -8,83 +8,149 @@ import Modal from 'react-bootstrap/Modal';
import Offcanvas from 'react-bootstrap/Offcanvas';
import Button from 'react-bootstrap/Button';
import { socket } from '../SocketConfig';
import Tooltip from 'react-bootstrap/esm/Tooltip';
import OverlayTrigger from 'react-bootstrap/esm/OverlayTrigger';
interface LobbyContainerProps {
roomNum : string
HeadPlayer : Player
nbPlayer : number
setFirst: (first: boolean) => void
started : boolean
//? mettre un "nbplayermax" si le nombre de joueur max peut etre fixé ?
}
const LobbyContainer: React.FC<LobbyContainerProps> = ({roomNum, HeadPlayer, nbPlayer, setFirst}) => {
const LobbyContainer: React.FC<LobbyContainerProps> = ({roomNum, HeadPlayer, nbPlayer, setFirst, started}) => {
const theme=useTheme();
const navigate = useNavigate();
const dest = '/lobby?room=' + roomNum;
//* Modal
const [show, setShow] = useState(false);
const [showFull, setShowFull] = useState(false);
const [showStart, setShowStart] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const handleClose = () => {
setShowFull(false)
setShowStart(false)
};
const handleShowFull = () => setShowFull(true);
const handleShowStart = () => setShowStart(true);
const handleContainerClick = () => {
if (show){
if (showFull || showStart){
handleClose()
}
else{
if (nbPlayer < 6) {
if (nbPlayer < 6 && !started) {
socket.off("request lobbies")
setFirst(true)
navigate(dest);
} else {
handleShow()
//alert('La salle est pleine. Impossible de rejoindre.');
}
else if(started){
handleShowStart()
}
else {
handleShowFull()
}
}
};
//* popup pour salle pleine
//@ts-ignore
const renderTooltipFull = (props) => (
<Tooltip id="button-tooltip" {...props}>
Salle Pleine !
</Tooltip>
);
//* popup pour partie déjà lancé
//@ts-ignore
const renderTooltipInGame = (props) => (
<Tooltip id="button-tooltip" {...props}>
En Jeu !
</Tooltip>
);
//* autre
//@ts-ignore
const renderTooltip = (props) => (
<Tooltip id="button-tooltip" {...props}>
Rejoindre le lobby !
</Tooltip>
);
//let IsInGame = true;
let stylefull;
let colorfull;
let actualRender = renderTooltip;
let bgcol = 'white';
if (nbPlayer >= 6) {
stylefull = "darkred"
colorfull = "darkred"
actualRender = renderTooltipFull
}
else {
stylefull = "whitesmoke"
colorfull = "black"
}
if(started){
bgcol = 'lightgrey' //! le hover ne marche plus
actualRender = renderTooltipInGame
}
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>
<OverlayTrigger
placement="top"
delay={{ show: 250, hide: 400 }}
overlay={actualRender}>
<div className='lobbyMainContainer' onClick={handleContainerClick} style={{borderColor:stylefull, backgroundColor:bgcol}}>
<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>
{/* Modals */}
<Modal show={showFull} 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>
<Modal show={showStart} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>La partie a déjà commencée</Modal.Title>
</Modal.Header>
<Modal.Body>La partie a déjà commencée, il est impossible d'y aller pour le moment !</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Ok
</Button>
</Modal.Footer>
</Modal>
</Modal.Footer>
</Modal>
</div>
</OverlayTrigger>
);
}

4
cryptide_project/src/Pages/Lobbies.css
Unescape View File

@ -18,6 +18,10 @@
cursor: pointer;
}
.lobbyMainContainer:hover{
background-color: whitesmoke;
}
.lobbyList{
display: flex;
/* justify-content: space-around; */

62
cryptide_project/src/Pages/Lobbies.tsx
Unescape View File

@ -39,10 +39,26 @@ function Lobbies() {
const [searchTerm, setSearchTerm] = useState('');
const [showAvailable, setShowAvailable] = useState(true);
const handleShowAllClick = () => {
setShowAvailable(false);
};
const handleShowAvailableClick = () => {
setShowAvailable(true);
};
const filteredLobbies = lobbyData.filter((lobby) =>
lobby.roomNum.toLowerCase().includes(searchTerm.toLowerCase()) ||
lobby.headPlayer.pseudo.toLowerCase().includes(searchTerm.toLowerCase())
);
lobby.roomNum.toLowerCase().includes(searchTerm.toLowerCase()) ||
lobby.headPlayer.pseudo.toLowerCase().includes(searchTerm.toLowerCase())
);
const filteredLobbiesToShow = showAvailable
? filteredLobbies.filter((lobby) => lobby.started == false)
: filteredLobbies;
const setFirstData = (first: boolean) => {
@ -86,14 +102,52 @@ function Lobbies() {
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
{/* <div>
<button style={{borderColor:'whitesmoke', borderRadius:'15px 0px 0px 15px', padding:'5px'}}
onClick={() => setShowAvailable(false)}>Tous</button>
<button style={{borderColor:'whitesmoke', borderRadius:'0px 15px 15px 0px', padding:'5px'}}
onClick={() => setShowAvailable(true)}>Dispo</button>
</div> */}
<div style={{border:'solid 3px', borderColor:'lightgray', borderRadius:'20px', margin:'10px'}}>
<button
style={{
border:'solid',
borderStyle:'none',
borderRadius: '15px 0px 0px 15px',
borderWidth: '2px',
padding: '10px 15px',
backgroundColor: !showAvailable ? 'white' : 'lightgray',
}}
onClick={handleShowAllClick}
>
Tous
</button>
<button
style={{
border:'solid',
borderStyle:'none',
borderRadius: '0px 15px 15px 0px',
padding: '10px 15px',
backgroundColor: showAvailable ? 'white' : 'lightgray',
}}
onClick={handleShowAvailableClick}
>
Disponible
</button>
</div>
<div className="lobbyList">
{filteredLobbies.map((lobby, index) => (
{filteredLobbiesToShow.map((lobby, index) => (
<LobbyContainer
key={index}
roomNum={lobby.roomNum}
HeadPlayer={lobby.headPlayer}
nbPlayer={lobby.nbPlayer}
setFirst={setFirstData}
started={lobby.started}
/>
))}
</div>

9
cryptide_project/src/Pages/Lobby.css
Unescape View File

@ -41,6 +41,13 @@
margin: 20px;
}
.NumbDiv{
display: flex;
align-items: start;
justify-content: start;
margin: auto 20px;
}
.codeDiv{
display: flex;
align-items: end;
@ -48,7 +55,7 @@
margin: auto 20px;
}
.codeDiv p{
.codeDiv p, .NumbDiv p{
font-style: italic;
font-weight: bold;
color: gray;

72
cryptide_project/src/Pages/Lobby.tsx
Unescape View File

@ -254,15 +254,26 @@ function Lobby() {
<div className='lobby-container'>
<div className='left-part'>
<div className='player-board'>
<div className='codeDiv' onClick={() => setCodeShowed(!codeShowed)}>
{
codeShowed ? (
<p>Room : {room}</p>
) : (
<p>Room : ******</p>
)
}
<div>
<div className='codeDiv' onClick={() => setCodeShowed(!codeShowed)}>
{
codeShowed ? (
<p>Room : {room}</p>
) : (
<p>Room : ******</p>
)
}
</div>
<div className='NumbDiv'>
{players.length == 6 ? (
<p style={{color:'darkred'}}>6/6 Players</p>
) : (
<p>{players.length}/6 Players</p>
)
}
</div>
</div>
{/* //! voir pour la gestion avec un liste, utilisateur avec le "+ (vous)" et les pdp avec les lettres grecs (?)*/}
{players.map((player, index) => (
// <PlayerItemList key={player.id} pdp={PersonImg} name={player.name} id={player.id}/>
@ -283,28 +294,6 @@ function Lobby() {
<div className="lobby-vertical-divider" style={{backgroundColor: theme.colors.secondary}}></div>
<div className='right-part'>
{/* <div className='title-param-div'>
<img src={param} alt="param"/>
<h2>Paramètre de la partie</h2>
</div>
<ul>
<li><h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim</h4></li>
<li><h4>paramètre super important pour la partie</h4></li>
<li><h4>paramètre super important pour la partie</h4></li>
<li><h4>paramètre super important pour la partie</h4></li>
<li><h4>Niveau des bots : Facile </h4></li>
<li><h4>Thèmes : basique </h4></li> */}
{
//? mettre un timer pour chaques personne ?
//? indice avancé ? ==> négation, voisin du 2e degré etc.
}
{/* </ul> */}
{/* <center >
<button className='buttonNabImg' onClick={StartGame}>
<img src={cible} alt="Button Image" height="50" width="50" />
<p>{"la chasse !"}</p>
</button>
</center> */}
<div className='lobbyR'
style={{flexDirection:'column',
alignItems:'space-around'}}>
@ -368,29 +357,6 @@ function Lobby() {
Démarrer la partie !
</button>
</div>
{/* <div className='centerDivH'>
<div>
<label htmlFor="numberInput">Séléctionner le nombre de noeud (entre 20 et 60) :</label>
<input
type="number"
id="numberInput"
value={enteredNumber}
onChange={handleNumberChange}
min={20}
max={60}/>
<p>La valeur saisie : {enteredNumber}</p>
</div>
<div className='centerDivH'>
<button className='button' onClick={StartGame}
style={{
backgroundColor: theme.colors.tertiary,
borderColor: theme.colors.secondary
}}>
<img src={cible} alt="cible" height="40"/>
</button>
</div> */}
</div>
</div>
);

BIN
cryptide_project/src/server/db/socialgraph.db
View File

Binary file not shown.
Write Preview
Loading…
Cancel
Save