charleslemaux/servii-frontend
1
0
Fork 0
mirror of https://github.com/hubHarmony/servii-frontend.git synced 2024-11-17 21:40:30 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

+ max players show

Browse Source
This commit is contained in:
AntoninoP 2024-08-11 14:08:00 +02:00
parent 7f1f2df84d
commit 9ba1c89da7
4 changed files with 96 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CreateServer/CreateServer.jsx
View File

@ -191,7 +191,7 @@ CreateServer.propTypes = {
]),
onCreateServer: PropTypes.func.isRequired,
onSubdomainUpdate: PropTypes.func.isRequired,
onCancel: PropTypes.func.isRequired,
onCancel: PropTypes.func,
noServers: PropTypes.any
};

40
src/components/serverCard/serverCard.jsx
View File

@ -5,10 +5,9 @@ import paper from '../../assets/frameworks/paper.png';
import spigot from '../../assets/frameworks/spigot.png';
import bukkit from '../../assets/frameworks/bukkit.png';
import vanilla from '../../assets/frameworks/vanilla.png';
import delete_button from '../../assets/frameworks/delete.png';
import PropTypes from "prop-types";
const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick, onDeleteClick }) => {
const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick, onDeleteClick , countPlayers , maxPlayers}) => {
const getFrameworkSource = () => {
switch (framework) {
@ -52,25 +51,31 @@ const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick,
return (
<Link to={`/server/${name}`} className={styles.serverCard}>
<div className={styles.leftCard}>
<div className={styles.status}>
<div className={styles.name}>{name}</div>
<div className={styles.header}>
<div className={styles.serverInfo}>
<img src={getFrameworkSource()} alt={`${name} Icon`} className={styles.frameworkIcon} />
<div className="tooltip"></div>
</div>
<div className={styles.buttonContainer}>
{status === false && (
<button className={styles.stoppedButton} onClick={handleRun}>▶ Démarrer</button>
)}
{status === true && (
<button className={styles.runningButton} onClick={handleStop}>◼ Arrêter</button>
)}
</div>
</div>
<div>
<div className={styles.serverName}>{name}</div>
<div className={styles.version}>Version: {version}</div>
<button className={styles.runningButton} onClick={handleDelete}><img src={delete_button} className={styles.deleteButton} /></button>
</div>
</div>
<div className={styles.status}>
{status === false ? " " : countPlayers + "/" + maxPlayers + " joueurs"}
</div>
</div>
<div className={styles.actions}>
<div>
{status === false ? (
<button className={`${styles.startStopButton} ${styles.stoppedButton}`} onClick={handleRun}>▶ Démarrer</button>
) : (
<button className={`${styles.startStopButton} ${styles.runningButton}`} onClick={handleStop}>◼ Arrêter</button>
)}
</div>
<button className={styles.deleteButton} onClick={handleDelete}>🗑 Supprimer</button>
</div>
</Link>
);
};
ServerCard.propTypes = {
@ -82,6 +87,7 @@ ServerCard.propTypes = {
onRunClick: PropTypes.func.isRequired,
onStopClick: PropTypes.func.isRequired,
onDeleteClick: PropTypes.func.isRequired,
countPlayers: PropTypes.number,
subdomain: PropTypes.string,
};

119
src/components/serverCard/serverCard.module.scss
View File

@ -1,88 +1,95 @@
.serverCard {
width: var(--card-width);
padding: var(--card-padding);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
width: 35.5rem;
padding: 2rem;
border: 0.2rem solid var(--card-border-color);
border-radius: 0.8rem;
text-decoration: none;
display: flex;
flex-direction: row;
align-items: center;
background-color: var(--card-bg-color);
color: var(--text-color);
margin-bottom: 1.5rem;
cursor: pointer;
text-decoration: none;
}
.header {
display: flex;
justify-content: space-between;
width: 100%;
}
.status {
.serverInfo {
display: flex;
align-items: center;
}
.frameworkIcon {
width: 2rem;
height: 2rem;
pointer-events: none;
width: 2.5rem;
height: 2.5rem;
margin-right: 0.8rem;
}
.serverName {
font-size: 1.6rem;
font-weight: bold;
}
.version {
font-size: 1.2rem;
color: var(--text-secondary-color);
margin-top: 0.5rem;
}
.status {
font-size: 1.2rem;
font-weight: bold;
color: var(--status-color);
}
.actions {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 1rem;
}
.startStopButton {
padding: 1rem 1.8rem;
border-radius: 0.6rem;
border: none;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
}
.stoppedButton {
background-color: #008d5f;
color: white;
border: none;
padding: 1rem 1.6rem;
border-radius: 0.6rem;
outline: none;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 1rem;
}
.runningButton {
background-color: #8d213e;
color: white;
border: none;
padding: 1rem 1.6rem;
border-radius: 0.6rem;
outline: none;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 1rem;
}
.runningButton:hover{
background-color: #8d213ec1;
}
.stoppedButton:hover {
background-color: #008d5fc1;
}
.runningButton:hover {
background-color: #8d213ec1;
}
.deleteButton {
width: 20px;
height: 20px;
user-select: none;
pointer-events: none;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
background-color: #d9534f;
color: white;
border: none;
border-radius: 0.6rem;
padding: 0.6rem 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
.name {
font-size: 1.5rem;
font-weight: bold;
padding-right: 0.5rem;
}
.version {
font-size: 1.5rem;
margin-left: auto;
margin-right: 2rem;
}
.leftCard {
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
.deleteButton:hover {
background-color: #c9302c;
}

3
src/pages/DashboardPage/DashboardPage.jsx
View File

@ -118,6 +118,7 @@ const DashboardPage = ({ user }) => {
<CreateServer
user={user}
onCreateServer={handleCreateServerPage}
onCancel={handleCancelCreateServer}
noServers
/>
) : (
@ -141,6 +142,8 @@ const DashboardPage = ({ user }) => {
version={server.version}
name={server.name}
framework={server.framework}
maxPlayers={server.maxPlayers}
countPlayers={server.onlinePlayers}
onRunClick={() => handleRunServer(server.name)}
onStopClick={() => handleStopServer(server.name)}
onDeleteClick={() => handleDeleteServer(server.name)}