ludus Tron Work in progress

This commit is contained in:
Gnieark 2017-02-10 10:38:26 +01:00
parent b629a4755d
commit aad6357f56

View File

@ -24,12 +24,14 @@ footer a {margin:0px 15px 0px 15px; color: #666;text-decoration: none; font-weig
section{margin: 0 auto; width: 90%;} section{margin: 0 auto; width: 90%;}
article{float: right; width:70%;} article{float: right; width:70%;}
aside{float:left;width:29%;} aside{float:left;width:29%;}
.playerBox{ } .playerBox{ float:left;}
.playerBox em {display: block; width: 100%;}
.playerBox em {width: 100%;}
.playerBox em label {text-overflow: hidden; display: inline-block; width: 30%; margin-right: 20px; vertical-align: top; text-align: right;} .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; } .playerBox em input, .playerBox em select {box-sizing: border-box; width: 59%; padding: 4px; vertical-align: top; }
.playerBox input[type=button] {width:100;}
.hidden{display: none;} .hidden{display: none;}
#logs{font-size: 70%;} #logs{font-size: 70%;}
</style> </style>
@ -62,9 +64,9 @@ function changeRandom(index,newValue){
} }
function changeTypePlayer(index,newValue){ function changeTypePlayer(index,newValue){
alert("botUrl" + index); //alert("botUrl" + index);
if (newValue == "Human") document.getElementById("botUrl" + index).class = "hidden"; if (newValue == "human") document.getElementById("botUrl" + index).className = "hidden";
else document.getElementById("botUrl" + index).class = ""; else document.getElementById("botUrl" + index).className= "";
} }
function createElemWithLabel(type,attributes,labelTxt, id =''){ function createElemWithLabel(type,attributes,labelTxt, id =''){
@ -126,8 +128,11 @@ function createLineSelect(labelTxt,arrayOptions,attributes){
function createPlayerForm(index){ function createPlayerForm(index){
var container = document.getElementById("playersSettings"); var container = document.getElementById("playersSettings");
var divForm = createElem("div", {"id": "containerPlayer" + index,"class":"playerBox" } ); var divForm = createElem("div", {"id": "containerPlayer" + index,"class":"playerBox" } );
var subtitle = createElem('h3',{});
subtitle.innerHTML = 'Bot ' + index;
divForm.appendChild(subtitle);
divForm.appendChild( divForm.appendChild(
createLineSelect('Type:', createLineSelect('Type:',
[ {'value':'bot','text' : 'bot'}, [ {'value':'bot','text' : 'bot'},
{'value':'human','text' : 'human'} {'value':'human','text' : 'human'}
@ -160,31 +165,51 @@ function createPlayerForm(index){
"id": "randomOrNot" + index, "id": "randomOrNot" + index,
"onchange":"changeRandom('" + index + "', this.value);" "onchange":"changeRandom('" + index + "', this.value);"
} }
) )
); );
divForm.appendChild( divForm.appendChild(
createElemWithLabel( createElemWithLabel(
'input', 'input',
{"type":"text","value": "0","id":"posX" + index}, {"type":"text","value": "0"},
'X coord:' 'X coord:',
"posX" + index
) )
); );
divForm.appendChild( divForm.appendChild(
createElemWithLabel( createElemWithLabel(
'input', 'input',
{"type":"text","value": "0","id":"posY" + index}, {"type":"text","value": "0"},
'Y coord:' 'Y coord:',
"posY" + index
) )
); );
var but = createElem('input',
{ divForm.appendChild(createElemWithLabel(
'type':'button', 'input',
'value':'Add this player', {
'onclick':'createPlayerForm(\'' + (parseFloat(index) + 1) + '\');' 'type':'button',
} 'value':'Add this player',
); 'onclick':'createPlayerForm(\'' + (parseFloat(index) + 1) + '\');'
divForm.appendChild(but); },
container.appendChild(divForm); ''
)
);
container.appendChild(divForm);
//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
if( index > 1){
}
} }
@ -205,6 +230,9 @@ function createPlayerForm(index){
</script> </script>
</aside> </aside>
<aside>
<!-- <input type='button' value='Fight -->
</aside>
<article id="fightResult"> <article id="fightResult">
</article> </article>
</section> </section>