fix responsive

src/main.css

@@ -42,19 +42,19 @@ body {
 
 @media (min-width: 1600px) {
   html {
-    font-size: 17px;
+    font-size: 14px;
   }
 }
 
 @media (min-width: 1800px) {
   html {
-    font-size: 19px;
+    font-size: 15px;
   }
 }
 
 @media (min-width: 2000px) {
   html {
-    font-size: 20px;
+    font-size: 17px;
   }
 }
 

src/pages/CreateServer/CreateServer.module.scss

@@ -26,7 +26,6 @@
 }
 
 .GamesContainer {
-  margin-top: 2.5rem;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -90,20 +89,23 @@ img {
   .GamesContainer {
     flex-direction: column;
     flex-wrap: row;
-    margin-top: 40rem;
     height: 100%;
-
+    margin-top: 45rem;
   }
 
   .GameCard {
-    margin: 1rem;
+    margin: 0rem 0rem .5rem 0rem;
     width: 20rem;
     padding: 2.5rem;
   }
-}
 
-@media (max-width: 750px) {
+  .GamesChoice {
-  .GamesContainer {
+    margin-top: 35rem;
-    margin-top: 50rem;
   }
+
+  .title {
+    margin-top: 2rem;
+  }
+  
+  
 }

src/pages/CreateServer/modpack/modpack.jsx

@@ -10,16 +10,13 @@ const Modpack = ({ user }) => {
   const [modpacks, setModpacks] = useState([]);
   const [selectedModpackIndex, setSelectedModpackIndex] = useState(null); 
   const [error, setError] = useState('');
-  const [serverShortName, setServerShortName] = useState(''); 
 
   useEffect(() => {
     const fetchModpacks = async () => {
       try {
         const response = await serviiApi.fetchModpacks();
         if (response.return_code === 200) {
-          const fetchedModpacks = response.message;
+          setModpacks(response.message);
-
-          setModpacks(fetchedModpacks);
         } else {
           setError(response.message);
         }
@@ -36,22 +33,23 @@ const Modpack = ({ user }) => {
     setSelectedModpackIndex(index); 
   };
 
-
   const handleCancel = () => {
-    setSelectedModpackIndex(null); 
+    console.log("Annuler cliqué, index sélectionné avant :", selectedModpackIndex);
-    console.log("dffdff");
+    setSelectedModpackIndex(null); // Remise à zéro de l'index sélectionné
   };
   
-
   const handleCreate = async () => {
-    try {
+    if (selectedModpackIndex !== null) {
-      const framework =  selectedModpackIndex.framework;        
+      const selectedModpack = modpacks[selectedModpackIndex]; 
-      await serviiApi.serverCreate(selectedModpackIndex.short_name, selectedModpackIndex.short_name, framework);
+      const { short_name, framework } = selectedModpack; 
-      console.log(selectedModpackIndex.short_name, selectedModpackIndex.short_name, framework);
+  
-      navigate('/Dashboard');
+      try {
-  } catch (error) {
+        await serviiApi.serverCreate(short_name, short_name, framework); 
-      console.error('Error creating server:', error);
+        navigate('/Dashboard'); 
-  }
+      } catch (error) {
+        console.error('Error creating server:', error); 
+      }
+    }
   };
 
   return (
@@ -67,7 +65,7 @@ const Modpack = ({ user }) => {
         {error ? <h2>{error}</h2> : (
           modpacks.map((modpack, index) => (
             <div 
-              key={index} 
+              key={`modpack-${index}`}
               className={`${styles.modpackCard} ${selectedModpackIndex === index ? styles.selected : ''}`} 
               onClick={() => handleModpackClick(index)}
             >
@@ -84,13 +82,11 @@ const Modpack = ({ user }) => {
                 <span>Version MC: {modpack.mcVersion}</span>
                 <span>Version Modpack: {modpack.version}</span>
               </div>
-
+              {selectedModpackIndex === index && ( // Condition modifiée
-              {selectedModpackIndex === index && (
                 <div className={styles.overlay}>
                   <div className={styles.shortNamtitle}>Créer le serveur {modpack.short_name} ?</div>
                   <button className={styles.createButton} onClick={handleCreate}>Créer</button>
                   <button className={styles.cancelButton} onClick={handleCancel}>Annuler</button>
-                  
                 </div>
               )}
             </div>

src/pages/CreateServer/modpack/modpack.module.scss

@@ -1,155 +1,154 @@
 .Container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 6rem;
+}
+
+.modpackGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
+  gap: 2rem;
+  width: 100%;
+  padding: 1.5rem;
+}
+
+.modpackCard {
+  background-color: #f9f9f9;
+  border: 1px solid #ddd;
+  border-radius: .7rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 2rem;
+  width: 30rem;
+  text-align: center;
+  transition: all 0.3s ease; /* Ajout de la transition pour l'état sélectionné/non-sélectionné */
+  cursor: pointer;
+  position: relative;
+
+  &:hover {
+    transform: translateY(-.2rem);
+  }
+
+  .content {
+    transition: filter 0.3s ease; /* Transition pour le flou */
+    filter: none; /* Par défaut, pas de flou */
+  }
+
+  &.selected .content {
+    filter: blur(0.8rem); /* Appliquer le flou si sélectionné */
+  }
+
+  h3 {
+    margin: .8rem 0;
+    font-size: 1.5em;
+    color: #333;
+  }
+
+  p {
+    font-size: 1em;
+    color: #666;
+  }
+
+  .modpackImage {
+    width: 100%;
+    height: auto;
+    margin-bottom: 1rem;
+  }
+
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: .5rem;
+    margin: 2.5rem 0rem;
+
+    .tag {
+      display: flex;
+      align-items: center;
+      padding: .4rem .8rem;
+      border-radius: 1.5rem;
+      font-size: 0.9em;
+      font-weight: 500;
+      color: #fff;
+
+      &.adventure {
+        background-color: #4CAF50;
+      }
+
+      &.combat {
+        background-color: #E91E63;
+      }
+
+      &.pve {
+        background-color: #2196F3;
+      }
+
+      &.forge {
+        background-color: #FFC107;
+      }
+    }
+  }
+
+  .meta {
+    display: flex;
+    justify-content: space-between;
+    font-size: .9rem;
+    color: #999;
+  }
+
+  .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.9);
     display: flex;
     flex-direction: column;
+    justify-content: center;
     align-items: center;
-    padding: 6rem;
+    gap: 1rem;
-  }
+    z-index: 10;
-  
+
-  .modpackGrid {
+    h4 {
-    display: grid;
+      font-size: 1.8rem;
-    grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
-    gap: 2rem;
-    width: 100%;
-    padding: 1.5rem;
-  }
-  
-  .modpackCard {
-    background-color: #f9f9f9;
-    border: 1px solid #ddd;
-    border-radius: .7rem;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    padding: 2rem;
-    width: 30rem;
-    text-align: center;
-    transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
-    cursor: pointer;
-    position: relative;
-    
-    &:hover {
-      transform: translateY(-.2rem);
-    }
-  
-    .content {
-      transition: filter 0.2s ease-in-out;
-    }
-  
-    &.selected .content {
-        filter: blur(.8rem); 
-      }
-      
-    
-    h3 {
-      margin: .8rem 0;
-      font-size: 1.5em;
       color: #333;
-    }
-  
-    p {
-      font-size: 1em;
-      color: #666;
-    }
-  
-    .modpackImage {
-      width: 100%;
-      height: auto;
       margin-bottom: 1rem;
     }
-  
+
-    .tags {
+    .createButton {
-      display: flex;
+      background-color: black;
-      flex-wrap: wrap;
+      color: white;
-      justify-content: center;
+      padding: 0.5rem 1.5rem;
-      gap: .5rem;
+      border: none;
-      margin: 2.5rem 0rem;
+      border-radius: 5px;
-  
+      cursor: pointer;
-      .tag {
+      font-size: 1.25rem;
-        display: flex;
-        align-items: center;
-        padding: .4rem .8rem;
-        border-radius: 1.5rem;
-        font-size: 0.9em;
-        font-weight: 500;
-        color: #fff;
-  
-        &.adventure {
-          background-color: #4CAF50;
-        }
-  
-        &.combat {
-          background-color: #E91E63;
-        }
-  
-        &.pve {
-          background-color: #2196F3;
-        }
-  
-        &.forge {
-          background-color: #FFC107;
-        }
-      }
     }
-  
+
-    .meta {
+    .createButton:hover {
-      display: flex;
+      background-color: #252525bb;
-      justify-content: space-between;
-      font-size: .9rem;
-      color: #999;
     }
-  
+
-    .overlay {
+    .cancelButton {
-      position: absolute;
+      background-color: gray;
-      top: 0;
+      color: white;
-      left: 0;
+      padding: 0.5rem 1.5rem;
-      right: 0;
+      border: none;
-      bottom: 0;
+      border-radius: 5px;
-      background: rgba(255, 255, 255, 0.9);
+      cursor: pointer;
-      display: flex;
+      font-size: 1.25rem;
-      flex-direction: column;
+    }
-      justify-content: center;
+
-      align-items: center;
+    .cancelButton:hover {
-      gap: 1rem;
+      background-color: rgba(95, 95, 95, 0.685);
-      z-index: 10;
+    }
-    
+
-      h4 {
+    .shortNamtitle {
-        font-size: 1.8rem;
+      font-weight: 400;
-        color: #333;
+      font-size: 1.5rem;
-        margin-bottom: 1rem;
+      color: #333;
-      }
+      margin-bottom: 1rem;
-  
-      .createButton {
-        background-color: black;
-        color: white;
-        padding: 0.5rem 1.5rem;
-        border: none;
-        border-radius: 5px;
-        cursor: pointer;
-        font-size: 1.25rem;
-      }
-  
-      .createButton:hover {
-        background-color: #252525bb;
-      }
-  
-      .cancelButton {
-        background-color: gray;
-        color: white;
-        padding: 0.5rem 1.5rem;
-        border: none;
-        border-radius: 5px;
-        cursor: pointer;
-        font-size: 1.25rem;
-      }
-  
-      .cancelButton:hover {
-        background-color: rgba(95, 95, 95, 0.685);
-      }
-  
-      .shortNamtitle {
-        font-weight: 400;
-        font-size: 1.5rem;
-        color: #333;
-        margin-bottom: 1rem;
-      }
     }
   }
-  
+}