Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adding special zone documentation and Typescript documentation

Browse source 
This commit splits the special zone documentation in 3 different pages (open website / meeting rooms / special zones).
It also migrates special zones doc and using-typescript doc to Github repository
This commit is contained in:
David Négrier 2021-09-08 08:46:01 +02:00
parent 0a44e3b4a1
commit 9ccd967cb8
9 changed files with 346 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

65
docs/maps/opening-a-website.md Normal file
View file

@ -0,0 +1,65 @@
{.section-title.accent.text-primary}
# Opening a website when walking on the map
https://www.youtube.com/watch?v=Me8cu5lLN3A
## The openWebsite property
On your map, you can define special zones. When a player will pass over these zones, a website will open (as an iframe
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 may also use "`openWebsiteWidth`" property (of type "`number`" between 0 and 100) to control the width of the iframe.
{.alert.alert-warning}
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).
## Integrating a Youtube video
A common use case is to use `openWebsite` to open a Youtube video.
The global Youtube page cannot be embedded into an iFrame (it has the `X-Frame-Options` HTTP header).
To embed a Youtube video, be sure to **use the "embed" link**. You can get this link be clicking "Share > Embed" in Youtube.
<figure class="figure">
<img src="images/youtube.jpg" class="figure-img img-fluid rounded" alt="" />
<figcaption class="figure-caption">Find the URL of your video in the "embed Video" HTML snippet on Youtube</figcaption>
</figure>
<figure class="figure">
<img src="images/open_website.jpg" class="figure-img img-fluid rounded" alt="" />
<figcaption class="figure-caption">Put this URL in the "openWebsite" property</figcaption>
</figure>
### Triggering of the "open website" action
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:
<figure class="figure">
<img src="images/click_space_open_website.jpg" class="figure-img img-fluid rounded" alt="" />
<figcaption class="figure-caption">The iFrame will only open if the user clicks Space</figcaption>
</figure>
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'.
### Setting the iFrame "allow" attribute
By default, iFrames have limited rights in browsers. For instance, they cannot put their content in fullscreen, they cannot start your webcam, etc...
If you want to grant additional access rights to your iFrame, you should use the `openWebsitePolicy` property. The value of this property will be directly used for the [`allow` atttribute of your iFrame](https://developer.mozilla.org/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy#the_iframe_allow_attribute).
For instance, if you want an iFrame to be able to go in fullscreen, you will use the property `openWebsitePolicy: fullscreen`
<figure class="figure">
<img src="images/open_website_policy.jpg" class="figure-img img-fluid rounded" alt="" />
<figcaption class="figure-caption">The generated iFrame will have the allow attribute set to: <code>&lt;iframe allow="fullscreen"&gt;</code></figcaption>
</figure>