diff --git a/docs/maps/camera.md b/docs/maps/camera.md index 9e58fcad..59a212f8 100644 --- a/docs/maps/camera.md +++ b/docs/maps/camera.md @@ -1,15 +1,15 @@ {.section-title.accent.text-primary} # Working with camera -## Focusable Zones +## Focusable Area -It is possible to define special regions on the map that can make the camera zoom and center on themselves. We call them "Focusable Zones". When player gets inside, his camera view will be altered - focused, zoomed and locked on defined zone, like this: +It is possible to define special regions on the map that can make the camera zoom and center on themselves. We call them "Focusable Area". When player gets inside, his camera view will be altered - focused, zoomed and locked on defined area, like this:
-### Adding new **Focusable Zone**: +### Adding new **Focusable Area**: 1. Make sure you are editing an **Object Layer** @@ -29,7 +29,7 @@ It is possible to define special regions on the map that can make the camera zoo -4. Make sure your object is of type "zone"! +4. Make sure your object is of type "area"!
@@ -53,11 +53,11 @@ It is possible to define special regions on the map that can make the camera zoo
-All should be set up now and your new **Focusable Zone** should be working fine! +All should be set up now and your new **Focusable Area** should be working fine! ### Defining custom zoom margin: -If you want, you can add an additional property to control how much should the camera zoom onto focusable zone. +If you want, you can add an additional property to control how much should the camera zoom onto focusable area. 1. Like before, click on **Add Property** @@ -77,7 +77,7 @@ If you want, you can add an additional property to control how much should the c - For example, if you define your zone as a 300x200 rectangle, setting this property to 0.5 *(50%)* means the camera will try to fit within the viewport the entire zone + margin of 50% of its dimensions, so 450x300. + For example, if you define your area as a 300x200 rectangle, setting this property to 0.5 *(50%)* means the camera will try to fit within the viewport the entire area + margin of 50% of its dimensions, so 450x300. - No margin defined diff --git a/docs/maps/images/camera/4_add_zone_type.png b/docs/maps/images/camera/4_add_zone_type.png index 0416d1e4..18224ea5 100644 Binary files a/docs/maps/images/camera/4_add_zone_type.png and b/docs/maps/images/camera/4_add_zone_type.png differ diff --git a/docs/maps/images/camera/5_click_add_property.png b/docs/maps/images/camera/5_click_add_property.png index 9aa96a2f..329ac437 100644 Binary files a/docs/maps/images/camera/5_click_add_property.png and b/docs/maps/images/camera/5_click_add_property.png differ diff --git a/docs/maps/images/camera/7_make_sure_checked.png b/docs/maps/images/camera/7_make_sure_checked.png index 7fbcdb89..6a2d5e34 100644 Binary files a/docs/maps/images/camera/7_make_sure_checked.png and b/docs/maps/images/camera/7_make_sure_checked.png differ diff --git a/docs/maps/meeting-rooms.md b/docs/maps/meeting-rooms.md index 9c3963ed..7753c943 100644 --- a/docs/maps/meeting-rooms.md +++ b/docs/maps/meeting-rooms.md @@ -9,19 +9,24 @@ On your map, you can define special zones (meeting rooms) that will trigger the In order to create Jitsi meet zones: -* You must create a specific layer. -* In layer properties, you MUST add a "`jitsiRoom`" property (of type "`string`"). The value of the property is the name of the room in Jitsi. Note: the name of the room will be "slugified" and prepended with the name of the instance of the map (so that different instances of the map have different rooms) +* You must create a specific object. +* Object must be of type "`area`" +* In object properties, you MUST add a "`jitsiRoom`" property (of type "`string`"). The value of the property is the name of the room in Jitsi. Note: the name of the room will be "slugified" and prepended with a hash of the room URL * You may also use "jitsiWidth" property (of type "number" between 0 and 100) to control the width of the iframe containing the meeting room. -You can have this layer (i.e. your meeting area) to be selectable as the precise location for your meeting using the [Google Calendar integration for Work Adventure](/integrations/google-calendar). To do so, you must set the `meetingRoomLabel` property. You can provide any name that you would like your meeting room to have (as a string). +You can have this object (i.e. your meeting area) to be selectable as the precise location for your meeting using the [Google Calendar integration for Work Adventure](/integrations/google-calendar). To do so, you must set the `meetingRoomLabel` property. You can provide any name that you would like your meeting room to have (as a string). + +{.alert.alert-info} +As an alternative, you may also put the `jitsiRoom` properties on a layer (rather than putting them on an "area" object) +but we advise to stick with "area" objects for better performance! ## Triggering of the "Jitsi meet" action -By default, Jitsi meet will open when a user enters the zone defined on the map. +By default, Jitsi meet will open when a user enters the area defined on the map. It is however possible to trigger Jitsi only on user action. You can do this with the `jitsiTrigger` property. -If you set `jitsiTrigger: onaction`, when the user walks on the layer, an alert message will be displayed at the bottom of the screen: +If you set `jitsiTrigger: onaction`, when the user walks on the area, an alert message will be displayed at the bottom of the screen:
@@ -32,7 +37,7 @@ If you set `jitsiTriggerMessage: your message action` you can edit alert message ## Customizing your "Jitsi meet" -Your Jitsi meet experience can be customized using Jitsi specific config options. The `jitsiConfig` and `jitsiInterfaceConfig` properties can be used on the Jitsi layer to change the way Jitsi looks and behaves. Those 2 properties are accepting a JSON string. +Your Jitsi meet experience can be customized using Jitsi specific config options. The `jitsiConfig` and `jitsiInterfaceConfig` properties can be used on the Jitsi object to change the way Jitsi looks and behaves. Those 2 properties are accepting a JSON string. For instance, use `jitsiConfig: { "startWithAudioMuted": true }` to automatically mute the microphone when someone enters a room. Or use `jitsiInterfaceConfig: { "DEFAULT_BACKGROUND": "#77ee77" }` to change the background color of Jitsi. @@ -60,7 +65,7 @@ You can grant moderator rights to some of your members. Jitsi moderators can: * Mute everybody expect one speaker * Kick users out of the meeting -In order to grant moderator rights to a given user, you can add a `jitsiRoomAdminTag` property to your Jitsi layer. For instance, if you write a property: +In order to grant moderator rights to a given user, you can add a `jitsiRoomAdminTag` property to your Jitsi object. For instance, if you write a property: jitsiRoomAdminTag: speaker @@ -74,7 +79,7 @@ WorkAdventure usually comes with a default Jitsi meet installation. If you are u You have the possibility, in your map, to override the Jitsi meet instance that will be used by default. This can be useful for regulatory reasons. Maybe your company wants to keep control on the video streams and therefore, wants to self-host a Jitsi instance? Or maybe you want to use a very special configuration or very special version of Jitsi? -Use the `jitsiUrl` property to in the Jitsi layer to specify the Jitsi instance that should be used. Beware, `jitsiUrl` takes in parameter a **domain name**, without the protocol. So you should use: +Use the `jitsiUrl` property to in the Jitsi object to specify the Jitsi instance that should be used. Beware, `jitsiUrl` takes in parameter a **domain name**, without the protocol. So you should use: `jitsiUrl: meet.jit.si` and not `jitsiUrl: https://meet.jit.si` @@ -82,3 +87,15 @@ and not {.alert.alert-info} When you use `jitsiUrl`, the targeted Jitsi instance must be public. You cannot use moderation features or the JWT tokens authentication with maps configured using the `jitsiUrl` property. + +## Full control over the Jitsi room name + +By default, the name of the room will be "slugified" and prepended with a hash of the room URL. +This is what you want most of the time. Indeed, different maps with the same Jitsi room name (the same `jitsiRoom` property) will not share the same Jitsi room instance. + +However, sometimes, you may actually want to have different WorkAdventure meeting rooms that are actually sharing +the same Jitsi meet meeting room. Or if you are pointing to a custom Jitsi server (using the `jitsiUrl` property), +you may want to point to a specific existing room. + +For all those use cases, you can use `jitsiNoPrefix: true`. This will remove the automatic prefixing +of the hash and will give you full control on the Jitsi room name. diff --git a/docs/maps/opening-a-website.md b/docs/maps/opening-a-website.md index a84bde30..52a68168 100644 --- a/docs/maps/opening-a-website.md +++ b/docs/maps/opening-a-website.md @@ -10,8 +10,9 @@ on the right side of the screen) In order to create a zone that opens websites: -* You must create a specific layer. -* In layer properties, you MUST add a "`openWebsite`" property (of type "`string`"). The value of the property is the URL of the website to open (the URL must start with "https://") +* You must create a specific object. +* Object must be of type "`area`" +* In object properties, you MUST add a "`openWebsite`" property (of type "`string`"). The value of the property is the URL of the website to open (the URL must start with "https://") * You may also use "`openWebsiteWidth`" property (of type "`int`" or "`float`" between 0 and 100) to control the width of the iframe. * You may also use "`openTab`" property (of type "`string`") to open in a new tab instead. @@ -19,6 +20,10 @@ In order to create a zone that opens websites: A website can explicitly forbid another website from loading it in an iFrame using the [X-Frame-Options HTTP header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options). +{.alert.alert-info} +As an alternative, you may also put the `openWebsite` properties on a layer (rather than putting them on an "area" object) +but we advise to stick with "area" objects for better performance! + ## Integrating a Youtube video A common use case is to use `openWebsite` to open a Youtube video. @@ -43,7 +48,7 @@ By default, the iFrame will open when a user enters the zone defined on the map. It is however possible to trigger the iFrame only on user action. You can do this with the `openWebsiteTrigger` property. -If you set `openWebsiteTrigger: onaction`, when the user walks on the layer, an alert message will be displayed at the bottom of the screen: +If you set `openWebsiteTrigger: onaction`, when the user walks on the area, an alert message will be displayed at the bottom of the screen:
@@ -52,7 +57,7 @@ If you set `openWebsiteTrigger: onaction`, when the user walks on the layer, an If you set `openWebsiteTriggerMessage: your message action` you can edit alert message displayed. If is not defined, the default message displayed is 'Press on SPACE to open the web site'. -If you set `openWebsiteTrigger: onicon`, when the user walks on the layer, an icon will be displayed at the bottom of the screen: +If you set `openWebsiteTrigger: onicon`, when the user walks on the area, an icon will be displayed at the bottom of the screen:
@@ -78,6 +83,6 @@ Cowebsites allow you to have several sites open at the same time. If you want to open a Jitsi and another page it's easy! -You have just to [add a Jitsi to the map](meeting-rooms.md) and [add a co-website](opening-a-website.md#the-openwebsite-property) on the same layer. +You have just to [add a Jitsi to the map](meeting-rooms.md) and [add a co-website](opening-a-website.md#the-openwebsite-property) on the same object. It's done! diff --git a/docs/maps/special-zones.md b/docs/maps/special-zones.md index 30ebebab..1d22a3fc 100644 --- a/docs/maps/special-zones.md +++ b/docs/maps/special-zones.md @@ -9,8 +9,13 @@ On your map, you can define special silent zones where nobody is allowed to talk In order to create a silent zone: -* You must create a specific layer. -* In layer properties, you MUST add a boolean "`silent`" property. If the silent property is checked, the users are entering the silent zone when they walk on any tile of the layer. +* You must create a specific object. +* Object must be of type "`area`" +* In object properties, you MUST add a boolean "`silent`" property. If the silent property is checked, the users are entering the silent zone when they walk on the area. + +{.alert.alert-info} +As an alternative, you may also put the `silent` property on a layer (rather than putting them on an "area" object) +but we advise to stick with "area" objects for better performance! ## Playing sounds or background music @@ -18,10 +23,15 @@ Your map can define special zones where a sound or background music will automat In order to create a zone that triggers sounds/music: -* You must create a specific layer. -* In layer properties, you MUST add a "`playAudio`" property. The value of the property is a URL to an MP3 file that will be played. The URL can be relative to the URL of the map. +* You must create a specific object. +* Object must be of type "`area`" +* In object properties, you MUST add a "`playAudio`" property. The value of the property is a URL to an MP3 file that will be played. The URL can be relative to the URL of the map. * You may use the boolean property "`audioLoop`" to make the sound loop (thanks captain obvious). * If the "`audioVolume`" property is set, the audio player uses either the value of the property or the last volume set by the user - whichever is smaller. This property is a float from 0 to 1.0 {.alert.alert-info} "`playAudioLoop`" is deprecated and should not be used anymore. + +{.alert.alert-info} +As an alternative, you may also put the `playAudio` properties on a layer (rather than putting them on an "area" object) +but we advise to stick with "area" objects for better performance! diff --git a/docs/maps/wa-maps.md b/docs/maps/wa-maps.md index 6e84a251..8bec629b 100644 --- a/docs/maps/wa-maps.md +++ b/docs/maps/wa-maps.md @@ -87,11 +87,11 @@ Repeat for every tile that should be "collidable". In the next sections, you will see how you can add behaviour on your map by adding "properties". You can add properties for a variety of features: putting exits, opening websites, meeting rooms, silent zones, etc... -You can add properties either on individual tiles of a tileset OR on a complete layer. +You can add properties either on individual tiles of a tileset, on Tiled object OR on a complete layer. -If you put a property on a layer, it will be triggered if your Woka walks on any tile of the layer. +If you put a property on a object or layer, it will be triggered if your Woka walks on object area / any tile of the layer. -The exception is the "collides" property that can only be set on tiles, but not on a complete layer. +The exception is the "collides" property that can only be set on tiles, but not on an object or on complete layer. ## Insert helpful information in your map diff --git a/front/src/Api/Events/ChangeZoneEvent.ts b/front/src/Api/Events/ChangeAreaEvent.ts similarity index 74% rename from front/src/Api/Events/ChangeZoneEvent.ts rename to front/src/Api/Events/ChangeAreaEvent.ts index c5ed1a4c..38764ad3 100644 --- a/front/src/Api/Events/ChangeZoneEvent.ts +++ b/front/src/Api/Events/ChangeAreaEvent.ts @@ -7,4 +7,4 @@ export const isChangeZoneEvent = z.object({ /** * A message sent from the game to the iFrame when a user enters or leaves a zone. */ -export type ChangeZoneEvent = z.infer; +export type ChangeAreaEvent = z.infer; diff --git a/front/src/Api/Events/IframeEvent.ts b/front/src/Api/Events/IframeEvent.ts index 6a8aa823..f584f6d9 100644 --- a/front/src/Api/Events/IframeEvent.ts +++ b/front/src/Api/Events/IframeEvent.ts @@ -29,7 +29,7 @@ import { isMenuRegisterEvent, isUnregisterMenuEvent } from "./ui/MenuRegisterEve import type { ChangeLayerEvent } from "./ChangeLayerEvent"; import { isPlayerPosition } from "./PlayerPosition"; import type { WasCameraUpdatedEvent } from "./WasCameraUpdatedEvent"; -import type { ChangeZoneEvent } from "./ChangeZoneEvent"; +import type { ChangeAreaEvent } from "./ChangeAreaEvent"; import { isCameraSetEvent } from "./CameraSetEvent"; import { isCameraFollowPlayerEvent } from "./CameraFollowPlayerEvent"; import { isColorEvent } from "./ColorEvent"; @@ -162,8 +162,8 @@ export interface IframeResponseEventMap { leaveEvent: EnterLeaveEvent; enterLayerEvent: ChangeLayerEvent; leaveLayerEvent: ChangeLayerEvent; - enterZoneEvent: ChangeZoneEvent; - leaveZoneEvent: ChangeZoneEvent; + enterAreaEvent: ChangeAreaEvent; + leaveAreaEvent: ChangeAreaEvent; buttonClickedEvent: ButtonClickedEvent; remotePlayerClickedEvent: RemotePlayerClickedEvent; actionsMenuActionClickedEvent: ActionsMenuActionClickedEvent; diff --git a/front/src/Api/IframeListener.ts b/front/src/Api/IframeListener.ts index 56da2fe6..5d511cbd 100644 --- a/front/src/Api/IframeListener.ts +++ b/front/src/Api/IframeListener.ts @@ -28,7 +28,7 @@ import { ModifyEmbeddedWebsiteEvent } from "./Events/EmbeddedWebsiteEvent"; import { handleMenuRegistrationEvent, handleMenuUnregisterEvent } from "../Stores/MenuStore"; import type { ChangeLayerEvent } from "./Events/ChangeLayerEvent"; import type { WasCameraUpdatedEvent } from "./Events/WasCameraUpdatedEvent"; -import type { ChangeZoneEvent } from "./Events/ChangeZoneEvent"; +import type { ChangeAreaEvent } from "./Events/ChangeAreaEvent"; import { CameraSetEvent } from "./Events/CameraSetEvent"; import { CameraFollowPlayerEvent } from "./Events/CameraFollowPlayerEvent"; import type { RemotePlayerClickedEvent } from "./Events/RemotePlayerClickedEvent"; @@ -445,21 +445,21 @@ class IframeListener { }); } - sendEnterZoneEvent(zoneName: string) { + sendEnterAreaEvent(areaName: string) { this.postMessage({ - type: "enterZoneEvent", + type: "enterAreaEvent", data: { - name: zoneName, - } as ChangeZoneEvent, + name: areaName, + } as ChangeAreaEvent, }); } - sendLeaveZoneEvent(zoneName: string) { + sendLeaveAreaEvent(areaName: string) { this.postMessage({ - type: "leaveZoneEvent", + type: "leaveAreaEvent", data: { - name: zoneName, - } as ChangeZoneEvent, + name: areaName, + } as ChangeAreaEvent, }); } diff --git a/front/src/Components/Menu/GuestSubMenu.svelte b/front/src/Components/Menu/GuestSubMenu.svelte index fbbc48a4..3afdfb51 100644 --- a/front/src/Components/Menu/GuestSubMenu.svelte +++ b/front/src/Components/Menu/GuestSubMenu.svelte @@ -47,7 +47,13 @@ {#if !canShare} {:else} diff --git a/front/src/Components/Menu/Menu.svelte b/front/src/Components/Menu/Menu.svelte index 21e62520..2583c208 100644 --- a/front/src/Components/Menu/Menu.svelte +++ b/front/src/Components/Menu/Menu.svelte @@ -3,7 +3,6 @@ import SettingsSubMenu from "./SettingsSubMenu.svelte"; import ProfileSubMenu from "./ProfileSubMenu.svelte"; import AboutRoomSubMenu from "./AboutRoomSubMenu.svelte"; - import GlobalMessageSubMenu from "./GlobalMessagesSubMenu.svelte"; import ContactSubMenu from "./ContactSubMenu.svelte"; import CustomSubMenu from "./CustomSubMenu.svelte"; import GuestSubMenu from "./GuestSubMenu.svelte"; @@ -25,16 +24,16 @@ let props: { url: string; allowApi: boolean }; let unsubscriberSubMenuStore: Unsubscriber; - onMount(() => { + onMount(async () => { unsubscriberSubMenuStore = subMenusStore.subscribe(() => { if (!$subMenusStore.includes(activeSubMenu)) { - switchMenu($subMenusStore[0]); + void switchMenu($subMenusStore[0]); } }); checkSubMenuToShow(); - switchMenu($subMenusStore[0]); + await switchMenu($subMenusStore[0]); }); onDestroy(() => { @@ -43,7 +42,7 @@ } }); - function switchMenu(menu: MenuItem) { + async function switchMenu(menu: MenuItem) { if (menu.type === "translated") { activeSubMenu = menu; switch (menu.key) { @@ -60,7 +59,7 @@ activeComponent = AboutRoomSubMenu; break; case SubMenusInterface.globalMessages: - activeComponent = GlobalMessageSubMenu; + activeComponent = (await import("./GlobalMessagesSubMenu.svelte")).default; break; case SubMenusInterface.contact: activeComponent = ContactSubMenu; @@ -111,7 +110,7 @@ diff --git a/front/src/Components/Menu/SettingsSubMenu.svelte b/front/src/Components/Menu/SettingsSubMenu.svelte index 64a6e0ac..41fd425a 100644 --- a/front/src/Components/Menu/SettingsSubMenu.svelte +++ b/front/src/Components/Menu/SettingsSubMenu.svelte @@ -9,6 +9,8 @@ import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils"; import { audioManagerVolumeStore } from "../../Stores/AudioManagerStore"; + import infoImg from "../images/info.svg"; + let fullscreen: boolean = localUserStore.getFullscreen(); let notification: boolean = localUserStore.getNotification() === "granted"; let forceCowebsiteTrigger: boolean = localUserStore.getForceCowebsiteTrigger(); @@ -179,8 +181,15 @@
-

{$LL.menu.settings.privacySettings.title()}

-

{$LL.menu.settings.privacySettings.explanation()}

+
+

+ {$LL.menu.settings.privacySettings.title()} + info icon +

+
+

{$LL.menu.settings.privacySettings.explanation()}

+
+