diff --git a/front/dist/resources/objects/play_button.png b/front/dist/resources/objects/play_button.png new file mode 100644 index 00000000..36aa309b Binary files /dev/null and b/front/dist/resources/objects/play_button.png differ diff --git a/front/src/Connexion.ts b/front/src/ConnexionManager.ts similarity index 77% rename from front/src/Connexion.ts rename to front/src/ConnexionManager.ts index 0d9f998a..9c8827a9 100644 --- a/front/src/Connexion.ts +++ b/front/src/ConnexionManager.ts @@ -1,4 +1,4 @@ -import {GameManagerInterface} from "./Phaser/Game/GameManager"; +import {gameManager, GameManagerInterface} from "./Phaser/Game/GameManager"; const SocketIo = require('socket.io-client'); import Axios from "axios"; @@ -105,54 +105,43 @@ export interface ConnexionInterface { email : string; userId: string; startedRoom : string; - createConnexion() : Promise; + createConnexion(userName:string, email: string) : Promise; joinARoom(roomId : string) : void; sharePosition(roomId : string, x : number, y : number, direction : string) : void; positionOfAllUser() : void; } -export class Connexion implements ConnexionInterface{ +export class ConnexionManager implements ConnexionInterface{ socket : any; token : string; email : string; userId: string; startedRoom : string; - GameManager: GameManagerInterface; + shareUserPositionCallback: Function; + - constructor(email : string, GameManager: GameManagerInterface) { - this.email = email; - this.GameManager = GameManager; + constructor() { } - createConnexion() : Promise{ - return Axios.post(`${API_URL}/login`, {email: this.email}) - .then((res) => { - this.token = res.data.token; - this.startedRoom = res.data.roomId; - this.userId = res.data.userId; + async createConnexion(email : string) : Promise{ + let res = await Axios.post(`${API_URL}/login`, {email}); + this.token = res.data.token; + this.startedRoom = res.data.roomId; + this.userId = res.data.userId; - this.socket = SocketIo(`${API_URL}`, { - query: { - token: this.token - } - }); + this.socket = SocketIo(`${API_URL}`, { + query: { + token: this.token + } + }); - //join the room - this.joinARoom(this.startedRoom); - - //share your first position - this.sharePosition(this.startedRoom, 0, 0); - - this.positionOfAllUser(); - - this.errorMessage(); - - return this; - }) - .catch((err) => { - console.error(err); - throw err; - }); + //join the room + this.joinARoom(this.startedRoom); + //share your first position + this.sharePosition(this.startedRoom, 0, 0); + this.positionOfAllUser(); + this.errorMessage(); + return this; } /** @@ -199,7 +188,9 @@ export class Connexion implements ConnexionInterface{ let dataList = JSON.parse(message); dataList.forEach((UserPositions: any) => { let listMessageUserPosition = new ListMessageUserPosition(UserPositions[0], UserPositions[1]); - this.GameManager.shareUserPosition(listMessageUserPosition); + if (this.shareUserPositionCallback) { + this.shareUserPositionCallback(listMessageUserPosition) + } }); }); } @@ -209,4 +200,10 @@ export class Connexion implements ConnexionInterface{ console.error("message-error", message); }) } -} \ No newline at end of file + + registerShareUserPositionCallback(callback: (l:ListMessageUserPosition) => {}) { + this.shareUserPositionCallback = callback; + } +} + +export const connectionManager = new ConnexionManager(); \ No newline at end of file diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index 1859208c..4ed99fb9 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/front/src/Phaser/Game/GameManager.ts @@ -1,6 +1,10 @@ import {GameSceneInterface, GameScene} from "./GameScene"; import {ROOM} from "../../Enum/EnvironmentVariable" -import {Connexion, ConnexionInterface, ListMessageUserPositionInterface} from "../../Connexion"; +import { + ConnexionInterface, + ListMessageUserPositionInterface, + connectionManager +} from "../../ConnexionManager"; export enum StatusGameManagerEnum { IN_PROGRESS = 1, @@ -21,36 +25,12 @@ export class GameManager implements GameManagerInterface { constructor() { this.status = StatusGameManagerEnum.IN_PROGRESS; - ConnexionInstance = new Connexion("test@gmail.com", this); - } - - createGame(){ - return ConnexionInstance.createConnexion().then(() => { - this.configureGame(); - /** TODO add loader in the page **/ - }).catch((err) => { - console.error(err); - throw err; - }); - } - - /** - * permit to config rooms - */ - configureGame() { - ROOM.forEach((roomId) => { - let newGame = new GameScene(roomId, this); - this.GameScenes.push((newGame as GameSceneInterface)); - }); } /** * Permit to create player in started room */ createCurrentPlayer(): void { - //Get started room send by the backend - let game: GameSceneInterface = this.GameScenes.find((Game: GameSceneInterface) => Game.RoomId === ConnexionInstance.startedRoom); - game.createCurrentPlayer(ConnexionInstance.userId); this.status = StatusGameManagerEnum.CURRENT_USER_CREATED; } @@ -72,4 +52,6 @@ export class GameManager implements GameManagerInterface { console.error(e); } } -} \ No newline at end of file +} + +export const gameManager = new GameManager(); \ No newline at end of file diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index bb6e79de..a93d47b5 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -1,13 +1,14 @@ -import {GameManagerInterface, StatusGameManagerEnum} from "./GameManager"; -import {MessageUserPositionInterface} from "../../Connexion"; +import {gameManager, GameManagerInterface, StatusGameManagerEnum} from "./GameManager"; +import {connectionManager, MessageUserPositionInterface} from "../../ConnexionManager"; import {CurrentGamerInterface, GamerInterface, Player} from "../Player/Player"; import {DEBUG_MODE, RESOLUTION, ZOOM_LEVEL} from "../../Enum/EnvironmentVariable"; import Tile = Phaser.Tilemaps.Tile; import {ITiledMap, ITiledTileSet} from "../Map/ITiledMap"; import {cypressAsserter} from "../../Cypress/CypressAsserter"; +import {NonPlayer} from "../NonPlayer/NonPlayer"; +export const GameSceneName = "GameScene"; export enum Textures { - Rock = 'rock', Player = 'playerModel', Map = 'map' } @@ -32,12 +33,12 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ startY = (window.innerHeight / 2) / RESOLUTION; - constructor(RoomId : string, GameManager : GameManagerInterface) { + constructor() { super({ - key: "GameScene" + key: GameSceneName }); - this.RoomId = RoomId; - this.GameManager = GameManager; + this.RoomId = connectionManager.startedRoom; + this.GameManager = gameManager; this.Terrains = []; } @@ -95,7 +96,6 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ //add entities this.Objects = new Array(); - this.addSpite(this.physics.add.sprite(200, 400, Textures.Rock, 26)); //init event click this.EventToClickOnTile(); @@ -104,7 +104,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ this.MapPlayers = this.physics.add.group({ immovable: true }); //notify game manager can to create currentUser in map - this.GameManager.createCurrentPlayer(); + this.createCurrentPlayer(); //initialise camera @@ -154,10 +154,11 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ }) } - createCurrentPlayer(UserId : string){ + createCurrentPlayer(){ //initialise player this.CurrentPlayer = new Player( - UserId, + connectionManager.userId, + connectionManager.email, this, this.startX, this.startY, @@ -167,6 +168,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ //create collision this.createCollisionWithPlayer(); this.createCollisionObject(); + gameManager.createCurrentPlayer(); } EventToClickOnTile(){ @@ -239,7 +241,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ */ addPlayer(MessageUserPosition : MessageUserPositionInterface){ //initialise player - let player = new Player( + let player = new NonPlayer( MessageUserPosition.userId, this, MessageUserPosition.position.x, diff --git a/front/src/Phaser/Login/LogincScene.ts b/front/src/Phaser/Login/LogincScene.ts new file mode 100644 index 00000000..8d2ced0d --- /dev/null +++ b/front/src/Phaser/Login/LogincScene.ts @@ -0,0 +1,52 @@ +import KeyboardKeydownCallback = Phaser.Types.Input.Keyboard.KeyboardKeydownCallback; +import {connectionManager} from "../../ConnexionManager"; +import {GameSceneName} from "../Game/GameScene"; + +export const LoginSceneName = "LoginScene"; +enum LoginTextures { + playButton = "play_button", +} + +export class LogincScene extends Phaser.Scene { + private playButton: Phaser.GameObjects.Image; + private textEntry: Phaser.GameObjects.Text; + constructor() { + super({ + key: LoginSceneName + }); + } + + preload() { + this.load.image(LoginTextures.playButton, "resources/objects/play_button.png"); + } + + create() { + this.add.text(10, 10, 'Enter your email:', { font: '32px Courier', fill: '#ffffff' }); + + this.textEntry = this.add.text(10, 50, '', { font: '32px Courier', fill: '#ffff00' }); + let keySpace = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE); + let keyBackspace = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.BACKSPACE); + this.input.keyboard.on('keydown', (event: any) => { + if (event.keyCode === 8 && this.textEntry.text.length > 0) { + this.textEntry.text = this.textEntry.text.substr(0, this.textEntry.text.length - 1); + } else if (event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode < 90)) { + this.textEntry.text += event.key; + } + }); + + this.playButton = this.add.image(this.game.renderer.width / 2, this.game.renderer.height / 2, LoginTextures.playButton).setDepth(1); + this.playButton.setInteractive(); + this.playButton.on("pointerup", this.login.bind(this)); + } + + update(time: number, delta: number): void { + + } + + async login() { + let email = this.textEntry.text; + if (!email) return; + await connectionManager.createConnexion("a.poly@thecodingmachine.com"); + this.scene.start(GameSceneName); + } +} \ No newline at end of file diff --git a/front/src/Phaser/NonPlayer/NonPlayer.ts b/front/src/Phaser/NonPlayer/NonPlayer.ts index 63012e46..4e6b2950 100644 --- a/front/src/Phaser/NonPlayer/NonPlayer.ts +++ b/front/src/Phaser/NonPlayer/NonPlayer.ts @@ -2,16 +2,20 @@ import {PlayableCaracter} from "../Entity/PlayableCaracter"; import {Textures} from "../Game/GameScene"; import {UserInputEvent} from "../UserInput/UserInputManager"; import {Player} from "../Player/Player"; -import {MessageUserPositionInterface} from "../../Connexion"; -import {playAnimation} from "../Player/Animation"; +import {MessageUserPositionInterface} from "../../ConnexionManager"; +import {getPlayerAnimations, playAnimation} from "../Player/Animation"; export class NonPlayer extends PlayableCaracter { isFleeing: boolean = false; - fleeingDirection:any = null //todo create a vector class + fleeingDirection:any = null + private userId: string; + + //todo create a vector class - constructor(scene: Phaser.Scene, x: number, y: number) { + constructor(userId:string, scene: Phaser.Scene, x: number, y: number) { super(scene, x, y, Textures.Player, 1); + this.userId = userId this.setSize(32, 32); //edit the hitbox to better match the caracter model } @@ -22,7 +26,18 @@ export class NonPlayer extends PlayableCaracter { this.setY(MessageUserPosition.position.y); } - fleeFrom(player:Player) { + initAnimation(): void { + getPlayerAnimations().forEach(d => { + this.scene.anims.create({ + key: d.key, + frames: this.scene.anims.generateFrameNumbers(d.frameModel, {start: d.frameStart, end: d.frameEnd}), + frameRate: d.frameRate, + repeat: d.repeat + }); + }) + } + + /*fleeFrom(player:Player) { if (this.isFleeing) return; this.say("Don't touch me!"); this.isFleeing = true; @@ -36,5 +51,5 @@ export class NonPlayer extends PlayableCaracter { let vectorX = this.x - player.x; let vectorY = this.y - player.y; this.fleeingDirection = {x: vectorX, y: vectorY} - } + }*/ } \ No newline at end of file diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts index 4cd1a6aa..acb9eada 100644 --- a/front/src/Phaser/Player/Player.ts +++ b/front/src/Phaser/Player/Player.ts @@ -1,7 +1,7 @@ import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "./Animation"; import {GameSceneInterface, Textures} from "../Game/GameScene"; import {ConnexionInstance} from "../Game/GameManager"; -import {MessageUserPositionInterface} from "../../Connexion"; +import {MessageUserPositionInterface} from "../../ConnexionManager"; import {ActiveEventList, UserInputEvent, UserInputManager} from "../UserInput/UserInputManager"; import {PlayableCaracter} from "../Entity/PlayableCaracter"; @@ -25,9 +25,11 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G userId: string; PlayerValue: string; userInputManager: UserInputManager; + private email: string; constructor( userId: string, + email: string, Scene: GameSceneInterface, x: number, y: number, @@ -40,10 +42,12 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G //set data this.userId = userId; + this.email = email; this.PlayerValue = PlayerValue; //the current player model should be push away by other players to prevent conflict this.setImmovable(false); + this.say("My email is "+this.email) } initAnimation(): void { diff --git a/front/src/index.ts b/front/src/index.ts index e5306389..d4f048c6 100644 --- a/front/src/index.ts +++ b/front/src/index.ts @@ -1,17 +1,16 @@ import 'phaser'; import GameConfig = Phaser.Types.Core.GameConfig; -import {GameManager} from "./Phaser/Game/GameManager"; import {DEBUG_MODE, RESOLUTION} from "./Enum/EnvironmentVariable"; import {cypressAsserter} from "./Cypress/CypressAsserter"; - -let gameManager = new GameManager(); +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: gameManager.GameScenes, + scene: [LogincScene, GameScene], zoom: RESOLUTION, physics: { default: "arcade", @@ -23,10 +22,8 @@ const config: GameConfig = { cypressAsserter.gameStarted(); -gameManager.createGame().then(() => { - let game = new Phaser.Game(config); +let game = new Phaser.Game(config); - window.addEventListener('resize', function (event) { - game.scale.resize(window.innerWidth / RESOLUTION, window.innerHeight / RESOLUTION); - }); -}); +window.addEventListener('resize', function (event) { + game.scale.resize(window.innerWidth / RESOLUTION, window.innerHeight / RESOLUTION); +}); \ No newline at end of file