gnieark/botsArena
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
dev
botsArena/html/testBotScripts/tron.html

300 lines
10 KiB
HTML
Raw Permalink Normal View History

start rewriting core
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%;}
ludus Tron Work in progress
2017-02-10 19:23:52 +01:00
aside, .large {width:100%;}
article{}
.playerBox{ float:left; max-width: 300px;}
ludus Tron Work in progress
2017-02-10 10:38:26 +01:00
.playerBox em {width: 100%;}
CSS on players bots To do next: condtionals show hide elems
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; }
ludus Tron Work in progress
2017-02-10 10:38:26 +01:00
.playerBox input[type=button] {width:100;}
start rewriting core
2016-11-24 19:31:32 +01:00
.hidden{display: none;}
ludus Tron Work in progress
2017-02-10 10:38:26 +01:00
start rewriting core
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;
}
WIP slowly
2017-03-03 08:06:26 +01:00
function createElemNS(type,attributes){
//same as createElem but with ns for svg file
var elem=document.createElementNS("http://www.w3.org/2000/svg",type);
for (var i in attributes)
{elem.setAttributeNS(null,i,attributes[i]);}
return elem;
}
fix README.md
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;
}
start rewriting core
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 = "";
}
}
fix README.md
2017-02-08 18:41:26 +01:00
start rewriting core
2016-11-24 19:31:32 +01:00
function changeTypePlayer(index,newValue){
ludus Tron Work in progress
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= "";
start rewriting core
2016-11-24 19:31:32 +01:00
}
fix README.md
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});
factorise JS WIP
2017-02-08 19:43:07 +01:00
label.innerHTML = labelTxt;
fix README.md
2017-02-08 18:41:26 +01:00
em.appendChild(label);
var elem = createElem(type,attributes);
if (typeof attributes['id'] !== 'undefined') {
WIP slowly
2017-03-03 08:06:26 +01:00
elem.setAttribute('id',forId);
fix README.md
2017-02-08 18:41:26 +01:00
}
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']});
factorise JS WIP
2017-02-08 19:43:07 +01:00
option.innerHTML = arrayOptions[i]['text'];
select.appendChild(option);
fix README.md
2017-02-08 18:41:26 +01:00
}
factorise JS WIP
2017-02-08 19:43:07 +01:00
em.appendChild(select);
fix README.md
2017-02-08 18:41:26 +01:00
return em;
}
start rewriting core
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" } );
WIP slowly
2017-03-03 08:06:26 +01:00
var subtitle = createElem('h3',{});
subtitle.innerHTML = 'Bot ' + index;
divForm.appendChild(subtitle);
divForm.appendChild( createLineSelect('Type:', [ {'value':'bot','text' : 'bot'}, {'value':'human','text' : 'human'} ], {"id":"playerType" + index, "onchange":"changeTypePlayer('" + index + "', this.value);" } ) );
divForm.appendChild( createElemWithLabel( 'input', { "type": "text", "value":"", "placeholder":"http://Bot.url", "id":"url" + index }, 'URL du Bot', 'botUrl' + index ) );
divForm.appendChild( createLineSelect('Starting cell:', [ {'value':'random','text' : 'random'}, {'value':'defined','text' : 'Let me define it'} ], { "id": "randomOrNot" + index, "onchange":"changeRandom('" + index + "', this.value);" } ) );
divForm.appendChild( createElemWithLabel( 'input', {"type":"text","value": "0"}, 'X coord:', "posX" + index ) );
divForm.appendChild( createElemWithLabel( 'input', {"type":"text","value": "0"}, 'Y coord:', "posY" + index ) );
divForm.appendChild(createElemWithLabel( 'input', { 'type':'button', 'value':'Add another player', 'onclick':'createPlayerForm(\'' + (parseFloat(index) + 1) + '\');' }, '', 'fightButton' + index ) );
ludus Tron Work in progress
2017-02-10 10:38:26 +01:00
WIP slowly
2017-03-03 08:06:26 +01:00
container.appendChild(divForm);
//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);
}
ludus Tron Work in progress
2017-02-10 10:38:26 +01:00
//to hide by default:
changeRandom(index,'random');
//scroll down
window.scrollTo(0,document.body.scrollHeight);
//show (or not) button to launch the game
ludus Tron Work in progress
2017-02-10 19:23:52 +01:00
if( index > 0){
document.getElementById('buttonFight').className="large";
WIP slowly
2017-03-03 08:06:26 +01:00
document.getElementById('buttonFight').setAttribute('onclick',"initGame(" + index +" );");
ludus Tron Work in progress
2017-02-10 19:23:52 +01:00
}else{
document.getElementById('buttonFight').className="hidden";
ludus Tron Work in progress
2017-02-10 10:38:26 +01:00
}
WIP slowly
2017-03-03 08:06:26 +01:00
}
function buildPad(index){
//Generate directionals arrow
var up = createElem('a',{'onclick':"up('" + index + "');"});
up.innerHTML="&#8593;";
var down= createElem('a',{'type':'button','value':'&#8595;','onclick':"down('" + index + "');"});
var left = createElem('a',{'type':'button','value':'&#x2190;','onclick':"left('" + index + "');"});
var right = createElem('a',{'type':'button','value':'&#8594;','onclick':"right('" + index + "');"});
start rewriting core
2016-11-24 19:31:32 +01:00
WIP slowly
2017-03-03 08:06:26 +01:00
var container = createElem('div',{});
container.appendChild(up);
container.appendChild(down);
container.appendChild(left);
container.appendChild(right);
return container;
}
function lap(players){
for (var i = 0; i < players.length; i++){
if (players[i]['type'] == "human"){
//erf
}else{
}
}
start rewriting core
2016-11-24 19:31:32 +01:00
}
ludus Tron Work in progress
2017-02-10 19:23:52 +01:00
function initGame(playersSum){
WIP slowly
2017-03-03 08:06:26 +01:00
//remove button
var theButton = document.getElementById('fightButton' + playersSum);
theButton.parentNode.removeChild(theButton);
ludus Tron Work in progress
2017-02-10 19:23:52 +01:00
//find all vars
WIP slowly
2017-03-03 08:06:26 +01:00
var players = [];
for (var i = 0; i <= playersSum; i++){
//playerType0
//"url" + index
//"randomOrNot" + index
//"posX" + index
//"posY" + index
players.push(
{'type' : document.getElementById('playerType' + i).value,
'url' : document.getElementById('url' + i).value,
'random': document.getElementById('randomOrNot' + i).value,
'posX': document.getElementById('posX' + i).value,
'posY': document.getElementById('posY' + i).value
}
);
}
//empty players settings playerBox
while (document.getElementById('playersSettings').firstChild) {
document.getElementById('playersSettings').removeChild(document.getElementById('playersSettings').firstChild);
}
//fill bot infos as table
var table = createElem ('table',{});
for (var i = 0; i <=playersSum; i++){
var tr = createElem('tr',{});
tr.innerHTML = '<td>' + i + '</td><td>' + players[i]['type'] + '</td><td>' + players[i]['url'] + '</td>';
table.appendChild(tr);
}
document.getElementById('playersSettings').appendChild(table);
ludus Tron Work in progress
2017-02-10 19:23:52 +01:00
WIP slowly
2017-03-03 08:06:26 +01:00
//empty the map
while (document.getElementById('fightResult').firstChild) {
document.getElementById('fightResult').removeChild(document.getElementById('fightResult').firstChild);
}
// draw border;
var svg = createElemNS('svg',{'id':'map','width':'500','height':'500','viewBox':'0 0 100 100'});
var rect=createElemNS('rect',{'x':'0','y':'0','width':'1000','height':'1000','style':'stroke:#000000; fill:none;'});
svg.appendChild(rect);
document.getElementById("fightResult").appendChild(svg);
var plogs = createElem("p",{'id':'logs'});
document.getElementById("fightResult").appendChild(plogs);
//init the map
ludus Tron Work in progress
2017-02-10 19:23:52 +01:00
WIP slowly
2017-03-03 08:06:26 +01:00
for (var i = 0; i <=playersSum; i++){
if(players[i]['random'] == 'random'){
players[i]['tail'] = [[Math.random() * 999,Math.random() * 999]];
}else{
players[i]['tail'] = [[players[i]['posX'],players[i]['posY']]];
}
//Make a pad for all humans player
if(players[i]['type'] == 'human'){
document.getElementById('playersSettings').appendChild(buildPad(i));
}
}
lap(players);
ludus Tron Work in progress
2017-02-10 19:23:52 +01:00
}
start rewriting core
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">
ludus Tron Work in progress
2017-02-10 19:23:52 +01:00
<h2>Configure the test</h2>
ludus Tron Work in progress
2017-02-10 10:38:26 +01:00
</aside>
start rewriting core
2016-11-24 19:31:32 +01:00
<article id="fightResult">
ludus Tron Work in progress
2017-02-10 19:23:52 +01:00
<p><input id='buttonFight' type='button' value='Fight' class="hidden" onclick='initGame();'/></p>
start rewriting core
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>
ludus Tron Work in progress
2017-02-10 19:23:52 +01:00
<script>
createPlayerForm(0);
</script>
</footer>
start rewriting core
2016-11-24 19:31:32 +01:00
</body>
</html>
Reference in New Issue Copy Permalink