lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Merge branch 'develop' into openidAdminConnect

Browse source 
Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com>
This commit is contained in:
Gregoire Parant 2021-11-12 17:01:26 +01:00
parent 461dee776c ee4ec7ba97
commit e073d70098
10 changed files with 150 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
docker-compose.yaml
View file

@ -29,6 +29,7 @@ services:
PUSHER_URL: //pusher.workadventure.localhost
UPLOADER_URL: //uploader.workadventure.localhost
ADMIN_URL: //workadventure.localhost
ICON_URL: //icon.workadventure.localhost
STARTUP_COMMAND_1: ./templater.sh
STARTUP_COMMAND_2: yarn install
STUN_SERVER: "stun:stun.l.google.com:19302"
@ -177,6 +178,17 @@ services:
- "traefik.http.routers.redisinsight-ssl.tls=true"
- "traefik.http.routers.redisinsight-ssl.service=redisinsight"
icon:
image: matthiasluedtke/iconserver:v3.13.0
labels:
- "traefik.http.routers.icon.rule=Host(`icon.workadventure.localhost`)"
- "traefik.http.routers.icon.entryPoints=web"
- "traefik.http.services.icon.loadbalancer.server.port=8080"
- "traefik.http.routers.icon-ssl.rule=Host(`icon.workadventure.localhost`)"
- "traefik.http.routers.icon-ssl.entryPoints=websecure"
- "traefik.http.routers.icon-ssl.tls=true"
- "traefik.http.routers.icon-ssl.service=icon"
# coturn:
# image: coturn/coturn:4.5.2
# command:

9
front/src/Components/EmoteMenu/EmoteMenu.svelte
View file

@ -18,13 +18,18 @@
'--font': 'Press Start 2P'
},
emojisPerRow: isMobile() ? 6 : 8,
autoFocusSearch: false
autoFocusSearch: false,
style: 'twemoji',
});
//the timeout is here to prevent the menu from flashing
setTimeout(() => picker.showPicker(emojiContainer), 100);
picker.on("emoji", (selection) => {
emoteStore.set(selection.emoji);
emoteStore.set({
unicode: selection.emoji,
url: selection.url,
name: selection.name
});
});
picker.on("hidden", () => {

8
front/src/Components/Menu/MenuIcon.svelte
View file

@ -11,15 +11,9 @@
function showChat(){
chatVisibilityStore.set(true);
}
function onKeyDown(e: KeyboardEvent) {
if (e.key === "Tab") {
showMenu();
}
}
</script>
<svelte:window on:keydown={onKeyDown}/>
<svelte:window/>
<main class="menuIcon">
<img src={logoWA} alt="open menu" class="nes-pointer" on:click|preventDefault={showMenu}>

2
front/src/Enum/EnvironmentVariable.ts
View file

@ -4,6 +4,7 @@ const START_ROOM_URL: string =
const PUSHER_URL = process.env.PUSHER_URL || "//pusher.workadventure.localhost";
export const ADMIN_URL = process.env.ADMIN_URL || "//workadventu.re";
const UPLOADER_URL = process.env.UPLOADER_URL || "//uploader.workadventure.localhost";
const ICON_URL = process.env.ICON_URL || "//icon.workadventure.localhost";
const STUN_SERVER: string = process.env.STUN_SERVER || "stun:stun.l.google.com:19302";
const TURN_SERVER: string = process.env.TURN_SERVER || "";
const SKIP_RENDER_OPTIMIZATIONS: boolean = process.env.SKIP_RENDER_OPTIMIZATIONS == "true";
@ -32,6 +33,7 @@ export {
DISABLE_NOTIFICATIONS,
PUSHER_URL,
UPLOADER_URL,
ICON_URL,
POSITION_DELAY,
MAX_EXTRAPOLATION_TIME,
STUN_SERVER,

8
front/src/Phaser/Entity/Character.ts
View file

@ -3,6 +3,7 @@ import { SpeechBubble } from "./SpeechBubble";
import Text = Phaser.GameObjects.Text;
import Container = Phaser.GameObjects.Container;
import Sprite = Phaser.GameObjects.Sprite;
import DOMElement = Phaser.GameObjects.DOMElement;
import { TextureError } from "../../Exception/TextureError";
import { Companion } from "../Companion/Companion";
import type { GameScene } from "../Game/GameScene";
@ -33,7 +34,7 @@ export abstract class Character extends Container {
//private teleportation: Sprite;
private invisible: boolean;
public companion?: Companion;
private emote: Phaser.GameObjects.Text | null = null;
private emote: Phaser.GameObjects.DOMElement | null = null;
private emoteTween: Phaser.Tweens.Tween | null = null;
scene: GameScene;
@ -300,8 +301,9 @@ export abstract class Character extends Container {
playEmote(emote: string) {
this.cancelPreviousEmote();
const emoteY = -45;
this.playerName.setVisible(false);
this.emote = new Text(this.scene, -10, 0, emote, { fontSize: "20px" });
const image = new Image(16, 16);
image.src = emote;
this.emote = new DOMElement(this.scene, -1, 0, image, "z-index:10;");
this.emote.setAlpha(0);
this.add(this.emote);
this.createStartTransition(emoteY);

29
front/src/Phaser/Game/GameScene.ts
View file

@ -15,10 +15,7 @@ import type {
import { DEBUG_MODE, JITSI_PRIVATE_MODE, MAX_PER_GROUP, POSITION_DELAY } from "../../Enum/EnvironmentVariable";
import { Queue } from "queue-typescript";
import {
Box,
ON_ACTION_TRIGGER_BUTTON,
} from "../../WebRtc/LayoutManager";
import { Box, ON_ACTION_TRIGGER_BUTTON } from "../../WebRtc/LayoutManager";
import { CoWebsite, coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
import type { UserMovedMessage } from "../../Messages/generated/messages_pb";
import { ProtobufClientUtils } from "../../Network/ProtobufClientUtils";
@ -497,7 +494,10 @@ export class GameScene extends DirtyScene {
object.properties,
'in the "' + object.name + '" object of type "website"'
);
const allowApi = PropertyUtils.findBooleanProperty(GameMapProperties.ALLOW_API, object.properties);
const allowApi = PropertyUtils.findBooleanProperty(
GameMapProperties.ALLOW_API,
object.properties
);
// TODO: add a "allow" property to iframe
this.embeddedWebsiteManager.createEmbeddedWebsite(
@ -614,10 +614,10 @@ export class GameScene extends DirtyScene {
oldPeerNumber = newPeerNumber;
});
this.emoteUnsubscribe = emoteStore.subscribe((emoteKey) => {
if (emoteKey) {
this.CurrentPlayer?.playEmote(emoteKey);
this.connection?.emitEmoteEvent(emoteKey);
this.emoteUnsubscribe = emoteStore.subscribe((emote) => {
if (emote) {
this.CurrentPlayer?.playEmote(emote.url);
this.connection?.emitEmoteEvent(emote.url);
emoteStore.set(null);
}
});
@ -763,14 +763,14 @@ export class GameScene extends DirtyScene {
this.gameMap.setPosition(this.CurrentPlayer.x, this.CurrentPlayer.y);
// Init layer change listener
this.gameMap.onEnterLayer(layers => {
layers.forEach(layer => {
this.gameMap.onEnterLayer((layers) => {
layers.forEach((layer) => {
iframeListener.sendEnterLayerEvent(layer.name);
});
});
this.gameMap.onLeaveLayer(layers => {
layers.forEach(layer => {
this.gameMap.onLeaveLayer((layers) => {
layers.forEach((layer) => {
iframeListener.sendLeaveLayerEvent(layer.name);
});
});
@ -1868,7 +1868,8 @@ ${escapedMessage}
public startJitsi(roomName: string, jwt?: string): void {
const allProps = this.gameMap.getCurrentProperties();
const jitsiConfig = this.safeParseJSONstring(
allProps.get(GameMapProperties.JITSI_CONFIG) as string | undefined, GameMapProperties.JITSI_CONFIG
allProps.get(GameMapProperties.JITSI_CONFIG) as string | undefined,
GameMapProperties.JITSI_CONFIG
);
const jitsiInterfaceConfig = this.safeParseJSONstring(
allProps.get(GameMapProperties.JITSI_INTERFACE_CONFIG) as string | undefined,

20
front/src/Phaser/Player/Player.ts
View file

@ -3,8 +3,6 @@ import type { GameScene } from "../Game/GameScene";
import { UserInputEvent, UserInputManager } from "../UserInput/UserInputManager";
import { Character } from "../Entity/Character";
import { userMovingStore } from "../../Stores/GameStore";
import { get } from "svelte/store";
import { emoteMenuStore } from "../../Stores/EmoteStore";
export const hasMovedEventName = "hasMoved";
export const requestEmoteEventName = "requestEmote";
@ -68,10 +66,24 @@ export class Player extends Character {
} else if (this.wasMoving && moving) {
// slow joystick movement
this.move(0, 0);
this.emit(hasMovedEventName, { moving, direction: this.previousDirection, x: this.x, y: this.y, oldX: x, oldY: y });
this.emit(hasMovedEventName, {
moving,
direction: this.previousDirection,
x: this.x,
y: this.y,
oldX: x,
oldY: y,
});
} else if (this.wasMoving && !moving) {
this.stop();
this.emit(hasMovedEventName, { moving, direction: this.previousDirection, x: this.x, y: this.y, oldX: x, oldY: y });
this.emit(hasMovedEventName, {
moving,
direction: this.previousDirection,
x: this.x,
y: this.y,
oldX: x,
oldY: y,
});
}
if (direction !== null) {

8
front/src/Stores/EmoteStore.ts
View file

@ -1,5 +1,11 @@
import { writable } from "svelte/store";
export interface Emoji {
unicode: string;
url: string;
name: string;
}
function createEmoteMenuStore() {
const { subscribe, set } = writable(false);
@ -14,5 +20,5 @@ function createEmoteMenuStore() {
};
}
export const emoteStore = writable<string | null>(null);
export const emoteStore = writable<Emoji | null>(null);
export const emoteMenuStore = createEmoteMenuStore();

169
front/src/WebRtc/CoWebsiteManager.ts
View file

@ -3,6 +3,7 @@ import { Subject } from "rxjs";
import { iframeListener } from "../Api/IframeListener";
import { touchScreenManager } from "../Touch/TouchScreenManager";
import { waScaleManager } from "../Phaser/Services/WaScaleManager";
import { ICON_URL } from "../Enum/EnvironmentVariable";
enum iframeStates {
closed = 1,
@ -27,16 +28,16 @@ interface TouchMoveCoordinates {
y: number;
}
export type CoWebsite = {
iframe: HTMLIFrameElement,
icon: HTMLDivElement,
position: number
}
export type CoWebsite = {
iframe: HTMLIFrameElement;
icon: HTMLDivElement;
position: number;
};
type CoWebsiteSlot = {
container: HTMLElement,
position: number
}
container: HTMLElement;
position: number;
};
class CoWebsiteManager {
private openedMain: iframeStates = iframeStates.closed;
@ -61,7 +62,7 @@ class CoWebsiteManager {
private slots: CoWebsiteSlot[];
private resizeObserver = new ResizeObserver(entries => {
private resizeObserver = new ResizeObserver((entries) => {
this.resizeAllIframes();
});
@ -108,23 +109,23 @@ class CoWebsiteManager {
this.slots = [
{
container: this.cowebsiteMainDom,
position: 0
position: 0,
},
{
container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>('cowebsite-slot-1'),
position: 1
container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite-slot-1"),
position: 1,
},
{
container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>('cowebsite-slot-2'),
position: 2
container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite-slot-2"),
position: 2,
},
{
container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>('cowebsite-slot-3'),
position: 3
container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite-slot-3"),
position: 3,
},
{
container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>('cowebsite-slot-4'),
position: 4
container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite-slot-4"),
position: 4,
},
];
@ -163,8 +164,10 @@ class CoWebsiteManager {
}
private isSmallScreen(): boolean {
return window.matchMedia("(max-aspect-ratio: 1/1)").matches ||
window.matchMedia("(max-width:960px) and (max-height:768px)").matches;
return (
window.matchMedia("(max-aspect-ratio: 1/1)").matches ||
window.matchMedia("(max-width:960px) and (max-height:768px)").matches
);
}
private initResizeListeners(touchMode: boolean) {
@ -235,12 +238,12 @@ class CoWebsiteManager {
private initActionsListeners() {
this.slots.forEach((slot: CoWebsiteSlot) => {
const expandButton = slot.container.querySelector('.expand');
const highlightButton = slot.container.querySelector('.hightlight');
const closeButton = slot.container.querySelector('.close');
const expandButton = slot.container.querySelector(".expand");
const highlightButton = slot.container.querySelector(".hightlight");
const closeButton = slot.container.querySelector(".close");
if (expandButton) {
expandButton.addEventListener('click', (event) => {
expandButton.addEventListener("click", (event) => {
event.preventDefault();
const coWebsite = this.getCoWebsiteByPosition(slot.position);
@ -253,7 +256,7 @@ class CoWebsiteManager {
}
if (highlightButton) {
highlightButton.addEventListener('click', (event) => {
highlightButton.addEventListener("click", (event) => {
event.preventDefault();
const coWebsite = this.getCoWebsiteByPosition(slot.position);
@ -266,7 +269,7 @@ class CoWebsiteManager {
}
if (closeButton) {
closeButton.addEventListener('click', (event) => {
closeButton.addEventListener("click", (event) => {
event.preventDefault();
const coWebsite = this.getCoWebsiteByPosition(slot.position);
@ -284,37 +287,37 @@ class CoWebsiteManager {
return this.coWebsites;
}
public getCoWebsiteById(coWebsiteId: string): CoWebsite|undefined {
public getCoWebsiteById(coWebsiteId: string): CoWebsite | undefined {
return this.coWebsites.find((coWebsite: CoWebsite) => coWebsite.iframe.id === coWebsiteId);
}
private getSlotByPosition(position: number): CoWebsiteSlot|undefined {
private getSlotByPosition(position: number): CoWebsiteSlot | undefined {
return this.slots.find((slot: CoWebsiteSlot) => slot.position === position);
}
private getCoWebsiteByPosition(position: number): CoWebsite|undefined {
private getCoWebsiteByPosition(position: number): CoWebsite | undefined {
return this.coWebsites.find((coWebsite: CoWebsite) => coWebsite.position === position);
}
private setIframeOffset(coWebsite: CoWebsite, slot: CoWebsiteSlot) {
const bounding = slot.container.getBoundingClientRect();
if (coWebsite.iframe.classList.contains('thumbnail')) {
coWebsite.iframe.style.width = ((bounding.right - bounding.left) * 2) + 'px';
coWebsite.iframe.style.height = ((bounding.bottom - bounding.top) * 2) + 'px';
coWebsite.iframe.style.top = (bounding.top - (Math.floor(bounding.height * 0.5))) + 'px';
coWebsite.iframe.style.left = (bounding.left - (Math.floor(bounding.width * 0.5))) + 'px';
if (coWebsite.iframe.classList.contains("thumbnail")) {
coWebsite.iframe.style.width = (bounding.right - bounding.left) * 2 + "px";
coWebsite.iframe.style.height = (bounding.bottom - bounding.top) * 2 + "px";
coWebsite.iframe.style.top = bounding.top - Math.floor(bounding.height * 0.5) + "px";
coWebsite.iframe.style.left = bounding.left - Math.floor(bounding.width * 0.5) + "px";
} else {
coWebsite.iframe.style.top = bounding.top + 'px';
coWebsite.iframe.style.left = bounding.left + 'px';
coWebsite.iframe.style.width = (bounding.right - bounding.left) + 'px';
coWebsite.iframe.style.height = (bounding.bottom - bounding.top) + 'px';
coWebsite.iframe.style.top = bounding.top + "px";
coWebsite.iframe.style.left = bounding.left + "px";
coWebsite.iframe.style.width = bounding.right - bounding.left + "px";
coWebsite.iframe.style.height = bounding.bottom - bounding.top + "px";
}
}
private resizeAllIframes() {
this.coWebsites.forEach((coWebsite: CoWebsite) => {
const slot = this.getSlotByPosition(coWebsite.position);
const slot = this.getSlotByPosition(coWebsite.position);
if (slot) {
this.setIframeOffset(coWebsite, slot);
@ -333,34 +336,34 @@ class CoWebsiteManager {
coWebsite.iframe.scrolling = newPosition === 0 || newPosition === 1 ? "yes" : "no";
if (newPosition === 0) {
coWebsite.iframe.classList.add('main');
coWebsite.iframe.classList.add("main");
coWebsite.icon.style.display = "none";
} else {
coWebsite.iframe.classList.remove('main');
coWebsite.iframe.classList.remove("main");
coWebsite.icon.style.display = "flex";
}
if (newPosition === 1) {
coWebsite.iframe.classList.add('sub-main');
coWebsite.iframe.classList.add("sub-main");
} else {
coWebsite.iframe.classList.remove('sub-main');
coWebsite.iframe.classList.remove("sub-main");
}
if (newPosition >= 2) {
coWebsite.iframe.classList.add('thumbnail');
coWebsite.iframe.classList.add("thumbnail");
} else {
coWebsite.iframe.classList.remove('thumbnail');
coWebsite.iframe.classList.remove("thumbnail");
}
coWebsite.position = newPosition;
if (oldSlot && !this.getCoWebsiteByPosition(oldSlot.position)) {
oldSlot.container.style.display = 'none';
oldSlot.container.style.display = "none";
}
newSlot.container.style.display = 'block';
newSlot.container.style.display = "block";
coWebsite.iframe.classList.remove('pixel');
coWebsite.iframe.classList.remove("pixel");
this.resizeAllIframes();
}
@ -384,11 +387,7 @@ class CoWebsiteManager {
this.moveCoWebsite(coWebsite, newPosition);
if (newPosition === 4 ||
!currentCoWebsite ||
currentCoWebsite.iframe.id === coWebsite.iframe.id
)
{
if (newPosition === 4 || !currentCoWebsite || currentCoWebsite.iframe.id === coWebsite.iframe.id) {
return;
}
@ -411,12 +410,12 @@ class CoWebsiteManager {
if (coWebsite.position > 0) {
const slot = this.getSlotByPosition(coWebsite.position);
if (slot) {
slot.container.style.display = 'none';
slot.container.style.display = "none";
}
}
const previousCoWebsite = this.coWebsites.find((coWebsiteToCheck: CoWebsite) =>
coWebsite.position + 1 === coWebsiteToCheck.position
const previousCoWebsite = this.coWebsites.find(
(coWebsiteToCheck: CoWebsite) => coWebsite.position + 1 === coWebsiteToCheck.position
);
if (previousCoWebsite) {
@ -427,10 +426,8 @@ class CoWebsiteManager {
coWebsite.iframe.remove();
}
public searchJitsi(): CoWebsite|undefined {
return this.coWebsites.find((coWebsite : CoWebsite) =>
coWebsite.iframe.id.toLowerCase().includes('jitsi')
);
public searchJitsi(): CoWebsite | undefined {
return this.coWebsites.find((coWebsite: CoWebsite) => coWebsite.iframe.id.toLowerCase().includes("jitsi"));
}
private generateCoWebsiteIcon(iframe: HTMLIFrameElement): HTMLDivElement {
@ -439,7 +436,7 @@ class CoWebsiteManager {
icon.style.display = "none";
const iconImage = document.createElement("img");
iconImage.src = `https://www.google.com/s2/favicons?sz=64&domain_url=${iframe.src}`;
iconImage.src = `${ICON_URL}/icon?url=${iframe.src}&size=16..30..256`;
const url = new URL(iframe.src);
iconImage.alt = url.hostname;
@ -456,27 +453,30 @@ class CoWebsiteManager {
widthPercent?: number,
position?: number
): Promise<CoWebsite> {
return this.addCoWebsite(
(iframeBuffer) => {
const iframe = document.createElement("iframe");
iframe.src = new URL(url, base).toString();
return this.addCoWebsite((iframeBuffer) => {
const iframe = document.createElement("iframe");
iframe.src = new URL(url, base).toString()
if (allowPolicy) {
iframe.allow = allowPolicy;
}
if (allowPolicy) {
iframe.allow = allowPolicy;
}
if (allowApi) {
iframeListener.registerIframe(iframe);
}
if (allowApi) {
iframeListener.registerIframe(iframe);
}
iframeBuffer.appendChild(iframe);
iframeBuffer.appendChild(iframe);
return iframe;
}, widthPercent, position);
return iframe;
},
widthPercent,
position
);
}
public async addCoWebsite(
callback: (iframeBuffer: HTMLDivElement) => PromiseLike<HTMLIFrameElement>|HTMLIFrameElement,
callback: (iframeBuffer: HTMLDivElement) => PromiseLike<HTMLIFrameElement> | HTMLIFrameElement,
widthPercent?: number,
position?: number
): Promise<CoWebsite> {
@ -484,10 +484,10 @@ class CoWebsiteManager {
if (this.coWebsites.length < 1) {
this.loadMain();
} else if (this.coWebsites.length === 5) {
throw new Error('Too many we')
throw new Error("Too many we");
}
Promise.resolve(callback(this.cowebsiteBufferDom)).then(iframe =>{
Promise.resolve(callback(this.cowebsiteBufferDom)).then((iframe) => {
iframe?.classList.add("pixel");
if (!iframe.id) {
@ -533,14 +533,14 @@ class CoWebsiteManager {
setTimeout(() => {
this.fire();
position !== undefined ?
this.moveRightPreviousCoWebsite(coWebsite, coWebsite.position) :
this.moveCoWebsite(coWebsite, coWebsite.position);
position !== undefined
? this.moveRightPreviousCoWebsite(coWebsite, coWebsite.position)
: this.moveCoWebsite(coWebsite, coWebsite.position);
}, animationTime);
} else {
position !== undefined ?
this.moveRightPreviousCoWebsite(coWebsite, coWebsite.position) :
this.moveCoWebsite(coWebsite, coWebsite.position);
position !== undefined
? this.moveRightPreviousCoWebsite(coWebsite, coWebsite.position)
: this.moveCoWebsite(coWebsite, coWebsite.position);
}
return resolve(coWebsite);
@ -583,8 +583,7 @@ class CoWebsiteManager {
}
public closeCoWebsites(): Promise<void> {
this.currentOperationPromise = this.currentOperationPromise
.then(() => {
this.currentOperationPromise = this.currentOperationPromise.then(() => {
this.coWebsites.forEach((coWebsite: CoWebsite) => {
this.closeCoWebsite(coWebsite);
});

1
front/webpack.config.ts
View file

@ -193,6 +193,7 @@ module.exports = {
ADMIN_URL: undefined,
CONTACT_URL: null,
PROFILE_URL: null,
ICON_URL: null,
DEBUG_MODE: null,
STUN_SERVER: null,
TURN_SERVER: null,