Ajout de plusieurs sprite de bouton (Poubelle, Edition, Plus) - Gestion des boutons - Gestion de l'action sélectionné - Quand on clique sur une action, celle-ci prend une teinte jaune et les boutons d'éditions apparaissent (Poubelle et Edition) - Le bouton d'ajout apparait uniquement lorsqu'on clique qur une action qui peut ajouter d'autre actions (Condition par exemple)

Code/public/js/app.min.js

@@ -1 +1 @@
-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");
+const COLOR_ATTACK=16711680,COLOR_MOVE=255,COLOR_CONDITION=921102,WIDTH_WINDOW=$(document).width()-20,HEIGHT_WINDOW=$(document).height()-20,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

@@ -7,8 +7,8 @@ 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_WINDOW = $(document).width() - 20;
+const HEIGHT_WINDOW = $(document).height() - 20;
 const WIDTH_MAP = WIDTH_WINDOW < HEIGHT_WINDOW ? WIDTH_WINDOW * 0.8 : HEIGHT_WINDOW * 0.8;
 const SPEED = 2;
 const LIFE = 100;

Code/src/js/classes/Boot.js

@@ -37,6 +37,10 @@ class Boot extends Phaser.Scene {
         this.load.spritesheet('attackN','assets/nodes/attackNode.png', {frameWidth: 180, frameHeight: 190});
         this.load.spritesheet('moveN','assets/nodes/moveNode.png', {frameWidth: 180, frameHeight: 190});
         this.load.spritesheet('conditionN','assets/nodes/conditionNode.png', {frameWidth: 180, frameHeight: 190});
+
+        this.load.spritesheet('bin', 'assets/buttons/bin.png', {frameWidth: 100, frameHeight: 100});
+        this.load.spritesheet('plus', 'assets/buttons/plus.png', {frameWidth: 100, frameHeight: 100});
+        this.load.spritesheet('pencil', 'assets/buttons/pencil.png', {frameWidth: 100, frameHeight: 100});
     }
 
     create() {

Code/src/js/classes/Game.js

@@ -10,15 +10,10 @@ class Game extends Phaser.Scene {
     }
 
     create() {
-        //this.add.image(0,0,'background').alpha = 0.1;
+        this.selected = null;
+
+        this.createButton();
 
-        let btn = this.add.sprite(WIDTH_MAP + WIDTH_WINDOW / 10, WIDTH_MAP + HEIGHT_WINDOW / 10 + 5, 'play').setOrigin(1, 0).setInteractive();
-        this.line = 0;
-        btn.displayHeight = HEIGHT_WINDOW / 15;
-        btn.scaleX = btn.scaleY;
-        btn.on('pointerout', () => this.changeFrame(btn, 0));
-        btn.on('pointerover', () => this.changeFrame(btn, 1));
-        btn.on('pointerdown', () => this.clickPlay(btn));
         this.scene.launch('GamingBoard');
         this.scene.pause('GamingBoard');
 
@@ -37,9 +32,6 @@ class Game extends Phaser.Scene {
         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, 0xff0000, this.gm));
         this.gm.addRobot(new Robot(WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.9, 0xff0000, this.gm));
-
-        this.input.on('drag', this.doDrag);
-        this.input.on('dragstart', () => this.pauseScene(btn));
     }
 
     update(time, delta) {
@@ -47,6 +39,28 @@ class Game extends Phaser.Scene {
         this.tree.updateLine();
     }
 
+
+    OK() {
+        this.pencil.setVisible(false);
+        this.bin.setVisible(false);
+        this.plus.setVisible(false);
+        if (this.selected != null) {
+            this.selected.deselect();
+        }
+        this.selected = this.tree.getSelected();
+
+        if (this.selected == null)
+            return;
+
+        if (this.selected !== this.tree) {
+            this.pencil.setVisible(true);
+            this.bin.setVisible(true);
+        }
+        if (this.selected.canAddNode) {
+            this.plus.setVisible(true);
+        }
+    }
+
     doDrag(pointer, target, dragX, dragY) {
         target.setX(dragX);
         target.setY(dragY);
@@ -58,14 +72,6 @@ class Game extends Phaser.Scene {
         this.changeFrame(btn, 0);
     }
 
-    clickPlay(btn) {
-        if (this.scene.isPaused('GamingBoard'))
-            this.resume();
-        else
-            this.pauseScene();
-
-        this.changeFrame(btn, 1);
-    }
 
     changeFrame(btn, bonus) {
         btn.setFrame(this.line * 2 + bonus);
@@ -83,4 +89,72 @@ class Game extends Phaser.Scene {
         this.gm.modifyNodes(this.tree.getNodes());
         this.scene.resume('GamingBoard');
     }
+
+    createButton() {
+        let x = WIDTH_MAP + WIDTH_WINDOW / 10;
+        let y = WIDTH_MAP + HEIGHT_WINDOW / 10 + 5;
+        let diffX = (HEIGHT_WINDOW / 10);
+        let width = HEIGHT_WINDOW / 15;
+        let play = this.add.sprite(x, y, 'play').setOrigin(1, 0).setInteractive();
+
+        this.pencil = this.add.sprite(x - diffX, y, 'pencil').setOrigin(1, 0).setInteractive().setVisible(false);
+        this.bin = this.add.sprite(x - diffX * 2, y, 'bin').setOrigin(1, 0).setInteractive().setVisible(false);
+        this.plus = this.add.sprite(x - diffX * 3, y, 'plus').setOrigin(1, 0).setInteractive().setVisible(false);
+
+        this.line = 0;
+        play.displayHeight = play.displayWidth = width;
+        this.pencil.displayHeight = this.pencil.displayWidth = width;
+        this.bin.displayHeight = this.bin.displayWidth = width;
+        this.plus.displayHeight = this.plus.displayWidth = width;
+
+        this.creatBtnOutAndOver(play);
+        this.creatBtnOutAndOver(this.pencil);
+        this.creatBtnOutAndOver(this.bin);
+        this.creatBtnOutAndOver(this.plus);
+
+        play.on('pointerdown', () => this.clickPlay(play));
+        this.pencil.on('pointerdown', () => this.clickPencil());
+        this.bin.on('pointerdown', () => this.clickBin());
+        this.plus.on('pointerdown', () => this.clickPlus());
+
+        this.input.on('pointerdown', () => this.OK());
+        this.input.on('drag', this.doDrag);
+        this.input.on('dragstart', () => this.pauseScene(play));
+    }
+
+    creatBtnOutAndOver(btn) {
+        btn.on('pointerout', () => this.changeFrame(btn, 0));
+        btn.on('pointerover', () => this.changeFrame(btn, 1));
+    }
+
+    clickPlay(btn) {
+        if (this.scene.isPaused('GamingBoard'))
+            this.resume();
+        else
+            this.pauseScene(btn);
+
+        this.changeFrame(btn, 1);
+    }
+
+    clickPencil() {
+        console.log("PENCIL");
+
+
+        this.changeFrame(this.pencil, 0);
+    }
+
+    clickBin() {
+        console.log("BIN");
+        this.tree.delete(this.selected);
+
+        this.changeFrame(this.bin, 0);
+    }
+
+    clickPlus() {
+        console.log("PLUS");
+
+        this.changeFrame(this.plus, 0);
+    }
+
+
 }

Code/src/js/classes/RectangleNode.js

@@ -41,7 +41,7 @@ class RectangleNode {
                 this.rect.setFrame(line * 4 + shield);
                 break;
             case 'waria':
-                this.rect = new Phaser.GameObjects.Image(scene, x, y, 'logoWaria');
+                this.rect = new Phaser.GameObjects.Image(scene, x, y, 'logoWaria').setInteractive();
                 this.canAddNode = true;
                 this.lRect = [];
                 this.scene = scene;
@@ -53,11 +53,42 @@ class RectangleNode {
         }
         if (type.toString().toLowerCase() !== 'waria') {
         }
+        this.rect.on('pointerdown', () => this.click());
         this.rect.setOrigin(0.5, 0);
         this.rect.displayHeight = HEIGHT_WINDOW / 6;
         this.rect.scaleX = this.rect.scaleY;
     }
 
+    getSelected() {
+        if (this.rect.isTinted) {
+            return this;
+        }
+        if (this.canAddNode) {
+            for (let i = 0; i < this.lRect.length; i++) {
+                let rep = this.lRect[i].getSelected();
+                if (rep != null) {
+                    return rep;
+                }
+            }
+        }
+        return null;
+    }
+
+    click() {
+        if (this.rect.isTinted) {
+            this.deselect();
+        } else {
+            this.rect.tint = 0xEFD807;
+        }
+        if (this.canAddNode === true) {
+            console.log("MAIS");
+        }
+    }
+
+    deselect() {
+        this.rect.clearTint();
+    }
+
     getX() {
         return this.rect.x;
     }
@@ -114,4 +145,28 @@ class RectangleNode {
         }
 
     }
+
+    destroy() {
+        this.line.destroy();
+        this.rect.destroy();
+        if (this.lRect !== undefined) {
+            this.lRect.forEach(rect => rect.destroy());
+        }
+    }
+
+    delete(rect) {
+        let id = this.lRect.indexOf(rect);
+        if (id === -1) {
+            for (let i = 0; i < this.lRect.length; i++) {
+                if (this.lRect[i].canAddNode)
+                    if (this.lRect[i].delete(rect))
+                        return true;
+            }
+        } else {
+            this.lRect.splice(id, 1);
+            rect.destroy();
+            return true;
+        }
+        return false;
+    }
 }