<html>

<head>
	<link href="style.css" rel="stylesheet" type="text/css" />
	<style>
		@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;
		}
	</style>
</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>

</html>