mirror of
https://github.com/hubHarmony/servii-frontend.git
synced 2024-11-17 21:40:30 +00:00
newcreatepage
This commit is contained in:
AntoninoP
parent
921667dfbc
commit
31795357af
@ -3,16 +3,9 @@ import styles from './CreateServer.module.scss';
|
||||
import { getUserSubdomain } from "../../service/firebase";
|
||||
import serviiApi from "../../service/api.tsx";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
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';
|
||||
import { GoTag, GoCheck } from "react-icons/go";
|
||||
|
||||
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"],
|
||||
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"]
|
||||
};
|
||||
|
||||
@ -20,8 +13,7 @@ const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel, noSer
|
||||
const [subdomain, setSubdomain] = useState(null);
|
||||
const [subdomainInput, setSubdomainInput] = useState('');
|
||||
const [serverName, setServerName] = useState('');
|
||||
const [serverVersion, setServerVersion] = useState();
|
||||
const [selectedFramework, setSelectedFramework] = useState("paper");
|
||||
const [serverVersion, setServerVersion] = useState('1.21.1');
|
||||
|
||||
const loadSubdomain = async () => {
|
||||
try {
|
||||
@ -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.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}>
|
||||
<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}
|
||||
name="version"
|
||||
id="version-select"
|
||||
value={serverVersion}
|
||||
onChange={(e) => setServerVersion(e.target.value)}
|
||||
disabled={!selectedFramework}
|
||||
<div className={styles.VersionContainer}>
|
||||
{versions['paper'].map((version, index) => (
|
||||
<div
|
||||
key={index}
|
||||
value={version}
|
||||
className={`${styles.VersionCard} ${serverVersion === version ? styles.selectedVersion : ''}`}
|
||||
onClick={VersionChoice(version)}
|
||||
>
|
||||
<option>Version</option>
|
||||
{selectedFramework && versions[selectedFramework].map((version, index) => (
|
||||
<option key={index} value={version}>{version}</option>
|
||||
{serverVersion === version ? <GoCheck /> : <GoTag />}
|
||||
{version}
|
||||
</div>
|
||||
))}
|
||||
</select>
|
||||
|
||||
</div>
|
||||
<div className={styles.buttonContainer}>
|
||||
<button className={styles.btnServCreate} onClick={handleCreateServer}>
|
||||
Créer
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user