Skip to content

Commit a303d3a

Browse files
drweissbrotdrweissbrot
committed
#52 Fennec: Focused Player section
1 parent 1014a87 commit a303d3a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+682
-4
lines changed

‎src/themes/fennec/css/base.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
}
88

99
html {
10-
font-size: var(--text-scale-factor);
1110
background: var(--background-color);
1211
color: var(--text-color);
12+
font-size: var(--text-scale-factor);
1313
}
1414

1515
body {

‎src/themes/fennec/css/transitions/default.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.v-enter-active,
22
.v-leave-active {
3-
transition: opacity 0.3s ease;
3+
transition: opacity var(--fade-default-duration) ease;
44
}
55

66
.v-enter-from,

‎src/themes/fennec/css/vars.css

+27-1
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,16 @@
88
--counter-terrorists: #1d9ede;
99
--terrorists: #c18803;
1010

11+
--counter-terrorists-rgb: 29, 158, 222;
12+
--terrorists-rgb: 193, 136, 3;
13+
1114
/*
1215
* Spacing, Sizes
1316
*/
14-
--text-scale-factor: 0.926vh; /* approximately 10px on 1080p */
17+
--text-scale-factor: 0.925925926vh; /* approximately 10px on 1080p */
18+
19+
--focused-player-width: 50%;
20+
--focused-player-icon-height: 2rem;
1521

1622
/* Viewport Margin */
1723
--viewport-margin-x: 2rem;
@@ -22,6 +28,26 @@
2228
--viewport-margin-right: var(--viewport-margin-x);
2329
--viewport-margin-top: var(--viewport-margin-y);
2430

31+
/*
32+
* Polygons
33+
*/
34+
--polygon-left: polygon(0 0, 100% 0, 100% 100%);
35+
--polygon-right: polygon(0 0, 0 100%, 100% 100%);
36+
--polygon-left-inversed: polygon(100% 0, 100% 100%, 0 100%);
37+
--polygon-right-inversed: polygon(0 0, 0 100%, 100% 0);
38+
--polygon-bordered-by-diagonals: polygon(0 0, 100% 0, calc(100% - 1.5rem) 100%, 1.5rem 100%);
39+
40+
/*
41+
* Durations
42+
*/
43+
--fade-fast-duration: 0.1s;
44+
--fade-default-duration: 0.3s;
45+
46+
/*
47+
* Filters
48+
*/
49+
--filter-drop-shadow: drop-shadow(0 0 0.6rem rgba(0, 0, 0, 0.4));
50+
2551
/*
2652
* Fonts
2753
*/

‎src/themes/fennec/digits/digits.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.digit {
2+
display: inline-block;
3+
min-width: 1ch;
4+
text-align: center;
5+
}

‎src/themes/fennec/digits/digits.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div v-for="el of elements" class="digit">
2+
{{ el }}
3+
</div>

‎src/themes/fennec/digits/digits.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export default {
2+
props: [
3+
'value',
4+
'digits',
5+
],
6+
7+
computed: {
8+
elements() {
9+
return `${this.value}`.padStart(this.digits, ' ').split('')
10+
},
11+
},
12+
}

‎src/themes/fennec/digits/digits.vue

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<script src="/hud/digits/digits.js"></script>
2+
<style src="/hud/digits/digits.css" scoped></style>
3+
<template src="/hud/digits/digits.html"></template>

‎src/themes/fennec/focused-player/ammo/ammo.css

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.wrapper {
2+
display: flex;
3+
align-items: flex-end;
4+
}
5+
6+
.ammo {
7+
display: flex;
8+
flex: 1;
9+
font-size: 3rem;
10+
min-width: fit-content;
11+
max-width: 8.25ch;
12+
}
13+
14+
.inner {
15+
flex: 1;
16+
padding: 0.75rem 0.5rem;
17+
18+
display: flex;
19+
align-items: flex-end;
20+
}
21+
22+
.reserve {
23+
font-size: 2rem;
24+
transform: translateY(-2px);
25+
margin-left: 0.5rem;
26+
}
27+
28+
.ammo::before,
29+
.ammo::after {
30+
content: '';
31+
width: 2rem;
32+
z-index: -1;
33+
}
34+
35+
.ammo::before {
36+
transform: skewX(160deg) translateX(50%);
37+
}
38+
39+
.ammo::after {
40+
transform: skewX(160deg) translateX(-50%);
41+
}
42+
43+
.inner.--ct,
44+
.ammo.--ct::before,
45+
.ammo.--ct::after {
46+
background: var(--counter-terrorists);
47+
}
48+
49+
.inner.--t,
50+
.ammo.--t::before,
51+
.ammo.--t::after {
52+
background: var(--terrorists);
53+
}

‎src/themes/fennec/focused-player/ammo/ammo.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<Transition>
2+
<div v-if="weapon" class="wrapper">
3+
<div :class="['ammo', colorClass]">
4+
<div :class="['inner', colorClass]">
5+
<div class="clip">
6+
<Digits :value="weapon.ammoClip" digits="3"></Digits>
7+
</div>
8+
9+
<div class="reserve">
10+
/{{ weapon.ammoReserve }}
11+
</div>
12+
</div>
13+
</div>
14+
</div>
15+
</Transition>

‎src/themes/fennec/focused-player/ammo/ammo.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { teamColorClass } from '/hud/helpers/team-color-class.js'
2+
import Digits from '/hud/digits/digits.vue'
3+
4+
export default {
5+
components: {
6+
Digits,
7+
},
8+
9+
computed: {
10+
player() {
11+
return this.$players.focused
12+
},
13+
14+
weapon() {
15+
if (this.player?.primary?.isActive) return this.player.primary
16+
if (this.player?.secondary?.isActive) return this.player.secondary
17+
},
18+
19+
colorClass() {
20+
return this.teamColorClass(this.player.team)
21+
},
22+
},
23+
24+
methods: {
25+
teamColorClass,
26+
},
27+
}

‎src/themes/fennec/focused-player/ammo/ammo.vue

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<script src="/hud/focused-player/ammo/ammo.js"></script>
2+
<style src="/hud/focused-player/ammo/ammo.css" scoped></style>
3+
<template src="/hud/focused-player/ammo/ammo.html"></template>

‎src/themes/fennec/focused-player/focused-player.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.focused-player {
2+
position: fixed;
3+
bottom: var(--viewport-margin-bottom);
4+
left: calc((100% - var(--focused-player-width)) / 2);
5+
right: calc((100% - var(--focused-player-width)) / 2);
6+
7+
display: grid;
8+
grid-template-columns: 8fr 17fr 8fr;
9+
10+
filter: var(--filter-drop-shadow);
11+
}

‎src/themes/fennec/focused-player/focused-player.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<Transition>
2+
<div v-if="$players.focused" class="focused-player">
3+
<FocusedPlayerHealthAndArmor />
4+
<FocusedPlayerNameAndStats />
5+
<FocusedPlayerAmmo />
6+
</div>
7+
</Transition>

‎src/themes/fennec/focused-player/focused-player.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import FocusedPlayerAmmo from '/hud/focused-player/ammo/ammo.vue'
2+
import FocusedPlayerHealthAndArmor from '/hud/focused-player/health-and-armor/health-and-armor.vue'
3+
import FocusedPlayerNameAndStats from '/hud/focused-player/name-and-stats/name-and-stats.vue'
4+
5+
export default {
6+
components: {
7+
FocusedPlayerAmmo,
8+
FocusedPlayerHealthAndArmor,
9+
FocusedPlayerNameAndStats,
10+
},
11+
}

‎src/themes/fennec/focused-player/focused-player.vue

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<script src="/hud/focused-player/focused-player.js"></script>
2+
<style src="/hud/focused-player/focused-player.css" scoped></style>
3+
<template src="/hud/focused-player/focused-player.html"></template>

‎src/themes/fennec/focused-player/health-and-armor/armor/armor.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
img {
2+
height: var(--focused-player-icon-height);
3+
}

‎src/themes/fennec/focused-player/health-and-armor/armor/armor.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<Transition>
2+
<div v-if="player.hasArmor || player.hasHelmet" class="armor">
3+
<img v-if="player.hasHelmet" src="/hud/img/icons/armor-helmet.svg" alt="">
4+
<img v-else src="/hud/img/icons/armor.svg" alt="">
5+
<Digits :value="player.armor" digits="3">
6+
</div>
7+
</Transition>

‎src/themes/fennec/focused-player/health-and-armor/armor/armor.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Digits from '/hud/digits/digits.vue'
2+
3+
export default {
4+
components: {
5+
Digits,
6+
},
7+
8+
computed: {
9+
player() {
10+
return this.$players.focused
11+
},
12+
},
13+
}

‎src/themes/fennec/focused-player/health-and-armor/armor/armor.vue

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<script src="/hud/focused-player/health-and-armor/armor/armor.js"></script>
2+
<style src="/hud/focused-player/health-and-armor/armor/armor.css"></style>
3+
<template src="/hud/focused-player/health-and-armor/armor/armor.html"></template>

‎src/themes/fennec/focused-player/health-and-armor/health-and-armor.css

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
.wrapper {
2+
display: flex;
3+
align-items: flex-end;
4+
}
5+
6+
.health-and-armor {
7+
display: flex;
8+
flex: 1;
9+
font-size: 3rem;
10+
}
11+
12+
.inner {
13+
flex: 1;
14+
padding: 0.75rem 0.5rem;
15+
16+
display: flex;
17+
align-items: center;
18+
justify-content: space-between;
19+
}
20+
21+
img {
22+
height: 2rem;
23+
}
24+
25+
.health-and-armor::before,
26+
.health-and-armor::after {
27+
content: '';
28+
width: 2rem;
29+
z-index: -1;
30+
}
31+
32+
.health-and-armor::before {
33+
transform: skewX(20deg) translateX(50%);
34+
}
35+
36+
.health-and-armor::after {
37+
transform: skewX(20deg) translateX(-50%);
38+
}
39+
40+
.inner.--ct,
41+
.health-and-armor.--ct::before,
42+
.health-and-armor.--ct::after {
43+
background: var(--counter-terrorists);
44+
}
45+
46+
.inner.--t,
47+
.health-and-armor.--t::before,
48+
.health-and-armor.--t::after {
49+
background: var(--terrorists);
50+
}

‎src/themes/fennec/focused-player/health-and-armor/health-and-armor.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class="wrapper">
2+
<div :class="['health-and-armor', colorClass]">
3+
<div :class="['inner', colorClass]">
4+
<Health />
5+
<Armor />
6+
</div>
7+
</div>
8+
</div>

‎src/themes/fennec/focused-player/health-and-armor/health-and-armor.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { teamColorClass } from '/hud/helpers/team-color-class.js'
2+
import Armor from '/hud/focused-player/health-and-armor/armor/armor.vue'
3+
import Digits from '/hud/digits/digits.vue'
4+
import Health from '/hud/focused-player/health-and-armor/health/health.vue'
5+
6+
export default {
7+
components: {
8+
Armor,
9+
Digits,
10+
Health,
11+
},
12+
13+
computed: {
14+
player() {
15+
return this.$players.focused
16+
},
17+
18+
colorClass() {
19+
return this.teamColorClass(this.player.team)
20+
},
21+
},
22+
23+
methods: {
24+
teamColorClass,
25+
},
26+
}

‎src/themes/fennec/focused-player/health-and-armor/health-and-armor.vue

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<script src="/hud/focused-player/health-and-armor/health-and-armor.js"></script>
2+
<style src="/hud/focused-player/health-and-armor/health-and-armor.css" scoped></style>
3+
<template src="/hud/focused-player/health-and-armor/health-and-armor.html"></template>

‎src/themes/fennec/focused-player/health-and-armor/health/health.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
img {
2+
height: var(--focused-player-icon-height);
3+
}

‎src/themes/fennec/focused-player/health-and-armor/health/health.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div class="health">
2+
<img src="/hud/img/icons/health.svg" alt="">
3+
<Digits :value="player.health" digits="3">
4+
</div>

‎src/themes/fennec/focused-player/health-and-armor/health/health.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Digits from '/hud/digits/digits.vue'
2+
3+
export default {
4+
components: {
5+
Digits,
6+
},
7+
8+
computed: {
9+
player() {
10+
return this.$players.focused
11+
},
12+
},
13+
}

‎src/themes/fennec/focused-player/health-and-armor/health/health.vue

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<script src="/hud/focused-player/health-and-armor/health/health.js"></script>
2+
<style src="/hud/focused-player/health-and-armor/health/health.css"></style>
3+
<template src="/hud/focused-player/health-and-armor/health/health.html"></template>

‎src/themes/fennec/focused-player/name-and-stats/data-row/bomb-or-defuser/bomb-or-defuser.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import '/hud/focused-player/name-and-stats/data-row/data-row-item-shared.css';

‎src/themes/fennec/focused-player/name-and-stats/data-row/bomb-or-defuser/bomb-or-defuser.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div class="bomb-or-defuser">
2+
<img v-if="player.hasDefuser" src="/hud/img/weapons/defuser.svg" alt="">
3+
<img v-else-if="player.hasBomb" src="/hud/img/weapons/c4.svg" alt="" :class="{ '--active': isBombActive }">
4+
</div>

‎src/themes/fennec/focused-player/name-and-stats/data-row/bomb-or-defuser/bomb-or-defuser.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export default {
2+
computed: {
3+
player() {
4+
return this.$players.focused
5+
},
6+
7+
isBombActive() {
8+
return this.player?.weapons?.find((weapon) => weapon.isActive)?.isBomb
9+
},
10+
},
11+
}

‎src/themes/fennec/focused-player/name-and-stats/data-row/bomb-or-defuser/bomb-or-defuser.vue

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<script src="/hud/focused-player/name-and-stats/data-row/bomb-or-defuser/bomb-or-defuser.js"></script>
2+
<style src="/hud/focused-player/name-and-stats/data-row/bomb-or-defuser/bomb-or-defuser.css" scoped></style>
3+
<template src="/hud/focused-player/name-and-stats/data-row/bomb-or-defuser/bomb-or-defuser.html"></template>

0 commit comments

Comments
 (0)