Co-Wesbite

This commit is contained in:
_Bastler 2022-02-15 08:13:53 +01:00
parent 5451fc788d
commit d63a32e94e
13 changed files with 63 additions and 13 deletions

View File

@ -29,9 +29,8 @@
<script src="/env-config.js"></script>
<base href="/">
<link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" />
<title>WorkAdventure</title>
<title>Partey</title>
</head>
<body id="body" style="margin: 0; background-color: #000">
<div class="main-container" id="main-container">

View File

@ -9,6 +9,7 @@ export const isOpenCoWebsiteEvent = new tg.IsInterface()
position: tg.isOptional(tg.isNumber),
closable: tg.isOptional(tg.isBoolean),
lazy: tg.isOptional(tg.isBoolean),
hint: tg.isOptional(tg.isString),
})
.get();

View File

@ -48,7 +48,8 @@ export class WorkadventureNavigationCommands extends IframeApiContribution<Worka
widthPercent?: number,
position?: number,
closable?: boolean,
lazy?: boolean
lazy?: boolean,
hint?: string
): Promise<CoWebsite> {
const result = await queryWorkadventure({
type: "openCoWebsite",
@ -60,6 +61,7 @@ export class WorkadventureNavigationCommands extends IframeApiContribution<Worka
position,
closable,
lazy,
hint,
},
});
return new CoWebsite(result.id);

View File

@ -8,6 +8,8 @@
import { JitsiCoWebsite } from "../../WebRtc/CoWebsite/JitsiCoWebsite";
import { iframeStates } from "../../WebRtc/CoWebsiteManager";
import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
import { HtmlUtils } from "../../WebRtc/HtmlUtils";
import { i18nJson } from "../../i18n/locales";
export let index: number;
export let coWebsite: CoWebsite;
@ -65,6 +67,17 @@
return false;
}
function i18n(text: string | undefined): string {
if (typeof text === "string") {
return i18nJson(text);
}
return "";
}
function sanitize(html : string | undefined): string {
return HtmlUtils.sanitize(html);
}
let isHighlight: boolean = false;
let isMain: boolean = false;
$: {
@ -188,6 +201,12 @@
/>
</rect>
</svg>
{#if coWebsite.getHint() && !isMain && !isHighlight }
<div class="cowebsite-thumbnail-hint nes-balloon from-left">
<p>{@html sanitize(i18n(coWebsite.getHint()))}</p>
</div>
{/if}
</div>
<style lang="scss">
@ -320,5 +339,19 @@
padding: 7px;
}
}
.cowebsite-thumbnail-hint {
display: none;
position:absolute;
padding: 8px 4px;
text-align: center;
bottom: 50px;
width: clamp(150px, 15vw, 15vw);
left: -10px;
}
&:hover .cowebsite-thumbnail-hint {
display: inline-block;
}
}
</style>

View File

@ -22,8 +22,6 @@
position: absolute;
bottom: 5px;
left: 2%;
overflow-x: auto;
overflow-y: hidden;
&.vertical {
height: auto !important;

View File

@ -378,9 +378,8 @@ class ConnectionManager {
} catch (err) {
console.warn("Could not set locale", err);
}
} else {
console.log("no locale", locale);
}
//user connected, set connected store for menu at true
userIsConnected.set(true);
}

View File

@ -24,6 +24,7 @@ export enum GameMapProperties {
OPEN_WEBSITE_POSITION = "openWebsitePosition",
OPEN_WEBSITE_TRIGGER = "openWebsiteTrigger",
OPEN_WEBSITE_TRIGGER_MESSAGE = "openWebsiteTriggerMessage",
OPEN_WEBSITE_HINT = "openWebsiteHint",
PLAY_AUDIO = "playAudio",
PLAY_AUDIO_LOOP = "playAudioLoop",
READABLE_BY = "readableBy",

View File

@ -194,6 +194,7 @@ export class GameMapPropertiesListener {
let websitePositionProperty: number | undefined;
let websiteTriggerProperty: string | undefined;
let websiteTriggerMessageProperty: string | undefined;
let websiteHintProperty: string | undefined;
layer.properties.forEach((property) => {
switch (property.name) {
@ -218,6 +219,9 @@ export class GameMapPropertiesListener {
case GameMapProperties.OPEN_WEBSITE_TRIGGER_MESSAGE:
websiteTriggerMessageProperty = property.value as string | undefined;
break;
case GameMapProperties.OPEN_WEBSITE_HINT:
websiteHintProperty = property.value as string | undefined;
break;
}
});
@ -251,7 +255,8 @@ export class GameMapPropertiesListener {
allowApiProperty,
websitePolicyProperty,
websiteWidthProperty,
false
false,
websiteHintProperty
);
coWebsiteOpen.coWebsite = coWebsite;
@ -284,7 +289,8 @@ export class GameMapPropertiesListener {
allowApiProperty,
websitePolicyProperty,
websiteWidthProperty,
false
false,
websiteHintProperty
);
coWebsiteOpen.coWebsite = coWebsite;

View File

@ -1218,7 +1218,8 @@ export class GameScene extends DirtyScene {
openCoWebsite.allowApi,
openCoWebsite.allowPolicy,
openCoWebsite.widthPercent,
openCoWebsite.closable ?? true
openCoWebsite.closable ?? true,
openCoWebsite.hint
);
if (openCoWebsite.lazy === undefined || !openCoWebsite.lazy) {

View File

@ -12,6 +12,7 @@ export interface CoWebsite {
getLoadIframe(): CancelablePromise<HTMLIFrameElement> | undefined;
getWidthPercent(): number | undefined;
isClosable(): boolean;
getHint(): string;
load(): CancelablePromise<HTMLIFrameElement>;
unload(): Promise<void>;
}

View File

@ -14,8 +14,9 @@ export class SimpleCoWebsite implements CoWebsite {
protected allowPolicy?: string;
protected widthPercent?: number;
protected closable: boolean;
protected hint: string;
constructor(url: URL, allowApi?: boolean, allowPolicy?: string, widthPercent?: number, closable?: boolean) {
constructor(url: URL, allowApi?: boolean, allowPolicy?: string, widthPercent?: number, closable?: boolean, hint?: string) {
this.id = coWebsiteManager.generateUniqueId();
this.url = url;
this.state = writable("asleep" as CoWebsiteState);
@ -23,6 +24,7 @@ export class SimpleCoWebsite implements CoWebsite {
this.allowPolicy = allowPolicy;
this.widthPercent = widthPercent;
this.closable = closable ?? false;
this.hint = hint ?? '';
}
getId(): string {
@ -57,6 +59,10 @@ export class SimpleCoWebsite implements CoWebsite {
return this.closable;
}
getHint(): string {
return this.hint;
}
load(): CancelablePromise<HTMLIFrameElement> {
this.loadIframe = new CancelablePromise((resolve, reject, cancel) => {
this.state.set("loading");

View File

@ -43,6 +43,10 @@
flex: 1;
justify-content: start;
.nes-btn {
font-size: 16px;
}
#cowebsite-swipe {
display: none;
img {

View File

@ -2,7 +2,6 @@ body {
overflow: hidden;
font-size: 10px;
}
body button:focus,
body img:focus,
body input:focus {