Merge pull request #17 from 238SAMIxD/tournament-info

[Feature] Tournament information

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

frontend/gfx/ingame.css

@@ -310,6 +310,33 @@ 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;
+  white-space: nowrap;
+}
+
+#tournament .phase {
+  text-transform: uppercase;
+}
+
 .event {
   position: absolute;
   left: -2px;

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>

frontend/gfx/ingame.js

@@ -1,6 +1,7 @@
 const blueTeam = document.querySelector('#blue')
 const redTeam = document.querySelector('#red')
 let showNicknames,
+  showTournament,
   showLeaderBoard,
   showScoreBoard,
   score,
@@ -425,6 +426,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'
@@ -434,6 +445,10 @@ function changeColors(e) {
   sbBlueStanding.innerText = e.teams.blueTeam?.standing || ''
   sbRedStanding.innerText = e.teams.redTeam?.standing || ''
 
+  roundOfSpan.textContent = e.roundOf <= 8 ? roundOfMap[e.roundOf] : `Round of ${e.roundOf}`
+  nameSpan.textContent = e.tournamentName
+  resizeText(tournamentDiv)
+
   if(e.teams.blueTeam?.logo !== undefined && e.teams.blueTeam?.logo !== '') {
     sbBlueLogo.src = `/pages/op-module-teams/img/${e.teams.blueTeam.logo}`
     sbBlueLogo.style.display = 'block'
@@ -624,6 +639,10 @@ function updateSettings(e) {
       })
     }
   }
+  if (e.showTournament !== showTournament) {
+    showTournament = e.showTournament
+    document.querySelector('#tournament').style.display = e.showTournament ? 'flex' : 'none'
+  }
 
   if (showScoreBoard !== e.scoreboard.active) {
     showScoreBoard = e.scoreboard.active
@@ -780,6 +799,22 @@ function createLeaderBoardItem(player, max, type = 'xp') {
   return lbItem
 }
 
+const isOverflown = ({ clientHeight, scrollHeight, clientWidth, scrollWidth }) => (scrollHeight > clientHeight || scrollWidth > clientWidth)
+
+const resizeText = (parent) => {
+  let i = 10
+  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)

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>

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({

types/Config.d.ts

@@ -6,6 +6,7 @@ export interface Config {
   ppTimer: boolean
   delay: number
   showNicknames: boolean
+  showTournament: boolean
   scoreboard: {
     active: boolean
     score: boolean