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

Merge pull request #1813 from thecodingmachine/fix-cowebsite

Browse source 
Fix mozaic layout
This commit is contained in:
David Négrier 2022-02-03 11:44:23 +01:00 committed by GitHub
parent 9696b0ab04 7e9343f1b7
commit c34ee73448
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 27 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
front/src/Components/EmbedScreens/Layouts/MozaicLayout.svelte
View file

@ -23,8 +23,9 @@
{#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)}
<MediaBox
streamable={peer}
mozaicSolo={$streamableCollectionStore.size === 1}
mozaicFullWidth={$streamableCollectionStore.size === 1 || $streamableCollectionStore.size === 2}
mozaicQuarter={$streamableCollectionStore.size === 3 || $streamableCollectionStore.size === 4}
mozaicQuarter={$streamableCollectionStore.size === 3 || $streamableCollectionStore.size >= 4}
/>
{/each}
</div>

9
front/src/Components/Video/MediaBox.svelte
View file

@ -9,6 +9,7 @@
export let streamable: Streamable;
export let isHightlighted = false;
export let isClickable = false;
export let mozaicSolo = false;
export let mozaicFullWidth = false;
export let mozaicQuarter = false;
</script>
@ -16,6 +17,7 @@
<div
class="media-container nes-container is-rounded {isHightlighted ? 'hightlighted' : ''}"
class:clickable={isClickable}
class:mozaic-solo={mozaicSolo}
class:mozaic-full-width={mozaicFullWidth}
class:mozaic-quarter={mozaicQuarter}
>
@ -66,6 +68,11 @@
}
}
&.mozaic-solo {
max-height: inherit !important;
width: 90% !important;
}
&.mozaic-full-width {
width: 95%;
max-width: 95%;
@ -73,6 +80,7 @@
margin-right: 3%;
margin-top: auto;
margin-bottom: auto;
max-height: 95%;
&:hover {
margin-top: auto;
@ -85,6 +93,7 @@
max-width: 95%;
margin-top: auto;
margin-bottom: auto;
max-height: 95%;
&:hover {
margin-top: auto;

7
front/src/Phaser/Companion/Companion.ts
View file

@ -4,6 +4,7 @@ import { PlayerAnimationDirections, PlayerAnimationTypes } from "../Player/Anima
import { TexturesHelper } from "../Helpers/TexturesHelper";
import { Writable, writable } from "svelte/store";
import type { PictureStore } from "../../Stores/PictureStore";
import type CancelablePromise from "cancelable-promise";
export interface CompanionStatus {
x: number;
@ -25,8 +26,9 @@ export class Companion extends Container {
private direction: PlayerAnimationDirections;
private animationType: PlayerAnimationTypes;
private readonly _pictureStore: Writable<string | undefined>;
private texturePromise: CancelablePromise<string | void> | undefined;
constructor(scene: Phaser.Scene, x: number, y: number, name: string, texturePromise: Promise<string>) {
constructor(scene: Phaser.Scene, x: number, y: number, name: string, texturePromise: CancelablePromise<string>) {
super(scene, x + 14, y + 4);
this.sprites = new Map<string, Sprite>();
@ -41,7 +43,7 @@ export class Companion extends Container {
this.companionName = name;
this._pictureStore = writable(undefined);
texturePromise
this.texturePromise = texturePromise
.then((resource) => {
this.addResource(resource);
this.invisible = false;
@ -234,6 +236,7 @@ export class Companion extends Container {
}
public destroy(): void {
this.texturePromise?.cancel();
for (const sprite of this.sprites.values()) {
if (this.scene) {
this.scene.sys.updateList.remove(sprite);

9
front/src/Phaser/Companion/CompanionTexturesLoadingManager.ts
View file

@ -1,5 +1,6 @@
import LoaderPlugin = Phaser.Loader.LoaderPlugin;
import { COMPANION_RESOURCES, CompanionResourceDescriptionInterface } from "./CompanionTextures";
import CancelablePromise from "cancelable-promise";
export const getAllCompanionResources = (loader: LoaderPlugin): CompanionResourceDescriptionInterface[] => {
COMPANION_RESOURCES.forEach((resource: CompanionResourceDescriptionInterface) => {
@ -9,8 +10,12 @@ export const getAllCompanionResources = (loader: LoaderPlugin): CompanionResourc
return COMPANION_RESOURCES;
};
export const lazyLoadCompanionResource = (loader: LoaderPlugin, name: string): Promise<string> => {
return new Promise((resolve, reject) => {
export const lazyLoadCompanionResource = (loader: LoaderPlugin, name: string): CancelablePromise<string> => {
return new CancelablePromise((resolve, reject, cancel) => {
cancel(() => {
return;
});
const resource = COMPANION_RESOURCES.find((item) => item.name === name);
if (typeof resource === "undefined") {

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

@ -59,7 +59,7 @@ export abstract class Character extends Container implements OutlineableInterfac
frame: string | number,
isClickable: boolean,
companion: string | null,
companionTexturePromise?: Promise<string>
companionTexturePromise?: CancelablePromise<string>
) {
super(scene, x, y /*, texture, frame*/);
this.scene = scene;
@ -179,7 +179,7 @@ export abstract class Character extends Container implements OutlineableInterfac
});
}
public addCompanion(name: string, texturePromise?: Promise<string>): void {
public addCompanion(name: string, texturePromise?: CancelablePromise<string>): void {
if (typeof texturePromise !== "undefined") {
this.companion = new Companion(this.scene, this.x, this.y, name, texturePromise);
}

2
front/src/Phaser/Entity/RemotePlayer.ts
View file

@ -31,7 +31,7 @@ export class RemotePlayer extends Character implements ActivatableInterface {
moving: boolean,
visitCardUrl: string | null,
companion: string | null,
companionTexturePromise?: Promise<string>,
companionTexturePromise?: CancelablePromise<string>,
activationRadius?: number
) {
super(Scene, x, y, texturesPromise, name, direction, moving, 1, true, companion, companionTexturePromise);

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

@ -25,7 +25,7 @@ export class Player extends Character {
direction: PlayerAnimationDirections,
moving: boolean,
companion: string | null,
companionTexturePromise?: Promise<string>
companionTexturePromise?: CancelablePromise<string>
) {
super(Scene, x, y, texturesPromise, name, direction, moving, 1, true, companion, companionTexturePromise);