233 lines
6.2 KiB
HTML
233 lines
6.2 KiB
HTML
<!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;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<form action="#" th:object="${defCtx}" method="post" id="simuform" >
|
|
|
|
<fieldset id="herosFields">
|
|
<legend>Héros</legend>
|
|
<select name="heros" id="heros" th:field="*{hero}">
|
|
<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="*{heroLevel}">
|
|
|
|
<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>
|
|
<legend>Unités</legend>
|
|
<table cellspacing="0" cellpadding="0">
|
|
<tr>
|
|
<td th:each="unite : ${defUnits}" class="squareContainer">
|
|
<img class="squareImage" th:for="'unite-'+${unite.id}" th:src="@{/images/units/{uname}.png(uname=${unite.id})}"/>
|
|
<input type="number" class="squareNumber" th:id="'unite-'+${unite.id}" th:field="*{units[__${unite.id}__]}"/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</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>
|
|
<table cellspacing="0" cellpadding="0">
|
|
<tr>
|
|
<td th:each="power : ${defPowers}" class="squareContainer">
|
|
<img class="squareImage" th:for="'power-'+${power.id}" th:src="@{/images/powers/{pname}.png(pname=${power.id})}"/>
|
|
<input type="checkbox" th:id="'power-'+${power.id}" th:field="*{powersAsMap[__${power.id}__]}" th:value="true"/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Recherches</legend>
|
|
<table cellspacing="0" cellpadding="0">
|
|
<tr>
|
|
<td th:each="research : ${defResearches}" class="squareContainer">
|
|
<img class="squareImage" th:for="'research-'+${research.id}" th:src="@{/images/researches/{rname}.png(rname=${research.id})}"/>
|
|
<input type="checkbox" th:id="'research-'+${research.id}" th:field="*{researchesAsMap[__${research.id}__]}" th:value="true"/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Conseillers</legend>
|
|
<table cellspacing="0" cellpadding="0">
|
|
<tr>
|
|
<td th:each="counsellor : ${defCounsellors}" class="squareContainer">
|
|
<img class="squareImage" th:for="'counsellor-'+${counsellor}" th:src="@{/images/counsellors/{cname}.png(cname=${counsellor})}"/>
|
|
<input type="checkbox" th:id="'counsellor-'+${counsellor}" th:field="*{counsellorsAsMap[__${counsellor}__]}" th:value="true"/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</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>
|
|
|
|
<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> |