2b834d36e2547bb9479b2d7bfe17d43b056ffb59
[libreadventure.git] / front / src / Phaser / Login / LoginScene.ts
1 import {gameManager} from "../Game/GameManager";
2 import {TextField} from "../Components/TextField";
3 import {TextInput} from "../Components/TextInput";
4 import {ClickButton} from "../Components/ClickButton";
5 import Image = Phaser.GameObjects.Image;
6 import Rectangle = Phaser.GameObjects.Rectangle;
7 import {PLAYER_RESOURCES} from "../Entity/Character";
8 import {cypressAsserter} from "../../Cypress/CypressAsserter";
9 import {SelectCharacterSceneInitDataInterface, SelectCharacterSceneName} from "./SelectCharacterScene";
10
11 //todo: put this constants in a dedicated file
12 export const LoginSceneName = "LoginScene";
13 enum LoginTextures {
14 icon = "icon",
15 mainFont = "main_font"
16 }
17
18 export class LoginScene extends Phaser.Scene {
19 private nameInput: TextInput|null = null;
20 private textField: TextField|null = null;
21 private infoTextField: TextField|null = null;
22 private pressReturnField: TextField|null = null;
23 private logo: Image|null = null;
24 private name: string = '';
25
26 constructor() {
27 super({
28 key: LoginSceneName
29 });
30 if (window.localStorage) {
31 this.name = window.localStorage.getItem('playerName') ?? '';
32 }
33 }
34
35 preload() {
36 cypressAsserter.preloadStarted();
37 //this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
38 this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png");
39 // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
40 this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
41 cypressAsserter.preloadFinished();
42 //add player png
43 PLAYER_RESOURCES.forEach((playerResource: any) => {
44 this.load.spritesheet(
45 playerResource.name,
46 playerResource.img,
47 {frameWidth: 32, frameHeight: 32}
48 );
49 });
50 }
51
52 create() {
53 cypressAsserter.initStarted();
54
55 this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Enter your name:');
56 this.textField.setOrigin(0.5).setCenterAlign()
57 this.nameInput = new TextInput(this, this.game.renderer.width / 2 - 128, 70, 8, this.name,(text: string) => {
58
59 this.name = text;
60 if (window.localStorage) {
61 window.localStorage.setItem('playerName', text);
62 }
63 });
64
65 this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Press enter to start');
66 this.pressReturnField.setOrigin(0.5).setCenterAlign()
67
68 //this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
69 //this.add.existing(this.logo);
70
71 let infoText = "Commands: \n - Arrows or Z,Q,S,D to move\n - SHIFT to run";
72 this.infoTextField = new TextField(this, 10, this.game.renderer.height - 35, infoText);
73
74 this.input.keyboard.on('keyup-ENTER', () => {
75 if (this.name === '') {
76 return
77 }
78 this.login(this.name);
79 });
80
81 cypressAsserter.initFinished();
82 }
83
84 update(time: number, delta: number): void {
85 if (this.name == '') {
86 this.pressReturnField?.setVisible(false);
87 } else {
88 this.pressReturnField?.setVisible(!!(Math.floor(time / 500) % 2));
89 }
90 }
91
92 private login(name: string): void {
93 this.scene.start(SelectCharacterSceneName, { name } as SelectCharacterSceneInitDataInterface);
94 }
95 }