Merge branch 'develop' of github.com:thecodingmachine/workadventure into develop
This commit is contained in:
_Bastler
@@ -2,9 +2,10 @@
|
||||
import { onMount } from "svelte";
|
||||
|
||||
import { ICON_URL } from "../../Enum/EnvironmentVariable";
|
||||
import { coWebsitesNotAsleep, mainCoWebsite, jitsiCoWebsite } from "../../Stores/CoWebsiteStore";
|
||||
import { mainCoWebsite } from "../../Stores/CoWebsiteStore";
|
||||
import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore";
|
||||
import type { CoWebsite } from "../../WebRtc/CoWebsite/CoWesbite";
|
||||
import { JitsiCoWebsite } from "../../WebRtc/CoWebsite/JitsiCoWebsite";
|
||||
import { iframeStates } from "../../WebRtc/CoWebsiteManager";
|
||||
import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
|
||||
|
||||
@@ -15,10 +16,10 @@
|
||||
let icon: HTMLImageElement;
|
||||
let iconLoaded = false;
|
||||
let state = coWebsite.getStateSubscriber();
|
||||
let isJitsi: boolean = false;
|
||||
let isJitsi: boolean = coWebsite instanceof JitsiCoWebsite;
|
||||
const mainState = coWebsiteManager.getMainStateSubscriber();
|
||||
|
||||
onMount(() => {
|
||||
isJitsi = Boolean($jitsiCoWebsite && $jitsiCoWebsite.getId() === coWebsite.getId());
|
||||
icon.src = isJitsi
|
||||
? "/resources/logos/meet.svg"
|
||||
: `${ICON_URL}/icon?url=${coWebsite.getUrl().hostname}&size=64..96..256&fallback_icon_color=14304c`;
|
||||
@@ -33,20 +34,23 @@
|
||||
coWebsiteManager.goToMain(coWebsite);
|
||||
} else if ($mainCoWebsite) {
|
||||
if ($mainCoWebsite.getId() === coWebsite.getId()) {
|
||||
const coWebsites = $coWebsitesNotAsleep;
|
||||
const newMain = $highlightedEmbedScreen ?? coWebsites.length > 1 ? coWebsites[1] : undefined;
|
||||
if (newMain && newMain.getId() !== $mainCoWebsite.getId()) {
|
||||
coWebsiteManager.goToMain(newMain);
|
||||
} else if (coWebsiteManager.getMainState() === iframeStates.closed) {
|
||||
if (coWebsiteManager.getMainState() === iframeStates.closed) {
|
||||
coWebsiteManager.displayMain();
|
||||
} else if ($highlightedEmbedScreen?.type === "cowebsite") {
|
||||
coWebsiteManager.goToMain($highlightedEmbedScreen.embed);
|
||||
} else {
|
||||
coWebsiteManager.hideMain();
|
||||
}
|
||||
} else {
|
||||
highlightedEmbedScreen.toggleHighlight({
|
||||
type: "cowebsite",
|
||||
embed: coWebsite,
|
||||
});
|
||||
if (coWebsiteManager.getMainState() === iframeStates.closed) {
|
||||
coWebsiteManager.goToMain(coWebsite);
|
||||
coWebsiteManager.displayMain();
|
||||
} else {
|
||||
highlightedEmbedScreen.toggleHighlight({
|
||||
type: "cowebsite",
|
||||
embed: coWebsite,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,7 +68,10 @@
|
||||
let isHighlight: boolean = false;
|
||||
let isMain: boolean = false;
|
||||
$: {
|
||||
isMain = $mainCoWebsite !== undefined && $mainCoWebsite.getId() === coWebsite.getId();
|
||||
isMain =
|
||||
$mainState === iframeStates.opened &&
|
||||
$mainCoWebsite !== undefined &&
|
||||
$mainCoWebsite.getId() === coWebsite.getId();
|
||||
isHighlight =
|
||||
$highlightedEmbedScreen !== null &&
|
||||
$highlightedEmbedScreen.type === "cowebsite" &&
|
||||
@@ -212,7 +219,8 @@
|
||||
}
|
||||
|
||||
&:not(.vertical) {
|
||||
animation: bounce 0.35s ease 6 alternate;
|
||||
transition: all 300ms;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
@@ -233,7 +241,7 @@
|
||||
|
||||
&.displayed {
|
||||
&:not(.vertical) {
|
||||
animation: activeThumbnail 300ms ease-in 0s forwards;
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -262,16 +270,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes activeThumbnail {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
<script lang="ts">
|
||||
import LL from "../../i18n/i18n-svelte";
|
||||
import { gameManager } from "../../Phaser/Game/GameManager";
|
||||
import { startLayerNamesStore } from "../../Stores/StartLayerNamesStore";
|
||||
|
||||
let entryPoint: string = $startLayerNamesStore[0];
|
||||
let walkAutomatically: boolean = false;
|
||||
const currentPlayer = gameManager.getCurrentGameScene().CurrentPlayer;
|
||||
const playerPos = { x: Math.floor(currentPlayer.x), y: Math.floor(currentPlayer.y) };
|
||||
|
||||
function copyLink() {
|
||||
const input: HTMLInputElement = document.getElementById("input-share-link") as HTMLInputElement;
|
||||
@@ -8,8 +15,23 @@
|
||||
document.execCommand("copy");
|
||||
}
|
||||
|
||||
function getLink() {
|
||||
return `${location.origin}${location.pathname}#${entryPoint}${
|
||||
walkAutomatically ? `&moveTo=${playerPos.x},${playerPos.y}` : ""
|
||||
}`;
|
||||
}
|
||||
|
||||
function updateInputFieldValue() {
|
||||
const input = document.getElementById("input-share-link");
|
||||
if (input) {
|
||||
(input as HTMLInputElement).value = getLink();
|
||||
}
|
||||
}
|
||||
|
||||
let canShare = navigator.share !== undefined;
|
||||
|
||||
async function shareLink() {
|
||||
const shareData = { url: location.toString() };
|
||||
const shareData = { url: getLink() };
|
||||
|
||||
try {
|
||||
await navigator.share(shareData);
|
||||
@@ -22,16 +44,43 @@
|
||||
|
||||
<div class="guest-main">
|
||||
<section class="container-overflow">
|
||||
<section class="share-url not-mobile">
|
||||
<h3>{$LL.menu.invite.description()}</h3>
|
||||
<input type="text" readonly id="input-share-link" value={location.toString()} />
|
||||
<button type="button" class="nes-btn is-primary" on:click={copyLink}>{$LL.menu.invite.copy()}</button>
|
||||
</section>
|
||||
<section class="is-mobile">
|
||||
<h3>{$LL.menu.invite.description()}</h3>
|
||||
<input type="hidden" readonly id="input-share-link" value={location.toString()} />
|
||||
<button type="button" class="nes-btn is-primary" on:click={shareLink}>{$LL.menu.invite.share()}</button>
|
||||
{#if !canShare}
|
||||
<section class="share-url not-mobile">
|
||||
<h3>{$LL.menu.invite.description()}</h3>
|
||||
<input type="text" readonly id="input-share-link" class="link-url" value={location.toString()} />
|
||||
<button type="button" class="nes-btn is-primary" on:click={copyLink}>{$LL.menu.invite.copy()}</button>
|
||||
</section>
|
||||
{:else}
|
||||
<section class="is-mobile">
|
||||
<h3>{$LL.menu.invite.description()}</h3>
|
||||
<input type="hidden" readonly id="input-share-link" value={location.toString()} />
|
||||
<button type="button" class="nes-btn is-primary" on:click={shareLink}>{$LL.menu.invite.share()}</button>
|
||||
</section>
|
||||
{/if}
|
||||
<h3>Select an entry point</h3>
|
||||
<section class="nes-select is-dark starting-points">
|
||||
<select
|
||||
bind:value={entryPoint}
|
||||
on:blur={() => {
|
||||
updateInputFieldValue();
|
||||
}}
|
||||
>
|
||||
{#each $startLayerNamesStore as entryPointName}
|
||||
<option value={entryPointName}>{entryPointName}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</section>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="nes-checkbox is-dark"
|
||||
bind:checked={walkAutomatically}
|
||||
on:change={() => {
|
||||
updateInputFieldValue();
|
||||
}}
|
||||
/>
|
||||
<span>{$LL.menu.invite.walk_automatically_to_position()}</span>
|
||||
</label>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -39,14 +88,27 @@
|
||||
@import "../../../style/breakpoints.scss";
|
||||
|
||||
div.guest-main {
|
||||
width: 50%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: calc(100% - 56px);
|
||||
|
||||
text-align: center;
|
||||
input.link-url {
|
||||
width: calc(100% - 200px);
|
||||
}
|
||||
|
||||
.starting-points {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
section.nes-select select:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
section.container-overflow {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
@@ -55,25 +117,23 @@
|
||||
}
|
||||
|
||||
section.is-mobile {
|
||||
display: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
div.guest-main {
|
||||
section.share-url.not-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
section.is-mobile {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
section.container-overflow {
|
||||
height: calc(100% - 120px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
div.guest-main {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user