2020-05-25 23:26:27 +02:00
|
|
|
import {gameManager} from "../Game/GameManager";
|
|
|
|
import Rectangle = Phaser.GameObjects.Rectangle;
|
2020-06-23 12:24:36 +02:00
|
|
|
import {EnableCameraSceneName} from "./EnableCameraScene";
|
2020-07-28 15:53:44 +02:00
|
|
|
import {CustomizeSceneName} from "./CustomizeScene";
|
2020-10-20 13:44:57 +02:00
|
|
|
import {localUserStore} from "../../Connexion/LocalUserStore";
|
2021-04-14 17:47:26 +02:00
|
|
|
import {loadAllDefaultModels} from "../Entity/PlayerTexturesLoadingManager";
|
2021-05-04 15:15:23 +02:00
|
|
|
import {addLoader} from "../Components/Loader";
|
2021-05-12 09:13:25 +02:00
|
|
|
import type {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
|
2021-01-24 18:00:30 +01:00
|
|
|
import {AbstractCharacterScene} from "./AbstractCharacterScene";
|
2021-04-07 14:09:45 +02:00
|
|
|
import {areCharacterLayersValid} from "../../Connexion/LocalUser";
|
2021-04-14 17:47:26 +02:00
|
|
|
import {touchScreenManager} from "../../Touch/TouchScreenManager";
|
|
|
|
import {PinchManager} from "../UserInput/PinchManager";
|
2021-04-22 02:29:13 +02:00
|
|
|
import {MenuScene} from "../Menu/MenuScene";
|
2021-05-31 17:50:14 +02:00
|
|
|
import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
|
|
|
|
import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
|
2021-06-02 16:08:31 +02:00
|
|
|
import {waScaleManager} from "../Services/WaScaleManager";
|
2020-05-25 23:26:27 +02:00
|
|
|
|
|
|
|
//todo: put this constants in a dedicated file
|
|
|
|
export const SelectCharacterSceneName = "SelectCharacterScene";
|
|
|
|
|
2021-04-22 02:29:13 +02:00
|
|
|
const selectCharacterKey = 'selectCharacterScene';
|
|
|
|
|
2021-01-24 18:00:30 +01:00
|
|
|
export class SelectCharacterScene extends AbstractCharacterScene {
|
2021-04-23 03:59:14 +02:00
|
|
|
protected readonly nbCharactersPerRow = 6;
|
|
|
|
protected selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option
|
|
|
|
protected players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
|
|
|
|
protected playerModels!: BodyResourceDescriptionInterface[];
|
|
|
|
|
|
|
|
protected selectedRectangle!: Rectangle;
|
2020-05-25 23:26:27 +02:00
|
|
|
|
2021-04-23 03:59:14 +02:00
|
|
|
protected selectCharacterSceneElement!: Phaser.GameObjects.DOMElement;
|
|
|
|
protected currentSelectUser = 0;
|
2021-04-22 02:29:13 +02:00
|
|
|
|
2020-05-25 23:26:27 +02:00
|
|
|
constructor() {
|
|
|
|
super({
|
2021-04-22 02:29:13 +02:00
|
|
|
key: SelectCharacterSceneName,
|
2020-05-25 23:26:27 +02:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
preload() {
|
2021-04-22 02:29:13 +02:00
|
|
|
this.load.html(selectCharacterKey, 'resources/html/selectCharacterScene.html');
|
|
|
|
|
2021-01-24 18:00:30 +01:00
|
|
|
this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => {
|
|
|
|
bodyResourceDescriptions.forEach((bodyResourceDescription) => {
|
|
|
|
this.playerModels.push(bodyResourceDescription);
|
|
|
|
});
|
|
|
|
})
|
2021-01-07 17:11:22 +01:00
|
|
|
this.playerModels = loadAllDefaultModels(this.load);
|
2021-05-04 15:47:45 +02:00
|
|
|
|
|
|
|
//this function must stay at the end of preload function
|
2021-05-04 15:15:23 +02:00
|
|
|
addLoader(this);
|
2020-05-25 23:26:27 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
create() {
|
2021-05-31 17:50:14 +02:00
|
|
|
selectCharacterSceneVisibleStore.set(true);
|
2021-06-02 12:00:35 +02:00
|
|
|
this.events.addListener('wake', () => {selectCharacterSceneVisibleStore.set(true);});
|
2021-04-22 02:29:13 +02:00
|
|
|
|
2021-04-14 17:47:26 +02:00
|
|
|
if (touchScreenManager.supportTouchScreen) {
|
|
|
|
new PinchManager(this);
|
|
|
|
}
|
2020-05-25 23:26:27 +02:00
|
|
|
|
2021-06-02 16:08:31 +02:00
|
|
|
waScaleManager.saveZoom();
|
|
|
|
waScaleManager.zoomModifier = 1;
|
|
|
|
|
2021-04-23 03:59:14 +02:00
|
|
|
const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
|
|
|
|
this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xFFFFFF);
|
|
|
|
this.selectedRectangle.setDepth(2);
|
|
|
|
|
2021-04-22 02:29:13 +02:00
|
|
|
/*create user*/
|
|
|
|
this.createCurrentPlayer();
|
2020-05-25 23:26:27 +02:00
|
|
|
|
|
|
|
this.input.keyboard.on('keyup-ENTER', () => {
|
2021-04-22 02:29:13 +02:00
|
|
|
return this.nextSceneToCameraScene();
|
2020-05-25 23:26:27 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
this.input.keyboard.on('keydown-RIGHT', () => {
|
2021-04-22 02:29:13 +02:00
|
|
|
this.moveToRight();
|
2020-05-25 23:26:27 +02:00
|
|
|
});
|
|
|
|
this.input.keyboard.on('keydown-LEFT', () => {
|
2021-04-22 02:29:13 +02:00
|
|
|
this.moveToLeft();
|
2020-05-25 23:26:27 +02:00
|
|
|
});
|
2021-04-23 03:59:14 +02:00
|
|
|
this.input.keyboard.on('keydown-UP', () => {
|
|
|
|
this.moveToUp();
|
|
|
|
});
|
|
|
|
this.input.keyboard.on('keydown-DOWN', () => {
|
|
|
|
this.moveToDown();
|
|
|
|
});
|
2020-05-25 23:26:27 +02:00
|
|
|
}
|
|
|
|
|
2021-04-23 03:59:14 +02:00
|
|
|
protected nextSceneToCameraScene(): void {
|
2021-04-07 14:09:45 +02:00
|
|
|
if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
|
|
|
|
return;
|
|
|
|
}
|
2021-04-22 02:29:13 +02:00
|
|
|
if(!this.selectedPlayer){
|
|
|
|
return;
|
2020-07-28 15:53:44 +02:00
|
|
|
}
|
2021-04-22 02:29:13 +02:00
|
|
|
this.scene.stop(SelectCharacterSceneName);
|
2021-06-02 16:08:31 +02:00
|
|
|
waScaleManager.restoreZoom();
|
2021-04-22 02:29:13 +02:00
|
|
|
gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
|
|
|
|
gameManager.tryResumingGame(this, EnableCameraSceneName);
|
2021-06-02 12:00:35 +02:00
|
|
|
this.players = [];
|
2021-05-31 17:50:14 +02:00
|
|
|
selectCharacterSceneVisibleStore.set(false);
|
2020-05-25 23:26:27 +02:00
|
|
|
}
|
|
|
|
|
2021-04-23 03:59:14 +02:00
|
|
|
protected nextSceneToCustomizeScene(): void {
|
2021-04-22 02:29:13 +02:00
|
|
|
if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.scene.sleep(SelectCharacterSceneName);
|
2021-06-02 16:08:31 +02:00
|
|
|
this.scene.run(CustomizeSceneName, {from: 'SelectCharacter'});
|
2021-05-31 17:50:14 +02:00
|
|
|
selectCharacterSceneVisibleStore.set(false);
|
2021-04-22 02:29:13 +02:00
|
|
|
}
|
|
|
|
|
2020-05-25 23:26:27 +02:00
|
|
|
createCurrentPlayer(): void {
|
2021-01-07 17:11:22 +01:00
|
|
|
for (let i = 0; i <this.playerModels.length; i++) {
|
|
|
|
const playerResource = this.playerModels[i];
|
2020-05-25 23:26:27 +02:00
|
|
|
|
2021-04-22 02:29:13 +02:00
|
|
|
const [middleX, middleY] = this.getCharacterPosition();
|
|
|
|
const player = this.physics.add.sprite(middleX, middleY, playerResource.name, 0);
|
|
|
|
this.setUpPlayer(player, i);
|
2020-05-25 23:26:27 +02:00
|
|
|
this.anims.create({
|
|
|
|
key: playerResource.name,
|
2021-04-23 03:59:14 +02:00
|
|
|
frames: this.anims.generateFrameNumbers(playerResource.name, {start: 0, end: 11}),
|
|
|
|
frameRate: 8,
|
2020-05-25 23:26:27 +02:00
|
|
|
repeat: -1
|
|
|
|
});
|
|
|
|
player.setInteractive().on("pointerdown", () => {
|
2021-04-22 02:29:13 +02:00
|
|
|
if(this.currentSelectUser === i){
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.currentSelectUser = i;
|
|
|
|
this.moveUser();
|
2020-05-25 23:26:27 +02:00
|
|
|
});
|
|
|
|
this.players.push(player);
|
|
|
|
}
|
2021-04-22 02:29:13 +02:00
|
|
|
this.selectedPlayer = this.players[this.currentSelectUser];
|
|
|
|
this.selectedPlayer.play(this.playerModels[this.currentSelectUser].name);
|
|
|
|
}
|
2020-07-28 15:53:44 +02:00
|
|
|
|
2021-04-23 03:59:14 +02:00
|
|
|
protected moveUser(){
|
2021-04-22 02:29:13 +02:00
|
|
|
for(let i = 0; i < this.players.length; i++){
|
|
|
|
const player = this.players[i];
|
|
|
|
this.setUpPlayer(player, i);
|
|
|
|
}
|
|
|
|
this.updateSelectedPlayer();
|
|
|
|
}
|
|
|
|
|
2021-04-23 03:59:14 +02:00
|
|
|
protected moveToLeft(){
|
2021-04-22 02:29:13 +02:00
|
|
|
if(this.currentSelectUser === 0){
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.currentSelectUser -= 1;
|
|
|
|
this.moveUser();
|
|
|
|
}
|
2020-07-28 15:53:44 +02:00
|
|
|
|
2021-04-23 03:59:14 +02:00
|
|
|
protected moveToRight(){
|
2021-04-22 02:29:13 +02:00
|
|
|
if(this.currentSelectUser === (this.players.length - 1)){
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.currentSelectUser += 1;
|
|
|
|
this.moveUser();
|
|
|
|
}
|
|
|
|
|
2021-04-23 03:59:14 +02:00
|
|
|
protected moveToUp(){
|
|
|
|
if(this.currentSelectUser < this.nbCharactersPerRow){
|
|
|
|
return;
|
2021-04-22 02:29:13 +02:00
|
|
|
}
|
2021-04-23 03:59:14 +02:00
|
|
|
this.currentSelectUser -= this.nbCharactersPerRow;
|
|
|
|
this.moveUser();
|
|
|
|
}
|
|
|
|
|
|
|
|
protected moveToDown(){
|
|
|
|
if((this.currentSelectUser + this.nbCharactersPerRow) > (this.players.length - 1)){
|
|
|
|
return;
|
2021-04-22 02:29:13 +02:00
|
|
|
}
|
2021-04-23 03:59:14 +02:00
|
|
|
this.currentSelectUser += this.nbCharactersPerRow;
|
|
|
|
this.moveUser();
|
|
|
|
}
|
|
|
|
|
2021-05-31 17:50:14 +02:00
|
|
|
protected defineSetupPlayer(num: number){
|
2021-04-23 03:59:14 +02:00
|
|
|
const deltaX = 32;
|
|
|
|
const deltaY = 32;
|
|
|
|
let [playerX, playerY] = this.getCharacterPosition(); // player X and player y are middle of the
|
|
|
|
|
2021-05-31 17:50:14 +02:00
|
|
|
playerX = ( (playerX - (deltaX * 2.5)) + ((deltaX) * (num % this.nbCharactersPerRow)) ); // calcul position on line users
|
|
|
|
playerY = ( (playerY - (deltaY * 2)) + ((deltaY) * ( Math.floor(num / this.nbCharactersPerRow) )) ); // calcul position on column users
|
2021-04-23 03:59:14 +02:00
|
|
|
|
|
|
|
const playerVisible = true;
|
|
|
|
const playerScale = 1;
|
2021-05-31 17:50:14 +02:00
|
|
|
const playerOpacity = 1;
|
2021-04-23 03:59:14 +02:00
|
|
|
|
|
|
|
// if selected
|
2021-05-31 17:50:14 +02:00
|
|
|
if( num === this.currentSelectUser ){
|
2021-04-23 03:59:14 +02:00
|
|
|
this.selectedRectangle.setX(playerX);
|
|
|
|
this.selectedRectangle.setY(playerY);
|
2021-04-22 02:29:13 +02:00
|
|
|
}
|
2021-04-23 03:59:14 +02:00
|
|
|
|
2021-05-31 17:50:14 +02:00
|
|
|
return {playerX, playerY, playerScale, playerOpacity, playerVisible}
|
2021-04-22 02:29:13 +02:00
|
|
|
}
|
2021-04-22 23:36:21 +02:00
|
|
|
|
2021-05-31 17:50:14 +02:00
|
|
|
protected setUpPlayer(player: Phaser.Physics.Arcade.Sprite, num: number){
|
2021-04-22 02:29:13 +02:00
|
|
|
|
2021-05-31 17:50:14 +02:00
|
|
|
const {playerX, playerY, playerScale, playerOpacity, playerVisible} = this.defineSetupPlayer(num);
|
2021-04-22 02:29:13 +02:00
|
|
|
player.setBounce(0.2);
|
2021-05-31 10:20:30 +02:00
|
|
|
player.setCollideWorldBounds(false);
|
2021-04-22 02:29:13 +02:00
|
|
|
player.setVisible( playerVisible );
|
|
|
|
player.setScale(playerScale, playerScale);
|
2021-05-31 17:50:14 +02:00
|
|
|
player.setAlpha(playerOpacity);
|
2021-04-22 02:29:13 +02:00
|
|
|
player.setX(playerX);
|
|
|
|
player.setY(playerY);
|
2020-05-25 23:26:27 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Returns pixel position by on column and row number
|
|
|
|
*/
|
2021-04-23 03:59:14 +02:00
|
|
|
protected getCharacterPosition(): [number, number] {
|
2020-05-25 23:26:27 +02:00
|
|
|
return [
|
2021-04-22 02:29:13 +02:00
|
|
|
this.game.renderer.width / 2,
|
2021-04-23 03:59:14 +02:00
|
|
|
this.game.renderer.height / 2.5
|
2020-05-25 23:26:27 +02:00
|
|
|
];
|
|
|
|
}
|
|
|
|
|
2021-04-23 03:59:14 +02:00
|
|
|
protected updateSelectedPlayer(): void {
|
|
|
|
this.selectedPlayer?.anims.pause(this.selectedPlayer?.anims.currentAnim.frames[0]);
|
2021-04-22 02:29:13 +02:00
|
|
|
const player = this.players[this.currentSelectUser];
|
|
|
|
player.play(this.playerModels[this.currentSelectUser].name);
|
2020-05-25 23:26:27 +02:00
|
|
|
this.selectedPlayer = player;
|
2021-04-22 02:29:13 +02:00
|
|
|
localUserStore.setPlayerCharacterIndex(this.currentSelectUser);
|
2020-05-25 23:26:27 +02:00
|
|
|
}
|
2020-10-08 15:10:46 +02:00
|
|
|
|
2021-05-31 10:20:30 +02:00
|
|
|
public onResize(): void {
|
2021-04-22 02:29:13 +02:00
|
|
|
//move position of user
|
|
|
|
this.moveUser();
|
|
|
|
}
|
2020-05-25 23:26:27 +02:00
|
|
|
}
|