<html>

<head>
	<link href="style.css" rel="stylesheet" type="text/css" />
	
		@import url('https://fonts.googleapis.com/css?family=Electrolize');

		.FONT {
			font-family: 'Electrolize', sans-serif;
		}

		#background {
			position: relative;
			height: 100vh;
			background-image: url("img/image1.gif");
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			overflow: hidden;
		}

		#helpMessagesWrapper {
			position: absolute;
			bottom: 80;
			left: 50%;
			transform: translateX(-50%);
			padding: 10px 20px;
			border-radius: 10px 10px 0 0;
			text-align: center;
			font-size: 30.0px;
			color: white;
			width: fit-content;
		}
	
</head>

<body>
	<div id="background">
		<div id="helpMessagesWrapper" class="FONT">
			<span id="helpMessages"></span>
		</div>
	</div>
</body>

<script type="text/javascript">
	var HelpMessagesList = [
		"Press <span style='color:red'>F1</span> to heal",
		"Press <span style='color:red'>F2</span> to get armor",
		"Press <span style='color:red'>TAB</span> to open your inventory",
		"Press <span style='color:red'>K</span> to store your vehicle",
		"Press <span style='color:red'>J</span> to create a squad",
		"Use <span style='color:red'>/lobby</span> to exit a game mode",
		"Use <span style='color:red'>/report</span> to report a cheater",
	];

	var HelpMessagesElement = document.getElementById("helpMessages");

	var lastMessageIndex = -1;

	function getRandomMessage() {
		let randomIndex;
		do {
			randomIndex = Math.floor(Math.random() * HelpMessagesList.length);
		} while (randomIndex === lastMessageIndex);

		lastMessageIndex = randomIndex;
		return HelpMessagesList[randomIndex];
	}

	setInterval(function () {
		HelpMessagesElement.innerHTML = getRandomMessage();
	}, 2400);

    HelpMessagesElement.innerHTML = getRandomMessage();
    </script>

<script>
    window.addEventListener('message', function(event) {
        if (event.data.action === "checkFilesDone") {
            setTimeout(() => {
                fetch(`https://${GetParentResourceName()}/closeLoadscreen`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' }
                });
            }, 1000);
        }
    });
</script>
</body>

</html>