add playground in doc

docs/.vitepress/theme/components/Playground.vue

@@ -0,0 +1,15 @@
+<template>
+    <iframe :src="path" loading="lazy" scrolling="no" style="border:0;height:760px;max-width:800px;width:100%"> 
+    </iframe>
+</template>
+
+<script>
+export default {
+    props: ['id'],
+    computed: {
+        path() {
+            return `https://playground.rpgjs.dev/sandbox/${this.id}`
+        }
+    }
+}
+</script>

docs/.vitepress/theme/index.js

@@ -1,10 +1,10 @@
 import { h } from 'vue'
-import { VPTheme } from '@vue/theme'
 import DefaultTheme from 'vitepress/theme'
 import PathTo from './components/PathTo.vue'
 import Video from './components/Video.vue'
 import Type from './components/Type.vue'
 import PreferenceSwitch from './components/PreferenceSwitch.vue'
+import Playground from './components/Playground.vue'
 
 export default {
   extends: DefaultTheme,
@@ -15,6 +15,7 @@ export default {
     })
   },
   enhanceApp(ctx) {
+    ctx.app.component('Playground', Playground)
     ctx.app.component('PathTo', PathTo)
     ctx.app.component('Video', Video)
     ctx.app.component('Type', Type)

docs/gui/tooltip.md

@@ -5,6 +5,10 @@
 - Know how to create a GUI and add it in the module
 - Be comfortable with VueJS
 
+## Preview
+
+<Playground id="232" />
+
 ## Goal
 
 This is very useful to make more advanced interactions on a sprite. For example, display a tooltip or additional interactive displays.

docs/guide/create-event.md

@@ -134,6 +134,8 @@ export class CharaEvent extends RpgEvent {
 > You have to know that there are several commands, here we just display a text. In fact, it opens a predefined GUI.
 > We use `async/await` because we wait for the player to press Enter after the dialog to continue the other instructions.
 
+<Playground id="225" />
+
 ## Example 2: Example: Earn gold
 
 Here is a more complete example. It shows a small scenario. It is important to know that this event will be seen by everyone. However, the action will be independent to each player :
@@ -239,4 +241,7 @@ export class DoorEvent extends RpgEvent {
 
 With, `onChanges`, a listening is done on a potential change. You can then update the door graphics according to the state of the `LEVER` variable
 
-> Note that in MMORPG mode, everyone sees the change of the door graphics even if the variable is changed only for the player. Switch the event to Scenario mode if you want to make a single event per player
+> Note that in MMORPG mode, everyone sees the change of the door graphics even if the variable is changed only for the player. Switch the event to Scenario mode if you want to make a single event per player
+
+
+<Playground id="228" />

docs/guide/create-gui.md

@@ -9,12 +9,11 @@
 1. Each user interface uses the DOM and not HTML5 Canvas. Why not? Because it is easier to create interfaces with components than with canvas graphics.
 2. Each GUI has an identifier. Predefined identifiers exist to manage existing GUI (dialog, main menu, shop, etc.).
 
-## Goal
+## Preview
 
 We want to create a life bar. It will remain in hauy on the left side of the screen.
 
-![Hud](/assets/hud.png)
-
+<Playground id="222" />
 
 ## Component
 
@@ -125,15 +124,17 @@ export default {
 <PathTo to="playerFile" />
 
 ```ts
-import { RpgPlayer, RpgPlayerHooks } from '@rpgjs/server'
+import { RpgPlayer, type RpgPlayerHooks } from '@rpgjs/server'
 
-export const player: RpgPlayerHooks = {
+const player: RpgPlayerHooks = {
     onJoinMap(player: RpgPlayer) {
         player.gui('my-tooltip').open()
         player.showAttachedGui()
 		// you can hide with player.hideAttachedGui()
     }
 }
+
+export default player
 ```
 
 We open the `my-tooltip` GUI and display the player's tooltip 

docs/guide/create-world-maps.md

@@ -11,6 +11,10 @@ The interest is to teleport the player on an adjacent map on consistent X and Y
 
 <Video src="/assets/rpgjs_world.mp4" /> 
 
+## Preview
+
+<Playground id="224" />
+
 ## Preparing the world in the editor
 
 Click on `World > New World` and add a file ending with the extension `.world` in <Path to="tmxDir" />