chore/feat(ctwc_vn_24): feature parity with ctwc23 and CTVS Winter 20…

…24 borders
timotheeg · Dec 6, 2024 · 4d90d14 · 4d90d14
1 parent e60286f
commit 4d90d14
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 2 deletions.
diff --git a/public/views/border_3px_ctvswinter.webp b/public/views/border_3px_ctvswinter.webp
diff --git a/public/views/mp/ctwc_vn_24.html b/public/views/mp/ctwc_vn_24.html
@@ -174,11 +174,12 @@
 
 			.hearts {
 				bottom: -766px;
-				width: 24px;
 				padding-right: 0;
 				height: unset;
 				font-size: 0px;
 				line-height: 32px;
+				display: flex;
+				flex-direction: column;
 			}
 
 			.hearts span {
@@ -188,7 +189,7 @@
 				background: url(/views/heart_grey.png);
 				background-repeat: no-repeat;
 				background-position: center left;
-				display: block;
+				display: inline-block;
 			}
 
 			.hearts span.win {
@@ -300,6 +301,7 @@
 			}
 
 			.p2 > * {
+				right: unset;
 				left: var(--offset);
 			}
 
@@ -384,6 +386,39 @@
 				bottom: unset;
 				top: 477px;
 			}
+
+			.heartpos1 .match.small .hearts {
+				top: 311px;
+				--offset: 459px;
+			}
+			.heartpos2 .match.small .hearts {
+				top: 139px;
+				--offset: 535px;
+			}
+			.heartpos3 .match.small .hearts,
+			.heartpos4 .match.small .hearts {
+				--border-size: 14;
+				width: unset;
+				top: 91px;
+				--offset: 707px;
+				height: 29px;
+				padding: 0 6px 0 9px;
+				gap: 2px;
+				flex-direction: row;
+			}
+			.heartpos3 .match.small .p2 .hearts,
+			.heartpos4 .match.small .p2 .hearts {
+				right: unset;
+			}
+			.heartpos4 .match.small .hearts {
+				left: -1325px;
+				right: unset;
+			}
+			.heartpos4 .match.small .p2 .hearts {
+				left: unset;
+				right: -1325px;
+			}
+
 			.match.small .flag,
 			.match.small .name {
 				z-index: 6;
@@ -550,6 +585,12 @@
 			import InvisibleMixin from '/views/InvisibleMixin.js';
 			import { easeOutElastic } from '/js/anim.js';
 
+			if (/^[1234]$/.test(QueryString.get('heartpos'))) {
+				document
+					.querySelector('#stream_bg')
+					.classList.add(`heartpos${QueryString.get('heartpos')}`);
+			}
+
 			const isDAS = QueryString.get('style') === 'das';
 			const hasAds = QueryString.get('ads') === '1';
 
@@ -601,6 +642,12 @@
 					'.box { border-image-source: url(/views/border_3px_ctwcvn.webp) }'
 				);
 				document.adoptedStyleSheets = [stylesheet];
+			} else if (QueryString.get('box_border') === 'vswinter') {
+				const stylesheet = new CSSStyleSheet();
+				stylesheet.replaceSync(
+					'.box { border-image-source: url(/views/border_3px_ctvswinter.webp) }'
+				);
+				document.adoptedStyleSheets = [stylesheet];
 			}
 
 			let images;