<!DOCTYPE HTML>
<html lang="pt-br">

<head>
	<meta charset="UTF-8">

	<title>MMORPG - Game of Thrones</title>

	<!-- JQuery -->
	<script src="js/jquery-2.2.1.js"></script>

	<!-- bootstrap - link cdn -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
	 crossorigin="anonymous">

	<!-- incluindo css -->
	<link href="css/style.css" rel="stylesheet">

</head>

<body class="body-jogo">

	<nav class="navbar navbar-default navbar-static-top">
		<div class="container">
			<div class="form-group sair">
				<a href="/sair" class="btn btn-info pull-right">Sair</a>
			</div>
		</div>
	</nav>

	<div class="container">

		<% if(msg == 'A'){%>
		<div class="alert alert-danger" id="msg">
			<strong>Operação Inválida, verifique se todos os campos foram informados</strong>
		</div>
		<% }%>

		<% if(msg == 'B'){%>
		<div class="alert alert-info" id="msg">
			<strong>Ação realizada com sucesso</strong>
		</div>
		<% }%>

		<% if(msg == 'C'){%>
		<div class="alert alert-info" id="msg">
			<strong>Ação finalizada com sucesso</strong>
		</div>
		<% }%>

		<div class="row">
			<div class="col-sm-3 casa">
				<img src="images/casa_<%=img_casa%>.jpg" />
			</div>

			<div class="col-sm-9">
				<div class="row barra-superior">
					<div class="col-sm-2">
						<img src="images/habilidades/temor.jpg" title="Temor" alt="Temor" />
						<span>
							<%=jogo.temor%></span>
					</div>

					<div class="col-sm-2">
						<img src="images/habilidades/sabedoria.jpg" title="Sabedoria" alt="Sabedoria" />
						<span>
							<%=jogo.sabedoria%></span>
					</div>

					<div class="col-sm-2">
						<img src="images/habilidades/comercio.jpg" title="Comércio" alt="Comércio" />
						<span>
							<%=jogo.comercio%></span>
					</div>

					<div class="col-sm-2">
						<img src="images/habilidades/magia.jpg" title="Magia" alt="Magia" />
						<span>
							<%=jogo.magia%></span>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-sm-3"></div>
			<div class="col-sm-9">
				<div class="acoes" id="acoes">Senhor, o que deseja fazer hoje?</div>
			</div>
		</div>

	</div>

	<div class="barra-inferior">
		<div class="container">

			<div class="row">
				<div class="col-sm-1">
					<img src="images/outros/suditos.jpg" title="Aldeões" alt="Aldeões" id="btn_suditos" style="cursor: pointer;" />
					<span>
						<%=jogo.suditos%></span>
				</div>

				<div class="col-sm-1">
					<img src="images/outros/pergaminho.jpg" title="Pergaminhos" alt="Pergaminhos" id="btn_pergaminhos" style="cursor: pointer;" />
				</div>

				<div class="col-sm-8"></div>

				<div class="col-sm-2">
					<img src="images/outros/moeda.jpg" title="Moeda" alt="Moeda" />
					<span>
						<%=jogo.moeda%></span>
				</div>

			</div>
		</div>
	</div>
	<script>
		$(document).ready(() => {

			$('#btn_suditos').on('click', () => {
				$('#msg').hide()
				$.ajax({
					url: '/suditos',
					method: 'get',
					success: (data) => {
						$('#acoes').html(data)
					}
				})
			})

			$('#btn_pergaminhos').on('click', () => {
				$('#msg').hide()
				$.ajax({
					url: '/pergaminhos',
					method: 'get',
					success: (data) => {
						$('#acoes').html(data)

						clearTimeout(timerId)
						cronometro()
					}
				})
			})
		})

		var timerId = null;
		function cronometro() {
			$('.tempo_restante').each(function () {
				var segundos = $(this).html();
				var segundos_atuais = parseInt(segundos) - 1;

				if (segundos_atuais < 0) {
					window.location.href = "/jogo?msg=C"
				} else {
					$(this).html(segundos_atuais);
				}

			});
			timerId = setTimeout('cronometro()', 1000);
		}
	</script>
</body>

</html>