diff --git a/src/components/serverCard/serverCard.jsx b/src/components/serverCard/serverCard.jsx
index 65231f1..91db2a2 100644
--- a/src/components/serverCard/serverCard.jsx
+++ b/src/components/serverCard/serverCard.jsx
@@ -1,6 +1,8 @@
import { Link } from 'react-router-dom';
import styles from './serverCard.module.scss';
import paper from '../../assets/frameworks/paper.png';
+import fabric from '../../assets/frameworks/fabric.png';
+import forge from '../../assets/frameworks/forge.png';
import PropTypes from "prop-types";
import { FaTrash } from 'react-icons/fa';
@@ -8,6 +10,12 @@ const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick,
const getFrameworkSource = () => {
switch (framework) {
+ case 'frabric':
+ return fabric;
+ case 'forge':
+ return forge;
+ case 'bedrock':
+ return paper;
default:
return paper;
}
@@ -53,9 +61,6 @@ const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick,
Version: {version}
-
- {status ? `${countPlayers}/${maxPlayers} joueurs` : " "}
-
@@ -77,6 +82,9 @@ const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick,
)}
+
+ {status ? `${countPlayers}/${maxPlayers} joueurs` : " "}
+
{
onBackClick={() => navigate('/CreateServer')}
/>
-
bedrock
+ Prochainement disponible
);
diff --git a/src/pages/CreateServer/modpack/modpack.jsx b/src/pages/CreateServer/modpack/modpack.jsx
index d7e6764..b526f85 100644
--- a/src/pages/CreateServer/modpack/modpack.jsx
+++ b/src/pages/CreateServer/modpack/modpack.jsx
@@ -18,7 +18,7 @@ const Modpack = ({ user }) => {
onBackClick={() => navigate('/CreateServer')}
/>
-
modpack
+ Prochainement disponible
);
diff --git a/src/pages/DashboardPage/DashboardPage.jsx b/src/pages/DashboardPage/DashboardPage.jsx
index cc08d1c..b87ca63 100644
--- a/src/pages/DashboardPage/DashboardPage.jsx
+++ b/src/pages/DashboardPage/DashboardPage.jsx
@@ -14,8 +14,8 @@ const DashboardPage = ({ user }) => {
const [servers, setServers] = useState([]);
const [subdomain, setSubdomain] = useState(null);
const [loading, setLoading] = useState(true);
- const [showCreateServer, setShowCreateServer] = useState(false);
const [searchTerm, setSearchTerm] = useState('');
+ const [newSubdomain, setNewSubdomain] = useState('');
const loadServers = useCallback(async () => {
try {
@@ -39,7 +39,7 @@ const DashboardPage = ({ user }) => {
loadServers();
}, [loadServers]);
- const handleCreateServerPage = () => setShowCreateServer(true);
+ const handleCreateServer = () => navigate('/CreateServer');
const handleRunServer = async (serverName) => {
try {
@@ -73,8 +73,21 @@ const DashboardPage = ({ user }) => {
navigator.clipboard.writeText(address);
};
+ const handleSaveSubdomain = async () => {
+ try {
+ const response = await serviiApi.setSubdomain(newSubdomain);
+ if (response.success) {
+ setSubdomain(newSubdomain);
+ loadServers();
+ } else {
+ console.error('Erreur lors de la création du sous-domaine');
+ }
+ } catch (error) {
+ console.error('Erreur lors de la création du sous-domaine:', error);
+ }
+ };
+
const favoriteServer = servers[0] || null;
-
const serversWithoutFavorite = servers.filter(server => server !== favoriteServer);
if (loading) {
@@ -86,21 +99,58 @@ const DashboardPage = ({ user }) => {
);
}
+ if (!subdomain) {
+ return (
+
+
+ Bienvenue, {user?.displayName || ' '} !
+
+
+ Le sous-domaine est le nom sous lequel vos amis et vous rejoignez le serveur. Choisissez-le bien, car il n'est pas facilement modifiable !
+
+
+ setNewSubdomain(e.target.value)}
+ className={styles.subdomainInput}
+ onKeyPress={(e) => e.key === 'Enter' && handleSaveSubdomain()}
+ />
+
+
+
+ );
+ }
+
+
+ if (servers.length === 0) {
+ return (
+
+
+
+
+
+
+ );
+ }
+
return (
- {showCreateServer ? (
- navigate('/CreateServer')
- ) : (
-
Adresse de connexion à vos serveurs :
{" " + subdomain}.servii.fr
-
+
{
onChange={(e) => setSearchTerm(e.target.value)}
className={styles.searchInput}
/>
-
- ) : (
-
Aucun serveur disponible
- )}
+ ) : null}
+
{serversWithoutFavorite.length > 0 ? (
serversWithoutFavorite.filter(server =>
@@ -156,18 +205,13 @@ const DashboardPage = ({ user }) => {
subdomain={subdomain}
/>
))
- ) : (
-
Aucun serveur trouvé
- )}
+ ) : null}
- )}
);
};
-
-
DashboardPage.propTypes = {
user: PropTypes.shape({
uid: PropTypes.string.isRequired,
diff --git a/src/pages/DashboardPage/DashboardPage.module.scss b/src/pages/DashboardPage/DashboardPage.module.scss
index 692cfd2..aa20c2f 100644
--- a/src/pages/DashboardPage/DashboardPage.module.scss
+++ b/src/pages/DashboardPage/DashboardPage.module.scss
@@ -15,7 +15,7 @@ html, body {
}
.mainContent {
- width: 100%;
+ width: 90%;
padding: 2.5rem;
display: flex;
flex-direction: column;
@@ -35,7 +35,7 @@ html, body {
border-radius: 8px;
padding: .8rem 1rem;
font-size: 1.25rem;
- width: 10rem;
+ width: 16rem;
flex: none;
}
@@ -85,3 +85,74 @@ html, body {
color: var(--text-color);
margin: 1rem 0;
}
+
+.welcomeContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: 4rem;
+ padding: 2rem;
+ background-color: #f7f7f7;
+ border-radius: 0.5rem;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.welcomeMessage {
+ font-size: 2.5rem;
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 1rem;
+}
+
+.subdomainMessage {
+ font-size: 1.2rem;
+ color: #666;
+ margin-bottom: 2rem;
+ text-align: center;
+ max-width: 50rem;
+}
+
+.subdomainInputContainer {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: .25rem;
+}
+
+.subdomainInput {
+ padding: 0.75rem 1rem;
+ border-radius: 0.5rem;
+ border: 1px solid #ccc;
+ font-size: 1.25rem;
+ width: 20rem;
+}
+
+.btnCreateSubdomain {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #2f2f2f;
+ border: none;
+ padding: .5rem 1rem;
+ cursor: pointer;
+ font-size: 1rem;
+ font-weight: 600;
+ border-radius: 0.5rem;
+ color: white;
+ transition: background-color 0.3s ease;
+ margin-left: 1rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #2f2f2f;
+ border: none;
+ padding: 0.75rem 1.5rem;
+ cursor: pointer;
+ font-size: 1rem;
+ font-weight: 600;
+ border-radius: 0.5rem;
+ color: white;
+ transition: background-color 0.3s ease;
+}