Remove all commentator references from 2XKO graphic (#123)

src/graphics/scoreboard-2xko/main.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue';
 import { computed, ref, watch } from 'vue';
-import { commentaryReplicant, playersReplicant, scoreboardReplicant } from '../../browser_shared/replicants';
+import { playersReplicant, scoreboardReplicant } from '../../browser_shared/replicants';
 import { resolveCountryCode } from '../../shared/countries';
 import { getCharactersByGame } from '../../shared/fighting-characters';
 import type { Schemas } from '../../types';
@@ -13,13 +13,8 @@ const defaultScoreboard: Schemas.Scoreboard = {
   leftCountryOverride: '', rightCountryOverride: '', leftCharacter: '', rightCharacter: '', leftScore: 0, rightScore: 0, round: '', game: '',
 };
 
-const defaultCommentary: Schemas.Commentary = {
-  leftCommentator: '', leftCommentatorTwitter: '', rightCommentator: '', rightCommentatorTwitter: '',
-};
-
 const players = computed<Schemas.Players>(() => playersReplicant?.data ?? {});
 const scoreboard = computed<Schemas.Scoreboard>(() => scoreboardReplicant?.data ?? defaultScoreboard);
-const commentary = computed<Schemas.Commentary>(() => commentaryReplicant?.data ?? defaultCommentary);
 
 const leftName = computed(() => scoreboard.value.leftNameOverride || players.value[scoreboard.value.leftPlayerId]?.gamertag || 'PLAYER 1');
 const rightName = computed(() => scoreboard.value.rightNameOverride || players.value[scoreboard.value.rightPlayerId]?.gamertag || 'PLAYER 2');
@@ -297,25 +292,6 @@ const gameText = computed(() => scoreboard.value.game || '2XKO');
       </div>
     </div>
 
-    <div style="display:flex;position:absolute;bottom:0;width:100%;justify-content:center;">
-      <svg
-        id="castersBG"
-        xmlns="http://www.w3.org/2000/svg"
-        width="700"
-        height="67.83"
-        viewBox="0 -40 340.24 67.83"
-        class="bg-img"
-      ><path
-        id="castersShadow"
-        filter="url(#elShadow)"
-        d="M789.88,1080h340.24l-12.4-25a5,5,0,0,0-4.49-2.79H806.77a5,5,0,0,0-4.49,2.79Z"
-        transform="translate(-789.88 -1052.17)"
-      /><path
-        id="castersBody"
-        d="M789.88,1080h340.24l-12.4-25a5,5,0,0,0-4.49-2.79H806.77a5,5,0,0,0-4.49,2.79Z"
-        transform="translate(-789.88 -1052.17)"
-      /></svg>
-    </div>
 
     <div class="scoreboardContainer">
       <div
@@ -365,15 +341,6 @@ const gameText = computed(() => scoreboard.value.game || '2XKO');
         </div>
       </div>
     </div>
-
-    <div
-      id="casterContainer"
-      class="scoreboardContainer"
-    >
-      <div class="commentators">
-        <span class="casterText">{{ commentary.leftCommentator || 'Commentator 1' }}</span><span class="casterIcon">🎙</span><span class="casterText">{{ commentary.rightCommentator || 'Commentator 2' }}</span>
-      </div>
-    </div>
   </div>
 </template>
 

src/graphics/scoreboard-2xko/template.css

@@ -100,19 +100,6 @@
 	opacity: 0.9; /* 0.9 */
 }
 
-/* == Casters Row == */
-
-/* Drop shadow */
-#castersShadow {
-	fill: #000000; /* 000000 */
-	opacity: 0.8; /* 0.8 */
-}
-/* Element body */
-#castersBody {
-	fill: #000000; /* 000000 */
-	opacity: 0.9; /* 0.9 */
-}
-
 /* ==== END OF SVG ELEMENTS COLOR SETTINGS ==== */
 
 
@@ -359,55 +346,8 @@ body {
 	object-fit: contain;
 }
 
-.commentators {
-	background-color: transparent;
-	align-items: center;
-	gap: 6px;
-	font-family: 'Titillium Web', sans-serif; /*<--- Default placeholder font*/
-	font-family: 'Akko Pro', sans-serif;
-	font-size: 16px;
-	display: flex;
-	justify-content: center;
-	height: 20px;
-	position: relative;
-	z-index: 1;
-	color: #ffffff;
-}
-
-.micIcon {
-	width: 12px;
-	height: 12px;
-	background-color: red;
-	border-radius: 50%;
-}
-
-#casterContainer {
-	align-items: center;
-	height: 18px;
-	position: relative;
-	top: 1002px;
-}
-
-.casterIcon {
-	width: 18px;
-	height: 18px;
-	margin: 0 4px;
-	font-size: 16px;
-	text-align: center;
-	align-content: center;
-}
-
-.casterText {
-	display: inline-flex;
-	height: 18px;
-	width: 130px;
-	align-items: flex-start;
-	justify-content: center;
-	color: #ffffff;
-}
-
 :root {
-	--fade-duration: 500ms; /* length of .fade animation, set here */
+	--fade-duration: 500ms;
 }
 
 .fade {
@@ -419,11 +359,9 @@ body {
 	opacity: 0;
 }
 
-/* Default values for the animation */
 [data-anim] {
 	opacity: 0;
 	will-change: transform, opacity;
-	/* Customizable via CSS variables (set by JS from data-*): */
 	--delay: 0ms;
 	--dur: 500ms;
 }