From 788409120a1e48f70fc6c1ee2af6bcb1c367b0b5 Mon Sep 17 00:00:00 2001 From: AntoninoP Date: Sun, 22 Sep 2024 23:27:44 +0200 Subject: [PATCH] + styles pour la pages des modpacks et fix css --- src/App.jsx | 2 +- src/components/CreateServer/CreateServer.jsx | 163 ---------- .../CreateServer/CreateServer.module.scss | 296 ------------------ .../serverCards/DefaultServerCard.module.scss | 1 + src/main.css | 2 +- .../CreateServer/{Javapick => java}/java.jsx | 2 +- .../{Javapick => java}/java.module.scss | 0 src/pages/CreateServer/modpack/modpack.jsx | 77 ++++- .../CreateServer/modpack/modpack.module.scss | 158 +++++++++- src/service/api.test.js | 0 10 files changed, 220 insertions(+), 481 deletions(-) delete mode 100644 src/components/CreateServer/CreateServer.jsx delete mode 100644 src/components/CreateServer/CreateServer.module.scss rename src/pages/CreateServer/{Javapick => java}/java.jsx (98%) rename src/pages/CreateServer/{Javapick => java}/java.module.scss (100%) delete mode 100644 src/service/api.test.js diff --git a/src/App.jsx b/src/App.jsx index 5d92b87..57d30ee 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -9,7 +9,7 @@ import Loading from './pages/Loading/loading'; const LoginPage = lazy(() => import('./pages/LoginPage/LoginPage')); const ServerDetails = lazy(() => import('./pages/ServerDetails/ServerDetails')); const CreatePage = lazy(() => import('./pages/CreateServer/CreateServer')); -const Javapick = lazy(() => import('./pages/CreateServer/Javapick/java')); +const Javapick = lazy(() => import('./pages/CreateServer/java/java')); const Modpack = lazy(() => import('./pages/CreateServer/modpack/modpack')); const Bedrock = lazy(() => import('./pages/CreateServer/bedrock/bedrock')); const DashboardPage = lazy(() => import('./pages/DashboardPage/DashboardPage')); diff --git a/src/components/CreateServer/CreateServer.jsx b/src/components/CreateServer/CreateServer.jsx deleted file mode 100644 index 8bfe9c5..0000000 --- a/src/components/CreateServer/CreateServer.jsx +++ /dev/null @@ -1,163 +0,0 @@ -import { useState, useEffect } from 'react'; -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"; - -const versions = { - paper: [ - "1.16.2", - "1.14.4", - "1.13.2", - "1.16.1", - "1.18.2", - "1.19", - "1.20.4", - "1.19.3", - "1.19.4", - "1.19.2", - "1.20.1", - "1.21.1", - "1.20.5", - "1.20.6", - "1.21", - "1.20.2", - "1.20", - "1.9.4", - "1.10.2", - "1.11.2", - "1.12.2", - "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" - ].sort((a, b) => b.localeCompare(a, undefined, { numeric: true })) -}; - -const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel, noServers }) => { - const [subdomain, setSubdomain] = useState(null); - const [subdomainInput, setSubdomainInput] = useState(''); - const [serverName, setServerName] = useState(''); - const [serverVersion, setServerVersion] = useState('1.21.1'); - - const loadSubdomain = async () => { - try { - if (user && user.uid) { - const userSubdomain = await getUserSubdomain(user.uid); - setSubdomain(userSubdomain || ''); - onSubdomainUpdate(userSubdomain || ''); - } else { - console.error('User or user.uid is undefined'); - } - } catch (error) { - console.error('Error fetching subdomain:', error); - } - }; - - useEffect(() => { - loadSubdomain().then(r => r); - }, - [user]); - - const handleSaveSubdomain = async () => { - try { - await serviiApi.setSubdomain(subdomainInput); - setSubdomain(subdomainInput); - onSubdomainUpdate(subdomainInput); - } catch (error) { - console.error('Error setting subdomain:', error); - } - }; - - const handleCreateServer = async () => { - try { - 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, ''); - }; - - return ( -
- {noServers ? ( -
-
Bonjour
-
Aucun serveur
- -
- ) : ( - subdomain === null ? ( -
Loading...
- ) : ( - subdomain === '' ? ( -
-
Ecrivez votre sous domaine
-
- 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 ! -
- setSubdomainInput(validateInput(e.target.value))} - placeholder='Nom du sous domaine' - /> - - -
- ) : ( -
-
Création du serveur
-
Comment voulez vous jouer ?
-
dd
-
- ) - ) - )} -
- ); -}; - -CreateServer.propTypes = { - user: PropTypes.oneOfType([ - PropTypes.shape({ - uid: PropTypes.string.isRequired, - displayName: PropTypes.string, - email: PropTypes.string, - photoURL: PropTypes.string, - }), - ]), - onCreateServer: PropTypes.func.isRequired, - onSubdomainUpdate: PropTypes.func.isRequired, - onCancel: PropTypes.func, - noServers: PropTypes.any -}; - -export default CreateServer; diff --git a/src/components/CreateServer/CreateServer.module.scss b/src/components/CreateServer/CreateServer.module.scss deleted file mode 100644 index 067dce3..0000000 --- a/src/components/CreateServer/CreateServer.module.scss +++ /dev/null @@ -1,296 +0,0 @@ -.mainCardCommon { - display: flex; - justify-content: start; - align-items: start; - flex-direction: column; - background-color: #1D1836; - border-radius: 1.5rem; -} - -.title { - font-size: 2.5rem; - font-weight: 700; - margin-bottom: 1.5rem; -} - -.subtitle { - font-size: 1.2rem; - font-weight: 300; - text-align: center; - margin-bottom: 2rem; -} - -.input, .select { - width: 60rem; - padding: 1rem; - background-color: #090325; - border: none; - border-radius: 0.5rem; - color: white; - font-size: 1rem; -} - -.btnSubCreate, .btnServCreate { - margin-top: 2rem; - padding: 1rem 2rem; - background-color: #090325; - color: white; - border: none; - border-radius: 0.5rem; - cursor: pointer; - font-size: 1rem; - transition: background-color 0.3s, transform 0.3s; - margin-right: 1rem; -} - -.containerNoserveur { - display: flex; - justify-content: center; - align-items: center; -} - -.mainCardNoserveur { - background-color: #1D1836; - padding: 3rem; - margin-top: 5rem; - border-radius: 1rem; -} - -.nsTitle { - font-size: 3rem; - color: #F2F2F2; - font-weight: 900; -} - -.nsSubTitle { - font-size: 1.8rem; - font-weight: 300; -} - -.btnnoServCreate { - width: 40rem; - height: 5rem; - margin-top: 5rem; - font-size: 2rem; - font-weight: 900; - background-color: #090325; - border-radius: 1rem; - color: white; - border: none; - cursor: pointer; -} - -.btnServCreate { - width: 15rem; - height: 3.5rem; - margin-top: 2.5rem; - font-size: 1.5rem; - font-weight: 900; - border-radius: 1rem; - background-color: #090325; -} - -.GamesChoice { - margin-top: var(--navbar-height); - width: 50rem; - height: 10rem; - background-color: red; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; -} - -.mainCardSubdomain { - background-color: #1D1836; - padding: 3rem; - margin-top: 5rem; - border-radius: 1rem; - width: 55rem; -} - -.subtitle { - font-size: 1.2rem; - font-weight: 600; - text-align: start; - margin-bottom: 1.5rem; - margin-top: 2rem; - -} - -.inputsubdomain { - width: 50rem; - padding: 1rem; - margin-top: 1rem; - background-color: #090325; - border: none; - border-radius: 0.5rem; - color: white; - font-size: 1rem; -} - - -.carreContainer { - display: flex; - justify-content: space-around; - align-items: center; - width: 100%; - height: 6rem; -} - -.carreWrapper { - display: flex; - flex-direction: column; - align-items: center; -} - -.carre { - width: 5rem; - height: 5rem; - object-fit: cover; - display: block; - cursor: pointer; - transition: transform 0.2s; -} - -.carre:hover { - transform: scale(1.1); -} - -.selected { - border: 2px solid #fff; - 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; -} - -.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; - align-items: center; - flex-direction: row; - } - - .title { - font-size: 1.8rem; - margin-bottom: 1rem; - } - - .subtitle { - font-size: 1rem; - margin-bottom: 1.5rem; - } - - .input, .select { - width: 100%; - padding: 0.75rem; - font-size: 0.875rem; - } - - .btnSubCreate, .btnServCreate { - margin-top: 2rem; - padding: 1rem 2.5rem; - font-size: 1rem; - margin-right: 2rem; - display: flex; - justify-content: center; - align-items: center; - } - - .mainCardNoserveur { - padding: 2rem; - margin-top: 3rem; - } - - .nsTitle { - font-size: 2rem; - } - - .nsSubTitle { - font-size: 1.2rem; - } - - .btnnoServCreate { - width: 100%; - height: 3.5rem; - font-size: 1.5rem; - margin-top: 3rem; - } - - .btnServCreate { - width: 100%; - height: 2.5rem; - font-size: 1.25rem; - } - - .mainCardCreateServ { - margin-top: 3rem; - padding: 1.5rem; - width: 35rem; - } - - .mainCardSubdomain { - padding: 2rem; - margin-top: 3rem; - width: 100%; - } - - .inputsubdomain { - width: 100%; - padding: 0.75rem; - font-size: 0.875rem; - } -} diff --git a/src/components/serverCards/DefaultServerCard.module.scss b/src/components/serverCards/DefaultServerCard.module.scss index 8f6ef1b..1f45f2e 100644 --- a/src/components/serverCards/DefaultServerCard.module.scss +++ b/src/components/serverCards/DefaultServerCard.module.scss @@ -105,6 +105,7 @@ .startStopButton { padding: 1rem 1.5rem; border-radius: 0.5rem; + font-size: 1rem; border: none; color: white; cursor: pointer; diff --git a/src/main.css b/src/main.css index d1b4cd9..86da27f 100644 --- a/src/main.css +++ b/src/main.css @@ -54,7 +54,7 @@ body { @media (min-width: 2000px) { html { - font-size: 15px; + font-size: 20px; } } diff --git a/src/pages/CreateServer/Javapick/java.jsx b/src/pages/CreateServer/java/java.jsx similarity index 98% rename from src/pages/CreateServer/Javapick/java.jsx rename to src/pages/CreateServer/java/java.jsx index 52dbc07..4b8e1fe 100644 --- a/src/pages/CreateServer/Javapick/java.jsx +++ b/src/pages/CreateServer/java/java.jsx @@ -3,7 +3,7 @@ import { GoTag, GoCheck } from "react-icons/go"; import { useNavigate } from 'react-router-dom'; import styles from './java.module.scss'; import PropTypes from "prop-types"; -import Navbar from '../../../components/navbar/Navbar'; +import Navbar from '../../../components/navbar/Navbar.jsx'; import serviiApi from "../../../service/api.tsx"; const Javapick = ({ user }) => { diff --git a/src/pages/CreateServer/Javapick/java.module.scss b/src/pages/CreateServer/java/java.module.scss similarity index 100% rename from src/pages/CreateServer/Javapick/java.module.scss rename to src/pages/CreateServer/java/java.module.scss diff --git a/src/pages/CreateServer/modpack/modpack.jsx b/src/pages/CreateServer/modpack/modpack.jsx index 485816b..cbdea89 100644 --- a/src/pages/CreateServer/modpack/modpack.jsx +++ b/src/pages/CreateServer/modpack/modpack.jsx @@ -1,27 +1,25 @@ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import styles from './modpack.module.scss'; -import PropTypes from "prop-types"; +import PropTypes from 'prop-types'; import Navbar from '../../../components/navbar/Navbar'; -import { useNavigate } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import serviiApi from '../../../service/api'; const Modpack = ({ user }) => { const navigate = useNavigate(); const [modpacks, setModpacks] = useState([]); + const [selectedModpackIndex, setSelectedModpackIndex] = useState(null); const [error, setError] = useState(''); + const [serverShortName, setServerShortName] = useState(''); useEffect(() => { const fetchModpacks = async () => { - if (!user) { - setError("Vous devez être connecté pour voir les modpacks."); - return; - } - try { const response = await serviiApi.fetchModpacks(); - console.log(response); if (response.return_code === 200) { - setModpacks(response.message); + const fetchedModpacks = response.message; + + setModpacks(fetchedModpacks); } else { setError(response.message); } @@ -34,6 +32,28 @@ const Modpack = ({ user }) => { fetchModpacks(); }, [user]); + const handleModpackClick = (index) => { + setSelectedModpackIndex(index); + }; + + + const handleCancel = () => { + setSelectedModpackIndex(null); + console.log("dffdff"); + }; + + + const handleCreate = async () => { + try { + const framework = selectedModpackIndex.framework; + await serviiApi.serverCreate(selectedModpackIndex.short_name, selectedModpackIndex.short_name, framework); + console.log(selectedModpackIndex.short_name, selectedModpackIndex.short_name, framework); + navigate('/Dashboard'); + } catch (error) { + console.error('Error creating server:', error); + } + }; + return (
{ backButtonText="Retour" onBackClick={() => navigate('/CreateServer')} /> -
+
{error ?

{error}

: ( -
    - {modpacks.map((modpack, index) => ( -
  • {modpack.name}
    • - ))} -
+ modpacks.map((modpack, index) => ( +
handleModpackClick(index)} + > + {modpack.name} +

{modpack.name}

+

{modpack.description}

+
+ Aventure + Combat + PvE + {modpack.framework} +
+
+ Version MC: {modpack.mcVersion} + Version Modpack: {modpack.version} +
+ + {selectedModpackIndex === index && ( +
+
Créer le serveur {modpack.short_name} ?
+ + + +
+ )} +
+ )) )}
diff --git a/src/pages/CreateServer/modpack/modpack.module.scss b/src/pages/CreateServer/modpack/modpack.module.scss index 5ec5e9c..690f5f2 100644 --- a/src/pages/CreateServer/modpack/modpack.module.scss +++ b/src/pages/CreateServer/modpack/modpack.module.scss @@ -1,3 +1,155 @@ -.hey{ - margin-top: 8em; -} \ No newline at end of file +.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: 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 { + 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; + gap: 1rem; + z-index: 10; + + h4 { + font-size: 1.8rem; + 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; + } + } + } + \ No newline at end of file diff --git a/src/service/api.test.js b/src/service/api.test.js deleted file mode 100644 index e69de29..0000000