#52: Series Name panel

src/themes/fennec/css/vars.css

@@ -7,12 +7,14 @@
 	--red: #f00;
 
 	--counter-terrorists-rgb: 29, 158, 222;
-	--counter-terrorists: #1d9ede;
+	--counter-terrorists: rgb(var(--counter-terrorists-rgb));
 	--terrorists-rgb: 193, 136, 3;
-	--terrorists: #c18803;
+	--terrorists: rgba(var(--terrorists-rgb));
 
 	--progress-bar-fill-color-bomb: var(--red);
 
+	--top-bar-maps-color: rgba(255, 255, 255, 0.5);
+
 	/*
 	 * Spacing, Sizes
 	 */

src/themes/fennec/theme.json

@@ -42,6 +42,27 @@
 			"value": true,
 			"section": "Preferences",
 			"label": "Hide \"Players Alive\" during freezetime"
+		},
+
+		"series.name.left": {
+			"type": "string",
+			"value": "",
+			"section": "Series",
+			"label": "Series Name (left)"
+		},
+
+		"series.name.center": {
+			"type": "string",
+			"value": "",
+			"section": "Series",
+			"label": "Series Name (center)"
+		},
+
+		"series.name.right": {
+			"type": "string",
+			"value": "",
+			"section": "Series",
+			"label": "Series Name (right)"
 		}
 	}
 }

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

@@ -1,4 +1,6 @@
 .center {
+	grid-area: center;
+
 	display: grid;
 	grid-template-columns: 1fr 3fr 1fr;
 	grid-template-rows: 2fr 1fr 1fr;

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

@@ -5,7 +5,7 @@
 	align-items: center;
 	justify-content: center;
 
-	background: rgba(255, 255, 255, 0.75);
+	background: var(--top-bar-maps-color);
 	color: #000;
 	font-size: 1.35rem;
 	font-weight: 700;

src/themes/fennec/top-bar/center/map-wins/map-wins.css

@@ -3,7 +3,7 @@
 	align-items: center;
 	justify-content: center;
 
-	background: rgba(255, 255, 255, 0.75);
+	background: var(--top-bar-maps-color);
 }
 
 .map-wins.--left {

src/themes/fennec/top-bar/series-name/series-name.css

@@ -0,0 +1,50 @@
+.series-name {
+	grid-area: series-name;
+
+	display: grid;
+	grid-template-columns: 4fr 5fr 4fr;
+	grid-template-areas: 'left center right';
+	width: 90%;
+	margin: 0 auto;
+}
+
+.left,
+.center,
+.right {
+	padding: 0.475rem;
+
+	color: #000;
+	font-size: 1.35rem;
+}
+
+.left,
+.right {
+	background: rgba(255, 255, 255, 0.5);
+}
+
+.left {
+	grid-area: left;
+	transform: skewX(20deg) translateX(0.425rem);
+}
+
+.left .inner {
+	transform: skewX(-20deg);
+}
+
+.center {
+	grid-area: center;
+
+	background: rgba(255, 255, 255, 0.75);
+	clip-path: polygon(0 0, 100% 0, calc(100% - 0.85rem) 100%, 0.85rem 100%);
+	font-weight: 700;
+	letter-spacing: 0.2em;
+}
+
+.right {
+	grid-area: right;
+	transform: skewX(-20deg) translateX(-0.425rem);
+}
+
+.right .inner {
+	transform: skewX(20deg);
+}

src/themes/fennec/top-bar/series-name/series-name.html

@@ -0,0 +1,19 @@
+<div class="series-name">
+	<div v-if="$opts['series.name.left']" class="left">
+		<div class="inner">
+			{{ $opts['series.name.left'] }}
+		</div>
+	</div>
+
+	<div v-if="$opts['series.name.center']" class="center">
+		<div class="inner">
+			{{ $opts['series.name.center'] }}
+		</div>
+	</div>
+
+	<div v-if="$opts['series.name.right']" class="right">
+		<div class="inner">
+			{{ $opts['series.name.right'] }}
+		</div>
+	</div>
+</div>

src/themes/fennec/top-bar/series-name/series-name.js

@@ -0,0 +1,3 @@
+export default {
+	//
+}

src/themes/fennec/top-bar/team/team.css

@@ -4,10 +4,12 @@
 
 /* TODO the 1.65rem magic number breaks at aspect ratios >= ca. 2.2:1 */
 .team.--left {
+	grid-area: team-left;
 	transform: skewX(20deg) translateX(-1.65rem);
 }
 
 /* TODO the 1.65rem magic number breaks at aspect ratios >= ca. 2.2:1 */
 .team.--right {
+	grid-area: team-right;
 	transform: skewX(-20deg) translateX(1.65rem);
 }

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

@@ -6,6 +6,9 @@
 
 	display: grid;
 	grid-template-columns: 20fr 13fr 20fr;
+	grid-template-areas:
+		'series-name series-name series-name'
+		'team-left center team-right';
 	align-items: start;
 
 	filter: var(--filter-drop-shadow);

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

@@ -1,4 +1,5 @@
 <div class="top-bar">
+	<SeriesName />
 	<Team :team="$teams[0]" position="left" />
 	<Center />
 	<Team :team="$teams[1]" position="right" />

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

@@ -1,10 +1,12 @@
 import Center from '/hud/top-bar/center/center.vue'
 import Digits from '/hud/digits/digits.vue'
+import SeriesName from '/hud/top-bar/series-name/series-name.vue'
 import Team from '/hud/top-bar/team/team.vue'
 
 export default {
 	components: {
 		Center,
+		SeriesName,
 		Team,
 	},
 }