wip
This commit is contained in:
parent
690ccce89b
commit
34469cc926
|
|
@ -1,5 +1,5 @@
|
|||
class Abalone {
|
||||
constructor(layers) {
|
||||
constructor(container) {
|
||||
this.id = 0;
|
||||
this.secret = "lol";
|
||||
this.players = [];
|
||||
|
|
@ -8,15 +8,32 @@ class Abalone {
|
|||
// State : -1 => Not Started, 0 => Ended, 1 => Running
|
||||
this.state = -1;
|
||||
this.moves = [];
|
||||
this.board = false;
|
||||
this.layers = layers;
|
||||
this.window = container.ownerDocument.defaultView;
|
||||
console.log(this.window.innerWidth);
|
||||
console.log(this.window.innerHeight);
|
||||
this.stage = new Kinetic.Stage({
|
||||
width : this.window.innerWidth,
|
||||
height : this.window.innerHeight,
|
||||
container : container
|
||||
});
|
||||
this.layers = {
|
||||
background : new Kinetic.Layer({id:'background',name:'pieces'}),
|
||||
board : new Kinetic.Layer({id:'board',name:'pieces'}),
|
||||
pieces : new Kinetic.Layer({id:'pieces',name:'pieces'})
|
||||
};
|
||||
|
||||
this.stage.add(
|
||||
this.layers.background,
|
||||
this.layers.board,
|
||||
this.layers.pieces);
|
||||
|
||||
this.colors = settings.colors.background;
|
||||
this.pieces = [];
|
||||
this.texts = {};
|
||||
this.board = new Board(this.stage);
|
||||
|
||||
this.draw();
|
||||
|
||||
this.board = new Board(this.layers.board, this.layers.pieces);
|
||||
}
|
||||
|
||||
start() {
|
||||
|
|
@ -82,14 +99,16 @@ class Abalone {
|
|||
var rect = new Kinetic.Rect({
|
||||
x : 0,
|
||||
y : 0,
|
||||
width : 800,
|
||||
height : 500,
|
||||
width : this.stage.width(),
|
||||
height : this.stage.height(),
|
||||
stroke : this.colors.stroke,
|
||||
drawBorder : false,
|
||||
strokeEnabled : false,
|
||||
fill : this.colors.bg
|
||||
});
|
||||
|
||||
var text_cont = new Kinetic.Group({
|
||||
x : 800-160,
|
||||
x : this.stage.width()-160,
|
||||
y : 10,
|
||||
width : 150,
|
||||
height : 200,
|
||||
|
|
@ -192,7 +211,9 @@ class Abalone {
|
|||
|
||||
|
||||
this.layers.background.add(rect)
|
||||
this.layers.background.add(text_cont)
|
||||
this.layers.background.add(text_cont)
|
||||
|
||||
this.stage.draw();
|
||||
return rect
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
class Board {
|
||||
constructor(layer, layer_pieces) {
|
||||
constructor(stage) {
|
||||
this.stage = stage;
|
||||
this.grid = {
|
||||
A:{1:[],2:[],3:[],4:[],5:[]}, //Plateau de jeu
|
||||
B:{1:[],2:[],3:[],4:[],5:[],6:[]},
|
||||
|
|
@ -17,8 +18,12 @@ class Board {
|
|||
this.colors_p0 = settings.colors.piece_0;
|
||||
this.colors_p1 = settings.colors.piece_1;
|
||||
|
||||
this.layer = layer;
|
||||
this.layer_pieces = layer_pieces;
|
||||
this.layer = this.stage.find('#board');
|
||||
this.layer_pieces = this.stage.find('#pieces');
|
||||
|
||||
this.x = this.stage.width() / 2;
|
||||
this.y = this.stage.height() / 2;
|
||||
this.radius = this.stage.height() / 2;
|
||||
|
||||
this.draw();
|
||||
this.draw_slots();
|
||||
|
|
@ -28,12 +33,12 @@ class Board {
|
|||
console.log('Board draw');
|
||||
var hexagon = new Kinetic.RegularPolygon({
|
||||
sides : 6,
|
||||
radius : settings.radius,
|
||||
radius : this.radius,
|
||||
stroke : this.colors.stroke,
|
||||
strokeWidth : 5,
|
||||
fill : this.colors.bg,
|
||||
x : settings.x,
|
||||
y : settings.y,
|
||||
x : this.x,
|
||||
y : this.y
|
||||
})
|
||||
hexagon.rotate(Math.PI/6)
|
||||
|
||||
|
|
@ -44,10 +49,10 @@ class Board {
|
|||
draw_slots() {
|
||||
var grid = this.grid;
|
||||
var colors = this.colors_hole
|
||||
var x = settings.x;
|
||||
var y = settings.y;
|
||||
var radius = settings.radius;
|
||||
var r = settings.r;
|
||||
var x = this.x;
|
||||
var y = this.y;
|
||||
var radius = this.radius;
|
||||
var radius_slot = radius / 10 - radius / 50;
|
||||
var hor = ["A","B","C","D","E","F","G","H","I"];
|
||||
var dia = ["1","2","3","4","5","6","7","8","9"];
|
||||
var h = 4;
|
||||
|
|
@ -59,7 +64,7 @@ class Board {
|
|||
var slot = false;
|
||||
|
||||
// center circle
|
||||
slot = new Slot(x, y, r, 0, 0,
|
||||
slot = new Slot(x, y, radius_slot, 0, 0,
|
||||
{ x: hor[h], y: dia[d] });
|
||||
|
||||
grid[hor[h]][dia[d]].push(slot);
|
||||
|
|
@ -73,7 +78,8 @@ class Board {
|
|||
d = 4
|
||||
|
||||
for (var j = 0; j < 4; j++) {
|
||||
off = (j + 1) * (2 * r + (radius / 20));
|
||||
off = (j + 1) *
|
||||
(2 * radius_slot + (radius / 20));
|
||||
switch (i) {
|
||||
case 1: case 2:
|
||||
h--;
|
||||
|
|
@ -91,7 +97,7 @@ class Board {
|
|||
break;
|
||||
}
|
||||
|
||||
slot = new Slot(x, y, r, rad, off,
|
||||
slot = new Slot(x, y, radius_slot, rad, off,
|
||||
{ x: hor[h], y: dia[d] });
|
||||
|
||||
grid[hor[h]][dia[d]].push(slot);
|
||||
|
|
@ -131,7 +137,7 @@ class Board {
|
|||
break;
|
||||
}
|
||||
|
||||
slot = new Slot(x, y, r, radx,
|
||||
slot = new Slot(x, y, radius_slot, radx,
|
||||
offx * off / (j + 1),
|
||||
{ x: hor[h_], y: dia[d_] });
|
||||
|
||||
|
|
|
|||
33
index.html
33
index.html
|
|
@ -2,6 +2,13 @@
|
|||
<html>
|
||||
<head>
|
||||
<style>
|
||||
* {
|
||||
margin : 0;
|
||||
padding : 0;
|
||||
overflow : hidden;
|
||||
border : none;
|
||||
outline : none;
|
||||
}
|
||||
.direction {
|
||||
display : inline-block;
|
||||
width : 150px;
|
||||
|
|
@ -18,7 +25,6 @@
|
|||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
|
||||
console.log('Hello world!');
|
||||
if (typeof(Kinetic) == 'undefined' &&
|
||||
typeof(Kinetic.Stage) == 'undefined') {
|
||||
document.getElementById('container').innerHTML = 'Missing concrete library'
|
||||
|
|
@ -28,28 +34,15 @@ if (typeof(Kinetic) == 'undefined' &&
|
|||
Kinetic.angleDeg = false
|
||||
|
||||
var cont = document.getElementById('container')
|
||||
var stage= new Kinetic.Stage({
|
||||
width : 800,
|
||||
height : 800,
|
||||
container : cont
|
||||
})
|
||||
|
||||
var layers = {
|
||||
background : new Kinetic.Layer(),
|
||||
board : new Kinetic.Layer(),
|
||||
pieces : new Kinetic.Layer()
|
||||
}
|
||||
|
||||
var abalone = false;
|
||||
function init() {
|
||||
abalone = new Abalone(layers);
|
||||
for (var l in layers) {
|
||||
stage.add(layers[l])
|
||||
}
|
||||
abalone = new Abalone(cont);
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
/*
|
||||
document.getElementById('start').addEventListener('click', function (e) {
|
||||
abalone.start();
|
||||
});
|
||||
|
|
@ -70,6 +63,7 @@ Array.prototype.forEach.call(directions, function (element) {
|
|||
}
|
||||
});
|
||||
});
|
||||
*/
|
||||
|
||||
// Debug
|
||||
/*
|
||||
|
|
@ -77,17 +71,18 @@ 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;
|
||||
|
|
@ -103,7 +98,6 @@ document.getElementById('dump_grid').addEventListener('click', function (e) {
|
|||
PLAYER2
|
||||
</button>
|
||||
<select id="startpos" name="startpos">
|
||||
<option value="">---</option>
|
||||
<option value="standard">Standard</option>
|
||||
<option value="margbelg">Marguerite Belge</option>
|
||||
</select>
|
||||
|
|
@ -127,13 +121,12 @@ document.getElementById('dump_grid').addEventListener('click', function (e) {
|
|||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue