Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Fix missing maptype icon #209

Merged
merged 7 commits into from
Aug 26, 2023
Merged

chore: Fix missing maptype icon #209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4c9a9f2
chore: Fix missing maptype icon
MrLotU Aug 26, 2023
93acb8a
Formatting
zusorio Aug 26, 2023
958c716
chore: Also fix the thing knock wanted fixed
MrLotU Aug 26, 2023
88fb6c6
Minor changes
slmnio Aug 26, 2023
b15851f
Merge remote-tracking branch 'MrLotU/fix_missing_map_type_icons' into…
slmnio Aug 26, 2023
622cb42
chore: Fix knock bug fr fr
MrLotU Aug 26, 2023
20bd614
Remove first_to check on match scoreboard icon
slmnio Aug 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion website/src/components/broadcast/MapStatsSegment.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export default {
},
mapGroup() {
if (!this.map || !this.mapGroups.length) return null;
const group = this.mapGroups.find(group => group.name === this.map.type?.[0]);
const group = this.mapGroups.find(group => group.name === this.map.map?.type);
if (!group) return null;
if (!this.map.dummy) {
group.maps = group.maps.sort((a, b) => a.name === this.map.name?.[0] ? -1 : (b.name === this.map.name?.[0] ? 1 : 0));
Expand Down
153 changes: 93 additions & 60 deletions website/src/components/broadcast/MatchScoreboard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@
<transition name="scoreboard-fade">
<div class="scoreboard-row scoreboard-header" v-if="shouldAnimate">
<div class="scoreboard-team blank"></div>
<div class="map flex-center map-type bg-center" v-for="map in maps" :key="map.id" :style="bg(MapTypeIcons[map.map?.type])"></div>
<div class="map flex-center map-type bg-center" v-for="map in maps" :key="map.id"
:style="bg(mapTypeIcon(map))"></div>
</div>
</transition>
<ThemeTransition class="scoreboard-team-transition" :active="shouldAnimate" v-for="(team, ti) in match.teams" :key="team.id" :theme="team?.theme" :border-width="6" border="x">
<ThemeTransition class="scoreboard-team-transition" :active="shouldAnimate" v-for="(team, ti) in match.teams"
:key="team.id" :theme="team?.theme" :border-width="6" border="x">
<div class="scoreboard-row team-row">
<div class="scoreboard-team" :style="logoBackground1(team)">
<ThemeLogo class="team-logo" :theme="team?.theme" border-width="0px" logo-size=""/>
Expand All @@ -16,16 +18,16 @@
</div>
<!-- :style="cleanID(map.winner?.[0]) === team.id ? themeBackground1(team) : {}" -->
<div class="map flex-center map-score" v-for="map in maps" :key="map.id"
:class="{'map-won': cleanID(map.winner?.[0]) === team.id}">
:class="{ 'map-won': cleanID(map.winner?.[0]) === team.id }">
<div class="industry-align">{{ !map.showNumbers ? "-" : (map[`score_${ti + 1}`] || 0) }}</div>
</div>
<div class="match-score flex-center"
:style="match[`score_${ti+1}`] === match.first_to ? themeBackground1(team) : {}">
<div class="industry-align">{{ match[`score_${ti + 1}`] || 0 }}</div>
</div>
</div>
</ThemeTransition>
</div>
</div>
<div class="match-score flex-center"
:style="match[`score_${ti + 1}`] === match.first_to ? themeBackground1(team) : {}">
<div class="industry-align">{{ match[`score_${ti + 1}`] || 0 }}</div>
</div>
</div>
</ThemeTransition>
</div>
</template>

<script>
Expand All @@ -39,8 +41,23 @@ import { bg } from "@/utils/images";

export default {
name: "MatchScoreboard",
components: { ThemeTransition, Squeezable, ThemeLogo },
methods: { themeBackground1, logoBackground1, cleanID, bg },
components: {
ThemeTransition,
Squeezable,
ThemeLogo
},
methods: {
themeBackground1,
logoBackground1,
cleanID,
bg,
mapTypeIcon(map) {
if (map.map?.type) return MapTypeIcons[map.map.type];
if (!this.mapTypes) return null;
const mapIndex = this.maps.indexOf(map);
return MapTypeIcons[this.mapTypes[mapIndex]];
}
},
props: ["match", "active", "broadcast", "animateOnMount"],
data: () => ({
manualAnimate: null
Expand All @@ -52,9 +69,6 @@ export default {
}
return this.active;
},
MapTypeIcons() {
return MapTypeIcons;
},
maps() {
const maps = (ReactiveRoot(this.match.id, {
maps: ReactiveArray("maps", {
Expand Down Expand Up @@ -112,95 +126,114 @@ export default {
</script>

<style scoped>
.scoreboard-row, .scoreboard-team {
display: flex;
.scoreboard-row,
.scoreboard-team {
display: flex;
}

.scoreboard-header {
border-left: 7px solid transparent;
border-left: 7px solid transparent;
}

.scoreboard-row.team-row {
background-color: white;
color: black;
width: fit-content;
background-color: white;
color: black;
width: fit-content;
}

.team-logo {
height: 70px;
width: 90px;
height: 70px;
width: 90px;
}

.scoreboard-team {
width: 400px;
margin-right: .5em
width: 400px;
margin-right: .5em
}


.team-name {
font-size: 42px;
text-transform: uppercase;
margin-left: .2em;
margin-right: .3em;
font-size: 42px;
text-transform: uppercase;
margin-left: .2em;
margin-right: .3em;
}

.map, .match-score {
width: 70px;
/*margin: 0 2px;*/
.map,
.match-score {
width: 70px;
/*margin: 0 2px;*/
}
.map-score, .match-score {
font-size: 42px;

.map-score,
.match-score {
font-size: 42px;
}

/*.map.map-type {*/
/* background-color: black;*/
/* color: white;*/
/*}*/
.map-type {
height: 30px;
background-size: 25px;
filter: invert(1);
margin-bottom: 4px;
/*background-color: rgba(255,255,255,0.2);*/
height: 30px;
background-size: 25px;
filter: invert(1);
margin-bottom: 4px;
/*background-color: rgba(255,255,255,0.2);*/
}

.match-score {
margin-left: .25em;
margin-left: .25em;
}

.map-score:not(.map-won) {
font-weight: 400;
font-weight: 400;
}

.match-score {
font-weight: 900;
font-weight: 900;
}

.scoreboard-team-transition {
width: fit-content;
width: fit-content;
}


.scoreboard-clip-right-enter-active {
transition: all 2s ease; overflow: hidden
transition: all 2s ease;
overflow: hidden
}

.scoreboard-clip-right-enter {
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}

.scoreboard-clip-right-enter-to {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.scoreboard-fade-enter-active {
transition: all .2s ease;
transition-delay: .75s;
transition: all .2s ease;
transition-delay: .75s;
}

.scoreboard-fade-enter {
opacity: 0;
opacity: 0;
}

.scoreboard-fade-enter-to {
opacity: 1;
opacity: 1;
}

.map {
position: relative;
position: relative;
}

.team-row .map ~ .map:before {
content: "";
position: absolute;
background-color: rgba(0,0,0,0.1);
right: 100%;
width: 2px;
height: 60%;
}
</style>
content: "";
position: absolute;
background-color: rgba(0, 0, 0, 0.1);
right: 100%;
width: 2px;
height: 60%;
}</style>
8 changes: 5 additions & 3 deletions website/src/components/broadcast/roots/MapStatsOverlay.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,11 @@ export default {
maps.push({
dummy: true,
...(this.mapTypes ? {
name: [this.mapTypes && this.mapTypes[num]],
type: [this.mapTypes && this.mapTypes[num]],
image: [{ url: DefaultMapImages[this.mapTypes[num]] }]
map: {
name: this.mapTypes && this.mapTypes[num],
type: this.mapTypes && this.mapTypes[num],
image: [{ url: DefaultMapImages[this.mapTypes[num]] }]
}
} : {})
});
}
Expand Down