Ajout du sprite bouton "cancel" - Ajout de la scène ajouter Action lorsqu'on clique sur le plus "+" - Désactivation de toute les interactions avec la scène en arriere plan - Ajout du bouton cancel pour abandonner l'ajout et revenir à la page principale - Mise en forme de la sélection de l'action à rajouté (pour le moment ça n'execute aucune interface mais détecte bien sur quelle image je clique (Action, Mouvement, Condition), affiche la sélection dans las console)

Code/src/js/classes/Boot.js

@@ -34,13 +34,17 @@ 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.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('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.image('attack', 'assets/nodes/attack.png');
+        this.load.image('move', 'assets/nodes/move.png');
+        this.load.image('condition', 'assets/nodes/condition.png');
 
         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});
+        this.load.spritesheet('cancel', 'assets/buttons/cancel.png', {frameWidth: 550, frameHeight: 150});
     }
 
     create() {

Code/src/js/classes/Game.js

@@ -7,6 +7,8 @@ class Game extends Phaser.Scene {
     preload() {
         this.gm = new GamingBoard();
         this.game.scene.add('GamingBoard', this.gm);
+
+        this.game.scene.add('PlusNode', new PlusNode());
     }
 
     create() {
@@ -153,7 +155,12 @@ class Game extends Phaser.Scene {
     clickPlus() {
         console.log("PLUS");
 
+
+        this.scene.launch('PlusNode');
+
         this.changeFrame(this.plus, 0);
+
+        this.scene.pause('Game');
     }
 
 

Code/src/js/classes/PlusNode.js

@@ -0,0 +1,65 @@
+class PlusNode extends Phaser.Scene {
+    constructor() {
+        super('PlusNode');
+    }
+
+    create() {
+        this.add.rectangle(0, 0, WIDTH_WINDOW, HEIGHT_WINDOW, 0x000000).setOrigin(0, 0).setAlpha(0.5);
+        this.add.rectangle(0, HEIGHT_WINDOW / 2, WIDTH_WINDOW, HEIGHT_WINDOW / 2, 0x35363A).setOrigin(0, 0.5);
+        this.createNode();
+        this.createButton();
+    }
+
+    createNode() {
+        let x = WIDTH_WINDOW / 2;
+        let y = HEIGHT_WINDOW / 2;
+        let diffX = WIDTH_WINDOW / 4;
+        let diffY = HEIGHT_WINDOW / 10;
+        let sizeText = diffY;
+
+        let style = {font: sizeText.toString() + 'px stencil', fill: "#e2e2e2"};
+
+        this.add.text(x - diffX, y - diffY, "ATTACK", style).setOrigin(0.5, 0.5);
+        this.add.text(x, y - diffY, "MOVE", style).setOrigin(0.5, 0.5);
+        this.add.text(x + diffX, y - diffY, "CONDITION", style).setOrigin(0.5, 0.5);
+
+        this.add.sprite(x - diffX, y + diffY, 'attack').setOrigin(0.5, 0.5).setInteractive()
+            .on('pointerdown', () => this.click('attack'));
+        this.add.sprite(x, y + diffY, 'move').setOrigin(0.5, 0.5).setInteractive()
+            .on('pointerdown', () => this.click('move'));
+        this.add.sprite(x + diffX, y + diffY, 'condition').setOrigin(0.5, 0.5).setInteractive()
+            .on('pointerdown', () => this.click('condition'));
+
+
+    }
+
+    click(action) {
+        switch (action.toString()) {
+            case 'attack':
+
+                break;
+            case 'move':
+
+                break;
+
+            case 'condition':
+
+                break;
+        }
+        console.log(action.toString());
+    }
+
+    createButton() {
+        let x = WIDTH_WINDOW / 2;
+        let y = HEIGHT_WINDOW - 100;
+        this.cancelBtn = this.add.image(x, y, 'cancel').setOrigin(0.5, 0.5).setInteractive();
+        this.cancelBtn.on('pointerover', () => this.cancelBtn.setFrame(1));
+        this.cancelBtn.on('pointerout', () => this.cancelBtn.setFrame(0));
+        this.cancelBtn.on('pointerdown', () => this.cancel());
+    }
+
+    cancel() {
+        this.scene.resume('Game');
+        this.scene.stop('PlusNode');
+    }
+}