Merge pull request #588 from thecodingmachine/customiseCharacters

Customise characters with admin console

front/src/Phaser/Entity/PlayerTextures.ts

@@ -18,6 +18,11 @@ export const PLAYER_RESOURCES: BodyResourceDescriptionListInterface = {
     "male6": {name: "male6", img: "resources/characters/pipoya/Male 17-2.png"},
     "male7": {name: "male7", img: "resources/characters/pipoya/Male 18-1.png"},
     "male8": {name: "male8", img: "resources/characters/pipoya/Male 16-4.png"},
+    "male9": {name: "male9", img: "resources/characters/pipoya/Male 07-2.png"},
+    "male10": {name: "male10", img: "resources/characters/pipoya/Male 05-3.png"},
+    "male11": {name: "male11", img: "resources/characters/pipoya/Teacher male 02.png"},
+    "male12": {name: "male12", img: "resources/characters/pipoya/su4 Student male 12.png"},
+
     "Female1": {name: "Female1", img: "resources/characters/pipoya/Female 01-1.png"},
     "Female2": {name: "Female2", img: "resources/characters/pipoya/Female 02-2.png"},
     "Female3": {name: "Female3", img: "resources/characters/pipoya/Female 03-4.png"},
@@ -25,7 +30,11 @@ export const PLAYER_RESOURCES: BodyResourceDescriptionListInterface = {
     "Female5": {name: "Female5", img: "resources/characters/pipoya/Female 10-3.png"},
     "Female6": {name: "Female6", img: "resources/characters/pipoya/Female 17-2.png"},
     "Female7": {name: "Female7", img: "resources/characters/pipoya/Female 18-1.png"},
-    "Female8": {name: "Female8", img: "resources/characters/pipoya/Female 16-4.png"}
+    "Female8": {name: "Female8", img: "resources/characters/pipoya/Female 16-4.png"},
+    "Female9": {name: "Female9", img: "resources/characters/pipoya/Female 07-2.png"},
+    "Female10": {name: "Female10", img: "resources/characters/pipoya/Female 05-3.png"},
+    "Female11": {name: "Female11", img: "resources/characters/pipoya/Teacher fmale 02.png"},
+    "Female12": {name: "Female12", img: "resources/characters/pipoya/su4 Student fmale 12.png"},
 };
 
 export const COLOR_RESOURCES: BodyResourceDescriptionListInterface = {

front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts

@@ -26,9 +26,9 @@ export const loadAllDefaultModels = (load: LoaderPlugin): BodyResourceDescriptio
 export const loadCustomTexture = (load: LoaderPlugin, texture: CharacterTexture) => {
     const name = 'customCharacterTexture'+texture.id;
     load.spritesheet(name,texture.url,{frameWidth: 32, frameHeight: 32});
+    return name;
 }
 
-
 export const lazyLoadPlayerCharacterTextures = (loadPlugin: LoaderPlugin, texturePlugin: TextureManager, texturekeys:Array<string|BodyResourceDescriptionInterface>): Promise<string[]> => {
     const promisesList:Promise<void>[] = [];
     texturekeys.forEach((textureKey: string|BodyResourceDescriptionInterface) => {

front/src/Phaser/Login/CustomizeScene.ts

@@ -60,6 +60,9 @@ export class CustomizeScene extends ResizableScene {
         const textures = localUser?.textures;
         if (textures) {
             for (const texture of textures) {
+                if(texture.level === -1){
+                    continue;
+                }
                 loadCustomTexture(this.load, texture);
                 const name = 'customCharacterTexture'+texture.id;
                 this.layers[texture.level].unshift({

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -6,7 +6,7 @@ import {EnableCameraSceneName} from "./EnableCameraScene";
 import {CustomizeSceneName} from "./CustomizeScene";
 import {ResizableScene} from "./ResizableScene";
 import {localUserStore} from "../../Connexion/LocalUserStore";
-import {loadAllDefaultModels} from "../Entity/PlayerTexturesLoadingManager";
+import {loadAllDefaultModels, loadCustomTexture} from "../Entity/PlayerTexturesLoadingManager";
 import {addLoader} from "../Components/Loader";
 import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
 
@@ -22,7 +22,7 @@ enum LoginTextures {
 }
 
 export class SelectCharacterScene extends ResizableScene {
-    private readonly nbCharactersPerRow = 4;
+    private readonly nbCharactersPerRow = 6;
     private textField!: TextField;
     private pressReturnField!: TextField;
     private logo!: Image;
@@ -51,12 +51,27 @@ export class SelectCharacterScene extends ResizableScene {
         this.playerModels = loadAllDefaultModels(this.load);
         this.load.image(LoginTextures.customizeButton, 'resources/objects/customize.png');
         this.load.image(LoginTextures.customizeButtonSelected, 'resources/objects/customize_selected.png');
+
+        const localUser = localUserStore.getLocalUser();
+        const textures = localUser?.textures;
+        if (textures) {
+            for (const texture of textures) {
+                if(texture.level !== -1){
+                    continue;
+                }
+                const name = loadCustomTexture(this.load, texture);
+                this.playerModels.push({name: name, img: texture.url});
+            }
+        }
     }
 
     create() {
         this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Select your character');
-
+        this.pressReturnField = new TextField(
-        this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 256, 'Press enter to start');
+            this,
+            this.game.renderer.width / 2,
+            90 + 32 * Math.ceil( this.playerModels.length / this.nbCharactersPerRow) + 40,
+            'Press enter to start');
 
         const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
 
@@ -70,25 +85,41 @@ export class SelectCharacterScene extends ResizableScene {
         });
 
         this.input.keyboard.on('keydown-RIGHT', () => {
-            if (this.selectedRectangleXPos < this.nbCharactersPerRow - 1) {
+            if(this.selectedRectangleYPos * this.nbCharactersPerRow + (this.selectedRectangleXPos + 2))
+            if (
+                this.selectedRectangleXPos < this.nbCharactersPerRow - 1
+                && ((this.selectedRectangleYPos * this.nbCharactersPerRow) + (this.selectedRectangleXPos + 1) + 1) <= this.playerModels.length
+            ) {
                 this.selectedRectangleXPos++;
             }
             this.updateSelectedPlayer();
         });
         this.input.keyboard.on('keydown-LEFT', () => {
-            if (this.selectedRectangleXPos > 0) {
+            if (
+                this.selectedRectangleXPos > 0
+                && ((this.selectedRectangleYPos * this.nbCharactersPerRow) + (this.selectedRectangleXPos - 1) + 1) <= this.playerModels.length
+            ) {
                 this.selectedRectangleXPos--;
             }
             this.updateSelectedPlayer();
         });
         this.input.keyboard.on('keydown-DOWN', () => {
-            if (this.selectedRectangleYPos < Math.ceil(this.playerModels.length / this.nbCharactersPerRow)) {
+            if (
+                this.selectedRectangleYPos < Math.ceil(this.playerModels.length / this.nbCharactersPerRow)
+                && (
+                    (((this.selectedRectangleYPos + 1) * this.nbCharactersPerRow) + this.selectedRectangleXPos + 1) <= this.playerModels.length // check if player isn't empty
+                    || (this.selectedRectangleYPos + 1) === Math.ceil(this.playerModels.length / this.nbCharactersPerRow) // check if is custom rectangle
+                )
+            ) {
                 this.selectedRectangleYPos++;
             }
             this.updateSelectedPlayer();
         });
         this.input.keyboard.on('keydown-UP', () => {
-            if (this.selectedRectangleYPos > 0) {
+            if (
+                this.selectedRectangleYPos > 0
+                && (((this.selectedRectangleYPos - 1) * this.nbCharactersPerRow) + this.selectedRectangleXPos + 1) <= this.playerModels.length
+            ) {
                 this.selectedRectangleYPos--;
             }
             this.updateSelectedPlayer();
@@ -148,10 +179,11 @@ export class SelectCharacterScene extends ResizableScene {
             this.players.push(player);
         }
 
-        this.customizeButton = new Image(this, this.game.renderer.width / 2, 90 + 32 * 4 + 6, LoginTextures.customizeButton);
+        const maxRow = Math.ceil( this.playerModels.length / this.nbCharactersPerRow);
+        this.customizeButton = new Image(this, this.game.renderer.width / 2, 90 + 32 * maxRow + 6, LoginTextures.customizeButton);
         this.customizeButton.setOrigin(0.5, 0.5);
         this.add.existing(this.customizeButton);
-        this.customizeButtonSelected = new Image(this, this.game.renderer.width / 2, 90 + 32 * 4 + 6, LoginTextures.customizeButtonSelected);
+        this.customizeButtonSelected = new Image(this, this.game.renderer.width / 2, 90 + 32 * maxRow + 6, LoginTextures.customizeButtonSelected);
         this.customizeButtonSelected.setOrigin(0.5, 0.5);
         this.customizeButtonSelected.setVisible(false);
         this.add.existing(this.customizeButtonSelected);