From: gparant Date: Sat, 9 May 2020 17:41:21 +0000 (+0200) Subject: Multi Scene in back end X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=fb8d9bf9a8a4375a2466de0251338a9e03882b9f;p=libreadventure.git Multi Scene in back end - Change maps url to get maps - Change GameScene to create scene with file since back end - Change LoginScene to upload scene and start game --- diff --git a/back/src/App.ts b/back/src/App.ts index 9af57ac..27006d8 100644 --- a/back/src/App.ts +++ b/back/src/App.ts @@ -13,7 +13,7 @@ class App { public server: http.Server; public ioSocketController: IoSocketController; public authenticateController: AuthenticateController; - public AuthenticateMiddleware: AuthenticateMiddleware; + //public AuthenticateMiddleware: AuthenticateMiddleware; public mapController: MapController; constructor() { @@ -26,7 +26,7 @@ class App { //create socket controllers this.ioSocketController = new IoSocketController(this.server); this.authenticateController = new AuthenticateController(this.app); - this.AuthenticateMiddleware = new AuthenticateMiddleware(this.app); + //this.AuthenticateMiddleware = new AuthenticateMiddleware(this.app); this.mapController = new MapController(this.app); } diff --git a/back/src/Controller/AuthenticateController.ts b/back/src/Controller/AuthenticateController.ts index f9eed47..0b27290 100644 --- a/back/src/Controller/AuthenticateController.ts +++ b/back/src/Controller/AuthenticateController.ts @@ -27,7 +27,11 @@ export class AuthenticateController{ return res.status(OK).send({ token: token, roomId: ROOM, - userId: userId + userId: userId, + maps: [ + "floor0", + "floor1" + ] }); }); } diff --git a/back/src/Controller/MapController.ts b/back/src/Controller/MapController.ts index b51c36b..b9d30c6 100644 --- a/back/src/Controller/MapController.ts +++ b/back/src/Controller/MapController.ts @@ -3,33 +3,29 @@ import path from "path"; import {Application, Request, Response} from "express"; import {OK} from "http-status-codes"; -const MapFloor0 = require('../Assets/Maps/Floor0/floor0.json'); -const MapFloor1 = require('../Assets/Maps/Floor1/floor1.json'); +export class MapController { + App: Application; -export class MapController{ - App : Application; - - constructor(App : Application) { + constructor(App: Application) { this.App = App; - this.getFloor0(); - this.getFloor1(); + this.getMpas(); this.assetMaps(); } - assetMaps(){ - this.App.use('/maps', express.static('src/Assets/Maps')); + assetMaps() { + this.App.use('/map/files', express.static('src/Assets/Maps')); } //permit to login on application. Return token to connect on Websocket IO. - getFloor0(){ - this.App.get("/floor0", (req: Request, res: Response) => { - return res.status(OK).send(MapFloor0); - }); - } - - getFloor1(){ - this.App.get("/floor1", (req: Request, res: Response) => { - return res.status(OK).send(MapFloor1); + getMpas() { + this.App.get("/maps", (req: Request, res: Response) => { + return res.status(OK).send({ + startMapKey: "floor0", + maps: [ + {mapKey: "floor0", mapUrl: "/map/files/Floor0"}, + {mapKey: "floor1", mapUrl: "/map/files/Floor1"}, + ] + }); }); } } \ No newline at end of file diff --git a/front/src/Connexion.ts b/front/src/Connexion.ts index 0d0f13e..2c695bd 100644 --- a/front/src/Connexion.ts +++ b/front/src/Connexion.ts @@ -143,6 +143,8 @@ export interface ConnexionInterface { createConnexion(characterSelected: string): Promise; + loadMaps(): Promise; + joinARoom(roomId: string, character: string): void; sharePosition(x: number, y: number, direction: string, character: string): void; @@ -173,6 +175,9 @@ export class Connexion implements ConnexionInterface { this.GameManager = GameManager; } + /** + * @param characterSelected + */ createConnexion(characterSelected: string): Promise { return Axios.post(`${API_URL}/login`, {email: this.email}) .then((res) => { @@ -199,13 +204,22 @@ export class Connexion implements ConnexionInterface { this.groupUpdatedOrCreated(); this.groupDeleted(); - return this; + return res.data; }) .catch((err) => { console.error(err); throw err; }); } + + loadMaps() : Promise{ + return Axios.get(`${API_URL}/maps`).then((res) => { + return res.data; + }).catch((err) => { + console.error(err); + throw err; + }); + } /** * diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index 39afa8b..c590c2c 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/front/src/Phaser/Game/GameManager.ts @@ -1,13 +1,10 @@ -import {GameScene} from "./GameScene"; -import {ROOM} from "../../Enum/EnvironmentVariable" +import {GameScene, GameSceneInterface} from "./GameScene"; import { Connexion, - ConnexionInterface, GroupCreatedUpdatedMessageInterface, ListMessageUserPositionInterface } from "../../Connexion"; import {SimplePeerInterface, SimplePeer} from "../../WebRtc/SimplePeer"; -import {LogincScene} from "../Login/LogincScene"; export enum StatusGameManagerEnum { IN_PROGRESS = 1, @@ -24,7 +21,7 @@ export interface HasMovedEvent { export class GameManager { status: number; private ConnexionInstance: Connexion; - private currentGameScene: GameScene; + private currentGameScene: GameSceneInterface; private playerName: string; SimplePeer : SimplePeerInterface; private characterUserSelected: string; @@ -37,12 +34,23 @@ export class GameManager { this.playerName = name; this.characterUserSelected = characterUserSelected; this.ConnexionInstance = new Connexion(name, this); - return this.ConnexionInstance.createConnexion(characterUserSelected).then(() => { + return this.ConnexionInstance.createConnexion(characterUserSelected).then((data : any) => { this.SimplePeer = new SimplePeer(this.ConnexionInstance); + return data; + }).catch((err) => { + throw err; }); } - setCurrentGameScene(gameScene: GameScene) { + loadMaps(){ + return this.ConnexionInstance.loadMaps().then((maps) => { + return maps; + }).catch((err) => { + throw err; + }); + } + + setCurrentGameScene(gameScene: GameSceneInterface) { this.currentGameScene = gameScene; } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 26ce32c..68ef1f3 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -11,16 +11,12 @@ import Graphics = Phaser.GameObjects.Graphics; import Texture = Phaser.Textures.Texture; import Sprite = Phaser.GameObjects.Sprite; import CanvasTexture = Phaser.Textures.CanvasTexture; -import {Floor1Name} from "./GameSceneFloor1"; +import CreateSceneFromObjectConfig = Phaser.Types.Scenes.CreateSceneFromObjectConfig; export enum Textures { - Player = "male1", - Map = 'floor0', - MapUrl = 'maps/floor0.json' + Player = "male1" } -export const Floor0Name = "Floor0"; - export interface GameSceneInterface extends Phaser.Scene { Map: Phaser.Tilemaps.Tilemap; createCurrentPlayer(UserId : string) : void; @@ -29,7 +25,7 @@ export interface GameSceneInterface extends Phaser.Scene { updateOrCreateMapPlayer(UsersPosition : Array): void; deleteGroup(groupId: string): void; } -export class GameScene extends Phaser.Scene implements GameSceneInterface{ +export class GameScene extends Phaser.Scene implements GameSceneInterface, CreateSceneFromObjectConfig{ GameManager : GameManager; Terrains : Array; CurrentPlayer: CurrentGamerInterface; @@ -38,24 +34,31 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ Layers : Array; Objects : Array; map: ITiledMap; - groups: Map + groups: Map; startX = 704;// 22 case startY = 32; // 1 case circleTexture: CanvasTexture; - constructor() { + MapKey: string; + MapUrlFile: string; + + constructor(MapKey : string = "", MapUrlFile: string = "") { super({ - key: Floor0Name + key: MapKey }); + this.GameManager = gameManager; this.Terrains = []; this.groups = new Map(); + + this.MapKey = MapKey; + this.MapUrlFile = MapUrlFile; } //hook preload scene preload(): void { this.GameManager.setCurrentGameScene(this); - this.load.on('filecomplete-tilemapJSON-'+Textures.Map, (key: string, type: string, data: any) => { + this.load.on('filecomplete-tilemapJSON-'+this.MapKey, (key: string, type: string, data: any) => { // Triggered when the map is loaded // Load tiles attached to the map recursively this.map = data.data; @@ -64,11 +67,13 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ console.warn("Don't know how to handle tileset ", tileset) return; } - let path = Textures.MapUrl.substr(0, Textures.MapUrl.lastIndexOf('/')); - this.load.image(tileset.name, path + '/' + tileset.image); + console.log(tileset); + console.log(tileset.name, `${this.MapUrlFile}/${tileset.image}`); + this.load.image(tileset.name, `${this.MapUrlFile}/${tileset.image}`); }) }); - this.load.tilemapTiledJSON(Textures.Map, Textures.MapUrl); + console.log(this.MapKey, `${this.MapUrlFile}/${this.MapKey}.json`); + this.load.tilemapTiledJSON(this.MapKey, `${this.MapUrlFile}/${this.MapKey}.json`); //add player png PLAYER_RESOURCES.forEach((playerResource: any) => { @@ -88,7 +93,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ //hook create scene create(): void { //initalise map - this.Map = this.add.tilemap(Textures.Map); + this.Map = this.add.tilemap(this.MapKey); this.map.tilesets.forEach((tileset: ITiledTileSet) => { this.Terrains.push(this.Map.addTilesetImage(tileset.name, tileset.name)); }); @@ -132,6 +137,9 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ // Let's generate the circle for the group delimiter this.circleTexture = this.textures.createCanvas('circleSprite', 96, 96); + if(!this.circleTexture || this.circleTexture.context){ + return; + } let context = this.circleTexture.context; context.beginPath(); context.arc(48, 48, 48, 0, 2 * Math.PI, false); @@ -224,6 +232,12 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ */ update(time: number, delta: number) : void { this.CurrentPlayer.moveUser(delta); + if( + 832 <= this.CurrentPlayer.x && this.CurrentPlayer.x <= 864 + && 0 <= this.CurrentPlayer.y && this.CurrentPlayer.y <= 64 + ){ + //this.scene.start(Floor1Name); + } } /** diff --git a/front/src/Phaser/Login/LogincScene.ts b/front/src/Phaser/Login/LogincScene.ts index c3aaa05..f35ffc2 100644 --- a/front/src/Phaser/Login/LogincScene.ts +++ b/front/src/Phaser/Login/LogincScene.ts @@ -2,14 +2,13 @@ import {gameManager} from "../Game/GameManager"; import {TextField} from "../Components/TextField"; import {TextInput} from "../Components/TextInput"; import {ClickButton} from "../Components/ClickButton"; -import {GameSceneInterface, Floor0Name, Textures} from "../Game/GameScene"; +import {GameScene, GameSceneInterface} from "../Game/GameScene"; import Image = Phaser.GameObjects.Image; -import {Player} from "../Player/Player"; -import {getPlayerAnimations, PlayerAnimationNames} from "../Player/Animation"; import Rectangle = Phaser.GameObjects.Rectangle; import {PLAYER_RESOURCES} from "../Entity/PlayableCaracter"; import {cypressAsserter} from "../../Cypress/CypressAsserter"; import {GroupCreatedUpdatedMessageInterface, MessageUserPositionInterface} from "../../Connexion"; +import {API_URL} from "../../Enum/EnvironmentVariable"; //todo: put this constants in a dedicated file export const LoginSceneName = "LoginScene"; @@ -94,15 +93,29 @@ export class LogincScene extends Phaser.Scene implements GameSceneInterface { } private async login(name: string) { - gameManager.connect(name, this.selectedPlayer.texture.key).then(() => { - this.scene.start(Floor0Name); + Promise.all([ + gameManager.connect(name, this.selectedPlayer.texture.key), + gameManager.loadMaps() + ]).then((data) => { + if (!data) { + return; + } + let scene: any = data[1]; + scene.maps.forEach((map : any) => { + let game = new GameScene(map.mapKey, `${API_URL}${map.mapUrl}`); + this.scene.add(map.mapKey, game, false); + }); + this.scene.start(scene.startMapKey); + }).catch((err) => { + console.error(err); + throw err; }); } Map: Phaser.Tilemaps.Tilemap; initAnimation(): void { - + throw new Error("Method not implemented."); } createCurrentPlayer(UserId: string): void { diff --git a/front/src/index.ts b/front/src/index.ts index d4f048c..2116568 100644 --- a/front/src/index.ts +++ b/front/src/index.ts @@ -3,14 +3,13 @@ import GameConfig = Phaser.Types.Core.GameConfig; import {DEBUG_MODE, RESOLUTION} from "./Enum/EnvironmentVariable"; import {cypressAsserter} from "./Cypress/CypressAsserter"; import {LogincScene} from "./Phaser/Login/LogincScene"; -import {GameScene} from "./Phaser/Game/GameScene"; const config: GameConfig = { title: "Office game", width: window.innerWidth / RESOLUTION, height: window.innerHeight / RESOLUTION, parent: "game", - scene: [LogincScene, GameScene], + scene: [LogincScene], zoom: RESOLUTION, physics: { default: "arcade",