diff --git a/front/package.json b/front/package.json index c3b9f880..4892eba1 100644 --- a/front/package.json +++ b/front/package.json @@ -27,7 +27,7 @@ "google-protobuf": "^3.13.0", "phaser": "^3.22.0", "queue-typescript": "^1.0.1", - "quill": "1.3.6", + "quill": "1.3.7", "simple-peer": "^9.6.2", "socket.io-client": "^2.3.0", "webpack-require-http": "^0.4.3" diff --git a/front/src/Phaser/Components/TextInput.ts b/front/src/Phaser/Components/TextInput.ts index 7a549d1f..47f713e0 100644 --- a/front/src/Phaser/Components/TextInput.ts +++ b/front/src/Phaser/Components/TextInput.ts @@ -38,4 +38,16 @@ export class TextInput extends Phaser.GameObjects.BitmapText { getText(): string { return this.text; } + + setX(x: number): this { + super.setX(x); + this.underLine.x = x; + return this; + } + + setY(y: number): this { + super.setY(y); + this.underLine.y = y+1; + return this; + } } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index ed98d9b9..0dc89a7b 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -44,6 +44,7 @@ import {connectionManager} from "../../Connexion/ConnectionManager"; import {RoomConnection} from "../../Connexion/RoomConnection"; import {GlobalMessageManager} from "../../Administration/GlobalMessageManager"; import {ConsoleGlobalMessageManager} from "../../Administration/ConsoleGlobalMessageManager"; +import {ResizableScene} from "../Login/ResizableScene"; export enum Textures { @@ -85,7 +86,7 @@ interface DeleteGroupEventInterface { groupId: number } -export class GameScene extends Phaser.Scene implements CenterListener { +export class GameScene extends ResizableScene implements CenterListener { GameManager : GameManager; Terrains : Array; CurrentPlayer!: CurrentGamerInterface; @@ -131,7 +132,6 @@ export class GameScene extends Phaser.Scene implements CenterListener { private startLayerName: string|undefined; private presentationModeSprite!: Sprite; private chatModeSprite!: Sprite; - private onResizeCallback!: (this: Window, ev: UIEvent) => void; private gameMap!: GameMap; private actionableItems: Map = new Map(); // The item that can be selected by pressing the space key. @@ -258,7 +258,6 @@ export class GameScene extends Phaser.Scene implements CenterListener { this.scene.stop(this.scene.key); this.scene.remove(this.scene.key); - window.removeEventListener('resize', this.onResizeCallback); }) connection.onActionableEvent((message => { @@ -552,8 +551,6 @@ export class GameScene extends Phaser.Scene implements CenterListener { this.switchLayoutMode(); }); - this.onResizeCallback = this.onResize.bind(this); - window.addEventListener('resize', this.onResizeCallback); this.reposition(); // From now, this game scene will be notified of reposition events @@ -944,7 +941,6 @@ export class GameScene extends Phaser.Scene implements CenterListener { this.simplePeer.unregister(); this.scene.stop(); this.scene.remove(this.scene.key); - window.removeEventListener('resize', this.onResizeCallback); this.scene.start(nextSceneKey.key, { startLayerName: nextSceneKey.hash }); @@ -1143,7 +1139,7 @@ export class GameScene extends Phaser.Scene implements CenterListener { this.connection.emitActionableEvent(itemId, eventName, state, parameters); } - private onResize(): void { + public onResize(): void { this.reposition(); // Send new viewport to server diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts index 50834bd1..4ada5026 100644 --- a/front/src/Phaser/Login/CustomizeScene.ts +++ b/front/src/Phaser/Login/CustomizeScene.ts @@ -6,6 +6,7 @@ import {LAYERS, loadAllLayers} from "../Entity/body_character"; import Sprite = Phaser.GameObjects.Sprite; import Container = Phaser.GameObjects.Container; import {gameManager} from "../Game/GameManager"; +import {ResizableScene} from "./ResizableScene"; export const CustomizeSceneName = "CustomizeScene"; @@ -16,7 +17,7 @@ enum CustomizeTextures{ arrowUp = "arrow_up", } -export class CustomizeScene extends Phaser.Scene { +export class CustomizeScene extends ResizableScene { private textField!: TextField; private enterField!: TextField; @@ -35,8 +36,6 @@ export class CustomizeScene extends Phaser.Scene { private containersRow: Array> = new Array>(); private activeRow = 0; - private repositionCallback!: (this: Window, ev: UIEvent) => void; - constructor() { super({ key: CustomizeSceneName @@ -144,10 +143,6 @@ export class CustomizeScene extends Phaser.Scene { this.moveLayers(); } }); - - this.repositionCallback = this.reposition.bind(this); - window.addEventListener('resize', this.repositionCallback); - } update(time: number, delta: number): void { super.update(time, delta); @@ -249,7 +244,7 @@ export class CustomizeScene extends Phaser.Scene { } } - private reposition() { + public onResize(): void { this.moveLayers(); this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2; diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts index 308ba3ae..6e6bf291 100644 --- a/front/src/Phaser/Login/LoginScene.ts +++ b/front/src/Phaser/Login/LoginScene.ts @@ -7,6 +7,7 @@ import Rectangle = Phaser.GameObjects.Rectangle; import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character"; import {cypressAsserter} from "../../Cypress/CypressAsserter"; import {SelectCharacterSceneName} from "./SelectCharacterScene"; +import {ResizableScene} from "./ResizableScene"; //todo: put this constants in a dedicated file export const LoginSceneName = "LoginScene"; @@ -15,12 +16,12 @@ enum LoginTextures { mainFont = "main_font" } -export class LoginScene extends Phaser.Scene { - private nameInput: TextInput|null = null; - private textField: TextField|null = null; - private infoTextField: TextField|null = null; - private pressReturnField: TextField|null = null; - private logo: Image|null = null; +export class LoginScene extends ResizableScene { + private nameInput!: TextInput; + private textField!: TextField; + private infoTextField!: TextField; + private pressReturnField!: TextField; + private logo!: Image; private name: string = ''; constructor() { @@ -93,4 +94,14 @@ export class LoginScene extends Phaser.Scene { this.scene.start(SelectCharacterSceneName); } + + public onResize(ev: UIEvent): void { + this.textField.x = this.game.renderer.width / 2; + this.nameInput.setX(this.game.renderer.width / 2 - 64); + this.pressReturnField.x = this.game.renderer.width / 2; + this.logo.x = this.game.renderer.width - 30; + this.logo.y = this.game.renderer.height - 20; + this.infoTextField.y = this.game.renderer.height - 35; + } + } diff --git a/front/src/Phaser/Login/ResizableScene.ts b/front/src/Phaser/Login/ResizableScene.ts new file mode 100644 index 00000000..82123e2b --- /dev/null +++ b/front/src/Phaser/Login/ResizableScene.ts @@ -0,0 +1,5 @@ +import {Scene} from "phaser"; + +export abstract class ResizableScene extends Scene { + public abstract onResize(ev: UIEvent): void; +} diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts index 8d3c7ab1..e5df0a0d 100644 --- a/front/src/Phaser/Login/SelectCharacterScene.ts +++ b/front/src/Phaser/Login/SelectCharacterScene.ts @@ -5,6 +5,7 @@ import Rectangle = Phaser.GameObjects.Rectangle; import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character"; import {EnableCameraSceneName} from "./EnableCameraScene"; import {CustomizeSceneName} from "./CustomizeScene"; +import {ResizableScene} from "./ResizableScene"; //todo: put this constants in a dedicated file @@ -17,7 +18,7 @@ enum LoginTextures { customizeButtonSelected = "customize_button_selected" } -export class SelectCharacterScene extends Phaser.Scene { +export class SelectCharacterScene extends ResizableScene { private readonly nbCharactersPerRow = 4; private textField!: TextField; private pressReturnField!: TextField; @@ -242,4 +243,26 @@ export class SelectCharacterScene extends Phaser.Scene { window.localStorage.setItem('selectedPlayer', String(playerNumber)); } } + + public onResize(ev: UIEvent): void { + this.textField.x = this.game.renderer.width / 2; + this.pressReturnField.x = this.game.renderer.width / 2; + this.logo.x = this.game.renderer.width - 30; + this.logo.y = this.game.renderer.height - 20; + this.customizeButton.x = this.game.renderer.width / 2; + this.customizeButtonSelected.x = this.game.renderer.width / 2; + + for (let i = 0; i { const {width, height} = CoWebsiteManager.getGameSize(); diff --git a/front/yarn.lock b/front/yarn.lock index c014d18d..933a02b4 100644 --- a/front/yarn.lock +++ b/front/yarn.lock @@ -1893,7 +1893,7 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2: assign-symbols "^1.0.0" is-extendable "^1.0.1" -extend@^3.0.1, extend@^3.0.2: +extend@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa" integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g== @@ -3871,15 +3871,15 @@ quill-delta@^3.6.2: extend "^3.0.2" fast-diff "1.1.2" -quill@1.3.6: - version "1.3.6" - resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.6.tgz#99f4de1fee85925a0d7d4163b6d8328f23317a4d" - integrity sha512-K0mvhimWZN6s+9OQ249CH2IEPZ9JmkFuCQeHAOQax3EZ2nDJ3wfGh59mnlQaZV2i7u8eFarx6wAtvQKgShojug== +quill@1.3.7: + version "1.3.7" + resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8" + integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g== dependencies: clone "^2.1.1" deep-equal "^1.0.1" eventemitter3 "^2.0.3" - extend "^3.0.1" + extend "^3.0.2" parchment "^1.1.4" quill-delta "^3.6.2" diff --git a/website/package-lock.json b/website/package-lock.json index 96ba750a..286ca3f0 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -2287,9 +2287,9 @@ "dev": true }, "elliptic": { - "version": "6.4.1", - "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.1.tgz", - "integrity": "sha512-BsXLz5sqX8OHcsh7CqBMztyXARmGQ3LWPtGjJi6DiJHq5C/qvi9P3OqgswKSDftbu8+IoI/QDTAm2fFnQ9SZSQ==", + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz", + "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==", "dev": true, "requires": { "bn.js": "^4.4.0", @@ -3487,13 +3487,6 @@ "glob": "~7.1.1", "lodash": "~4.17.12", "minimatch": "~3.0.2" - }, - "dependencies": { - "lodash": { - "version": "4.17.15", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", - "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" - } } }, "graceful-fs": { @@ -4234,9 +4227,9 @@ } }, "lodash": { - "version": "4.17.15", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", - "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" + "version": "4.17.20", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", + "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==" }, "lodash.get": { "version": "4.4.2", @@ -4721,11 +4714,6 @@ "which": "^1.2.9" } }, - "lodash": { - "version": "4.17.15", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", - "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" - }, "lru-cache": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",