Gestion de la langue (Anglaise et Française) - Les images sont dupliqués dans deux répertoire différents (fr et en) dans le but de les modifier si besoin en fonction de la langue(principalement les boutons) - Création d'une fonction selectWord(en, fr) : elle retourne la valeur sélectionné - Par exemple si la langue est fr et qu'on appel selectWord("WHO ?", "QUI ?"), cela retourne "QUI ?". Inversement si la langue est en - Modification de nombreux boutons pour modifier la langue inscrite - Il manque les boutons des types de partie (TEAM,DUEL,FLAG ...) en fr.

Code/public/js/app.min.js

@@ -1 +1 @@
-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"},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,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");

Code/src/js/Init.js

@@ -1,9 +1,13 @@
-/*var EnemyBots = new Array(5);
-//var myself = new Robot(5, 5);
-EnemyBots.push(new Robot(1, 1));
-console.log(myself.height);
-*/
+function selectWord(en, fr) {
+    switch (LANG) {
+        case 'fr':
+            return fr;
+        default:
+            return en;
+    }
+}
 
+const LANG = navigator.language.substr(0, 2).toLowerCase();
 const SHIELD_PER_SECOND = 5;
 const COLOR_ATTACK = 0xff0000;
 const COLOR_MOVE = 0x0000ff;

Code/src/js/classes/AddAttack.js

@@ -7,8 +7,8 @@ class AddAttack extends AddNode {
     create() {
         console.log("ATTACK");
         super.create();
-        super.addTitle(WIDTH_WINDOW / 2, HEIGHT_WINDOW / 16, "ADD NODE : ATTACK");
-        super.addTitle(WIDTH_WINDOW / 2, HEIGHT_WINDOW / (16 / 3), "WHO ?");
+        super.addTitle(WIDTH_WINDOW / 2, HEIGHT_WINDOW / 16, selectWord("ADD NODE : ATTACK", "AJOUTER ACTION : ATTAQUE"));
+        super.addTitle(WIDTH_WINDOW / 2, HEIGHT_WINDOW / (16 / 3), selectWord("WHO ?", "QUI ?"));
         super.addButton(WIDTH_WINDOW / 2, HEIGHT_WINDOW / (16 / 5), null, HEIGHT_WINDOW / 8, 'enemyBot');
     }
 

Code/src/js/classes/AddCondition.js

@@ -8,8 +8,8 @@ class AddCondition extends AddNode {
     create() {
         super.create();
         console.log("CONDITION");
-        super.addTitle(WIDTH_WINDOW / 2, HEIGHT_WINDOW / 16, "ADD NODE : CONDITION");
-        super.addTitle(WIDTH_WINDOW / 2, HEIGHT_WINDOW / (16 / 3), "WHO ?");
+        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');
         super.addButton(WIDTH_WINDOW / 1.5, HEIGHT_WINDOW / (16 / 5), null, HEIGHT_WINDOW / 8, 'myself');
     }

Code/src/js/classes/AddMove.js

@@ -7,13 +7,11 @@ class AddMove extends AddNode {
     create() {
         console.log("MOVE");
         super.create();
-        super.addTitle(WIDTH_WINDOW / 2, HEIGHT_WINDOW / 16, "ADD NODE : MOVE");
-
-        super.addTitle(WIDTH_WINDOW / 4, HEIGHT_WINDOW / (16 / 3), "FLEE OR MOVE ?");
+        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 / 3, HEIGHT_WINDOW / (16 / 5), null, HEIGHT_WINDOW / 8, 'moveToward');
-
-        super.addTitle(WIDTH_WINDOW / 4 * 3, HEIGHT_WINDOW / (16 / 3), "WHO ?");
+        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

@@ -23,50 +23,53 @@ class Boot extends Phaser.Scene {
             progressBox.destroy();
         });
 
+        this.loadSprite('playLetter', 550, 150, 'buttons/');
+        this.loadSprite('cancel', 550, 150, 'buttons/');
+        this.loadSprite('add', 550, 150, 'buttons/');
 
-        this.load.spritesheet('btn_play', 'assets/btnPlay.png', {frameWidth: 650, frameHeight: 170});
-        this.load.spritesheet('btn_duel', 'assets/btnDuel.png', {frameWidth: 269, frameHeight: 262});
-        this.load.spritesheet('btn_last', 'assets/btnLast.png', {frameWidth: 269, frameHeight: 262});
-        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.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.loadSprite('duel', 269, 262, 'buttons/');
+        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.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});
-        this.load.spritesheet('add', 'assets/buttons/add.png', {frameWidth: 550, frameHeight: 150});
+        this.loadSprite('shortRange', 300, 150, 'buttons/');
+        this.loadSprite('mediumRange', 300, 150, 'buttons/');
+        this.loadSprite('longRange', 300, 150, 'buttons/');
 
-        this.load.spritesheet('shortRange', 'assets/buttons/shortRange.png', {frameWidth: 300, frameHeight: 150});
-        this.load.spritesheet('mediumRange', 'assets/buttons/mediumRange.png', {frameWidth: 300, frameHeight: 150});
-        this.load.spritesheet('longRange', 'assets/buttons/longRange.png', {frameWidth: 300, frameHeight: 150});
+        this.loadSprite('shield0', 300, 150, 'buttons/');
+        this.loadSprite('shield33', 300, 150, 'buttons/');
+        this.loadSprite('shield66', 300, 150, 'buttons/');
+        this.loadSprite('shield100', 300, 150, 'buttons/');
 
-        this.load.spritesheet('shield0', 'assets/buttons/shield0.png', {frameWidth: 300, frameHeight: 150});
-        this.load.spritesheet('shield33', 'assets/buttons/shield33.png', {frameWidth: 300, frameHeight: 150});
-        this.load.spritesheet('shield66', 'assets/buttons/shield66.png', {frameWidth: 300, frameHeight: 150});
-        this.load.spritesheet('shield100', 'assets/buttons/shield100.png', {frameWidth: 300, frameHeight: 150});
+        this.loadSprite('myself', 300, 150, 'buttons/');
+        this.loadSprite('enemyBot', 300, 150, 'buttons/');
 
-        this.load.spritesheet('myself', 'assets/buttons/myself.png', {frameWidth: 300, frameHeight: 150});
-        this.load.spritesheet('enemyBot', 'assets/buttons/enemyBot.png', {frameWidth: 300, frameHeight: 150});
+        this.loadSprite('moveToward', 300, 150, 'buttons/');
+        this.loadSprite('fleeFrom', 300, 150, 'buttons/');
 
-        this.load.spritesheet('moveToward', 'assets/buttons/moveToward.png', {frameWidth: 300, frameHeight: 150});
-        this.load.spritesheet('fleeFrom', 'assets/buttons/fleeFrom.png', {frameWidth: 300, frameHeight: 150});
+        this.loadSprite('attackNode', 180, 190, 'nodes/');
+        this.loadSprite('moveNode', 180, 190, 'nodes/');
+        this.loadSprite('conditionNode', 180, 190, 'nodes/');
+
+
+        this.loadImage('background');
+        this.loadImage('bullet');
+        this.loadImage('logoWaria');
+        this.loadImage('attack', 'nodes/');
+        this.loadImage('move', 'nodes/');
+        this.loadImage('condition', 'nodes/');
     }
 
     create() {
         let style = {font: '200px stencil', fill: "#e2e2e2"};
         this.add.text(WIDTH_WINDOW / 2, HEIGHT_WINDOW / 3, "WARIA", style).setOrigin(0.5, 0.5);
-        let btn = this.add.sprite(WIDTH_WINDOW / 2, (HEIGHT_WINDOW / 3) * 2, 'btn_play').setInteractive();
+        let btn = this.add.sprite(WIDTH_WINDOW / 2, (HEIGHT_WINDOW / 3) * 2, 'playLetter').setInteractive();
         //btn.setFrame(0);
         btn.on('pointerout', () => btn.setFrame(0));
         btn.on('pointerover', () => btn.setFrame(1));
@@ -78,4 +81,15 @@ class Boot extends Phaser.Scene {
         console.log("Play");
         this.scene.start('Type');
     }
+
+    loadSprite(name, width, height, folder = '') {
+        this.load.spritesheet(name, 'assets/' + LANG + '/' + folder + name + '.png', {
+            frameWidth: width,
+            frameHeight: height
+        });
+    }
+
+    loadImage(name, folder = '') {
+        this.load.image(name, 'assets/' + LANG + '/' + folder + name + '.png');
+    }
 }

Code/src/js/classes/PlusNode.js

@@ -15,22 +15,30 @@ class PlusNode extends Phaser.Scene {
     createNode() {
         let x = WIDTH_WINDOW / 2;
         let y = HEIGHT_WINDOW / 2;
-        let diffX = WIDTH_WINDOW / 4;
+        let diffX = WIDTH_WINDOW / 3;
         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.text(x - diffX, y - diffY, selectWord("ATTACK", "ATTAQUE"), style).setOrigin(0.5, 0.5);
+        this.add.text(x, y - diffY, selectWord("MOVE", "DEPLACEMENT"), style).setOrigin(0.5, 0.5);
+        this.add.text(x + diffX, y - diffY, selectWord("CONDITION", "CONDITION"), style).setOrigin(0.5, 0.5);
 
-        this.add.sprite(x - diffX, y + diffY, 'attack').setOrigin(0.5, 0.5).setInteractive()
+        let btn = 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()
+        btn.displayHeight = diffY * 2;
+        btn.scaleX = btn.scaleY;
+
+        btn = 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()
+        btn.displayHeight = diffY * 2;
+        btn.scaleX = btn.scaleY;
+
+        btn = this.add.sprite(x + diffX, y + diffY, 'condition').setOrigin(0.5, 0.5).setInteractive()
             .on('pointerdown', () => this.click('condition'));
+        btn.displayHeight = diffY * 2;
+        btn.scaleX = btn.scaleY;
 
 
     }
@@ -55,10 +63,12 @@ class PlusNode extends Phaser.Scene {
     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());
+        let cancelBtn = this.add.image(x, y, 'cancel').setOrigin(0.5, 0.5).setInteractive();
+        cancelBtn.on('pointerover', () => cancelBtn.setFrame(1));
+        cancelBtn.on('pointerout', () => cancelBtn.setFrame(0));
+        cancelBtn.on('pointerdown', () => this.cancel());
+        cancelBtn.displayHeight = HEIGHT_WINDOW / 10;
+        cancelBtn.scaleX = cancelBtn.scaleY;
     }
 
     cancel() {

Code/src/js/classes/RectangleNode.js

@@ -2,13 +2,13 @@ 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.rect = new Phaser.GameObjects.Image(scene, x, y, 'attackNode');
                 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.rect = new Phaser.GameObjects.Image(scene, x, y, 'moveNode');
                 this.node = new Move(option[0]);
                 this.canAddNode = false;
                 this.line = scene.add.graphics();
@@ -19,7 +19,7 @@ class RectangleNode {
                 }
                 break;
             case 'condition':
-                this.rect = new Phaser.GameObjects.Image(scene, x, y, 'conditionN');
+                this.rect = new Phaser.GameObjects.Image(scene, x, y, 'conditionNode');
                 this.node = new Condition(option[0], option[1], option[2], option[3], option[4]);
                 this.canAddNode = true;
                 this.lRect = [];

Code/src/js/classes/Type.js

@@ -10,19 +10,19 @@ class Type extends Phaser.Scene {
         let style = {font: '200px stencil', fill: "#e2e2e2"};
         this.add.text(WIDTH_WINDOW / 2, HEIGHT_WINDOW / 4, "WARIA", style).setOrigin(0.5, 1);
 
-        let btnDuel = this.add.sprite((WIDTH_WINDOW / 8) * 3, (HEIGHT_WINDOW / 4) * 2, 'btn_duel').setInteractive();
+        let btnDuel = this.add.sprite((WIDTH_WINDOW / 8) * 3, (HEIGHT_WINDOW / 4) * 2, 'duel').setInteractive();
         this.createbutton(btnDuel);
 
-        let btnLast = this.add.sprite((WIDTH_WINDOW / 8) * 5, (HEIGHT_WINDOW / 4) * 2, 'btn_last').setInteractive();
+        let btnLast = this.add.sprite((WIDTH_WINDOW / 8) * 5, (HEIGHT_WINDOW / 4) * 2, 'last').setInteractive();
         this.createbutton(btnLast);
 
-        let btnTeam = this.add.sprite((WIDTH_WINDOW / 8) * 2, (HEIGHT_WINDOW / 4) * 3, 'btn_team').setInteractive();
+        let btnTeam = this.add.sprite((WIDTH_WINDOW / 8) * 2, (HEIGHT_WINDOW / 4) * 3, 'team').setInteractive();
         this.createbutton(btnTeam);
 
-        let btnFlag = this.add.sprite((WIDTH_WINDOW / 8) * 4, (HEIGHT_WINDOW / 4) * 3, 'btn_flag').setInteractive();
+        let btnFlag = this.add.sprite((WIDTH_WINDOW / 8) * 4, (HEIGHT_WINDOW / 4) * 3, 'flag').setInteractive();
         this.createbutton(btnFlag);
 
-        let btnMap = this.add.sprite((WIDTH_WINDOW / 8) * 6, (HEIGHT_WINDOW / 4) * 3, 'btn_map').setInteractive();
+        let btnMap = this.add.sprite((WIDTH_WINDOW / 8) * 6, (HEIGHT_WINDOW / 4) * 3, 'map').setInteractive();
         this.createbutton(btnMap);
     }