Merge pull request #76 from thecodingmachine/feature/login-page
Feature/login page
This commit is contained in:
David Négrier
GitHub
commit
8fb9053412
@ -215,6 +215,8 @@ export class IoSocketController {
|
||||
socket.position = message.position;
|
||||
socket.roomId = message.roomId;
|
||||
socket.userId = message.userId;
|
||||
socket.name = message.name;
|
||||
socket.frame = message.frame;
|
||||
}
|
||||
|
||||
refreshUserPosition() {
|
||||
|
||||
@ -6,5 +6,7 @@ export interface ExSocketInterface extends Socket {
|
||||
roomId: string;
|
||||
webRtcRoomId: string;
|
||||
userId: string;
|
||||
name: string;
|
||||
frame: string;
|
||||
position: PointInterface;
|
||||
}
|
||||
@ -9,27 +9,29 @@ export class ExtRooms implements ExtRoomsInterface{
|
||||
[room: string]: SocketIO.Room;
|
||||
}
|
||||
|
||||
let RefreshUserPositionFunction = function(rooms : ExtRooms, Io: socketIO.Server){
|
||||
let RefreshUserPositionFunction = function(rooms : ExtRooms, Io: socketIO.Server) {
|
||||
let clients = Io.clients();
|
||||
let socketsKey = Object.keys(Io.clients().sockets);
|
||||
|
||||
//create mapping with all users in all rooms
|
||||
let mapPositionUserByRoom = new Map();
|
||||
for(let i = 0; i < socketsKey.length; i++){
|
||||
for (let i = 0; i < socketsKey.length; i++) {
|
||||
let socket = clients.sockets[socketsKey[i]] as ExSocketInterface;
|
||||
if(!socket.position){
|
||||
if (!socket.position) {
|
||||
continue;
|
||||
}
|
||||
let data = {
|
||||
userId : socket.userId,
|
||||
roomId : socket.roomId,
|
||||
position : socket.position,
|
||||
userId: socket.userId,
|
||||
roomId: socket.roomId,
|
||||
position: socket.position,
|
||||
name: socket.name,
|
||||
frame: socket.frame,
|
||||
};
|
||||
let dataArray = <any>[];
|
||||
if(mapPositionUserByRoom.get(data.roomId)){
|
||||
if (mapPositionUserByRoom.get(data.roomId)) {
|
||||
dataArray = mapPositionUserByRoom.get(data.roomId);
|
||||
dataArray.push(data);
|
||||
}else{
|
||||
} else {
|
||||
dataArray = [data];
|
||||
}
|
||||
mapPositionUserByRoom.set(data.roomId, dataArray);
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
export class Message {
|
||||
userId: string;
|
||||
roomId: string;
|
||||
name: string;
|
||||
frame: string;
|
||||
|
||||
constructor(data: any) {
|
||||
if (!data.userId || !data.roomId) {
|
||||
@ -8,12 +10,16 @@ export class Message {
|
||||
}
|
||||
this.userId = data.userId;
|
||||
this.roomId = data.roomId;
|
||||
this.name = data.name;
|
||||
this.frame = data.frame;
|
||||
}
|
||||
|
||||
toJson() {
|
||||
return {
|
||||
userId: this.userId,
|
||||
roomId: this.roomId
|
||||
roomId: this.roomId,
|
||||
name: this.name,
|
||||
frame: this.frame
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -3,29 +3,38 @@ import {Message} from "../src/Model/Websocket/Message";
|
||||
|
||||
describe("Message Model", () => {
|
||||
it("should find userId and roomId", () => {
|
||||
let message = {userId: "test1", roomId: "test2"};
|
||||
let message = {userId: "test1", roomId: "test2", name: "foo", frame: "user"};
|
||||
let messageObject = new Message(message);
|
||||
expect(messageObject.userId).toBe("test1");
|
||||
expect(messageObject.roomId).toBe("test2");
|
||||
expect(messageObject.name).toBe("foo");
|
||||
expect(messageObject.frame).toBe("user");
|
||||
})
|
||||
|
||||
it("should expose a toJson method", () => {
|
||||
let message = {userId: "test1", roomId: "test2"};
|
||||
let message = {userId: "test1", roomId: "test2", name: "foo", frame: "user"};
|
||||
let messageObject = new Message(message);
|
||||
expect(messageObject.toJson()).toEqual({userId: "test1", roomId: "test2"});
|
||||
})
|
||||
expect(messageObject.toJson()).toEqual({userId: "test1", roomId: "test2", name: "foo", frame: "user"});
|
||||
});
|
||||
|
||||
it("should find throw error when no userId", () => {
|
||||
let message = {roomId: "test2"};
|
||||
expect(() => {
|
||||
let messageObject = new Message(message);
|
||||
}).toThrow(new Error("userId or roomId cannot be null"));
|
||||
})
|
||||
});
|
||||
|
||||
it("should find throw error when no roomId", () => {
|
||||
let message = {userId: "test1"};
|
||||
expect(() => {
|
||||
let messageObject = new Message(message);
|
||||
}).toThrow(new Error("userId or roomId cannot be null"));
|
||||
})
|
||||
});
|
||||
|
||||
it("should find throw error when no roomId", () => {
|
||||
let message = {name: "foo"};
|
||||
expect(() => {
|
||||
let messageObject = new Message(message);
|
||||
}).toThrow(new Error("userId or roomId cannot be null"));
|
||||
});
|
||||
})
|
||||
16
front/dist/resources/style/style.css
vendored
16
front/dist/resources/style/style.css
vendored
@ -49,8 +49,8 @@ video{
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
border: solid 0px black;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: #666;
|
||||
box-shadow: 2px 2px 24px #444;
|
||||
border-radius: 48px;
|
||||
@ -68,20 +68,20 @@ video{
|
||||
}
|
||||
.btn-micro{
|
||||
transition: all .3s;
|
||||
right: 10px;
|
||||
right: 44px;
|
||||
}
|
||||
.btn-video{
|
||||
transition: all .2s;
|
||||
right: 114px;
|
||||
right: 134px;
|
||||
}
|
||||
/*.btn-call{
|
||||
transition: all .1s;
|
||||
left: 0px;
|
||||
}*/
|
||||
.btn-cam-action div img{
|
||||
height: 32px;
|
||||
width: 40px;
|
||||
top: calc(48px - 32px);
|
||||
left: calc(48px - 35px);
|
||||
height: 22px;
|
||||
width: 30px;
|
||||
top: calc(48px - 37px);
|
||||
left: calc(48px - 41px);
|
||||
position: relative;
|
||||
}
|
||||
@ -17,16 +17,22 @@ enum EventMessage{
|
||||
class Message {
|
||||
userId: string;
|
||||
roomId: string;
|
||||
name: string;
|
||||
frame: string;
|
||||
|
||||
constructor(userId : string, roomId : string) {
|
||||
constructor(userId : string, roomId : string, name: string, frame: string) {
|
||||
this.userId = userId;
|
||||
this.roomId = roomId;
|
||||
this.name = name;
|
||||
this.frame = frame;
|
||||
}
|
||||
|
||||
toJson() {
|
||||
return {
|
||||
userId: this.userId,
|
||||
roomId: this.roomId,
|
||||
name: this.name,
|
||||
frame: this.frame
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -64,14 +70,16 @@ class Point implements PointInterface{
|
||||
export interface MessageUserPositionInterface {
|
||||
userId: string;
|
||||
roomId: string;
|
||||
name: string;
|
||||
frame: string;
|
||||
position: PointInterface;
|
||||
}
|
||||
|
||||
class MessageUserPosition extends Message implements MessageUserPositionInterface{
|
||||
position: PointInterface;
|
||||
|
||||
constructor(userId : string, roomId : string, point : Point) {
|
||||
super(userId, roomId);
|
||||
constructor(userId : string, roomId : string, point : Point, name: string, frame: string) {
|
||||
super(userId, roomId, name, frame);
|
||||
this.position = point;
|
||||
}
|
||||
|
||||
@ -106,7 +114,9 @@ class ListMessageUserPosition {
|
||||
userPosition.position.x,
|
||||
userPosition.position.y,
|
||||
userPosition.position.direction
|
||||
)
|
||||
),
|
||||
userPosition.name,
|
||||
userPosition.frame
|
||||
));
|
||||
});
|
||||
}
|
||||
@ -119,11 +129,11 @@ export interface ConnexionInterface {
|
||||
userId: string;
|
||||
startedRoom: string;
|
||||
|
||||
createConnexion(): Promise<any>;
|
||||
createConnexion(frameSelected: string): Promise<any>;
|
||||
|
||||
joinARoom(roomId: string): void;
|
||||
joinARoom(roomId: string, frame: string): void;
|
||||
|
||||
sharePosition(x: number, y: number, direction: string): void;
|
||||
sharePosition(x: number, y: number, direction: string, frame: string): void;
|
||||
|
||||
positionOfAllUser(): void;
|
||||
|
||||
@ -151,7 +161,7 @@ export class Connexion implements ConnexionInterface {
|
||||
this.GameManager = GameManager;
|
||||
}
|
||||
|
||||
createConnexion(): Promise<ConnexionInterface> {
|
||||
createConnexion(frameSelected: string): Promise<ConnexionInterface> {
|
||||
return Axios.post(`${API_URL}/login`, {email: this.email})
|
||||
.then((res) => {
|
||||
this.token = res.data.token;
|
||||
@ -165,10 +175,10 @@ export class Connexion implements ConnexionInterface {
|
||||
});
|
||||
|
||||
//join the room
|
||||
this.joinARoom(this.startedRoom);
|
||||
this.joinARoom(this.startedRoom, frameSelected);
|
||||
|
||||
//share your first position
|
||||
this.sharePosition(0, 0);
|
||||
this.sharePosition(0, 0, frameSelected);
|
||||
|
||||
this.positionOfAllUser();
|
||||
|
||||
@ -183,11 +193,18 @@ export class Connexion implements ConnexionInterface {
|
||||
}
|
||||
|
||||
/**
|
||||
* Permit to join a room
|
||||
*
|
||||
* @param roomId
|
||||
* @param frame
|
||||
*/
|
||||
joinARoom(roomId: string): void {
|
||||
let messageUserPosition = new MessageUserPosition(this.userId, this.startedRoom, new Point(0, 0));
|
||||
joinARoom(roomId: string, frame: string): void {
|
||||
let messageUserPosition = new MessageUserPosition(
|
||||
this.userId,
|
||||
this.startedRoom,
|
||||
new Point(0, 0),
|
||||
this.email,
|
||||
frame
|
||||
);
|
||||
this.socket.emit(EventMessage.JOIN_ROOM, messageUserPosition.toString());
|
||||
}
|
||||
|
||||
@ -195,13 +212,20 @@ export class Connexion implements ConnexionInterface {
|
||||
*
|
||||
* @param x
|
||||
* @param y
|
||||
* @param frame
|
||||
* @param direction
|
||||
*/
|
||||
sharePosition(x : number, y : number, direction : string = "none") : void{
|
||||
sharePosition(x : number, y : number, frame : string, direction : string = "none") : void{
|
||||
if(!this.socket){
|
||||
return;
|
||||
}
|
||||
let messageUserPosition = new MessageUserPosition(this.userId, ROOM[0], new Point(x, y, direction));
|
||||
let messageUserPosition = new MessageUserPosition(
|
||||
this.userId,
|
||||
ROOM[0],
|
||||
new Point(x, y, direction),
|
||||
this.email,
|
||||
frame
|
||||
);
|
||||
this.socket.emit(EventMessage.USER_POSITION, messageUserPosition.toString());
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
const DEBUG_MODE: boolean = process.env.DEBUG_MODE as any === true;
|
||||
const API_URL = process.env.API_URL || "http://api.workadventure.localhost";
|
||||
const ROOM = [process.env.ROOM || "THECODINGMACHINE"];
|
||||
const RESOLUTION = 4;
|
||||
const RESOLUTION = 3;
|
||||
const ZOOM_LEVEL = 1/*3/4*/;
|
||||
|
||||
export {
|
||||
|
||||
@ -1,15 +1,41 @@
|
||||
import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "../Player/Animation";
|
||||
import {ActiveEventList, UserInputEvent} from "../UserInput/UserInputManager";
|
||||
import {PlayerAnimationNames} from "../Player/Animation";
|
||||
import {SpeechBubble} from "./SpeechBubble";
|
||||
import BitmapText = Phaser.GameObjects.BitmapText;
|
||||
|
||||
export const PLAYER_RESOURCES: Array<any> = [
|
||||
{name: "male1", img: "resources/characters/pipoya/Male 01-1.png", x: 32, y: 32},
|
||||
{name: "male2", img: "resources/characters/pipoya/Male 02-2.png", x: 64, y: 32},
|
||||
{name: "male3", img: "resources/characters/pipoya/Male 03-4.png", x: 96, y: 32},
|
||||
{name: "male4", img: "resources/characters/pipoya/Male 09-1.png", x: 128, y: 32},
|
||||
|
||||
{name: "male5", img: "resources/characters/pipoya/Male 10-3.png", x: 32, y: 64},
|
||||
{name: "male6", img: "resources/characters/pipoya/Male 17-2.png", x: 64, y: 64},
|
||||
{name: "male7", img: "resources/characters/pipoya/Male 18-1.png", x: 96, y: 64},
|
||||
{name: "male8", img: "resources/characters/pipoya/Male 16-4.png", x: 128, y: 64},
|
||||
|
||||
{name: "Female1", img: "resources/characters/pipoya/Female 01-1.png", x: 32, y: 96},
|
||||
{name: "Female2", img: "resources/characters/pipoya/Female 02-2.png", x: 64, y: 96},
|
||||
{name: "Female3", img: "resources/characters/pipoya/Female 03-4.png", x: 96, y: 96},
|
||||
{name: "Female4", img: "resources/characters/pipoya/Female 09-1.png", x: 128, y: 96},
|
||||
|
||||
{name: "Female5", img: "resources/characters/pipoya/Female 10-3.png", x: 32, y: 128},
|
||||
{name: "Female6", img: "resources/characters/pipoya/Female 17-2.png", x: 64, y: 128},
|
||||
{name: "Female7", img: "resources/characters/pipoya/Female 18-1.png", x: 96, y: 128},
|
||||
{name: "Female8", img: "resources/characters/pipoya/Female 16-4.png", x: 128, y: 128}
|
||||
];
|
||||
|
||||
export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
|
||||
private bubble: SpeechBubble;
|
||||
private playerName: BitmapText;
|
||||
public PlayerValue: string;
|
||||
public PlayerTexture: string;
|
||||
|
||||
|
||||
constructor(scene: Phaser.Scene, x: number, y: number, texture: string, name: string, frame?: string | number) {
|
||||
super(scene, x, y, texture, frame);
|
||||
|
||||
this.PlayerValue = name;
|
||||
this.PlayerTexture = texture;
|
||||
this.playerName = new BitmapText(scene, x, y - 25, 'main_font', name, 8);
|
||||
this.playerName.setOrigin(0.5).setCenterAlign();
|
||||
scene.add.existing(this.playerName);
|
||||
@ -24,30 +50,34 @@ export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
|
||||
this.setOffset(8, 16);
|
||||
}
|
||||
|
||||
move(x: number, y: number){
|
||||
move(x: number, y: number) {
|
||||
|
||||
this.setVelocity(x, y);
|
||||
|
||||
//up or down animationss are prioritized over left and right
|
||||
if (this.body.velocity.y < 0) { //moving up
|
||||
this.play(PlayerAnimationNames.WalkUp, true);
|
||||
this.play(`${this.PlayerTexture}-${PlayerAnimationNames.WalkUp}`, true);
|
||||
} else if (this.body.velocity.y > 0) { //moving down
|
||||
this.play(PlayerAnimationNames.WalkDown, true);
|
||||
this.play(`${this.PlayerTexture}-${PlayerAnimationNames.WalkDown}`, true);
|
||||
} else if (this.body.velocity.x > 0) { //moving right
|
||||
this.play(PlayerAnimationNames.WalkRight, true);
|
||||
this.play(`${this.PlayerTexture}-${PlayerAnimationNames.WalkRight}`, true);
|
||||
} else if (this.body.velocity.x < 0) { //moving left
|
||||
this.anims.playReverse(PlayerAnimationNames.WalkLeft, true);
|
||||
this.anims.playReverse(`${this.PlayerTexture}-${PlayerAnimationNames.WalkLeft}`, true);
|
||||
}
|
||||
|
||||
if(this.bubble) {
|
||||
if (this.bubble) {
|
||||
this.bubble.moveBubble(this.x, this.y);
|
||||
}
|
||||
this.playerName.setPosition(this.x, this.y - 25);
|
||||
this.updatePlayerNamePosition(this.x, this.y);
|
||||
}
|
||||
|
||||
updatePlayerNamePosition(x: number, y: number){
|
||||
this.playerName.setPosition(x, y - 25);
|
||||
}
|
||||
|
||||
stop(){
|
||||
this.setVelocity(0, 0);
|
||||
this.play(PlayerAnimationNames.None, true);
|
||||
this.anims.stop();
|
||||
}
|
||||
|
||||
say(text: string) {
|
||||
@ -59,4 +89,9 @@ export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
|
||||
this.bubble = null;
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
destroy(fromScene?: boolean): void {
|
||||
super.destroy(fromScene);
|
||||
this.playerName.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,6 +13,7 @@ export interface HasMovedEvent {
|
||||
direction: string;
|
||||
x: number;
|
||||
y: number;
|
||||
frame: string;
|
||||
}
|
||||
|
||||
export class GameManager {
|
||||
@ -21,15 +22,17 @@ export class GameManager {
|
||||
private currentGameScene: GameScene;
|
||||
private playerName: string;
|
||||
SimplePeer : SimplePeerInterface;
|
||||
private frameUserSelected: string;
|
||||
|
||||
constructor() {
|
||||
this.status = StatusGameManagerEnum.IN_PROGRESS;
|
||||
}
|
||||
|
||||
connect(name:string) {
|
||||
connect(name: string, frameUserSelected : string) {
|
||||
this.playerName = name;
|
||||
this.frameUserSelected = frameUserSelected;
|
||||
this.ConnexionInstance = new Connexion(name, this);
|
||||
return this.ConnexionInstance.createConnexion().then(() => {
|
||||
return this.ConnexionInstance.createConnexion(frameUserSelected).then(() => {
|
||||
this.SimplePeer = new SimplePeer(this.ConnexionInstance);
|
||||
});
|
||||
}
|
||||
@ -67,8 +70,12 @@ export class GameManager {
|
||||
return this.playerName;
|
||||
}
|
||||
|
||||
getFrameSelected(): string {
|
||||
return this.frameUserSelected;
|
||||
}
|
||||
|
||||
pushPlayerPosition(event: HasMovedEvent) {
|
||||
this.ConnexionInstance.sharePosition(event.x, event.y, event.direction);
|
||||
this.ConnexionInstance.sharePosition(event.x, event.y, event.frame, event.direction);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -4,10 +4,12 @@ import {CurrentGamerInterface, GamerInterface, hasMovedEventName, Player} from "
|
||||
import {DEBUG_MODE, RESOLUTION, ROOM, ZOOM_LEVEL} from "../../Enum/EnvironmentVariable";
|
||||
import Tile = Phaser.Tilemaps.Tile;
|
||||
import {ITiledMap, ITiledTileSet} from "../Map/ITiledMap";
|
||||
import {cypressAsserter} from "../../Cypress/CypressAsserter";
|
||||
import {PLAYER_RESOURCES} from "../Entity/PlayableCaracter";
|
||||
|
||||
export const GameSceneName = "GameScene";
|
||||
export enum Textures {
|
||||
Player = 'playerModel',
|
||||
Player = 'male1',
|
||||
Map = 'map'
|
||||
}
|
||||
|
||||
@ -55,10 +57,16 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
|
||||
})
|
||||
});
|
||||
this.load.tilemapTiledJSON(Textures.Map, mapUrl);
|
||||
this.load.spritesheet(Textures.Player,
|
||||
'resources/characters/pipoya/Male 01-1.png',
|
||||
{ frameWidth: 32, frameHeight: 32 }
|
||||
);
|
||||
|
||||
//add player png
|
||||
PLAYER_RESOURCES.forEach((playerResource: any) => {
|
||||
this.load.spritesheet(
|
||||
playerResource.name,
|
||||
playerResource.img,
|
||||
{frameWidth: 32, frameHeight: 32}
|
||||
);
|
||||
});
|
||||
|
||||
this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
|
||||
}
|
||||
|
||||
@ -158,7 +166,8 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
|
||||
this,
|
||||
this.startX,
|
||||
this.startY,
|
||||
this.GameManager.getPlayerName()
|
||||
this.GameManager.getPlayerName(),
|
||||
this.GameManager.getFrameSelected()
|
||||
);
|
||||
this.CurrentPlayer.initAnimation();
|
||||
|
||||
@ -251,7 +260,8 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
|
||||
this,
|
||||
MessageUserPosition.position.x,
|
||||
MessageUserPosition.position.y,
|
||||
'Foo'
|
||||
MessageUserPosition.name,
|
||||
MessageUserPosition.frame
|
||||
);
|
||||
player.initAnimation();
|
||||
this.MapPlayers.add(player);
|
||||
|
||||
@ -2,8 +2,12 @@ import {gameManager} from "../Game/GameManager";
|
||||
import {TextField} from "../Components/TextField";
|
||||
import {TextInput} from "../Components/TextInput";
|
||||
import {ClickButton} from "../Components/ClickButton";
|
||||
import {GameSceneName} from "../Game/GameScene";
|
||||
import {GameSceneInterface, GameSceneName, Textures} 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";
|
||||
|
||||
//todo: put this constants in a dedicated file
|
||||
@ -14,7 +18,7 @@ enum LoginTextures {
|
||||
mainFont = "main_font"
|
||||
}
|
||||
|
||||
export class LogincScene extends Phaser.Scene {
|
||||
export class LogincScene extends Phaser.Scene implements GameSceneInterface {
|
||||
private nameInput: TextInput;
|
||||
private textField: TextField;
|
||||
private playButton: ClickButton;
|
||||
@ -22,6 +26,10 @@ export class LogincScene extends Phaser.Scene {
|
||||
private pressReturnField: TextField;
|
||||
private logo: Image;
|
||||
|
||||
private selectedRectangle: Rectangle;
|
||||
private selectedPlayer: Phaser.Physics.Arcade.Sprite;
|
||||
private players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
|
||||
|
||||
constructor() {
|
||||
super({
|
||||
key: LoginSceneName
|
||||
@ -35,6 +43,14 @@ export class LogincScene extends Phaser.Scene {
|
||||
// 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');
|
||||
cypressAsserter.preloadFinished();
|
||||
//add player png
|
||||
PLAYER_RESOURCES.forEach((playerResource: any) => {
|
||||
this.load.spritesheet(
|
||||
playerResource.name,
|
||||
playerResource.img,
|
||||
{frameWidth: 32, frameHeight: 32}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
create() {
|
||||
@ -47,9 +63,7 @@ export class LogincScene extends Phaser.Scene {
|
||||
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.selectedRectangle = this.add.rectangle(32, 32, 32, 32).setStrokeStyle(2, 0xFFFFFF);
|
||||
|
||||
this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
|
||||
this.add.existing(this.logo);
|
||||
@ -64,6 +78,9 @@ export class LogincScene extends Phaser.Scene {
|
||||
}
|
||||
return this.login(name);
|
||||
});
|
||||
|
||||
/*create user*/
|
||||
this.createCurrentPlayer("test");
|
||||
cypressAsserter.initFinished();
|
||||
}
|
||||
|
||||
@ -76,8 +93,43 @@ export class LogincScene extends Phaser.Scene {
|
||||
}
|
||||
|
||||
private async login(name: string) {
|
||||
gameManager.connect(name).then(() => {
|
||||
gameManager.connect(name, this.selectedPlayer.texture.key).then(() => {
|
||||
this.scene.start(GameSceneName);
|
||||
});
|
||||
}
|
||||
|
||||
Map: Phaser.Tilemaps.Tilemap;
|
||||
|
||||
initAnimation(): void {
|
||||
|
||||
}
|
||||
|
||||
createCurrentPlayer(UserId: string): void {
|
||||
for (let i = 0; i <PLAYER_RESOURCES.length; i++) {
|
||||
let playerResource = PLAYER_RESOURCES[i];
|
||||
let player = this.physics.add.sprite(playerResource.x, playerResource.y, playerResource.name, playerResource.name);
|
||||
player.setBounce(0.2);
|
||||
player.setCollideWorldBounds(true);
|
||||
this.anims.create({
|
||||
key: playerResource.name,
|
||||
frames: this.anims.generateFrameNumbers(playerResource.name, {start: 0, end: 2,}),
|
||||
frameRate: 10,
|
||||
repeat: -1
|
||||
});
|
||||
player.setInteractive().on("pointerdown", () => {
|
||||
this.selectedPlayer.anims.pause();
|
||||
this.selectedRectangle.setY(player.y);
|
||||
this.selectedRectangle.setX(player.x);
|
||||
player.play(playerResource.name);
|
||||
this.selectedPlayer = player;
|
||||
});
|
||||
this.players.push(player);
|
||||
}
|
||||
this.selectedPlayer = this.players[0];
|
||||
this.selectedPlayer.play(PLAYER_RESOURCES[0].name);
|
||||
}
|
||||
|
||||
shareUserPosition(UsersPosition: import("../../Connexion").MessageUserPositionInterface[]): void {
|
||||
throw new Error("Method not implemented.");
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
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";
|
||||
|
||||
export class NonPlayer extends PlayableCaracter {
|
||||
|
||||
isFleeing: boolean = false;
|
||||
fleeingDirection:any = null //todo create a vector class
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
|
||||
updatePosition(MessageUserPosition : MessageUserPositionInterface){
|
||||
playAnimation(this, MessageUserPosition.position.direction);
|
||||
this.setX(MessageUserPosition.position.x);
|
||||
this.setY(MessageUserPosition.position.y);
|
||||
}
|
||||
|
||||
fleeFrom(player:Player) {
|
||||
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 vectorY = this.y - player.y;
|
||||
this.fleeingDirection = {x: vectorX, y: vectorY}
|
||||
}
|
||||
}
|
||||
@ -17,31 +17,31 @@ export enum PlayerAnimationNames {
|
||||
None = 'none',
|
||||
}
|
||||
|
||||
export const getPlayerAnimations = (): AnimationData[] => {
|
||||
export const getPlayerAnimations = (name: string = Textures.Player): AnimationData[] => {
|
||||
return [{
|
||||
key: PlayerAnimationNames.WalkDown,
|
||||
frameModel: Textures.Player,
|
||||
key: `${name}-${PlayerAnimationNames.WalkDown}`,
|
||||
frameModel: name,
|
||||
frameStart: 0,
|
||||
frameEnd: 2,
|
||||
frameRate: 10,
|
||||
repeat: -1
|
||||
}, {
|
||||
key: PlayerAnimationNames.WalkLeft,
|
||||
frameModel: Textures.Player,
|
||||
key: `${name}-${PlayerAnimationNames.WalkLeft}`,
|
||||
frameModel: name,
|
||||
frameStart: 3,
|
||||
frameEnd: 5,
|
||||
frameRate: 10,
|
||||
repeat: -1
|
||||
}, {
|
||||
key: PlayerAnimationNames.WalkRight,
|
||||
frameModel: Textures.Player,
|
||||
key: `${name}-${PlayerAnimationNames.WalkRight}`,
|
||||
frameModel: name,
|
||||
frameStart: 6,
|
||||
frameEnd: 8,
|
||||
frameRate: 10,
|
||||
repeat: -1
|
||||
}, {
|
||||
key: PlayerAnimationNames.WalkUp,
|
||||
frameModel: Textures.Player,
|
||||
key: `${name}-${PlayerAnimationNames.WalkUp}`,
|
||||
frameModel: name,
|
||||
frameStart: 9,
|
||||
frameEnd: 11,
|
||||
frameRate: 10,
|
||||
|
||||
@ -8,7 +8,6 @@ import {PlayableCaracter} from "../Entity/PlayableCaracter";
|
||||
export const hasMovedEventName = "hasMoved";
|
||||
export interface CurrentGamerInterface extends PlayableCaracter{
|
||||
userId : string;
|
||||
PlayerValue : string;
|
||||
initAnimation() : void;
|
||||
moveUser(delta: number) : void;
|
||||
say(text : string) : void;
|
||||
@ -16,7 +15,6 @@ export interface CurrentGamerInterface extends PlayableCaracter{
|
||||
|
||||
export interface GamerInterface extends PlayableCaracter{
|
||||
userId : string;
|
||||
PlayerValue : string;
|
||||
initAnimation() : void;
|
||||
updatePosition(MessageUserPosition : MessageUserPositionInterface) : void;
|
||||
say(text : string) : void;
|
||||
@ -24,7 +22,6 @@ export interface GamerInterface extends PlayableCaracter{
|
||||
|
||||
export class Player extends PlayableCaracter implements CurrentGamerInterface, GamerInterface {
|
||||
userId: string;
|
||||
PlayerValue: string;
|
||||
userInputManager: UserInputManager;
|
||||
previousMove: string;
|
||||
|
||||
@ -34,23 +31,23 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
|
||||
x: number,
|
||||
y: number,
|
||||
name: string,
|
||||
PlayerValue: string = Textures.Player
|
||||
PlayerTexture: string = Textures.Player
|
||||
) {
|
||||
super(Scene, x, y, PlayerValue, name, 1);
|
||||
super(Scene, x, y, PlayerTexture, name, 1);
|
||||
|
||||
//create input to move
|
||||
this.userInputManager = new UserInputManager(Scene);
|
||||
|
||||
//set data
|
||||
this.userId = userId;
|
||||
this.PlayerValue = PlayerValue;
|
||||
|
||||
|
||||
//the current player model should be push away by other players to prevent conflict
|
||||
this.setImmovable(false);
|
||||
}
|
||||
|
||||
initAnimation(): void {
|
||||
getPlayerAnimations().forEach(d => {
|
||||
getPlayerAnimations(this.PlayerTexture).forEach(d => {
|
||||
this.scene.anims.create({
|
||||
key: d.key,
|
||||
frames: this.scene.anims.generateFrameNumbers(d.frameModel, {start: d.frameStart, end: d.frameEnd}),
|
||||
@ -62,7 +59,6 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
|
||||
|
||||
moveUser(delta: number): void {
|
||||
//if user client on shift, camera and player speed
|
||||
let haveMove = false;
|
||||
let direction = null;
|
||||
|
||||
let activeEvents = this.userInputManager.getEventListForGameTick();
|
||||
@ -73,26 +69,32 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
|
||||
let y = 0;
|
||||
if (activeEvents.get(UserInputEvent.MoveUp)) {
|
||||
y = - moveAmount;
|
||||
direction = PlayerAnimationNames.WalkUp;
|
||||
direction = `${this.PlayerTexture}-${PlayerAnimationNames.WalkUp}`;
|
||||
} else if (activeEvents.get(UserInputEvent.MoveDown)) {
|
||||
y = moveAmount;
|
||||
direction = PlayerAnimationNames.WalkDown;
|
||||
direction = `${this.PlayerTexture}-${PlayerAnimationNames.WalkDown}`;
|
||||
}
|
||||
if (activeEvents.get(UserInputEvent.MoveLeft)) {
|
||||
x = -moveAmount;
|
||||
direction = PlayerAnimationNames.WalkLeft;
|
||||
direction = `${this.PlayerTexture}-${PlayerAnimationNames.WalkLeft}`;
|
||||
} else if (activeEvents.get(UserInputEvent.MoveRight)) {
|
||||
x = moveAmount;
|
||||
direction = PlayerAnimationNames.WalkRight;
|
||||
direction = `${this.PlayerTexture}-${PlayerAnimationNames.WalkRight}`;
|
||||
}
|
||||
if (x !== 0 || y !== 0) {
|
||||
this.move(x, y);
|
||||
this.emit(hasMovedEventName, {direction, x: this.x, y: this.y, frame: this.PlayerTexture});
|
||||
} else {
|
||||
direction = PlayerAnimationNames.None;
|
||||
this.stop();
|
||||
if (this.previousMove !== PlayerAnimationNames.None) {
|
||||
direction = PlayerAnimationNames.None;
|
||||
this.stop();
|
||||
this.emit(hasMovedEventName, {direction, x: this.x, y: this.y, frame: this.PlayerTexture});
|
||||
}
|
||||
}
|
||||
|
||||
this.emit(hasMovedEventName, {direction, x: this.x, y: this.y});
|
||||
if (direction !== null) {
|
||||
this.previousMove = direction;
|
||||
}
|
||||
}
|
||||
|
||||
//todo: put this method into the NonPlayer class instead
|
||||
@ -100,5 +102,6 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
|
||||
playAnimation(this, MessageUserPosition.position.direction);
|
||||
this.setX(MessageUserPosition.position.x);
|
||||
this.setY(MessageUserPosition.position.y);
|
||||
this.updatePlayerNamePosition(MessageUserPosition.position.x, MessageUserPosition.position.y);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user