Ajout de la possibilité de changer de langue sur la page de démarrage du jeux - Ajout de la flèche de retour sur le jeu pour revenir aux choix des types de jeux - Création des catégories lors de la création d'une action dans le but de sélectionner les boutons : par exemple, on peut sélectionner les boutons avancer et ennemi. Alors que si le bouton avancer est sélectionné et qu'on clique sur reculer, le bouton avancer va se déselectionner car ils appartiennt à la meme categorie - Les boutons sélectionnés apparaissent avec une teinte jaune.

Code/public/js/AddNode.js

@@ -14,10 +14,12 @@ class AddNode extends Phaser.Scene {
     }
 
 
-    addButton(x, y, width, height, texture) {
+    addButton(x, y, width, height, texture, category = new Category()) {
         let btn = this.add.image(x, y, texture).setOrigin(0.5, 0.5).setInteractive();
         btn.on('pointerover', () => btn.setFrame(1));
         btn.on('pointerout', () => btn.setFrame(0));
+        btn.on('pointerdown', () => this.click(btn, category));
+
         btn.displayHeight = height;
         if (width === null) {
             btn.scaleX = btn.scaleY;
@@ -27,6 +29,14 @@ class AddNode extends Phaser.Scene {
         return btn;
     }
 
+    click(btn, category) {
+        if (btn.isTinted) {
+            category.remove(btn);
+        } else {
+            category.add(btn);
+        }
+    }
+
     addTitle(x, y, title) {
         let sizeText = HEIGHT_WINDOW / 12;
         let style = {font: sizeText.toString() + 'px stencil', fill: "#e2e2e2"};

Code/public/js/app.min.js

@@ -1 +1 @@
-function selectWord(e,a){switch(LANG){case"fr":return a;default:return e}}const LANG=navigator.language.substr(0,2).toLowerCase(),SHIELD_PER_SECOND=5,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");
+function selectWord(e,t){switch(LANG){case"fr":return t;default:return e}}var LANG=navigator.language.substr(0,2).toLowerCase();const SHIELD_PER_SECOND=5,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"};let father=new Phaser.Game(config);father.scene.add("Boot",new Boot(father)),father.scene.add("Type",Type),father.scene.add("Game",new Game(father)),father.scene.start("Boot");

Code/src/js/Init.js

@@ -7,7 +7,7 @@ function selectWord(en, fr) {
     }
 }
 
-const LANG = navigator.language.substr(0, 2).toLowerCase();
+var LANG = navigator.language.substr(0, 2).toLowerCase();
 const SHIELD_PER_SECOND = 5;
 const COLOR_ATTACK = 0xff0000;
 const COLOR_MOVE = 0x0000ff;
@@ -30,9 +30,9 @@ var config = {
     backgroundColor: '#35363A',
 };
 
-var game = new Phaser.Game(config);
+let father = new Phaser.Game(config);
 
-game.scene.add('Boot', Boot);
+father.scene.add('Boot', new Boot(father));
-game.scene.add('Type', Type);
+father.scene.add('Type', Type);
-game.scene.add('Game', new Game(game));
+father.scene.add('Game', new Game(father));
-game.scene.start('Boot');
+father.scene.start('Boot');

Code/src/js/classes/AddCondition.js

@@ -10,8 +10,9 @@ class AddCondition extends AddNode {
         console.log("CONDITION");
         super.addTitle(WIDTH_WINDOW / 2, HEIGHT_WINDOW / 16, selectWord("ADD NODE : CONDITION", "AJOUTER ACTION : CONDITION"));
         super.addTitle(WIDTH_WINDOW / 2, HEIGHT_WINDOW / (16 / 3), selectWord("WHO ?", "QUI ?"));
-        super.addButton(WIDTH_WINDOW / 3, HEIGHT_WINDOW / (16 / 5), null, HEIGHT_WINDOW / 8, 'enemyBot');
+        let c1 = new Category('target', true);
-        super.addButton(WIDTH_WINDOW / 1.5, HEIGHT_WINDOW / (16 / 5), null, HEIGHT_WINDOW / 8, 'myself');
+        super.addButton(WIDTH_WINDOW / 3, HEIGHT_WINDOW / (16 / 5), null, HEIGHT_WINDOW / 8, 'enemyBot', c1);
+        super.addButton(WIDTH_WINDOW / 1.5, HEIGHT_WINDOW / (16 / 5), null, HEIGHT_WINDOW / 8, 'myself', c1);
     }
 
 

Code/src/js/classes/AddMove.js

@@ -7,10 +7,11 @@ class AddMove extends AddNode {
     create() {
         console.log("MOVE");
         super.create();
+        let c1 = new Category('direction', true);
         super.addTitle(WIDTH_WINDOW / 2, HEIGHT_WINDOW / 16, selectWord("ADD NODE : MOVE", "AJOUTER ACTION : DEPLACEMENT"));
         super.addTitle(WIDTH_WINDOW / 4, HEIGHT_WINDOW / (16 / 3), selectWord("FLEE OR MOVE ?", "RECULER OU AVANCER ?"));
-        super.addButton(WIDTH_WINDOW / 6, HEIGHT_WINDOW / (16 / 5), null, HEIGHT_WINDOW / 8, 'fleeFrom');
+        super.addButton(WIDTH_WINDOW / 6, HEIGHT_WINDOW / (16 / 5), null, HEIGHT_WINDOW / 8, 'fleeFrom', c1);
-        super.addButton(WIDTH_WINDOW / 3, HEIGHT_WINDOW / (16 / 5), null, HEIGHT_WINDOW / 8, 'moveToward');
+        super.addButton(WIDTH_WINDOW / 3, HEIGHT_WINDOW / (16 / 5), null, HEIGHT_WINDOW / 8, 'moveToward', c1);
         super.addTitle(WIDTH_WINDOW / 4 * 3, HEIGHT_WINDOW / (16 / 3), selectWord("WHO ?", "QUI ?"));
         super.addButton(WIDTH_WINDOW / 4 * 3, HEIGHT_WINDOW / (16 / 5), null, HEIGHT_WINDOW / 8, 'enemyBot');
     }

Code/src/js/classes/Boot.js

@@ -1,6 +1,7 @@
 class Boot extends Phaser.Scene {
-    constructor() {
+    constructor(father) {
         super('Boot');
+        this.father = father;
     }
 
     preload() {
@@ -23,6 +24,9 @@ class Boot extends Phaser.Scene {
             progressBox.destroy();
         });
 
+        this.loadImage('en', 'flags/', true);
+        this.loadImage('fr', 'flags/', true);
+
         this.loadSprite('playLetter', 550, 150, 'buttons/');
         this.loadSprite('cancel', 550, 150, 'buttons/');
         this.loadSprite('add', 550, 150, 'buttons/');
@@ -31,12 +35,13 @@ class Boot extends Phaser.Scene {
         this.loadSprite('last', 269, 262, 'buttons/');
         this.loadSprite('team', 269, 262, 'buttons/');
         this.loadSprite('flag', 269, 262, 'buttons/');
-        
         this.loadSprite('map', 269, 262, 'buttons/');
+
         this.loadSprite('play', 100, 100, 'buttons/');
         this.loadSprite('bin', 100, 100, 'buttons/');
         this.loadSprite('plus', 100, 100, 'buttons/');
         this.loadSprite('pencil', 100, 100, 'buttons/');
+        this.loadSprite('back', 200, 200, 'buttons/');
 
         this.loadSprite('shortRange', 300, 150, 'buttons/');
         this.loadSprite('mediumRange', 300, 150, 'buttons/');
@@ -74,6 +79,31 @@ class Boot extends Phaser.Scene {
         btn.on('pointerout', () => btn.setFrame(0));
         btn.on('pointerover', () => btn.setFrame(1));
         btn.on('pointerdown', () => this.clickPlay(btn));
+
+        this.createFlags();
+    }
+
+    createFlags() {
+        this.diffXFlag = 0;
+        this.createFlag('fr');
+        this.createFlag('en');
+    }
+
+    createFlag(name) {
+        let flag = this.add.image(WIDTH_WINDOW - 10 - this.diffXFlag, 10, name).setOrigin(1, 0).setInteractive();
+        flag.displayHeight = 40;
+        flag.scaleX = flag.scaleY;
+        this.diffXFlag = this.diffXFlag + flag.displayWidth + 10;
+        flag.on('pointerdown', () => this.setLang(name));
+    }
+
+    setLang(lang) {
+        if (lang !== LANG) {
+            LANG = lang;
+            console.log('Set Lang : ' + lang);
+
+            this.scene.restart();
+        }
     }
 
     clickPlay(btn) {
@@ -82,14 +112,33 @@ class Boot extends Phaser.Scene {
         this.scene.start('Type');
     }
 
-    loadSprite(name, width, height, folder = '') {
+    loadSprite(name, width, height, folder = '', force = false) {
-        this.load.spritesheet(name, 'assets/' + LANG + '/' + folder + name + '.png', {
+        this.deleteLoad(name);
-            frameWidth: width,
+        if (force) {
-            frameHeight: height
+            this.load.spritesheet(name, 'assets/' + folder + name + '.png', {
-        });
+                frameWidth: width,
+                frameHeight: height
+            });
+        } else {
+            this.load.spritesheet(name, 'assets/' + LANG + '/' + folder + name + '.png', {
+                frameWidth: width,
+                frameHeight: height
+            });
+        }
+    }
+
+    loadImage(name, folder = '', force = false) {
+        this.deleteLoad(name);
+        if (force) {
+            this.load.image(name, 'assets/' + folder + name + '.png');
+        } else {
+            this.load.image(name, 'assets/' + LANG + '/' + folder + name + '.png');
+        }
     }
 
-    loadImage(name, folder = '') {
+    deleteLoad(name) {
-        this.load.image(name, 'assets/' + LANG + '/' + folder + name + '.png');
+        if (this.textures.exists(name)) {
+            this.textures.remove(name);
+        }
     }
 }

Code/src/js/classes/Category.js

@@ -0,0 +1,23 @@
+class Category {
+    constructor(name = 'undefined', single = true) {
+        this.name = name;
+        this.single = single;
+        this.lBtn = [];
+    }
+
+    add(btn) {
+        if (this.lBtn.length !== 0 && this.single) {
+            this.lBtn[0].clearTint();
+            this.lBtn = [];
+        }
+        this.lBtn.push(btn);
+        btn.tint = 0xEFD807;
+    }
+
+    remove(btn) {
+        if (this.lBtn.indexOf(btn) !== -1) {
+            this.lBtn.splice(this.lBtn.indexOf(btn), 1);
+        }
+        btn.clearTint();
+    }
+}

Code/src/js/classes/Game.js

@@ -1,12 +1,12 @@
 class Game extends Phaser.Scene {
-    constructor(game) {
+    constructor(father) {
         super('Game');
-        this.game = game;
+        this.father = father;
     }
 
     preload() {
         this.gm = new GamingBoard();
-        this.game.scene.add('GamingBoard', this.gm);
+        this.father.scene.add('GamingBoard', this.gm);
     }
 
     create() {
@@ -96,6 +96,7 @@ class Game extends Phaser.Scene {
         let diffX = (HEIGHT_WINDOW / 10);
         let width = HEIGHT_WINDOW / 15;
         let play = this.add.sprite(x, y, 'play').setOrigin(1, 0).setInteractive();
+        let back = this.add.sprite(10, 10, 'back').setOrigin(0, 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);
@@ -103,16 +104,19 @@ class Game extends Phaser.Scene {
 
         this.line = 0;
         play.displayHeight = play.displayWidth = width;
+        back.displayHeight = back.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(back);
         this.creatBtnOutAndOver(this.pencil);
         this.creatBtnOutAndOver(this.bin);
         this.creatBtnOutAndOver(this.plus);
 
         play.on('pointerdown', () => this.clickPlay(play));
+        back.on('pointerdown', () => this.clickBack());
         this.pencil.on('pointerdown', () => this.clickPencil());
         this.bin.on('pointerdown', () => this.clickBin());
         this.plus.on('pointerdown', () => this.clickPlus());
@@ -153,7 +157,7 @@ class Game extends Phaser.Scene {
     clickPlus() {
         console.log("PLUS");
 
-        this.game.scene.add('PlusNode', new PlusNode(this.game, this.selected));
+        this.father.scene.add('PlusNode', new PlusNode(this.father, this.selected));
 
         this.scene.launch('PlusNode');
 
@@ -162,5 +166,12 @@ class Game extends Phaser.Scene {
         this.scene.pause('Game');
     }
 
+    clickBack() {
+        console.log("BACK");
 
+        this.father.scene.stop('GamingBoard');
+        this.father.scene.remove('GamingBoard');
+        this.father.scene.stop('Game');
+        this.father.scene.start('Type');
+    }
 }

Code/src/js/classes/RectangleNode.js

@@ -81,7 +81,7 @@ class RectangleNode {
             this.rect.tint = 0xEFD807;
         }
         if (this.canAddNode === true) {
-            console.log("MAIS");
+            console.log("THIS CAN ADD NODE");
         }
     }