Added some features

- Added auto servers update (every 10 seconds)
- Visual changes

Author: chaposcripts

frontend/src/main.ts

@@ -22,7 +22,7 @@ type Server = {
 	plotPoints:           {online: number, time: number}[]
 }
 
-var serversList: Server[];
+var serversList: Server[] = [];
 
 function createServer(server: Server, id: number, isSelected = false) {
     const list = document.getElementById('servers-list');
@@ -64,6 +64,10 @@ function createServer(server: Server, id: number, isSelected = false) {
 addEventListener('DOMContentLoaded', () => {
     loadConfig();
     EventsEmit('servers:request');
+    setInterval(() => {
+        console.log('Requesting servers update...');
+        EventsEmit('servers:request');
+    }, 10000);
     document.querySelectorAll('input[type=checkbox]').forEach((el) => el.addEventListener('click', () => {
         //@ts-ignore
         config.params[el.id] = el.checked
@@ -108,18 +112,14 @@ EventsOn('settings:fileDialogPathSelected', (path: string) => {
 });
 
 EventsOn('servers:update', (servers: Server[]) => {
+    console.log('servers:update');
+    const scrollAfterCreation = serversList.length == 0;
     serversList = servers;
     // alert(servers);
     servers.sort((a, b) => a.number - b.number).forEach((server) => {
         document.getElementById(server.number.toString())?.remove();
         createServer(server, server.number, config.selectedServer == server.number);
     });
     //@ts-ignore
-    document.getElementById('servers-list').scrollTop = (config.selectedServer - 1) * 42
-});
-
-declare global {
-    interface Window {
-        startGame: () => void;
-    }
-}
+    if (scrollAfterCreation) document.getElementById('servers-list').scrollTop = (config.selectedServer - 1) * 42
+});

frontend/src/style.css

@@ -100,8 +100,8 @@ button {
 dialog {
     background-color: #212121;
     user-select: none;
-    scrollbar-width: thin; /* Äëÿ Firefox */
-    scrollbar-color: #313131 #181818; /* Öâåò ïîëçóíêà è ôîíà */
+    scrollbar-width: thin;
+    scrollbar-color: #313131 #181818;
     scrollbar-arrow-color: transparent;
     width: 100%;
     height: 100%;
@@ -119,13 +119,13 @@ dialog {
 
 .settings-checkboxes {
     display: flex;
-    flex-direction: column; /* Ðàñïîëîæåíèå ýëåìåíòîâ â êîëîíêó */
+    flex-direction: column;
 }
 
 .checkbox-item {
-    display: flex; /* Èñïîëüçóåì flex äëÿ âûðàâíèâàíèÿ label è checkbox */
-    align-items: center; /* Âûðàâíèâàíèå ïî öåíòðó ïî âåðòèêàëè */
-    margin-bottom: 8px; /* Îòñòóï ìåæäó ñòðîêàìè */
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
 }
 
 
@@ -193,15 +193,15 @@ dialog {
 }
 
 .server {
-    /* background-color: purple; */
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 5px;
 }
 
 .server-players {
-    text-align: right;
+    color: gray;
+    margin-left: auto;
 }
 
 .input-name {