newcreatepage

src/components/CreateServer/CreateServer.jsx

@@ -3,26 +3,18 @@ import styles from './CreateServer.module.scss';
 import { getUserSubdomain } from "../../service/firebase";
 import serviiApi from "../../service/api.tsx";
 import PropTypes from "prop-types";
-
+import { GoTag, GoCheck } from "react-icons/go";
-import vanilla from '../../assets/frameworks/vanilla.png';
-import bukkit from '../../assets/frameworks/bukkit.png';
-import spigot from '../../assets/frameworks/spigot.png';
-import paper from '../../assets/frameworks/paper.png';
 
 const versions = {
-  vanilla:[  "1.21.1", "1.21", "1.20.6", "1.20.5", "1.20.4", "1.20.2", "1.20.1", "1.19.4", "1.19.3", "1.19.2", "1.19.1",   "1.18.2", "1.18.1", "1.17.1", "1.16.5", "1.16.4", "1.16.3", "1.16.2", "1.16.1", "1.15.2", "1.15.1", "1.14.4",   "1.14.3", "1.14.2", "1.14.1", "1.13.2", "1.13.1", "1.12.2", "1.12.1", "1.11.2", "1.10.2", "1.9.4"],
+  paper: [ "1.21.1", "1.21", "1.20.6", "1.20.5", "1.20.4", "1.20.2", "1.20.1", "1.19.4", "1.19.3", "1.19.2", "1.19.1", "1.18.2", "1.18.1", "1.17.1", "1.16.5", "1.16.4", "1.16.3", "1.16.2", "1.16.1", "1.15.2", "1.15.1", "1.14.4", "1.14.3", "1.14.2", "1.14.1", "1.13.2", "1.13.1", "1.12.2", "1.12.1", "1.11.2", "1.10.2", "1.9.4"]
-  bukkit: [  "1.20.6", "1.20.4", "1.20.2", "1.20.1", "1.19.4", "1.19.3", "1.19.2", "1.19.1", "1.18.2", "1.17.5", "1.17.4",   "1.17.3", "1.17.2", "1.17.0", "1.16.5", "1.16.4", "1.16.3", "1.16.2", "1.16.1", "1.16.0", "1.15.5", "1.15.4",   "1.15.3", "1.15.2", "1.15.1", "1.15.0", "1.14.5", "1.14.4", "1.14.3", "1.14.2", "1.14.1", "1.14.0", "1.13.5",   "1.13.4", "1.13.3", "1.13.2", "1.13.1", "1.13.0", "1.12.5", "1.12.4", "1.12.3", "1.12.2", "1.12.1", "1.12.0",   "1.11.5", "1.11.4", "1.11.3", "1.11.2", "1.11.1", "1.11.0", "1.10.5", "1.10.4", "1.10.3", "1.10.2", "1.10.1",   "1.10.0", "1.9.5", "1.9.4", "1.9.3", "1.9.2", "1.9.1", "1.9.0", "1.8.5", "1.8.4", "1.8.3", "1.8.2", "1.8.1",   "1.8.0", "1.7.5", "1.7.4", "1.7.3", "1.7.2", "1.7.1", "1.7.0", "1.6.5", "1.6.4", "1.6.3", "1.6.2", "1.6.1",   "1.6.0", "1.5.5", "1.5.4", "1.5.3", "1.5.2", "1.5.1", "1.5.0", "1.4.5", "1.4.4", "1.4.3", "1.4.2", "1.4.1",   "1.4.0", "1.3.5", "1.3.4", "1.3.3", "1.3.2", "1.3.1", "1.3.0", "1.2.5", "1.2.4", "1.2.3", "1.2.2", "1.2.1",   "1.2.0", "1.1.5", "1.1.4", "1.1.3", "1.1.2", "1.1.1", "1.1.0", "1.0.5", "1.0.4", "1.0.3", "1.0.2", "1.0.1",   "1.0.0"],
-  spigot: [  "1.21", "1.20.6", "1.20.4", "1.20.2", "1.20.1", "1.19.4", "1.19.3", "1.19.2", "1.19.1", "1.18.2", "1.18.1",   "1.17.1", "1.16.5", "1.16.4", "1.16.3", "1.16.2", "1.16.1", "1.15.2", "1.15.1", "1.14.4", "1.14.3", "1.14.2",   "1.14.1", "1.13.2", "1.13.1", "1.12.2", "1.12.1", "1.11.2", "1.11.1", "1.10.2", "1.9.4", "1.9.2", "1.8.8",   "1.8.7", "1.8.6", "1.8.5", "1.8.4", "1.8.3", "1.7.10", "1.7.9", "1.7.8", "1.7.5", "1.7.2", "1.6.4", "1.6.2",   "1.5.2", "1.5.1", "1.4.7", "1.4.6"],
-  paper: [  "1.21.1", "1.21", "1.20.6", "1.20.5", "1.20.4", "1.20.2", "1.20.1", "1.19.4", "1.19.3", "1.19.2", "1.19.1",   "1.18.2", "1.18.1", "1.17.1", "1.16.5", "1.16.4", "1.16.3", "1.16.2", "1.16.1", "1.15.2", "1.15.1", "1.14.4",   "1.14.3", "1.14.2", "1.14.1", "1.13.2", "1.13.1", "1.12.2", "1.12.1", "1.11.2", "1.10.2", "1.9.4"]
 };
 
 const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel, noServers }) => {
   const [subdomain, setSubdomain] = useState(null);
   const [subdomainInput, setSubdomainInput] = useState('');
   const [serverName, setServerName] = useState('');
-  const [serverVersion, setServerVersion] = useState();
+  const [serverVersion, setServerVersion] = useState('1.21.1');
-  const [selectedFramework, setSelectedFramework] = useState("paper");
+  
-
   const loadSubdomain = async () => {
     try {
       if (user && user.uid) {
@@ -53,13 +45,18 @@ const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel, noSer
 
   const handleCreateServer = async () => {
     try {
-        const frameworkToSend = selectedFramework === 'vanilla' ? 'paper' : selectedFramework;        
+        const frameworkToSend =  'paper';        
         await onCreateServer(serverName, serverVersion, frameworkToSend);
     } catch (error) {
         console.error('Error creating server:', error);
     }
-};
+  };
 
+  const VersionChoice = (version) => {
+    return () => {
+      setServerVersion(version);
+    };
+  };
 
   const validateInput = (input) => {
     return input.replace(/[^a-zA-Z]/g, '');
@@ -81,7 +78,7 @@ const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel, noSer
             <div className={styles.mainCardSubdomain}>
               <div className={styles.title}>Ecrivez votre sous domaine</div>
               <div className={styles.subtitle}>
-                Le sous-domaine est le nom sous lequel vos amis et vous rejoignez le serveur, un peu comme une adresse. Choisissez-le bien, car il n'est pas facilement modifiable !
+                Le sous-domaine est le nom sous lequel vos amis et vous rejoignez le serveur, un peu comme une adresse. Choisissez-le bien, car il nest pas facilement modifiable !
               </div>
               <input
                 className={styles.inputsubdomain}
@@ -108,73 +105,21 @@ const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel, noSer
                 onChange={(e) => setServerName(validateInput(e.target.value))}
               />
 
-              <div className={styles.subtitle}>Sélection du framework</div>
+              <div className={styles.subtitle}>Sélection de la version</div>
-              <div className={styles.carreContainer}>
-                <div className={styles.carreWrapper}>
-                  <img
-                    className={`${styles.carre} ${selectedFramework === 'vanilla' ? styles.selected : ''}`}
-                    src={vanilla}
-                    alt="Vanilla Logo"
-                    onClick={() => {
-                      setSelectedFramework('vanilla');
-                      setServerVersion('');
-                    }}
-                  />
-                </div>
-                
-                <div className={styles.carreWrapper}>
-                  <img
-                    className={`${styles.carre} ${selectedFramework === 'bukkit' ? styles.selected : ''}`}
-                    src={bukkit}
-                    alt="Bukkit Logo"
-                    onClick={() => {
-                      setSelectedFramework('bukkit');
-                      setServerVersion('');
-                    }}
-                  />
-                </div>
 
-                <div className={styles.carreWrapper}>
+              <div className={styles.VersionContainer}>
-                  <img
+                  {versions['paper'].map((version, index) => (
-                    className={`${styles.carre} ${selectedFramework === 'spigot' ? styles.selected : ''}`}
+                    <div
-                    src={spigot}
+                      key={index}
-                    alt="Spigot Logo"
+                      value={version}
-                    onClick={() => {
+                      className={`${styles.VersionCard} ${serverVersion === version ? styles.selectedVersion : ''}`}
-                      setSelectedFramework('spigot');
+                      onClick={VersionChoice(version)}
-                      setServerVersion('');
+                    >
-                    }}
+                      {serverVersion === version ? <GoCheck /> : <GoTag />} 
-                  />
+                      {version}
+                    </div>
+                  ))}
                 </div>
-
-                <div className={styles.carreWrapper}>
-                  <img
-                    className={`${styles.carre} ${styles.adviced} ${selectedFramework === 'paper' ? styles.selected : ''}`}
-                    src={paper}
-                    alt="Paper Logo"
-                    onClick={() => {
-                      setSelectedFramework('paper');
-                      setServerVersion('');
-                    }}
-                  />
-                  <label className={styles.recommendationLabel}>Recommandé</label> {}
-                </div>
-              </div>
-            <div className={styles.subtitle}>Sélection de la version</div>
-
-              <select
-                className={styles.select}
-                name="version"
-                id="version-select"
-                value={serverVersion}
-                onChange={(e) => setServerVersion(e.target.value)}
-                disabled={!selectedFramework} 
-              >
-                <option>Version</option>
-                {selectedFramework && versions[selectedFramework].map((version, index) => (
-                  <option key={index} value={version}>{version}</option>
-                ))}
-              </select>
-
               <div className={styles.buttonContainer}>
                 <button className={styles.btnServCreate} onClick={handleCreateServer}>
                   Créer

src/components/CreateServer/CreateServer.module.scss

@@ -178,10 +178,49 @@
   text-align: center;
 }
 
+.VersionContainer {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr); 
+  justify-items: center;
+  align-items: center;
+  width: 100%;
+}
+
+.VersionCard{
+  height: 4rem;
+  width: 8rem;
+  background-color: #090325;
+  display: flex;
+  align-items: center;
+  justify-content: center ;
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  border-radius: .3rem;
+}
+
+.VersionCard svg {
+  margin-right: 0.5rem;
+}
+
+.VersionCard:hover{
+  background-color: #09032579;
+  cursor: pointer;
+}
+
+.selectedVersion {
+  border: .15rem solid #fff;
+  color: #fff;
+}
+
+
 
 
 @media (max-width: 800px) {
 
+  .VersionContainer {
+    grid-template-columns: repeat(3, 1fr); 
+  }
+
   .buttonContainer{
     display: flex;
     justify-content: center;