133 lines
3.5 KiB
HTML
133 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
* {
|
|
margin : 0;
|
|
padding : 0;
|
|
overflow : hidden;
|
|
border : none;
|
|
outline : none;
|
|
}
|
|
.direction {
|
|
display : inline-block;
|
|
width : 150px;
|
|
}
|
|
</style>
|
|
<script src="./kinetic.js"></script>
|
|
<script src="./settings.js"></script>
|
|
<script src="./Abalone.class.js"></script>
|
|
<script src="./Player.class.js"></script>
|
|
<script src="./Board.class.js"></script>
|
|
<script src="./Slot.class.js"></script>
|
|
<script src="./Piece.class.js"></script>
|
|
<script src="./Move.class.js"></script>
|
|
<script>
|
|
window.addEventListener('load', function() {
|
|
|
|
if (typeof(Kinetic) == 'undefined' &&
|
|
typeof(Kinetic.Stage) == 'undefined') {
|
|
document.getElementById('container').innerHTML = 'Missing concrete library'
|
|
return;
|
|
}
|
|
|
|
Kinetic.angleDeg = false
|
|
|
|
var cont = document.getElementById('container')
|
|
|
|
var abalone = false;
|
|
function init() {
|
|
abalone = new Abalone(cont);
|
|
}
|
|
|
|
init();
|
|
|
|
/*
|
|
document.getElementById('start').addEventListener('click', function (e) {
|
|
abalone.start();
|
|
});
|
|
|
|
var directions = document.getElementsByClassName('direction');
|
|
Array.prototype.forEach.call(directions, function (element) {
|
|
element.addEventListener('click', function (e) {
|
|
let move = abalone.cur_move();
|
|
if (move) {
|
|
if (move.set_direction(element.id)) {
|
|
if (move.is_possible()) {
|
|
return abalone.next_turn();
|
|
}
|
|
else {
|
|
alert('Move not possible, try another one');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
*/
|
|
|
|
// Debug
|
|
/*
|
|
document.getElementById('reset').addEventListener('click', function (e) {
|
|
delete abalone;
|
|
init();
|
|
});
|
|
|
|
document.getElementById('dump_grid').addEventListener('click', function (e) {
|
|
console.log(JSON.stringify(abalone.get_positions()));
|
|
});
|
|
*/
|
|
})
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
</div>
|
|
<!--
|
|
<div id="buttons"
|
|
style="position: fixed;
|
|
bottom: 0;
|
|
width:'150px';
|
|
height:'150px'">
|
|
<button id="start">
|
|
START GAME
|
|
</button>
|
|
<button id="player1">
|
|
PLAYER1
|
|
</button>
|
|
<button id="player2">
|
|
PLAYER2
|
|
</button>
|
|
<select id="startpos" name="startpos">
|
|
<option value="standard">Standard</option>
|
|
<option value="margbelg">Marguerite Belge</option>
|
|
</select>
|
|
<br />
|
|
<br />
|
|
Direction :
|
|
<br />
|
|
<button class="direction" id="nw">North-West</button>
|
|
<button class="direction" id="ne">North-East</button>
|
|
<br />
|
|
<button class="direction" id="w">West</button>
|
|
<button class="direction" id="e">East</button>
|
|
<br />
|
|
<button class="direction" id="sw">South-West</button>
|
|
<button class="direction" id="se">South-East</button>
|
|
</div>
|
|
<div id="debug"
|
|
style="position: fixed;
|
|
top: 0;
|
|
right:150px;
|
|
width:150px;
|
|
height:150px">
|
|
Debug :
|
|
<button id="reset">Reset</button>
|
|
<br />
|
|
<button id="dump_grid">Dump Grid</button>
|
|
<br />
|
|
<button id=""></button>
|
|
</div>
|
|
-->
|
|
</body>
|
|
</html>
|