Merge pull request from thecodingmachine/customtextures

Adding custom character textures
This commit is contained in:
David Négrier 2020-10-20 18:30:15 +02:00 committed by GitHub
commit e7f1f06272
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 262 additions and 95 deletions

View File

@ -31,7 +31,6 @@ export class AuthenticateController extends BaseController {
res.onAborted(() => { res.onAborted(() => {
console.warn('Login request was aborted'); console.warn('Login request was aborted');
}) })
const host = req.getHeader('host');
const param = await res.json(); const param = await res.json();
//todo: what to do if the organizationMemberToken is already used? //todo: what to do if the organizationMemberToken is already used?
@ -45,6 +44,7 @@ export class AuthenticateController extends BaseController {
const worldSlug = data.worldSlug; const worldSlug = data.worldSlug;
const roomSlug = data.roomSlug; const roomSlug = data.roomSlug;
const mapUrlStart = data.mapUrlStart; const mapUrlStart = data.mapUrlStart;
const textures = data.textures;
const authToken = jwtTokenManager.createJWTToken(userUuid); const authToken = jwtTokenManager.createJWTToken(userUuid);
res.writeStatus("200 OK"); res.writeStatus("200 OK");
@ -56,6 +56,7 @@ export class AuthenticateController extends BaseController {
worldSlug, worldSlug,
roomSlug, roomSlug,
mapUrlStart, mapUrlStart,
textures
})); }));
} catch (e) { } catch (e) {

View File

@ -1,4 +1,4 @@
import {ExSocketInterface} from "../Model/Websocket/ExSocketInterface"; //TODO fix import by "_Model/.." import {CharacterLayer, ExSocketInterface} from "../Model/Websocket/ExSocketInterface"; //TODO fix import by "_Model/.."
import {GameRoomPolicyTypes} from "../Model/GameRoom"; import {GameRoomPolicyTypes} from "../Model/GameRoom";
import {PointInterface} from "../Model/Websocket/PointInterface"; import {PointInterface} from "../Model/Websocket/PointInterface";
import { import {
@ -18,10 +18,9 @@ import {UserMovesMessage} from "../Messages/generated/messages_pb";
import {TemplatedApp} from "uWebSockets.js" import {TemplatedApp} from "uWebSockets.js"
import {parse} from "query-string"; import {parse} from "query-string";
import {jwtTokenManager} from "../Services/JWTTokenManager"; import {jwtTokenManager} from "../Services/JWTTokenManager";
import {adminApi, fetchMemberDataByUuidResponse} from "../Services/AdminApi"; import {adminApi, CharacterTexture, FetchMemberDataByUuidResponse} from "../Services/AdminApi";
import {socketManager} from "../Services/SocketManager"; import {SocketManager, socketManager} from "../Services/SocketManager";
import {emitInBatch, resetPing} from "../Services/IoSocketHelpers"; import {emitInBatch, resetPing} from "../Services/IoSocketHelpers";
import Jwt from "jsonwebtoken";
import {clientEventsEmitter} from "../Services/ClientEventsEmitter"; import {clientEventsEmitter} from "../Services/ClientEventsEmitter";
import {ADMIN_API_TOKEN} from "../Enum/EnvironmentVariable"; import {ADMIN_API_TOKEN} from "../Enum/EnvironmentVariable";
@ -159,25 +158,28 @@ export class IoSocketController {
characterLayers = [ characterLayers ]; characterLayers = [ characterLayers ];
} }
const userUuid = await jwtTokenManager.getUserUuidFromToken(token); const userUuid = await jwtTokenManager.getUserUuidFromToken(token);
let memberTags: string[] = []; let memberTags: string[] = [];
let memberTextures: CharacterTexture[] = [];
const room = await socketManager.getOrCreateRoom(roomId); const room = await socketManager.getOrCreateRoom(roomId);
if (!room.anonymous && room.policyType !== GameRoomPolicyTypes.ANONYMUS_POLICY) { try {
try { const userData = await adminApi.fetchMemberDataByUuid(userUuid);
const userData = await adminApi.fetchMemberDataByUuid(userUuid); //console.log('USERDATA', userData)
memberTags = userData.tags; memberTags = userData.tags;
if (room.policyType === GameRoomPolicyTypes.USE_TAGS_POLICY && !room.canAccess(memberTags)) { memberTextures = userData.textures;
throw new Error('No correct tags') if (!room.anonymous && room.policyType === GameRoomPolicyTypes.USE_TAGS_POLICY && !room.canAccess(memberTags)) {
} throw new Error('No correct tags')
console.log('access granted for user '+userUuid+' and room '+roomId);
} catch (e) {
console.log('access not granted for user '+userUuid+' and room '+roomId);
throw new Error('Client cannot acces this ressource.')
} }
//console.log('access granted for user '+userUuid+' and room '+roomId);
} catch (e) {
console.log('access not granted for user '+userUuid+' and room '+roomId);
throw new Error('Client cannot acces this ressource.')
} }
// Generate characterLayers objects from characterLayers string[]
const characterLayerObjs: CharacterLayer[] = SocketManager.mergeCharacterLayersAndCustomTextures(characterLayers, memberTextures);
if (upgradeAborted.aborted) { if (upgradeAborted.aborted) {
console.log("Ouch! Client disconnected before we could upgrade it!"); console.log("Ouch! Client disconnected before we could upgrade it!");
/* You must not upgrade now */ /* You must not upgrade now */
@ -192,8 +194,9 @@ export class IoSocketController {
userUuid, userUuid,
roomId, roomId,
name, name,
characterLayers, characterLayers: characterLayerObjs,
tags: memberTags, tags: memberTags,
textures: memberTextures,
position: { position: {
x: x, x: x,
y: y, y: y,
@ -233,7 +236,7 @@ export class IoSocketController {
resetPing(client); resetPing(client);
//get data information and shwo messages //get data information and shwo messages
adminApi.fetchMemberDataByUuid(client.userUuid).then((res: fetchMemberDataByUuidResponse) => { adminApi.fetchMemberDataByUuid(client.userUuid).then((res: FetchMemberDataByUuidResponse) => {
if (!res.messages) { if (!res.messages) {
return; return;
} }
@ -311,6 +314,7 @@ export class IoSocketController {
client.name = ws.name; client.name = ws.name;
client.tags = ws.tags; client.tags = ws.tags;
client.textures = ws.textures;
client.characterLayers = ws.characterLayers; client.characterLayers = ws.characterLayers;
client.roomId = ws.roomId; client.roomId = ws.roomId;
return client; return client;

View File

@ -3,6 +3,12 @@ import {Identificable} from "./Identificable";
import {ViewportInterface} from "_Model/Websocket/ViewportMessage"; import {ViewportInterface} from "_Model/Websocket/ViewportMessage";
import {BatchMessage, SubMessage} from "../../Messages/generated/messages_pb"; import {BatchMessage, SubMessage} from "../../Messages/generated/messages_pb";
import {WebSocket} from "uWebSockets.js" import {WebSocket} from "uWebSockets.js"
import {CharacterTexture} from "../../Services/AdminApi";
export interface CharacterLayer {
name: string,
url: string|undefined
}
export interface ExSocketInterface extends WebSocket, Identificable { export interface ExSocketInterface extends WebSocket, Identificable {
token: string; token: string;
@ -10,7 +16,7 @@ export interface ExSocketInterface extends WebSocket, Identificable {
//userId: number; // A temporary (autoincremented) identifier for this user //userId: number; // A temporary (autoincremented) identifier for this user
userUuid: string; // A unique identifier for this user userUuid: string; // A unique identifier for this user
name: string; name: string;
characterLayers: string[]; characterLayers: CharacterLayer[];
position: PointInterface; position: PointInterface;
viewport: ViewportInterface; viewport: ViewportInterface;
/** /**
@ -21,5 +27,6 @@ export interface ExSocketInterface extends WebSocket, Identificable {
batchTimeout: NodeJS.Timeout|null; batchTimeout: NodeJS.Timeout|null;
pingTimeout: NodeJS.Timeout|null; pingTimeout: NodeJS.Timeout|null;
disconnecting: boolean, disconnecting: boolean,
tags: string[] tags: string[],
textures: CharacterTexture[],
} }

View File

@ -1,6 +1,11 @@
import {PointInterface} from "./PointInterface"; import {PointInterface} from "./PointInterface";
import {ItemEventMessage, PointMessage, PositionMessage} from "../../Messages/generated/messages_pb"; import {
import {ExSocketInterface} from "_Model/Websocket/ExSocketInterface"; CharacterLayerMessage,
ItemEventMessage,
PointMessage,
PositionMessage
} from "../../Messages/generated/messages_pb";
import {CharacterLayer, ExSocketInterface} from "_Model/Websocket/ExSocketInterface";
import Direction = PositionMessage.Direction; import Direction = PositionMessage.Direction;
import {ItemEventMessageInterface} from "_Model/Websocket/ItemEventMessage"; import {ItemEventMessageInterface} from "_Model/Websocket/ItemEventMessage";
import {PositionInterface} from "_Model/PositionInterface"; import {PositionInterface} from "_Model/PositionInterface";
@ -89,4 +94,15 @@ export class ProtobufUtils {
return itemEventMessage; return itemEventMessage;
} }
public static toCharacterLayerMessages(characterLayers: CharacterLayer[]): CharacterLayerMessage[] {
return characterLayers.map(function(characterLayer): CharacterLayerMessage {
const message = new CharacterLayerMessage();
message.setName(characterLayer.name);
if (characterLayer.url) {
message.setUrl(characterLayer.url);
}
return message;
});
}
} }

View File

@ -1,5 +1,6 @@
import {ADMIN_API_TOKEN, ADMIN_API_URL} from "../Enum/EnvironmentVariable"; import {ADMIN_API_TOKEN, ADMIN_API_URL} from "../Enum/EnvironmentVariable";
import Axios from "axios"; import Axios from "axios";
import {v4} from "uuid";
export interface AdminApiData { export interface AdminApiData {
organizationSlug: string organizationSlug: string
@ -9,12 +10,21 @@ export interface AdminApiData {
tags: string[] tags: string[]
policy_type: number policy_type: number
userUuid: string userUuid: string
messages?: unknown[] messages?: unknown[],
textures: CharacterTexture[]
} }
export interface fetchMemberDataByUuidResponse { export interface CharacterTexture {
id: number,
level: number,
url: string,
rights: string
}
export interface FetchMemberDataByUuidResponse {
uuid: string; uuid: string;
tags: string[]; tags: string[];
textures: CharacterTexture[];
messages: unknown[]; messages: unknown[];
} }
@ -43,16 +53,31 @@ class AdminApi {
return res.data; return res.data;
} }
async fetchMemberDataByUuid(uuid: string): Promise<fetchMemberDataByUuidResponse> { async fetchMemberDataByUuid(uuid: string): Promise<FetchMemberDataByUuidResponse> {
if (!ADMIN_API_URL) { if (!ADMIN_API_URL) {
return Promise.reject('No admin backoffice set!'); return Promise.reject('No admin backoffice set!');
} }
const res = await Axios.get(ADMIN_API_URL+'/api/membership/'+uuid, try {
{ headers: {"Authorization" : `${ADMIN_API_TOKEN}`} } const res = await Axios.get(ADMIN_API_URL+'/api/membership/'+uuid,
) { headers: {"Authorization" : `${ADMIN_API_TOKEN}`} }
return res.data; )
return res.data;
} catch (e) {
if (e?.response?.status == 404) {
// If we get an HTTP 404, the token is invalid. Let's perform an anonymous login!
console.warn('Cannot find user with uuid "'+uuid+'". Performing an anonymous login instead.');
return {
uuid: v4(),
tags: [],
textures: [],
messages: [],
}
} else {
throw e;
}
}
} }
async fetchMemberDataByToken(organizationMemberToken: string): Promise<AdminApiData> { async fetchMemberDataByToken(organizationMemberToken: string): Promise<AdminApiData> {
if (!ADMIN_API_URL) { if (!ADMIN_API_URL) {
return Promise.reject('No admin backoffice set!'); return Promise.reject('No admin backoffice set!');
@ -74,7 +99,7 @@ class AdminApi {
) )
return res.data; return res.data;
} }
reportPlayer(reportedUserUuid: string, reportedUserComment: string, reporterUserUuid: string) { reportPlayer(reportedUserUuid: string, reportedUserComment: string, reporterUserUuid: string) {
return Axios.post(`${ADMIN_API_URL}/api/report`, { return Axios.post(`${ADMIN_API_URL}/api/report`, {
reportedUserUuid, reportedUserUuid,

View File

@ -1,5 +1,5 @@
import {GameRoom} from "../Model/GameRoom"; import {GameRoom} from "../Model/GameRoom";
import {ExSocketInterface} from "../Model/Websocket/ExSocketInterface"; import {CharacterLayer, ExSocketInterface} from "../Model/Websocket/ExSocketInterface";
import { import {
GroupDeleteMessage, GroupDeleteMessage,
GroupUpdateMessage, GroupUpdateMessage,
@ -23,6 +23,7 @@ import {
WebRtcStartMessage, WebRtcStartMessage,
QueryJitsiJwtMessage, QueryJitsiJwtMessage,
SendJitsiJwtMessage, SendJitsiJwtMessage,
CharacterLayerMessage,
SendUserMessage SendUserMessage
} from "../Messages/generated/messages_pb"; } from "../Messages/generated/messages_pb";
import {PointInterface} from "../Model/Websocket/PointInterface"; import {PointInterface} from "../Model/Websocket/PointInterface";
@ -34,7 +35,7 @@ import {isSetPlayerDetailsMessage} from "../Model/Websocket/SetPlayerDetailsMess
import {GROUP_RADIUS, JITSI_ISS, MINIMUM_DISTANCE, SECRET_JITSI_KEY} from "../Enum/EnvironmentVariable"; import {GROUP_RADIUS, JITSI_ISS, MINIMUM_DISTANCE, SECRET_JITSI_KEY} from "../Enum/EnvironmentVariable";
import {Movable} from "../Model/Movable"; import {Movable} from "../Model/Movable";
import {PositionInterface} from "../Model/PositionInterface"; import {PositionInterface} from "../Model/PositionInterface";
import {adminApi} from "./AdminApi"; import {adminApi, CharacterTexture} from "./AdminApi";
import Direction = PositionMessage.Direction; import Direction = PositionMessage.Direction;
import {Gauge} from "prom-client"; import {Gauge} from "prom-client";
import {emitError, emitInBatch} from "./IoSocketHelpers"; import {emitError, emitInBatch} from "./IoSocketHelpers";
@ -54,7 +55,7 @@ export interface AdminSocketData {
users: AdminSocketUsersList, users: AdminSocketUsersList,
} }
class SocketManager { export class SocketManager {
private Worlds: Map<string, GameRoom> = new Map<string, GameRoom>(); private Worlds: Map<string, GameRoom> = new Map<string, GameRoom>();
private sockets: Map<number, ExSocketInterface> = new Map<number, ExSocketInterface>(); private sockets: Map<number, ExSocketInterface> = new Map<number, ExSocketInterface>();
private nbClientsGauge: Gauge<string>; private nbClientsGauge: Gauge<string>;
@ -71,7 +72,7 @@ class SocketManager {
help: 'Number of clients per room', help: 'Number of clients per room',
labelNames: [ 'room' ] labelNames: [ 'room' ]
}); });
clientEventsEmitter.registerToClientJoin((clientUUid, roomId) => { clientEventsEmitter.registerToClientJoin((clientUUid, roomId) => {
this.nbClientsGauge.inc(); this.nbClientsGauge.inc();
// Let's log server load when a user joins // Let's log server load when a user joins
@ -83,7 +84,7 @@ class SocketManager {
console.log('A user left (', this.sockets.size, ' connected users)'); console.log('A user left (', this.sockets.size, ' connected users)');
}); });
} }
getAdminSocketDataFor(roomId:string): AdminSocketData { getAdminSocketDataFor(roomId:string): AdminSocketData {
const data:AdminSocketData = { const data:AdminSocketData = {
rooms: {}, rooms: {},
@ -125,7 +126,7 @@ class SocketManager {
const userJoinedMessage = new UserJoinedMessage(); const userJoinedMessage = new UserJoinedMessage();
userJoinedMessage.setUserid(thing.id); userJoinedMessage.setUserid(thing.id);
userJoinedMessage.setName(player.name); userJoinedMessage.setName(player.name);
userJoinedMessage.setCharacterlayersList(player.characterLayers); userJoinedMessage.setCharacterlayersList(ProtobufUtils.toCharacterLayerMessages(player.characterLayers));
userJoinedMessage.setPosition(ProtobufUtils.toPositionMessage(player.position)); userJoinedMessage.setPosition(ProtobufUtils.toPositionMessage(player.position));
roomJoinedMessage.addUser(userJoinedMessage); roomJoinedMessage.addUser(userJoinedMessage);
@ -251,8 +252,7 @@ class SocketManager {
return; return;
} }
client.name = playerDetails.name; client.name = playerDetails.name;
client.characterLayers = playerDetails.characterLayers; client.characterLayers = SocketManager.mergeCharacterLayersAndCustomTextures(playerDetails.characterLayers, client.textures);
} }
handleSilentMessage(client: ExSocketInterface, silentMessage: SilentMessage) { handleSilentMessage(client: ExSocketInterface, silentMessage: SilentMessage) {
@ -438,7 +438,7 @@ class SocketManager {
} }
userJoinedMessage.setUserid(clientUser.userId); userJoinedMessage.setUserid(clientUser.userId);
userJoinedMessage.setName(clientUser.name); userJoinedMessage.setName(clientUser.name);
userJoinedMessage.setCharacterlayersList(clientUser.characterLayers); userJoinedMessage.setCharacterlayersList(ProtobufUtils.toCharacterLayerMessages(clientUser.characterLayers));
userJoinedMessage.setPosition(ProtobufUtils.toPositionMessage(clientUser.position)); userJoinedMessage.setPosition(ProtobufUtils.toPositionMessage(clientUser.position));
const subMessage = new SubMessage(); const subMessage = new SubMessage();
@ -691,6 +691,33 @@ class SocketManager {
} }
return socket; return socket;
} }
/**
* Merges the characterLayers received from the front (as an array of string) with the custom textures from the back.
*/
static mergeCharacterLayersAndCustomTextures(characterLayers: string[], memberTextures: CharacterTexture[]): CharacterLayer[] {
const characterLayerObjs: CharacterLayer[] = [];
for (const characterLayer of characterLayers) {
if (characterLayer.startsWith('customCharacterTexture')) {
const customCharacterLayerId: number = +characterLayer.substr(22);
for (const memberTexture of memberTextures) {
if (memberTexture.id == customCharacterLayerId) {
characterLayerObjs.push({
name: characterLayer,
url: memberTexture.url
})
break;
}
}
} else {
characterLayerObjs.push({
name: characterLayer,
url: undefined
})
}
}
return characterLayerObjs;
}
} }
export const socketManager = new SocketManager(); export const socketManager = new SocketManager();

View File

@ -21,7 +21,7 @@ class ConnectionManager {
if(connexionType === GameConnexionTypes.register) { if(connexionType === GameConnexionTypes.register) {
const organizationMemberToken = urlManager.getOrganizationToken(); const organizationMemberToken = urlManager.getOrganizationToken();
const data = await Axios.post(`${API_URL}/register`, {organizationMemberToken}).then(res => res.data); const data = await Axios.post(`${API_URL}/register`, {organizationMemberToken}).then(res => res.data);
this.localUser = new LocalUser(data.userUuid, data.authToken); this.localUser = new LocalUser(data.userUuid, data.authToken, data.textures);
localUserStore.saveUser(this.localUser); localUserStore.saveUser(this.localUser);
const organizationSlug = data.organizationSlug; const organizationSlug = data.organizationSlug;
@ -34,7 +34,7 @@ class ConnectionManager {
} else if (connexionType === GameConnexionTypes.anonymous || connexionType === GameConnexionTypes.empty) { } else if (connexionType === GameConnexionTypes.anonymous || connexionType === GameConnexionTypes.empty) {
const localUser = localUserStore.getLocalUser(); const localUser = localUserStore.getLocalUser();
if (localUser && localUser.jwtToken && localUser.uuid) { if (localUser && localUser.jwtToken && localUser.uuid && localUser.textures) {
this.localUser = localUser; this.localUser = localUser;
try { try {
await this.verifyToken(localUser.jwtToken); await this.verifyToken(localUser.jwtToken);
@ -78,12 +78,12 @@ class ConnectionManager {
private async anonymousLogin(): Promise<void> { private async anonymousLogin(): Promise<void> {
const data = await Axios.post(`${API_URL}/anonymLogin`).then(res => res.data); const data = await Axios.post(`${API_URL}/anonymLogin`).then(res => res.data);
this.localUser = new LocalUser(data.userUuid, data.authToken); this.localUser = new LocalUser(data.userUuid, data.authToken, []);
localUserStore.saveUser(this.localUser); localUserStore.saveUser(this.localUser);
} }
public initBenchmark(): void { public initBenchmark(): void {
this.localUser = new LocalUser('', 'test'); this.localUser = new LocalUser('', 'test', []);
} }
public connectToRoomSocket(roomId: string, name: string, characterLayers: string[], position: PositionInterface, viewport: ViewportInterface): Promise<RoomConnection> { public connectToRoomSocket(roomId: string, name: string, characterLayers: string[], position: PositionInterface, viewport: ViewportInterface): Promise<RoomConnection> {

View File

@ -1,6 +1,7 @@
import {PlayerAnimationNames} from "../Phaser/Player/Animation"; import {PlayerAnimationNames} from "../Phaser/Player/Animation";
import {UserSimplePeerInterface} from "../WebRtc/SimplePeer"; import {UserSimplePeerInterface} from "../WebRtc/SimplePeer";
import {SignalData} from "simple-peer"; import {SignalData} from "simple-peer";
import {BodyResourceDescriptionInterface} from "../Phaser/Entity/body_character";
export enum EventMessage{ export enum EventMessage{
WEBRTC_SIGNAL = "webrtc-signal", WEBRTC_SIGNAL = "webrtc-signal",
@ -49,7 +50,7 @@ export class Point implements PointInterface{
export interface MessageUserPositionInterface { export interface MessageUserPositionInterface {
userId: number; userId: number;
name: string; name: string;
characterLayers: string[]; characterLayers: BodyResourceDescriptionInterface[];
position: PointInterface; position: PointInterface;
} }
@ -61,7 +62,7 @@ export interface MessageUserMovedInterface {
export interface MessageUserJoined { export interface MessageUserJoined {
userId: number; userId: number;
name: string; name: string;
characterLayers: string[]; characterLayers: BodyResourceDescriptionInterface[];
position: PointInterface position: PointInterface
} }

View File

@ -1,9 +1,11 @@
export interface CharacterTexture {
id: number,
level: number,
url: string,
rights: string
}
export class LocalUser { export class LocalUser {
public uuid: string; constructor(public readonly uuid:string, public readonly jwtToken: string, public readonly textures: CharacterTexture[]) {
public jwtToken: string;
constructor(uuid:string, jwtToken: string) {
this.uuid = uuid;
this.jwtToken = jwtToken;
} }
} }

View File

@ -22,7 +22,11 @@ import {
WebRtcSignalToServerMessage, WebRtcSignalToServerMessage,
WebRtcStartMessage, WebRtcStartMessage,
ReportPlayerMessage, ReportPlayerMessage,
TeleportMessageMessage, QueryJitsiJwtMessage, SendJitsiJwtMessage, SendUserMessage TeleportMessageMessage,
QueryJitsiJwtMessage,
SendJitsiJwtMessage,
CharacterLayerMessage,
SendUserMessage
} from "../Messages/generated/messages_pb" } from "../Messages/generated/messages_pb"
import {UserSimplePeerInterface} from "../WebRtc/SimplePeer"; import {UserSimplePeerInterface} from "../WebRtc/SimplePeer";
@ -36,6 +40,7 @@ import {
ViewportInterface, WebRtcDisconnectMessageInterface, ViewportInterface, WebRtcDisconnectMessageInterface,
WebRtcSignalReceivedMessageInterface, WebRtcSignalReceivedMessageInterface,
} from "./ConnexionModels"; } from "./ConnexionModels";
import {BodyResourceDescriptionInterface} from "../Phaser/Entity/body_character";
export class RoomConnection implements RoomConnection { export class RoomConnection implements RoomConnection {
private readonly socket: WebSocket; private readonly socket: WebSocket;
@ -169,10 +174,10 @@ export class RoomConnection implements RoomConnection {
} }
} }
public emitPlayerDetailsMessage(userName: string, characterLayersSelected: string[]) { public emitPlayerDetailsMessage(userName: string, characterLayersSelected: BodyResourceDescriptionInterface[]) {
const message = new SetPlayerDetailsMessage(); const message = new SetPlayerDetailsMessage();
message.setName(userName); message.setName(userName);
message.setCharacterlayersList(characterLayersSelected); message.setCharacterlayersList(characterLayersSelected.map((characterLayer) => characterLayer.name));
const clientToServerMessage = new ClientToServerMessage(); const clientToServerMessage = new ClientToServerMessage();
clientToServerMessage.setSetplayerdetailsmessage(message); clientToServerMessage.setSetplayerdetailsmessage(message);
@ -277,10 +282,18 @@ export class RoomConnection implements RoomConnection {
if (position === undefined) { if (position === undefined) {
throw new Error('Invalid JOIN_ROOM message'); throw new Error('Invalid JOIN_ROOM message');
} }
const characterLayers = message.getCharacterlayersList().map((characterLayer: CharacterLayerMessage): BodyResourceDescriptionInterface => {
return {
name: characterLayer.getName(),
img: characterLayer.getUrl()
}
})
return { return {
userId: message.getUserid(), userId: message.getUserid(),
name: message.getName(), name: message.getName(),
characterLayers: message.getCharacterlayersList(), characterLayers,
position: ProtobufClientUtils.toPointInterface(position) position: ProtobufClientUtils.toPointInterface(position)
} }
} }

View File

@ -61,22 +61,7 @@ export abstract class Character extends Container {
this.sprites = new Map<string, Sprite>(); this.sprites = new Map<string, Sprite>();
for (const texture of textures) { this.addTextures(textures, frame);
const sprite = new Sprite(scene, 0, 0, texture, frame);
sprite.setInteractive({useHandCursor: true});
this.add(sprite);
this.getPlayerAnimations(texture).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
});
})
// Needed, otherwise, animations are not handled correctly.
this.scene.sys.updateList.add(sprite);
this.sprites.set(texture, sprite);
}
/*this.teleportation = new Sprite(scene, -20, -10, 'teleportation', 3); /*this.teleportation = new Sprite(scene, -20, -10, 'teleportation', 3);
this.teleportation.setInteractive(); this.teleportation.setInteractive();
@ -107,6 +92,25 @@ export abstract class Character extends Container {
this.playAnimation(direction, moving); this.playAnimation(direction, moving);
} }
public addTextures(textures: string[], frame?: string | number): void {
for (const texture of textures) {
const sprite = new Sprite(this.scene, 0, 0, texture, frame);
sprite.setInteractive({useHandCursor: true});
this.add(sprite);
this.getPlayerAnimations(texture).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
});
})
// Needed, otherwise, animations are not handled correctly.
this.scene.sys.updateList.add(sprite);
this.sprites.set(texture, sprite);
}
}
private getPlayerAnimations(name: string): AnimationData[] { private getPlayerAnimations(name: string): AnimationData[] {
return [{ return [{
key: `${name}-${PlayerAnimationNames.WalkDown}`, key: `${name}-${PlayerAnimationNames.WalkDown}`,

View File

@ -1,5 +1,6 @@
import LoaderPlugin = Phaser.Loader.LoaderPlugin; import LoaderPlugin = Phaser.Loader.LoaderPlugin;
import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "./Character"; import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "./Character";
import {CharacterTexture} from "../../Connexion/LocalUser";
export interface BodyResourceDescriptionInterface { export interface BodyResourceDescriptionInterface {
name: string, name: string,
@ -312,6 +313,15 @@ export const loadAllLayers = (load: LoaderPlugin) => {
} }
} }
export const loadCustomTexture = (load: LoaderPlugin, texture: CharacterTexture) => {
const name = 'customCharacterTexture'+texture.id;
load.spritesheet(
name,
texture.url,
{frameWidth: 32, frameHeight: 32}
);
}
export const OBJECTS: Array<PlayerResourceDescriptionInterface> = [ export const OBJECTS: Array<PlayerResourceDescriptionInterface> = [
{name:'layout_modes', img:'resources/objects/layout_modes.png'}, {name:'layout_modes', img:'resources/objects/layout_modes.png'},
{name:'teleportation', img:'resources/objects/teleportation.png'}, {name:'teleportation', img:'resources/objects/teleportation.png'},

View File

@ -1,8 +1,9 @@
import {PointInterface} from "../../Connexion/ConnexionModels"; import {PointInterface} from "../../Connexion/ConnexionModels";
import {BodyResourceDescriptionInterface} from "../Entity/body_character";
export interface AddPlayerInterface { export interface AddPlayerInterface {
userId: number; userId: number;
name: string; name: string;
characterLayers: string[]; characterLayers: BodyResourceDescriptionInterface[];
position: PointInterface; position: PointInterface;
} }

View File

@ -32,7 +32,7 @@ import {RemotePlayer} from "../Entity/RemotePlayer";
import {Queue} from 'queue-typescript'; import {Queue} from 'queue-typescript';
import {SimplePeer, UserSimplePeerInterface} from "../../WebRtc/SimplePeer"; import {SimplePeer, UserSimplePeerInterface} from "../../WebRtc/SimplePeer";
import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene"; import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene";
import {loadAllLayers, loadObject, loadPlayerCharacters} from "../Entity/body_character"; import {loadAllLayers, loadCustomTexture, loadObject, loadPlayerCharacters} from "../Entity/body_character";
import {CenterListener, layoutManager, LayoutMode} from "../../WebRtc/LayoutManager"; import {CenterListener, layoutManager, LayoutMode} from "../../WebRtc/LayoutManager";
import Texture = Phaser.Textures.Texture; import Texture = Phaser.Textures.Texture;
import Sprite = Phaser.GameObjects.Sprite; import Sprite = Phaser.GameObjects.Sprite;
@ -475,7 +475,6 @@ export class GameScene extends ResizableScene implements CenterListener {
if (newValue === undefined) { if (newValue === undefined) {
this.stopJitsi(); this.stopJitsi();
} else { } else {
console.log("JITSI_PRIVATE_MODE", JITSI_PRIVATE_MODE);
if (JITSI_PRIVATE_MODE) { if (JITSI_PRIVATE_MODE) {
const adminTag = allProps.get("jitsiRoomAdminTag") as string|undefined; const adminTag = allProps.get("jitsiRoomAdminTag") as string|undefined;
@ -1022,7 +1021,7 @@ export class GameScene extends ResizableScene implements CenterListener {
/** /**
* Create new player * Create new player
*/ */
private doAddPlayer(addPlayerData : AddPlayerInterface) : void { private async doAddPlayer(addPlayerData : AddPlayerInterface) : Promise<void> {
//check if exist player, if exist, move position //check if exist player, if exist, move position
if(this.MapPlayersByKey.has(addPlayerData.userId)){ if(this.MapPlayersByKey.has(addPlayerData.userId)){
this.updatePlayerPosition({ this.updatePlayerPosition({
@ -1031,6 +1030,20 @@ export class GameScene extends ResizableScene implements CenterListener {
}); });
return; return;
} }
// Load textures (in case it is a custom texture)
const characterLayerList: string[] = [];
const loadPromises: Promise<void>[] = [];
for (const characterLayer of addPlayerData.characterLayers) {
characterLayerList.push(characterLayer.name);
if (characterLayer.img) {
console.log('LOADING ', characterLayer.name, characterLayer.img)
loadPromises.push(this.loadSpritesheet(characterLayer.name, characterLayer.img));
}
}
if (loadPromises.length > 0) {
this.load.start();
}
//initialise player //initialise player
const player = new RemotePlayer( const player = new RemotePlayer(
addPlayerData.userId, addPlayerData.userId,
@ -1038,7 +1051,7 @@ export class GameScene extends ResizableScene implements CenterListener {
addPlayerData.position.x, addPlayerData.position.x,
addPlayerData.position.y, addPlayerData.position.y,
addPlayerData.name, addPlayerData.name,
addPlayerData.characterLayers, [], // Let's go with no textures and let's load textures when promises have returned.
addPlayerData.position.direction, addPlayerData.position.direction,
addPlayerData.position.moving addPlayerData.position.moving
); );
@ -1046,10 +1059,15 @@ export class GameScene extends ResizableScene implements CenterListener {
this.MapPlayersByKey.set(player.userId, player); this.MapPlayersByKey.set(player.userId, player);
player.updatePosition(addPlayerData.position); player.updatePosition(addPlayerData.position);
await Promise.all(loadPromises);
player.addTextures(characterLayerList, 1);
//init collision //init collision
/*this.physics.add.collider(this.CurrentPlayer, player, (CurrentPlayer: CurrentGamerInterface, MapPlayer: GamerInterface) => { /*this.physics.add.collider(this.CurrentPlayer, player, (CurrentPlayer: CurrentGamerInterface, MapPlayer: GamerInterface) => {
CurrentPlayer.say("Hello, how are you ? "); CurrentPlayer.say("Hello, how are you ? ");
});*/ });*/
} }
/** /**
@ -1245,4 +1263,18 @@ export class GameScene extends ResizableScene implements CenterListener {
CoWebsiteManager.closeCoWebsite(); CoWebsiteManager.closeCoWebsite();
mediaManager.showGameOverlay(); mediaManager.showGameOverlay();
} }
private loadSpritesheet(name: string, url: string): Promise<void> {
return new Promise<void>(((resolve, reject) => {
this.load.spritesheet(
name,
url,
{frameWidth: 32, frameHeight: 32}
);
this.load.on('filecomplete-spritesheet-'+name, () => {
console.log('RESOURCE LOADED!');
resolve();
});
}))
}
} }

View File

@ -2,12 +2,13 @@ import {EnableCameraSceneName} from "./EnableCameraScene";
import {TextField} from "../Components/TextField"; import {TextField} from "../Components/TextField";
import Image = Phaser.GameObjects.Image; import Image = Phaser.GameObjects.Image;
import Rectangle = Phaser.GameObjects.Rectangle; import Rectangle = Phaser.GameObjects.Rectangle;
import {LAYERS, loadAllLayers} from "../Entity/body_character"; import {BodyResourceDescriptionInterface, LAYERS, loadAllLayers, loadCustomTexture} from "../Entity/body_character";
import Sprite = Phaser.GameObjects.Sprite; import Sprite = Phaser.GameObjects.Sprite;
import Container = Phaser.GameObjects.Container; import Container = Phaser.GameObjects.Container;
import {gameManager} from "../Game/GameManager"; import {gameManager} from "../Game/GameManager";
import {ResizableScene} from "./ResizableScene"; import {ResizableScene} from "./ResizableScene";
import {localUserStore} from "../../Connexion/LocalUserStore"; import {localUserStore} from "../../Connexion/LocalUserStore";
import {PlayerResourceDescriptionInterface} from "../Entity/Character";
export const CustomizeSceneName = "CustomizeScene"; export const CustomizeSceneName = "CustomizeScene";
@ -36,6 +37,7 @@ export class CustomizeScene extends ResizableScene {
private selectedLayers: number[] = [0]; private selectedLayers: number[] = [0];
private containersRow: Container[][] = []; private containersRow: Container[][] = [];
private activeRow:number = 0; private activeRow:number = 0;
private layers: BodyResourceDescriptionInterface[][] = [];
constructor() { constructor() {
super({ super({
@ -51,6 +53,23 @@ export class CustomizeScene extends ResizableScene {
//load all the png files //load all the png files
loadAllLayers(this.load); loadAllLayers(this.load);
// load custom layers
this.layers = LAYERS;
const localUser = localUserStore.getLocalUser();
const textures = localUser?.textures;
if (textures) {
for (const texture of textures) {
loadCustomTexture(this.load, texture);
const name = 'customCharacterTexture'+texture.id;
this.layers[texture.level].unshift({
name,
img: texture.url
});
}
}
} }
create() { create() {
@ -94,7 +113,7 @@ export class CustomizeScene extends ResizableScene {
let i = 0; let i = 0;
for (const layerItem of this.selectedLayers) { for (const layerItem of this.selectedLayers) {
if (layerItem !== undefined) { if (layerItem !== undefined) {
layers.push(LAYERS[i][layerItem].name); layers.push(this.layers[i][layerItem].name);
} }
i++; i++;
} }
@ -108,7 +127,7 @@ export class CustomizeScene extends ResizableScene {
this.input.keyboard.on('keydown-LEFT', () => this.moveCursorHorizontally(-1)); this.input.keyboard.on('keydown-LEFT', () => this.moveCursorHorizontally(-1));
this.input.keyboard.on('keydown-DOWN', () => this.moveCursorVertically(1)); this.input.keyboard.on('keydown-DOWN', () => this.moveCursorVertically(1));
this.input.keyboard.on('keydown-UP', () => this.moveCursorVertically(-1)); this.input.keyboard.on('keydown-UP', () => this.moveCursorVertically(-1));
const customCursorPosition = localUserStore.getCustomCursorPosition(); const customCursorPosition = localUserStore.getCustomCursorPosition();
if (customCursorPosition) { if (customCursorPosition) {
this.activeRow = customCursorPosition.activeRow; this.activeRow = customCursorPosition.activeRow;
@ -117,34 +136,34 @@ export class CustomizeScene extends ResizableScene {
this.updateSelectedLayer(); this.updateSelectedLayer();
} }
} }
private moveCursorHorizontally(index: number): void { private moveCursorHorizontally(index: number): void {
this.selectedLayers[this.activeRow] += index; this.selectedLayers[this.activeRow] += index;
if (this.selectedLayers[this.activeRow] < 0) { if (this.selectedLayers[this.activeRow] < 0) {
this.selectedLayers[this.activeRow] = 0 this.selectedLayers[this.activeRow] = 0
} else if(this.selectedLayers[this.activeRow] > LAYERS[this.activeRow].length - 1) { } else if(this.selectedLayers[this.activeRow] > this.layers[this.activeRow].length - 1) {
this.selectedLayers[this.activeRow] = LAYERS[this.activeRow].length - 1 this.selectedLayers[this.activeRow] = this.layers[this.activeRow].length - 1
} }
this.moveLayers(); this.moveLayers();
this.updateSelectedLayer(); this.updateSelectedLayer();
this.saveInLocalStorage(); this.saveInLocalStorage();
} }
private moveCursorVertically(index:number): void { private moveCursorVertically(index:number): void {
this.activeRow += index; this.activeRow += index;
if (this.activeRow < 0) { if (this.activeRow < 0) {
this.activeRow = 0 this.activeRow = 0
} else if (this.activeRow > LAYERS.length - 1) { } else if (this.activeRow > this.layers.length - 1) {
this.activeRow = LAYERS.length - 1 this.activeRow = this.layers.length - 1
} }
this.moveLayers(); this.moveLayers();
this.saveInLocalStorage(); this.saveInLocalStorage();
} }
private saveInLocalStorage() { private saveInLocalStorage() {
localUserStore.setCustomCursorPosition(this.activeRow, this.selectedLayers); localUserStore.setCustomCursorPosition(this.activeRow, this.selectedLayers);
} }
update(time: number, delta: number): void { update(time: number, delta: number): void {
super.update(time, delta); super.update(time, delta);
this.enterField.setVisible(!!(Math.floor(time / 500) % 2)); this.enterField.setVisible(!!(Math.floor(time / 500) % 2));
@ -153,7 +172,7 @@ export class CustomizeScene extends ResizableScene {
/** /**
* @param x, the layer's vertical position * @param x, the layer's vertical position
* @param y, the layer's horizontal position * @param y, the layer's horizontal position
* @param layerNumber, index of the LAYERS array * @param layerNumber, index of the this.layers array
* create the layer and display it on the scene * create the layer and display it on the scene
*/ */
private createCustomizeLayer(x: number, y: number, layerNumber: number): void { private createCustomizeLayer(x: number, y: number, layerNumber: number): void {
@ -161,7 +180,7 @@ export class CustomizeScene extends ResizableScene {
this.selectedLayers[layerNumber] = 0; this.selectedLayers[layerNumber] = 0;
let alpha = 0; let alpha = 0;
let layerPosX = 0; let layerPosX = 0;
for (let i = 0; i < LAYERS[layerNumber].length; i++) { for (let i = 0; i < this.layers[layerNumber].length; i++) {
const container = this.generateCharacter(300 + x + layerPosX, y, layerNumber, i); const container = this.generateCharacter(300 + x + layerPosX, y, layerNumber, i);
this.containersRow[layerNumber][i] = container; this.containersRow[layerNumber][i] = container;
@ -190,13 +209,13 @@ export class CustomizeScene extends ResizableScene {
const children: Array<Sprite> = new Array<Sprite>(); const children: Array<Sprite> = new Array<Sprite>();
for (let j = 0; j <= layerNumber; j++) { for (let j = 0; j <= layerNumber; j++) {
if (j === layerNumber) { if (j === layerNumber) {
children.push(this.generateLayers(0, 0, LAYERS[j][selectedItem].name)); children.push(this.generateLayers(0, 0, this.layers[j][selectedItem].name));
} else { } else {
const layer = this.selectedLayers[j]; const layer = this.selectedLayers[j];
if (layer === undefined) { if (layer === undefined) {
continue; continue;
} }
children.push(this.generateLayers(0, 0, LAYERS[j][layer].name)); children.push(this.generateLayers(0, 0, this.layers[j][layer].name));
} }
} }
return children; return children;

Binary file not shown.

After

(image error) Size: 14 KiB

Binary file not shown.

After

(image error) Size: 13 KiB

BIN
maps/characters/tenue-f.png Normal file

Binary file not shown.

After

(image error) Size: 13 KiB

Binary file not shown.

After

(image error) Size: 14 KiB

Binary file not shown.

After

(image error) Size: 13 KiB

BIN
maps/characters/tenue-m.png Normal file

Binary file not shown.

After

(image error) Size: 12 KiB

View File

@ -31,6 +31,11 @@ message SilentMessage {
bool silent = 1; bool silent = 1;
} }
message CharacterLayerMessage {
string url = 1;
string name = 2;
}
/*********** CLIENT TO SERVER MESSAGES *************/ /*********** CLIENT TO SERVER MESSAGES *************/
message SetPlayerDetailsMessage { message SetPlayerDetailsMessage {
@ -129,7 +134,7 @@ message GroupDeleteMessage {
message UserJoinedMessage { message UserJoinedMessage {
int32 userId = 1; int32 userId = 1;
string name = 2; string name = 2;
repeated string characterLayers = 3; repeated CharacterLayerMessage characterLayers = 3;
PositionMessage position = 4; PositionMessage position = 4;
} }