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" ;
2021-04-27 23:58:33 +02:00
import { RESOLUTION } from "../../Enum/EnvironmentVariable" ;
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-04-20 18:49:42 +02:00
const middleX = this . getMiddleX ( ) ;
2021-04-27 23:58:33 +02:00
this . loginSceneElement = this . add . dom ( middleX , 0 ) . createFromCache ( loginSceneKey ) ;
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 {
const middleX = this . getMiddleX ( ) ;
this . tweens . add ( {
targets : this.loginSceneElement ,
2021-04-27 23:58:33 +02:00
x : middleX ,
2021-04-20 18:49:42 +02:00
duration : 1000 ,
ease : 'Power3'
} ) ;
}
2020-10-07 18:03:34 +02:00
public onResize ( ev : UIEvent ) : void {
2021-04-20 18:49:42 +02:00
const middleX = this . getMiddleX ( ) ;
this . tweens . add ( {
targets : this.loginSceneElement ,
2021-04-27 23:58:33 +02:00
x : middleX ,
2021-04-20 18:49:42 +02:00
duration : 1000 ,
ease : 'Power3'
} ) ;
2020-10-07 18:03:34 +02:00
}
2021-04-20 18:49:42 +02:00
private getMiddleX ( ) : number {
const middleX = ( ( window . innerWidth ) - ( ( this . loginSceneElement && this . loginSceneElement . width > 0 ? this . loginSceneElement.width : 200 /*FIXME to use a const will be injected in HTMLElement*/ ) * 2 ) ) / 2 ;
2021-04-27 23:58:33 +02:00
return ( middleX > 0 ? ( middleX / 2 ) : 0 ) ;
2021-04-20 18:49:42 +02:00
}
2020-05-01 22:23:41 +02:00
}