2020-05-06 01:50:01 +02:00
|
|
|
import {gameManager} from "../Game/GameManager";
|
2020-07-28 15:53:44 +02:00
|
|
|
import {SelectCharacterSceneName} from "./SelectCharacterScene";
|
2020-10-07 18:03:34 +02:00
|
|
|
import {ResizableScene} from "./ResizableScene";
|
2021-02-03 23:22:23 +01:00
|
|
|
import { localUserStore } from "../../Connexion/LocalUserStore";
|
2021-04-20 18:49:42 +02:00
|
|
|
import {MenuScene} from "../Menu/MenuScene";
|
2021-04-23 03:59:14 +02:00
|
|
|
import { isUserNameValid } from "../../Connexion/LocalUser";
|
2020-04-26 17:54:56 +02:00
|
|
|
|
|
|
|
export const LoginSceneName = "LoginScene";
|
2021-04-20 18:49:42 +02:00
|
|
|
|
|
|
|
const loginSceneKey = 'loginScene';
|
2020-04-26 17:54:56 +02:00
|
|
|
|
2020-10-07 18:03:34 +02:00
|
|
|
export class LoginScene extends ResizableScene {
|
2021-04-20 18:49:42 +02:00
|
|
|
|
|
|
|
private loginSceneElement!: Phaser.GameObjects.DOMElement;
|
2020-06-03 11:55:31 +02:00
|
|
|
private name: string = '';
|
2020-04-29 00:01:37 +02:00
|
|
|
|
2020-04-26 17:54:56 +02:00
|
|
|
constructor() {
|
|
|
|
super({
|
|
|
|
key: LoginSceneName
|
|
|
|
});
|
2020-12-04 11:30:35 +01:00
|
|
|
this.name = gameManager.getPlayerName() || '';
|
2020-04-26 17:54:56 +02:00
|
|
|
}
|
2020-04-29 00:01:37 +02:00
|
|
|
|
2020-04-26 17:54:56 +02:00
|
|
|
preload() {
|
2021-04-20 18:49:42 +02:00
|
|
|
this.load.html(loginSceneKey, 'resources/html/loginScene.html');
|
2020-04-26 17:54:56 +02:00
|
|
|
}
|
2020-04-29 00:01:37 +02:00
|
|
|
|
2020-04-26 17:54:56 +02:00
|
|
|
create() {
|
2021-05-05 17:07:03 +02:00
|
|
|
this.loginSceneElement = this.add.dom(-1000, 0).createFromCache(loginSceneKey);
|
|
|
|
this.centerXDomElement(this.loginSceneElement, 200);
|
2021-04-20 18:49:42 +02:00
|
|
|
MenuScene.revealMenusAfterInit(this.loginSceneElement, loginSceneKey);
|
2020-04-26 18:48:41 +02:00
|
|
|
|
2021-04-20 18:49:42 +02:00
|
|
|
const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement;
|
|
|
|
const inputElement = this.loginSceneElement.getChildByID('loginSceneName') as HTMLInputElement;
|
|
|
|
inputElement.value = localUserStore.getName() ?? '';
|
|
|
|
inputElement.focus();
|
|
|
|
inputElement.addEventListener('keypress', (event: KeyboardEvent) => {
|
2021-04-23 03:59:14 +02:00
|
|
|
if(inputElement.value.length > 7){
|
2021-04-20 18:49:42 +02:00
|
|
|
event.preventDefault();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
pErrorElement.innerHTML = '';
|
2021-04-23 03:59:14 +02:00
|
|
|
if(inputElement.value && !isUserNameValid(inputElement.value)){
|
|
|
|
pErrorElement.innerHTML = 'Invalid user name: only letters and numbers are allowed. No spaces.';
|
|
|
|
}
|
2021-04-20 18:49:42 +02:00
|
|
|
if (event.key === 'Enter') {
|
|
|
|
event.preventDefault();
|
|
|
|
this.login(inputElement);
|
|
|
|
return;
|
2020-05-01 23:48:30 +02:00
|
|
|
}
|
2020-05-01 23:19:51 +02:00
|
|
|
});
|
2020-04-29 00:01:37 +02:00
|
|
|
|
2021-04-20 18:49:42 +02:00
|
|
|
const continuingButton = this.loginSceneElement.getChildByID('loginSceneFormSubmit') as HTMLButtonElement;
|
|
|
|
continuingButton.addEventListener('click', (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
this.login(inputElement);
|
|
|
|
});
|
2020-04-26 17:54:56 +02:00
|
|
|
}
|
2020-04-29 00:01:37 +02:00
|
|
|
|
2021-04-20 18:49:42 +02:00
|
|
|
private login(inputElement: HTMLInputElement): void {
|
|
|
|
const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement;
|
|
|
|
this.name = inputElement.value;
|
|
|
|
if (this.name === '') {
|
|
|
|
pErrorElement.innerHTML = 'The name is empty';
|
|
|
|
return
|
|
|
|
}
|
2021-04-23 03:59:14 +02:00
|
|
|
if(!isUserNameValid(this.name)){
|
|
|
|
pErrorElement.innerHTML = 'Invalid user name: only letters and numbers are allowed. No spaces.';
|
|
|
|
return
|
|
|
|
}
|
2021-02-03 23:22:23 +01:00
|
|
|
if (this.name === '') return
|
2021-04-20 18:49:42 +02:00
|
|
|
gameManager.setPlayerName(this.name);
|
2020-07-28 15:53:44 +02:00
|
|
|
|
2020-12-16 15:09:58 +01:00
|
|
|
this.scene.stop(LoginSceneName)
|
2020-12-15 18:00:04 +01:00
|
|
|
gameManager.tryResumingGame(this, SelectCharacterSceneName);
|
2020-12-16 15:09:58 +01:00
|
|
|
this.scene.remove(LoginSceneName)
|
2020-05-04 01:48:14 +02:00
|
|
|
}
|
2020-10-07 18:03:34 +02:00
|
|
|
|
2021-04-20 18:49:42 +02:00
|
|
|
update(time: number, delta: number): void {
|
|
|
|
|
2020-10-07 18:03:34 +02:00
|
|
|
}
|
|
|
|
|
2021-05-05 17:07:03 +02:00
|
|
|
public onResize(ev: UIEvent): void {
|
|
|
|
this.centerXDomElement(this.loginSceneElement, 200);
|
2021-04-20 18:49:42 +02:00
|
|
|
}
|
2020-05-01 22:23:41 +02:00
|
|
|
}
|