remove customize button if no body parts are available (#1952)

* remove customize button if no body parts are available

* remove unused position field from PlayerTexturesCollection interface

* removed unused label field

* fix LocalUser test

* little PlayerTextures class refactor

* Fixing linting

* Fixing missing Openapi packages in prod

* Fixing back build

Co-authored-by: Hanusiak Piotr <piotr@ltmp.co>
Co-authored-by: David Négrier <d.negrier@thecodingmachine.com>

.github/workflows/build-and-deploy.yml

@@ -81,7 +81,7 @@ jobs:
         working-directory: messages
 
       - name: Build proto messages
-        run: yarn run proto && yarn run copy-to-back
+        run: yarn run proto && yarn run copy-to-back && yarn run json-copy-to-back
         working-directory: messages
 
       # docker

docker-compose.e2e.yml

@@ -28,6 +28,8 @@ services:
       dockerfile: pusher/Dockerfile
     command: yarn run runprod
     volumes: []
+    environment:
+      ENABLE_OPENAPI_ENDPOINT: "false"
 
   back:
     image: 'wa-back-e2e'

front/src/Components/selectCharacter/SelectCharacterScene.svelte

@@ -2,6 +2,7 @@
     import type { Game } from "../../Phaser/Game/Game";
     import { SelectCharacterScene, SelectCharacterSceneName } from "../../Phaser/Login/SelectCharacterScene";
     import LL from "../../i18n/i18n-svelte";
+    import { customizeAvailableStore } from "../../Stores/SelectCharacterSceneStore";
 
     export let game: Game;
 
@@ -40,11 +41,13 @@
             class="selectCharacterSceneFormSubmit nes-btn is-primary"
             on:click|preventDefault={cameraScene}>{$LL.woka.selectWoka.continue()}</button
         >
+        {#if $customizeAvailableStore}
             <button
                 type="submit"
                 class="selectCharacterSceneFormCustomYourOwnSubmit nes-btn"
                 on:click|preventDefault={customizeScene}>{$LL.woka.selectWoka.customize()}</button
             >
+        {/if}
     </section>
 </form>
 

front/src/Connexion/ConnexionModels.ts

@@ -1,8 +1,6 @@
 import type { SignalData } from "simple-peer";
 import type { RoomConnection } from "./RoomConnection";
 import type { BodyResourceDescriptionInterface } from "../Phaser/Entity/PlayerTextures";
-import { PositionMessage_Direction } from "../Messages/ts-proto-generated/messages";
-import { CharacterLayer } from "../../../back/src/Model/Websocket/CharacterLayer";
 
 export interface PointInterface {
     x: number;

front/src/Connexion/LocalUser.ts

@@ -15,7 +15,14 @@ export function isUserNameValid(value: unknown): boolean {
 }
 
 export function areCharacterLayersValid(value: string[] | null): boolean {
-    if (!value || !value.length) return false;
+    if (!value || !value.length) {
+        return false;
+    }
+    for (const layerName of value) {
+        if (layerName.length === 0 || layerName === " ") {
+            return false;
+        }
+    }
     return true;
 }
 

front/src/Phaser/Entity/PlayerTextures.ts

@@ -6,7 +6,6 @@ export interface BodyResourceDescriptionListInterface {
 
 export interface BodyResourceDescriptionInterface {
     id: string;
-    label: string;
     img: string;
     level?: number;
 }
@@ -24,7 +23,7 @@ export const mapLayerToLevel = {
     accessory: 5,
 };
 
-enum PlayerTexturesKey {
+export enum PlayerTexturesKey {
     Accessory = "accessory",
     Body = "body",
     Clothes = "clothes",
@@ -43,7 +42,6 @@ interface PlayerTexturesCategory {
 
 interface PlayerTexturesCollection {
     name: string;
-    position: number;
     textures: PlayerTexturesRecord[];
 }
 
@@ -54,43 +52,69 @@ interface PlayerTexturesRecord {
 }
 
 export class PlayerTextures {
-    public static PLAYER_RESOURCES: BodyResourceDescriptionListInterface;
+    private PLAYER_RESOURCES: BodyResourceDescriptionListInterface = {};
-    public static COLOR_RESOURCES: BodyResourceDescriptionListInterface;
+    private COLOR_RESOURCES: BodyResourceDescriptionListInterface = {};
-    public static EYES_RESOURCES: BodyResourceDescriptionListInterface;
+    private EYES_RESOURCES: BodyResourceDescriptionListInterface = {};
-    public static HAIR_RESOURCES: BodyResourceDescriptionListInterface;
+    private HAIR_RESOURCES: BodyResourceDescriptionListInterface = {};
-    public static CLOTHES_RESOURCES: BodyResourceDescriptionListInterface;
+    private CLOTHES_RESOURCES: BodyResourceDescriptionListInterface = {};
-    public static HATS_RESOURCES: BodyResourceDescriptionListInterface;
+    private HATS_RESOURCES: BodyResourceDescriptionListInterface = {};
-    public static ACCESSORIES_RESOURCES: BodyResourceDescriptionListInterface;
+    private ACCESSORIES_RESOURCES: BodyResourceDescriptionListInterface = {};
-    public static LAYERS: BodyResourceDescriptionListInterface[];
+    private LAYERS: BodyResourceDescriptionListInterface[] = [];
 
     public loadPlayerTexturesMetadata(metadata: PlayerTexturesMetadata): void {
         this.mapTexturesMetadataIntoResources(metadata);
     }
 
-    private mapTexturesMetadataIntoResources(metadata: PlayerTexturesMetadata): void {
+    public getTexturesResources(key: PlayerTexturesKey): BodyResourceDescriptionListInterface {
-        PlayerTextures.PLAYER_RESOURCES = this.getMappedResources(metadata.woka);
+        switch (key) {
-        PlayerTextures.COLOR_RESOURCES = this.getMappedResources(metadata.body);
+            case PlayerTexturesKey.Accessory:
-        PlayerTextures.EYES_RESOURCES = this.getMappedResources(metadata.eyes);
+                return this.ACCESSORIES_RESOURCES;
-        PlayerTextures.HAIR_RESOURCES = this.getMappedResources(metadata.hair);
+            case PlayerTexturesKey.Body:
-        PlayerTextures.CLOTHES_RESOURCES = this.getMappedResources(metadata.clothes);
+                return this.COLOR_RESOURCES;
-        PlayerTextures.HATS_RESOURCES = this.getMappedResources(metadata.hat);
+            case PlayerTexturesKey.Clothes:
-        PlayerTextures.ACCESSORIES_RESOURCES = this.getMappedResources(metadata.accessory);
+                return this.CLOTHES_RESOURCES;
+            case PlayerTexturesKey.Eyes:
+                return this.EYES_RESOURCES;
+            case PlayerTexturesKey.Hair:
+                return this.HAIR_RESOURCES;
+            case PlayerTexturesKey.Hat:
+                return this.HATS_RESOURCES;
+            case PlayerTexturesKey.Woka:
+                return this.PLAYER_RESOURCES;
+        }
+    }
 
-        PlayerTextures.LAYERS = [
+    public getLayers(): BodyResourceDescriptionListInterface[] {
-            PlayerTextures.COLOR_RESOURCES,
+        return this.LAYERS;
-            PlayerTextures.EYES_RESOURCES,
+    }
-            PlayerTextures.HAIR_RESOURCES,
+
-            PlayerTextures.CLOTHES_RESOURCES,
+    private mapTexturesMetadataIntoResources(metadata: PlayerTexturesMetadata): void {
-            PlayerTextures.HATS_RESOURCES,
+        this.PLAYER_RESOURCES = this.getMappedResources(metadata.woka);
-            PlayerTextures.ACCESSORIES_RESOURCES,
+        this.COLOR_RESOURCES = this.getMappedResources(metadata.body);
+        this.EYES_RESOURCES = this.getMappedResources(metadata.eyes);
+        this.HAIR_RESOURCES = this.getMappedResources(metadata.hair);
+        this.CLOTHES_RESOURCES = this.getMappedResources(metadata.clothes);
+        this.HATS_RESOURCES = this.getMappedResources(metadata.hat);
+        this.ACCESSORIES_RESOURCES = this.getMappedResources(metadata.accessory);
+
+        this.LAYERS = [
+            this.COLOR_RESOURCES,
+            this.EYES_RESOURCES,
+            this.HAIR_RESOURCES,
+            this.CLOTHES_RESOURCES,
+            this.HATS_RESOURCES,
+            this.ACCESSORIES_RESOURCES,
         ];
     }
 
     private getMappedResources(category: PlayerTexturesCategory): BodyResourceDescriptionListInterface {
         const resources: BodyResourceDescriptionListInterface = {};
+        if (!category) {
+            return {};
+        }
         for (const collection of category.collections) {
             for (const texture of collection.textures) {
-                resources[texture.id] = { id: texture.id, label: texture.name, img: texture.url };
+                resources[texture.id] = { id: texture.id, img: texture.url };
             }
         }
         return resources;
@@ -98,5 +122,5 @@ export class PlayerTextures {
 }
 
 export const OBJECTS: BodyResourceDescriptionInterface[] = [
-    { id: "teleportation", label: "Teleport", img: "resources/objects/teleportation.png" },
+    { id: "teleportation", img: "resources/objects/teleportation.png" },
 ];

front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts

@@ -1,6 +1,6 @@
 import LoaderPlugin = Phaser.Loader.LoaderPlugin;
 import type { CharacterTexture } from "../../Connexion/LocalUser";
-import { BodyResourceDescriptionInterface, mapLayerToLevel, PlayerTextures } from "./PlayerTextures";
+import { BodyResourceDescriptionInterface, mapLayerToLevel, PlayerTextures, PlayerTexturesKey } from "./PlayerTextures";
 import CancelablePromise from "cancelable-promise";
 
 export interface FrameConfig {
@@ -8,9 +8,12 @@ export interface FrameConfig {
     frameHeight: number;
 }
 
-export const loadAllLayers = (load: LoaderPlugin): BodyResourceDescriptionInterface[][] => {
+export const loadAllLayers = (
+    load: LoaderPlugin,
+    playerTextures: PlayerTextures
+): BodyResourceDescriptionInterface[][] => {
     const returnArray: BodyResourceDescriptionInterface[][] = [];
-    PlayerTextures.LAYERS.forEach((layer) => {
+    playerTextures.getLayers().forEach((layer) => {
         const layerArray: BodyResourceDescriptionInterface[] = [];
         Object.values(layer).forEach((textureDescriptor) => {
             layerArray.push(textureDescriptor);
@@ -20,8 +23,11 @@ export const loadAllLayers = (load: LoaderPlugin): BodyResourceDescriptionInterf
     });
     return returnArray;
 };
-export const loadAllDefaultModels = (load: LoaderPlugin): BodyResourceDescriptionInterface[] => {
+export const loadAllDefaultModels = (
-    const returnArray = Object.values(PlayerTextures.PLAYER_RESOURCES);
+    load: LoaderPlugin,
+    playerTextures: PlayerTextures
+): BodyResourceDescriptionInterface[] => {
+    const returnArray = Object.values(playerTextures.getTexturesResources(PlayerTexturesKey.Woka));
     returnArray.forEach((playerResource: BodyResourceDescriptionInterface) => {
         load.spritesheet(playerResource.id, playerResource.img, { frameWidth: 32, frameHeight: 32 });
     });

front/src/Phaser/Login/AbstractCharacterScene.ts

@@ -1,12 +1,8 @@
 import { ResizableScene } from "./ResizableScene";
-import { localUserStore } from "../../Connexion/LocalUserStore";
+import { BodyResourceDescriptionInterface, PlayerTexturesKey } from "../Entity/PlayerTextures";
-import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
 import { loadWokaTexture } from "../Entity/PlayerTexturesLoadingManager";
-import type { CharacterTexture } from "../../Connexion/LocalUser";
 import type CancelablePromise from "cancelable-promise";
 import { PlayerTextures } from "../Entity/PlayerTextures";
-import { Loader } from "../Components/Loader";
-import { CustomizeSceneName } from "./CustomizeScene";
 
 export abstract class AbstractCharacterScene extends ResizableScene {
     protected playerTextures: PlayerTextures;
@@ -17,7 +13,7 @@ export abstract class AbstractCharacterScene extends ResizableScene {
     }
 
     loadCustomSceneSelectCharacters(): Promise<BodyResourceDescriptionInterface[]> {
-        const textures = PlayerTextures.PLAYER_RESOURCES;
+        const textures = this.playerTextures.getTexturesResources(PlayerTexturesKey.Woka);
         const promises: CancelablePromise<BodyResourceDescriptionInterface>[] = [];
         if (textures) {
             for (const texture of Object.values(textures)) {
@@ -32,7 +28,7 @@ export abstract class AbstractCharacterScene extends ResizableScene {
 
     loadSelectSceneCharacters(): Promise<BodyResourceDescriptionInterface[]> {
         const promises: CancelablePromise<BodyResourceDescriptionInterface>[] = [];
-        for (const textures of PlayerTextures.LAYERS) {
+        for (const textures of this.playerTextures.getLayers()) {
             for (const texture of Object.values(textures)) {
                 if (texture.level !== -1) {
                     continue;

front/src/Phaser/Login/CustomizeScene.ts

@@ -74,7 +74,7 @@ export class CustomizeScene extends AbstractCharacterScene {
                 })
                 .catch((e) => console.error(e));
 
-            this.layers = loadAllLayers(this.load);
+            this.layers = loadAllLayers(this.load, this.playerTextures);
             this.lazyloadingAttempt = false;
 
             //this function must stay at the end of preload function

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -15,6 +15,7 @@ import { waScaleManager } from "../Services/WaScaleManager";
 import { analyticsClient } from "../../Administration/AnalyticsClient";
 import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils";
 import { PUSHER_URL } from "../../Enum/EnvironmentVariable";
+import { customizeAvailableStore } from "../../Stores/SelectCharacterSceneStore";
 
 //todo: put this constants in a dedicated file
 export const SelectCharacterSceneName = "SelectCharacterScene";
@@ -69,7 +70,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
                     this.lazyloadingAttempt = true;
                 })
                 .catch((e) => console.error(e));
-            this.playerModels = loadAllDefaultModels(this.load);
+            this.playerModels = loadAllDefaultModels(this.load, this.playerTextures);
             this.lazyloadingAttempt = false;
 
             //this function must stay at the end of preload function
@@ -78,6 +79,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     }
 
     create() {
+        customizeAvailableStore.set(this.isCustomizationAvailable());
         selectCharacterSceneVisibleStore.set(true);
         this.events.addListener("wake", () => {
             waScaleManager.saveZoom();
@@ -295,4 +297,13 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         //move position of user
         this.moveUser();
     }
+
+    private isCustomizationAvailable(): boolean {
+        for (const layer of this.playerTextures.getLayers()) {
+            if (Object.keys(layer).length > 0) {
+                return true;
+            }
+        }
+        return false;
+    }
 }

front/src/Stores/SelectCharacterSceneStore.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const customizeAvailableStore = writable(false);

messages/JsonMessages/RegisterData.ts

@@ -13,7 +13,6 @@ export const isRegisterData = new tg.IsInterface()
         organizationMemberToken: tg.isNullable(tg.isString),
         mapUrlStart: tg.isString,
         userUuid: tg.isString,
-//        textures: tg.isArray(isCharacterTexture),
         authToken: tg.isString,
     })
     .withOptionalProperties({

pusher/package.json

@@ -4,9 +4,9 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "tsc": "tsc",
+    "tsc": "tsc && cp -rf ./data ./dist/",
     "dev": "ts-node-dev --respawn ./server.ts",
-    "prod": "tsc && node --max-old-space-size=4096 ./dist/server.js",
+    "prod": "tsc && cp -rf ./data ./dist/ && node --max-old-space-size=4096 ./dist/server.js",
     "runprod": "node --max-old-space-size=4096 ./dist/server.js",
     "profile": "tsc && node --prof ./dist/server.js",
     "test": "ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json",

pusher/src/Controller/SwaggerController.ts

@@ -1,12 +1,11 @@
-import swaggerJsdoc from "swagger-jsdoc";
 import { BaseHttpController } from "./BaseHttpController";
-// @ts-ignore
-import LiveDirectory from "live-directory";
 import * as fs from "fs";
 
 export class SwaggerController extends BaseHttpController {
     routes() {
         this.app.get("/openapi", (req, res) => {
+            // Let's load the module dynamically (it may not exist in prod because part of the -dev packages)
+            const swaggerJsdoc = require("swagger-jsdoc");
             const options = {
                 swaggerDefinition: {
                     openapi: "3.0.0",
@@ -22,6 +21,8 @@ export class SwaggerController extends BaseHttpController {
         });
 
         // Create a LiveDirectory instance to virtualize directory with our assets
+        // @ts-ignore
+        const LiveDirectory = require("live-directory");
         const LiveAssets = new LiveDirectory({
             path: __dirname + "/../../node_modules/swagger-ui-dist", // We want to provide the system path to the folder. Avoid using relative paths.
             keep: {