Pandipipas/scoreko-dev
1
0
Fork 0
mirror of https://github.com/Pandipipas/scoreko-dev.git synced 2026-06-06 03:32:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Pandipipas
2026-02-20 21:24:53 +01:00
committed by GitHub
parent 464e7d4b9e
commit 582ba7469a
2 changed files with 2 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/graphics/scoreboard-2xko/main.vue
+1 -34
View File
@@ -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
+1 -63
View File
@@ -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;
}