Ajout de plusieurs sprite d'action (Attaque, Mouvement, Condition) - Incorporation de ces sprites dans le code - gestion du sprite à sélectionner en foncion des paramètres - Modification du bouton play / pause et de son positionnement (maintenant il est en dessous à droite de la carte) - Quand on drag une action, ça met le jeu en pause

Code/src/js/classes/Boot.js

@@ -30,12 +30,13 @@ class Boot extends Phaser.Scene {
         this.load.spritesheet('btn_team', 'assets/btnTeam.png', {frameWidth: 269, frameHeight: 262});
         this.load.spritesheet('btn_flag', 'assets/btnFlag.png', {frameWidth: 269, frameHeight: 262});
         this.load.spritesheet('btn_map', 'assets/btnMap.png', {frameWidth: 269, frameHeight: 262});
+        this.load.spritesheet('play', 'assets/play.png', {frameWidth: 100, frameHeight: 100});
         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.spritesheet('attackN','assets/nodes/attackNode.png', {frameWidth: 180, frameHeight: 190});
-        this.load.image('moveN','assets/nodes/moveNode.png');
+        this.load.spritesheet('moveN','assets/nodes/moveNode.png', {frameWidth: 180, frameHeight: 190});
-        this.load.image('conditionN','assets/nodes/conditionNode.png');
+        this.load.spritesheet('conditionN','assets/nodes/conditionNode.png', {frameWidth: 180, frameHeight: 190});
     }
 
     create() {

Code/src/js/classes/Game.js

@@ -12,10 +12,12 @@ class Game extends Phaser.Scene {
     create() {
         //this.add.image(0,0,'background').alpha = 0.1;
 
-        let btn = this.add.sprite(WIDTH_WINDOW / 1.5, (HEIGHT_WINDOW / 3) * 2, 'btn_play').setOrigin(0.5, 0.5).setInteractive();
+        let btn = this.add.sprite(WIDTH_MAP + WIDTH_WINDOW / 10, WIDTH_MAP + HEIGHT_WINDOW / 10 + 5, 'play').setOrigin(1, 0).setInteractive();
-        //btn.setFrame(0);
+        this.line = 0;
-        btn.on('pointerout', () => btn.setFrame(0));
+        btn.displayHeight = HEIGHT_WINDOW / 15;
-        btn.on('pointerover', () => btn.setFrame(1));
+        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');
@@ -26,17 +28,18 @@ class Game extends Phaser.Scene {
         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 robot = new Robot(WIDTH_MAP * 0.1, WIDTH_MAP * 0.1, WIDTH_MAP * 0.9, WIDTH_MAP * 0.9, 0x6666ff, this.gm, 'myself');
-        let condition = new RectangleNode(WIDTH_WINDOW / 1.7, 400, this, 'condition', robot, true, false, 0.5, 0);
+        let condition = new RectangleNode(WIDTH_WINDOW / 1.7, 400, this, 'condition', robot, true, false, 1 / 3, 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.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, 0xffffff, 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) {
@@ -49,15 +52,27 @@ class Game extends Phaser.Scene {
         target.setY(dragY);
     }
 
+    pauseScene(btn) {
+        this.line = 0;
+        this.scene.pause('GamingBoard');
+        this.changeFrame(btn, 0);
+    }
+
     clickPlay(btn) {
-        btn.setFrame(2);
         if (this.scene.isPaused('GamingBoard'))
             this.resume();
         else
-            this.scene.pause('GamingBoard');
+            this.pauseScene();
+
+        this.changeFrame(btn, 1);
+    }
+
+    changeFrame(btn, bonus) {
+        btn.setFrame(this.line * 2 + bonus);
     }
 
     resume() {
+        this.line = 1;
         const sortDesc = (a, b) => a.getX() - b.getX();
         this.tree.lRect.sort(sortDesc);
         this.tree.lRect.forEach(function (element) {

Code/src/js/classes/RectangleNode.js

@@ -12,6 +12,11 @@ class RectangleNode {
                 this.node = new Move(option[0]);
                 this.canAddNode = false;
                 this.line = scene.add.graphics();
+                if (option[0] === true) {
+                    this.rect.setFrame(0);
+                } else {
+                    this.rect.setFrame(2);
+                }
                 break;
             case 'condition':
                 this.rect = new Phaser.GameObjects.Image(scene, x, y, 'conditionN');
@@ -20,6 +25,20 @@ class RectangleNode {
                 this.lRect = [];
                 this.scene = scene;
                 this.line = scene.add.graphics();
+                let line;
+                if (option[0].name.toString().toLowerCase() === 'myself') {
+                    line = 0;
+                } else {
+                    line = 1;
+                }
+                let shield = 0;
+                if (option[1] === true) { //shield
+                    shield = Math.floor(option[3] * 3);
+                }
+                if (option[2] === true) { //range
+
+                }
+                this.rect.setFrame(line * 4 + shield);
                 break;
             case 'waria':
                 this.rect = new Phaser.GameObjects.Image(scene, x, y, 'logoWaria');

Code/src/js/classes/Robot.js

@@ -1,5 +1,6 @@
 class Robot {
-    constructor(height, width, posX, posY, color, scene) {
+    constructor(height, width, posX, posY, color, scene, name = 'enemy') {
+        this.name = name;
         this.height = height;
         this.width = width;
         this.x = posX;