From 438469ae246a2873b841c7f02685675d37f9be2b Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Wed, 6 Jan 2021 12:20:02 +0100 Subject: [PATCH 01/17] Verify URL in message --- front/src/WebRtc/DiscussionManager.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/front/src/WebRtc/DiscussionManager.ts b/front/src/WebRtc/DiscussionManager.ts index 583b1384..83dd06a3 100644 --- a/front/src/WebRtc/DiscussionManager.ts +++ b/front/src/WebRtc/DiscussionManager.ts @@ -141,6 +141,15 @@ export class DiscussionManager { this.nbpParticipants.innerText = `PARTICIPANTS (${nb})`; } + private urlify(text: string) { + let urlRegex = /(https?:\/\/[^\s]+)/g; + return text.replace(urlRegex, (url: string) => { + return '' + url + ''; + }) + // or alternatively + // return text.replace(urlRegex, '$1') + } + public addMessage(name: string, message: string, isMe: boolean = false) { const divMessage: HTMLDivElement = document.createElement('div'); divMessage.classList.add('message'); @@ -160,7 +169,7 @@ export class DiscussionManager { divMessage.appendChild(pMessage); const userMessage: HTMLParagraphElement = document.createElement('p'); - userMessage.innerText = message; + userMessage.innerText = this.urlify(message); userMessage.classList.add('body'); divMessage.appendChild(userMessage); From 4397ff7712a941f57c355adddbe6a891490c3f5d Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Wed, 6 Jan 2021 13:36:18 +0100 Subject: [PATCH 02/17] Update style and focus keyboard --- front/dist/resources/style/style.css | 5 +++++ front/src/WebRtc/DiscussionManager.ts | 18 +++++++++++------- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index fd81be1b..2e2c6c10 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -1072,17 +1072,22 @@ div.modal-report-user{ } .discussion .messages .message p.body{ + color: white; font-size: 16px; overflow: hidden; white-space: pre-wrap; word-wrap: break-word; } +.discussion .messages .message p.a{ + color: white; +} .discussion .send-message{ position: absolute; bottom: 45px; width: 220px; height: 26px; + margin-bottom: 10px; } .discussion .send-message input{ diff --git a/front/src/WebRtc/DiscussionManager.ts b/front/src/WebRtc/DiscussionManager.ts index 83dd06a3..5571bcd6 100644 --- a/front/src/WebRtc/DiscussionManager.ts +++ b/front/src/WebRtc/DiscussionManager.ts @@ -59,6 +59,16 @@ export class DiscussionManager { const sendDivMessage: HTMLDivElement = document.createElement('div'); sendDivMessage.classList.add('send-message'); const inputMessage: HTMLInputElement = document.createElement('input'); + inputMessage.onfocus = () => { + if(this.userInputManager) { + this.userInputManager.clearAllInputKeyboard(); + } + } + inputMessage.onblur = () => { + if(this.userInputManager) { + this.userInputManager.initKeyBoardEvent(); + } + } inputMessage.type = "text"; inputMessage.addEventListener('keyup', (event: KeyboardEvent) => { if (event.key === 'Enter') { @@ -169,7 +179,7 @@ export class DiscussionManager { divMessage.appendChild(pMessage); const userMessage: HTMLParagraphElement = document.createElement('p'); - userMessage.innerText = this.urlify(message); + userMessage.innerHTML = this.urlify(message); userMessage.classList.add('body'); divMessage.appendChild(userMessage); @@ -197,17 +207,11 @@ export class DiscussionManager { private showDiscussion(){ this.activeDiscussion = true; - if(this.userInputManager) { - this.userInputManager.clearAllInputKeyboard(); - } this.divDiscuss?.classList.add('active'); } private hideDiscussion(){ this.activeDiscussion = false; - if(this.userInputManager) { - this.userInputManager.initKeyBoardEvent(); - } this.divDiscuss?.classList.remove('active'); } From e13a5f3e645f9a808130c4029b54b00478bd71dc Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 6 Jan 2021 14:41:47 +0000 Subject: [PATCH 03/17] Bump systeminformation from 4.30.5 to 4.31.1 in /pusher Bumps [systeminformation](https://github.com/sebhildebrandt/systeminformation) from 4.30.5 to 4.31.1. - [Release notes](https://github.com/sebhildebrandt/systeminformation/releases) - [Changelog](https://github.com/sebhildebrandt/systeminformation/blob/master/CHANGELOG.md) - [Commits](https://github.com/sebhildebrandt/systeminformation/compare/v4.30.5...v4.31.1) Signed-off-by: dependabot[bot] --- pusher/package.json | 2 +- pusher/yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/pusher/package.json b/pusher/package.json index 03fd761d..09d6794a 100644 --- a/pusher/package.json +++ b/pusher/package.json @@ -52,7 +52,7 @@ "multer": "^1.4.2", "prom-client": "^12.0.0", "query-string": "^6.13.3", - "systeminformation": "^4.30.5", + "systeminformation": "^4.31.1", "ts-node-dev": "^1.0.0-pre.44", "typescript": "^3.8.3", "uWebSockets.js": "uNetworking/uWebSockets.js#v18.5.0", diff --git a/pusher/yarn.lock b/pusher/yarn.lock index f7de8093..501146cb 100644 --- a/pusher/yarn.lock +++ b/pusher/yarn.lock @@ -2723,10 +2723,10 @@ supports-color@^7.1.0: dependencies: has-flag "^4.0.0" -systeminformation@^4.30.5: - version "4.30.5" - resolved "https://registry.yarnpkg.com/systeminformation/-/systeminformation-4.30.5.tgz#2219c305c8be56a2cfa527a5519c45bc81d4916c" - integrity sha512-aYWs8yttl8ePpr6VOQ/Ak8cznuc9L/NQODVhbOKhInX73ZMLvV2BS86Mzr7LLfmUteVFR36CTDNQgiJgRqq+SQ== +systeminformation@^4.31.1: + version "4.31.1" + resolved "https://registry.yarnpkg.com/systeminformation/-/systeminformation-4.31.1.tgz#2e02c26987494d4b6a4d2d83138724593bc98d50" + integrity sha512-dVCDWNMN8ncMZo5vbMCA5dpAdMgzafK2ucuJy5LFmGtp1cG6farnPg8QNvoOSky9SkFoEX1Aw0XhcOFV6TnLYA== table@^5.2.3: version "5.4.6" From 73d7e798e9166b043c652329085ba6d63bf39f47 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Wed, 6 Jan 2021 17:08:13 +0100 Subject: [PATCH 04/17] Upgrade conversion When user send multi message, scroll on last message --- front/src/WebRtc/DiscussionManager.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/front/src/WebRtc/DiscussionManager.ts b/front/src/WebRtc/DiscussionManager.ts index 5571bcd6..4282603b 100644 --- a/front/src/WebRtc/DiscussionManager.ts +++ b/front/src/WebRtc/DiscussionManager.ts @@ -152,7 +152,7 @@ export class DiscussionManager { } private urlify(text: string) { - let urlRegex = /(https?:\/\/[^\s]+)/g; + const urlRegex = /(https?:\/\/[^\s]+)/g; return text.replace(urlRegex, (url: string) => { return '' + url + ''; }) @@ -182,8 +182,15 @@ export class DiscussionManager { userMessage.innerHTML = this.urlify(message); userMessage.classList.add('body'); divMessage.appendChild(userMessage); - this.divMessages?.appendChild(divMessage); + + //automatic scroll when there are new message + setTimeout(() => { + this.divMessages?.scroll({ + top: this.divMessages?.scrollTop + divMessage.getBoundingClientRect().y, + behavior: 'smooth' + }); + }, 200); } public removeParticipant(userId: number|string){ From 1659fa400fdd2bcf047c5a83e3f3b6599814a199 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Wed, 6 Jan 2021 17:09:17 +0100 Subject: [PATCH 05/17] Increase stability to force stopped screen sharing --- front/src/WebRtc/MediaManager.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index 4aa240cd..a85992ae 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/front/src/WebRtc/MediaManager.ts @@ -318,6 +318,8 @@ export class MediaManager { const localScreenCapture = this.localScreenCapture; this.getCamera().then((stream) => { this.triggerStoppedScreenSharingCallbacks(localScreenCapture); + }).catch(() => { //catch error get camera + this.triggerStoppedScreenSharingCallbacks(localScreenCapture); }); this.localScreenCapture = null; } From d4c7a20dfa60128eb4c16f6e0cc8e04e08d0209c Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Thu, 7 Jan 2021 09:42:11 +0100 Subject: [PATCH 06/17] Update feedback @moufmouf --- front/src/WebRtc/MediaManager.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index a85992ae..dcb7717e 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/front/src/WebRtc/MediaManager.ts @@ -318,7 +318,8 @@ export class MediaManager { const localScreenCapture = this.localScreenCapture; this.getCamera().then((stream) => { this.triggerStoppedScreenSharingCallbacks(localScreenCapture); - }).catch(() => { //catch error get camera + }).catch((err) => { //catch error get camera + console.error(err); this.triggerStoppedScreenSharingCallbacks(localScreenCapture); }); this.localScreenCapture = null; From 8c89b5e0b168f5a387d174ee788376711a30864f Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Thu, 7 Jan 2021 10:30:28 +0100 Subject: [PATCH 07/17] Permit to change style when getCamera was ready and permission accorded --- front/src/WebRtc/MediaManager.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index dcb7717e..18a15ab6 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/front/src/WebRtc/MediaManager.ts @@ -209,9 +209,10 @@ export class MediaManager { } public enableCamera() { - this.enableCameraStyle(); this.constraintsMedia.video = videoConstraint; + this.getCamera().then((stream: MediaStream) => { + this.enableCameraStyle(); this.triggerUpdatedLocalStreamCallbacks(stream); }); } @@ -228,10 +229,10 @@ export class MediaManager { } public enableMicrophone() { - this.enableMicrophoneStyle(); this.constraintsMedia.audio = true; this.getCamera().then((stream) => { + this.enableMicrophoneStyle(); this.triggerUpdatedLocalStreamCallbacks(stream); }); } From 018f01e8780b65a2c728999f100cb29f6d68bf0f Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Thu, 7 Jan 2021 11:02:00 +0100 Subject: [PATCH 08/17] Increase stability camera and microphone permission --- front/src/WebRtc/MediaManager.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index 18a15ab6..09378642 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/front/src/WebRtc/MediaManager.ts @@ -212,8 +212,16 @@ export class MediaManager { this.constraintsMedia.video = videoConstraint; this.getCamera().then((stream: MediaStream) => { + //TODO show error message tooltip upper of camera button + //TODO message : please check camera permission of your navigator + if(stream.getVideoTracks().length === 0) { + throw Error('Video track is empty, please check camera permission of your navigator') + } this.enableCameraStyle(); this.triggerUpdatedLocalStreamCallbacks(stream); + }).catch((err) => { + console.error(err); + this.disableCameraStyle(); }); } @@ -232,8 +240,16 @@ export class MediaManager { this.constraintsMedia.audio = true; this.getCamera().then((stream) => { + //TODO show error message tooltip upper of camera button + //TODO message : please check microphone permission of your navigator + if(stream.getAudioTracks().length === 0) { + throw Error('Audio track is empty, please check microphone permission of your navigator') + } this.enableMicrophoneStyle(); this.triggerUpdatedLocalStreamCallbacks(stream); + }).catch((err) => { + console.error(err); + this.disableMicrophoneStyle(); }); } From a88ad3cf4d48db66d7fcf8a4c9a3d0557cbab525 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Thu, 7 Jan 2021 12:13:12 +0100 Subject: [PATCH 09/17] Dont delete PeerSharingConnection because it will be resuse When user try to screen charing with same user, the event send is not a offer but renegociation. So could clear arry only when user out of circle. --- front/src/WebRtc/SimplePeer.ts | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts index 2d8e5162..08ae99fe 100644 --- a/front/src/WebRtc/SimplePeer.ts +++ b/front/src/WebRtc/SimplePeer.ts @@ -245,9 +245,11 @@ export class SimplePeer { // FIXME: I don't understand why "Closing connection with" message is displayed TWICE before "Nb users in peerConnectionArray" // I do understand the method closeConnection is called twice, but I don't understand how they manage to run in parallel. peer.destroy(); - if(!this.PeerScreenSharingConnectionArray.delete(userId)){ + + //Comment this peer connexion because if we delete and try to reshare screen, the RTCPeerConnection send renegociate event. This array will be remove when user left circle discussion + /*if(!this.PeerScreenSharingConnectionArray.delete(userId)){ throw 'Couln\'t delete peer screen sharing connexion'; - } + }*/ //console.log('Nb users in peerConnectionArray '+this.PeerConnectionArray.size); } catch (err) { console.error("closeConnection", err) @@ -301,11 +303,13 @@ export class SimplePeer { peer.signal(data.signal); } else { console.error('Could not find peer whose ID is "'+data.userId+'" in receiveWebrtcScreenSharingSignal'); + console.info('tentative to create new peer connexion'); + this.sendLocalScreenSharingStreamToUser(data.userId); } } catch (e) { console.error(`receiveWebrtcSignal => ${data.userId}`, e); - //force delete and recreate peer connexion - this.PeerScreenSharingConnectionArray.delete(data.userId); + //Comment this peer connexion because if we delete and try to reshare screen, the RTCPeerConnection send renegociate event. This array will be remove when user left circle discussion + //this.PeerScreenSharingConnectionArray.delete(data.userId); this.receiveWebrtcScreenSharingSignal(data); } } @@ -416,8 +420,8 @@ export class SimplePeer { if (!PeerConnectionScreenSharing.isReceivingScreenSharingStream()) { PeerConnectionScreenSharing.destroy(); - - this.PeerScreenSharingConnectionArray.delete(userId); + //Comment this peer connexion because if we delete and try to reshare screen, the RTCPeerConnection send renegociate event. This array will be remove when user left circle discussion + //this.PeerScreenSharingConnectionArray.delete(userId); } } } From e8f1b2d048c64fc11a855d68a9fbf1135fc0a343 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Thu, 7 Jan 2021 12:58:45 +0100 Subject: [PATCH 10/17] Add clear array peer connection sharing --- front/src/WebRtc/SimplePeer.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts index 08ae99fe..90d260ee 100644 --- a/front/src/WebRtc/SimplePeer.ts +++ b/front/src/WebRtc/SimplePeer.ts @@ -229,6 +229,14 @@ export class SimplePeer { } catch (err) { console.error("closeConnection", err) } + + //if user left discussion, clear array peer connection of sharing + if(this.Users.length === 0) { + for (const userId of this.PeerScreenSharingConnectionArray.keys()) { + this.closeScreenSharingConnection(userId); + this.PeerScreenSharingConnectionArray.delete(userId); + } + } } /** From 472fbb1de0718f423e180050807932aea99ea441 Mon Sep 17 00:00:00 2001 From: kharhamel Date: Thu, 7 Jan 2021 17:11:22 +0100 Subject: [PATCH 11/17] All player textures are now lazy-loaded --- front/src/Connexion/ConnexionModels.ts | 2 +- front/src/Connexion/RoomConnection.ts | 2 +- front/src/Phaser/Components/Loader.ts | 14 + front/src/Phaser/Entity/Character.ts | 39 +- front/src/Phaser/Entity/PlayerTextures.ts | 334 ++++++++++++++++ .../Entity/PlayerTexturesLoadingManager.ts | 71 ++++ front/src/Phaser/Entity/RemotePlayer.ts | 4 +- front/src/Phaser/Entity/body_character.ts | 355 ------------------ front/src/Phaser/Game/AddPlayerInterface.ts | 2 +- front/src/Phaser/Game/GameManager.ts | 5 +- front/src/Phaser/Game/GameScene.ts | 83 +--- front/src/Phaser/Login/CustomizeScene.ts | 14 +- front/src/Phaser/Login/LoginScene.ts | 10 - .../src/Phaser/Login/SelectCharacterScene.ts | 33 +- front/src/Phaser/Player/Player.ts | 4 +- 15 files changed, 470 insertions(+), 502 deletions(-) create mode 100644 front/src/Phaser/Components/Loader.ts create mode 100644 front/src/Phaser/Entity/PlayerTextures.ts create mode 100644 front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts delete mode 100644 front/src/Phaser/Entity/body_character.ts diff --git a/front/src/Connexion/ConnexionModels.ts b/front/src/Connexion/ConnexionModels.ts index 6b17fde8..2e6451f3 100644 --- a/front/src/Connexion/ConnexionModels.ts +++ b/front/src/Connexion/ConnexionModels.ts @@ -1,8 +1,8 @@ import {PlayerAnimationNames} from "../Phaser/Player/Animation"; import {UserSimplePeerInterface} from "../WebRtc/SimplePeer"; import {SignalData} from "simple-peer"; -import {BodyResourceDescriptionInterface} from "../Phaser/Entity/body_character"; import {RoomConnection} from "./RoomConnection"; +import {BodyResourceDescriptionInterface} from "../Phaser/Entity/PlayerTextures"; export enum EventMessage{ CONNECT = "connect", diff --git a/front/src/Connexion/RoomConnection.ts b/front/src/Connexion/RoomConnection.ts index beb7f9dd..bd330ad9 100644 --- a/front/src/Connexion/RoomConnection.ts +++ b/front/src/Connexion/RoomConnection.ts @@ -41,7 +41,7 @@ import { ViewportInterface, WebRtcDisconnectMessageInterface, WebRtcSignalReceivedMessageInterface, } from "./ConnexionModels"; -import {BodyResourceDescriptionInterface} from "../Phaser/Entity/body_character"; +import {BodyResourceDescriptionInterface} from "../Phaser/Entity/PlayerTextures"; const manualPingDelay = 20000; diff --git a/front/src/Phaser/Components/Loader.ts b/front/src/Phaser/Components/Loader.ts new file mode 100644 index 00000000..ab9c0d95 --- /dev/null +++ b/front/src/Phaser/Components/Loader.ts @@ -0,0 +1,14 @@ + +export const addLoader = (scene:Phaser.Scene): void => { + const loadingText = scene.add.text(scene.game.renderer.width / 2, 200, 'Loading'); + const progress = scene.add.graphics(); + scene.load.on('progress', (value: number) => { + progress.clear(); + progress.fillStyle(0xffffff, 1); + progress.fillRect(0, 270, 800 * value, 60); + }); + scene.load.on('complete', () => { + loadingText.destroy(); + progress.destroy(); + }); +} \ No newline at end of file diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts index 6df6e1a4..67e21f10 100644 --- a/front/src/Phaser/Entity/Character.ts +++ b/front/src/Phaser/Entity/Character.ts @@ -5,33 +5,6 @@ import Container = Phaser.GameObjects.Container; import Sprite = Phaser.GameObjects.Sprite; import {TextureError} from "../../Exception/TextureError"; -export interface PlayerResourceDescriptionInterface { - name: string, - img: string -} - -export const PLAYER_RESOURCES: Array = [ - {name: "male1", img: "resources/characters/pipoya/Male 01-1.png" /*, x: 32, y: 32*/}, - {name: "male2", img: "resources/characters/pipoya/Male 02-2.png"/*, x: 64, y: 32*/}, - {name: "male3", img: "resources/characters/pipoya/Male 03-4.png"/*, x: 96, y: 32*/}, - {name: "male4", img: "resources/characters/pipoya/Male 09-1.png"/*, x: 128, y: 32*/}, - - {name: "male5", img: "resources/characters/pipoya/Male 10-3.png"/*, x: 32, y: 64*/}, - {name: "male6", img: "resources/characters/pipoya/Male 17-2.png"/*, x: 64, y: 64*/}, - {name: "male7", img: "resources/characters/pipoya/Male 18-1.png"/*, x: 96, y: 64*/}, - {name: "male8", img: "resources/characters/pipoya/Male 16-4.png"/*, x: 128, y: 64*/}, - - {name: "Female1", img: "resources/characters/pipoya/Female 01-1.png"/*, x: 32, y: 96*/}, - {name: "Female2", img: "resources/characters/pipoya/Female 02-2.png"/*, x: 64, y: 96*/}, - {name: "Female3", img: "resources/characters/pipoya/Female 03-4.png"/*, x: 96, y: 96*/}, - {name: "Female4", img: "resources/characters/pipoya/Female 09-1.png"/*, x: 128, y: 96*/}, - - {name: "Female5", img: "resources/characters/pipoya/Female 10-3.png"/*, x: 32, y: 128*/}, - {name: "Female6", img: "resources/characters/pipoya/Female 17-2.png"/*, x: 64, y: 128*/}, - {name: "Female7", img: "resources/characters/pipoya/Female 18-1.png"/*, x: 96, y: 128*/}, - {name: "Female8", img: "resources/characters/pipoya/Female 16-4.png"/*, x: 128, y: 128*/} -]; - interface AnimationData { key: string; frameRate: number; @@ -48,11 +21,12 @@ export abstract class Character extends Container { public sprites: Map; private lastDirection: string = PlayerAnimationNames.WalkDown; //private teleportation: Sprite; + private invisible: boolean; constructor(scene: Phaser.Scene, x: number, y: number, - textures: string[], + texturesPromise: Promise, name: string, direction: string, moving: boolean, @@ -60,10 +34,15 @@ export abstract class Character extends Container { ) { super(scene, x, y/*, texture, frame*/); this.PlayerValue = name; + this.invisible = true this.sprites = new Map(); - this.addTextures(textures, frame); + //textures are inside a Promise in case they need to be lazyloaded before use. + texturesPromise.then((textures) => { + this.addTextures(textures, frame); + this.invisible = false + }) /*this.teleportation = new Sprite(scene, -20, -10, 'teleportation', 3); this.teleportation.setInteractive(); @@ -148,6 +127,7 @@ export abstract class Character extends Container { } protected playAnimation(direction : string, moving: boolean): void { + if (this.invisible) return; for (const [texture, sprite] of this.sprites.entries()) { if (!sprite.anims) { console.error('ANIMS IS NOT DEFINED!!!'); @@ -190,7 +170,6 @@ export abstract class Character extends Container { this.playAnimation(PlayerAnimationNames.WalkLeft, true); } - //update depth user this.setDepth(this.y); } diff --git a/front/src/Phaser/Entity/PlayerTextures.ts b/front/src/Phaser/Entity/PlayerTextures.ts new file mode 100644 index 00000000..6d0f99c0 --- /dev/null +++ b/front/src/Phaser/Entity/PlayerTextures.ts @@ -0,0 +1,334 @@ +//The list of all the player textures, both the default models and the partial textures used for customization + +export interface BodyResourceDescriptionListInterface { + [key: string]: BodyResourceDescriptionInterface +} + +export interface BodyResourceDescriptionInterface { + name: string, + img: string +} + +export const PLAYER_RESOURCES: BodyResourceDescriptionListInterface = { + "male1": {name: "male1", img: "resources/characters/pipoya/Male 01-1.png"}, + "male2": {name: "male2", img: "resources/characters/pipoya/Male 02-2.png"}, + "male3": {name: "male3", img: "resources/characters/pipoya/Male 03-4.png"}, + "male4": {name: "male4", img: "resources/characters/pipoya/Male 09-1.png"}, + "male5": {name: "male5", img: "resources/characters/pipoya/Male 10-3.png"}, + "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"}, + "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"}, + "Female4": {name: "Female4", img: "resources/characters/pipoya/Female 09-1.png"}, + "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"} +}; + +export const COLOR_RESOURCES: BodyResourceDescriptionListInterface = { + "color_1": {name: "color_1", img: "resources/customisation/character_color/character_color0.png"}, + "color_2": {name: "color_2", img: "resources/customisation/character_color/character_color1.png"}, + "color_3": {name: "color_3", img: "resources/customisation/character_color/character_color2.png"}, + "color_4": {name: "color_4", img: "resources/customisation/character_color/character_color3.png"}, + "color_5": {name: "color_5", img: "resources/customisation/character_color/character_color4.png"}, + "color_6": {name: "color_6", img: "resources/customisation/character_color/character_color5.png"}, + "color_7": {name: "color_7", img: "resources/customisation/character_color/character_color6.png"}, + "color_8": {name: "color_8", img: "resources/customisation/character_color/character_color7.png"}, + "color_9": {name: "color_9", img: "resources/customisation/character_color/character_color8.png"}, + "color_10": {name: "color_10", img: "resources/customisation/character_color/character_color9.png"}, + "color_11": {name: "color_11", img: "resources/customisation/character_color/character_color10.png"}, + "color_12": {name: "color_12", img: "resources/customisation/character_color/character_color11.png"}, + "color_13": {name: "color_13", img: "resources/customisation/character_color/character_color12.png"}, + "color_14": {name: "color_14", img: "resources/customisation/character_color/character_color13.png"}, + "color_15": {name: "color_15", img: "resources/customisation/character_color/character_color14.png"}, + "color_16": {name: "color_16", img: "resources/customisation/character_color/character_color15.png"}, + "color_17": {name: "color_17", img: "resources/customisation/character_color/character_color16.png"}, + "color_18": {name: "color_18", img: "resources/customisation/character_color/character_color17.png"}, + "color_19": {name: "color_19", img: "resources/customisation/character_color/character_color18.png"}, + "color_20": {name: "color_20", img: "resources/customisation/character_color/character_color19.png"}, + "color_21": {name: "color_21", img: "resources/customisation/character_color/character_color20.png"}, + "color_22": {name: "color_22", img: "resources/customisation/character_color/character_color21.png"}, + "color_23": {name: "color_23", img: "resources/customisation/character_color/character_color22.png"}, + "color_24": {name: "color_24", img: "resources/customisation/character_color/character_color23.png"}, + "color_25": {name: "color_25", img: "resources/customisation/character_color/character_color24.png"}, + "color_26": {name: "color_26", img: "resources/customisation/character_color/character_color25.png"}, + "color_27": {name: "color_27", img: "resources/customisation/character_color/character_color26.png"}, + "color_28": {name: "color_28", img: "resources/customisation/character_color/character_color27.png"}, + "color_29": {name: "color_29", img: "resources/customisation/character_color/character_color28.png"}, + "color_30": {name: "color_30", img: "resources/customisation/character_color/character_color29.png"}, + "color_31": {name: "color_31", img: "resources/customisation/character_color/character_color30.png"}, + "color_32": {name: "color_32", img: "resources/customisation/character_color/character_color31.png"}, + "color_33": {name: "color_33", img: "resources/customisation/character_color/character_color32.png"} +}; + +export const EYES_RESOURCES: BodyResourceDescriptionListInterface = { + "eyes_1": {name: "eyes_1", img: "resources/customisation/character_eyes/character_eyes1.png"}, + "eyes_2": {name: "eyes_2", img: "resources/customisation/character_eyes/character_eyes2.png"}, + "eyes_3": {name: "eyes_3", img: "resources/customisation/character_eyes/character_eyes3.png"}, + "eyes_4": {name: "eyes_4", img: "resources/customisation/character_eyes/character_eyes4.png"}, + "eyes_5": {name: "eyes_5", img: "resources/customisation/character_eyes/character_eyes5.png"}, + "eyes_6": {name: "eyes_6", img: "resources/customisation/character_eyes/character_eyes6.png"}, + "eyes_7": {name: "eyes_7", img: "resources/customisation/character_eyes/character_eyes7.png"}, + "eyes_8": {name: "eyes_8", img: "resources/customisation/character_eyes/character_eyes8.png"}, + "eyes_9": {name: "eyes_9", img: "resources/customisation/character_eyes/character_eyes9.png"}, + "eyes_10": {name: "eyes_10", img: "resources/customisation/character_eyes/character_eyes10.png"}, + "eyes_11": {name: "eyes_11", img: "resources/customisation/character_eyes/character_eyes11.png"}, + "eyes_12": {name: "eyes_12", img: "resources/customisation/character_eyes/character_eyes12.png"}, + "eyes_13": {name: "eyes_13", img: "resources/customisation/character_eyes/character_eyes13.png"}, + "eyes_14": {name: "eyes_14", img: "resources/customisation/character_eyes/character_eyes14.png"}, + "eyes_15": {name: "eyes_15", img: "resources/customisation/character_eyes/character_eyes15.png"}, + "eyes_16": {name: "eyes_16", img: "resources/customisation/character_eyes/character_eyes16.png"}, + "eyes_17": {name: "eyes_17", img: "resources/customisation/character_eyes/character_eyes17.png"}, + "eyes_18": {name: "eyes_18", img: "resources/customisation/character_eyes/character_eyes18.png"}, + "eyes_19": {name: "eyes_19", img: "resources/customisation/character_eyes/character_eyes19.png"}, + "eyes_20": {name: "eyes_20", img: "resources/customisation/character_eyes/character_eyes20.png"}, + "eyes_21": {name: "eyes_21", img: "resources/customisation/character_eyes/character_eyes21.png"}, + "eyes_22": {name: "eyes_22", img: "resources/customisation/character_eyes/character_eyes22.png"}, + "eyes_23": {name: "eyes_23", img: "resources/customisation/character_eyes/character_eyes23.png"}, + "eyes_24": {name: "eyes_24", img: "resources/customisation/character_eyes/character_eyes24.png"}, + "eyes_25": {name: "eyes_25", img: "resources/customisation/character_eyes/character_eyes25.png"}, + "eyes_26": {name: "eyes_26", img: "resources/customisation/character_eyes/character_eyes26.png"}, + "eyes_27": {name: "eyes_27", img: "resources/customisation/character_eyes/character_eyes27.png"}, + "eyes_28": {name: "eyes_28", img: "resources/customisation/character_eyes/character_eyes28.png"}, + "eyes_29": {name: "eyes_29", img: "resources/customisation/character_eyes/character_eyes29.png"}, + "eyes_30": {name: "eyes_30", img: "resources/customisation/character_eyes/character_eyes30.png"} + +}; + +export const HAIR_RESOURCES: BodyResourceDescriptionListInterface = { + "hair_1": {name:"hair_1", img: "resources/customisation/character_hairs/character_hairs0.png"}, + "hair_2": {name:"hair_2", img: "resources/customisation/character_hairs/character_hairs1.png"}, + "hair_3": {name:"hair_3", img: "resources/customisation/character_hairs/character_hairs2.png"}, + "hair_4": {name:"hair_4", img: "resources/customisation/character_hairs/character_hairs3.png"}, + "hair_5": {name:"hair_5", img: "resources/customisation/character_hairs/character_hairs4.png"}, + "hair_6": {name:"hair_6", img: "resources/customisation/character_hairs/character_hairs5.png"}, + "hair_7": {name:"hair_7", img: "resources/customisation/character_hairs/character_hairs6.png"}, + "hair_8": {name:"hair_8", img: "resources/customisation/character_hairs/character_hairs7.png"}, + "hair_9": {name:"hair_9", img: "resources/customisation/character_hairs/character_hairs8.png"}, + "hair_10": {name:"hair_10",img: "resources/customisation/character_hairs/character_hairs9.png"}, + "hair_11": {name:"hair_11",img: "resources/customisation/character_hairs/character_hairs10.png"}, + "hair_12": {name:"hair_12",img: "resources/customisation/character_hairs/character_hairs11.png"}, + "hair_13": {name:"hair_13",img: "resources/customisation/character_hairs/character_hairs12.png"}, + "hair_14": {name:"hair_14",img: "resources/customisation/character_hairs/character_hairs13.png"}, + "hair_15": {name:"hair_15",img: "resources/customisation/character_hairs/character_hairs14.png"}, + "hair_16": {name:"hair_16",img: "resources/customisation/character_hairs/character_hairs15.png"}, + "hair_17": {name:"hair_17",img: "resources/customisation/character_hairs/character_hairs16.png"}, + "hair_18": {name:"hair_18",img: "resources/customisation/character_hairs/character_hairs17.png"}, + "hair_19": {name:"hair_19",img: "resources/customisation/character_hairs/character_hairs18.png"}, + "hair_20": {name:"hair_20",img: "resources/customisation/character_hairs/character_hairs19.png"}, + "hair_21": {name:"hair_21",img: "resources/customisation/character_hairs/character_hairs20.png"}, + "hair_22": {name:"hair_22",img: "resources/customisation/character_hairs/character_hairs21.png"}, + "hair_23": {name:"hair_23",img: "resources/customisation/character_hairs/character_hairs22.png"}, + "hair_24": {name:"hair_24",img: "resources/customisation/character_hairs/character_hairs23.png"}, + "hair_25": {name:"hair_25",img: "resources/customisation/character_hairs/character_hairs24.png"}, + "hair_26": {name:"hair_26",img: "resources/customisation/character_hairs/character_hairs25.png"}, + "hair_27": {name:"hair_27",img: "resources/customisation/character_hairs/character_hairs26.png"}, + "hair_28": {name:"hair_28",img: "resources/customisation/character_hairs/character_hairs27.png"}, + "hair_29": {name:"hair_29",img: "resources/customisation/character_hairs/character_hairs28.png"}, + "hair_30": {name:"hair_30",img: "resources/customisation/character_hairs/character_hairs29.png"}, + "hair_31": {name:"hair_31",img: "resources/customisation/character_hairs/character_hairs30.png"}, + "hair_32": {name:"hair_32",img: "resources/customisation/character_hairs/character_hairs31.png"}, + "hair_33": {name:"hair_33",img: "resources/customisation/character_hairs/character_hairs32.png"}, + "hair_34": {name:"hair_34",img: "resources/customisation/character_hairs/character_hairs33.png"}, + "hair_35": {name:"hair_35",img: "resources/customisation/character_hairs/character_hairs34.png"}, + "hair_36": {name:"hair_36",img: "resources/customisation/character_hairs/character_hairs35.png"}, + "hair_37": {name:"hair_37",img: "resources/customisation/character_hairs/character_hairs36.png"}, + "hair_38": {name:"hair_38",img: "resources/customisation/character_hairs/character_hairs37.png"}, + "hair_39": {name:"hair_39",img: "resources/customisation/character_hairs/character_hairs38.png"}, + "hair_40": {name:"hair_40",img: "resources/customisation/character_hairs/character_hairs39.png"}, + "hair_41": {name:"hair_41",img: "resources/customisation/character_hairs/character_hairs40.png"}, + "hair_42": {name:"hair_42",img: "resources/customisation/character_hairs/character_hairs41.png"}, + "hair_43": {name:"hair_43",img: "resources/customisation/character_hairs/character_hairs42.png"}, + "hair_44": {name:"hair_44",img: "resources/customisation/character_hairs/character_hairs43.png"}, + "hair_45": {name:"hair_45",img: "resources/customisation/character_hairs/character_hairs44.png"}, + "hair_46": {name:"hair_46",img: "resources/customisation/character_hairs/character_hairs45.png"}, + "hair_47": {name:"hair_47",img: "resources/customisation/character_hairs/character_hairs46.png"}, + "hair_48": {name:"hair_48",img: "resources/customisation/character_hairs/character_hairs47.png"}, + "hair_49": {name:"hair_49",img: "resources/customisation/character_hairs/character_hairs48.png"}, + "hair_50": {name:"hair_50",img: "resources/customisation/character_hairs/character_hairs49.png"}, + "hair_51": {name:"hair_51",img: "resources/customisation/character_hairs/character_hairs50.png"}, + "hair_52": {name:"hair_52",img: "resources/customisation/character_hairs/character_hairs51.png"}, + "hair_53": {name:"hair_53",img: "resources/customisation/character_hairs/character_hairs52.png"}, + "hair_54": {name:"hair_54",img: "resources/customisation/character_hairs/character_hairs53.png"}, + "hair_55": {name:"hair_55",img: "resources/customisation/character_hairs/character_hairs54.png"}, + "hair_56": {name:"hair_56",img: "resources/customisation/character_hairs/character_hairs55.png"}, + "hair_57": {name:"hair_57",img: "resources/customisation/character_hairs/character_hairs56.png"}, + "hair_58": {name:"hair_58",img: "resources/customisation/character_hairs/character_hairs57.png"}, + "hair_59": {name:"hair_59",img: "resources/customisation/character_hairs/character_hairs58.png"}, + "hair_60": {name:"hair_60",img: "resources/customisation/character_hairs/character_hairs59.png"}, + "hair_61": {name:"hair_61",img: "resources/customisation/character_hairs/character_hairs60.png"}, + "hair_62": {name:"hair_62",img: "resources/customisation/character_hairs/character_hairs61.png"}, + "hair_63": {name:"hair_63",img: "resources/customisation/character_hairs/character_hairs62.png"}, + "hair_64": {name:"hair_64",img: "resources/customisation/character_hairs/character_hairs63.png"}, + "hair_65": {name:"hair_65",img: "resources/customisation/character_hairs/character_hairs64.png"}, + "hair_66": {name:"hair_66",img: "resources/customisation/character_hairs/character_hairs65.png"}, + "hair_67": {name:"hair_67",img: "resources/customisation/character_hairs/character_hairs66.png"}, + "hair_68": {name:"hair_68",img: "resources/customisation/character_hairs/character_hairs67.png"}, + "hair_69": {name:"hair_69",img: "resources/customisation/character_hairs/character_hairs68.png"}, + "hair_70": {name:"hair_70",img: "resources/customisation/character_hairs/character_hairs69.png"}, + "hair_71": {name:"hair_71",img: "resources/customisation/character_hairs/character_hairs70.png"}, + "hair_72": {name:"hair_72",img: "resources/customisation/character_hairs/character_hairs71.png"}, + "hair_73": {name:"hair_73",img: "resources/customisation/character_hairs/character_hairs72.png"}, + "hair_74": {name:"hair_74",img: "resources/customisation/character_hairs/character_hairs73.png"} +}; + + +export const CLOTHES_RESOURCES: BodyResourceDescriptionListInterface = { + "clothes_1": {name:"clothes_1", img: "resources/customisation/character_clothes/character_clothes0.png"}, + "clothes_2": {name:"clothes_2", img: "resources/customisation/character_clothes/character_clothes1.png"}, + "clothes_3": {name:"clothes_3", img: "resources/customisation/character_clothes/character_clothes2.png"}, + "clothes_4": {name:"clothes_4", img: "resources/customisation/character_clothes/character_clothes3.png"}, + "clothes_5": {name:"clothes_5", img: "resources/customisation/character_clothes/character_clothes4.png"}, + "clothes_6": {name:"clothes_6", img: "resources/customisation/character_clothes/character_clothes5.png"}, + "clothes_7": {name:"clothes_7", img: "resources/customisation/character_clothes/character_clothes6.png"}, + "clothes_8": {name:"clothes_8", img: "resources/customisation/character_clothes/character_clothes7.png"}, + "clothes_9": {name:"clothes_9", img: "resources/customisation/character_clothes/character_clothes8.png"}, + "clothes_10": {name:"clothes_10",img: "resources/customisation/character_clothes/character_clothes9.png"}, + "clothes_11": {name:"clothes_11",img: "resources/customisation/character_clothes/character_clothes10.png"}, + "clothes_12": {name:"clothes_12",img: "resources/customisation/character_clothes/character_clothes11.png"}, + "clothes_13": {name:"clothes_13",img: "resources/customisation/character_clothes/character_clothes12.png"}, + "clothes_14": {name:"clothes_14",img: "resources/customisation/character_clothes/character_clothes13.png"}, + "clothes_15": {name:"clothes_15",img: "resources/customisation/character_clothes/character_clothes14.png"}, + "clothes_16": {name:"clothes_16",img: "resources/customisation/character_clothes/character_clothes15.png"}, + "clothes_17": {name:"clothes_17",img: "resources/customisation/character_clothes/character_clothes16.png"}, + "clothes_18": {name:"clothes_18",img: "resources/customisation/character_clothes/character_clothes17.png"}, + "clothes_19": {name:"clothes_19",img: "resources/customisation/character_clothes/character_clothes18.png"}, + "clothes_20": {name:"clothes_20",img: "resources/customisation/character_clothes/character_clothes19.png"}, + "clothes_21": {name:"clothes_21",img: "resources/customisation/character_clothes/character_clothes20.png"}, + "clothes_22": {name:"clothes_22",img: "resources/customisation/character_clothes/character_clothes21.png"}, + "clothes_23": {name:"clothes_23",img: "resources/customisation/character_clothes/character_clothes22.png"}, + "clothes_24": {name:"clothes_24",img: "resources/customisation/character_clothes/character_clothes23.png"}, + "clothes_25": {name:"clothes_25",img: "resources/customisation/character_clothes/character_clothes24.png"}, + "clothes_26": {name:"clothes_26",img: "resources/customisation/character_clothes/character_clothes25.png"}, + "clothes_27": {name:"clothes_27",img: "resources/customisation/character_clothes/character_clothes26.png"}, + "clothes_28": {name:"clothes_28",img: "resources/customisation/character_clothes/character_clothes27.png"}, + "clothes_29": {name:"clothes_29",img: "resources/customisation/character_clothes/character_clothes28.png"}, + "clothes_30": {name:"clothes_30",img: "resources/customisation/character_clothes/character_clothes29.png"}, + "clothes_31": {name:"clothes_31",img: "resources/customisation/character_clothes/character_clothes30.png"}, + "clothes_32": {name:"clothes_32",img: "resources/customisation/character_clothes/character_clothes31.png"}, + "clothes_33": {name:"clothes_33",img: "resources/customisation/character_clothes/character_clothes32.png"}, + "clothes_34": {name:"clothes_34",img: "resources/customisation/character_clothes/character_clothes33.png"}, + "clothes_35": {name:"clothes_35",img: "resources/customisation/character_clothes/character_clothes34.png"}, + "clothes_36": {name:"clothes_36",img: "resources/customisation/character_clothes/character_clothes35.png"}, + "clothes_37": {name:"clothes_37",img: "resources/customisation/character_clothes/character_clothes36.png"}, + "clothes_38": {name:"clothes_38",img: "resources/customisation/character_clothes/character_clothes37.png"}, + "clothes_39": {name:"clothes_39",img: "resources/customisation/character_clothes/character_clothes38.png"}, + "clothes_40": {name:"clothes_40",img: "resources/customisation/character_clothes/character_clothes39.png"}, + "clothes_41": {name:"clothes_41",img: "resources/customisation/character_clothes/character_clothes40.png"}, + "clothes_42": {name:"clothes_42",img: "resources/customisation/character_clothes/character_clothes41.png"}, + "clothes_43": {name:"clothes_43",img: "resources/customisation/character_clothes/character_clothes42.png"}, + "clothes_44": {name:"clothes_44",img: "resources/customisation/character_clothes/character_clothes43.png"}, + "clothes_45": {name:"clothes_45",img: "resources/customisation/character_clothes/character_clothes44.png"}, + "clothes_46": {name:"clothes_46",img: "resources/customisation/character_clothes/character_clothes45.png"}, + "clothes_47": {name:"clothes_47",img: "resources/customisation/character_clothes/character_clothes46.png"}, + "clothes_48": {name:"clothes_48",img: "resources/customisation/character_clothes/character_clothes47.png"}, + "clothes_49": {name:"clothes_49",img: "resources/customisation/character_clothes/character_clothes48.png"}, + "clothes_50": {name:"clothes_50",img: "resources/customisation/character_clothes/character_clothes49.png"}, + "clothes_51": {name:"clothes_51",img: "resources/customisation/character_clothes/character_clothes50.png"}, + "clothes_52": {name:"clothes_52",img: "resources/customisation/character_clothes/character_clothes51.png"}, + "clothes_53": {name:"clothes_53",img: "resources/customisation/character_clothes/character_clothes52.png"}, + "clothes_54": {name:"clothes_54",img: "resources/customisation/character_clothes/character_clothes53.png"}, + "clothes_55": {name:"clothes_55",img: "resources/customisation/character_clothes/character_clothes54.png"}, + "clothes_56": {name:"clothes_56",img: "resources/customisation/character_clothes/character_clothes55.png"}, + "clothes_57": {name:"clothes_57",img: "resources/customisation/character_clothes/character_clothes56.png"}, + "clothes_58": {name:"clothes_58",img: "resources/customisation/character_clothes/character_clothes57.png"}, + "clothes_59": {name:"clothes_59",img: "resources/customisation/character_clothes/character_clothes58.png"}, + "clothes_60": {name:"clothes_60",img: "resources/customisation/character_clothes/character_clothes59.png"}, + "clothes_61": {name:"clothes_61",img: "resources/customisation/character_clothes/character_clothes60.png"}, + "clothes_62": {name:"clothes_62",img: "resources/customisation/character_clothes/character_clothes61.png"}, + "clothes_63": {name:"clothes_63",img: "resources/customisation/character_clothes/character_clothes62.png"}, + "clothes_64": {name:"clothes_64",img: "resources/customisation/character_clothes/character_clothes63.png"}, + "clothes_65": {name:"clothes_65",img: "resources/customisation/character_clothes/character_clothes64.png"}, + "clothes_66": {name:"clothes_66",img: "resources/customisation/character_clothes/character_clothes65.png"}, + "clothes_67": {name:"clothes_67",img: "resources/customisation/character_clothes/character_clothes66.png"}, + "clothes_68": {name:"clothes_68",img: "resources/customisation/character_clothes/character_clothes67.png"}, + "clothes_69": {name:"clothes_69",img: "resources/customisation/character_clothes/character_clothes68.png"}, + "clothes_70": {name:"clothes_70",img: "resources/customisation/character_clothes/character_clothes69.png"}, + "clothes_pride_shirt": {name:"clothes_pride_shirt",img: "resources/customisation/character_clothes/pride_shirt.png"}, + "clothes_black_hoodie": {name:"clothes_black_hoodie",img: "resources/customisation/character_clothes/black_hoodie.png"}, + "clothes_white_hoodie": {name:"clothes_white_hoodie",img: "resources/customisation/character_clothes/white_hoodie.png"}, + "clothes_engelbert": {name:"clothes_engelbert",img: "resources/customisation/character_clothes/engelbert.png"} +}; + +export const HATS_RESOURCES: BodyResourceDescriptionListInterface = { + "hats_1": {name: "hats_1", img: "resources/customisation/character_hats/character_hats1.png"}, + "hats_2": {name: "hats_2", img: "resources/customisation/character_hats/character_hats2.png"}, + "hats_3": {name: "hats_3", img: "resources/customisation/character_hats/character_hats3.png"}, + "hats_4": {name: "hats_4", img: "resources/customisation/character_hats/character_hats4.png"}, + "hats_5": {name: "hats_5", img: "resources/customisation/character_hats/character_hats5.png"}, + "hats_6": {name: "hats_6", img: "resources/customisation/character_hats/character_hats6.png"}, + "hats_7": {name: "hats_7", img: "resources/customisation/character_hats/character_hats7.png"}, + "hats_8": {name: "hats_8", img: "resources/customisation/character_hats/character_hats8.png"}, + "hats_9": {name: "hats_9", img: "resources/customisation/character_hats/character_hats9.png"}, + "hats_10": {name: "hats_10", img: "resources/customisation/character_hats/character_hats10.png"}, + "hats_11": {name: "hats_11", img: "resources/customisation/character_hats/character_hats11.png"}, + "hats_12": {name: "hats_12", img: "resources/customisation/character_hats/character_hats12.png"}, + "hats_13": {name: "hats_13", img: "resources/customisation/character_hats/character_hats13.png"}, + "hats_14": {name: "hats_14", img: "resources/customisation/character_hats/character_hats14.png"}, + "hats_15": {name: "hats_15", img: "resources/customisation/character_hats/character_hats15.png"}, + "hats_16": {name: "hats_16", img: "resources/customisation/character_hats/character_hats16.png"}, + "hats_17": {name: "hats_17", img: "resources/customisation/character_hats/character_hats17.png"}, + "hats_18": {name: "hats_18", img: "resources/customisation/character_hats/character_hats18.png"}, + "hats_19": {name: "hats_19", img: "resources/customisation/character_hats/character_hats19.png"}, + "hats_20": {name: "hats_20", img: "resources/customisation/character_hats/character_hats20.png"}, + "hats_21": {name: "hats_21", img: "resources/customisation/character_hats/character_hats21.png"}, + "hats_22": {name: "hats_22", img: "resources/customisation/character_hats/character_hats22.png"}, + "hats_23": {name: "hats_23", img: "resources/customisation/character_hats/character_hats23.png"}, + "hats_24": {name: "hats_24", img: "resources/customisation/character_hats/character_hats24.png"}, + "hats_25": {name: "hats_25", img: "resources/customisation/character_hats/character_hats25.png"}, + "hats_26": {name: "hats_26", img: "resources/customisation/character_hats/character_hats26.png"}, + "tinfoil_hat1": {name: "tinfoil_hat1", img: "resources/customisation/character_hats/tinfoil_hat1.png"} +}; + +export const ACCESSORIES_RESOURCES: BodyResourceDescriptionListInterface = { + "accessory_1": {name: "accessory_1", img: "resources/customisation/character_accessories/character_accessories1.png"}, + "accessory_2": {name: "accessory_2", img: "resources/customisation/character_accessories/character_accessories2.png"}, + "accessory_3": {name: "accessory_3", img: "resources/customisation/character_accessories/character_accessories3.png"}, + "accessory_4": {name: "accessory_4", img: "resources/customisation/character_accessories/character_accessories4.png"}, + "accessory_5": {name: "accessory_5", img: "resources/customisation/character_accessories/character_accessories5.png"}, + "accessory_6": {name: "accessory_6", img: "resources/customisation/character_accessories/character_accessories6.png"}, + "accessory_7": {name: "accessory_7", img: "resources/customisation/character_accessories/character_accessories7.png"}, + "accessory_8": {name: "accessory_8", img: "resources/customisation/character_accessories/character_accessories8.png"}, + "accessory_9": {name: "accessory_9", img: "resources/customisation/character_accessories/character_accessories9.png"}, + "accessory_10": {name: "accessory_10", img: "resources/customisation/character_accessories/character_accessories10.png"}, + "accessory_11": {name: "accessory_11", img: "resources/customisation/character_accessories/character_accessories11.png"}, + "accessory_12": {name: "accessory_12", img: "resources/customisation/character_accessories/character_accessories12.png"}, + "accessory_13": {name: "accessory_13", img: "resources/customisation/character_accessories/character_accessories13.png"}, + "accessory_14": {name: "accessory_14", img: "resources/customisation/character_accessories/character_accessories14.png"}, + "accessory_15": {name: "accessory_15", img: "resources/customisation/character_accessories/character_accessories15.png"}, + "accessory_16": {name: "accessory_16", img: "resources/customisation/character_accessories/character_accessories16.png"}, + "accessory_17": {name: "accessory_17", img: "resources/customisation/character_accessories/character_accessories17.png"}, + "accessory_18": {name: "accessory_18", img: "resources/customisation/character_accessories/character_accessories18.png"}, + "accessory_19": {name: "accessory_19", img: "resources/customisation/character_accessories/character_accessories19.png"}, + "accessory_20": {name: "accessory_20", img: "resources/customisation/character_accessories/character_accessories20.png"}, + "accessory_21": {name: "accessory_21", img: "resources/customisation/character_accessories/character_accessories21.png"}, + "accessory_22": {name: "accessory_22", img: "resources/customisation/character_accessories/character_accessories22.png"}, + "accessory_23": {name: "accessory_23", img: "resources/customisation/character_accessories/character_accessories23.png"}, + "accessory_24": {name: "accessory_24", img: "resources/customisation/character_accessories/character_accessories24.png"}, + "accessory_25": {name: "accessory_25", img: "resources/customisation/character_accessories/character_accessories25.png"}, + "accessory_26": {name: "accessory_26", img: "resources/customisation/character_accessories/character_accessories26.png"}, + "accessory_27": {name: "accessory_27", img: "resources/customisation/character_accessories/character_accessories27.png"}, + "accessory_28": {name: "accessory_28", img: "resources/customisation/character_accessories/character_accessories28.png"}, + "accessory_29": {name: "accessory_29", img: "resources/customisation/character_accessories/character_accessories29.png"}, + "accessory_30": {name: "accessory_30", img: "resources/customisation/character_accessories/character_accessories30.png"}, + "accessory_31": {name: "accessory_31", img: "resources/customisation/character_accessories/character_accessories31.png"}, + "accessory_32": {name: "accessory_32", img: "resources/customisation/character_accessories/character_accessories32.png"}, + "accessory_mate_bottle": {name: "accessory_mate_bottle", img: "resources/customisation/character_accessories/mate_bottle1.png"}, + "accessory_mask": {name: "accessory_mask", img: "resources/customisation/character_accessories/mask.png"} +}; + +export const LAYERS: BodyResourceDescriptionListInterface[] = [ + COLOR_RESOURCES, + EYES_RESOURCES, + HAIR_RESOURCES, + CLOTHES_RESOURCES, + HATS_RESOURCES, + ACCESSORIES_RESOURCES +]; + +export const OBJECTS: BodyResourceDescriptionInterface[] = [ + {name:'teleportation', img:'resources/objects/teleportation.png'}, +]; \ No newline at end of file diff --git a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts new file mode 100644 index 00000000..6f684b2d --- /dev/null +++ b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts @@ -0,0 +1,71 @@ +import LoaderPlugin = Phaser.Loader.LoaderPlugin; +import TextureManager = Phaser.Textures.TextureManager; +import {CharacterTexture} from "../../Connexion/LocalUser"; +import {BodyResourceDescriptionInterface, LAYERS, PLAYER_RESOURCES} from "./PlayerTextures"; + + +export const loadAllLayers = (load: LoaderPlugin): BodyResourceDescriptionInterface[][] => { + const returnArray:BodyResourceDescriptionInterface[][] = []; + LAYERS.forEach(layer => { + const layerArray:BodyResourceDescriptionInterface[] = []; + Object.values(layer).forEach((textureDescriptor) => { + layerArray.push(textureDescriptor); + load.spritesheet(textureDescriptor.name,textureDescriptor.img,{frameWidth: 32, frameHeight: 32}); + }) + returnArray.push(layerArray) + }); + return returnArray; +} +export const loadAllDefaultModels = (load: LoaderPlugin): BodyResourceDescriptionInterface[] => { + const returnArray = Object.values(PLAYER_RESOURCES); + returnArray.forEach((playerResource: BodyResourceDescriptionInterface) => { + load.spritesheet(playerResource.name, playerResource.img, {frameWidth: 32, frameHeight: 32}); + }); + return returnArray; +} +export const loadCustomTexture = (load: LoaderPlugin, texture: CharacterTexture) => { + const name = 'customCharacterTexture'+texture.id; + load.spritesheet(name,texture.url,{frameWidth: 32, frameHeight: 32}); +} + + +export const lazyLoadPlayerCharacterTextures = (loadPlugin: LoaderPlugin, texturePlugin: TextureManager, texturekeys:Array): Promise => { + const promisesList:Promise[] = []; + texturekeys.forEach((textureKey: string|BodyResourceDescriptionInterface) => { + const textureName = typeof textureKey === 'string' ? textureKey : textureKey.name; + if(!texturePlugin.exists(textureName)) { + console.log('Loading '+textureName) + const playerResourceDescriptor = typeof textureKey === 'string' ? getRessourceDescriptor(textureKey) : textureKey; + promisesList.push(createLoadingPromise(loadPlugin, playerResourceDescriptor)); + } + }) + let returnPromise:Promise>; + if (promisesList.length > 0) { + loadPlugin.start(); + returnPromise = Promise.all(promisesList).then(() => texturekeys); + } else { + returnPromise = Promise.resolve(texturekeys); + } + return returnPromise.then((keys) => keys.map((key) => { + return typeof key !== 'string' ? key.name : key; + })) +} + + +const getRessourceDescriptor = (textureKey: string): BodyResourceDescriptionInterface => { + const playerResource = PLAYER_RESOURCES[textureKey]; + if (playerResource !== undefined) return playerResource; + + for (let i=0; i { + return new Promise((res, rej) => { + loadPlugin.spritesheet(playerResourceDescriptor.name, playerResourceDescriptor.img, {frameWidth: 32, frameHeight: 32}); + loadPlugin.once('filecomplete-spritesheet-'+playerResourceDescriptor.name, () => res()); + }); +} \ No newline at end of file diff --git a/front/src/Phaser/Entity/RemotePlayer.ts b/front/src/Phaser/Entity/RemotePlayer.ts index 54592389..822e4e36 100644 --- a/front/src/Phaser/Entity/RemotePlayer.ts +++ b/front/src/Phaser/Entity/RemotePlayer.ts @@ -15,11 +15,11 @@ export class RemotePlayer extends Character { x: number, y: number, name: string, - PlayerTextures: string[], + texturesPromise: Promise, direction: string, moving: boolean ) { - super(Scene, x, y, PlayerTextures, name, direction, moving, 1); + super(Scene, x, y, texturesPromise, name, direction, moving, 1); //set data this.userId = userId; diff --git a/front/src/Phaser/Entity/body_character.ts b/front/src/Phaser/Entity/body_character.ts deleted file mode 100644 index b37b9864..00000000 --- a/front/src/Phaser/Entity/body_character.ts +++ /dev/null @@ -1,355 +0,0 @@ -import LoaderPlugin = Phaser.Loader.LoaderPlugin; -import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "./Character"; -import {CharacterTexture} from "../../Connexion/LocalUser"; - -export interface BodyResourceDescriptionInterface { - name: string, - img: string -} - -export const COLOR_RESOURCES: Array = [ - {name:"color_1", img: "resources/customisation/character_color/character_color0.png"}, - {name:"color_2", img: "resources/customisation/character_color/character_color1.png"}, - {name:"color_3", img: "resources/customisation/character_color/character_color2.png"}, - {name:"color_4", img: "resources/customisation/character_color/character_color3.png"}, - {name:"color_5", img: "resources/customisation/character_color/character_color4.png"}, - {name:"color_6", img: "resources/customisation/character_color/character_color5.png"}, - {name:"color_7", img: "resources/customisation/character_color/character_color6.png"}, - {name:"color_8", img: "resources/customisation/character_color/character_color7.png"}, - {name:"color_9", img: "resources/customisation/character_color/character_color8.png"}, - {name:"color_10",img: "resources/customisation/character_color/character_color9.png"}, - {name:"color_11",img: "resources/customisation/character_color/character_color10.png"}, - {name:"color_12",img: "resources/customisation/character_color/character_color11.png"}, - {name:"color_13",img: "resources/customisation/character_color/character_color12.png"}, - {name:"color_14",img: "resources/customisation/character_color/character_color13.png"}, - {name:"color_15",img: "resources/customisation/character_color/character_color14.png"}, - {name:"color_16",img: "resources/customisation/character_color/character_color15.png"}, - {name:"color_17",img: "resources/customisation/character_color/character_color16.png"}, - {name:"color_18",img: "resources/customisation/character_color/character_color17.png"}, - {name:"color_19",img: "resources/customisation/character_color/character_color18.png"}, - {name:"color_20",img: "resources/customisation/character_color/character_color19.png"}, - {name:"color_21",img: "resources/customisation/character_color/character_color20.png"}, - {name:"color_22",img: "resources/customisation/character_color/character_color21.png"}, - {name:"color_23",img: "resources/customisation/character_color/character_color22.png"}, - {name:"color_24",img: "resources/customisation/character_color/character_color23.png"}, - {name:"color_25",img: "resources/customisation/character_color/character_color24.png"}, - {name:"color_26",img: "resources/customisation/character_color/character_color25.png"}, - {name:"color_27",img: "resources/customisation/character_color/character_color26.png"}, - {name:"color_28",img: "resources/customisation/character_color/character_color27.png"}, - {name:"color_29",img: "resources/customisation/character_color/character_color28.png"}, - {name:"color_30",img: "resources/customisation/character_color/character_color29.png"}, - {name:"color_31",img: "resources/customisation/character_color/character_color30.png"}, - {name:"color_32",img: "resources/customisation/character_color/character_color31.png"}, - {name:"color_33",img: "resources/customisation/character_color/character_color32.png"} -]; - -export const EYES_RESOURCES: Array = [ - {name: "eyes_1", img: "resources/customisation/character_eyes/character_eyes1.png"}, - {name: "eyes_2", img: "resources/customisation/character_eyes/character_eyes2.png"}, - {name: "eyes_3", img: "resources/customisation/character_eyes/character_eyes3.png"}, - {name: "eyes_4", img: "resources/customisation/character_eyes/character_eyes4.png"}, - {name: "eyes_5", img: "resources/customisation/character_eyes/character_eyes5.png"}, - {name: "eyes_6", img: "resources/customisation/character_eyes/character_eyes6.png"}, - {name: "eyes_7", img: "resources/customisation/character_eyes/character_eyes7.png"}, - {name: "eyes_8", img: "resources/customisation/character_eyes/character_eyes8.png"}, - {name: "eyes_9", img: "resources/customisation/character_eyes/character_eyes9.png"}, - {name: "eyes_10", img: "resources/customisation/character_eyes/character_eyes10.png"}, - {name: "eyes_11", img: "resources/customisation/character_eyes/character_eyes11.png"}, - {name: "eyes_12", img: "resources/customisation/character_eyes/character_eyes12.png"}, - {name: "eyes_13", img: "resources/customisation/character_eyes/character_eyes13.png"}, - {name: "eyes_14", img: "resources/customisation/character_eyes/character_eyes14.png"}, - {name: "eyes_15", img: "resources/customisation/character_eyes/character_eyes15.png"}, - {name: "eyes_16", img: "resources/customisation/character_eyes/character_eyes16.png"}, - {name: "eyes_17", img: "resources/customisation/character_eyes/character_eyes17.png"}, - {name: "eyes_18", img: "resources/customisation/character_eyes/character_eyes18.png"}, - {name: "eyes_19", img: "resources/customisation/character_eyes/character_eyes19.png"}, - {name: "eyes_20", img: "resources/customisation/character_eyes/character_eyes20.png"}, - {name: "eyes_21", img: "resources/customisation/character_eyes/character_eyes21.png"}, - {name: "eyes_22", img: "resources/customisation/character_eyes/character_eyes22.png"}, - {name: "eyes_23", img: "resources/customisation/character_eyes/character_eyes23.png"}, - {name: "eyes_24", img: "resources/customisation/character_eyes/character_eyes24.png"}, - {name: "eyes_25", img: "resources/customisation/character_eyes/character_eyes25.png"}, - {name: "eyes_26", img: "resources/customisation/character_eyes/character_eyes26.png"}, - {name: "eyes_27", img: "resources/customisation/character_eyes/character_eyes27.png"}, - {name: "eyes_28", img: "resources/customisation/character_eyes/character_eyes28.png"}, - {name: "eyes_29", img: "resources/customisation/character_eyes/character_eyes29.png"}, - {name: "eyes_30", img: "resources/customisation/character_eyes/character_eyes30.png"} - -] - -export const HAIR_RESOURCES: Array = [ - {name:"hair_1", img: "resources/customisation/character_hairs/character_hairs0.png"}, - {name:"hair_2", img: "resources/customisation/character_hairs/character_hairs1.png"}, - {name:"hair_3", img: "resources/customisation/character_hairs/character_hairs2.png"}, - {name:"hair_4", img: "resources/customisation/character_hairs/character_hairs3.png"}, - {name:"hair_5", img: "resources/customisation/character_hairs/character_hairs4.png"}, - {name:"hair_6", img: "resources/customisation/character_hairs/character_hairs5.png"}, - {name:"hair_7", img: "resources/customisation/character_hairs/character_hairs6.png"}, - {name:"hair_8", img: "resources/customisation/character_hairs/character_hairs7.png"}, - {name:"hair_9", img: "resources/customisation/character_hairs/character_hairs8.png"}, - {name:"hair_10",img: "resources/customisation/character_hairs/character_hairs9.png"}, - {name:"hair_11",img: "resources/customisation/character_hairs/character_hairs10.png"}, - {name:"hair_12",img: "resources/customisation/character_hairs/character_hairs11.png"}, - {name:"hair_13",img: "resources/customisation/character_hairs/character_hairs12.png"}, - {name:"hair_14",img: "resources/customisation/character_hairs/character_hairs13.png"}, - {name:"hair_15",img: "resources/customisation/character_hairs/character_hairs14.png"}, - {name:"hair_16",img: "resources/customisation/character_hairs/character_hairs15.png"}, - {name:"hair_17",img: "resources/customisation/character_hairs/character_hairs16.png"}, - {name:"hair_18",img: "resources/customisation/character_hairs/character_hairs17.png"}, - {name:"hair_19",img: "resources/customisation/character_hairs/character_hairs18.png"}, - {name:"hair_20",img: "resources/customisation/character_hairs/character_hairs19.png"}, - {name:"hair_21",img: "resources/customisation/character_hairs/character_hairs20.png"}, - {name:"hair_22",img: "resources/customisation/character_hairs/character_hairs21.png"}, - {name:"hair_23",img: "resources/customisation/character_hairs/character_hairs22.png"}, - {name:"hair_24",img: "resources/customisation/character_hairs/character_hairs23.png"}, - {name:"hair_25",img: "resources/customisation/character_hairs/character_hairs24.png"}, - {name:"hair_26",img: "resources/customisation/character_hairs/character_hairs25.png"}, - {name:"hair_27",img: "resources/customisation/character_hairs/character_hairs26.png"}, - {name:"hair_28",img: "resources/customisation/character_hairs/character_hairs27.png"}, - {name:"hair_29",img: "resources/customisation/character_hairs/character_hairs28.png"}, - {name:"hair_30",img: "resources/customisation/character_hairs/character_hairs29.png"}, - {name:"hair_31",img: "resources/customisation/character_hairs/character_hairs30.png"}, - {name:"hair_32",img: "resources/customisation/character_hairs/character_hairs31.png"}, - {name:"hair_33",img: "resources/customisation/character_hairs/character_hairs32.png"}, - {name:"hair_34",img: "resources/customisation/character_hairs/character_hairs33.png"}, - {name:"hair_35",img: "resources/customisation/character_hairs/character_hairs34.png"}, - {name:"hair_36",img: "resources/customisation/character_hairs/character_hairs35.png"}, - {name:"hair_37",img: "resources/customisation/character_hairs/character_hairs36.png"}, - {name:"hair_38",img: "resources/customisation/character_hairs/character_hairs37.png"}, - {name:"hair_39",img: "resources/customisation/character_hairs/character_hairs38.png"}, - {name:"hair_40",img: "resources/customisation/character_hairs/character_hairs39.png"}, - {name:"hair_41",img: "resources/customisation/character_hairs/character_hairs40.png"}, - {name:"hair_42",img: "resources/customisation/character_hairs/character_hairs41.png"}, - {name:"hair_43",img: "resources/customisation/character_hairs/character_hairs42.png"}, - {name:"hair_44",img: "resources/customisation/character_hairs/character_hairs43.png"}, - {name:"hair_45",img: "resources/customisation/character_hairs/character_hairs44.png"}, - {name:"hair_46",img: "resources/customisation/character_hairs/character_hairs45.png"}, - {name:"hair_47",img: "resources/customisation/character_hairs/character_hairs46.png"}, - {name:"hair_48",img: "resources/customisation/character_hairs/character_hairs47.png"}, - {name:"hair_49",img: "resources/customisation/character_hairs/character_hairs48.png"}, - {name:"hair_50",img: "resources/customisation/character_hairs/character_hairs49.png"}, - {name:"hair_51",img: "resources/customisation/character_hairs/character_hairs50.png"}, - {name:"hair_52",img: "resources/customisation/character_hairs/character_hairs51.png"}, - {name:"hair_53",img: "resources/customisation/character_hairs/character_hairs52.png"}, - {name:"hair_54",img: "resources/customisation/character_hairs/character_hairs53.png"}, - {name:"hair_55",img: "resources/customisation/character_hairs/character_hairs54.png"}, - {name:"hair_56",img: "resources/customisation/character_hairs/character_hairs55.png"}, - {name:"hair_57",img: "resources/customisation/character_hairs/character_hairs56.png"}, - {name:"hair_58",img: "resources/customisation/character_hairs/character_hairs57.png"}, - {name:"hair_59",img: "resources/customisation/character_hairs/character_hairs58.png"}, - {name:"hair_60",img: "resources/customisation/character_hairs/character_hairs59.png"}, - {name:"hair_61",img: "resources/customisation/character_hairs/character_hairs60.png"}, - {name:"hair_62",img: "resources/customisation/character_hairs/character_hairs61.png"}, - {name:"hair_63",img: "resources/customisation/character_hairs/character_hairs62.png"}, - {name:"hair_64",img: "resources/customisation/character_hairs/character_hairs63.png"}, - {name:"hair_65",img: "resources/customisation/character_hairs/character_hairs64.png"}, - {name:"hair_66",img: "resources/customisation/character_hairs/character_hairs65.png"}, - {name:"hair_67",img: "resources/customisation/character_hairs/character_hairs66.png"}, - {name:"hair_68",img: "resources/customisation/character_hairs/character_hairs67.png"}, - {name:"hair_69",img: "resources/customisation/character_hairs/character_hairs68.png"}, - {name:"hair_70",img: "resources/customisation/character_hairs/character_hairs69.png"}, - {name:"hair_71",img: "resources/customisation/character_hairs/character_hairs70.png"}, - {name:"hair_72",img: "resources/customisation/character_hairs/character_hairs71.png"}, - {name:"hair_73",img: "resources/customisation/character_hairs/character_hairs72.png"}, - {name:"hair_74",img: "resources/customisation/character_hairs/character_hairs73.png"} -]; - - -export const CLOTHES_RESOURCES: Array = [ - {name:"clothes_1", img: "resources/customisation/character_clothes/character_clothes0.png"}, - {name:"clothes_2", img: "resources/customisation/character_clothes/character_clothes1.png"}, - {name:"clothes_3", img: "resources/customisation/character_clothes/character_clothes2.png"}, - {name:"clothes_4", img: "resources/customisation/character_clothes/character_clothes3.png"}, - {name:"clothes_5", img: "resources/customisation/character_clothes/character_clothes4.png"}, - {name:"clothes_6", img: "resources/customisation/character_clothes/character_clothes5.png"}, - {name:"clothes_7", img: "resources/customisation/character_clothes/character_clothes6.png"}, - {name:"clothes_8", img: "resources/customisation/character_clothes/character_clothes7.png"}, - {name:"clothes_9", img: "resources/customisation/character_clothes/character_clothes8.png"}, - {name:"clothes_10",img: "resources/customisation/character_clothes/character_clothes9.png"}, - {name:"clothes_11",img: "resources/customisation/character_clothes/character_clothes10.png"}, - {name:"clothes_12",img: "resources/customisation/character_clothes/character_clothes11.png"}, - {name:"clothes_13",img: "resources/customisation/character_clothes/character_clothes12.png"}, - {name:"clothes_14",img: "resources/customisation/character_clothes/character_clothes13.png"}, - {name:"clothes_15",img: "resources/customisation/character_clothes/character_clothes14.png"}, - {name:"clothes_16",img: "resources/customisation/character_clothes/character_clothes15.png"}, - {name:"clothes_17",img: "resources/customisation/character_clothes/character_clothes16.png"}, - {name:"clothes_18",img: "resources/customisation/character_clothes/character_clothes17.png"}, - {name:"clothes_19",img: "resources/customisation/character_clothes/character_clothes18.png"}, - {name:"clothes_20",img: "resources/customisation/character_clothes/character_clothes19.png"}, - {name:"clothes_21",img: "resources/customisation/character_clothes/character_clothes20.png"}, - {name:"clothes_22",img: "resources/customisation/character_clothes/character_clothes21.png"}, - {name:"clothes_23",img: "resources/customisation/character_clothes/character_clothes22.png"}, - {name:"clothes_24",img: "resources/customisation/character_clothes/character_clothes23.png"}, - {name:"clothes_25",img: "resources/customisation/character_clothes/character_clothes24.png"}, - {name:"clothes_26",img: "resources/customisation/character_clothes/character_clothes25.png"}, - {name:"clothes_27",img: "resources/customisation/character_clothes/character_clothes26.png"}, - {name:"clothes_28",img: "resources/customisation/character_clothes/character_clothes27.png"}, - {name:"clothes_29",img: "resources/customisation/character_clothes/character_clothes28.png"}, - {name:"clothes_30",img: "resources/customisation/character_clothes/character_clothes29.png"}, - {name:"clothes_31",img: "resources/customisation/character_clothes/character_clothes30.png"}, - {name:"clothes_32",img: "resources/customisation/character_clothes/character_clothes31.png"}, - {name:"clothes_33",img: "resources/customisation/character_clothes/character_clothes32.png"}, - {name:"clothes_34",img: "resources/customisation/character_clothes/character_clothes33.png"}, - {name:"clothes_35",img: "resources/customisation/character_clothes/character_clothes34.png"}, - {name:"clothes_36",img: "resources/customisation/character_clothes/character_clothes35.png"}, - {name:"clothes_37",img: "resources/customisation/character_clothes/character_clothes36.png"}, - {name:"clothes_38",img: "resources/customisation/character_clothes/character_clothes37.png"}, - {name:"clothes_39",img: "resources/customisation/character_clothes/character_clothes38.png"}, - {name:"clothes_40",img: "resources/customisation/character_clothes/character_clothes39.png"}, - {name:"clothes_41",img: "resources/customisation/character_clothes/character_clothes40.png"}, - {name:"clothes_42",img: "resources/customisation/character_clothes/character_clothes41.png"}, - {name:"clothes_43",img: "resources/customisation/character_clothes/character_clothes42.png"}, - {name:"clothes_44",img: "resources/customisation/character_clothes/character_clothes43.png"}, - {name:"clothes_45",img: "resources/customisation/character_clothes/character_clothes44.png"}, - {name:"clothes_46",img: "resources/customisation/character_clothes/character_clothes45.png"}, - {name:"clothes_47",img: "resources/customisation/character_clothes/character_clothes46.png"}, - {name:"clothes_48",img: "resources/customisation/character_clothes/character_clothes47.png"}, - {name:"clothes_49",img: "resources/customisation/character_clothes/character_clothes48.png"}, - {name:"clothes_50",img: "resources/customisation/character_clothes/character_clothes49.png"}, - {name:"clothes_51",img: "resources/customisation/character_clothes/character_clothes50.png"}, - {name:"clothes_52",img: "resources/customisation/character_clothes/character_clothes51.png"}, - {name:"clothes_53",img: "resources/customisation/character_clothes/character_clothes52.png"}, - {name:"clothes_54",img: "resources/customisation/character_clothes/character_clothes53.png"}, - {name:"clothes_55",img: "resources/customisation/character_clothes/character_clothes54.png"}, - {name:"clothes_56",img: "resources/customisation/character_clothes/character_clothes55.png"}, - {name:"clothes_57",img: "resources/customisation/character_clothes/character_clothes56.png"}, - {name:"clothes_58",img: "resources/customisation/character_clothes/character_clothes57.png"}, - {name:"clothes_59",img: "resources/customisation/character_clothes/character_clothes58.png"}, - {name:"clothes_60",img: "resources/customisation/character_clothes/character_clothes59.png"}, - {name:"clothes_61",img: "resources/customisation/character_clothes/character_clothes60.png"}, - {name:"clothes_62",img: "resources/customisation/character_clothes/character_clothes61.png"}, - {name:"clothes_63",img: "resources/customisation/character_clothes/character_clothes62.png"}, - {name:"clothes_64",img: "resources/customisation/character_clothes/character_clothes63.png"}, - {name:"clothes_65",img: "resources/customisation/character_clothes/character_clothes64.png"}, - {name:"clothes_66",img: "resources/customisation/character_clothes/character_clothes65.png"}, - {name:"clothes_67",img: "resources/customisation/character_clothes/character_clothes66.png"}, - {name:"clothes_68",img: "resources/customisation/character_clothes/character_clothes67.png"}, - {name:"clothes_69",img: "resources/customisation/character_clothes/character_clothes68.png"}, - {name:"clothes_70",img: "resources/customisation/character_clothes/character_clothes69.png"}, - {name:"clothes_pride_shirt",img: "resources/customisation/character_clothes/pride_shirt.png"}, - {name:"clothes_black_hoodie",img: "resources/customisation/character_clothes/black_hoodie.png"}, - {name:"clothes_white_hoodie",img: "resources/customisation/character_clothes/white_hoodie.png"}, - {name:"clothes_engelbert",img: "resources/customisation/character_clothes/engelbert.png"} -]; - -export const HATS_RESOURCES: Array = [ - {name: "hats_1", img: "resources/customisation/character_hats/character_hats1.png"}, - {name: "hats_2", img: "resources/customisation/character_hats/character_hats2.png"}, - {name: "hats_3", img: "resources/customisation/character_hats/character_hats3.png"}, - {name: "hats_4", img: "resources/customisation/character_hats/character_hats4.png"}, - {name: "hats_5", img: "resources/customisation/character_hats/character_hats5.png"}, - {name: "hats_6", img: "resources/customisation/character_hats/character_hats6.png"}, - {name: "hats_7", img: "resources/customisation/character_hats/character_hats7.png"}, - {name: "hats_8", img: "resources/customisation/character_hats/character_hats8.png"}, - {name: "hats_9", img: "resources/customisation/character_hats/character_hats9.png"}, - {name: "hats_10", img: "resources/customisation/character_hats/character_hats10.png"}, - {name: "hats_11", img: "resources/customisation/character_hats/character_hats11.png"}, - {name: "hats_12", img: "resources/customisation/character_hats/character_hats12.png"}, - {name: "hats_13", img: "resources/customisation/character_hats/character_hats13.png"}, - {name: "hats_14", img: "resources/customisation/character_hats/character_hats14.png"}, - {name: "hats_15", img: "resources/customisation/character_hats/character_hats15.png"}, - {name: "hats_16", img: "resources/customisation/character_hats/character_hats16.png"}, - {name: "hats_17", img: "resources/customisation/character_hats/character_hats17.png"}, - {name: "hats_18", img: "resources/customisation/character_hats/character_hats18.png"}, - {name: "hats_19", img: "resources/customisation/character_hats/character_hats19.png"}, - {name: "hats_20", img: "resources/customisation/character_hats/character_hats20.png"}, - {name: "hats_21", img: "resources/customisation/character_hats/character_hats21.png"}, - {name: "hats_22", img: "resources/customisation/character_hats/character_hats22.png"}, - {name: "hats_23", img: "resources/customisation/character_hats/character_hats23.png"}, - {name: "hats_24", img: "resources/customisation/character_hats/character_hats24.png"}, - {name: "hats_25", img: "resources/customisation/character_hats/character_hats25.png"}, - {name: "hats_26", img: "resources/customisation/character_hats/character_hats26.png"}, - {name: "tinfoil_hat1", img: "resources/customisation/character_hats/tinfoil_hat1.png"} -]; - -export const ACCESSORIES_RESOURCES: Array = [ - {name: "accessory_1", img: "resources/customisation/character_accessories/character_accessories1.png"}, - {name: "accessory_2", img: "resources/customisation/character_accessories/character_accessories2.png"}, - {name: "accessory_3", img: "resources/customisation/character_accessories/character_accessories3.png"}, - {name: "accessory_4", img: "resources/customisation/character_accessories/character_accessories4.png"}, - {name: "accessory_5", img: "resources/customisation/character_accessories/character_accessories5.png"}, - {name: "accessory_6", img: "resources/customisation/character_accessories/character_accessories6.png"}, - {name: "accessory_7", img: "resources/customisation/character_accessories/character_accessories7.png"}, - {name: "accessory_8", img: "resources/customisation/character_accessories/character_accessories8.png"}, - {name: "accessory_9", img: "resources/customisation/character_accessories/character_accessories9.png"}, - {name: "accessory_10", img: "resources/customisation/character_accessories/character_accessories10.png"}, - {name: "accessory_11", img: "resources/customisation/character_accessories/character_accessories11.png"}, - {name: "accessory_12", img: "resources/customisation/character_accessories/character_accessories12.png"}, - {name: "accessory_13", img: "resources/customisation/character_accessories/character_accessories13.png"}, - {name: "accessory_14", img: "resources/customisation/character_accessories/character_accessories14.png"}, - {name: "accessory_15", img: "resources/customisation/character_accessories/character_accessories15.png"}, - {name: "accessory_16", img: "resources/customisation/character_accessories/character_accessories16.png"}, - {name: "accessory_17", img: "resources/customisation/character_accessories/character_accessories17.png"}, - {name: "accessory_18", img: "resources/customisation/character_accessories/character_accessories18.png"}, - {name: "accessory_19", img: "resources/customisation/character_accessories/character_accessories19.png"}, - {name: "accessory_20", img: "resources/customisation/character_accessories/character_accessories20.png"}, - {name: "accessory_21", img: "resources/customisation/character_accessories/character_accessories21.png"}, - {name: "accessory_22", img: "resources/customisation/character_accessories/character_accessories22.png"}, - {name: "accessory_23", img: "resources/customisation/character_accessories/character_accessories23.png"}, - {name: "accessory_24", img: "resources/customisation/character_accessories/character_accessories24.png"}, - {name: "accessory_25", img: "resources/customisation/character_accessories/character_accessories25.png"}, - {name: "accessory_26", img: "resources/customisation/character_accessories/character_accessories26.png"}, - {name: "accessory_27", img: "resources/customisation/character_accessories/character_accessories27.png"}, - {name: "accessory_28", img: "resources/customisation/character_accessories/character_accessories28.png"}, - {name: "accessory_29", img: "resources/customisation/character_accessories/character_accessories29.png"}, - {name: "accessory_30", img: "resources/customisation/character_accessories/character_accessories30.png"}, - {name: "accessory_31", img: "resources/customisation/character_accessories/character_accessories31.png"}, - {name: "accessory_32", img: "resources/customisation/character_accessories/character_accessories32.png"}, - {name: "accessory_mate_bottle", img: "resources/customisation/character_accessories/mate_bottle1.png"}, - {name: "accessory_mask", img: "resources/customisation/character_accessories/mask.png"} -]; - -export const LAYERS: Array> = [ - COLOR_RESOURCES, - EYES_RESOURCES, - HAIR_RESOURCES, - CLOTHES_RESOURCES, - HATS_RESOURCES, - ACCESSORIES_RESOURCES -]; - -export const loadAllLayers = (load: LoaderPlugin) => { - for (let j = 0; j < LAYERS.length; j++) { - for (let i = 0; i < LAYERS[j].length; i++) { - load.spritesheet( - LAYERS[j][i].name, - LAYERS[j][i].img, - {frameWidth: 32, frameHeight: 32} - ) - } - } -} - -export const loadCustomTexture = (load: LoaderPlugin, texture: CharacterTexture) => { - const name = 'customCharacterTexture'+texture.id; - load.spritesheet( - name, - texture.url, - {frameWidth: 32, frameHeight: 32} - ); -} - -export const OBJECTS: Array = [ - {name:'layout_modes', img:'resources/objects/layout_modes.png'}, - {name:'teleportation', img:'resources/objects/teleportation.png'}, -]; - -export const loadObject = (load: LoaderPlugin) => { - for (let j = 0; j < OBJECTS.length; j++) { - load.spritesheet( - OBJECTS[j].name, - OBJECTS[j].img, - {frameWidth: 32, frameHeight: 32} - ) - } -} - -export const loadPlayerCharacters = (load: LoaderPlugin) => { - PLAYER_RESOURCES.forEach((playerResource: PlayerResourceDescriptionInterface) => { - load.spritesheet( - playerResource.name, - playerResource.img, - {frameWidth: 32, frameHeight: 32} - ); - }); -} diff --git a/front/src/Phaser/Game/AddPlayerInterface.ts b/front/src/Phaser/Game/AddPlayerInterface.ts index e0c7df0f..0edf197e 100644 --- a/front/src/Phaser/Game/AddPlayerInterface.ts +++ b/front/src/Phaser/Game/AddPlayerInterface.ts @@ -1,5 +1,5 @@ import {PointInterface} from "../../Connexion/ConnexionModels"; -import {BodyResourceDescriptionInterface} from "../Entity/body_character"; +import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures"; export interface AddPlayerInterface { userId: number; diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index 3b87472e..2a41e17e 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/front/src/Phaser/Game/GameManager.ts @@ -55,7 +55,10 @@ export class GameManager { return this.playerName; } - getCharacterLayers(): string[]|null { + getCharacterLayers(): string[] { + if (!this.characterLayers) { + throw 'characterLayers are not set'; + } return this.characterLayers; } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 181592e2..d25c2893 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -30,7 +30,7 @@ import {RemotePlayer} from "../Entity/RemotePlayer"; import {Queue} from 'queue-typescript'; import {SimplePeer, UserSimplePeerInterface} from "../../WebRtc/SimplePeer"; import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene"; -import {loadAllLayers, loadObject, loadPlayerCharacters} from "../Entity/body_character"; +import {lazyLoadPlayerCharacterTextures} from "../Entity/PlayerTexturesLoadingManager"; import { CenterListener, layoutManager, @@ -66,7 +66,7 @@ import {ChatModeIcon} from "../Components/ChatModeIcon"; import {OpenChatIcon, openChatIconName} from "../Components/OpenChatIcon"; import {SelectCharacterScene, SelectCharacterSceneName} from "../Login/SelectCharacterScene"; import {TextureError} from "../../Exception/TextureError"; -import {TextField} from "../Components/TextField"; +import {addLoader} from "../Components/Loader"; export interface GameSceneInitInterface { initPosition: PointInterface|null, @@ -181,7 +181,7 @@ export class GameScene extends ResizableScene implements CenterListener { //hook preload scene preload(): void { - this.initProgressBar(); + addLoader(this); this.load.image(openChatIconName, 'resources/objects/talk.png'); this.load.on(FILE_LOAD_ERROR, (file: {src: string}) => { @@ -201,28 +201,10 @@ export class GameScene extends ResizableScene implements CenterListener { this.onMapLoad(data); } - //add player png - loadPlayerCharacters(this.load); - loadAllLayers(this.load); - loadObject(this.load); - + this.load.spritesheet('layout_modes', 'resources/objects/layout_modes.png', {frameWidth: 32, frameHeight: 32}); this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml'); } - private initProgressBar(): void { - const loadingText = this.add.text(this.game.renderer.width / 2, 200, 'Loading'); - const progress = this.add.graphics(); - this.load.on('progress', (value: number) => { - progress.clear(); - progress.fillStyle(0xffffff, 1); - progress.fillRect(0, 270, 800 * value, 60); - }); - this.load.on('complete', () => { - loadingText.destroy(); - progress.destroy(); - }); - } - // FIXME: we need to put a "unknown" instead of a "any" and validate the structure of the JSON we are receiving. // eslint-disable-next-line @typescript-eslint/no-explicit-any private async onMapLoad(data: any): Promise { @@ -340,11 +322,7 @@ export class GameScene extends ResizableScene implements CenterListener { throw 'playerName is not set'; } this.playerName = playerName; - const characterLayers = gameManager.getCharacterLayers(); - if (!characterLayers) { - throw 'characterLayers are not set'; - } - this.characterLayers = characterLayers; + this.characterLayers = gameManager.getCharacterLayers(); //initalise map @@ -877,15 +855,15 @@ export class GameScene extends ResizableScene implements CenterListener { } createCurrentPlayer(){ - //initialise player //TODO create animation moving between exit and start + const texturesPromise = lazyLoadPlayerCharacterTextures(this.load, this.textures, this.characterLayers); try { this.CurrentPlayer = new Player( this, this.startX, this.startY, this.playerName, - this.characterLayers, + texturesPromise, PlayerAnimationNames.WalkDown, false, this.userInputManager @@ -1061,11 +1039,8 @@ export class GameScene extends ResizableScene implements CenterListener { event: addPlayerData }); } - - /** - * Create new player - */ - private async doAddPlayer(addPlayerData : AddPlayerInterface) : Promise { + + private doAddPlayer(addPlayerData : AddPlayerInterface): void { //check if exist player, if exist, move position if(this.MapPlayersByKey.has(addPlayerData.userId)){ this.updatePlayerPosition({ @@ -1074,39 +1049,21 @@ export class GameScene extends ResizableScene implements CenterListener { }); return; } - // Load textures (in case it is a custom texture) - const characterLayerList: string[] = []; - const loadPromises: Promise[] = []; - for (const characterLayer of addPlayerData.characterLayers) { - characterLayerList.push(characterLayer.name); - if (characterLayer.img) { - console.log('LOADING ', characterLayer.name, characterLayer.img) - loadPromises.push(this.loadSpritesheet(characterLayer.name, characterLayer.img)); - } - } - if (loadPromises.length > 0) { - this.load.start(); - } - //initialise player + const texturesPromise = lazyLoadPlayerCharacterTextures(this.load, this.textures, addPlayerData.characterLayers); const player = new RemotePlayer( addPlayerData.userId, this, addPlayerData.position.x, addPlayerData.position.y, addPlayerData.name, - [], // Let's go with no textures and let's load textures when promises have returned. + texturesPromise, addPlayerData.position.direction, addPlayerData.position.moving ); this.MapPlayers.add(player); this.MapPlayersByKey.set(player.userId, player); player.updatePosition(addPlayerData.position); - - - await Promise.all(loadPromises); - - player.addTextures(characterLayerList, 1); } /** @@ -1262,23 +1219,5 @@ export class GameScene extends ResizableScene implements CenterListener { mediaManager.removeTriggerCloseJitsiFrameButton('close-jisi'); } - private loadSpritesheet(name: string, url: string): Promise { - return new Promise(((resolve, reject) => { - if (this.textures.exists(name)) { - resolve(); - return; - } - this.load.spritesheet( - name, - url, - {frameWidth: 32, frameHeight: 32} - ); - this.load.on('filecomplete-spritesheet-'+name, () => { - console.log('RESOURCE LOADED!'); - resolve(); - }); - })) - } - } diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts index 944b57f9..2cc58a8e 100644 --- a/front/src/Phaser/Login/CustomizeScene.ts +++ b/front/src/Phaser/Login/CustomizeScene.ts @@ -2,15 +2,14 @@ import {EnableCameraSceneName} from "./EnableCameraScene"; import {TextField} from "../Components/TextField"; import Image = Phaser.GameObjects.Image; import Rectangle = Phaser.GameObjects.Rectangle; -import {BodyResourceDescriptionInterface, LAYERS, loadAllLayers, loadCustomTexture} from "../Entity/body_character"; +import {loadAllLayers, loadCustomTexture} from "../Entity/PlayerTexturesLoadingManager"; import Sprite = Phaser.GameObjects.Sprite; import Container = Phaser.GameObjects.Container; import {gameManager} from "../Game/GameManager"; import {ResizableScene} from "./ResizableScene"; import {localUserStore} from "../../Connexion/LocalUserStore"; -import {PlayerResourceDescriptionInterface} from "../Entity/Character"; -import {SelectCharacterSceneName} from "./SelectCharacterScene"; -import {LoginSceneName} from "./LoginScene"; +import {addLoader} from "../Components/Loader"; +import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures"; export const CustomizeSceneName = "CustomizeScene"; @@ -48,16 +47,13 @@ export class CustomizeScene extends ResizableScene { } preload() { + addLoader(this); this.load.image(CustomizeTextures.arrowRight, "resources/objects/arrow_right.png"); this.load.image(CustomizeTextures.icon, "resources/logos/tcm_full.png"); this.load.image(CustomizeTextures.arrowUp, "resources/objects/arrow_up.png"); this.load.bitmapFont(CustomizeTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml'); - //load all the png files - loadAllLayers(this.load); - - // load custom layers - this.layers = LAYERS; + this.layers = loadAllLayers(this.load); const localUser = localUserStore.getLocalUser(); diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts index b6afa993..8d7202a8 100644 --- a/front/src/Phaser/Login/LoginScene.ts +++ b/front/src/Phaser/Login/LoginScene.ts @@ -2,11 +2,9 @@ import {gameManager} from "../Game/GameManager"; import {TextField} from "../Components/TextField"; import {TextInput} from "../Components/TextInput"; import Image = Phaser.GameObjects.Image; -import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character"; import {cypressAsserter} from "../../Cypress/CypressAsserter"; import {SelectCharacterSceneName} from "./SelectCharacterScene"; import {ResizableScene} from "./ResizableScene"; -import {EnableCameraSceneName} from "./EnableCameraScene"; //todo: put this constants in a dedicated file export const LoginSceneName = "LoginScene"; @@ -37,14 +35,6 @@ export class LoginScene extends ResizableScene { // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml'); cypressAsserter.preloadFinished(); - //add player png - PLAYER_RESOURCES.forEach((playerResource: PlayerResourceDescriptionInterface) => { - this.load.spritesheet( - playerResource.name, - playerResource.img, - {frameWidth: 32, frameHeight: 32} - ); - }); } create() { diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts index c09d2d92..723638f5 100644 --- a/front/src/Phaser/Login/SelectCharacterScene.ts +++ b/front/src/Phaser/Login/SelectCharacterScene.ts @@ -2,11 +2,13 @@ import {gameManager} from "../Game/GameManager"; import {TextField} from "../Components/TextField"; import Image = Phaser.GameObjects.Image; import Rectangle = Phaser.GameObjects.Rectangle; -import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character"; import {EnableCameraSceneName} from "./EnableCameraScene"; import {CustomizeSceneName} from "./CustomizeScene"; import {ResizableScene} from "./ResizableScene"; import {localUserStore} from "../../Connexion/LocalUserStore"; +import {loadAllDefaultModels} from "../Entity/PlayerTexturesLoadingManager"; +import {addLoader} from "../Components/Loader"; +import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures"; //todo: put this constants in a dedicated file @@ -32,6 +34,7 @@ export class SelectCharacterScene extends ResizableScene { private selectedRectangleYPos = 0; // Number of the character selected in the columns private selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option private players: Array = new Array(); + private playerModels!: BodyResourceDescriptionInterface[]; constructor() { super({ @@ -40,18 +43,12 @@ export class SelectCharacterScene extends ResizableScene { } preload() { + addLoader(this); this.load.image(LoginTextures.playButton, "resources/objects/play_button.png"); this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png"); // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml'); - //add player png - PLAYER_RESOURCES.forEach((playerResource: PlayerResourceDescriptionInterface) => { - this.load.spritesheet( - playerResource.name, - playerResource.img, - {frameWidth: 32, frameHeight: 32} - ); - }); + this.playerModels = loadAllDefaultModels(this.load); this.load.image(LoginTextures.customizeButton, 'resources/objects/customize.png'); this.load.image(LoginTextures.customizeButtonSelected, 'resources/objects/customize_selected.png'); } @@ -85,7 +82,7 @@ export class SelectCharacterScene extends ResizableScene { this.updateSelectedPlayer(); }); this.input.keyboard.on('keydown-DOWN', () => { - if (this.selectedRectangleYPos < Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow)) { + if (this.selectedRectangleYPos < Math.ceil(this.playerModels.length / this.nbCharactersPerRow)) { this.selectedRectangleYPos++; } this.updateSelectedPlayer(); @@ -106,7 +103,7 @@ export class SelectCharacterScene extends ResizableScene { this.selectedRectangleYPos = Math.floor(playerNumber / this.nbCharactersPerRow); this.updateSelectedPlayer(); } else if (playerNumber === -1) { - this.selectedRectangleYPos = Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow); + this.selectedRectangleYPos = Math.ceil(this.playerModels.length / this.nbCharactersPerRow); this.updateSelectedPlayer(); } } @@ -127,8 +124,8 @@ export class SelectCharacterScene extends ResizableScene { } createCurrentPlayer(): void { - for (let i = 0; i { - this.selectedRectangleYPos = Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow); + this.selectedRectangleYPos = Math.ceil(this.playerModels.length / this.nbCharactersPerRow); this.updateSelectedPlayer(); }); this.selectedPlayer = this.players[0]; - this.selectedPlayer.play(PLAYER_RESOURCES[0].name); + this.selectedPlayer.play(this.playerModels[0].name); } /** @@ -181,7 +178,7 @@ export class SelectCharacterScene extends ResizableScene { private updateSelectedPlayer(): void { this.selectedPlayer?.anims.pause(); // If we selected the customize button - if (this.selectedRectangleYPos === Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow)) { + if (this.selectedRectangleYPos === Math.ceil(this.playerModels.length / this.nbCharactersPerRow)) { this.selectedPlayer = null; this.selectedRectangle.setVisible(false); this.customizeButtonSelected.setVisible(true); @@ -198,7 +195,7 @@ export class SelectCharacterScene extends ResizableScene { this.selectedRectangle.setSize(32, 32); const playerNumber = this.selectedRectangleXPos + this.selectedRectangleYPos * this.nbCharactersPerRow; const player = this.players[playerNumber]; - player.play(PLAYER_RESOURCES[playerNumber].name); + player.play(this.playerModels[playerNumber].name); this.selectedPlayer = player; localUserStore.setPlayerCharacterIndex(playerNumber); } @@ -211,7 +208,7 @@ export class SelectCharacterScene extends ResizableScene { this.customizeButton.x = this.game.renderer.width / 2; this.customizeButtonSelected.x = this.game.renderer.width / 2; - for (let i = 0; i , direction: string, moving: boolean, private userInputManager: UserInputManager ) { - super(Scene, x, y, PlayerTextures, name, direction, moving, 1); + super(Scene, x, y, texturesPromise, name, direction, moving, 1); //the current player model should be push away by other players to prevent conflict this.getBody().setImmovable(false); From f8d4b696e8aa992fe1ed334501d0141fdee008bb Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 12 Jan 2021 13:19:51 +0100 Subject: [PATCH 12/17] Customise characters with admin console - Add new characters choise - Display on 3 line of 6 pers - Add custom characters from admin console wilth level -1 --- front/src/Phaser/Entity/PlayerTextures.ts | 4 +++- .../Entity/PlayerTexturesLoadingManager.ts | 2 +- front/src/Phaser/Login/CustomizeScene.ts | 3 +++ front/src/Phaser/Login/SelectCharacterScene.ts | 16 ++++++++++++++-- 4 files changed, 21 insertions(+), 4 deletions(-) diff --git a/front/src/Phaser/Entity/PlayerTextures.ts b/front/src/Phaser/Entity/PlayerTextures.ts index 6d0f99c0..8a560b56 100644 --- a/front/src/Phaser/Entity/PlayerTextures.ts +++ b/front/src/Phaser/Entity/PlayerTextures.ts @@ -18,6 +18,7 @@ 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/Teacher male 02.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 +26,8 @@ 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"} }; export const COLOR_RESOURCES: BodyResourceDescriptionListInterface = { diff --git a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts index 6f684b2d..c2a421e5 100644 --- a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts +++ b/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): Promise => { const promisesList:Promise[] = []; texturekeys.forEach((textureKey: string|BodyResourceDescriptionInterface) => { diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts index 2cc58a8e..c6364ef6 100644 --- a/front/src/Phaser/Login/CustomizeScene.ts +++ b/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({ diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts index 723638f5..82a9f75c 100644 --- a/front/src/Phaser/Login/SelectCharacterScene.ts +++ b/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,6 +51,18 @@ 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() { From 123ee4bc43c5d30efe69286c5390b79e683f840c Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 12 Jan 2021 15:29:26 +0100 Subject: [PATCH 13/17] Fix responsive and limite select cursor --- .../src/Phaser/Login/SelectCharacterScene.ts | 33 ++++++++++++++----- 1 file changed, 25 insertions(+), 8 deletions(-) diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts index 82a9f75c..a7f17576 100644 --- a/front/src/Phaser/Login/SelectCharacterScene.ts +++ b/front/src/Phaser/Login/SelectCharacterScene.ts @@ -67,8 +67,11 @@ export class SelectCharacterScene extends ResizableScene { create() { this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Select your character'); - - this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 256, 'Press enter to start'); + this.pressReturnField = new TextField( + 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; @@ -82,25 +85,38 @@ 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 + ) { 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(); @@ -160,10 +176,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); From 987c80c9c4e025138f7cef9c2003ca46327da6d4 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 12 Jan 2021 19:48:48 +0100 Subject: [PATCH 14/17] Fix menu --- front/src/Phaser/Menu/MenuScene.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/front/src/Phaser/Menu/MenuScene.ts b/front/src/Phaser/Menu/MenuScene.ts index 3b4c7318..8bd64cd1 100644 --- a/front/src/Phaser/Menu/MenuScene.ts +++ b/front/src/Phaser/Menu/MenuScene.ts @@ -110,6 +110,7 @@ export class MenuScene extends Phaser.Scene { if (!this.sideMenuOpened) return; this.sideMenuOpened = false; this.closeAll(); + this.menuButton.getChildByID('openMenuButton').innerHTML = ``; gameManager.getCurrentGameScene(this).ConsoleGlobalMessageManager.disabledMessageConsole(); this.tweens.add({ targets: this.menuElement, @@ -121,6 +122,7 @@ export class MenuScene extends Phaser.Scene { private openGameSettingsMenu(): void { if (this.settingsMenuOpened) { + this.closeGameQualityMenu(); return; } //close all @@ -278,6 +280,5 @@ export class MenuScene extends Phaser.Scene { private closeAll(){ this.closeGameQualityMenu(); this.closeGameShare(); - this.menuButton.getChildByID('openMenuButton').innerHTML = ``; } } From 993c58cf8ee383b9df6d29e84fbc9c867d50367b Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 12 Jan 2021 19:49:48 +0100 Subject: [PATCH 15/17] Fix select rectangle for customize scene --- front/src/Phaser/Login/SelectCharacterScene.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts index a7f17576..25af61c6 100644 --- a/front/src/Phaser/Login/SelectCharacterScene.ts +++ b/front/src/Phaser/Login/SelectCharacterScene.ts @@ -106,7 +106,10 @@ export class SelectCharacterScene extends ResizableScene { this.input.keyboard.on('keydown-DOWN', () => { if ( this.selectedRectangleYPos < Math.ceil(this.playerModels.length / this.nbCharactersPerRow) - && (((this.selectedRectangleYPos + 1) * this.nbCharactersPerRow) + this.selectedRectangleXPos + 1) <= this.playerModels.length + && ( + (((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++; } From 512be7acd28462792baa2c2bddd272a1938902c1 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Wed, 13 Jan 2021 16:46:24 +0100 Subject: [PATCH 16/17] New basic characters --- front/src/Phaser/Entity/PlayerTextures.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/front/src/Phaser/Entity/PlayerTextures.ts b/front/src/Phaser/Entity/PlayerTextures.ts index 8a560b56..7d10cc1a 100644 --- a/front/src/Phaser/Entity/PlayerTextures.ts +++ b/front/src/Phaser/Entity/PlayerTextures.ts @@ -18,7 +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/Teacher male 02.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"}, @@ -27,7 +31,10 @@ export const PLAYER_RESOURCES: BodyResourceDescriptionListInterface = { "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"}, - "Female9": {name: "Female9", img: "resources/characters/pipoya/Female 07-2.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 = { From 8cf481ec49c4ba5db829add25aecee590db1b5bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Wed, 13 Jan 2021 18:39:28 +0100 Subject: [PATCH 17/17] Fixing bug when no WebGL is available The switch to Phaser 3.50 introduced a bug when WebGL is not available in a browser. The changes in this commit prevent calls to the WebGL pipeline if the pipeline is not available. --- front/src/Phaser/Items/ActionableItem.ts | 6 ++++-- front/src/index.ts | 7 ++++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/front/src/Phaser/Items/ActionableItem.ts b/front/src/Phaser/Items/ActionableItem.ts index a1548f41..e32bad1a 100644 --- a/front/src/Phaser/Items/ActionableItem.ts +++ b/front/src/Phaser/Items/ActionableItem.ts @@ -42,8 +42,10 @@ export class ActionableItem { return; } this.isSelectable = true; - this.sprite.setPipeline(OutlinePipeline.KEY); - this.sprite.pipeline.set2f('uTextureSize', this.sprite.texture.getSourceImage().width, this.sprite.texture.getSourceImage().height); + if (this.sprite.pipeline) { + this.sprite.setPipeline(OutlinePipeline.KEY); + this.sprite.pipeline.set2f('uTextureSize', this.sprite.texture.getSourceImage().width, this.sprite.texture.getSourceImage().height); + } } /** diff --git a/front/src/index.ts b/front/src/index.ts index 46d38a3b..abca6036 100644 --- a/front/src/index.ts +++ b/front/src/index.ts @@ -73,9 +73,10 @@ const config: GameConfig = { }, callbacks: { postBoot: game => { - // FIXME: we should fore WebGL in the config. - const renderer = game.renderer as WebGLRenderer; - renderer.pipelines.add(OutlinePipeline.KEY, new OutlinePipeline(game)); + const renderer = game.renderer; + if (renderer instanceof WebGLRenderer) { + renderer.pipelines.add(OutlinePipeline.KEY, new OutlinePipeline(game)); + } } } };