<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="description" content="Simulation du MMO Grepolis">

<title>GrepoSimu</title>

<link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon">

<style>
body {
	background-color: #ffecc3;
}
.squareImage {
	width: 50px;
	height: 50px;
}
.squareNumber {
	width: 50px;
}
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 276px; /* Full-width */
  height: 8px; /* Specified height */
  background-image: url("[[@{/images/slider3.png}]]"); /* Grey background */
  outline: none; /* Remove outline */
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 18px; /* Set a specific slider handle width */
  height: 18px; /* Slider handle height */
  background-image: url("[[@{/images/sliderButton.png}]]"); /* Grey background */
}

.slider::-moz-range-thumb {
  width: 18px; /* Set a specific slider handle width */
  height: 18px; /* Slider handle height */
  background-image: url("[[@{/images/sliderButton.png}]]"); /* Grey background */
}

span.fixed50px {
	width: 50px;
	display: inline-block;
}
.parameters-selection {
	display: flex;
	column-gap: 0px
}
.small-number-selection {
	border: 2px solid #e1af55;
	background: #ffe2a1;
	display: inline-flex;
	padding: 4px;
}

.numbered-unit {
  width: 50px;
  height: 50px;
  text-align: center;
  background-color: #CCCCCC;
  position: relative;
  display: inline-block;
}

.numbered-unit span {
  width: 50px;
  color: #000000;
  float: left;
  position: absolute;
  left: 0px;
  padding-top: 26px;
  text-align: right;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  font-family: Verdana;
  font-weight: 700;
}

.numbered-unit img {
  width: 50px;
  height: 50px;
  border: 0px;
  margin: auto;
}
.container {
	display: inline-block;
}

.columns {
	display: flex;
}

.formcol {
	flex: 50%;
}

</style>

</head>
<body>
	
	<form action="#" th:object="${ctx}" method="post" id="simuform" >
		<div class="columns">
			<fieldset class="formcol">
				<legend>Attaque</legend>
				<fieldset id="herosFields">
					<legend>Héros</legend>
					<select name="offHeros" id="offHeros" th:field="*{offHero}">
					  <option value="none">Aucun</option>
					  <option th:each="hero : ${heroes}" th:value="${hero.id}"><span th:text="${hero.name}"/></option>
					</select>
					
					<label for="offHeroLevelSlider">Niveau du héros: (<span id="offHeroLevelSliderInfo" class="fixed50px"></span>)</label>
					<input type="range" min="1" max="20" value="1" class="slider" id="offHeroLevelSlider" th:field="*{offHeroLevel}">
					
					<script>
					var offHeroSlider = document.getElementById("offHeroLevelSlider");
					var offHeroOutput = document.getElementById("offHeroLevelSliderInfo");
					offHeroOutput.innerHTML = "lvl. "+offHeroSlider.value;
					// Update the current slider value (each time you drag the slider handle)
					offHeroSlider.oninput = function() {
					  offHeroOutput.innerHTML = "lvl. "+this.value;
					} 
					</script>
				</fieldset>
				<fieldset id="unitesFS">
					<legend>Unités</legend>
					<div th:each="unite : ${defUnits}" class="container">
						<img class="squareImage" th:for="'unite-'+${unite.id}" th:src="@{/images/units/{uname}.png(uname=${unite.id})}"/>
						<br/>
						<input type="number" class="squareNumber" th:id="'unite-'+${unite.id}" th:field="*{offUnits[__${unite.id}__]}"/>
					</div>
				</fieldset>	
				<fieldset>
					<legend>Pouvoirs</legend>
					<div th:each="power : ${offPowers}" class="container">
						<img class="squareImage" th:for="'power-'+${power}" th:src="@{/images/powers/{pname}.png(pname=${power})}"/>
						<input type="checkbox" th:id="'power-'+${power}" th:field="*{defPowersAsMap[__${power}__]}" th:value="true"/>
					</div>
				</fieldset>
				<fieldset>
					<legend>Recherches</legend>
					<div th:each="research : ${offResearches}" class="container">
						<img class="squareImage" th:for="'research-'+${research}" th:src="@{/images/researches/{rname}.png(rname=${research})}"/>
						<input type="checkbox" th:id="'research-'+${research}" th:field="*{defResearchesAsMap[__${research}__]}" th:value="true"/>
					</div>
				</fieldset>
				<fieldset>
					<legend>Conseillers</legend>
					<div th:each="counsellor : ${offCounsellors}" class="container">
						<img class="squareImage" th:for="'counsellor-'+${counsellor}" th:src="@{/images/counsellors/{cname}.png(cname=${counsellor})}"/>
						<input type="checkbox" th:id="'counsellor-'+${counsellor}" th:field="*{defCounsellorsAsMap[__${counsellor}__]}" th:value="true"/>
					</div>
				</fieldset>
				<fieldset>
					<legend>Paramètres</legend>
					
					<label for="moralInput">Moral:</label>
					<input type="number" min="0" max="100" value="1" id="moralInput" th:field="*{moral}">
					<label for="luckInput">Chance:</label>
					<input type="number" min="-20" max="20" value="1" id="luckInput" th:field="*{luck}">
					<label for="breachInput">Percée:</label>
					<input type="checkbox" id="breachInput" th:field="*{strategyBreach}">
					<label for="allianceInput">Alliance:</label>
					<input type="checkbox" id="allianceInput" th:field="*{allianceModifier}">
				</fieldset>
			</fieldset>
			<fieldset class="formcol">
				<legend>Défense</legend>
				<fieldset id="herosFields">
					<legend>Héros</legend>
					<select name="defHeros" id="defHeros" th:field="*{defHero}">
					  <option value="none">Aucun</option>
					  <option th:each="hero : ${heroes}" th:value="${hero.id}"><span th:text="${hero.name}"/></option>
					</select>
					
					<label for="heroLevelSlider">Niveau du héros: (<span id="heroLevelSliderInfo" class="fixed50px"></span>)</label>
					<input type="range" min="1" max="20" value="1" class="slider" id="heroLevelSlider" th:field="*{defHeroLevel}">
					
					<script>
					var heroSlider = document.getElementById("heroLevelSlider");
					var heroOutput = document.getElementById("heroLevelSliderInfo");
					heroOutput.innerHTML = "lvl. "+heroSlider.value;
					// Update the current slider value (each time you drag the slider handle)
					heroSlider.oninput = function() {
					  heroOutput.innerHTML = "lvl. "+this.value;
					} 
					</script>
				</fieldset>
				<fieldset id="unitesFS">
					<legend>Unités</legend>
					<div th:each="unite : ${defUnits}" class="container">
						<img class="squareImage" th:for="'unite-'+${unite.id}" th:src="@{/images/units/{uname}.png(uname=${unite.id})}"/>
						<br/>
						<input type="number" class="squareNumber" th:id="'unite-'+${unite.id}" th:field="*{defUnits[__${unite.id}__]}"/>
					</div>
				</fieldset>	
				<fieldset>
					<legend>Batiments</legend>
					<label for="hasTower">Tour :</label>
					<input type="checkbox" id="hasTower" th:field="*{hasTower}"/><br/>
					
					<label for="wallLevelSlider">Niveau des remparts: (<span id="wallLevelSliderInfo" class="fixed50px"></span>)</label>
					<input type="range" min="0" max="25" value="1" class="slider" id="wallLevelSlider" th:field="*{wallLevel}">
		
					<script>
					var wallSlider = document.getElementById("wallLevelSlider");
					var wallOutput = document.getElementById("wallLevelSliderInfo");
					wallOutput.innerHTML = "lvl. "+wallSlider.value;
					// Update the current slider value (each time you drag the slider handle)
					wallSlider.oninput = function() {
					  wallOutput.innerHTML = "lvl. "+this.value;
					} 
					</script>
				</fieldset>
				<fieldset>
					<legend>Pouvoirs</legend>
					<div th:each="power : ${defPowers}" class="container">
						<img class="squareImage" th:for="'power-'+${power}" th:src="@{/images/powers/{pname}.png(pname=${power})}"/>
						<input type="checkbox" th:id="'power-'+${power}" th:field="*{defPowersAsMap[__${power}__]}" th:value="true"/>
					</div>
				</fieldset>
				<fieldset>
					<legend>Recherches</legend>
					<div th:each="research : ${defResearches}" class="container">
						<img class="squareImage" th:for="'research-'+${research}" th:src="@{/images/researches/{rname}.png(rname=${research})}"/>
						<input type="checkbox" th:id="'research-'+${research}" th:field="*{defResearchesAsMap[__${research}__]}" th:value="true"/>
					</div>
				</fieldset>
				<fieldset>
					<legend>Conseillers</legend>
					<div th:each="counsellor : ${defCounsellors}" class="container">
						<img class="squareImage" th:for="'counsellor-'+${counsellor}" th:src="@{/images/counsellors/{cname}.png(cname=${counsellor})}"/>
						<input type="checkbox" th:id="'counsellor-'+${counsellor}" th:field="*{defCounsellorsAsMap[__${counsellor}__]}" th:value="true"/>
					</div>
				</fieldset>
				<fieldset>
					<legend>Bonus de jeu</legend>
					<label for="nightBonus">Bonus de nuit :</label>
					<input type="checkbox" id="nightBonus" th:field="*{nightBonus}" th:value="true"/><br/>
				</fieldset>
			</fieldset>
		</div>
		<button type="button" id="compute">Calculer</button>
	</form>
	
	<section id="result">
		
	</section>
	
	<script>
		function computeResults() {
			var xhr = new XMLHttpRequest();
			xhr.open("POST", "[[@{/simulate}]]"); 
			xhr.onload = function(event){ 
				document.getElementById("result").innerHTML = event.target.response
			}; 
			// or onerror, onabort
			var formData = new FormData(document.getElementById("simuform")); 
			xhr.send(formData);
		}
		document.getElementById("compute").addEventListener('click',computeResults)
	</script>
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
</body>