added server status indicator and added server status logic

api/src/services/serverService.js

@@ -43,8 +43,8 @@ const checkServerHealth = async () => {
 };
 
 const getAvailableServers = async () => {
-  return await GameServer.find({ status: "online" }).select(
+  return await GameServer.find({}).select(
-    "name url playersOnline maxPlayers",
+    "name url playersOnline status maxPlayers",
   );
 };
 const getServerConnectionDetails = async (serverId) => {

client/src/views/MainMenu/sections/ServerSection.css

@@ -1,4 +1,3 @@
-/* Основні контроллери (фільтри та кнопка Refresh) */
 .server-controls {
   display: flex;
   justify-content: space-between;
@@ -30,7 +29,6 @@
   border-color: var(--primary-color);
 }
 
-/* Контейнер списку серверів */
 .server-list {
   max-height: calc(100vh - 350px);
   overflow-y: auto;
@@ -41,7 +39,6 @@
   padding: 10px;
 }
 
-/* КАРТКА СЕРВЕРА */
 .server-card {
   display: flex;
   justify-content: space-between;
@@ -52,10 +49,8 @@
   border-radius: 2px;
   border: 1px solid var(--border-color);
   position: relative;
-  /* Прибрано загальний transition для трансформацій */
 }
 
-/* Синя лінія зліва (фіксована, без виїзду) */
 .server-card::before {
   content: "";
   position: absolute;
@@ -77,7 +72,6 @@
   opacity: 1;
 }
 
-/* Інформація про сервер */
 .server-info {
   display: flex;
   align-items: center;
@@ -101,9 +95,9 @@
   background: rgba(0, 0, 0, 0.3);
   padding: 2px 8px;
   border-radius: 4px;
+  max-width: 100px;
 }
 
-/* Індикатор статусу */
 .status-indicator.online {
   width: 10px;
   height: 10px;
@@ -126,7 +120,6 @@
   }
 }
 
-/* Заголовок секції */
 .server-section-title {
   font-family: "Orbitron", sans-serif;
   font-size: 1.5rem;
@@ -137,7 +130,6 @@
   letter-spacing: 4px;
 }
 
-/* Стани завантаження та порожнього списку */
 .server-loading,
 .server-empty {
   text-align: center;
@@ -206,7 +198,6 @@
   display: flex;
   flex-direction: column;
 }
-/* Адаптивність */
 @media screen and (max-width: 600px) {
   .server-card {
     flex-direction: column;
@@ -232,3 +223,43 @@
     margin-bottom: 5px;
   }
 }
+
+.status-indicator {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-right: 15px;
+}
+
+.status-indicator.online {
+  background: var(--success-color);
+  box-shadow: 0 0 10px var(--success-color);
+  animation: status-pulse 2s infinite ease-in-out;
+}
+
+.status-indicator.offline {
+  background: #555;
+  box-shadow: none;
+  animation: none;
+  opacity: 0.5;
+}
+
+@keyframes status-pulse {
+  0%,
+  100% {
+    opacity: 0.7;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.15);
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .status-indicator.online,
+  .status-indicator.offline {
+    margin-right: 0;
+    margin-bottom: 5px;
+  }
+}

client/src/views/MainMenu/sections/ServerSection.jsx

@@ -19,7 +19,6 @@ const ServerSection = ({ onBack, onSelect }) => {
       const elapsedTime = Date.now() - startTime;
       const remainingTime = Math.max(0, 2000 - elapsedTime);
       await new Promise((resolve) => setTimeout(resolve, remainingTime));
-
       setServers(response.data);
     } catch (error) {
       console.error("Error fetching servers:", error);
@@ -110,7 +109,9 @@ const ServerSection = ({ onBack, onSelect }) => {
           filteredServers.map((server) => (
             <div key={server._id || server.serverName} className="server-card">
               <div className="server-info">
-                <div className="status-indicator online"></div>
+                <div
+                  className={`status-indicator ${server.status === "online" ? "online" : "offline"}`}
+                ></div>
                 <div className="server-details-text">
                   <span className="server-name">{server.name}</span>
                   <span className="server-players">