feat(ctwc23): add option for heart positions

docs/query_string_args.md

@@ -53,6 +53,7 @@ Caveat: global args apply to **MOST** layouts, but some layouts
 | `match` | `{not set}`: show match 1 and wait for admin command to switch view<br>`0`: always show match 1<br>`1`: always show match 2<br>`both`: always show both matches | `{not set}` | Warning: Setting to `0`, `1`, `both` ignores admin commands to switch view!|
 | `simultris` | An integer value representing the time difference in milliseconds where 2 tetrises are considered "simulatenous" | `0` | Shows an animated graphic "Simul-Tetris!" above the player cams. If the argument is omitted, or set to `0`, the graphic will not be displayed. Recommended value is `120` milliseconds. |
 | `invisible` | `0`: Don't draw invisible ghost blocks as ghost blocks <br>`1`: With invisible tetris, draw the invisible blocks as ghost blocks | `0` | This setting is only useful if the game is played in Invisible Tetris mode |
+| `heartpos` | `0`: bottom, vertical<br>`1`: next to LV/TRT, vertical<br>`2`: next to Lines/next, vertical<br>`3`: next to score, horizontal<br>`4`: under flag, horizontal | `0` | This setting affect the position of hearts in the 2-match view |
 
 ### League
 

public/views/mp/ctwc23.html

@@ -164,11 +164,12 @@
 
 			.hearts {
 				bottom: -766px;
-				width: 24px;
 				padding-right: 0;
 				height: unset;
 				font-size: 0px;
 				line-height: 32px;
+				display: flex;
+				flex-direction: column;
 			}
 
 			.hearts span {
@@ -178,7 +179,7 @@
 				background: url(/views/heart_grey.png);
 				background-repeat: no-repeat;
 				background-position: center left;
-				display: block;
+				display: inline-block;
 			}
 
 			.hearts span.win {
@@ -282,6 +283,7 @@
 			}
 
 			.p2 > * {
+				right: unset;
 				left: var(--offset);
 			}
 
@@ -366,6 +368,44 @@
 				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;
@@ -619,6 +659,12 @@
 				);
 			}
 
+			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';