diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index bb255a6b..a46672ee 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -26,6 +26,8 @@ import GameObject = Phaser.GameObjects.GameObject; import { Queue } from 'queue-typescript'; import {SimplePeer} from "../../WebRtc/SimplePeer"; import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene"; +import FILE_LOAD_ERROR = Phaser.Loader.Events.FILE_LOAD_ERROR; +import {FourOFourSceneName} from "../Reconnecting/FourOFourScene"; export enum Textures { @@ -130,6 +132,11 @@ export class GameScene extends Phaser.Scene { //hook preload scene preload(): void { + this.load.on(FILE_LOAD_ERROR, (file: {src: string}) => { + this.scene.start(FourOFourSceneName, { + file: file.src + }); + }); this.load.on('filecomplete-tilemapJSON-'+this.MapKey, (key: string, type: string, data: unknown) => { this.onMapLoad(data); }); diff --git a/front/src/Phaser/Reconnecting/FourOFourScene.ts b/front/src/Phaser/Reconnecting/FourOFourScene.ts new file mode 100644 index 00000000..4fe4ff24 --- /dev/null +++ b/front/src/Phaser/Reconnecting/FourOFourScene.ts @@ -0,0 +1,66 @@ +import {TextField} from "../Components/TextField"; +import Image = Phaser.GameObjects.Image; +import Sprite = Phaser.GameObjects.Sprite; +import {SelectCharacterSceneInitDataInterface} from "../Login/SelectCharacterScene"; +import Text = Phaser.GameObjects.Text; + +export const FourOFourSceneName = "FourOFourScene"; +enum Textures { + icon = "icon", + mainFont = "main_font" +} + +export class FourOFourScene extends Phaser.Scene { + private mapNotFoundField: TextField; + private couldNotFindField: TextField; + private fileNameField: Text; + private logo: Image; + private cat: Sprite; + private file: string; + + constructor() { + super({ + key: FourOFourSceneName + }); + } + + init({ file }: { file: string }) { + this.file = file; + } + + preload() { + this.load.image(Textures.icon, "resources/logos/tcm_full.png"); + // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap + this.load.bitmapFont(Textures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml'); + this.load.spritesheet( + 'cat', + 'resources/characters/pipoya/Cat 01-1.png', + {frameWidth: 32, frameHeight: 32} + ); + } + + create() { + this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, Textures.icon); + this.add.existing(this.logo); + + this.mapNotFoundField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2, "404 - File not found"); + this.mapNotFoundField.setOrigin(0.5, 0.5).setCenterAlign(); + + this.couldNotFindField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2 + 24, "Could not load file"); + this.couldNotFindField.setOrigin(0.5, 0.5).setCenterAlign(); + + this.fileNameField = this.add.text(this.game.renderer.width / 2, this.game.renderer.height / 2 + 38, this.file, { fontFamily: 'Georgia, "Goudy Bookletter 1911", Times, serif', fontSize: '10px' }); + this.fileNameField.setOrigin(0.5, 0.5); + + this.cat = this.physics.add.sprite(this.game.renderer.width / 2, this.game.renderer.height / 2 - 32, 'cat', 6); + this.cat.flipY=true; + /*this.anims.create({ + key: 'right', + frames: this.anims.generateFrameNumbers('cat', { start: 6, end: 8 }), + frameRate: 10, + repeat: -1 + }); + cat.play('right');*/ + + } +} diff --git a/front/src/index.ts b/front/src/index.ts index 15c2e0e8..eb63b6d0 100644 --- a/front/src/index.ts +++ b/front/src/index.ts @@ -7,13 +7,14 @@ import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene"; import {gameManager} from "./Phaser/Game/GameManager"; import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene"; import {EnableCameraScene} from "./Phaser/Login/EnableCameraScene"; +import {FourOFourScene} from "./Phaser/Reconnecting/FourOFourScene"; const config: GameConfig = { title: "Office game", width: window.innerWidth / RESOLUTION, height: window.innerHeight / RESOLUTION, parent: "game", - scene: [LoginScene, SelectCharacterScene, EnableCameraScene, ReconnectingScene], + scene: [LoginScene, SelectCharacterScene, EnableCameraScene, ReconnectingScene, FourOFourScene], zoom: RESOLUTION, physics: { default: "arcade",