From 77f353b73bdb7c4b877a64581805c3d5bc54d3f9 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 1/5] 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 = ''

From 4caead4c8a68b084368ef80c4c768a294704239e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samuel=20J=C4=99drzejewski?= <samijedrzejewski@gmail.com>
Date: Wed, 27 Sep 2023 10:39:57 +0200
Subject: [PATCH 2/5] Added tournament phase and name window

---
 frontend/gfx/ingame.css  | 26 ++++++++++++++++++++++++++
 frontend/gfx/ingame.html |  6 ++++++
 frontend/gfx/ingame.js   | 29 +++++++++++++++++++++++++++++
 3 files changed, 61 insertions(+)

diff --git a/frontend/gfx/ingame.css b/frontend/gfx/ingame.css
index 8be4ad6..38f3c3d 100644
--- a/frontend/gfx/ingame.css
+++ b/frontend/gfx/ingame.css
@@ -310,6 +310,32 @@ body {
   opacity: 0 !important;
 }
 
+#tournament {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: .5rem;
+  position: absolute;
+  bottom: 235px;
+  left: 605px;
+  right: 590px;
+  height: 65px;
+  padding: 5px;
+  background: var(--background-color);
+  border-radius: 20px 20px 0 0;
+  box-shadow: 0 0 0 1px #3f3321, 0 0 0 3px #524b2d, 0 0 0 4px #716441;
+}
+
+#tournament .content {
+  background: -webkit-linear-gradient(#978867, #464030);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+#tournament .phase {
+  text-transform: uppercase;
+}
+
 .event {
   position: absolute;
   left: -2px;
diff --git a/frontend/gfx/ingame.html b/frontend/gfx/ingame.html
index 8e8dcf1..59a081c 100644
--- a/frontend/gfx/ingame.html
+++ b/frontend/gfx/ingame.html
@@ -239,6 +239,12 @@ <h2 class="event-time">AT 15:25</h2>
 
     <div id="killfeed"></div>
 
+    <div id="tournament">
+      <div class="content">
+        <span class="phase"></span> - <span class="name"></span>
+      </div>
+    </div>
+
     <div id="inhibDiv" class="hide">
       <div id="blueSide" class="inhibitors hide">
         <h3>Inhibitors</h3>
diff --git a/frontend/gfx/ingame.js b/frontend/gfx/ingame.js
index 4e0e799..b5e1693 100644
--- a/frontend/gfx/ingame.js
+++ b/frontend/gfx/ingame.js
@@ -425,6 +425,16 @@ function changeColor(color) {
 
 const sbBlueScore = scoreboard.querySelector('.sb-score-blue')
 const sbRedScore = scoreboard.querySelector('.sb-score-red')
+const tournamentDiv = document.querySelector('#tournament')
+const roundOfSpan = tournamentDiv.querySelector('.phase')
+const nameSpan = tournamentDiv.querySelector('.name')
+const roundOfMap = {
+  0: 'Upper Bracket Final',
+  1: 'Upper Bracket Final',
+  2: 'Finals',
+  4: 'Semi Finals',
+  8: 'Quarter Finals'
+}
 
 function changeColors(e) {
   sbBlueTag.innerText = e.teams.blueTeam?.tag || 'Tag'
@@ -441,6 +451,9 @@ function changeColors(e) {
     sbRedLogo.src = `/pages/op-module-teams/img/${e.teams.redTeam.logo}`
     sbRedLogo.style.visibility = 'visible'
   }
+  roundOfSpan.textContent = e.roundOf <= 8 ? roundOfMap[e.roundOf] : `Round of ${e.roundOf}`
+  nameSpan.textContent = e.tournamentName
+  resizeText(tournamentDiv)
 
   sbBlueScore.innerHTML = ''
   sbRedScore.innerHTML = ''
@@ -779,6 +792,22 @@ function createLeaderBoardItem(player, max, type = 'xp') {
   return lbItem
 }
 
+const isOverflown = ({ clientHeight, scrollHeight, clientWidth, scrollWidth }) => (scrollHeight > clientHeight || scrollWidth > clientWidth)
+
+const resizeText = (parent) => {
+  let i = 20
+  let overflow = false
+  const maxSize = 50
+
+  while (!overflow && i < maxSize) {
+    parent.style.fontSize = `${i}px`
+    overflow = isOverflown(parent)
+    if (!overflow) i++
+  }
+
+  parent.style.fontSize = `${i - 1}px`
+}
+
 LPTE.onready(async () => {
   LPTE.on('module-league-in-game', 'level-update', levelUpdate)
   LPTE.on('module-league-in-game', 'item-update', itemUpdate)

From 93b2df3564aeac2ddf40edfdb9dcdc6ad624d535 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samuel=20J=C4=99drzejewski?= <samijedrzejewski@gmail.com>
Date: Wed, 27 Sep 2023 11:21:21 +0200
Subject: [PATCH 3/5] Added setting about tournament info

---
 frontend/frontend.js   | 2 ++
 frontend/gfx/ingame.js | 5 +++++
 frontend/index.html    | 9 +++++++++
 plugin.ts              | 2 ++
 types/Config.d.ts      | 1 +
 5 files changed, 19 insertions(+)

diff --git a/frontend/frontend.js b/frontend/frontend.js
index e3ff788..16853fb 100644
--- a/frontend/frontend.js
+++ b/frontend/frontend.js
@@ -20,6 +20,7 @@ document.querySelector('#settings').addEventListener('submit', (e) => {
     ppTimer: document.querySelector('#ppTimer').checked,
     delay: parseInt(document.querySelector('#delay').value),
     showNicknames: document.querySelector('#showNicknames').checked,
+    showTournament: document.querySelector('#showTournament').checked,
     scoreboard: {
       active: document.querySelector('#scoreboard-active').checked,
       score: document.querySelector('#scoreboard-score').checked,
@@ -201,6 +202,7 @@ function initSettings(settings) {
   document.querySelector('#ppTimer').checked = settings.ppTimer
   document.querySelector('#delay').value = settings.delay
   document.querySelector('#showNicknames').checked = settings.showNicknames
+  document.querySelector('#showTournament').checked = settings.showTournament
 
   document.querySelector('#scoreboard-active').checked =
     settings.scoreboard.active
diff --git a/frontend/gfx/ingame.js b/frontend/gfx/ingame.js
index b5e1693..1f49f8b 100644
--- a/frontend/gfx/ingame.js
+++ b/frontend/gfx/ingame.js
@@ -1,6 +1,7 @@
 const blueTeam = document.querySelector('#blue')
 const redTeam = document.querySelector('#red')
 let showNicknames,
+  showTournament,
   showLeaderBoard,
   showScoreBoard,
   score,
@@ -636,6 +637,10 @@ function updateSettings(e) {
       })
     }
   }
+  if (e.showTournament !== showTournament) {
+    showTournament = e.showTournament
+    document.querySelector('#tournament').style.display = e.showTournament ? 'block' : 'none'
+  }
 
   if (showScoreBoard !== e.scoreboard.active) {
     showScoreBoard = e.scoreboard.active
diff --git a/frontend/index.html b/frontend/index.html
index f975dc9..093026b 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -367,6 +367,15 @@ <h2>Settings</h2>
     />
     <label class="form-check-label" for="showNicknames"> Show Nicknames </label>
   </div>
+  <div class="form-check mb-3">
+    <input
+      class="form-check-input"
+      type="checkbox"
+      value=""
+      id="showTournament"
+    />
+    <label class="form-check-label" for="showTournament"> Show Tournnament Info </label>
+  </div>
   <div class="form-group">
     <button type="submit" class="btn btn-primary">Save Settings</button>
   </div>
diff --git a/plugin.ts b/plugin.ts
index 3251621..517597c 100644
--- a/plugin.ts
+++ b/plugin.ts
@@ -25,6 +25,7 @@ module.exports = async (ctx: PluginContext) => {
       killfeed: false,
       ppTimer: false,
       showNicknames: false,
+      showTournament: true,
       delay: 0,
       scoreboard: {
         active: true,
@@ -47,6 +48,7 @@ module.exports = async (ctx: PluginContext) => {
     config.ppTimer = e.ppTimer
     config.delay = e.delay
     config.showNicknames = e.showNicknames
+    config.showTournament = e.showTournament
     config.scoreboard = e.scoreboard
 
     ctx.LPTE.emit({
diff --git a/types/Config.d.ts b/types/Config.d.ts
index 0779270..9c21985 100644
--- a/types/Config.d.ts
+++ b/types/Config.d.ts
@@ -6,6 +6,7 @@ export interface Config {
   ppTimer: boolean
   delay: number
   showNicknames: boolean
+  showTournament: boolean
   scoreboard: {
     active: boolean
     score: boolean

From 0cca721d17e74962c9b2f687dd37fe64d545a403 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samuel=20J=C4=99drzejewski?= <samijedrzejewski@gmail.com>
Date: Wed, 27 Sep 2023 11:29:27 +0200
Subject: [PATCH 4/5] Fixed word breaking

---
 frontend/gfx/ingame.css | 1 +
 frontend/gfx/ingame.js  | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/gfx/ingame.css b/frontend/gfx/ingame.css
index 38f3c3d..8936beb 100644
--- a/frontend/gfx/ingame.css
+++ b/frontend/gfx/ingame.css
@@ -330,6 +330,7 @@ body {
   background: -webkit-linear-gradient(#978867, #464030);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  white-space: nowrap;
 }
 
 #tournament .phase {
diff --git a/frontend/gfx/ingame.js b/frontend/gfx/ingame.js
index 1f49f8b..425a5a2 100644
--- a/frontend/gfx/ingame.js
+++ b/frontend/gfx/ingame.js
@@ -639,7 +639,7 @@ function updateSettings(e) {
   }
   if (e.showTournament !== showTournament) {
     showTournament = e.showTournament
-    document.querySelector('#tournament').style.display = e.showTournament ? 'block' : 'none'
+    document.querySelector('#tournament').style.display = e.showTournament ? 'flex' : 'none'
   }
 
   if (showScoreBoard !== e.scoreboard.active) {

From 669118719bd3d547289e86563dc20d99997920bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samuel=20J=C4=99drzejewski?= <samijedrzejewski@gmail.com>
Date: Wed, 27 Sep 2023 15:25:06 +0200
Subject: [PATCH 5/5] Changed minimal font size

---
 frontend/gfx/ingame.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/gfx/ingame.js b/frontend/gfx/ingame.js
index 425a5a2..0326d4d 100644
--- a/frontend/gfx/ingame.js
+++ b/frontend/gfx/ingame.js
@@ -800,7 +800,7 @@ function createLeaderBoardItem(player, max, type = 'xp') {
 const isOverflown = ({ clientHeight, scrollHeight, clientWidth, scrollWidth }) => (scrollHeight > clientHeight || scrollWidth > clientWidth)
 
 const resizeText = (parent) => {
-  let i = 20
+  let i = 10
   let overflow = false
   const maxSize = 50