Créations d'image pour les actions - création de l'action condition - meilleur gestion des lignes entre les actions - Suppression de la page Tree (je l'ai regroupé avec RectangleNode) - Refonte complete sur la classe RectangleNode

Code/public/js/app.min.js

@@ -1 +1 @@
-const COLOR_ATTACK=16711680,COLOR_MOVE=255,WIDTH_WINDOW=$(document).width()-30,HEIGHT_WINDOW=$(document).height()-30,WIDTH_MAP=WIDTH_WINDOW<HEIGHT_WINDOW?.8*WIDTH_WINDOW:.8*HEIGHT_WINDOW,SPEED=2,LIFE=100,DAMAGE=40,SHIELD=100,RANGE=WIDTH_MAP/2;var config={type:Phaser.AUTO,width:WIDTH_WINDOW,height:HEIGHT_WINDOW,parent:"all",backgroundColor:"#35363A"},game=new Phaser.Game(config);game.scene.add("Boot",Boot),game.scene.add("Type",Type),game.scene.add("Game",new Game(game)),game.scene.start("Boot");
+const COLOR_ATTACK=16711680,COLOR_MOVE=255,COLOR_CONDITION=921102,WIDTH_WINDOW=$(document).width()-30,HEIGHT_WINDOW=$(document).height()-30,WIDTH_MAP=WIDTH_WINDOW<HEIGHT_WINDOW?.8*WIDTH_WINDOW:.8*HEIGHT_WINDOW,SPEED=2,LIFE=100,DAMAGE=40,SHIELD=100,RANGE=WIDTH_MAP/2;var config={type:Phaser.AUTO,width:WIDTH_WINDOW,height:HEIGHT_WINDOW,parent:"all",backgroundColor:"#35363A"},game=new Phaser.Game(config);game.scene.add("Boot",Boot),game.scene.add("Type",Type),game.scene.add("Game",new Game(game)),game.scene.start("Boot");

Code/src/js/Init.js

@@ -6,6 +6,7 @@ console.log(myself.height);
 
 const COLOR_ATTACK = 0xff0000;
 const COLOR_MOVE = 0x0000ff;
+const COLOR_CONDITION = 0x0e0e0e;
 const WIDTH_WINDOW = $(document).width() - 30;
 const HEIGHT_WINDOW = $(document).height() - 30;
 const WIDTH_MAP = WIDTH_WINDOW < HEIGHT_WINDOW ? WIDTH_WINDOW * 0.8 : HEIGHT_WINDOW * 0.8;

Code/src/js/classes/AttackRectangle.js

@@ -1,28 +0,0 @@
-class AttackRectangle extends Attack {
-    constructor(x, y, width, height, scene) {
-        super();
-        this.color = COLOR_ATTACK;
-        this.rect = new Phaser.GameObjects.Rectangle(scene, x, y, width, height, this.color);
-        this.line = scene.add.graphics();
-    }
-
-    getX() {
-        return this.rect.x;
-    }
-
-    addLine(x, y) {
-        this.xOrigin = x;
-        this.yOrigin = y;
-        this.updateLine();
-    }
-
-    updateLine() {
-        if (this.xLine !== this.rect.x || this.yLine !== this.rect.y) {
-            this.xLine = this.rect.x;
-            this.yLine = this.rect.y;
-            this.line.clear();
-            this.line.lineStyle(10, 0xffffff, 1);
-            this.line.lineBetween(this.xOrigin, this.yOrigin, this.rect.x, this.rect.y);
-        }
-    }
-}

Code/src/js/classes/Boot.js

@@ -33,6 +33,9 @@ class Boot extends Phaser.Scene {
         this.load.image('background', 'assets/background.png');
         this.load.image('bullet', 'assets/bullet.png');
         this.load.image('logoWaria', 'assets/logoWaria.png');
+        this.load.image('attackN','assets/nodes/attackNode.png');
+        this.load.image('moveN','assets/nodes/moveNode.png');
+        this.load.image('conditionN','assets/nodes/conditionNode.png');
     }
 
     create() {

Code/src/js/classes/Condition.js

@@ -49,6 +49,10 @@ class Condition {
         return false;
     }
 
+    clearNodes() {
+        this.lNode = [];
+    }
+
 
     moveToward(robot) {
         return robot.advanceToTarget();

Code/src/js/classes/Game.js

@@ -19,15 +19,29 @@ class Game extends Phaser.Scene {
         btn.on('pointerdown', () => this.clickPlay(btn));
         this.scene.launch('GamingBoard');
         this.scene.pause('GamingBoard');
-        this.tree = new Tree(WIDTH_WINDOW / 1.5, 100, this);
+
-        this.tree.addNode(new MoveRectangle(true, WIDTH_WINDOW/1.2, 400, 100, 100, this))
+
-        this.tree.addNode(new AttackRectangle(WIDTH_WINDOW/1.5, 400, 100, 100, this));
+        this.tree = new RectangleNode(WIDTH_WINDOW / 1.5, 100, this, 'waria');
+        this.tree.addRect(new RectangleNode(WIDTH_WINDOW / 1.2, 400, this, 'move', true))
+        this.tree.addRect(new RectangleNode(WIDTH_WINDOW / 1.5, 400, this, 'attack'));
+
+
+        let robot = new Robot(WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.9, WIDTH_MAP * 0.9, 0x6666ff, this.gm);
+        let condition = new RectangleNode(WIDTH_WINDOW / 1.7, 400, this, 'condition', robot, true, false, 0.5, 0);
+        condition.addRect(new RectangleNode(WIDTH_WINDOW / 1.2, 600, this, 'move', false));
+        condition.addRect(new RectangleNode(WIDTH_WINDOW / 1.5, 600, this, 'attack'))
+        this.tree.addRect(condition);
+
+        this.gm.addRobot(robot);
+        this.gm.addRobot(new Robot(WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.2, WIDTH_MAP * 0.1, 0xff33cc, this.gm));
+        this.gm.addRobot(new Robot(WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.9, 0xffffff, this.gm));
+
         this.input.on('drag', this.doDrag);
     }
 
     update(time, delta) {
         super.update(time, delta);
-        this.tree.updateLines();
+        this.tree.updateLine();
     }
 
     doDrag(pointer, target, dragX, dragY) {
@@ -45,8 +59,13 @@ class Game extends Phaser.Scene {
 
     resume() {
         const sortDesc = (a, b) => a.getX() - b.getX();
-        this.tree.lNode.sort(sortDesc);
+        this.tree.lRect.sort(sortDesc);
-        this.gm.modifyNodes(this.tree.lNode);
+        this.tree.lRect.forEach(function (element) {
+            if (element.lRect !== undefined) {
+                element.lRect.sort(sortDesc);
+            }
+        })
+        this.gm.modifyNodes(this.tree.getNodes());
         this.scene.resume('GamingBoard');
     }
 }

Code/src/js/classes/GamingBoard.js

@@ -1,6 +1,7 @@
 class GamingBoard extends Phaser.Scene {
     constructor() {
         super('GamingBoard');
+        this.listRobot = [];
     }
 
     preload() {
@@ -10,11 +11,6 @@ class GamingBoard extends Phaser.Scene {
     create() {
         this.add.image(0, 0, 'background').alpha = 0.1;
 
-        this.listRobot = [];
-        this.listRobot.push(new Robot(WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.9, WIDTH_MAP * 0.9, 0x6666ff, this));
-        this.listRobot.push(new Robot(WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.2, WIDTH_MAP * 0.1, 0xff33cc, this));
-        this.listRobot.push(new Robot(WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.9, 0xffffff, this));
-
         for (let i = 0; i < this.listRobot.length; i++) {
             this.chooseTarget(this.listRobot[i]);
         }
@@ -46,6 +42,10 @@ class GamingBoard extends Phaser.Scene {
     resume() {
     }
 
+    addRobot(robot){
+        this.listRobot.push(robot);
+    }
+
     modifyNodes(lNodes) {
         this.listRobot[0].cleanNodes();
         lNodes.forEach(element => this.listRobot[0].addNode(element));

Code/src/js/classes/MoveRectangle.js

@@ -1,28 +0,0 @@
-class MoveRectangle extends Move {
-    constructor(toward, x, y, width, height, scene) {
-        super(toward);
-        this.color = COLOR_MOVE;
-        this.rect = new Phaser.GameObjects.Rectangle(scene, x, y, width, height, this.color);
-        this.line = scene.add.graphics();
-    }
-
-    getX() {
-        return this.rect.x;
-    }
-
-    addLine(x, y) {
-        this.xOrigin = x;
-        this.yOrigin = y;
-        this.updateLine();
-    }
-
-    updateLine() {
-        if (this.xLine !== this.rect.x || this.yLine !== this.rect.y) {
-            this.xLine = this.rect.x;
-            this.yLine = this.rect.y;
-            this.line.clear();
-            this.line.lineStyle(10, 0xffffff, 1);
-            this.line.lineBetween(this.xOrigin, this.yOrigin, this.rect.x, this.rect.y);
-        }
-    }
-}

Code/src/js/classes/RectangleNode.js

@@ -0,0 +1,98 @@
+class RectangleNode {
+    constructor(x, y, scene, type, ...option) {
+        switch (type.toString().toLowerCase()) {
+            case 'attack':
+                this.rect = new Phaser.GameObjects.Image(scene, x, y, 'attackN');
+                this.node = new Attack();
+                this.canAddNode = false;
+                this.line = scene.add.graphics();
+                break;
+            case 'move' :
+                this.rect = new Phaser.GameObjects.Image(scene, x, y, 'moveN');
+                this.node = new Move(option[0]);
+                this.canAddNode = false;
+                this.line = scene.add.graphics();
+                break;
+            case 'condition':
+                this.rect = new Phaser.GameObjects.Image(scene, x, y, 'conditionN');
+                this.node = new Condition(option[0], option[1], option[2], option[3], option[4]);
+                this.canAddNode = true;
+                this.lRect = [];
+                this.scene = scene;
+                this.line = scene.add.graphics();
+                break;
+            case 'waria':
+                this.rect = new Phaser.GameObjects.Image(scene, x, y, 'logoWaria');
+                this.canAddNode = true;
+                this.lRect = [];
+                this.scene = scene;
+                this.scene.add.existing(this.rect);
+                break;
+            default:
+                console.log("Création d'un node echoué");
+                return;
+        }
+        if (type.toString().toLowerCase() !== 'waria') {
+        }
+        this.rect.setOrigin(0.5, 0);
+        this.rect.displayHeight = HEIGHT_WINDOW / 6;
+        this.rect.scaleX = this.rect.scaleY;
+    }
+
+    getX() {
+        return this.rect.x;
+    }
+
+    addRect(node) {
+        if (this.canAddNode === true) {
+            this.lRect.push(node);
+            this.addLine(node);
+            let rect = this.scene.add.existing(node.rect);
+            rect.setInteractive();
+            this.scene.input.setDraggable(rect);
+            if (this.node !== undefined) {
+                this.node.addNode(node.node);
+            }
+        }
+    }
+
+    setLine(x, y) {
+        this.xOrigin = x;
+        this.yOrigin = y;
+        this.updateLine(true);
+    }
+
+    updateLine(force) {
+        if ((force === true || this.xLine !== this.rect.x || this.yLine !== this.rect.y) && this.line !== undefined) {
+            this.xLine = this.rect.x;
+            this.yLine = this.rect.y;
+            this.line.clear();
+            this.line.lineStyle(10, 0xffffff, 1);
+            this.line.lineBetween(this.xOrigin, this.yOrigin, this.rect.x, this.rect.y + this.rect.displayHeight / 10);
+        }
+        if (this.canAddNode === true) {
+            this.lRect.forEach(node => this.addLine(node));
+        }
+    }
+
+    addLine(node) {
+        node.setLine(this.rect.x, this.rect.y + this.rect.displayHeight * 0.9);
+    }
+
+    getNodes() {
+        if (this.node === undefined) {
+            let lNodes = [];
+            this.lRect.forEach(function (element) {
+                if (element.node !== undefined) {
+                    if (element.lRect !== undefined) {
+                        element.node.clearNodes();
+                        element.lRect.forEach(rect => element.node.addNode(rect.node));
+                    }
+                    lNodes.push(element.node);
+                }
+            });
+            return lNodes;
+        }
+
+    }
+}

Code/src/js/classes/Tree.js

@@ -1,21 +0,0 @@
-class Tree {
-    constructor(x, y, scene) {
-        this.lNode = [];
-        this.scene = scene;
-        this.head = this.scene.add.image(x, y, 'logoWaria').setOrigin(0.5, 0.5);
-        this.head.displayHeight = HEIGHT_WINDOW / 4;
-        this.head.scaleX = this.head.scaleY;
-    }
-
-    addNode(node) {
-        this.lNode.push(node);
-        node.addLine(this.head.x, this.head.y + this.head.displayHeight / 2.2);
-        let rect = this.scene.add.existing(node.rect);
-        rect.setInteractive();
-        this.scene.input.setDraggable(rect);
-    }
-
-    updateLines() {
-        this.lNode.forEach(node => node.updateLine());
-    }
-}