2016-11-24 19:31:32 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="fr">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
<meta name="author" content="Gnieark" />
|
|
|
|
|
<title>Trons's Ludus</title>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
|
|
|
|
|
body{width:100%; font-size:100%; line-height:140%; word-wrap:break-word; text-rendering:optimizelegibility;
|
|
|
|
|
margin:0 auto; font-family : "lucida grande", "gill sans", arial, sans-serif; left:auto;}
|
|
|
|
|
header{ background-color:#A60800; width: 100%; overflow: hidden; height: auto;}
|
|
|
|
|
header h1{display: block; font-size:300%; color:#FFF;float: left; margin-left: 5%;}
|
|
|
|
|
header nav{display: block; width: 45%; color:#FFF; float: right;}
|
|
|
|
|
#menus{ margin-left: 50px; width:100%; display: table;}
|
|
|
|
|
#menus a{color: #fff; display: table-cell; text-decoration: none;text-align: center;border-radius: 15px 15px 0px 0px;}
|
|
|
|
|
#menus a.selected{color:#202020; background-color:#fff;}
|
|
|
|
|
footer{height: 70px; display: block; color: #343638; font-size: 11pt; line-height: 15pt; margin: 0; padding-top: 15pt;
|
|
|
|
|
overflow-x: hidden; box-sizing: border-box; background-image: -webkit-linear-gradient(top, #f5f5f5,#e9e9e9);
|
|
|
|
|
border-top: 1px solid #bebebe; color: #999; font-size: 12px; line-height: 1.5em; text-align: center;width: 100%;}
|
|
|
|
|
footer a {margin:0px 15px 0px 15px; color: #666;text-decoration: none; font-weight: normal;}
|
|
|
|
|
#languages{float: right; text-align: right;}
|
|
|
|
|
section{margin: 0 auto; width: 90%;}
|
2017-02-10 19:23:52 +01:00
|
|
|
|
|
|
|
|
aside, .large {width:100%;}
|
|
|
|
|
article{}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.playerBox{ float:left; max-width: 300px;}
|
2017-02-10 10:38:26 +01:00
|
|
|
|
|
|
|
|
.playerBox em {width: 100%;}
|
2017-02-09 19:24:18 +01:00
|
|
|
.playerBox em label {text-overflow: hidden; display: inline-block; width: 30%; margin-right: 20px; vertical-align: top; text-align: right;}
|
|
|
|
|
.playerBox em input, .playerBox em select {box-sizing: border-box; width: 59%; padding: 4px; vertical-align: top; }
|
2017-02-10 10:38:26 +01:00
|
|
|
.playerBox input[type=button] {width:100;}
|
2016-11-24 19:31:32 +01:00
|
|
|
.hidden{display: none;}
|
2017-02-10 10:38:26 +01:00
|
|
|
|
2016-11-24 19:31:32 +01:00
|
|
|
#logs{font-size: 70%;}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script><!--
|
|
|
|
|
function createElem(type,attributes){
|
|
|
|
|
var elem=document.createElement(type);
|
|
|
|
|
for (var i in attributes)
|
|
|
|
|
{elem.setAttribute(i,attributes[i]);}
|
|
|
|
|
return elem;
|
|
|
|
|
}
|
2017-02-08 18:41:26 +01:00
|
|
|
|
|
|
|
|
function makeid(){
|
|
|
|
|
var text = "";
|
|
|
|
|
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
|
|
|
|
|
|
|
|
|
for( var i=0; i < 5; i++ )
|
|
|
|
|
text += possible.charAt(Math.floor(Math.random() * possible.length));
|
|
|
|
|
|
|
|
|
|
return text;
|
|
|
|
|
}
|
|
|
|
|
|
2016-11-24 19:31:32 +01:00
|
|
|
function changeRandom(index,newValue){
|
|
|
|
|
if (newValue == "random" ){
|
|
|
|
|
document.getElementById("posX" + index).className = "hidden";
|
|
|
|
|
document.getElementById("posY" + index).className = "hidden";
|
|
|
|
|
}else{
|
|
|
|
|
document.getElementById("posX" + index).className = "";
|
|
|
|
|
document.getElementById("posY" + index).className = "";
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-02-08 18:41:26 +01:00
|
|
|
|
2016-11-24 19:31:32 +01:00
|
|
|
function changeTypePlayer(index,newValue){
|
2017-02-10 10:38:26 +01:00
|
|
|
//alert("botUrl" + index);
|
|
|
|
|
if (newValue == "human") document.getElementById("botUrl" + index).className = "hidden";
|
|
|
|
|
else document.getElementById("botUrl" + index).className= "";
|
2016-11-24 19:31:32 +01:00
|
|
|
}
|
2017-02-08 18:41:26 +01:00
|
|
|
|
|
|
|
|
function createElemWithLabel(type,attributes,labelTxt, id =''){
|
|
|
|
|
/*
|
|
|
|
|
* return an em element containing label and data like this:
|
|
|
|
|
* <em id='kjhjk'>
|
|
|
|
|
* <label for="plop"> the text of blah blah </label>
|
|
|
|
|
* <input type='someType' value='kjhjlkh' id='plop'/>
|
|
|
|
|
* </em>
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
if( id == ''){
|
|
|
|
|
var em = createElem ('em',{});
|
|
|
|
|
}else{
|
|
|
|
|
var em = createElem ('em',{'id':id});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (typeof attributes['id'] !== 'undefined') {
|
|
|
|
|
var forId = attributes['id'];
|
|
|
|
|
}else{
|
|
|
|
|
var forId = makeid();
|
|
|
|
|
}
|
|
|
|
|
var label = createElem('label',{'for' : forId});
|
2017-02-08 19:43:07 +01:00
|
|
|
label.innerHTML = labelTxt;
|
2017-02-08 18:41:26 +01:00
|
|
|
em.appendChild(label);
|
|
|
|
|
var elem = createElem(type,attributes);
|
|
|
|
|
if (typeof attributes['id'] !== 'undefined') {
|
|
|
|
|
em.setAttribute('id',forId);
|
|
|
|
|
}
|
|
|
|
|
em.appendChild(elem);
|
|
|
|
|
return em;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
function createLineSelect(labelTxt,arrayOptions,attributes){
|
|
|
|
|
//attributes are the select 's attributes, not his container
|
|
|
|
|
var em = createElem('em',{});
|
|
|
|
|
if (typeof attributes['id'] !== 'undefined') {
|
|
|
|
|
var forId = attributes['id'];
|
|
|
|
|
}else{
|
|
|
|
|
var forId = makeid();
|
|
|
|
|
}
|
|
|
|
|
var label = createElem('label',{'for':forId});
|
|
|
|
|
label.innerHTML = labelTxt;
|
|
|
|
|
em.appendChild(label);
|
|
|
|
|
|
|
|
|
|
var select = createElem('select',attributes);
|
|
|
|
|
if (typeof attributes['id'] !== 'undefined') {
|
|
|
|
|
select.setAttribute('id',forId);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for(var i=0; i < arrayOptions.length; i++){
|
|
|
|
|
var option = createElem('option',{'value':arrayOptions[i]['value']});
|
2017-02-08 19:43:07 +01:00
|
|
|
option.innerHTML = arrayOptions[i]['text'];
|
|
|
|
|
select.appendChild(option);
|
2017-02-08 18:41:26 +01:00
|
|
|
}
|
2017-02-08 19:43:07 +01:00
|
|
|
em.appendChild(select);
|
2017-02-08 18:41:26 +01:00
|
|
|
return em;
|
|
|
|
|
}
|
2016-11-24 19:31:32 +01:00
|
|
|
function createPlayerForm(index){
|
|
|
|
|
var container = document.getElementById("playersSettings");
|
|
|
|
|
var divForm = createElem("div", {"id": "containerPlayer" + index,"class":"playerBox" } );
|
2017-02-10 10:38:26 +01:00
|
|
|
var subtitle = createElem('h3',{});
|
|
|
|
|
subtitle.innerHTML = 'Bot ' + index;
|
|
|
|
|
divForm.appendChild(subtitle);
|
2017-02-08 19:43:07 +01:00
|
|
|
|
2017-02-10 10:38:26 +01:00
|
|
|
divForm.appendChild(
|
2017-02-08 19:43:07 +01:00
|
|
|
createLineSelect('Type:',
|
|
|
|
|
[ {'value':'bot','text' : 'bot'},
|
|
|
|
|
{'value':'human','text' : 'human'}
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
{"id":"playerType" + index,
|
|
|
|
|
"onchange":"changeTypePlayer('" + index + "', this.value);"
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
divForm.appendChild(
|
|
|
|
|
createElemWithLabel(
|
|
|
|
|
'input',
|
|
|
|
|
{
|
2017-02-09 19:24:18 +01:00
|
|
|
"type": "text", "value":"",
|
2017-02-08 19:43:07 +01:00
|
|
|
"placeholder":"http://Bot.url"
|
|
|
|
|
},
|
2017-02-09 19:24:18 +01:00
|
|
|
'URL du Bot',
|
|
|
|
|
'botUrl' + index
|
2017-02-08 19:43:07 +01:00
|
|
|
)
|
|
|
|
|
|
|
|
|
|
);
|
|
|
|
|
divForm.appendChild(
|
|
|
|
|
createLineSelect('Starting cell:',
|
|
|
|
|
[ {'value':'random','text' : 'random'},
|
|
|
|
|
{'value':'defined','text' : 'Let me define it'}
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
"id": "randomOrNot" + index,
|
|
|
|
|
"onchange":"changeRandom('" + index + "', this.value);"
|
|
|
|
|
}
|
2017-02-10 10:38:26 +01:00
|
|
|
|
2017-02-08 19:43:07 +01:00
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
divForm.appendChild(
|
|
|
|
|
createElemWithLabel(
|
|
|
|
|
'input',
|
2017-02-10 10:38:26 +01:00
|
|
|
{"type":"text","value": "0"},
|
|
|
|
|
'X coord:',
|
|
|
|
|
"posX" + index
|
2017-02-08 19:43:07 +01:00
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
divForm.appendChild(
|
|
|
|
|
createElemWithLabel(
|
|
|
|
|
'input',
|
2017-02-10 10:38:26 +01:00
|
|
|
{"type":"text","value": "0"},
|
|
|
|
|
'Y coord:',
|
|
|
|
|
"posY" + index
|
2017-02-08 19:43:07 +01:00
|
|
|
)
|
|
|
|
|
);
|
2017-02-10 10:38:26 +01:00
|
|
|
|
|
|
|
|
divForm.appendChild(createElemWithLabel(
|
|
|
|
|
'input',
|
|
|
|
|
{
|
|
|
|
|
'type':'button',
|
2017-02-10 19:23:52 +01:00
|
|
|
'value':'Add another player',
|
2017-02-10 10:38:26 +01:00
|
|
|
'onclick':'createPlayerForm(\'' + (parseFloat(index) + 1) + '\');'
|
|
|
|
|
},
|
2017-02-10 19:23:52 +01:00
|
|
|
'',
|
|
|
|
|
'fightButton' + index
|
2017-02-10 10:38:26 +01:00
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
container.appendChild(divForm);
|
2017-02-10 19:23:52 +01:00
|
|
|
//delete the previous submit button
|
|
|
|
|
if(index > 0){
|
|
|
|
|
//alert('fightButton' +(parseFloat(index) - 1 ));
|
|
|
|
|
var theButton = document.getElementById('fightButton' +(parseFloat(index) - 1 ));
|
|
|
|
|
theButton.parentNode.removeChild(theButton);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2017-02-10 10:38:26 +01:00
|
|
|
|
|
|
|
|
//to hide by default:
|
|
|
|
|
//changeTypePlayer(index,'human');
|
|
|
|
|
changeRandom(index,'random');
|
|
|
|
|
|
|
|
|
|
//scroll down
|
|
|
|
|
window.scrollTo(0,document.body.scrollHeight);
|
|
|
|
|
|
|
|
|
|
//show (or not) button to launch the game
|
2017-02-10 19:23:52 +01:00
|
|
|
if( index > 0){
|
|
|
|
|
document.getElementById('buttonFight').className="large";
|
|
|
|
|
}else{
|
|
|
|
|
document.getElementById('buttonFight').className="hidden";
|
2017-02-10 10:38:26 +01:00
|
|
|
}
|
2016-11-24 19:31:32 +01:00
|
|
|
|
|
|
|
|
}
|
2017-02-10 19:23:52 +01:00
|
|
|
function initGame(playersSum){
|
|
|
|
|
//find all vars
|
|
|
|
|
|
|
|
|
|
//how many bots
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
2016-11-24 19:31:32 +01:00
|
|
|
|
|
|
|
|
--></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<header>
|
|
|
|
|
<h1>Tron's Ludus</h1>
|
|
|
|
|
</header>
|
|
|
|
|
<section>
|
|
|
|
|
<p>Here you can test and fix your bot, against himself, against human or against any other bot if you know the URL.
|
|
|
|
|
<br/>No scoring here, it's a Ludus (gladiators training center).</p>
|
|
|
|
|
|
|
|
|
|
<aside id="playersSettings">
|
2017-02-10 19:23:52 +01:00
|
|
|
<h2>Configure the test</h2>
|
2017-02-10 10:38:26 +01:00
|
|
|
</aside>
|
2016-11-24 19:31:32 +01:00
|
|
|
<article id="fightResult">
|
2017-02-10 19:23:52 +01:00
|
|
|
<p><input id='buttonFight' type='button' value='Fight' class="hidden" onclick='initGame();'/></p>
|
2016-11-24 19:31:32 +01:00
|
|
|
</article>
|
|
|
|
|
</section>
|
|
|
|
|
<footer>
|
|
|
|
|
<a href="/p/About">About</a><a href="https://github.com/gnieark/botsArena">Bots'Arena source code</a><a href="/p/legals">Mentions légales</a>
|
2017-02-10 19:23:52 +01:00
|
|
|
<script>
|
|
|
|
|
createPlayerForm(0);
|
|
|
|
|
</script>
|
|
|
|
|
</footer>
|
2016-11-24 19:31:32 +01:00
|
|
|
</body>
|
|
|
|
|
</html>
|
