From 8bf5b3facf9b46dbaeddbfb5d4508b1066b5e617 Mon Sep 17 00:00:00 2001
From: AntoninoP <antoninopiraino70@gmail.com>
Date: Tue, 13 Aug 2024 19:29:42 +0200
Subject: [PATCH] more versions

---
 src/components/CreateServer/CreateServer.jsx  | 121 +++++++++---------
 .../CreateServer/CreateServer.module.scss     |  19 ++-
 2 files changed, 77 insertions(+), 63 deletions(-)

diff --git a/src/components/CreateServer/CreateServer.jsx b/src/components/CreateServer/CreateServer.jsx
index ebe5422..0b1eda1 100644
--- a/src/components/CreateServer/CreateServer.jsx
+++ b/src/components/CreateServer/CreateServer.jsx
@@ -10,26 +10,10 @@ import spigot from '../../assets/frameworks/spigot.png';
 import paper from '../../assets/frameworks/paper.png';
 
 const versions = {
-  vanilla: ['1.21', '1.20', '1.19'],
-  bukkit: [
-    '1.15.0', '1.15.1', '1.15.2', '1.15.3', '1.15.4', '1.15.5',
-    '1.16.0', '1.16.1', '1.16.2', '1.16.3', '1.16.4', '1.16.5',
-    '1.17.0', '1.17.1', '1.17.2', '1.17.3', '1.17.4', '1.17.5',
-    '1.18.1', '1.18.2',
-    '1.19.1', '1.19.2', '1.19.3', '1.19.4',
-    '1.20.1', '1.20.2', '1.20.4', '1.20.6'
-  ],
-  spigot: ['1.21', '1.20'],
-  paper: [
-    '1.13.1', '1.13.2',
-    '1.14.1', '1.14.2', '1.14.3', '1.14.4',
-    '1.15.1', '1.15.2',
-    '1.16.1', '1.16.2', '1.16.3', '1.16.4', '1.16.5',
-    '1.17.1',
-    '1.18.1', '1.18.2',
-    '1.19.1', '1.19.2', '1.19.3', '1.19.4',
-    '1.20.1', '1.20.2', '1.20.4', '1.20.5', '1.20.6'
-  ],
+  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"],
+  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 }) => {
@@ -37,7 +21,7 @@ const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel, noSer
   const [subdomainInput, setSubdomainInput] = useState('');
   const [serverName, setServerName] = useState('');
   const [serverVersion, setServerVersion] = useState();
-  const [selectedFramework, setSelectedFramework] = useState("vanilla");
+  const [selectedFramework, setSelectedFramework] = useState("paper");
 
   const loadSubdomain = async () => {
     try {
@@ -69,11 +53,13 @@ const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel, noSer
 
   const handleCreateServer = async () => {
     try {
-      await onCreateServer(serverName, serverVersion, selectedFramework);
+        const frameworkToSend = selectedFramework === 'vanilla' ? 'paper' : selectedFramework;        
+        await onCreateServer(serverName, serverVersion, frameworkToSend);
     } catch (error) {
-      console.error('Error creating server:', error);
+        console.error('Error creating server:', error);
     }
-  };
+};
+
 
   const validateInput = (input) => {
     return input.replace(/[^a-zA-Z]/g, '');
@@ -124,45 +110,56 @@ const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel, noSer
 
               <div className={styles.subtitle}>Sélection du framework</div>
               <div className={styles.carreContainer}>
-                <img
-                  className={`${styles.carre} ${selectedFramework === 'vanilla' ? styles.selected : ''}`}
-                  src={vanilla}
-                  alt="Vanilla Logo"
-                  onClick={() => {
-                    setSelectedFramework('vanilla');
-                    setServerVersion('');
-                  }}
-                />
-                <img
-                  className={`${styles.carre} ${selectedFramework === 'bukkit' ? styles.selected : ''}`}
-                  src={bukkit}
-                  alt="Bukkit Logo"
-                  onClick={() => {
-                    setSelectedFramework('bukkit');
-                    setServerVersion('');
-                  }}
-                />
-                <img
-                  className={`${styles.carre} ${selectedFramework === 'spigot' ? styles.selected : ''}`}
-                  src={spigot}
-                  alt="Spigot Logo"
-                  onClick={() => {
-                    setSelectedFramework('spigot');
-                    setServerVersion('');
-                  }}
-                />
-                <img
-                  className={`${styles.carre} ${selectedFramework === 'paper' ? styles.selected : ''}`}
-                  src={paper}
-                  alt="Paper Logo"
-                  onClick={() => {
-                    setSelectedFramework('paper');
-                    setServerVersion('');
-                  }}
-                />
-              </div>
+                <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.subtitle}>Sélection de la version</div>
+                <div className={styles.carreWrapper}>
+                  <img
+                    className={`${styles.carre} ${selectedFramework === 'spigot' ? styles.selected : ''}`}
+                    src={spigot}
+                    alt="Spigot Logo"
+                    onClick={() => {
+                      setSelectedFramework('spigot');
+                      setServerVersion('');
+                    }}
+                  />
+                </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}
diff --git a/src/components/CreateServer/CreateServer.module.scss b/src/components/CreateServer/CreateServer.module.scss
index 19a0794..500682e 100644
--- a/src/components/CreateServer/CreateServer.module.scss
+++ b/src/components/CreateServer/CreateServer.module.scss
@@ -139,7 +139,13 @@
   justify-content: space-around;
   align-items: center;
   width: 100%;
-  height: 5rem;
+  height: 6rem; 
+}
+
+.carreWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .carre {
@@ -160,6 +166,17 @@
   transform: scale(1.2);
 }
 
+.adviced {
+  border: 2px solid violet;
+}
+
+.recommendationLabel {
+  margin-top: 0.5rem; 
+  font-size: 1rem;
+  color: violet; 
+  font-weight: 700;
+  text-align: center;
+}