From d04489819d40895c807ce2a54dd905fbc5cd7642 Mon Sep 17 00:00:00 2001
From: Marcel Peterkau <marcel@peterkau.de>
Date: Fri, 31 May 2024 12:49:38 +0200
Subject: [PATCH] highlite active Faction in WEbUI

---
 Software/data_src/index.htm              | 12 ++++++------
 Software/data_src/static/css/custom.css  | 21 ++++++++++++++++++++-
 Software/data_src/static/js/websocket.js | 21 ++++++++++++++++++++-
 3 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/Software/data_src/index.htm b/Software/data_src/index.htm
index 6597724..2ce7558 100644
--- a/Software/data_src/index.htm
+++ b/Software/data_src/index.htm
@@ -96,14 +96,14 @@
             <div id="header_faction3" class="col text-center data-name_faction3 text-white p-3">%NAME_FAC_3%</div>
           </div>
           <div class="row">
-            <div class="col bg-dark text-white p-3"><img src="static/img/logo_fac1.png"
-                class="rounded mx-auto img-fluid d-block" alt="...">
+            <div class="col bg-dark text-white p-3 data-activefaction faction-logo faction1">
+              <img src="static/img/logo_fac1.png" class="rounded mx-auto img-fluid d-block" alt="...">
             </div>
-            <div class="col bg-dark text-white p-3"><img src="static/img/logo_fac2.png"
-                class="rounded mx-auto img-fluid d-block" alt="...">
+            <div class="col bg-dark text-white p-3 data-activefaction faction-logo faction2">
+              <img src="static/img/logo_fac2.png" class="rounded mx-auto img-fluid d-block" alt="...">
             </div>
-            <div class="col bg-dark text-white p-3"><img src="static/img/logo_fac3.png"
-                class="rounded mx-auto img-fluid d-block" alt="...">
+            <div class="col bg-dark text-white p-3 data-activefaction faction-logo faction3">
+              <img src="static/img/logo_fac3.png" class="rounded mx-auto img-fluid d-block" alt="...">
             </div>
           </div>
           <div class="row">
diff --git a/Software/data_src/static/css/custom.css b/Software/data_src/static/css/custom.css
index 5e4b9ca..01b1963 100644
--- a/Software/data_src/static/css/custom.css
+++ b/Software/data_src/static/css/custom.css
@@ -8438,4 +8438,23 @@ a.text-dark:hover {
 
 .navbar-dark.bg-primary {
     background-color: #111 !important
-}
\ No newline at end of file
+}
+
+.glow-active-faction {
+    border: 3px solid #FFD700; /* Goldene Umrandung */
+    box-shadow: 0 0 20px #FFD700; /* Leuchtender Glüheffekt */
+    animation: glow 1.5s infinite alternate;
+    border-radius: 10px; /* Abgerundete Ecken */
+    margin-bottom: 10px; /* Abstand nach unten */
+  }
+  
+  @keyframes glow {
+    from {
+      box-shadow: 0 0 10px #FFD700;
+    }
+    to {
+      box-shadow: 0 0 20px #FFD700;
+    }
+  }
+  
+  
\ No newline at end of file
diff --git a/Software/data_src/static/js/websocket.js b/Software/data_src/static/js/websocket.js
index bbfe3dd..cbe1de2 100644
--- a/Software/data_src/static/js/websocket.js
+++ b/Software/data_src/static/js/websocket.js
@@ -178,9 +178,12 @@ function fillValuesToHTML(dataset) {
           // Wenn das Element ein Settingsabschnitt-div ist
           if (dataset[key] == 0) element.style.display = "none";
           else element.style.display = "";
-        } else if (element.tagName === "DIV") {
+        } else if (element.tagName === "DIV" || element.tagName === "SPAN") {
           if (element.classList.contains("format-time")) {
             element.innerText = formatTime(dataset[key]);
+          } else if (element.classList.contains("faction-logo")) {
+            // Faction-Logo-Logik
+            updateFactionLogo(element, dataset[key]);
           } else {
             element.innerText = dataset[key];
           }
@@ -211,6 +214,22 @@ function formatTime(seconds) {
   );
 }
 
+function updateFactionLogo(element, faction) {
+  const glowClass = "glow-active-faction";
+  const factionClasses = ["faction1", "faction2", "faction3"];
+
+  factionClasses.forEach((factionClass) => {
+    if (
+      factionClass === "faction" + faction &&
+      element.classList.contains(factionClass)
+    ) {
+      element.classList.add(glowClass);
+    } else {
+      element.classList.remove(glowClass);
+    }
+  });
+}
+
 // Funktion zum Setzen des ausgewählten Werts für Dropdowns
 function setDropdownValue(selectElement, value) {
   for (var i = 0; i < selectElement.options.length; i++) {