Merge branch 'main' of https://forge.univ-lyon1.fr/p1907037/elcrawlavers

client/src/components/App.css

@@ -1,6 +1,8 @@
 .App {
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .panels-container {
@@ -11,7 +13,7 @@
   margin-top: 5vh;
 }
 
-@media screen and (max-width: 820px) {
+@media screen and (max-width: 900px) {
   .panels-container {
     flex-direction: column;
     align-items: center;

client/src/components/Game.css

@@ -1,3 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Electrolize&display=swap");
 .transitionScreen {
   position: absolute;
   top: 0;
@@ -75,10 +76,13 @@
   position: absolute;
   bottom: 10px;
   left: 10px;
+  font-weight: 800;
+  font-size: 16px;
   background-color: rgba(0, 0, 0, 0.505);
   color: white;
   border-radius: 5px;
   cursor: pointer;
+  font-family: "Electrolize", sans-serif;
 }
 
 .quitButton:hover {
@@ -98,6 +102,18 @@
   image-rendering: pixelated;
 }
 
+.gamePassword {
+  position: absolute;
+  font-family: "Electrolize", sans-serif;
+  font-weight: 600;
+  top: 210px;
+  left: 10px;
+  border-radius: 10px;
+  padding: 1.5%;
+  background-color: rgb(175, 82, 141);
+  color: white;
+}
+
 body {
   /* Cover font image local image */
   background-image: url(./ress/background.png);

client/src/components/Game.tsx

@@ -41,6 +41,8 @@ const Game: FC<GameProps> = ({ setGameStarted }): JSX.Element => {
 
       <canvas id="miniMap" className="miniMap"></canvas>
 
+      <p id="gamePassword" className="gamePassword"></p>
+
       <img id="soundBtn" src="./ress/mute.png" alt="" />
     </>
   );

client/src/components/Menu/Header/Connection/Connect.css

@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Electrolize&display=swap");
 
 .connexion-area-container {
-  width: 25%;
+  width: 20%;
   max-width: 150px;
   display: flex;
   justify-content: space-between;
@@ -14,7 +14,7 @@
   color: white;
   text-transform: uppercase;
   padding: 10%;
-  font-size: 13px;
+  font-size: 12px;
   border-radius: 10px;
   background-color: #ffa01b;
   border: 2px solid #e8476a;
@@ -55,8 +55,8 @@
 .icon-account-container,
 .icon-logout-container {
   display: flex;
-  padding: 11%;
-  font-size: 22px;
+  padding: 10%;
+  font-size: 20px;
   color: #fff2ec;
   cursor: pointer;
   box-shadow: #e8476a 0px 2px 4px, rgba(232, 71, 106, 0.3) 0px 7px 13px -3px,

client/src/components/Menu/Header/Connection/ConnectionModal.css

@@ -1,5 +1,9 @@
 @import url("https://fonts.googleapis.com/css2?family=Electrolize&display=swap");
 
+.loginModalContainer {
+  z-index: 5;
+}
+
 .dark_bg {
   background-color: #000000;
   opacity: 0.5;
@@ -9,7 +13,6 @@
   left: 50%;
   width: 100%;
   height: 100%;
-  z-index: 2;
 }
 
 .centered {
@@ -26,7 +29,7 @@
   display: flex;
   font-family: "Wendy One";
   flex-direction: column;
-  background: white;
+  background: rgb(255, 255, 255);
   color: white;
   border-radius: 16px;
   box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);

client/src/components/Menu/Header/Connection/ConnectionModal.tsx

@@ -12,7 +12,7 @@ interface ConnectionModalProps {
 const ConnectionModal: FC<ConnectionModalProps> = (props): JSX.Element => {
   const { setIsOpen, setIsConnectionModalOpen } = props;
   return (
-    <>
+    <div className="loginModalContainer">
       <div className="dark_bg" onClick={() => setIsOpen(false)} />
       <div className="centered">
         <div className="modal">
@@ -35,7 +35,7 @@ const ConnectionModal: FC<ConnectionModalProps> = (props): JSX.Element => {
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

client/src/components/Menu/Rooms/Modals/ModalComponents/IsPrivate.css → client/src/components/Menu/Rooms/Modals/CreateComponents/IsPrivate.css

@@ -10,6 +10,7 @@
   font-weight: 600;
   font-size: 18px;
   padding: 0% 3% 0 0%;
+  min-width: 70px;
 }
 
 .toggler {

client/src/components/Menu/Rooms/Modals/ModalComponents/NbPlayersMax.tsx → client/src/components/Menu/Rooms/Modals/CreateComponents/NbPlayersMax.tsx

@@ -21,9 +21,8 @@ export const NbPlayers: FC<Props> = ({ _nbPlayers, setNbPlayers }) => {
         value={_nbPlayers}
         id="nbMaxPlayers"
         name="tentacles"
-        min="10"
+        min="2"
         max="100"
-        step="10"
         required
         onChange={(e) => handleChange(e)}
       />

client/src/components/Menu/Rooms/Modals/ModalComponents/RoomName.css → client/src/components/Menu/Rooms/Modals/CreateComponents/RoomName.css

@@ -1,7 +1,7 @@
 .name-container {
   padding: 1% 1% 1% 1%;
   display: flex;
-  width: 80%;
+  width: 60%;
   margin-bottom: 6%;
   min-width: 200px;
 }
@@ -14,7 +14,7 @@
 }
 
 .name-input {
-  width: 50%;
+  width: 40%;
   padding: 3.6%;
   font-size: 14px;
   border-radius: 5px;

client/src/components/Menu/Rooms/Modals/ModalComponents/SubmitAndReset.css → client/src/components/Menu/Rooms/Modals/CreateComponents/SubmitAndReset.css

@@ -66,3 +66,12 @@
   text-shadow: 1px 1px 1px rgba(255, 0, 0, 0.5);
   font-size: 17px;
 }
+
+@media screen and (max-width: 1060px) {
+  .submit-container {
+    flex-direction: row;
+    width: 50%;
+    padding: 4.5%;
+    margin-top: 5%;
+  }
+}

client/src/components/Menu/Rooms/Modals/CreateModal.css

@@ -1,6 +1,5 @@
 .modal {
   width: 100%;
-  background-color: transparent;
   min-width: 325px;
 }
 
@@ -45,9 +44,10 @@
   -o-transition: ease 0.4s;
 }
 
-.title {
+.title-modal-creation {
   margin: 0 0 1% 0;
   padding-bottom: 5%;
+  font-weight: bolder;
   text-align: center;
   z-index: 2;
 }
@@ -72,3 +72,9 @@
   border-color: #ffa01b;
   padding: 0 0 0 2%;
 }
+
+@media screen and (max-width: 1060px) {
+  .imputs-form {
+    flex-direction: column;
+  }
+}

client/src/components/Menu/Rooms/Modals/CreateModal.tsx

@@ -2,11 +2,11 @@ import React, { useEffect, useState } from "react";
 import { FC } from "react";
 import "./CreateModal.css";
 import { CgClose } from "react-icons/cg";
-import RoomName from "./ModalComponents/RoomName";
-import NbPlayersMax from "./ModalComponents/NbPlayersMax";
-import IsPrivate from "./ModalComponents/IsPrivate";
-import SubmitAndReset from "./ModalComponents/SubmitAndReset";
-import MapSize from "./ModalComponents/MapSize";
+import RoomName from "./CreateComponents/RoomName";
+import NbPlayersMax from "./CreateComponents/NbPlayersMax";
+import IsPrivate from "./CreateComponents/IsPrivate";
+import SubmitAndReset from "./CreateComponents/SubmitAndReset";
+import MapSize from "./CreateComponents/MapSize";
 
 interface Props {
   modalIsOpen: boolean;
@@ -68,28 +68,26 @@ const CreateModal: FC<Props> = ({
   };
 
   return (
-    <div className="modal">
-      <div className="create-container">
-        <div className="close-icon-container">
-          <span className="close-icon" onClick={() => setModalIsOpen(false)}>
-            <CgClose />
-          </span>
-        </div>
-        <h2 className="title">⚒️ Game Creation ⚒️</h2>
-        <div className="form-container">
-          <form className="imputs-form" onSubmit={handleSubmit}>
-            <div className="form-field-container">
-              <RoomName _roomName={_roomName} setRoomName={setRoomName} />
-              <NbPlayersMax
-                _nbPlayers={_nbPlayersMax}
-                setNbPlayers={setNbPlayersMax}
-              />
-              <MapSize _boardSize={_boardSize} setBoardSize={setBoardSize} />
-              <IsPrivate _isPrivate={_isPrivate} setIsPrivate={setIsPrivate} />
-            </div>
-            <SubmitAndReset />
-          </form>
-        </div>
+    <div className="create-container">
+      <div className="close-icon-container">
+        <span className="close-icon" onClick={() => setModalIsOpen(false)}>
+          <CgClose />
+        </span>
+      </div>
+      <h2 className="title-modal-creation">⚒️ Game Creation ⚒️</h2>
+      <div className="form-container">
+        <form className="imputs-form" onSubmit={handleSubmit}>
+          <div className="form-field-container">
+            <RoomName _roomName={_roomName} setRoomName={setRoomName} />
+            <NbPlayersMax
+              _nbPlayers={_nbPlayersMax}
+              setNbPlayers={setNbPlayersMax}
+            />
+            <MapSize _boardSize={_boardSize} setBoardSize={setBoardSize} />
+            <IsPrivate _isPrivate={_isPrivate} setIsPrivate={setIsPrivate} />
+          </div>
+          <SubmitAndReset />
+        </form>
       </div>
     </div>
   );

client/src/components/Menu/Rooms/RoomComponents/RoomMap.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React, { FC, useState } from "react";
 import "./RoomMap.css";
 import SingleRoom from "./SingleRoom/SingleRoom";
 import Room from "../RoomModel";
@@ -8,12 +8,14 @@ interface Props {
   rooms: Room[];
   setModalIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   setIsConnectionModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsGameStarted: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const Rooms: FC<Props> = ({
   rooms,
   setModalIsOpen,
   setIsConnectionModalOpen,
+  setIsGameStarted,
 }) => {
   return rooms.length == 0 ? (
     <div className="rooms-empty">
@@ -34,6 +36,8 @@ const Rooms: FC<Props> = ({
               connectedPlayersCount={room.connectedPlayersCount}
               nbPlayersMax={room.nbPlayersMax}
               isPrivate={room.isPrivate}
+              setIsConnectionModalOpen={setIsConnectionModalOpen}
+              setIsGameStarted={setIsGameStarted}
             />
           </div>
         ))}

client/src/components/Menu/Rooms/RoomComponents/SingleRoom/SingleRoom.css

@@ -4,8 +4,8 @@
   background-color: white;
   color: rgba(33, 33, 33, 0.918);
   width: 100%;
-  padding: 5px 0px 5px 4px;
-  margin-bottom: 6px;
+  padding: 4%;
+  margin-bottom: 4%;
   font-size: 16px;
   border-radius: 3px;
   box-shadow: rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
@@ -19,6 +19,19 @@
   cursor: pointer;
 }
 
+.single-room-container-modal {
+  display: flex;
+  background-color: rgb(239, 255, 217);
+  color: rgba(33, 33, 33, 0.918);
+  width: 100%;
+  padding: 4%;
+  margin-bottom: 4%;
+  font-size: 16px;
+  border-radius: 3px;
+  box-shadow: rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
+    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+}
+
 .single-room-container:hover {
   background-color: #be8b95;
   color: whitesmoke;
@@ -31,35 +44,12 @@
   -o-transition: 0.2s;
 }
 
-.lock-icon {
-  padding-right: 6%;
-}
-
 .room-name {
   display: flex;
 }
 
-.players-number {
-  display: flex;
-  margin-right: 3%;
-}
-
-.room-nbPlayers-Full {
-  display: flex;
-  justify-content: flex-end;
-  position: absolute;
-  right: 10px;
-  width: 220px;
-  color: rgb(255, 35, 35);
-}
-
-.single-room-container:hover > .room-nbPlayers-Full {
-  color: rgb(255, 217, 217);
-  text-shadow: red 0px 0px 5px;
-}
-
 .room-nbPlayers {
   display: flex;
   justify-content: flex-end;
-  position: absolute;
+  padding-right: 2%;
 }