wip

Abalone.class.js

@@ -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.window = container.ownerDocument.defaultView;
-        this.layers = layers;
+        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,
+            width : this.stage.width(),
-            height : 500,
+            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
     }
 

Board.class.js

@@ -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 = this.stage.find('#board');
-        this.layer_pieces = layer_pieces;
+        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,
+            x : this.x,
-            y : settings.y,
+            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 x = this.x;
-        var y = settings.y;
+        var y = this.y;
-        var radius = settings.radius;
+        var radius = this.radius;
-        var r = settings.r;
+        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_] });
 

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);
+    abalone = new Abalone(cont);
-    for (var l in layers) {
-        stage.add(layers[l])
-    }
 }
 
 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>