Skip to content

Commit 2c19cf2

Browse files
drweissbrotdrweissbrot
committed
#52 Fennec: split Top Bar center into components
1 parent 16f353e commit 2c19cf2

24 files changed

+342
-288
lines changed

‎src/themes/fennec/top-bar/center/center.css

+1-194
Original file line numberDiff line numberDiff line change
@@ -4,199 +4,6 @@
44
grid-template-rows: 2fr 1fr 1fr;
55
grid-template-areas:
66
'score-left current-round score-right'
7-
'maps-left current-map maps-right'
7+
'map-wins-left current-map map-wins-right'
88
'match-point-rounds match-point-rounds match-point-rounds';
99
}
10-
11-
.score {
12-
display: flex;
13-
14-
font-size: var(--top-bar-score-font-size);
15-
font-weight: 700;
16-
}
17-
18-
.score.--left::before,
19-
.score.--right::after {
20-
content: '';
21-
display: block;
22-
width: 2rem;
23-
height: 100%;
24-
}
25-
26-
.score .inner {
27-
padding: var(--top-bar-padding-x) 0;
28-
min-width: 2ch;
29-
30-
isolation: isolate;
31-
text-align: center;
32-
z-index: 1;
33-
}
34-
35-
.score.--ct.--left::before,
36-
.score.--ct.--right::after,
37-
.score.--ct .inner {
38-
background: var(--counter-terrorists);
39-
}
40-
41-
.score.--t.--left::before,
42-
.score.--t.--right::after,
43-
.score.--t .inner {
44-
background: var(--terrorists);
45-
}
46-
47-
.score.--left {
48-
grid-area: score-left;
49-
}
50-
51-
.score.--left::before {
52-
transform: skewX(20deg) translateX(-0.825rem);
53-
}
54-
55-
.score.--left .inner {
56-
padding-left: 0.5rem;
57-
padding-right: 1rem;
58-
margin-left: -1.75rem;
59-
}
60-
61-
.score.--right {
62-
grid-area: score-right;
63-
}
64-
65-
.score.--right::after {
66-
transform: skewX(-20deg) translateX(0.825rem);
67-
}
68-
69-
.score.--right .inner {
70-
padding-right: 0.5rem;
71-
padding-left: 1rem;
72-
margin-right: -1.75rem;
73-
}
74-
75-
.maps {
76-
display: flex;
77-
align-items: center;
78-
justify-content: center;
79-
80-
background: rgba(255, 255, 255, 0.75);
81-
}
82-
83-
.maps.--left {
84-
grid-area: maps-left;
85-
padding-left: 0.5rem;
86-
clip-path: polygon(0 0, 100% 0, 100% 100%, 0.85rem 100%);
87-
}
88-
89-
.maps.--right {
90-
grid-area: maps-right;
91-
padding-right: 0.5rem;
92-
clip-path: polygon(0 0, 100% 0, calc(100% - 0.85rem) 100%, 0 100%);
93-
}
94-
95-
.maps .pip {
96-
width: 0.6rem;
97-
aspect-ratio: 1;
98-
border: 0.2rem solid;
99-
margin: 0.3rem;
100-
}
101-
102-
.maps.--ct .pip {
103-
border-color: var(--counter-terrorists);
104-
}
105-
106-
.maps.--ct .pip.--filled {
107-
background: var(--counter-terrorists);
108-
}
109-
110-
.maps.--t .pip {
111-
border-color: var(--terrorists);
112-
}
113-
114-
.maps.--t .pip.--filled {
115-
background: var(--terrorists);
116-
}
117-
118-
.current-round {
119-
grid-area: current-round;
120-
121-
display: flex;
122-
flex-direction: column;
123-
justify-content: space-around;
124-
125-
padding: 0.25rem;
126-
background: rgba(0, 0, 0, 0.5);
127-
}
128-
129-
.current-round.--warmup {
130-
font-size: 1.5rem;
131-
letter-spacing: 0.2em;
132-
text-transform: uppercase;
133-
}
134-
135-
.current-round img.paused-icon,
136-
.current-round img.planted-bomb-icon {
137-
height: 2rem;
138-
}
139-
140-
.current-round .clock {
141-
font-size: 2.25rem;
142-
}
143-
144-
.current-round img.bombsite-icon {
145-
height: 1.75rem;
146-
margin-left: 0.75rem;
147-
}
148-
149-
.current-round .bomb {
150-
height: 2.25rem;
151-
152-
display: flex;
153-
align-items: center;
154-
justify-content: center;
155-
}
156-
157-
.current-round .round-number {
158-
font-size: 1.3rem;
159-
}
160-
161-
.current-map {
162-
grid-area: current-map;
163-
164-
display: flex;
165-
align-items: center;
166-
justify-content: center;
167-
168-
background: rgba(255, 255, 255, 0.75);
169-
color: #000;
170-
font-size: 1.35rem;
171-
font-weight: 700;
172-
letter-spacing: 0.2em;
173-
text-transform: uppercase;
174-
}
175-
176-
.match-point-rounds-overflow-container {
177-
grid-area: match-point-rounds;
178-
overflow: hidden;
179-
}
180-
181-
.match-point-rounds {
182-
height: 100%;
183-
184-
display: flex;
185-
align-items: center;
186-
justify-content: center;
187-
188-
background: rgba(0, 0, 0, 0.5);
189-
clip-path: polygon(0.85rem 0, calc(100% - 0.85rem) 0, calc(100% - 1.7rem) 100%, 1.7rem 100%);
190-
font-size: 1.35rem;
191-
font-weight: 700;
192-
letter-spacing: 0.2em;
193-
text-transform: uppercase;
194-
transition:
195-
clip-path var(--fade-default-duration) ease,
196-
transform var(--fade-default-duration) ease;
197-
}
198-
199-
.match-point-rounds:not(.--active) {
200-
clip-path: polygon(0 0, 100% 0, calc(100% - 0.85rem) 100%, 0.85rem 100%);
201-
transform: translateY(-100%);
202-
}

‎src/themes/fennec/top-bar/center/center.html

+7-66
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,11 @@
11
<div class="center">
2-
<div :class="['score', '--left', leftTeamColorClass]">
3-
<div class="inner">
4-
{{ $teams[0].score }}
5-
</div>
6-
</div>
2+
<Score :team="$teams[0]" position="left" />
3+
<MapWins :team="$teams[0]" position="left" />
74

8-
<div :class="['maps', '--left', leftTeamColorClass]">
9-
<!-- TODO dynamic -->
10-
<div class="pip"></div>
11-
<div class="pip --filled"></div>
12-
<div class="pip --filled"></div>
13-
</div>
5+
<CurrentRound />
6+
<CurrentMap />
7+
<MatchPointRounds />
148

15-
<div :class="['score', '--right', rightTeamColorClass]">
16-
<div class="inner">
17-
{{ $teams[1].score }}
18-
</div>
19-
</div>
20-
21-
<div :class="['maps', '--right', rightTeamColorClass]">
22-
<!-- TODO dynamic -->
23-
<div class="pip --filled"></div>
24-
<div class="pip"></div>
25-
<div class="pip"></div>
26-
</div>
27-
28-
<div v-if="$map.phase === 'warmup'" class="current-round --warmup">
29-
Warmup
30-
</div>
31-
32-
<div v-else class="current-round">
33-
<img v-if="$round.phase === 'paused'" class="paused-icon" src="/hud/img/icons/pause.svg" alt="">
34-
35-
<div v-else-if="$bomb.isPlanted" class="bomb">
36-
<img class="planted-bomb-icon" src="/hud/img/icons/planted-bomb.svg" alt="">
37-
38-
<img v-if="$bomb.bombsite === 'a'" class="bombsite-icon --a" src="/hud/img/icons/bombsite-a.svg" alt="">
39-
<img v-else-if="$bomb.bombsite === 'b'" class="bombsite-icon --b" src="/hud/img/icons/bombsite-b.svg" alt="">
40-
</div>
41-
42-
<!-- TODO 10 seconds in red -->
43-
<div v-else class="clock">
44-
<Digits :value="clockMinutes" digits="1"></Digits>:<Digits :value="clockSeconds" digits="2" pad="0"></Digits>
45-
</div>
46-
47-
<div class="round-number">
48-
<template v-if="$round.isOvertime">
49-
OT {{ $round.overtimeNumber }}
50-
Round {{ $round.roundNumberInCurrentOvertime }}/{{ $opts['cvars.mp_overtime_maxrounds'] }}
51-
</template>
52-
53-
<template v-else>
54-
Round {{ $round.roundNumber }}/{{ $opts['cvars.mp_maxrounds'] }}
55-
</template>
56-
</div>
57-
</div>
58-
59-
<div class="current-map">
60-
Map 3 of 5
61-
</div>
62-
63-
<div class="match-point-rounds-overflow-container">
64-
<div :class="['match-point-rounds', { '--active': isMatchPointRoundsActive }]">
65-
First to
66-
{{ $round.matchPointAtScore + 1 }}
67-
Rounds
68-
</div>
69-
</div>
9+
<Score :team="$teams[1]" position="right" />
10+
<MapWins :team="$teams[1]" position="right" />
7011
</div>

‎src/themes/fennec/top-bar/center/center.js

+10-28
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,17 @@
1+
import CurrentMap from '/hud/top-bar/center/current-map/current-map.vue'
2+
import CurrentRound from '/hud/top-bar/center/current-round/current-round.vue'
13
import Digits from '/hud/digits/digits.vue'
2-
import { teamColorClass } from '/hud/helpers/team-color-class.js'
4+
import MapWins from '/hud/top-bar/center/map-wins/map-wins.vue'
5+
import MatchPointRounds from '/hud/top-bar/center/match-point-rounds/match-point-rounds.vue'
6+
import Score from '/hud/top-bar/center/score/score.vue'
37

48
export default {
59
components: {
10+
CurrentMap,
11+
CurrentRound,
612
Digits,
7-
},
8-
9-
computed: {
10-
clockMinutes() {
11-
return Math.floor(this.$round.phaseEndsInSec / 60)
12-
},
13-
14-
clockSeconds() {
15-
return Math.ceil(this.$round.phaseEndsInSec % 60)
16-
},
17-
18-
isMatchPointRoundsActive() {
19-
// TODO configurable: only show in freezetime
20-
return this.$round.isFreezetime && this.$round.isOvertime
21-
},
22-
23-
leftTeamColorClass() {
24-
return this.teamColorClass(this.$teams[0])
25-
},
26-
27-
rightTeamColorClass() {
28-
return this.teamColorClass(this.$teams[1])
29-
},
30-
},
31-
32-
methods: {
33-
teamColorClass,
13+
MapWins,
14+
MatchPointRounds,
15+
Score,
3416
},
3517
}

‎src/themes/fennec/top-bar/center/current-map/current-map.css

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.current-map {
2+
grid-area: current-map;
3+
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
8+
background: rgba(255, 255, 255, 0.75);
9+
color: #000;
10+
font-size: 1.35rem;
11+
font-weight: 700;
12+
letter-spacing: 0.2em;
13+
text-transform: uppercase;
14+
}

‎src/themes/fennec/top-bar/center/current-map/current-map.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div class="current-map">
2+
<!-- TODO dynamic -->
3+
Map 3 of 5
4+
</div>

‎src/themes/fennec/top-bar/center/current-map/current-map.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default {
2+
//
3+
}

‎src/themes/fennec/top-bar/center/current-round/clock/clock.css

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
img.paused-icon,
2+
img.planted-bomb-icon {
3+
height: 2rem;
4+
margin: 0.125rem 0;
5+
}
6+
7+
.clock {
8+
font-size: 2.25rem;
9+
}
10+
11+
img.bombsite-icon {
12+
height: 1.75rem;
13+
margin-left: 0.75rem;
14+
}
15+
16+
.bomb {
17+
height: 2.25rem;
18+
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
}

‎src/themes/fennec/top-bar/center/current-round/clock/clock.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<img v-if="$round.phase === 'paused'" class="paused-icon" src="/hud/img/icons/pause.svg" alt="">
2+
3+
<div v-else-if="$bomb.isPlanted" class="bomb">
4+
<img class="planted-bomb-icon" src="/hud/img/icons/planted-bomb.svg" alt="">
5+
6+
<img v-if="$bomb.bombsite === 'a'" class="bombsite-icon --a" src="/hud/img/icons/bombsite-a.svg" alt="">
7+
<img v-else-if="$bomb.bombsite === 'b'" class="bombsite-icon --b" src="/hud/img/icons/bombsite-b.svg" alt="">
8+
</div>
9+
10+
<!-- TODO configurable: 10 seconds in red -->
11+
<div v-else class="clock">
12+
<Digits :value="clockMinutes" digits="1"></Digits>:<Digits :value="clockSeconds" digits="2" pad="0"></Digits>
13+
</div>

0 commit comments

Comments
 (0)