<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="RotorHazard">
	<meta name="google" content="notranslate">
	<title>Stream Node</title>

	<!-- Icons -->
	<link rel="apple-touch-icon" sizes="180x180" href="/static/image/apple-touch-icon.png">
	<link rel="icon" type="image/png" sizes="32x32" href="/static/image/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/static/image/favicon-16x16.png">
	<link rel="manifest" href="/static/image/site.webmanifest">
	<link rel="mask-icon" href="/static/image/safari-pinned-tab.svg" color="#ee7a28">
	<link rel="shortcut icon" href="/static/image/favicon.ico">
	<meta name="msapplication-TileColor" content="#ee7a28">
	<meta name="msapplication-config" content="/static/image/browserconfig.xml">
	<meta name="theme-color" content="#224873">

	<!-- Scripts -->
	<script type="text/javascript" src="/static/jquery-3.6.4/jquery-3.6.4.min.js"></script>
	<script type="text/javascript" src="/static/articulate/articulate.min.js"></script>
	<script type="text/javascript" src="/static/socket.io-4.6.1/socket.io.min.js"></script>
	<script type="text/javascript" src="/static/smoothie/smoothie.js"></script>
	<script type="text/javascript" src="/static/magnific-1.1.0/magnific-inline-min.js"></script>
	<script type="text/javascript" src="/static/svgasset.js"></script>
	<script type="text/javascript" src="/static/rotorhazard.js"></script>

	<!-- CSS -->
	<link rel="stylesheet" href="/static/magnific-1.1.0/magnific-popup.css">
	</link>
	<link rel="stylesheet" href="/static/stream.css">
	</link>

	<!-- <link rel="stylesheet" href="/ddr_overlays/static/fonts/teko/stylesheet.css"></link>
	<link rel="stylesheet" href="/ddr_overlays/static/fonts/inconsolata/stylesheet.css"></link> -->
	<link rel="stylesheet" href="/ddr_overlays/static/fonts/dg_modal3at/stylesheet.css">
</link>
<link rel="stylesheet" href="/ddr_overlays/static/fonts/jetbrains_mono/stylesheet.css">
</link>

	<!-- <link rel="stylesheet" href="/ddr_overlays/static/css/ddr_overlays.css">
	</link> -->
	<link rel="stylesheet" href="/ddr_overlays/static/css/ed_overlays.css">
	</link>

	<!-- Child template head content -->

</head>

<body>
	<script type="text/javascript" charset="utf-8">
		// get query string, and check if there is "greenscreen" in it
		var urlParams = new URLSearchParams(window.location.search);
		var greenscreen = urlParams.has('greenscreen');

		// if there is "greenscreen" in the query string, add the class "greenscreen" to the body
		if (greenscreen) {
			document.body.classList.add('greenscreen');
		}

		var data_dependencies = [
			'all_languages',
			'language',
			'race_status',
			'leaderboard',
			'current_laps',
			'current_heat',
			'pilot_data'
		];

		var rotorhazard;
		var pilots;

		rotorhazard.show_messages = false;
		current_laps = false;
		streamnode = {{ node_id }}
		pilot_id = ''; //int

		$(document).ready(function () {
			rotorhazard.show_messages = false;

			socket.on('language', function (msg) {
				if (msg.language) {
					rotorhazard.interface_language = msg.language;
				}
			});

			socket.on('current_heat', function (msg) {
				for (var idx in msg.heatNodes) {
					hn = msg.heatNodes[streamnode];
					if (hn.activeColor) {
						var color = colorvalToHex(hn.activeColor);
						var contrast_color = contrastColor(color);
						$('html').css('--pilot_color', color);
						$('html').css('--contrast_pilot_color', contrast_color);
						$('html').css('--position_foreground_color', color);
						$('html').css('--position_background_color', contrast_color);
						$('html').css('--fast_lap_color', color);
						$('html').css('--contrast_fast_lap_color', contrast_color);
					} else {
						$('html').css('--pilot_color', 'hsl(var(--hue_0), var(--sat_0), var(--lum_0_low))');
						$('html').css('--contrast_pilot_color', 'var(--contrast_0_low)');
						$('html').css('--position_background_color', 'hsl(var(--hue_1), var(--sat_1), var(--lum_1_high))');
						$('html').css('--position_foreground_color', 'var(--contrast_1_high)');
						$('html').css('--fast_lap_color', 'hsl(var(--hue_1), var(--sat_1), var(--lum_1_high))');
						$('html').css('--contrast_fast_lap_color', 'var(--contrast_1_high)');
					}
				}
			});

			socket.on('current_laps', function (msg) {
				current_laps = msg.current;
				show_current_laps();
			});

			socket.on('race_status', function (msg) {
				rotorhazard.event.race_status = msg;
				show_current_laps();
			});

			function show_current_laps() {
				if (current_laps && rotorhazard.event.race_status) {
					var i = streamnode;
					var node_index = current_laps.node_index[streamnode];

					var totalTime = 0;
					for (var j = 0; j < node_index.laps.length; j++) {
						totalTime += node_index.laps[j].lap_time_stamp;
					}
					console.log('totalTime: ' + totalTime);

					var lastLap = node_index.laps[node_index.laps.length - 1];
					$('#pilot_last_lap').html(lastLap ? lastLap : '--:--.---');

					$('#pilot_current_laps tr').remove();
					$('#pilot_current_lap_text').html('');

					display_laps = node_index.laps
					while (display_laps.length > 10) {
						display_laps.shift();
					}

					$.each(display_laps, function (j, lap) { // j is loop num, lap is json object
						var tr = '';
						var lapTime = lap.lap_time;
						if (lap.splits.length > 0) {
							lapTime += ' (';
							for (k = 0; k < lap.splits.length; k++) {
								var split = lap.splits[k];
								if (k > 0) {
									lapTime += ', ';
								}
								lapTime += split.split_time;
								if (split.split_speed) {
									lapTime += '/' + split.split_speed;
								}
							}
							lapTime += ')';
						}

						tr = $('<tr>')
						if (lap.lap_number == 0) {
							tr.addClass('lap_0');
							lap.lap_number = __('HS');
						}

						if (lap.lap_index == node_index.fastest_lap_index) {
							tr.addClass('fastest_lap');
						}

						tr.append(
							$('<td class="display_lap_number">').text(lap.lap_number + ":")
						);
						$time_td = $('<td>').text(lap.lap_time + ' ');
						$local_prepend = $('<span class="from_start">');

						$time_td.prepend($local_prepend);
						tr.append($time_td);

						if (j && lap.lap_raw < (rotorhazard.min_lap * 1000)) {
							tr.addClass('min-lap-warning');
						}
						if (!rotorhazard.event.race_status.race_mode && lap.lap_time_stamp > (rotorhazard.event.race_status.race_time_sec * 1000)) {
							//tr.addClass('after-time-expired');
						}
						tr.appendTo('#pilot_current_laps');

					});
				}
				
				//count display_laps
				console.log(display_laps.length);

				if (display_laps.length == 0) {
					$('#pilot_current_lap_text').html('STARTING');
				}
				if (display_laps.length == 1) {
					$('#pilot_current_lap_text').html('First Lap');
				}
				if (display_laps.length == 2) {
					$('#pilot_current_lap_text').html('Second Lap');
				}
				if (display_laps.length == 3) {
					$('#pilot_current_lap_text').html('Third Lap');
				}
				if (display_laps.length == 4) {
					$('#pilot_current_lap_text').html('Fourth Lap');
				}
				if (display_laps.length == 5) {
					$('#pilot_current_lap_text').html('Fifth Lap');
				}
				if (display_laps.length == 6) {
					$('#pilot_current_lap_text').html('Sixth Lap');
				}
			}

			var pilotNodeImg = '';

			var pilot_attributes;
			var curr_pilot_flag;
			var country_flag;

			/* Pilots */
			socket.on('pilot_data', function (msg) {

				rotorhazard.event.pilot_attributes = msg.attributes;
				rotorhazard.event.pilots = msg.pilots;
				rotorhazard.options.pilotSort = msg.pilotSort;
				//console.log(rotorhazard.event.pilots);
				//load_pilots(rotorhazard);

				for (pilot in rotorhazard.event.pilots) {
					if (rotorhazard.event.pilots[pilot].pilot_id == pilot_id) {

						//console.log(rotorhazard.event.pilots[pilot]);

						pilot = rotorhazard.event.pilots[pilot];
						//counreyflag

						if (pilot.country) {


							country_upp = pilot.country;
							//console.log(country_upp);

							country_flag = '<img class="country_flag" src="/ddr_overlays/static/imgs/flags/' + country_upp + '.jpg">';
							$('#node_flag').html(country_flag);


						}



						break;
					}
				}

			});



			socket.on('leaderboard', function (msg) {
				var race = msg.current.leaderboard;

				primary_leaderboard = race.meta.primary_leaderboard;
				leaderboard = race[primary_leaderboard];

				console.log('update ha leaderboard');
				//socket.emit('get_pilots');

				//socket.emit('get_data', {'load_types': 'pilot_data'});
				$single_dependency = 'pilot_data';
				var single_dependency = [
					'pilot_data'
				];
				socket.emit('load_data', { 'load_types': single_dependency });

				found_streamnode = false;

				for (var i in leaderboard) {
					if (leaderboard[i].node == streamnode) {
						found_streamnode = true;

						//document.getElementById("pos").classList.remove("hidden");


						pilot_data = leaderboard[i];

						pilot_id = pilot_data.pilot_id;
						console.log(pilot_data);


						//socket imet get pilot attributes

						//get_pilot_attributes



						if (pilot_data.position == null) {
							$('#node_pos').html('-');
						} else {
							if (pilot_data.position == 1) {
								$('#node_pos').html(pilot_data.position + '<sup>st</sup>');
							}
							if (pilot_data.position == 2) {
								$('#node_pos').html(pilot_data.position + '<sup>nd</sup>');
							}
							if (pilot_data.position == 3) {
								$('#node_pos').html(pilot_data.position + '<sup>rd</sup>');
							}
							if (pilot_data.position > 3) {
								$('#node_pos').html(pilot_data.position + '<sup>th</sup>');
							}
						}

						// $('#position').html((pilot_data.position != null ? pilot_data.position : '-'));


						//var pilot_name_flag = country_flag + ' ' + pilot_data.callsign;




						$('#node_callsign').html(pilot_data.callsign);
						// $('#last_lap').html(pilot_data.last_lap ? pilot_data.last_lap : '0:00.000');
						// $('#team_name').html(pilot_data.team_name);
						// $('#laps').html(pilot_data.laps);
						// $('#fastest_lap').html(pilot_data.fastest_lap);

						var pilotImg = '/static/user/avatars/' + pilot_data.callsign.replace(/ /g, "_").toLowerCase() + '.jpg';

						if (!imageExists(pilotImg)) {
							pilotImg = '/ddr_overlays/static/imgs/no_avatar.png';
						}

						if (pilotNodeImg !== pilotImg && pilotImg !== '/ddr_overlays/static/imgs/no_avatar.png') {
							pilotNodeImg = pilotImg;
							document.getElementById('node_avatar_img').src = pilotImg;

						}


						if (primary_leaderboard == 'by_fastest_lap') {
							rank_stat = pilot_data.fastest_lap
						} else if (primary_leaderboard == 'by_consecutives') {
							rank_stat = pilot_data.consecutives
						} else {
							rank_stat = pilot_data.laps + " / " + pilot_data.total_time
						}

						$('#node_rank_stat').html(rank_stat);
						break;
					}
				}

				if (!found_streamnode) {
					$('#node_pos').html('');
					$('#node_callsign').html('');
					$('#node_rank_stat').html('');
					$('#pilot_current_laps').html('');
					$('#node_avatar').html('');
					pilotImg = '';
					pilotNodeImg = '';
				}
			});
		});


		function imageExists(image_url) {
			var http = new XMLHttpRequest();
			http.open('HEAD', image_url, false);
			http.send();
			return http.status != 404;
		}


		function pilot_attributes(rotorhazard) {
			for (var i in rotorhazard.event.pilots) {
				var pilot = rotorhazard.event.pilots[i];
				if (pilot.pilot_id != 0) {
					pilot.attributes = [];
					for (var attr_idx in rotorhazard.event.pilot_attributes) {
						var pilot_attr = rotorhazard.event.pilot_attributes[attr_idx];
						if (pilot[pilot_attr.name] != undefined) {
							pilot_attr.value = pilot[pilot_attr.name];
						} else {
							pilot_attr.value = '';
						}
						var pilot_attr_name = pilot_attr.name;
						var attr_object = { name: pilot_attr_name, value: pilot_attr.value };
						//pilot.attributes.push(attr_object);
						pilot.attributes[pilot_attr_name] = attr_object;
					}
				}
			}
		}



		function load_pilots(rotorhazard) {
			var pilotlist_html = '';

			pilot_attributes(rotorhazard);

			console.log(rotorhazard.event.pilots);

		}

	</script>

	<div id="ed_node">
		<!-- <div id="background_accent_1_triangle"></div>
		<div id="background_accent_1"></div>
		<div id="background_accent_2_triangle"></div>
		<div id="background_accent_2"></div>		 -->

		<div id="header">
			<img id="header_logo" src="/ddr_overlays/static/imgs/RDRWC25-white.png">
			<div id="header_title">Racing!</div>
		</div>

		<div id="status">
			<div id="timer"><span id="time-display">01:27.123</span></div>
			<div id="heat"><span id="curr_heat_Title">Qualification C</span></div>
		</div>

		<div id="pos">
			<span id="node_pos">
				<span id="ordinal">1<sup>st</sup></span>
			</span>
		</div>

		<div id="pilot_card">
			<div id="country">
				<span id="node_flag"></span>
				<span id="node_ioc">FRA</span>
			</div>
			<div id="callsign">
				<span id="node_callsign"></span>
			</div>
			<div id="laps">
				<span id="pilot_current_lap_text"></span>
				<span id="pilot_last_lap"></span>
			</div>
		</div>

		<?xml version="1.0" encoding="UTF-8"?>
		<svg id="Content" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080">
			<defs>
				<style>
					.cls-1 {
						filter: url(#drop-shadow-5);
					}

					.cls-2 {
						fill: #fff;
					}

					.cls-3 {
						fill: none;
					}

					.cls-4 {
						fill: url(#linear-gradient);
						filter: url(#drop-shadow-3);
					}

					.cls-5 {
						fill: red;
					}

					.cls-6 {
						fill: #00ea6c;
						filter: url(#drop-shadow-1);
					}

					.cls-7 {
						fill: #00144c;
					}

					.cls-8 {
						fill: #d0f;
						filter: url(#drop-shadow-2);
					}

					.cls-9 {
						fill: url(#linear-gradient-2);
						filter: url(#drop-shadow-4);
					}

					.cls-10 {
						clip-path: url(#clippath);
					}
				</style>
				<clipPath id="clippath">
					<path id="Mask" class="cls-3" d="M0,0v1080h1920V0H0ZM1239,929c0,8.28-6.72,15-15,15H111c-8.28,0-15-6.72-15-15V317c0-8.28,6.72-15,15-15h1113c8.28,0,15,6.72,15,15v612ZM1824,789h-247.38l-55.62-55.62h-174s0-391.24,0-391.24h109.1c8.28,0,14.99-6.71,14.99-14.99v-136.16h337.9c8.28,0,15,6.72,15,15v583Z"/>
				</clipPath>
				<filter id="drop-shadow-1" x="-105" y="-105" width="1295" height="1290" filterUnits="userSpaceOnUse">
					<feOffset dx="0" dy="0"/>
					<feGaussianBlur result="blur" stdDeviation="35"/>
					<feFlood flood-color="#000" flood-opacity=".35"/>
					<feComposite in2="blur" operator="in"/>
					<feComposite in="SourceGraphic"/>
				</filter>
				<filter id="drop-shadow-2" x="-105" y="-105" width="1060" height="1291" filterUnits="userSpaceOnUse">
					<feOffset dx="0" dy="0"/>
					<feGaussianBlur result="blur-2" stdDeviation="35"/>
					<feFlood flood-color="#000" flood-opacity=".35"/>
					<feComposite in2="blur-2" operator="in"/>
					<feComposite in="SourceGraphic"/>
				</filter>
				<linearGradient id="linear-gradient" x1="96" y1="623" x2="1239" y2="623" gradientUnits="userSpaceOnUse">
					<stop offset="0" stop-color="#fff" stop-opacity="0"/>
					<stop offset="1" stop-color="#231f20" stop-opacity="0"/>
				</linearGradient>
				<filter id="drop-shadow-3" x="-9" y="197" width="1353" height="852" filterUnits="userSpaceOnUse">
					<feOffset dx="0" dy="0"/>
					<feGaussianBlur result="blur-3" stdDeviation="35"/>
					<feFlood flood-color="#000" flood-opacity=".35"/>
					<feComposite in2="blur-3" operator="in"/>
					<feComposite in="SourceGraphic"/>
				</filter>
				<linearGradient id="linear-gradient-2" x1="1347" y1="567.19" x2="1824" y2="567.19" xlink:href="#linear-gradient"/>
				<filter id="drop-shadow-4" x="1242" y="86" width="687" height="963" filterUnits="userSpaceOnUse">
					<feOffset dx="0" dy="0"/>
					<feGaussianBlur result="blur-4" stdDeviation="35"/>
					<feFlood flood-color="#000" flood-opacity=".35"/>
					<feComposite in2="blur-4" operator="in"/>
					<feComposite in="SourceGraphic"/>
				</filter>
				<filter id="drop-shadow-5" x="-9" y="86" width="1353" height="290" filterUnits="userSpaceOnUse">
					<feOffset dx="0" dy="0"/>
					<feGaussianBlur result="blur-5" stdDeviation="35"/>
					<feFlood flood-color="#000" flood-opacity=".35"/>
					<feComposite in2="blur-5" operator="in"/>
					<feComposite in="SourceGraphic"/>
				</filter>
			</defs>
			<g class="cls-10">
				<rect id="Base" class="cls-7" width="1920" height="1080"/>
				<polygon id="Accent2" class="cls-6" points="0 0 1085 0 795 1080 0 1080 0 0"/>
				<polygon id="Accent1" class="cls-8" points="0 .5 850 .5 560 1080.5 0 1080.5 0 .5"/>
			</g>
			<g id="PilotCard">
				<path id="Colored" class="cls-5" d="M1362,191h109.1v136.14c0,8.28-6.72,15-15,15h-109.1v-136.14c0-8.28,6.72-15,15-15Z"/>
				<path id="PilotCard-2" data-name="PilotCard" class="cls-2" d="M1809,943.38h-447c-8.28,0-15-6.72-15-15v-195h174l55.62,55.62h247.38v139.38c0,8.28-6.72,15-15,15Z"/>
				<rect id="Colored-2" data-name="Colored" class="cls-5" x="1347" y="789" width="477" height="77.19"/>
			</g>
			<g id="Layer_5" data-name="Layer 5">
				<rect id="DroneFeedShadow" class="cls-4" x="96" y="302" width="1143" height="642" rx="15" ry="15"/>
				<path class="cls-9" d="M1809,191h-447c-8.28,0-15,6.72-15,15v722.38c0,8.28,6.72,15,15,15h447c8.28,0,15-6.72,15-15V206c0-8.28-6.72-15-15-15Z"/>
			</g>
			<g id="StatusCard" class="cls-1">
				<path class="cls-2" d="M451,191h773c8.28,0,15,6.72,15,15v50c0,8.28-6.72,15-15,15H451v-80h0Z"/>
				<path class="cls-7" d="M111,191h340v80H111c-8.28,0-15-6.72-15-15v-50c0-8.28,6.72-15,15-15Z"/>
			</g>
		</svg>
	</div>


	<!-- <div id="ddr_node">

		<div id="node_avatar">
			<img id="node_avatar_img" src="/ddr_overlays/static/imgs/no_avatar.png">
		</div>

		<div id="node_position">
			<div id="node_pos"></div>
		</div>


		<div id="node_info_bar">

			<div id="node_avatar_spacer"></div>
			<div id="node_flag"></div>
			<div id="node_callsign"></div>
			<div id="node_team_name"></div>


			<div id="node_race_stats">
				<div id="node_rank_stat"></div>
			</div>

			<div id="node_position_spacer"></div>


		</div>

		<div id="pilot_current_laps">

		</div>

		<div id="pilot_current_lap_text">

		</div>



	</div> -->





	<!-- <div id="pilot_rank">
		<div id="pilot_rank_stat"></div>
	</div> -->





	<style>
		.cls-5 {
			fill: var(--pilot_color);
		}

		#node_info_bar {
			border-bottom-color: var(--pilot_color) !important;
		}

		#node_position {
			background-color: var(--pilot_color) !important;
		}
	</style>


</body>

</html>