From eddebdfc65debf172ae4355ffb1b3e972380bb85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samuel=20J=C4=99drzejewski?= <samijedrzejewski@gmail.com>
Date: Wed, 20 Sep 2023 23:08:49 +0200
Subject: [PATCH] Added team logos

---
 frontend/gfx/ingame.css  | 13 +++++++++++++
 frontend/gfx/ingame.html |  2 ++
 frontend/gfx/ingame.js   | 12 ++++++++++++
 3 files changed, 27 insertions(+)

diff --git a/frontend/gfx/ingame.css b/frontend/gfx/ingame.css
index 33f41f1..8be4ad6 100644
--- a/frontend/gfx/ingame.css
+++ b/frontend/gfx/ingame.css
@@ -768,6 +768,19 @@ body {
   margin-left: 25px;
 }
 
+.sb-logo {
+  width: 50px;
+  aspect-ratio: 1;
+  visibility: hidden;
+}
+
+.sb-blue .sb-logo {
+  margin-right: 25px;
+}
+.sb-red .sb-logo {
+  margin-left: 25px;
+}
+
 .sb-score {
   position: absolute;
   top: 0;
diff --git a/frontend/gfx/ingame.html b/frontend/gfx/ingame.html
index 1a06493..8e8dcf1 100644
--- a/frontend/gfx/ingame.html
+++ b/frontend/gfx/ingame.html
@@ -43,6 +43,7 @@ <h2 class="timer">3:00</h2>
       <div class="sb-team sb-blue">
         <div class="sb-team-info">
           <div class="sb-score sb-score-blue"></div>
+          <img src="/pages/op-module-teams/img/" alt="" class="sb-logo">
           <h3 class="sb-tag">Tag</h3>
           <h4 class="sb-standing">0-0</h4>
         </div>
@@ -75,6 +76,7 @@ <h2 class="sb-time">00:00</h2>
       <div class="sb-team sb-red">
         <div class="sb-team-info">
           <div class="sb-score sb-score-red"></div>
+          <img src="/pages/op-module-teams/img/" alt="" class="sb-logo">
           <h3 class="sb-tag">Tag</h3>
           <h4 class="sb-standing">0-0</h4>
         </div>
diff --git a/frontend/gfx/ingame.js b/frontend/gfx/ingame.js
index dbbbc8e..4e0e799 100644
--- a/frontend/gfx/ingame.js
+++ b/frontend/gfx/ingame.js
@@ -140,8 +140,10 @@ const sbBluePP = document.querySelector('.sb-blue.power-play')
 const sbRedPP = document.querySelector('.sb-red.power-play')
 
 const sbBlueTag = sbBlue.querySelector('.sb-tag')
+const sbBlueLogo = sbBlue.querySelector('.sb-logo')
 const sbBlueStanding = sbBlue.querySelector('.sb-standing')
 const sbRedTag = sbRed.querySelector('.sb-tag')
+const sbRedLogo = sbRed.querySelector('.sb-logo')
 const sbRedStanding = sbRed.querySelector('.sb-standing')
 
 const sbBlueKills = scoreboard.querySelector('.sb-kills-blue')
@@ -427,8 +429,18 @@ const sbRedScore = scoreboard.querySelector('.sb-score-red')
 function changeColors(e) {
   sbBlueTag.innerText = e.teams.blueTeam?.tag || 'Tag'
   sbRedTag.innerText = e.teams.redTeam?.tag || 'Tag'
+  sbBlueLogo.style.visibility = `hidden`
+  sbRedLogo.style.visibility = `hidden`
   sbBlueStanding.innerText = e.teams.blueTeam?.standing || ''
   sbRedStanding.innerText = e.teams.redTeam?.standing || ''
+  if(e.teams.blueTeam?.logo) {
+    sbBlueLogo.src = `/pages/op-module-teams/img/${e.teams.blueTeam.logo}`
+    sbBlueLogo.style.visibility = 'visible'
+  }
+  if(e.teams.redTeam?.logo) {
+    sbRedLogo.src = `/pages/op-module-teams/img/${e.teams.redTeam.logo}`
+    sbRedLogo.style.visibility = 'visible'
+  }
 
   sbBlueScore.innerHTML = ''
   sbRedScore.innerHTML = ''