diff --git a/back/package.json b/back/package.json index 1ea43f30..9e735d7b 100644 --- a/back/package.json +++ b/back/package.json @@ -9,7 +9,7 @@ "prod": "tsc && node ./dist/server.js", "test": "ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json", "lint": "node_modules/.bin/eslint src/ . --ext .ts", - "fix": "node_modules/.bin/eslint src/ . --ext .ts" + "fix": "node_modules/.bin/eslint --fix src/ . --ext .ts" }, "repository": { "type": "git", diff --git a/front/dist/resources/fonts/arcade.png b/front/dist/resources/fonts/arcade.png new file mode 100644 index 00000000..5b953b66 Binary files /dev/null and b/front/dist/resources/fonts/arcade.png differ diff --git a/front/dist/resources/fonts/arcade.xml b/front/dist/resources/fonts/arcade.xml new file mode 100644 index 00000000..38e27e7b --- /dev/null +++ b/front/dist/resources/fonts/arcade.xml @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/front/package.json b/front/package.json index 17c08137..c0f223b2 100644 --- a/front/package.json +++ b/front/package.json @@ -24,6 +24,7 @@ "scripts": { "start": "webpack-dev-server --open", "build": "webpack", - "lint": "node_modules/.bin/eslint src/ . --ext .ts" + "lint": "node_modules/.bin/eslint src/ . --ext .ts", + "fix": "node_modules/.bin/eslint --fix src/ . --ext .ts" } } diff --git a/front/src/Phaser/Components/TextField.ts b/front/src/Phaser/Components/TextField.ts index 427a25ab..abdc0535 100644 --- a/front/src/Phaser/Components/TextField.ts +++ b/front/src/Phaser/Components/TextField.ts @@ -1,7 +1,7 @@ -export class TextField extends Phaser.GameObjects.Text { +export class TextField extends Phaser.GameObjects.BitmapText { constructor(scene: Phaser.Scene, x: number, y: number, text: string | string[]) { - super(scene, x, y, text, { fontFamily: 'Arial', fontSize: "20px", color: '#ffffff'}); + super(scene, x, y, 'main_font', text, 8); this.scene.add.existing(this) } -} \ No newline at end of file +} diff --git a/front/src/Phaser/Components/TextInput.ts b/front/src/Phaser/Components/TextInput.ts index b6cfd9f4..b92da1ff 100644 --- a/front/src/Phaser/Components/TextInput.ts +++ b/front/src/Phaser/Components/TextInput.ts @@ -1,25 +1,25 @@ -export class TextInput extends Phaser.GameObjects.Text { +export class TextInput extends Phaser.GameObjects.BitmapText { private underLineLength = 10; private underLine: Phaser.GameObjects.Text; - constructor(scene: Phaser.Scene, x: number, y: number) { - super(scene, x, y, '', { fontFamily: 'Arial', fontSize: "20px", color: '#ffffff'}); + constructor(scene: Phaser.Scene, x: number, y: number, maxLength: number) { + super(scene, x, y, 'main_font', '', 32); this.scene.add.existing(this); - this.underLine = this.scene.add.text(x, y+1, '__________', { fontFamily: 'Arial', fontSize: "20px", color: '#ffffff'}) + this.underLine = this.scene.add.text(x, y+1, '_______', { fontFamily: 'Arial', fontSize: "32px", color: '#ffffff'}) + - let keySpace = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE); let keyBackspace = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.BACKSPACE); this.scene.input.keyboard.on('keydown', (event: any) => { if (event.keyCode === 8 && this.text.length > 0) { this.deleteLetter(); - } else if (event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode < 90)) { + } else if ((event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode <= 90)) && this.text.length < maxLength) { this.addLetter(event.key); } }); } - + private deleteLetter() { this.text = this.text.substr(0, this.text.length - 1); if (this.underLine.text.length > this.underLineLength) { @@ -40,4 +40,4 @@ export class TextInput extends Phaser.GameObjects.Text { } -} \ No newline at end of file +} diff --git a/front/src/Phaser/Entity/PlayableCaracter.ts b/front/src/Phaser/Entity/PlayableCaracter.ts index 987d6bd3..aaf53224 100644 --- a/front/src/Phaser/Entity/PlayableCaracter.ts +++ b/front/src/Phaser/Entity/PlayableCaracter.ts @@ -1,13 +1,19 @@ import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "../Player/Animation"; import {ActiveEventList, UserInputEvent} from "../UserInput/UserInputManager"; import {SpeechBubble} from "./SpeechBubble"; +import BitmapText = Phaser.GameObjects.BitmapText; export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite { private bubble: SpeechBubble; + private playerName: BitmapText; - constructor(scene: Phaser.Scene, x: number, y: number, texture: string, frame?: string | number) { + constructor(scene: Phaser.Scene, x: number, y: number, texture: string, name: string, frame?: string | number) { super(scene, x, y, texture, frame); + this.playerName = new BitmapText(scene, x, y - 25, 'main_font', name, 8); + this.playerName.setOrigin(0.5).setCenterAlign(); + scene.add.existing(this.playerName); + this.scene.sys.updateList.add(this); this.scene.sys.displayList.add(this); //this.setScale(2); @@ -36,6 +42,7 @@ export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite { if(this.bubble) { this.bubble.moveBubble(this.x, this.y); } + this.playerName.setPosition(this.x, this.y - 25); } stop(){ @@ -46,7 +53,7 @@ export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite { say(text: string) { if (this.bubble) return; this.bubble = new SpeechBubble(this.scene, this, text) - //todo make the buble destroy on player movement? + //todo make the bubble destroy on player movement? setTimeout(() => { this.bubble.destroy(); this.bubble = null; diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index 2dd9fdf1..ad4d5a2c 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/front/src/Phaser/Game/GameManager.ts @@ -19,14 +19,16 @@ export class GameManager { status: number; private ConnexionInstance: Connexion; private currentGameScene: GameScene; + private playerName: string; SimplePeer : SimplePeerInterface; constructor() { this.status = StatusGameManagerEnum.IN_PROGRESS; } - - connect(email:string) { - this.ConnexionInstance = new Connexion(email, this); + + connect(name:string) { + this.playerName = name; + this.ConnexionInstance = new Connexion(name, this); return this.ConnexionInstance.createConnexion().then(() => { this.SimplePeer = new SimplePeer(this.ConnexionInstance); }); @@ -61,9 +63,13 @@ export class GameManager { } } + getPlayerName(): string { + return this.playerName; + } + pushPlayerPosition(event: HasMovedEvent) { this.ConnexionInstance.sharePosition(event.x, event.y, event.direction); } } -export const gameManager = new GameManager(); \ No newline at end of file +export const gameManager = new GameManager(); diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 9666ff9c..e09123eb 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -61,11 +61,14 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ 'resources/characters/pipoya/Male 01-1.png', { frameWidth: 32, frameHeight: 32 } ); + this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml'); + cypressAsserter.preloadFinished(); } //hook initialisation - init(){} + init() { + } //hook create scene create(): void { @@ -162,6 +165,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ this, this.startX, this.startY, + this.GameManager.getPlayerName() ); this.CurrentPlayer.initAnimation(); @@ -254,6 +258,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ this, MessageUserPosition.position.x, MessageUserPosition.position.y, + 'Foo' ); player.initAnimation(); this.MapPlayers.add(player); diff --git a/front/src/Phaser/Login/LogincScene.ts b/front/src/Phaser/Login/LogincScene.ts index c9c22f0f..1807ecb5 100644 --- a/front/src/Phaser/Login/LogincScene.ts +++ b/front/src/Phaser/Login/LogincScene.ts @@ -3,20 +3,23 @@ import {TextField} from "../Components/TextField"; import {TextInput} from "../Components/TextInput"; import {ClickButton} from "../Components/ClickButton"; import {GameSceneName} from "../Game/GameScene"; -import {SimplePeer} from "../../WebRtc/SimplePeer"; -import {Connexion} from "../../Connexion"; +import Image = Phaser.GameObjects.Image; //todo: put this constants in a dedicated file export const LoginSceneName = "LoginScene"; enum LoginTextures { - playButton = "play_button", + //playButton = "play_button", + icon = "icon", + mainFont = "main_font" } export class LogincScene extends Phaser.Scene { - private emailInput: TextInput; + private nameInput: TextInput; private textField: TextField; private playButton: ClickButton; private infoTextField: TextField; + private pressReturnField: TextField; + private logo: Image; constructor() { super({ @@ -25,30 +28,51 @@ export class LogincScene extends Phaser.Scene { } preload() { - this.load.image(LoginTextures.playButton, "resources/objects/play_button.png"); + //this.load.image(LoginTextures.playButton, "resources/objects/play_button.png"); + this.load.image(LoginTextures.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(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml'); } create() { - this.textField = new TextField(this, 10, 10, 'Enter your email:'); - this.emailInput = new TextInput(this, 10, 50); + this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Enter your name:'); + this.textField.setOrigin(0.5).setCenterAlign() + this.nameInput = new TextInput(this, this.game.renderer.width / 2 - 64, 70, 4); - let x = this.game.renderer.width / 2; - let y = this.game.renderer.height / 2; - this.playButton = new ClickButton(this, x, y, LoginTextures.playButton, this.login.bind(this)); + this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Press enter to start'); + this.pressReturnField.setOrigin(0.5).setCenterAlign() + + //let x = this.game.renderer.width / 2; + //let y = this.game.renderer.height / 2; + //this.playButton = new ClickButton(this, x, y, LoginTextures.playButton, this.login.bind(this)); + + this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon); + this.add.existing(this.logo); + + let infoText = "Commands: \n - Arrows or Z,Q,S,D to move\n - SHIFT to run"; + this.infoTextField = new TextField(this, 10, this.game.renderer.height - 35, infoText); + + this.input.keyboard.on('keyup-ENTER', () => { + let name = this.nameInput.getText(); + if (name === '') { + return + } + return this.login(name); + }); - let infoText = "Commandes de base: \n - Z,Q,S,D (ou les flèches de direction) pour bouger\n - SHIFT pour accélerer"; - this.infoTextField = new TextField(this, 10, 300, infoText); } update(time: number, delta: number): void { - + if (this.nameInput.getText() == '') { + this.pressReturnField.setVisible(false); + } else { + this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2)); + } } - async login() { - let email = this.emailInput.text; - if (!email) return; - gameManager.connect(email).then(() => { + private async login(name: string) { + gameManager.connect(name).then(() => { 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..42917505 100644 --- a/front/src/Phaser/NonPlayer/NonPlayer.ts +++ b/front/src/Phaser/NonPlayer/NonPlayer.ts @@ -6,13 +6,13 @@ import {MessageUserPositionInterface} from "../../Connexion"; import {playAnimation} from "../Player/Animation"; export class NonPlayer extends PlayableCaracter { - + isFleeing: boolean = false; fleeingDirection:any = null //todo create a vector class - - constructor(scene: Phaser.Scene, x: number, y: number) { - super(scene, x, y, Textures.Player, 1); - this.setSize(32, 32); //edit the hitbox to better match the caracter model + + constructor(scene: Phaser.Scene, x: number, y: number, name: string) { + super(scene, x, y, Textures.Player, name, 1); + this.setSize(32, 32); //edit the hitbox to better match the character model } @@ -26,15 +26,15 @@ export class NonPlayer extends PlayableCaracter { if (this.isFleeing) return; this.say("Don't touch me!"); this.isFleeing = true; - + setTimeout(() => { this.say("Feww, I escaped."); this.isFleeing = false this.fleeingDirection = null }, 3000); - - let vectorX = this.x - player.x; + + 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 8c4688b8..59971cf2 100644 --- a/front/src/Phaser/Player/Player.ts +++ b/front/src/Phaser/Player/Player.ts @@ -33,9 +33,10 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G Scene: GameSceneInterface, x: number, y: number, + name: string, PlayerValue: string = Textures.Player ) { - super(Scene, x, y, PlayerValue, 1); + super(Scene, x, y, PlayerValue, name, 1); //create input to move this.userInputManager = new UserInputManager(Scene);