Merge branch 'develop' of github.com:thecodingmachine/workadventure into audioPlayerImprovements
This commit is contained in:
Lurkars
commit
49b1a55042
@ -1,5 +1,11 @@
|
||||
## Version develop
|
||||
|
||||
### Updates
|
||||
- New scripting API features :
|
||||
- Use `WA.ui.registerMenuCommand(commandDescriptor: string, options: MenuOptions): Menu` to add a custom menu or an iframe to the menu.
|
||||
|
||||
## Version 1.4.14
|
||||
|
||||
### Updates
|
||||
- New scripting API features :
|
||||
- Use `WA.room.loadTileset(url: string) : Promise<number>` to load a tileset from a JSON file.
|
||||
|
||||
@ -35,6 +35,9 @@ Note: on some OSes, you will need to add this line to your `/etc/hosts` file:
|
||||
127.0.0.1 workadventure.localhost
|
||||
```
|
||||
|
||||
Note: If on the first run you get a page with "network error". Try to ``docker-compose stop`` , then ``docker-compose start``.
|
||||
Note 2: If you are still getting "network error". Make sure you are authorizing the self-signed certificate by entering https://pusher.workadventure.testing and accepting them.
|
||||
|
||||
### MacOS developers, your environment with Vagrant
|
||||
|
||||
If you are using MacOS, you can increase Docker performance using Vagrant. If you want more explanations, you can read [this medium article](https://medium.com/better-programming/vagrant-to-increase-docker-performance-with-macos-25b354b0c65c).
|
||||
|
||||
@ -54,7 +54,6 @@
|
||||
"prom-client": "^12.0.0",
|
||||
"query-string": "^6.13.3",
|
||||
"redis": "^3.1.2",
|
||||
"systeminformation": "^4.31.1",
|
||||
"uWebSockets.js": "uNetworking/uWebSockets.js#v18.5.0",
|
||||
"uuidv4": "^6.0.7"
|
||||
},
|
||||
|
||||
@ -554,7 +554,7 @@ chokidar@^3.4.0:
|
||||
optionalDependencies:
|
||||
fsevents "~2.1.2"
|
||||
|
||||
chownr@^1.1.1:
|
||||
chownr@^1.1.4:
|
||||
version "1.1.4"
|
||||
resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
|
||||
integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
|
||||
@ -1159,7 +1159,7 @@ fragment-cache@^0.2.1:
|
||||
dependencies:
|
||||
map-cache "^0.2.2"
|
||||
|
||||
fs-minipass@^1.2.5:
|
||||
fs-minipass@^1.2.7:
|
||||
version "1.2.7"
|
||||
resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
|
||||
integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==
|
||||
@ -1969,7 +1969,7 @@ minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5:
|
||||
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
|
||||
integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
|
||||
|
||||
minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
|
||||
minipass@^2.6.0, minipass@^2.9.0:
|
||||
version "2.9.0"
|
||||
resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
|
||||
integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
|
||||
@ -1977,7 +1977,7 @@ minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
|
||||
safe-buffer "^5.1.2"
|
||||
yallist "^3.0.0"
|
||||
|
||||
minizlib@^1.2.1:
|
||||
minizlib@^1.3.3:
|
||||
version "1.3.3"
|
||||
resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
|
||||
integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
|
||||
@ -1992,7 +1992,7 @@ mixin-deep@^1.2.0:
|
||||
for-in "^1.0.2"
|
||||
is-extendable "^1.0.1"
|
||||
|
||||
mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.3:
|
||||
mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5:
|
||||
version "0.5.5"
|
||||
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
|
||||
integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
|
||||
@ -2290,9 +2290,9 @@ path-key@^3.0.0, path-key@^3.1.0:
|
||||
integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
|
||||
|
||||
path-parse@^1.0.6:
|
||||
version "1.0.6"
|
||||
resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
|
||||
integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
|
||||
version "1.0.7"
|
||||
resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
|
||||
integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
|
||||
|
||||
path-type@^1.0.0:
|
||||
version "1.1.0"
|
||||
@ -2578,7 +2578,7 @@ rxjs@^6.6.7:
|
||||
dependencies:
|
||||
tslib "^1.9.0"
|
||||
|
||||
safe-buffer@^5.0.1, safe-buffer@^5.1.2:
|
||||
safe-buffer@^5.0.1, safe-buffer@^5.1.2, safe-buffer@^5.2.1:
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
|
||||
integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
|
||||
@ -2962,11 +2962,6 @@ supports-color@^7.1.0:
|
||||
dependencies:
|
||||
has-flag "^4.0.0"
|
||||
|
||||
systeminformation@^4.31.1:
|
||||
version "4.31.1"
|
||||
resolved "https://registry.yarnpkg.com/systeminformation/-/systeminformation-4.31.1.tgz#2e02c26987494d4b6a4d2d83138724593bc98d50"
|
||||
integrity sha512-dVCDWNMN8ncMZo5vbMCA5dpAdMgzafK2ucuJy5LFmGtp1cG6farnPg8QNvoOSky9SkFoEX1Aw0XhcOFV6TnLYA==
|
||||
|
||||
table@^5.2.3:
|
||||
version "5.4.6"
|
||||
resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
|
||||
@ -2978,17 +2973,17 @@ table@^5.2.3:
|
||||
string-width "^3.0.0"
|
||||
|
||||
tar@^4.4.2:
|
||||
version "4.4.13"
|
||||
resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
|
||||
integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
|
||||
version "4.4.19"
|
||||
resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.19.tgz#2e4d7263df26f2b914dee10c825ab132123742f3"
|
||||
integrity sha512-a20gEsvHnWe0ygBY8JbxoM4w3SJdhc7ZAuxkLqh+nvNQN2IOt0B5lLgM490X5Hl8FF0dl0tOf2ewFYAlIFgzVA==
|
||||
dependencies:
|
||||
chownr "^1.1.1"
|
||||
fs-minipass "^1.2.5"
|
||||
minipass "^2.8.6"
|
||||
minizlib "^1.2.1"
|
||||
mkdirp "^0.5.0"
|
||||
safe-buffer "^5.1.2"
|
||||
yallist "^3.0.3"
|
||||
chownr "^1.1.4"
|
||||
fs-minipass "^1.2.7"
|
||||
minipass "^2.9.0"
|
||||
minizlib "^1.3.3"
|
||||
mkdirp "^0.5.5"
|
||||
safe-buffer "^5.2.1"
|
||||
yallist "^3.1.1"
|
||||
|
||||
tdigest@^0.1.1:
|
||||
version "0.1.1"
|
||||
@ -3282,7 +3277,7 @@ y18n@^3.2.0:
|
||||
resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.2.tgz#85c901bd6470ce71fc4bb723ad209b70f7f28696"
|
||||
integrity sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ==
|
||||
|
||||
yallist@^3.0.0, yallist@^3.0.3:
|
||||
yallist@^3.0.0, yallist@^3.1.1:
|
||||
version "3.1.1"
|
||||
resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
|
||||
integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
|
||||
|
||||
6
benchmark/package-lock.json
generated
6
benchmark/package-lock.json
generated
@ -429,9 +429,9 @@
|
||||
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
|
||||
},
|
||||
"path-parse": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
|
||||
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
|
||||
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
|
||||
},
|
||||
"path-type": {
|
||||
"version": "1.1.0",
|
||||
|
||||
@ -315,8 +315,8 @@ path-is-absolute@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
|
||||
|
||||
path-parse@^1.0.6:
|
||||
version "1.0.6"
|
||||
resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
|
||||
version "1.0.7"
|
||||
resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
|
||||
|
||||
path-type@^1.0.0:
|
||||
version "1.1.0"
|
||||
|
||||
@ -101,6 +101,7 @@
|
||||
},
|
||||
"redis": {
|
||||
"image": "redis:6",
|
||||
"ports": [6379]
|
||||
}
|
||||
},
|
||||
"config": {
|
||||
|
||||
@ -7,14 +7,14 @@ not overwrite existing ones) and click on the animation editor:
|
||||
|
||||
|
||||
<div class="px-5 card rounded d-inline-block">
|
||||
<img class="document-img" src="https://workadventu.re/img/docs/anims/camera.png" alt="" />
|
||||
<img class="document-img" src="images/anims/camera.png" alt="" />
|
||||
</div>
|
||||
|
||||
You can now add all tiles that should be part of the animation via drag and drop to the "playlist" and adjust the frame duration:
|
||||
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<img class="figure-img img-fluid rounded" src="https://workadventu.re/img/docs/anims/animation_editor.png" alt="" />
|
||||
<img class="figure-img img-fluid rounded" src="images/anims/animation_editor.png" alt="" />
|
||||
<figcaption class="figure-caption">The tile animation editor</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
@ -24,7 +24,7 @@ You can preview animations directly in Tiled, using the "Show tile animations" o
|
||||
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<img class="figure-img img-fluid rounded" src="https://workadventu.re/img/docs/anims/settings_show_animations.png" alt="" />
|
||||
<img class="figure-img img-fluid rounded" src="images/anims/settings_show_animations.png" alt="" />
|
||||
<figcaption class="figure-caption">The Show Tile Animations option</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
@ -18,3 +18,4 @@ The list of functions below is **deprecated**. You should not use those but. use
|
||||
- Method `WA.onChatMessage` is deprecated. It has been renamed to `WA.chat.onChatMessage`.
|
||||
- Method `WA.onEnterZone` is deprecated. It has been renamed to `WA.room.onEnterZone`.
|
||||
- Method `WA.onLeaveZone` is deprecated. It has been renamed to `WA.room.onLeaveZone`.
|
||||
- Method `WA.ui.registerMenuCommand` parameter `callback` is deprecated. Use `WA.ui.registerMenuCommand(commandDescriptor: string, options: MenuOptions)`.
|
||||
@ -7,7 +7,7 @@ If you use group layers in your map, to reference a layer in a group you will ne
|
||||
Example :
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img src="https://workadventu.re/img/docs/groupLayer.png" class="figure-img img-fluid rounded" alt="" />
|
||||
<img src="images/groupLayer.png" class="figure-img img-fluid rounded" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -28,7 +28,7 @@ Listens to the position of the current user. The event is triggered when the use
|
||||
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<img src="https://workadventu.re/img/docs/trigger_event.png" class="figure-img img-fluid rounded" alt="" />
|
||||
<img src="images/trigger_event.png" class="figure-img img-fluid rounded" alt="" />
|
||||
<figcaption class="figure-caption">The `zone` property, applied on a layer</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
@ -140,7 +140,7 @@ Replace the tile at the `x` and `y` coordinates in the layer named `layer` by th
|
||||
If `tile` is a string, it's not the id of the tile but the value of the property `name`.
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img src="https://workadventu.re/img/docs/nameIndexProperty.png" class="figure-img img-fluid rounded" alt="" />
|
||||
<img src="images/nameIndexProperty.png" class="figure-img img-fluid rounded" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -9,6 +9,7 @@ Moreover, `WA.state` functions can be used to persist this state across reloads.
|
||||
```
|
||||
WA.state.saveVariable(key : string, data : unknown): void
|
||||
WA.state.loadVariable(key : string) : unknown
|
||||
WA.state.hasVariable(key : string) : boolean
|
||||
WA.state.onVariableChange(key : string).subscribe((data: unknown) => {}) : Subscription
|
||||
WA.state.[any property]: unknown
|
||||
```
|
||||
@ -70,7 +71,7 @@ Each object will represent a variable.
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img src="https://workadventu.re/img/docs/object_variable.png" class="figure-img img-fluid rounded" alt="" />
|
||||
<img src="images/object_variable.png" class="figure-img img-fluid rounded" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -9,10 +9,10 @@ You can position this popup by using a "rectangle" object in Tiled that you will
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img src="https://workadventu.re/img/docs/screen_popup_tiled.png" class="figure-img img-fluid rounded" alt="" />
|
||||
<img src="images/screen_popup_tiled.png" class="figure-img img-fluid rounded" alt="" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<img src="https://workadventu.re/img/docs/screen_popup_in_game.png" class="figure-img img-fluid rounded" alt="" />
|
||||
<img src="images/screen_popup_in_game.png" class="figure-img img-fluid rounded" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -68,25 +68,53 @@ WA.room.onLeaveZone('myZone', () => {
|
||||
|
||||
### Add custom menu
|
||||
|
||||
```typescript
|
||||
WA.ui.registerMenuCommand(menuCommand: string, callback: (menuCommand: string) => void): void
|
||||
```
|
||||
Add a custom menu item containing the text `commandDescriptor` in the main menu. A click on the menu will trigger the `callback`.
|
||||
WA.ui.registerMenuCommand(commandDescriptor: string, options: MenuOptions): Menu
|
||||
```
|
||||
Add a custom menu item containing the text `commandDescriptor` in the navbar of the menu.
|
||||
`options` attribute accepts an object with three properties :
|
||||
- `callback : (commandDescriptor: string) => void` : A click on the custom menu will trigger the `callback`.
|
||||
- `iframe: string` : A click on the custom menu will open the `iframe` inside the menu.
|
||||
- `allowApi?: boolean` : Allow the iframe of the custom menu to use the Scripting API.
|
||||
|
||||
Important : `options` accepts only `callback` or `iframe` not both.
|
||||
|
||||
Custom menu exist only until the map is unloaded, or you leave the iframe zone of the script.
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img src="images/custom-menu-navbar.png" class="figure-img img-fluid rounded" alt="" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<img src="images/custom-menu-iframe.png" class="figure-img img-fluid rounded" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Example:
|
||||
|
||||
```javascript
|
||||
|
||||
WA.ui.registerMenuCommand("test", () => {
|
||||
WA.chat.sendChatMessage("test clicked", "menu cmd")
|
||||
const menu = WA.ui.registerMenuCommand('menu test',
|
||||
{
|
||||
callback: () => {
|
||||
WA.chat.sendChatMessage('test');
|
||||
}
|
||||
})
|
||||
|
||||
// Some time later, if you want to remove the menu:
|
||||
menu.remove();
|
||||
```
|
||||
|
||||
<div class="col">
|
||||
<img src="https://workadventu.re/img/docs/menu-command.png" class="figure-img img-fluid rounded" alt="" />
|
||||
</div>
|
||||
Please note that `registerMenuCommand` returns an object of the `Menu` class.
|
||||
|
||||
The `Menu` class contains a single method: `remove(): void`. This will obviously remove the menu when called.
|
||||
|
||||
```javascript
|
||||
class Menu {
|
||||
/**
|
||||
* Remove the menu
|
||||
*/
|
||||
remove() {};
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -103,7 +131,7 @@ WA.ui.displayActionMessage({
|
||||
Displays a message at the bottom of the screen (that will disappear when space bar is pressed).
|
||||
|
||||
<div class="col">
|
||||
<img src="https://workadventu.re/img/docs/trigger_message.png" class="figure-img img-fluid rounded" alt="" />
|
||||
<img src="images/trigger_message.png" class="figure-img img-fluid rounded" alt="" />
|
||||
</div>
|
||||
|
||||
Example:
|
||||
|
||||
BIN
docs/maps/images/anims/animation_editor.png
Normal file
BIN
docs/maps/images/anims/animation_editor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
docs/maps/images/anims/camera.png
Normal file
BIN
docs/maps/images/anims/camera.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
docs/maps/images/anims/settings_show_animations.png
Normal file
BIN
docs/maps/images/anims/settings_show_animations.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
docs/maps/images/collides-1.png
Normal file
BIN
docs/maps/images/collides-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
BIN
docs/maps/images/collides-2.png
Normal file
BIN
docs/maps/images/collides-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
docs/maps/images/collides-3.png
Normal file
BIN
docs/maps/images/collides-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
BIN
docs/maps/images/collides-4.png
Normal file
BIN
docs/maps/images/collides-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
docs/maps/images/custom-menu-iframe.png
Normal file
BIN
docs/maps/images/custom-menu-iframe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
docs/maps/images/custom-menu-navbar.png
Normal file
BIN
docs/maps/images/custom-menu-navbar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
docs/maps/images/groupLayer.png
Normal file
BIN
docs/maps/images/groupLayer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
docs/maps/images/menu-command.png
Normal file
BIN
docs/maps/images/menu-command.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
docs/maps/images/nameIndexProperty.png
Normal file
BIN
docs/maps/images/nameIndexProperty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
docs/maps/images/object_variable.png
Normal file
BIN
docs/maps/images/object_variable.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
docs/maps/images/open_website_allow_api.png
Normal file
BIN
docs/maps/images/open_website_allow_api.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
docs/maps/images/screen_popup_in_game.png
Normal file
BIN
docs/maps/images/screen_popup_in_game.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
docs/maps/images/screen_popup_tiled.png
Normal file
BIN
docs/maps/images/screen_popup_tiled.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
BIN
docs/maps/images/script_property.png
Normal file
BIN
docs/maps/images/script_property.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
docs/maps/images/text-object.png
Normal file
BIN
docs/maps/images/text-object.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
docs/maps/images/tiled_screenshot_1.png
Normal file
BIN
docs/maps/images/tiled_screenshot_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
docs/maps/images/trigger_event.png
Normal file
BIN
docs/maps/images/trigger_event.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
docs/maps/images/trigger_message.png
Normal file
BIN
docs/maps/images/trigger_message.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
docs/maps/images/website_allowapi_property.png
Normal file
BIN
docs/maps/images/website_allowapi_property.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
docs/maps/images/website_url_property.png
Normal file
BIN
docs/maps/images/website_url_property.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
@ -46,7 +46,7 @@ You can put relative URLs. If your script file is next to your map, you can simp
|
||||
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<img src="https://workadventu.re/img/docs/script_property.png" class="figure-img img-fluid rounded" alt="" />
|
||||
<img src="images/script_property.png" class="figure-img img-fluid rounded" alt="" />
|
||||
<figcaption class="figure-caption">The script property</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
@ -72,7 +72,7 @@ In order to allow communication with WorkAdventure, you need to add an additiona
|
||||
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<img src="https://workadventu.re/img/docs/open_website_allow_api.png" class="figure-img img-fluid rounded" alt="" />
|
||||
<img src="images/open_website_allow_api.png" class="figure-img img-fluid rounded" alt="" />
|
||||
<figcaption class="figure-caption">The `openWebsiteAllowApi` property</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
@ -29,7 +29,7 @@ font that has support for a variety of accents. It renders great when used at *8
|
||||
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<img src="https://workadventu.re/img/docs/text-object.png" class="figure-img img-fluid rounded" alt="" style="width: 70%" />
|
||||
<img src="images/text-object.png" class="figure-img img-fluid rounded" alt="" style="width: 70%" />
|
||||
<figcaption class="figure-caption">The "font-family" property</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
@ -49,7 +49,7 @@ A few things to notice:
|
||||
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<img src="https://workadventu.re/img/docs/tiled_screenshot_1.png" class="figure-img img-fluid rounded" alt="" style="width: 70%" />
|
||||
<img src="images/tiled_screenshot_1.png" class="figure-img img-fluid rounded" alt="" style="width: 70%" />
|
||||
<figcaption class="figure-caption">"floorLayer" is compulsory</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
@ -62,21 +62,21 @@ To make a tile "collidable", you should:
|
||||
|
||||
1. select the relevant tileset and switch to "edit" mode:
|
||||
|
||||
{.document-img}
|
||||
{.document-img}
|
||||
|
||||
2. right click on a tile of the tileset to select it:
|
||||
|
||||
{.document-img}
|
||||
{.document-img}
|
||||
|
||||
3. on the left pane in the custom properties section, right click and select "Add properties":
|
||||
|
||||
{.document-img}
|
||||
{.document-img}
|
||||
|
||||
Please add a `collides` property. The type of the property must be **bool**.
|
||||
|
||||
4. finally, check the checkbox for the `collides` property:
|
||||
|
||||
{.document-img}
|
||||
{.document-img}
|
||||
|
||||
Repeat for every tile that should be "collidable".
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ To do this in Tiled:
|
||||
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<img src="https://workadventu.re/img/docs/website_url_property.png" class="figure-img img-fluid rounded" alt="" style="width: 70%" />
|
||||
<img src="images/website_url_property.png" class="figure-img img-fluid rounded" alt="" style="width: 70%" />
|
||||
<figcaption class="figure-caption">A "website" object</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
@ -34,7 +34,7 @@ to explicitly allow it, by setting an additional `allowApi` property to `true`.
|
||||
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<img src="https://workadventu.re/img/docs/website_allowapi_property.png" class="figure-img img-fluid rounded" alt="" style="width: 70%" />
|
||||
<img src="images/website_allowapi_property.png" class="figure-img img-fluid rounded" alt="" style="width: 70%" />
|
||||
<figcaption class="figure-caption">A "website" object that can communicate using the Iframe API</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
1
front/dist/index.tmpl.html
vendored
1
front/dist/index.tmpl.html
vendored
@ -34,7 +34,6 @@
|
||||
<title>WorkAdventure</title>
|
||||
</head>
|
||||
<body id="body" style="margin: 0; background-color: #000">
|
||||
|
||||
<div class="main-container" id="main-container">
|
||||
<!-- Create the editor container -->
|
||||
<div id="game" class="game">
|
||||
|
||||
78
front/dist/resources/html/gameMenu.html
vendored
78
front/dist/resources/html/gameMenu.html
vendored
@ -1,78 +0,0 @@
|
||||
<style>
|
||||
#gameMenu main{
|
||||
margin-top: 15px;
|
||||
}
|
||||
#gameMenu button {
|
||||
background-color: black;
|
||||
color: white;
|
||||
border-radius: 7px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
#gameMenu section {
|
||||
margin: 10px;
|
||||
}
|
||||
section#socialLinks{
|
||||
position: absolute;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
section#socialLinks img{
|
||||
width: 32px;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
@media only screen and (max-height: 700px) {
|
||||
#gameMenu main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0;
|
||||
}
|
||||
#gameMenu section{
|
||||
margin: 2px;
|
||||
}
|
||||
section#socialLinks{
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="gameMenu" hidden>
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<button id="shareButton">Share url</button>
|
||||
</section>
|
||||
<section>
|
||||
<button id="changeNameButton">Edit name</button>
|
||||
</section>
|
||||
<section>
|
||||
<button id="changeSkinButton">Edit skin</button>
|
||||
</section>
|
||||
<section>
|
||||
<button id="changeCompanionButton">Edit companion</button>
|
||||
</section>
|
||||
<section>
|
||||
<button id="editGameSettingsButton">Settings</button>
|
||||
</section>
|
||||
<section>
|
||||
<button id="toggleFullscreen">Toggle fullscreen</button>
|
||||
</section>
|
||||
<section>
|
||||
<button id="enableNotification">Enable notifications</button>
|
||||
</section>
|
||||
<!-- TODO activate authentication -->
|
||||
<section hidden>
|
||||
<button id="oidcLogin">Oauth Login</button>
|
||||
</section>
|
||||
<section>
|
||||
<button id="sparkButton">Create map</button>
|
||||
</section>
|
||||
<section id="adminConsoleSection" hidden>
|
||||
<button id="adminConsoleButton">Admin console</button>
|
||||
</section>
|
||||
<section id="socialLinks" hidden>
|
||||
<a class="not-button" href="https://www.facebook.com/workadventure.WA" target="_blank"><img class="not-button" src="/resources/objects/facebook-icon.png"/></a>
|
||||
<a class="not-button" href="https://twitter.com/Workadventure_" target="_blank"><img class="not-button" src="/resources/objects/twitter-icon.png"/></a>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
28
front/dist/resources/html/gameMenuIcon.html
vendored
28
front/dist/resources/html/gameMenuIcon.html
vendored
@ -1,28 +0,0 @@
|
||||
<style>
|
||||
#menuIcon button {
|
||||
background-color: black;
|
||||
color: white;
|
||||
border-radius: 7px;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
#menuIcon button img{
|
||||
width: 14px;
|
||||
padding-top: 0;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
#menuIcon section {
|
||||
margin: 10px;
|
||||
}
|
||||
@media only screen and (max-height: 700px) {
|
||||
#menuIcon section {
|
||||
margin: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<main id="menuIcon" hidden>
|
||||
<section>
|
||||
<button id="openMenuButton">
|
||||
<img src="/static/images/menu.svg">
|
||||
</button>
|
||||
</section>
|
||||
</main>
|
||||
81
front/dist/resources/html/gameQualityMenu.html
vendored
81
front/dist/resources/html/gameQualityMenu.html
vendored
@ -1,81 +0,0 @@
|
||||
<style>
|
||||
#gameQuality {
|
||||
background: #eceeee;
|
||||
border: 1px solid #42464b;
|
||||
border-radius: 6px;
|
||||
margin: 20px auto 0;
|
||||
width: 50vw;
|
||||
max-width: 300px;
|
||||
}
|
||||
#gameQuality .cautiousText {
|
||||
font-size: 50%;
|
||||
}
|
||||
#gameQuality h1 {
|
||||
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
|
||||
border-bottom: 1px solid #a6abaf;
|
||||
border-radius: 6px 6px 0 0;
|
||||
box-sizing: border-box;
|
||||
color: #727678;
|
||||
display: block;
|
||||
height: 43px;
|
||||
padding-top: 10px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
|
||||
}
|
||||
#gameQuality select {
|
||||
font-size: 70%;
|
||||
background: linear-gradient(top, #d6d7d7, #dee0e0);
|
||||
border: 1px solid #a1a3a3;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px #fff;
|
||||
box-sizing: border-box;
|
||||
color: #696969;
|
||||
height: 30px;
|
||||
transition: box-shadow 0.3s;
|
||||
width: 100%;
|
||||
}
|
||||
#gameQuality section {
|
||||
margin: 10px;
|
||||
}
|
||||
#gameQuality section.action{
|
||||
text-align: center;
|
||||
}
|
||||
#gameQuality button {
|
||||
margin: 10px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
border-radius: 7px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
#gameQuality button#gameQualityFormCancel {
|
||||
background-color: #c7c7c700;
|
||||
color: #292929;
|
||||
}
|
||||
</style>
|
||||
|
||||
<form id="gameQuality" hidden>
|
||||
<section>
|
||||
<h5>Game quality</h3>
|
||||
<p class="cautiousText">(Editing these settings will restart the game)</p>
|
||||
<select id="select-game-quality">
|
||||
<option value="120">High video quality (120 fps)</option>
|
||||
<option value="60">Medium video quality (60 fps, recommended)</option>
|
||||
<option value="40">Minimum video quality (40 fps)</option>
|
||||
<option value="20">Small video quality (20 fps)</option>
|
||||
</select>
|
||||
</section>
|
||||
<section>
|
||||
<h5>Video quality</h3>
|
||||
<select id="select-video-quality">
|
||||
<option value="30">High video quality (30 fps)</option>
|
||||
<option value="20">Medium video quality (20 fps, recommended)</option>
|
||||
<option value="10">Minimum video quality (10 fps)</option>
|
||||
<option value="5">Small video quality (5 fps)</option>
|
||||
</select>
|
||||
</section>
|
||||
<section class="action">
|
||||
<button type="submit" id="gameQualityFormSubmit">Save</button>
|
||||
<button type="reset" class="close" id="gameQualityFormCancel">Cancel</button>
|
||||
</section>
|
||||
</form>
|
||||
115
front/dist/resources/html/gameReport.html
vendored
115
front/dist/resources/html/gameReport.html
vendored
@ -1,115 +0,0 @@
|
||||
<style>
|
||||
#gameReport {
|
||||
background: #eceeee;
|
||||
border: 1px solid #42464b;
|
||||
border-radius: 6px;
|
||||
margin: 2px auto 0;
|
||||
width: 298px;
|
||||
}
|
||||
#gameReport h1 {
|
||||
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
|
||||
border-bottom: 1px solid #a6abaf;
|
||||
border-radius: 6px 6px 0 0;
|
||||
box-sizing: border-box;
|
||||
color: #727678;
|
||||
display: block;
|
||||
height: 43px;
|
||||
padding-top: 10px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
|
||||
}
|
||||
#gameReport h3 {
|
||||
margin: 0;
|
||||
}
|
||||
#gameReport textarea {
|
||||
font-size: 70%;
|
||||
background: linear-gradient(top, #d6d7d7, #dee0e0);
|
||||
border: 1px solid #a1a3a3;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px #fff;
|
||||
box-sizing: border-box;
|
||||
color: #696969;
|
||||
height: 100px;
|
||||
transition: box-shadow 0.3s;
|
||||
width: 100%;
|
||||
}
|
||||
#gameReport section {
|
||||
margin: 10px;
|
||||
}
|
||||
#gameReport section.action{
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
#gameReport button {
|
||||
margin-top: 10px;
|
||||
font-size: 60%;
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
border-radius: 7px;
|
||||
padding: 3px 10px 3px 10px;
|
||||
}
|
||||
#gameReport button#gameReportFormCancel {
|
||||
background-color: #c7c7c700;
|
||||
color: #292929;
|
||||
display: block;
|
||||
float: right;
|
||||
}
|
||||
#gameReport section a{
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
margin: 0 6px;
|
||||
color: black;
|
||||
}
|
||||
#gameReport section h6,
|
||||
#gameReport section h5{
|
||||
margin: 1px;
|
||||
}
|
||||
#gameReport section.text-center{
|
||||
text-align: center;
|
||||
}
|
||||
#gameReport p{
|
||||
font-size: 8px;
|
||||
margin: 3px 0 0 0;
|
||||
}
|
||||
#gameReport form p{
|
||||
margin: 0px 70px;
|
||||
}
|
||||
#gameReport section p.err{
|
||||
color: red;
|
||||
display: none;
|
||||
}
|
||||
#gameReport section p.info{
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<main id="gameReport" hidden>
|
||||
<section>
|
||||
<button id="gameReportFormCancel">X</button>
|
||||
<h1>Moderate <span id="nameReported"></span></h1>
|
||||
<p id="askActionP">What action do you want to take?</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Block: </h3>
|
||||
<p>Block any communication from and to this user. This can be reverted.</p>
|
||||
<section class="action">
|
||||
<button id="toggleBlockButton">Block this user</button>
|
||||
</section>
|
||||
</section>
|
||||
<section id="reportSection">
|
||||
<h3>Report: </h3>
|
||||
<p>Send a report message to the administrators of this room. They may later ban this user.</p>
|
||||
<form>
|
||||
<section>
|
||||
<h6>Your message: </h6>
|
||||
<textarea type="text" name="report" id="gameReportInput"></textarea>
|
||||
<p class="err" id="gameReportErr"></p>
|
||||
</section>
|
||||
<section class="action">
|
||||
<button type="submit" id="gameReportFormSubmit">Report this user</button>
|
||||
</section>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
96
front/dist/resources/html/gameShare.html
vendored
96
front/dist/resources/html/gameShare.html
vendored
@ -1,96 +0,0 @@
|
||||
<style>
|
||||
#gameShare {
|
||||
background: #eceeee;
|
||||
border: 1px solid #42464b;
|
||||
border-radius: 6px;
|
||||
margin: 20px auto 0;
|
||||
width: 50vw;
|
||||
max-width: 400px;
|
||||
}
|
||||
#gameShare h1 {
|
||||
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
|
||||
border-bottom: 1px solid #a6abaf;
|
||||
border-radius: 6px 6px 0 0;
|
||||
box-sizing: border-box;
|
||||
color: #727678;
|
||||
display: block;
|
||||
height: 43px;
|
||||
padding-top: 10px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
|
||||
}
|
||||
#gameShare input {
|
||||
font-size: 70%;
|
||||
background: linear-gradient(top, #d6d7d7, #dee0e0);
|
||||
border: 1px solid #a1a3a3;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px #fff;
|
||||
box-sizing: border-box;
|
||||
color: #696969;
|
||||
height: 30px;
|
||||
transition: box-shadow 0.3s;
|
||||
width: 100%;
|
||||
}
|
||||
#gameShare section {
|
||||
margin: 10px;
|
||||
}
|
||||
#gameShare section.action{
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
#gameShare button {
|
||||
margin: 10px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
border-radius: 7px;
|
||||
padding-bottom: 4px;
|
||||
width: 60px;
|
||||
}
|
||||
#gameShare button#gameShareFormCancel {
|
||||
background-color: #c7c7c700;
|
||||
color: #292929;
|
||||
}
|
||||
#gameShare section a{
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
margin: 0 6px;
|
||||
color: black;
|
||||
}
|
||||
#gameShare section h6,
|
||||
#gameShare section h5{
|
||||
margin: 1px;
|
||||
}
|
||||
#gameShare section.text-center{
|
||||
text-align: center;
|
||||
}
|
||||
#gameShare section p{
|
||||
font-size: 8px;
|
||||
margin: 0;
|
||||
}
|
||||
#gameShare section p.err{
|
||||
color: red;
|
||||
display: none;
|
||||
}
|
||||
#gameShare section p.info{
|
||||
display: none;
|
||||
}
|
||||
#gameShare section input#gameShareLink{
|
||||
background-color: #a1a3a3;
|
||||
}
|
||||
</style>
|
||||
|
||||
<form id="gameShare" hidden>
|
||||
<section class="text-center">
|
||||
<h5>Share this link !</h5>
|
||||
<p class="info" id="gameShareInfo"></p>
|
||||
</section>
|
||||
<section>
|
||||
<h6>Link</h6>
|
||||
<input type="text" name="email" id="gameShareLink" readonly>
|
||||
</section>
|
||||
<section class="action">
|
||||
<button type="submit" id="gameShareFormSubmit">Copy</button>
|
||||
<button type="submit" id="gameShareFormCancel">Close</button>
|
||||
</section>
|
||||
</form>
|
||||
BIN
front/dist/resources/logos/tcm_full.png
vendored
Normal file
BIN
front/dist/resources/logos/tcm_full.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 300 B |
BIN
front/dist/resources/logos/tcm_short.png
vendored
Normal file
BIN
front/dist/resources/logos/tcm_short.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 216 B |
7
front/dist/service-worker-prod.js
vendored
7
front/dist/service-worker-prod.js
vendored
@ -1,4 +1,4 @@
|
||||
let CACHE_NAME = 'workavdenture-cache-v1.4.14';
|
||||
let CACHE_NAME = 'workavdenture-cache';
|
||||
let urlsToCache = [
|
||||
'/'
|
||||
];
|
||||
@ -14,7 +14,8 @@ self.addEventListener('install', function(event) {
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', function(event) {
|
||||
event.respondWith(
|
||||
//TODO mamnage fetch data and cache management
|
||||
/*event.respondWith(
|
||||
caches.match(event.request)
|
||||
.then(function(response) {
|
||||
// Cache hit - return response
|
||||
@ -44,7 +45,7 @@ self.addEventListener('fetch', function(event) {
|
||||
}
|
||||
);
|
||||
})
|
||||
);
|
||||
);*/
|
||||
});
|
||||
|
||||
self.addEventListener('wait', function(event) {
|
||||
|
||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
@ -15,7 +15,6 @@ import type { SetPropertyEvent } from "./setPropertyEvent";
|
||||
import type { LoadSoundEvent } from "./LoadSoundEvent";
|
||||
import type { PlaySoundEvent } from "./PlaySoundEvent";
|
||||
import type { MenuItemClickedEvent } from "./ui/MenuItemClickedEvent";
|
||||
import type { MenuItemRegisterEvent } from "./ui/MenuItemRegisterEvent";
|
||||
import type { HasPlayerMovedEvent } from "./HasPlayerMovedEvent";
|
||||
import type { SetTilesEvent } from "./SetTilesEvent";
|
||||
import type { SetVariableEvent } from "./SetVariableEvent";
|
||||
@ -33,6 +32,7 @@ import type {
|
||||
TriggerActionMessageEvent,
|
||||
} from "./ui/TriggerActionMessageEvent";
|
||||
import { isMessageReferenceEvent, isTriggerActionMessageEvent } from "./ui/TriggerActionMessageEvent";
|
||||
import type { MenuRegisterEvent, UnregisterMenuEvent } from "./ui/MenuRegisterEvent";
|
||||
|
||||
export interface TypedMessageEvent<T> extends MessageEvent {
|
||||
data: T;
|
||||
@ -63,7 +63,8 @@ export type IframeEventMap = {
|
||||
stopSound: null;
|
||||
getState: undefined;
|
||||
loadTileset: LoadTilesetEvent;
|
||||
registerMenuCommand: MenuItemRegisterEvent;
|
||||
registerMenu: MenuRegisterEvent;
|
||||
unregisterMenu: UnregisterMenuEvent;
|
||||
setTiles: SetTilesEvent;
|
||||
modifyEmbeddedWebsite: Partial<EmbeddedWebsite>; // Note: name should be compulsory in fact
|
||||
};
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as tg from "generic-type-guard";
|
||||
import { isMenuItemRegisterEvent } from "./ui/MenuItemRegisterEvent";
|
||||
|
||||
export const isSetVariableEvent = new tg.IsInterface()
|
||||
.withProperties({
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
import * as tg from "generic-type-guard";
|
||||
import { Subject } from "rxjs";
|
||||
|
||||
export const isMenuItemRegisterEvent = new tg.IsInterface()
|
||||
.withProperties({
|
||||
menutItem: tg.isString,
|
||||
})
|
||||
.get();
|
||||
/**
|
||||
* A message sent from the iFrame to the game to add a new menu item.
|
||||
*/
|
||||
export type MenuItemRegisterEvent = tg.GuardedType<typeof isMenuItemRegisterEvent>;
|
||||
|
||||
export const isMenuItemRegisterIframeEvent = new tg.IsInterface()
|
||||
.withProperties({
|
||||
type: tg.isSingletonString("registerMenuCommand"),
|
||||
data: isMenuItemRegisterEvent,
|
||||
})
|
||||
.get();
|
||||
|
||||
const _registerMenuCommandStream: Subject<string> = new Subject();
|
||||
export const registerMenuCommandStream = _registerMenuCommandStream.asObservable();
|
||||
|
||||
export function handleMenuItemRegistrationEvent(event: MenuItemRegisterEvent) {
|
||||
_registerMenuCommandStream.next(event.menutItem);
|
||||
}
|
||||
31
front/src/Api/Events/ui/MenuRegisterEvent.ts
Normal file
31
front/src/Api/Events/ui/MenuRegisterEvent.ts
Normal file
@ -0,0 +1,31 @@
|
||||
import * as tg from "generic-type-guard";
|
||||
|
||||
/**
|
||||
* A message sent from a script to the game to remove a custom menu from the menu
|
||||
*/
|
||||
export const isUnregisterMenuEvent = new tg.IsInterface()
|
||||
.withProperties({
|
||||
name: tg.isString,
|
||||
})
|
||||
.get();
|
||||
|
||||
export type UnregisterMenuEvent = tg.GuardedType<typeof isUnregisterMenuEvent>;
|
||||
|
||||
export const isMenuRegisterOptions = new tg.IsInterface()
|
||||
.withProperties({
|
||||
allowApi: tg.isBoolean,
|
||||
})
|
||||
.get();
|
||||
|
||||
/**
|
||||
* A message sent from a script to the game to add a custom menu from the menu
|
||||
*/
|
||||
export const isMenuRegisterEvent = new tg.IsInterface()
|
||||
.withProperties({
|
||||
name: tg.isString,
|
||||
iframe: tg.isUnion(tg.isString, tg.isUndefined),
|
||||
options: isMenuRegisterOptions,
|
||||
})
|
||||
.get();
|
||||
|
||||
export type MenuRegisterEvent = tg.GuardedType<typeof isMenuRegisterEvent>;
|
||||
@ -29,11 +29,12 @@ import { isSetPropertyEvent, SetPropertyEvent } from "./Events/setPropertyEvent"
|
||||
import { isLayerEvent, LayerEvent } from "./Events/LayerEvent";
|
||||
import type { HasPlayerMovedEvent } from "./Events/HasPlayerMovedEvent";
|
||||
import { isLoadPageEvent } from "./Events/LoadPageEvent";
|
||||
import { handleMenuItemRegistrationEvent, isMenuItemRegisterIframeEvent } from "./Events/ui/MenuItemRegisterEvent";
|
||||
import { isMenuRegisterEvent, isUnregisterMenuEvent } from "./Events/ui/MenuRegisterEvent";
|
||||
import { SetTilesEvent, isSetTilesEvent } from "./Events/SetTilesEvent";
|
||||
import type { SetVariableEvent } from "./Events/SetVariableEvent";
|
||||
import { ModifyEmbeddedWebsiteEvent, isEmbeddedWebsiteEvent } from "./Events/EmbeddedWebsiteEvent";
|
||||
import { EmbeddedWebsite } from "./iframe/Room/EmbeddedWebsite";
|
||||
import { handleMenuRegistrationEvent, handleMenuUnregisterEvent } from "../Stores/MenuStore";
|
||||
|
||||
type AnswererCallback<T extends keyof IframeQueryMap> = (
|
||||
query: IframeQueryMap[T]["query"],
|
||||
@ -93,12 +94,6 @@ class IframeListener {
|
||||
private readonly _setPropertyStream: Subject<SetPropertyEvent> = new Subject();
|
||||
public readonly setPropertyStream = this._setPropertyStream.asObservable();
|
||||
|
||||
private readonly _registerMenuCommandStream: Subject<string> = new Subject();
|
||||
public readonly registerMenuCommandStream = this._registerMenuCommandStream.asObservable();
|
||||
|
||||
private readonly _unregisterMenuCommandStream: Subject<string> = new Subject();
|
||||
public readonly unregisterMenuCommandStream = this._unregisterMenuCommandStream.asObservable();
|
||||
|
||||
private readonly _playSoundStream: Subject<PlaySoundEvent> = new Subject();
|
||||
public readonly playSoundStream = this._playSoundStream.asObservable();
|
||||
|
||||
@ -260,17 +255,23 @@ class IframeListener {
|
||||
this._removeBubbleStream.next();
|
||||
} else if (payload.type == "onPlayerMove") {
|
||||
this.sendPlayerMove = true;
|
||||
} else if (isMenuItemRegisterIframeEvent(payload)) {
|
||||
const data = payload.data.menutItem;
|
||||
// @ts-ignore
|
||||
this.iframeCloseCallbacks.get(iframe).push(() => {
|
||||
this._unregisterMenuCommandStream.next(data);
|
||||
});
|
||||
handleMenuItemRegistrationEvent(payload.data);
|
||||
} else if (payload.type == "setTiles" && isSetTilesEvent(payload.data)) {
|
||||
this._setTilesStream.next(payload.data);
|
||||
} else if (payload.type == "modifyEmbeddedWebsite" && isEmbeddedWebsiteEvent(payload.data)) {
|
||||
this._modifyEmbeddedWebsiteStream.next(payload.data);
|
||||
} else if (payload.type == "registerMenu" && isMenuRegisterEvent(payload.data)) {
|
||||
const dataName = payload.data.name;
|
||||
this.iframeCloseCallbacks.get(iframe)?.push(() => {
|
||||
handleMenuUnregisterEvent(dataName);
|
||||
});
|
||||
handleMenuRegistrationEvent(
|
||||
payload.data.name,
|
||||
payload.data.iframe,
|
||||
foundSrc,
|
||||
payload.data.options
|
||||
);
|
||||
} else if (payload.type == "unregisterMenu" && isUnregisterMenuEvent(payload.data)) {
|
||||
handleMenuUnregisterEvent(payload.data.name);
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -293,7 +294,8 @@ class IframeListener {
|
||||
this.iframes.delete(iframe);
|
||||
}
|
||||
|
||||
registerScript(scriptUrl: string): void {
|
||||
registerScript(scriptUrl: string): Promise<void> {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
console.log("Loading map related script at ", scriptUrl);
|
||||
|
||||
if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") {
|
||||
@ -307,6 +309,10 @@ class IframeListener {
|
||||
iframe.sandbox.add("allow-scripts");
|
||||
iframe.sandbox.add("allow-top-navigation-by-user-activation");
|
||||
|
||||
iframe.addEventListener("load", () => {
|
||||
resolve();
|
||||
});
|
||||
|
||||
document.body.prepend(iframe);
|
||||
|
||||
this.scripts.set(scriptUrl, iframe);
|
||||
@ -339,11 +345,16 @@ class IframeListener {
|
||||
"</head>\n" +
|
||||
"</html>\n";
|
||||
|
||||
iframe.addEventListener("load", () => {
|
||||
resolve();
|
||||
});
|
||||
|
||||
document.body.prepend(iframe);
|
||||
|
||||
this.scripts.set(scriptUrl, iframe);
|
||||
this.registerIframe(iframe);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private getBaseUrl(src: string, source: MessageEventSource | null): string {
|
||||
|
||||
@ -7,32 +7,29 @@ import SoundConfig = Phaser.Types.Sound.SoundConfig;
|
||||
export class Sound {
|
||||
constructor(private url: string) {
|
||||
sendToWorkadventure({
|
||||
"type": 'loadSound',
|
||||
"data": {
|
||||
type: "loadSound",
|
||||
data: {
|
||||
url: this.url,
|
||||
} as LoadSoundEvent
|
||||
|
||||
} as LoadSoundEvent,
|
||||
});
|
||||
}
|
||||
|
||||
public play(config: SoundConfig) {
|
||||
public play(config: SoundConfig | undefined) {
|
||||
sendToWorkadventure({
|
||||
"type": 'playSound',
|
||||
"data": {
|
||||
type: "playSound",
|
||||
data: {
|
||||
url: this.url,
|
||||
config
|
||||
} as PlaySoundEvent
|
||||
|
||||
config,
|
||||
} as PlaySoundEvent,
|
||||
});
|
||||
return this.url;
|
||||
}
|
||||
public stop() {
|
||||
sendToWorkadventure({
|
||||
"type": 'stopSound',
|
||||
"data": {
|
||||
type: "stopSound",
|
||||
data: {
|
||||
url: this.url,
|
||||
} as StopSoundEvent
|
||||
|
||||
} as StopSoundEvent,
|
||||
});
|
||||
return this.url;
|
||||
}
|
||||
|
||||
17
front/src/Api/iframe/Ui/Menu.ts
Normal file
17
front/src/Api/iframe/Ui/Menu.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import { sendToWorkadventure } from "../IframeApiContribution";
|
||||
|
||||
export class Menu {
|
||||
constructor(private menuName: string) {}
|
||||
|
||||
/**
|
||||
* remove the menu
|
||||
*/
|
||||
public remove() {
|
||||
sendToWorkadventure({
|
||||
type: "unregisterMenu",
|
||||
data: {
|
||||
name: this.menuName,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -62,6 +62,10 @@ export class WorkadventureStateCommands extends IframeApiContribution<Workadvent
|
||||
return variables.get(key);
|
||||
}
|
||||
|
||||
hasVariable(key: string): boolean {
|
||||
return variables.has(key);
|
||||
}
|
||||
|
||||
onVariableChange(key: string): Observable<unknown> {
|
||||
let subject = variableSubscribers.get(key);
|
||||
if (subject === undefined) {
|
||||
@ -85,6 +89,12 @@ const proxyCommand = new Proxy(new WorkadventureStateCommands(), {
|
||||
target.saveVariable(p.toString(), value);
|
||||
return true;
|
||||
},
|
||||
has(target: WorkadventureStateCommands, p: PropertyKey): boolean {
|
||||
if (p in target) {
|
||||
return true;
|
||||
}
|
||||
return target.hasVariable(p.toString());
|
||||
},
|
||||
}) as WorkadventureStateCommands & { [key: string]: unknown };
|
||||
|
||||
export default proxyCommand;
|
||||
|
||||
@ -6,6 +6,8 @@ import type { ButtonClickedCallback, ButtonDescriptor } from "./Ui/ButtonDescrip
|
||||
import { Popup } from "./Ui/Popup";
|
||||
import { ActionMessage } from "./Ui/ActionMessage";
|
||||
import { isMessageReferenceEvent } from "../Events/ui/TriggerActionMessageEvent";
|
||||
import { Menu } from "./Ui/Menu";
|
||||
import type { RequireOnlyOne } from "../types";
|
||||
|
||||
let popupId = 0;
|
||||
const popups: Map<number, Popup> = new Map<number, Popup>();
|
||||
@ -14,9 +16,18 @@ const popupCallbacks: Map<number, Map<number, ButtonClickedCallback>> = new Map<
|
||||
Map<number, ButtonClickedCallback>
|
||||
>();
|
||||
|
||||
const menus: Map<string, Menu> = new Map<string, Menu>();
|
||||
const menuCallbacks: Map<string, (command: string) => void> = new Map();
|
||||
const actionMessages = new Map<string, ActionMessage>();
|
||||
|
||||
interface MenuDescriptor {
|
||||
callback?: (commandDescriptor: string) => void;
|
||||
iframe?: string;
|
||||
allowApi?: boolean;
|
||||
}
|
||||
|
||||
export type MenuOptions = RequireOnlyOne<MenuDescriptor, "callback" | "iframe">;
|
||||
|
||||
interface ZonedPopupOptions {
|
||||
zone: string;
|
||||
objectLayerName?: string;
|
||||
@ -52,6 +63,10 @@ export class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventure
|
||||
typeChecker: isMenuItemClickedEvent,
|
||||
callback: (event) => {
|
||||
const callback = menuCallbacks.get(event.menuItem);
|
||||
const menu = menus.get(event.menuItem);
|
||||
if (menu === undefined) {
|
||||
throw new Error('Could not find menu named "' + event.menuItem + '"');
|
||||
}
|
||||
if (callback) {
|
||||
callback(event.menuItem);
|
||||
}
|
||||
@ -104,14 +119,53 @@ export class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventure
|
||||
return popup;
|
||||
}
|
||||
|
||||
registerMenuCommand(commandDescriptor: string, callback: (commandDescriptor: string) => void) {
|
||||
menuCallbacks.set(commandDescriptor, callback);
|
||||
registerMenuCommand(commandDescriptor: string, options: MenuOptions | ((commandDescriptor: string) => void)): Menu {
|
||||
const menu = new Menu(commandDescriptor);
|
||||
|
||||
if (typeof options === "function") {
|
||||
menuCallbacks.set(commandDescriptor, options);
|
||||
sendToWorkadventure({
|
||||
type: "registerMenuCommand",
|
||||
type: "registerMenu",
|
||||
data: {
|
||||
menutItem: commandDescriptor,
|
||||
name: commandDescriptor,
|
||||
options: {
|
||||
allowApi: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
} else {
|
||||
options.allowApi = options.allowApi === undefined ? options.iframe !== undefined : options.allowApi;
|
||||
|
||||
if (options.iframe !== undefined) {
|
||||
sendToWorkadventure({
|
||||
type: "registerMenu",
|
||||
data: {
|
||||
name: commandDescriptor,
|
||||
iframe: options.iframe,
|
||||
options: {
|
||||
allowApi: options.allowApi,
|
||||
},
|
||||
},
|
||||
});
|
||||
} else if (options.callback !== undefined) {
|
||||
menuCallbacks.set(commandDescriptor, options.callback);
|
||||
sendToWorkadventure({
|
||||
type: "registerMenu",
|
||||
data: {
|
||||
name: commandDescriptor,
|
||||
options: {
|
||||
allowApi: options.allowApi,
|
||||
},
|
||||
},
|
||||
});
|
||||
} else {
|
||||
throw new Error(
|
||||
"When adding a menu with WA.ui.registerMenuCommand, you must pass either an iframe or a callback"
|
||||
);
|
||||
}
|
||||
}
|
||||
menus.set(commandDescriptor, menu);
|
||||
return menu;
|
||||
}
|
||||
|
||||
displayBubble(): void {
|
||||
|
||||
4
front/src/Api/types.ts
Normal file
4
front/src/Api/types.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export type RequireOnlyOne<T, keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, keys>> &
|
||||
{
|
||||
[K in keys]-?: Required<Pick<T, K>> & Partial<Record<Exclude<keys, K>, undefined>>;
|
||||
}[keys];
|
||||
@ -1,4 +1,6 @@
|
||||
<script lang="typescript">
|
||||
import MenuIcon from "./Menu/MenuIcon.svelte";
|
||||
import {menuIconVisiblilityStore, menuVisiblilityStore} from "../Stores/MenuStore";
|
||||
import {enableCameraSceneVisibilityStore} from "../Stores/MediaStore";
|
||||
import CameraControls from "./CameraControls.svelte";
|
||||
import MyCamera from "./MyCamera.svelte";
|
||||
@ -23,10 +25,9 @@
|
||||
import AudioPlaying from "./UI/AudioPlaying.svelte";
|
||||
import {soundPlayingStore} from "../Stores/SoundPlayingStore";
|
||||
import ErrorDialog from "./UI/ErrorDialog.svelte";
|
||||
import Menu from "./Menu/Menu.svelte";
|
||||
import VideoOverlay from "./Video/VideoOverlay.svelte";
|
||||
import {gameOverlayVisibilityStore} from "../Stores/GameOverlayStoreVisibility";
|
||||
import {consoleGlobalMessageManagerVisibleStore} from "../Stores/ConsoleGlobalMessageManagerStore";
|
||||
import ConsoleGlobalMessageManager from "./ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte";
|
||||
import AdminMessage from "./TypeMessage/BanMessage.svelte";
|
||||
import TextMessage from "./TypeMessage/TextMessage.svelte";
|
||||
import {banMessageVisibleStore} from "../Stores/TypeMessageStore/BanMessageStore";
|
||||
@ -37,6 +38,8 @@
|
||||
import LayoutManager from "./LayoutManager/LayoutManager.svelte";
|
||||
import {audioManagerVisibilityStore} from "../Stores/AudioManagerStore";
|
||||
import AudioManager from "./AudioManager/AudioManager.svelte"
|
||||
import { showReportScreenStore, userReportEmpty } from "../Stores/ShowReportScreenStore";
|
||||
import ReportMenu from "./ReportMenu/ReportMenu.svelte";
|
||||
|
||||
export let game: Game;
|
||||
|
||||
@ -93,6 +96,21 @@
|
||||
<LayoutManager></LayoutManager>
|
||||
</div>
|
||||
{/if}
|
||||
{#if $showReportScreenStore !== userReportEmpty}
|
||||
<div>
|
||||
<ReportMenu></ReportMenu>
|
||||
</div>
|
||||
{/if}
|
||||
{#if $menuIconVisiblilityStore}
|
||||
<div>
|
||||
<MenuIcon></MenuIcon>
|
||||
</div>
|
||||
{/if}
|
||||
{#if $menuVisiblilityStore}
|
||||
<div>
|
||||
<Menu></Menu>
|
||||
</div>
|
||||
{/if}
|
||||
{#if $gameOverlayVisibilityStore}
|
||||
<div>
|
||||
<VideoOverlay></VideoOverlay>
|
||||
@ -100,11 +118,6 @@
|
||||
<CameraControls></CameraControls>
|
||||
</div>
|
||||
{/if}
|
||||
{#if $consoleGlobalMessageManagerVisibleStore}
|
||||
<div>
|
||||
<ConsoleGlobalMessageManager game={game}></ConsoleGlobalMessageManager>
|
||||
</div>
|
||||
{/if}
|
||||
{#if $helpCameraSettingsVisibleStore}
|
||||
<div>
|
||||
<HelpCameraSettingsPopup></HelpCameraSettingsPopup>
|
||||
|
||||
@ -1,152 +0,0 @@
|
||||
<script lang="typescript">
|
||||
import { fly } from 'svelte/transition';
|
||||
import InputTextGlobalMessage from "./InputTextGlobalMessage.svelte";
|
||||
import UploadAudioGlobalMessage from "./UploadAudioGlobalMessage.svelte";
|
||||
import { gameManager } from "../../Phaser/Game/GameManager";
|
||||
import type { Game } from "../../Phaser/Game/Game";
|
||||
import { consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
|
||||
|
||||
export let game: Game;
|
||||
let inputSendTextActive = true;
|
||||
let uploadMusicActive = false;
|
||||
let handleSendText: { sendTextMessage(broadcast: boolean): void };
|
||||
let handleSendAudio: { sendAudioMessage(broadcast: boolean): Promise<void> };
|
||||
let broadcastToWorld = false;
|
||||
|
||||
function closeConsoleGlobalMessage() {
|
||||
consoleGlobalMessageManagerVisibleStore.set(false)
|
||||
}
|
||||
|
||||
function onKeyDown(e:KeyboardEvent) {
|
||||
if (e.key === 'Escape') {
|
||||
closeConsoleGlobalMessage();
|
||||
}
|
||||
}
|
||||
|
||||
function inputSendTextActivate() {
|
||||
inputSendTextActive = true;
|
||||
uploadMusicActive = false;
|
||||
}
|
||||
|
||||
function inputUploadMusicActivate() {
|
||||
uploadMusicActive = true;
|
||||
inputSendTextActive = false;
|
||||
}
|
||||
|
||||
function send() {
|
||||
if (inputSendTextActive) {
|
||||
handleSendText.sendTextMessage(broadcastToWorld);
|
||||
}
|
||||
if (uploadMusicActive) {
|
||||
handleSendAudio.sendAudioMessage(broadcastToWorld);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={onKeyDown}/>
|
||||
|
||||
<div class="console-global-message">
|
||||
<div class="menu-console-global-message nes-container is-rounded" transition:fly="{{ x: -1000, duration: 500 }}">
|
||||
<button type="button" class="nes-btn {inputSendTextActive ? 'is-disabled' : ''}" on:click|preventDefault={inputSendTextActivate}>Message</button>
|
||||
<button type="button" class="nes-btn {uploadMusicActive ? 'is-disabled' : ''}" on:click|preventDefault={inputUploadMusicActivate}>Audio</button>
|
||||
</div>
|
||||
<div class="main-console-global-message nes-container is-rounded" transition:fly="{{ y: -1000, duration: 500 }}">
|
||||
<div class="title-console-global-message">
|
||||
<h2>Global Message</h2>
|
||||
<button type="button" class="nes-btn is-error" on:click|preventDefault={closeConsoleGlobalMessage}><i class="nes-icon close is-small"></i></button>
|
||||
</div>
|
||||
<div class="content-console-global-message">
|
||||
{#if inputSendTextActive}
|
||||
<InputTextGlobalMessage game={game} gameManager={gameManager} bind:handleSending={handleSendText}/>
|
||||
{/if}
|
||||
{#if uploadMusicActive}
|
||||
<UploadAudioGlobalMessage game={game} gameManager={gameManager} bind:handleSending={handleSendAudio}/>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="footer-console-global-message">
|
||||
<label>
|
||||
<input type="checkbox" class="nes-checkbox is-dark nes-pointer" bind:checked={broadcastToWorld}>
|
||||
<span>Broadcast to all rooms of the world</span>
|
||||
</label>
|
||||
<button class="nes-btn is-primary" on:click|preventDefault={send}>Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.nes-container {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
div.console-global-message {
|
||||
top: 20vh;
|
||||
width: 50vw;
|
||||
height: 50vh;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 0;
|
||||
|
||||
pointer-events: auto;
|
||||
|
||||
div.menu-console-global-message {
|
||||
flex: 1 1 auto;
|
||||
max-width: 180px;
|
||||
|
||||
text-align: center;
|
||||
background-color: #333333;
|
||||
|
||||
button {
|
||||
width: 136px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
div.main-console-global-message {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background-color: #333333;
|
||||
|
||||
div.title-console-global-message {
|
||||
flex: 0 0 auto;
|
||||
height: 50px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
text-align: center;
|
||||
color: whitesmoke;
|
||||
|
||||
.nes-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
div.content-console-global-message {
|
||||
flex: 1 1 auto;
|
||||
max-height: calc(100% - 120px);
|
||||
}
|
||||
|
||||
div.footer-console-global-message {
|
||||
height: 50px;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
max-width: 30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
147
front/src/Components/Menu/AboutRoomSubMenu.svelte
Normal file
147
front/src/Components/Menu/AboutRoomSubMenu.svelte
Normal file
@ -0,0 +1,147 @@
|
||||
<script lang="ts">
|
||||
import { gameManager } from "../../Phaser/Game/GameManager";
|
||||
import {onMount} from "svelte";
|
||||
|
||||
let gameScene = gameManager.getCurrentGameScene();
|
||||
|
||||
let HTMLShareLink: HTMLInputElement;
|
||||
let expandedMapCopyright = false;
|
||||
let expandedTilesetCopyright = false;
|
||||
|
||||
let mapName: string = "";
|
||||
let mapDescription: string = "";
|
||||
let mapCopyright: string = "The map creator did not declare a copyright for the map.";
|
||||
let tilesetCopyright: string[] = [];
|
||||
|
||||
onMount(() => {
|
||||
if (gameScene.mapFile.properties !== undefined) {
|
||||
const propertyName = gameScene.mapFile.properties.find((property) => property.name === 'mapName')
|
||||
if ( propertyName !== undefined && typeof propertyName.value === 'string') {
|
||||
mapName = propertyName.value;
|
||||
}
|
||||
const propertyDescription = gameScene.mapFile.properties.find((property) => property.name === 'mapDescription')
|
||||
if (propertyDescription !== undefined && typeof propertyDescription.value === 'string') {
|
||||
mapDescription = propertyDescription.value;
|
||||
}
|
||||
const propertyCopyright = gameScene.mapFile.properties.find((property) => property.name === 'mapCopyright')
|
||||
if (propertyCopyright !== undefined && typeof propertyCopyright.value === 'string') {
|
||||
mapCopyright = propertyCopyright.value;
|
||||
}
|
||||
}
|
||||
|
||||
for (const tileset of gameScene.mapFile.tilesets) {
|
||||
if (tileset.properties !== undefined) {
|
||||
const propertyTilesetCopyright = tileset.properties.find((property) => property.name === 'tilesetCopyright')
|
||||
if (propertyTilesetCopyright !== undefined && typeof propertyTilesetCopyright.value === 'string') {
|
||||
tilesetCopyright = [...tilesetCopyright, propertyTilesetCopyright.value]; //Assignment needed to trigger Svelte's reactivity
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function copyLink() {
|
||||
HTMLShareLink.select();
|
||||
document.execCommand('copy');
|
||||
}
|
||||
|
||||
async function shareLink() {
|
||||
const shareData = {url: location.toString()};
|
||||
|
||||
try {
|
||||
await navigator.share(shareData);
|
||||
} catch (err) {
|
||||
console.error('Error: ' + err);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="about-room-main">
|
||||
<section class="share-url not-mobile">
|
||||
<h3>Share the link of the room !</h3>
|
||||
<input type="text" readonly bind:this={HTMLShareLink} value={location.toString()}>
|
||||
<button type="button" class="nes-btn is-primary" on:click={copyLink}>Copy</button>
|
||||
</section>
|
||||
<section class="is-mobile">
|
||||
<h3>Share the link of the room !</h3>
|
||||
<button type="button" class="nes-btn is-primary" on:click={shareLink}>Share</button>
|
||||
</section>
|
||||
<h2>Information on the map</h2>
|
||||
<section class="container-overflow">
|
||||
<h3>{mapName}</h3>
|
||||
<p class="string-HTML">{mapDescription}</p>
|
||||
<h3 class="nes-pointer hoverable" on:click={() => expandedMapCopyright = !expandedMapCopyright}>Copyrights of the map</h3>
|
||||
<p class="string-HTML" hidden="{!expandedMapCopyright}">{mapCopyright}</p>
|
||||
<h3 class="nes-pointer hoverable" on:click={() => expandedTilesetCopyright = !expandedTilesetCopyright}>Copyrights of the tilesets</h3>
|
||||
<section hidden="{!expandedTilesetCopyright}">
|
||||
{#each tilesetCopyright as copyright}
|
||||
<p class="string-HTML">{copyright}</p>
|
||||
{:else}
|
||||
<p>The map creator did not declare a copyright for the tilesets. Warning, This doesn't mean that those tilesets have no license.</p>
|
||||
{/each}
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.string-HTML{
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
div.about-room-main {
|
||||
height: calc(100% - 56px);
|
||||
|
||||
section.share-url {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
input {
|
||||
width: 85%;
|
||||
border-radius: 32px;
|
||||
padding: 3px;
|
||||
}
|
||||
input::selection {
|
||||
background-color: #209cee;
|
||||
}
|
||||
}
|
||||
|
||||
section.is-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h3.hoverable:hover {
|
||||
background-color: #3c3e40;
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
section.container-overflow {
|
||||
height: calc(100% - 220px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px), only screen and (max-height: 800px) {
|
||||
div.about-room-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);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { HtmlUtils } from "../../WebRtc/HtmlUtils";
|
||||
import type { Game } from "../../Phaser/Game/Game";
|
||||
import type { GameManager } from "../../Phaser/Game/GameManager";
|
||||
import { consoleGlobalMessageManagerFocusStore, consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
|
||||
import { gameManager } from "../../Phaser/Game/GameManager";
|
||||
import { AdminMessageEventTypes } from "../../Connexion/AdminMessagesService";
|
||||
import uploadFile from "../images/music-file.svg";
|
||||
import type { PlayGlobalMessageInterface } from "../../Connexion/ConnexionModels";
|
||||
@ -11,10 +9,7 @@
|
||||
files: Array<File>;
|
||||
}
|
||||
|
||||
export let game: Game;
|
||||
export let gameManager: GameManager;
|
||||
|
||||
let gameScene = gameManager.getCurrentGameScene(game.findAnyScene());
|
||||
let gameScene = gameManager.getCurrentGameScene();
|
||||
let fileInput: HTMLInputElement;
|
||||
let fileName: string;
|
||||
let fileSize: string;
|
||||
@ -45,7 +40,6 @@
|
||||
}
|
||||
inputAudio.value = '';
|
||||
gameScene.connection?.emitGlobalMessage(audioGlobalMessage);
|
||||
disableConsole();
|
||||
}
|
||||
}
|
||||
|
||||
@ -76,11 +70,6 @@
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
function disableConsole() {
|
||||
consoleGlobalMessageManagerVisibleStore.set(false);
|
||||
consoleGlobalMessageManagerFocusStore.set(false);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -105,24 +94,17 @@
|
||||
|
||||
img {
|
||||
flex: 1 1 auto;
|
||||
|
||||
max-height: 80%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
flex: 1 1 auto;
|
||||
|
||||
margin-bottom: 5px;
|
||||
|
||||
color: whitesmoke;
|
||||
font-size: 1rem;
|
||||
|
||||
&.err {
|
||||
color: #ce372b;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
15
front/src/Components/Menu/ContactSubMenu.svelte
Normal file
15
front/src/Components/Menu/ContactSubMenu.svelte
Normal file
@ -0,0 +1,15 @@
|
||||
<script lang="ts">
|
||||
import {CONTACT_URL} from "../../Enum/EnvironmentVariable";
|
||||
|
||||
</script>
|
||||
|
||||
<iframe title="contact" src="{CONTACT_URL}"></iframe>
|
||||
|
||||
<style lang="scss">
|
||||
iframe {
|
||||
border: none;
|
||||
height: calc(100% - 56px);
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
51
front/src/Components/Menu/CreateMapSubMenu.svelte
Normal file
51
front/src/Components/Menu/CreateMapSubMenu.svelte
Normal file
@ -0,0 +1,51 @@
|
||||
<script lang="ts">
|
||||
|
||||
function goToGettingStarted() {
|
||||
const sparkHost = "https://workadventu.re/getting-started";
|
||||
window.open(sparkHost, "_blank");
|
||||
}
|
||||
|
||||
function goToBuildingMap() {
|
||||
const sparkHost = "https://workadventu.re/map-building";
|
||||
window.open(sparkHost, "_blank");
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="create-map-main">
|
||||
<section class="container-overflow">
|
||||
<section>
|
||||
<h3>Getting started</h3>
|
||||
<p>
|
||||
WorkAdventure allows you to create an online space to communicate spontaneously with others.
|
||||
And it all starts with creating your own space. Choose from a large selection of prefabricated maps by our team.
|
||||
</p>
|
||||
<button type="button" class="nes-btn is-primary" on:click={goToGettingStarted}>Getting started</button>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Create your map</h3>
|
||||
<p>You can also create your own custom map by following the step of the documentation.</p>
|
||||
<button type="button" class="nes-btn" on:click={goToBuildingMap}>Create your map</button>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
div.create-map-main {
|
||||
height: calc(100% - 56px);
|
||||
|
||||
text-align: center;
|
||||
|
||||
section {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
section.container-overflow {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
33
front/src/Components/Menu/CustomSubMenu.svelte
Normal file
33
front/src/Components/Menu/CustomSubMenu.svelte
Normal file
@ -0,0 +1,33 @@
|
||||
<script lang="ts">
|
||||
import {onDestroy, onMount} from "svelte";
|
||||
import {iframeListener} from "../../Api/IframeListener";
|
||||
|
||||
export let url: string;
|
||||
export let allowApi: boolean;
|
||||
|
||||
let HTMLIframe: HTMLIFrameElement;
|
||||
|
||||
onMount( () => {
|
||||
if (allowApi) {
|
||||
iframeListener.registerIframe(HTMLIframe);
|
||||
}
|
||||
})
|
||||
|
||||
onDestroy( () => {
|
||||
if (allowApi) {
|
||||
iframeListener.unregisterIframe(HTMLIframe);
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<iframe title="customSubMenu" src="{url}" bind:this={HTMLIframe}></iframe>
|
||||
|
||||
<style lang="scss">
|
||||
iframe {
|
||||
border: none;
|
||||
height: calc(100% - 56px);
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
118
front/src/Components/Menu/GlobalMessagesSubMenu.svelte
Normal file
118
front/src/Components/Menu/GlobalMessagesSubMenu.svelte
Normal file
@ -0,0 +1,118 @@
|
||||
<script lang="ts">
|
||||
import TextGlobalMessage from './TextGlobalMessage.svelte';
|
||||
import AudioGlobalMessage from './AudioGlobalMessage.svelte';
|
||||
|
||||
let handleSendText: { sendTextMessage(broadcast: boolean): void };
|
||||
let handleSendAudio: { sendAudioMessage(broadcast: boolean): Promise<void> };
|
||||
|
||||
let inputSendTextActive = true;
|
||||
let uploadAudioActive = !inputSendTextActive;
|
||||
let broadcastToWorld = false;
|
||||
|
||||
function activateInputText() {
|
||||
inputSendTextActive = true;
|
||||
uploadAudioActive = false;
|
||||
}
|
||||
|
||||
function activateUploadAudio() {
|
||||
inputSendTextActive = false;
|
||||
uploadAudioActive = true;
|
||||
}
|
||||
|
||||
function send() {
|
||||
if (inputSendTextActive) {
|
||||
handleSendText.sendTextMessage(broadcastToWorld);
|
||||
}
|
||||
if (uploadAudioActive) {
|
||||
handleSendAudio.sendAudioMessage(broadcastToWorld);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="global-message-main">
|
||||
<div class="global-message-subOptions">
|
||||
<section>
|
||||
<button type="button" class="nes-btn {inputSendTextActive ? 'is-disabled' : ''}" on:click|preventDefault={activateInputText}>Text</button>
|
||||
</section>
|
||||
<section>
|
||||
<button type="button" class="nes-btn {uploadAudioActive ? 'is-disabled' : ''}" on:click|preventDefault={activateUploadAudio}>Audio</button>
|
||||
</section>
|
||||
</div>
|
||||
<div class="global-message-content">
|
||||
{#if inputSendTextActive}
|
||||
<TextGlobalMessage bind:handleSending={handleSendText}/>
|
||||
{/if}
|
||||
{#if uploadAudioActive}
|
||||
<AudioGlobalMessage bind:handleSending={handleSendAudio}/>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="global-message-footer">
|
||||
<label>
|
||||
<input type="checkbox" class="nes-checkbox is-dark nes-pointer" bind:checked={broadcastToWorld}>
|
||||
<span>Broadcast to all rooms of the world</span>
|
||||
</label>
|
||||
<section>
|
||||
<button class="nes-btn is-primary" on:click|preventDefault={send}>Send</button>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
div.global-message-main {
|
||||
height: calc(100% - 50px);
|
||||
display: grid;
|
||||
grid-template-rows: 15% 65% 20%;
|
||||
|
||||
div.global-message-subOptions {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
margin-bottom: 20px;
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
div.global-message-footer {
|
||||
margin-bottom: 10px;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: 50% 50%;
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-family: "Press Start 2P";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px), only screen and (max-height: 800px) {
|
||||
.global-message-content {
|
||||
height: calc(100% - 5px);
|
||||
}
|
||||
.global-message-footer {
|
||||
margin-bottom: 0;
|
||||
|
||||
label {
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
154
front/src/Components/Menu/Menu.svelte
Normal file
154
front/src/Components/Menu/Menu.svelte
Normal file
@ -0,0 +1,154 @@
|
||||
<script lang="typescript">
|
||||
import {fly} from "svelte/transition";
|
||||
import SettingsSubMenu from "./SettingsSubMenu.svelte";
|
||||
import ProfileSubMenu from "./ProfileSubMenu.svelte";
|
||||
import CreateMapSubMenu from "./CreateMapSubMenu.svelte";
|
||||
import AboutRoomSubMenu from "./AboutRoomSubMenu.svelte";
|
||||
import GlobalMessageSubMenu from "./GlobalMessagesSubMenu.svelte";
|
||||
import ContactSubMenu from "./ContactSubMenu.svelte";
|
||||
import CustomSubMenu from "./CustomSubMenu.svelte"
|
||||
import {customMenuIframe, menuVisiblilityStore, SubMenusInterface, subMenusStore} from "../../Stores/MenuStore";
|
||||
import {onDestroy, onMount} from "svelte";
|
||||
import {get} from "svelte/store";
|
||||
import type {Unsubscriber} from "svelte/store";
|
||||
import {sendMenuClickedEvent} from "../../Api/iframe/Ui/MenuItem";
|
||||
|
||||
let activeSubMenu: string = SubMenusInterface.settings;
|
||||
let activeComponent: typeof SettingsSubMenu | typeof CustomSubMenu = SettingsSubMenu;
|
||||
let props: { url: string, allowApi: boolean };
|
||||
let unsubscriberSubMenuStore: Unsubscriber;
|
||||
|
||||
onMount(() => {
|
||||
unsubscriberSubMenuStore = subMenusStore.subscribe(() => {
|
||||
if(!get(subMenusStore).includes(activeSubMenu)) {
|
||||
switchMenu(SubMenusInterface.settings);
|
||||
}
|
||||
})
|
||||
|
||||
switchMenu(SubMenusInterface.settings);
|
||||
})
|
||||
|
||||
onDestroy(() => {
|
||||
if(unsubscriberSubMenuStore) {
|
||||
unsubscriberSubMenuStore();
|
||||
}
|
||||
})
|
||||
|
||||
function switchMenu(menu: string) {
|
||||
if (get(subMenusStore).find((subMenu) => subMenu === menu)) {
|
||||
activeSubMenu = menu;
|
||||
switch (menu) {
|
||||
case SubMenusInterface.settings:
|
||||
activeComponent = SettingsSubMenu;
|
||||
break;
|
||||
case SubMenusInterface.profile:
|
||||
activeComponent = ProfileSubMenu;
|
||||
break;
|
||||
case SubMenusInterface.createMap:
|
||||
activeComponent = CreateMapSubMenu;
|
||||
break;
|
||||
case SubMenusInterface.aboutRoom:
|
||||
activeComponent = AboutRoomSubMenu;
|
||||
break;
|
||||
case SubMenusInterface.globalMessages:
|
||||
activeComponent = GlobalMessageSubMenu;
|
||||
break;
|
||||
case SubMenusInterface.contact:
|
||||
activeComponent = ContactSubMenu;
|
||||
break;
|
||||
default:
|
||||
const customMenu = customMenuIframe.get(menu);
|
||||
if (customMenu !== undefined) {
|
||||
props = { url: customMenu.url, allowApi: customMenu.allowApi };
|
||||
activeComponent = CustomSubMenu;
|
||||
} else {
|
||||
sendMenuClickedEvent(menu);
|
||||
menuVisiblilityStore.set(false);
|
||||
}
|
||||
break;
|
||||
}
|
||||
} else throw ("There is no menu called " + menu);
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
menuVisiblilityStore.set(false);
|
||||
}
|
||||
function onKeyDown(e:KeyboardEvent) {
|
||||
if (e.key === 'Escape') {
|
||||
closeMenu();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={onKeyDown}/>
|
||||
|
||||
|
||||
<div class="menu-container-main">
|
||||
<div class="menu-nav-sidebar nes-container is-rounded" transition:fly="{{ x: -1000, duration: 500 }}">
|
||||
<h2>Menu</h2>
|
||||
<nav>
|
||||
{#each $subMenusStore as submenu}
|
||||
<button type="button" class="nes-btn {activeSubMenu === submenu ? 'is-disabled' : ''}" on:click|preventDefault={() => switchMenu(submenu)}>
|
||||
{submenu}
|
||||
</button>
|
||||
{/each}
|
||||
</nav>
|
||||
</div>
|
||||
<div class="menu-submenu-container nes-container is-rounded" transition:fly="{{ y: -1000, duration: 500 }}">
|
||||
<h2>{activeSubMenu}</h2>
|
||||
<svelte:component this={activeComponent} {...props}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.nes-container {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
div.menu-container-main {
|
||||
--size-first-columns-grid: 200px;
|
||||
|
||||
font-family: "Press Start 2P";
|
||||
pointer-events: auto;
|
||||
height: 80vh;
|
||||
width: 75vw;
|
||||
top: 10vh;
|
||||
|
||||
position: relative;
|
||||
margin: auto;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: var(--size-first-columns-grid) calc(100% - var(--size-first-columns-grid));
|
||||
grid-template-rows: 100%;
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
div.menu-nav-sidebar {
|
||||
background-color: #333333;
|
||||
color: whitesmoke;
|
||||
|
||||
nav button {
|
||||
width: calc(100% - 10px);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
div.menu-submenu-container {
|
||||
background-color: #333333;
|
||||
color: whitesmoke;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
div.menu-container-main {
|
||||
--size-first-columns-grid: 120px;
|
||||
height: 70vh;
|
||||
top: 55px;
|
||||
width: 100vw;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,33 +1,40 @@
|
||||
<script lang="typescript">
|
||||
import logoWA from "../images/logo-WA-min.png"
|
||||
import {menuVisiblilityStore} from "../../Stores/MenuStore";
|
||||
import {get} from "svelte/store";
|
||||
|
||||
function showMenu(){
|
||||
menuVisiblilityStore.set(!get(menuVisiblilityStore))
|
||||
}
|
||||
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === "Tab") {
|
||||
showMenu();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={onKeyDown}/>
|
||||
|
||||
<main class="menuIcon">
|
||||
<section>
|
||||
<button>
|
||||
<img src="/static/images/menu.svg" alt="Open menu">
|
||||
</button>
|
||||
</section>
|
||||
<img src={logoWA} alt="open menu" class="nes-pointer" on:click|preventDefault={showMenu}>
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
.menuIcon button {
|
||||
background-color: black;
|
||||
color: white;
|
||||
border-radius: 7px;
|
||||
padding: 2px 8px;
|
||||
.menuIcon {
|
||||
pointer-events: auto;
|
||||
margin: 25px;
|
||||
img {
|
||||
width: 14px;
|
||||
width: 60px;
|
||||
padding-top: 0;
|
||||
/*cursor: url('/resources/logos/cursor_pointer.png'), pointer;*/
|
||||
}
|
||||
}
|
||||
.menuIcon section {
|
||||
margin: 10px;
|
||||
@media only screen and (max-width: 800px), only screen and (max-height: 800px) {
|
||||
.menuIcon {
|
||||
margin: 3px;
|
||||
img {
|
||||
width: 50px;
|
||||
}
|
||||
@media only screen and (max-height: 700px) {
|
||||
.menuIcon section {
|
||||
margin: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
78
front/src/Components/Menu/ProfileSubMenu.svelte
Normal file
78
front/src/Components/Menu/ProfileSubMenu.svelte
Normal file
@ -0,0 +1,78 @@
|
||||
<script lang="typescript">
|
||||
import {gameManager} from "../../Phaser/Game/GameManager";
|
||||
import {SelectCompanionScene, SelectCompanionSceneName} from "../../Phaser/Login/SelectCompanionScene";
|
||||
import {menuIconVisiblilityStore, menuVisiblilityStore} from "../../Stores/MenuStore";
|
||||
import {selectCompanionSceneVisibleStore} from "../../Stores/SelectCompanionStore";
|
||||
import {LoginScene, LoginSceneName} from "../../Phaser/Login/LoginScene";
|
||||
import {loginSceneVisibleStore} from "../../Stores/LoginSceneStore";
|
||||
import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
|
||||
import {SelectCharacterScene, SelectCharacterSceneName} from "../../Phaser/Login/SelectCharacterScene";
|
||||
//import {connectionManager} from "../../Connexion/ConnectionManager";
|
||||
|
||||
|
||||
function disableMenuStores(){
|
||||
menuVisiblilityStore.set(false);
|
||||
menuIconVisiblilityStore.set(false);
|
||||
}
|
||||
|
||||
function openEditCompanionScene(){
|
||||
disableMenuStores();
|
||||
selectCompanionSceneVisibleStore.set(true);
|
||||
gameManager.leaveGame(SelectCompanionSceneName,new SelectCompanionScene());
|
||||
}
|
||||
|
||||
function openEditNameScene(){
|
||||
disableMenuStores();
|
||||
loginSceneVisibleStore.set(true);
|
||||
gameManager.leaveGame(LoginSceneName,new LoginScene());
|
||||
}
|
||||
|
||||
function openEditSkinScene(){
|
||||
disableMenuStores();
|
||||
selectCharacterSceneVisibleStore.set(true);
|
||||
gameManager.leaveGame(SelectCharacterSceneName,new SelectCharacterScene());
|
||||
}
|
||||
|
||||
//TODO: Uncomment when login will be completely developed
|
||||
/*function clickLogin() {
|
||||
connectionManager.loadOpenIDScreen();
|
||||
}*/
|
||||
|
||||
</script>
|
||||
|
||||
<div class="customize-main">
|
||||
<section>
|
||||
<button type="button" class="nes-btn" on:click|preventDefault={openEditNameScene}>Edit Name</button>
|
||||
</section>
|
||||
<section>
|
||||
<button type="button" class="nes-btn is-rounded" on:click|preventDefault={openEditSkinScene}>Edit Skin</button>
|
||||
</section>
|
||||
<section>
|
||||
<button type="button" class="nes-btn" on:click|preventDefault={openEditCompanionScene}>Edit Companion</button>
|
||||
</section>
|
||||
<!-- <section>
|
||||
<button type="button" class="nes-btn is-primary" on:click|preventDefault={clickLogin}>Login</button>
|
||||
</section>-->
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
div.customize-main{
|
||||
section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
button {
|
||||
height: 50px;
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
div.customize-main section button {
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
140
front/src/Components/Menu/SettingsSubMenu.svelte
Normal file
140
front/src/Components/Menu/SettingsSubMenu.svelte
Normal file
@ -0,0 +1,140 @@
|
||||
<script lang="typescript">
|
||||
import {localUserStore} from "../../Connexion/LocalUserStore";
|
||||
import {videoConstraintStore} from "../../Stores/MediaStore";
|
||||
import {HtmlUtils} from "../../WebRtc/HtmlUtils";
|
||||
import {isMobile} from "../../Enum/EnvironmentVariable";
|
||||
|
||||
let fullscreen : boolean = localUserStore.getFullscreen();
|
||||
let notification : boolean = localUserStore.getNotification() === 'granted';
|
||||
let valueGame : number = localUserStore.getGameQualityValue();
|
||||
let valueVideo : number = localUserStore.getVideoQualityValue();
|
||||
let previewValueGame = valueGame;
|
||||
let previewValueVideo = valueVideo;
|
||||
|
||||
function saveSetting(){
|
||||
if (valueGame !== previewValueGame) {
|
||||
previewValueGame = valueGame;
|
||||
localUserStore.setGameQualityValue(valueGame);
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
if (valueVideo !== previewValueVideo) {
|
||||
previewValueVideo = valueVideo;
|
||||
videoConstraintStore.setFrameRate(valueVideo);
|
||||
}
|
||||
}
|
||||
|
||||
function changeFullscreen() {
|
||||
const body = HtmlUtils.querySelectorOrFail('body');
|
||||
if (body) {
|
||||
if (document.fullscreenElement !== null && !fullscreen) {
|
||||
document.exitFullscreen()
|
||||
} else {
|
||||
body.requestFullscreen();
|
||||
}
|
||||
localUserStore.setFullscreen(fullscreen);
|
||||
}
|
||||
}
|
||||
|
||||
function changeNotification() {
|
||||
if (Notification.permission === 'granted') {
|
||||
localUserStore.setNotification(notification ? 'granted' : 'denied');
|
||||
} else {
|
||||
Notification.requestPermission().then((response) => {
|
||||
if (response === 'granted') {
|
||||
localUserStore.setNotification(notification ? 'granted' : 'denied');
|
||||
} else {
|
||||
localUserStore.setNotification('denied');
|
||||
notification = false;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="settings-main" on:submit|preventDefault={saveSetting}>
|
||||
<section>
|
||||
<h3>Game quality</h3>
|
||||
<div class="nes-select is-dark">
|
||||
<select bind:value={valueGame}>
|
||||
<option value="{120}">{isMobile() ? 'High (120 fps)' : 'High video quality (120 fps)'}</option>
|
||||
<option value="{60}">{isMobile() ? 'Medium (60 fps)' : 'Medium video quality (60 fps, recommended)'}</option>
|
||||
<option value="{40}">{isMobile() ? 'Minimum (40 fps)' : 'Minimum video quality (40 fps)'}</option>
|
||||
<option value="{20}">{isMobile() ? 'Small (20 fps)' : 'Small video quality (20 fps)'}</option>
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Video quality</h3>
|
||||
<div class="nes-select is-dark">
|
||||
<select bind:value={valueVideo}>
|
||||
<option value="{30}">{isMobile() ? 'High (30 fps)' : 'High video quality (30 fps)'}</option>
|
||||
<option value="{20}">{isMobile() ? 'Medium (20 fps)' : 'Medium video quality (20 fps, recommended)'}</option>
|
||||
<option value="{10}">{isMobile() ? 'Minimum (10 fps)' : 'Minimum video quality (10 fps)'}</option>
|
||||
<option value="{5}">{isMobile() ? 'Small (5 fps)' : 'Small video quality (5 fps)'}</option>
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
<section class="settings-section-save">
|
||||
<p>(Saving these settings will restart the game)</p>
|
||||
<button type="button" class="nes-btn is-primary" on:click|preventDefault={saveSetting}>Save</button>
|
||||
</section>
|
||||
<section class="settings-section-noSaveOption">
|
||||
<label>
|
||||
<input type="checkbox" class="nes-checkbox is-dark" bind:checked={fullscreen} on:change={changeFullscreen}/>
|
||||
<span>Fullscreen</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" class="nes-checkbox is-dark" bind:checked={notification} on:change={changeNotification}>
|
||||
<span>Notifications</span>
|
||||
</label>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
div.settings-main {
|
||||
height: calc(100% - 40px);
|
||||
|
||||
section {
|
||||
width: 100%;
|
||||
padding: 20px 20px 0;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
|
||||
div.nes-select select:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
section.settings-section-save {
|
||||
text-align: center;
|
||||
p {
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
section.settings-section-noSaveOption {
|
||||
--nb-noSaveOptions: 2; //number of sub-element in the section
|
||||
display: grid;
|
||||
grid-template-columns: calc(100% / var(--nb-noSaveOptions)) calc(100% / var(--nb-noSaveOptions)); //Same size for every sub-element
|
||||
|
||||
label {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px), only screen and (max-height: 800px) {
|
||||
div.settings-main {
|
||||
section {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section.settings-section-noSaveOption {
|
||||
height: 80px;
|
||||
grid-template-columns: none;
|
||||
grid-template-rows: calc(100% / var(--nb-noSaveOptions)) calc(100% / var(--nb-noSaveOptions)); //Same size for every sub-element;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { consoleGlobalMessageManagerFocusStore, consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
|
||||
import { menuInputFocusStore } from "../../Stores/MenuStore";
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
import type { Game } from "../../Phaser/Game/Game";
|
||||
import type { GameManager } from "../../Phaser/Game/GameManager";
|
||||
import { gameManager } from "../../Phaser/Game/GameManager";
|
||||
import { AdminMessageEventTypes } from "../../Connexion/AdminMessagesService";
|
||||
import type { Quill } from "quill";
|
||||
import type { PlayGlobalMessageInterface } from "../../Connexion/ConnexionModels";
|
||||
@ -25,20 +24,15 @@
|
||||
[{'font': []}],
|
||||
[{'align': []}],
|
||||
|
||||
['clean'],
|
||||
['clean'], // remove formatting button
|
||||
|
||||
['link', 'image', 'video']
|
||||
// remove formatting button
|
||||
];
|
||||
|
||||
export let game: Game;
|
||||
export let gameManager: GameManager;
|
||||
|
||||
const gameScene = gameManager.getCurrentGameScene(game.findAnyScene());
|
||||
let quill: Quill;
|
||||
let INPUT_CONSOLE_MESSAGE: HTMLDivElement;
|
||||
|
||||
const gameScene = gameManager.getCurrentGameScene();
|
||||
const MESSAGE_TYPE = AdminMessageEventTypes.admin;
|
||||
let quill: Quill;
|
||||
let QUILL_EDITOR: HTMLDivElement;
|
||||
|
||||
export const handleSending = {
|
||||
sendTextMessage(broadcastToWorld: boolean) {
|
||||
@ -55,39 +49,31 @@
|
||||
|
||||
quill.deleteText(0, quill.getLength());
|
||||
gameScene.connection?.emitGlobalMessage(textGlobalMessage);
|
||||
disableConsole();
|
||||
}
|
||||
}
|
||||
|
||||
//Quill
|
||||
onMount(async () => {
|
||||
|
||||
// Import quill
|
||||
const {default: Quill} = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any
|
||||
|
||||
quill = new Quill(INPUT_CONSOLE_MESSAGE, {
|
||||
quill = new Quill(QUILL_EDITOR, {
|
||||
placeholder: 'Enter your message here...',
|
||||
theme: 'snow',
|
||||
modules: {
|
||||
toolbar: toolbarOptions
|
||||
},
|
||||
});
|
||||
|
||||
consoleGlobalMessageManagerFocusStore.set(true);
|
||||
menuInputFocusStore.set(true);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
consoleGlobalMessageManagerFocusStore.set(false);
|
||||
menuInputFocusStore.set(false);
|
||||
})
|
||||
|
||||
function disableConsole() {
|
||||
consoleGlobalMessageManagerVisibleStore.set(false);
|
||||
consoleGlobalMessageManagerFocusStore.set(false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="section-input-send-text">
|
||||
<div class="input-send-text" bind:this={INPUT_CONSOLE_MESSAGE}></div>
|
||||
<div class="input-send-text" bind:this={QUILL_EDITOR}></div>
|
||||
</section>
|
||||
|
||||
|
||||
@ -1,27 +1,11 @@
|
||||
<script lang="typescript">
|
||||
import {obtainedMediaConstraintStore} from "../Stores/MediaStore";
|
||||
import {localStreamStore} from "../Stores/MediaStore";
|
||||
import SoundMeterWidget from "./SoundMeterWidget.svelte";
|
||||
import {onDestroy} from "svelte";
|
||||
|
||||
function srcObject(node: HTMLVideoElement, stream: MediaStream) {
|
||||
node.srcObject = stream;
|
||||
return {
|
||||
update(newStream: MediaStream) {
|
||||
if (node.srcObject != newStream) {
|
||||
node.srcObject = newStream
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
import {srcObject} from "./Video/utils";
|
||||
|
||||
let stream : MediaStream|null;
|
||||
/*$: {
|
||||
if ($localStreamStore.type === 'success') {
|
||||
stream = $localStreamStore.stream;
|
||||
} else {
|
||||
stream = null;
|
||||
}
|
||||
}*/
|
||||
|
||||
const unsubscribe = localStreamStore.subscribe(value => {
|
||||
if (value.type === 'success') {
|
||||
@ -37,9 +21,9 @@
|
||||
|
||||
|
||||
<div>
|
||||
<div class="video-container div-myCamVideo" class:hide={!$localStreamStore.constraints.video}>
|
||||
<div class="video-container div-myCamVideo" class:hide={!$obtainedMediaConstraintStore.video}>
|
||||
{#if $localStreamStore.type === "success" && $localStreamStore.stream}
|
||||
<video class="myCamVideo" use:srcObject={$localStreamStore.stream} autoplay muted playsinline></video>
|
||||
<video class="myCamVideo" use:srcObject={stream} autoplay muted playsinline></video>
|
||||
<SoundMeterWidget stream={stream}></SoundMeterWidget>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
44
front/src/Components/ReportMenu/BlockSubMenu.svelte
Normal file
44
front/src/Components/ReportMenu/BlockSubMenu.svelte
Normal file
@ -0,0 +1,44 @@
|
||||
<script lang="ts">
|
||||
import {blackListManager} from "../../WebRtc/BlackListManager";
|
||||
import {showReportScreenStore, userReportEmpty} from "../../Stores/ShowReportScreenStore";
|
||||
import {onMount} from "svelte";
|
||||
|
||||
export let userUUID: string | undefined;
|
||||
export let userName: string;
|
||||
let userIsBlocked = false;
|
||||
|
||||
onMount(() => {
|
||||
if (userUUID === undefined) {
|
||||
userIsBlocked = false;
|
||||
console.error("There is no user to block");
|
||||
} else {
|
||||
userIsBlocked = blackListManager.isBlackListed(userUUID);
|
||||
}
|
||||
})
|
||||
|
||||
function blockUser(): void {
|
||||
if (userUUID === undefined) {
|
||||
console.error("There is no user to block");
|
||||
return;
|
||||
}
|
||||
blackListManager.isBlackListed(userUUID)
|
||||
? blackListManager.cancelBlackList(userUUID)
|
||||
: blackListManager.blackList(userUUID);
|
||||
showReportScreenStore.set(userReportEmpty); //close the report menu
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="block-container">
|
||||
<h3>Block</h3>
|
||||
<p>Block any communication from and to {userName}. This can be reverted.</p>
|
||||
<button type="button" class="nes-btn is-error" on:click|preventDefault={blockUser}>
|
||||
{userIsBlocked ? 'Unblock this user' : 'Block this user'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
div.block-container {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
141
front/src/Components/ReportMenu/ReportMenu.svelte
Normal file
141
front/src/Components/ReportMenu/ReportMenu.svelte
Normal file
@ -0,0 +1,141 @@
|
||||
<script lang="ts">
|
||||
import {showReportScreenStore, userReportEmpty} from "../../Stores/ShowReportScreenStore";
|
||||
import BlockSubMenu from "./BlockSubMenu.svelte";
|
||||
import ReportSubMenu from "./ReportSubMenu.svelte";
|
||||
import {onDestroy, onMount} from "svelte";
|
||||
import type {Unsubscriber} from "svelte/store";
|
||||
import {playersStore} from "../../Stores/PlayersStore";
|
||||
import {connectionManager} from "../../Connexion/ConnectionManager";
|
||||
import {GameConnexionTypes} from "../../Url/UrlManager";
|
||||
import {get} from "svelte/store";
|
||||
|
||||
let blockActive = true;
|
||||
let reportActive = !blockActive;
|
||||
let anonymous: boolean = false;
|
||||
let userUUID: string | undefined = playersStore.getPlayerById(get(showReportScreenStore).userId)?.userUuid;
|
||||
let userName = "No name";
|
||||
let unsubscriber: Unsubscriber
|
||||
|
||||
onMount(() => {
|
||||
unsubscriber = showReportScreenStore.subscribe((reportScreenStore) => {
|
||||
if (reportScreenStore != null) {
|
||||
userName = reportScreenStore.userName;
|
||||
userUUID = playersStore.getPlayerById(reportScreenStore.userId)?.userUuid;
|
||||
if (userUUID === undefined && reportScreenStore !== userReportEmpty) {
|
||||
console.error("Could not find UUID for user with ID " + reportScreenStore.userId);
|
||||
}
|
||||
}
|
||||
})
|
||||
anonymous = connectionManager.getConnexionType === GameConnexionTypes.anonymous;
|
||||
})
|
||||
|
||||
onDestroy(() => {
|
||||
if (unsubscriber) {
|
||||
unsubscriber();
|
||||
}
|
||||
})
|
||||
|
||||
function close() {
|
||||
showReportScreenStore.set(userReportEmpty);
|
||||
}
|
||||
|
||||
function activateBlock() {
|
||||
blockActive = true;
|
||||
reportActive = false;
|
||||
}
|
||||
|
||||
function activateReport() {
|
||||
blockActive = false;
|
||||
reportActive = true;
|
||||
}
|
||||
|
||||
function onKeyDown(e:KeyboardEvent) {
|
||||
if (e.key === 'Escape') {
|
||||
close();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={onKeyDown}/>
|
||||
|
||||
<div class="report-menu-main nes-container is-rounded">
|
||||
<section class="report-menu-title">
|
||||
<h2>Moderate {userName}</h2>
|
||||
<section class="justify-center">
|
||||
<button type="button" class="nes-btn" on:click|preventDefault={close}>X</button>
|
||||
</section>
|
||||
</section>
|
||||
<section class="report-menu-action {anonymous ? 'hidden' : ''}">
|
||||
<section class="justify-center">
|
||||
<button type="button" class="nes-btn {blockActive ? 'is-disabled' : ''}" on:click|preventDefault={activateBlock}>Block</button>
|
||||
</section>
|
||||
<section class="justify-center">
|
||||
<button type="button" class="nes-btn {reportActive ? 'is-disabled' : ''}" on:click|preventDefault={activateReport}>Report</button>
|
||||
</section>
|
||||
</section>
|
||||
<section class="report-menu-content">
|
||||
{#if blockActive}
|
||||
<BlockSubMenu userUUID="{userUUID}" userName="{userName}"/>
|
||||
{:else if reportActive}
|
||||
<ReportSubMenu userUUID="{userUUID}"/>
|
||||
{:else }
|
||||
<p>ERROR : There is no action selected.</p>
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.nes-container {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
section.justify-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div.report-menu-main {
|
||||
font-family: "Press Start 2P";
|
||||
pointer-events: auto;
|
||||
background-color: #333333;
|
||||
color: whitesmoke;
|
||||
|
||||
position: relative;
|
||||
height: 70vh;
|
||||
width: 50vw;
|
||||
top: 10vh;
|
||||
margin: auto;
|
||||
|
||||
section.report-menu-title {
|
||||
display: grid;
|
||||
grid-template-columns: calc(100% - 45px) 40px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
section.report-menu-action {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
section.report-menu-action.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
div.report-menu-main {
|
||||
top: 21vh;
|
||||
height: 60vh;
|
||||
width: 100vw;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
55
front/src/Components/ReportMenu/ReportSubMenu.svelte
Normal file
55
front/src/Components/ReportMenu/ReportSubMenu.svelte
Normal file
@ -0,0 +1,55 @@
|
||||
<script lang="ts">
|
||||
import {showReportScreenStore, userReportEmpty} from "../../Stores/ShowReportScreenStore";
|
||||
import {gameManager} from "../../Phaser/Game/GameManager";
|
||||
|
||||
export let userUUID: string | undefined;
|
||||
let reportMessage: string;
|
||||
let hiddenError = true;
|
||||
|
||||
function submitReport() {
|
||||
if (reportMessage === '') {
|
||||
hiddenError = true;
|
||||
} else {
|
||||
hiddenError = false;
|
||||
if( userUUID === undefined) {
|
||||
console.error('User UUID is not valid.');
|
||||
return;
|
||||
}
|
||||
gameManager.getCurrentGameScene().connection?.emitReportPlayerMessage(userUUID, reportMessage);
|
||||
showReportScreenStore.set(userReportEmpty)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="report-container-main">
|
||||
<h3>Report</h3>
|
||||
<p>Send a report message to the administrators of this room. They may later ban this user.</p>
|
||||
<form>
|
||||
<section>
|
||||
<label>
|
||||
<span>Your message: </span>
|
||||
<textarea type="text" class="nes-textarea" bind:value={reportMessage}></textarea>
|
||||
</label>
|
||||
<p hidden="{hiddenError}">Report message cannot to be empty.</p>
|
||||
</section>
|
||||
<section>
|
||||
<button type="submit" class="nes-btn is-error" on:click={submitReport}>Report this user</button>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
div.report-container-main {
|
||||
text-align: center;
|
||||
|
||||
textarea {
|
||||
height: clamp(100px, 15vh, 300px);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 630px) {
|
||||
div.report-container-main textarea {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
front/src/Components/images/logo-WA-min.png
Normal file
BIN
front/src/Components/images/logo-WA-min.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
@ -29,11 +29,24 @@ class ConnectionManager {
|
||||
});
|
||||
}
|
||||
|
||||
public loadOpenIDScreen() {
|
||||
localUserStore.setAuthToken(null);
|
||||
/**
|
||||
* @return Promise<void>
|
||||
*/
|
||||
public loadOpenIDScreen(): Promise<void> {
|
||||
const state = localUserStore.generateState();
|
||||
const nonce = localUserStore.generateNonce();
|
||||
localUserStore.setAuthToken(null);
|
||||
|
||||
//TODO refactor this and don't realise previous call
|
||||
return Axios.get(`http://${PUSHER_URL}/login-screen?state=${state}&nonce=${nonce}`)
|
||||
.then(() => {
|
||||
window.location.assign(`http://${PUSHER_URL}/login-screen?state=${state}&nonce=${nonce}`);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err, "We don't have URL to regenerate authentication user");
|
||||
//TODO show modal login
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
|
||||
public logout() {
|
||||
|
||||
@ -16,8 +16,9 @@ const lastRoomUrl = "lastRoomUrl";
|
||||
const authToken = "authToken";
|
||||
const state = "state";
|
||||
const nonce = "nonce";
|
||||
const notification = "notificationPermission";
|
||||
|
||||
const cacheAPIIndex = "workavdenture-cache-v1";
|
||||
const cacheAPIIndex = "workavdenture-cache";
|
||||
|
||||
class LocalUserStore {
|
||||
saveUser(localUser: LocalUser) {
|
||||
@ -143,6 +144,14 @@ class LocalUserStore {
|
||||
return localStorage.getItem(authToken);
|
||||
}
|
||||
|
||||
setNotification(value: string): void {
|
||||
localStorage.setItem(notification, value);
|
||||
}
|
||||
|
||||
getNotification(): string | null {
|
||||
return localStorage.getItem(notification);
|
||||
}
|
||||
|
||||
generateState(): string {
|
||||
const newState = uuidv4();
|
||||
localStorage.setItem(state, newState);
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import Axios from "axios";
|
||||
import { PUSHER_URL } from "../Enum/EnvironmentVariable";
|
||||
import type { CharacterTexture } from "./LocalUser";
|
||||
import { localUserStore } from "./LocalUserStore";
|
||||
|
||||
export class MapDetail {
|
||||
constructor(public readonly mapUrl: string, public readonly textures: CharacterTexture[] | undefined) {}
|
||||
@ -87,6 +88,7 @@ export class Room {
|
||||
const result = await Axios.get(`${PUSHER_URL}/map`, {
|
||||
params: {
|
||||
playUri: this.roomUrl.toString(),
|
||||
authToken: localUserStore.getAuthToken(),
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@ -18,6 +18,7 @@ export const MAX_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || "
|
||||
export const MAX_PER_GROUP = parseInt(process.env.MAX_PER_GROUP || "4");
|
||||
export const DISPLAY_TERMS_OF_USE = process.env.DISPLAY_TERMS_OF_USE == "true";
|
||||
export const NODE_ENV = process.env.NODE_ENV || "development";
|
||||
export const CONTACT_URL = process.env.CONTACT_URL || undefined;
|
||||
|
||||
export const isMobile = (): boolean => window.innerWidth <= 800 || window.innerHeight <= 600;
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import ImageFrameConfig = Phaser.Types.Loader.FileTypes.ImageFrameConfig;
|
||||
import { DirtyScene } from "../Game/DirtyScene";
|
||||
|
||||
const LogoNameIndex: string = 'logoLoading';
|
||||
const TextName: string = 'Loading...';
|
||||
const LogoResource: string = 'resources/logos/logo.png';
|
||||
const LogoNameIndex: string = "logoLoading";
|
||||
const TextName: string = "Loading...";
|
||||
const LogoResource: string = "resources/logos/logo.png";
|
||||
const LogoFrame: ImageFrameConfig = { frameWidth: 307, frameHeight: 59 };
|
||||
|
||||
export const addLoader = (scene: Phaser.Scene): void => {
|
||||
@ -17,7 +18,9 @@ export const addLoader = (scene: Phaser.Scene): void => {
|
||||
|
||||
const promiseLoadLogoTexture = new Promise<Phaser.GameObjects.Image>((res) => {
|
||||
if (scene.load.textureManager.exists(LogoNameIndex)) {
|
||||
return res(scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex));
|
||||
return res(
|
||||
scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex)
|
||||
);
|
||||
} else {
|
||||
//add loading if logo image is not ready
|
||||
loadingText = scene.add.text(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 50, TextName);
|
||||
@ -27,21 +30,33 @@ export const addLoader = (scene: Phaser.Scene): void => {
|
||||
if (loadingText) {
|
||||
loadingText.destroy();
|
||||
}
|
||||
return res(scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex));
|
||||
return res(
|
||||
scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex)
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
const progressContainer = scene.add.graphics();
|
||||
const progress = scene.add.graphics();
|
||||
progressContainer.fillStyle(0x444444, 0.8);
|
||||
progressContainer.fillRect((scene.game.renderer.width - loadingBarWidth) / 2 - padding, scene.game.renderer.height / 2 + 50 - padding, loadingBarWidth + padding * 2, loadingBarHeight + padding * 2);
|
||||
progressContainer.fillRect(
|
||||
(scene.game.renderer.width - loadingBarWidth) / 2 - padding,
|
||||
scene.game.renderer.height / 2 + 50 - padding,
|
||||
loadingBarWidth + padding * 2,
|
||||
loadingBarHeight + padding * 2
|
||||
);
|
||||
|
||||
scene.load.on('progress', (value: number) => {
|
||||
scene.load.on("progress", (value: number) => {
|
||||
progress.clear();
|
||||
progress.fillStyle(0xBBBBBB, 1);
|
||||
progress.fillRect((scene.game.renderer.width - loadingBarWidth) / 2, scene.game.renderer.height / 2 + 50, loadingBarWidth * value, loadingBarHeight);
|
||||
progress.fillStyle(0xbbbbbb, 1);
|
||||
progress.fillRect(
|
||||
(scene.game.renderer.width - loadingBarWidth) / 2,
|
||||
scene.game.renderer.height / 2 + 50,
|
||||
loadingBarWidth * value,
|
||||
loadingBarHeight
|
||||
);
|
||||
});
|
||||
scene.load.on('complete', () => {
|
||||
scene.load.on("complete", () => {
|
||||
if (loadingText) {
|
||||
loadingText.destroy();
|
||||
}
|
||||
@ -50,5 +65,8 @@ export const addLoader = (scene: Phaser.Scene): void => {
|
||||
});
|
||||
progress.destroy();
|
||||
progressContainer.destroy();
|
||||
});
|
||||
if (scene instanceof DirtyScene) {
|
||||
scene.markDirty();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -4,7 +4,6 @@ import {Character} from "../Entity/Character";
|
||||
import type { PlayerAnimationDirections } from "../Player/Animation";
|
||||
import { requestVisitCardsStore } from "../../Stores/GameStore";
|
||||
|
||||
|
||||
/**
|
||||
* Class representing the sprite of a remote player (a player that plays on another computer)
|
||||
*/
|
||||
@ -25,15 +24,29 @@ export class RemotePlayer extends Character {
|
||||
companion: string | null,
|
||||
companionTexturePromise?: Promise<string>
|
||||
) {
|
||||
super(Scene, x, y, texturesPromise, name, direction, moving, 1, !!visitCardUrl, companion, companionTexturePromise);
|
||||
super(
|
||||
Scene,
|
||||
x,
|
||||
y,
|
||||
texturesPromise,
|
||||
name,
|
||||
direction,
|
||||
moving,
|
||||
1,
|
||||
!!visitCardUrl,
|
||||
companion,
|
||||
companionTexturePromise
|
||||
);
|
||||
|
||||
//set data
|
||||
this.userId = userId;
|
||||
this.visitCardUrl = visitCardUrl;
|
||||
|
||||
this.on('pointerdown', () => {
|
||||
this.on("pointerdown", (event: Phaser.Input.Pointer) => {
|
||||
if (event.downElement.nodeName === "CANVAS") {
|
||||
requestVisitCardsStore.set(this.visitCardUrl);
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updatePosition(position: PointInterface): void {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { GameScene } from "./GameScene";
|
||||
import { connectionManager } from "../../Connexion/ConnectionManager";
|
||||
import type { Room } from "../../Connexion/Room";
|
||||
import { MenuScene, MenuSceneName } from "../Menu/MenuScene";
|
||||
import { LoginSceneName } from "../Login/LoginScene";
|
||||
import { SelectCharacterSceneName } from "../Login/SelectCharacterScene";
|
||||
import { EnableCameraSceneName } from "../Login/EnableCameraScene";
|
||||
@ -9,6 +8,7 @@ import { localUserStore } from "../../Connexion/LocalUserStore";
|
||||
import { get } from "svelte/store";
|
||||
import { requestedCameraState, requestedMicrophoneState } from "../../Stores/MediaStore";
|
||||
import { helpCameraSettingsVisibleStore } from "../../Stores/HelpCameraSettingsStore";
|
||||
import { menuIconVisiblilityStore } from "../../Stores/MenuStore";
|
||||
|
||||
/**
|
||||
* This class should be responsible for any scene starting/stopping
|
||||
@ -19,6 +19,8 @@ export class GameManager {
|
||||
private companion: string | null;
|
||||
private startRoom!: Room;
|
||||
currentGameSceneName: string | null = null;
|
||||
// Note: this scenePlugin is the scenePlugin of the EntryScene. We should always provide a key in methods called on this scenePlugin.
|
||||
private scenePlugin!: Phaser.Scenes.ScenePlugin;
|
||||
|
||||
constructor() {
|
||||
this.playerName = localUserStore.getName();
|
||||
@ -27,8 +29,9 @@ export class GameManager {
|
||||
}
|
||||
|
||||
public async init(scenePlugin: Phaser.Scenes.ScenePlugin): Promise<string> {
|
||||
this.scenePlugin = scenePlugin;
|
||||
this.startRoom = await connectionManager.initGameConnexion();
|
||||
this.loadMap(this.startRoom, scenePlugin);
|
||||
this.loadMap(this.startRoom);
|
||||
|
||||
if (!this.playerName) {
|
||||
return LoginSceneName;
|
||||
@ -68,20 +71,19 @@ export class GameManager {
|
||||
return this.companion;
|
||||
}
|
||||
|
||||
public loadMap(room: Room, scenePlugin: Phaser.Scenes.ScenePlugin) {
|
||||
public loadMap(room: Room) {
|
||||
const roomID = room.key;
|
||||
|
||||
const gameIndex = scenePlugin.getIndex(roomID);
|
||||
const gameIndex = this.scenePlugin.getIndex(roomID);
|
||||
if (gameIndex === -1) {
|
||||
const game: Phaser.Scene = new GameScene(room, room.mapUrl);
|
||||
scenePlugin.add(roomID, game, false);
|
||||
this.scenePlugin.add(roomID, game, false);
|
||||
}
|
||||
}
|
||||
|
||||
public goToStartingMap(scenePlugin: Phaser.Scenes.ScenePlugin): void {
|
||||
public goToStartingMap(): void {
|
||||
console.log("starting " + (this.currentGameSceneName || this.startRoom.key));
|
||||
scenePlugin.start(this.currentGameSceneName || this.startRoom.key);
|
||||
scenePlugin.launch(MenuSceneName);
|
||||
this.scenePlugin.start(this.currentGameSceneName || this.startRoom.key);
|
||||
|
||||
if (
|
||||
!localUserStore.getHelpCameraSettingsShown() &&
|
||||
@ -94,41 +96,40 @@ export class GameManager {
|
||||
|
||||
public gameSceneIsCreated(scene: GameScene) {
|
||||
this.currentGameSceneName = scene.scene.key;
|
||||
const menuScene: MenuScene = scene.scene.get(MenuSceneName) as MenuScene;
|
||||
menuScene.revealMenuIcon();
|
||||
menuIconVisiblilityStore.set(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Temporary leave a gameScene to go back to the loginScene for example.
|
||||
* This will close the socket connections and stop the gameScene, but won't remove it.
|
||||
*/
|
||||
leaveGame(scene: Phaser.Scene, targetSceneName: string, sceneClass: Phaser.Scene): void {
|
||||
leaveGame(targetSceneName: string, sceneClass: Phaser.Scene): void {
|
||||
if (this.currentGameSceneName === null) throw "No current scene id set!";
|
||||
const gameScene: GameScene = scene.scene.get(this.currentGameSceneName) as GameScene;
|
||||
const gameScene: GameScene = this.scenePlugin.get(this.currentGameSceneName) as GameScene;
|
||||
gameScene.cleanupClosingScene();
|
||||
scene.scene.stop(this.currentGameSceneName);
|
||||
scene.scene.sleep(MenuSceneName);
|
||||
if (!scene.scene.get(targetSceneName)) {
|
||||
scene.scene.add(targetSceneName, sceneClass, false);
|
||||
gameScene.createSuccessorGameScene(false, false);
|
||||
menuIconVisiblilityStore.set(false);
|
||||
if (!this.scenePlugin.get(targetSceneName)) {
|
||||
this.scenePlugin.add(targetSceneName, sceneClass, false);
|
||||
}
|
||||
scene.scene.run(targetSceneName);
|
||||
this.scenePlugin.run(targetSceneName);
|
||||
}
|
||||
|
||||
/**
|
||||
* follow up to leaveGame()
|
||||
*/
|
||||
tryResumingGame(scene: Phaser.Scene, fallbackSceneName: string) {
|
||||
tryResumingGame(fallbackSceneName: string) {
|
||||
if (this.currentGameSceneName) {
|
||||
scene.scene.start(this.currentGameSceneName);
|
||||
scene.scene.wake(MenuSceneName);
|
||||
this.scenePlugin.start(this.currentGameSceneName);
|
||||
menuIconVisiblilityStore.set(true);
|
||||
} else {
|
||||
scene.scene.run(fallbackSceneName);
|
||||
this.scenePlugin.run(fallbackSceneName);
|
||||
}
|
||||
}
|
||||
|
||||
public getCurrentGameScene(scene: Phaser.Scene): GameScene {
|
||||
public getCurrentGameScene(): GameScene {
|
||||
if (this.currentGameSceneName === null) throw "No current scene id set!";
|
||||
return scene.scene.get(this.currentGameSceneName) as GameScene;
|
||||
return this.scenePlugin.get(this.currentGameSceneName) as GameScene;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -80,8 +80,11 @@ export class GameMap {
|
||||
return;
|
||||
}
|
||||
this.key = key;
|
||||
this.triggerAll();
|
||||
}
|
||||
|
||||
const newProps = this.getProperties(key);
|
||||
private triggerAll(): void {
|
||||
const newProps = this.getProperties(this.key ?? 0);
|
||||
const oldProps = this.lastProperties;
|
||||
this.lastProperties = newProps;
|
||||
|
||||
@ -253,4 +256,34 @@ export class GameMap {
|
||||
}
|
||||
return this.tileNameMap.get(tile);
|
||||
}
|
||||
|
||||
public setLayerProperty(
|
||||
layerName: string,
|
||||
propertyName: string,
|
||||
propertyValue: string | number | undefined | boolean
|
||||
) {
|
||||
const layer = this.findLayer(layerName);
|
||||
if (layer === undefined) {
|
||||
console.warn('Could not find layer "' + layerName + '" when calling setProperty');
|
||||
return;
|
||||
}
|
||||
if (layer.properties === undefined) {
|
||||
layer.properties = [];
|
||||
}
|
||||
const property = layer.properties.find((property) => property.name === propertyName);
|
||||
if (property === undefined) {
|
||||
if (propertyValue === undefined) {
|
||||
return;
|
||||
}
|
||||
layer.properties.push({ name: propertyName, type: typeof propertyValue, value: propertyValue });
|
||||
return;
|
||||
}
|
||||
if (propertyValue === undefined) {
|
||||
const index = layer.properties.indexOf(property);
|
||||
layer.properties.splice(index, 1);
|
||||
}
|
||||
property.value = propertyValue;
|
||||
|
||||
this.triggerAll();
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,7 +45,6 @@ import type { ActionableItem } from "../Items/ActionableItem";
|
||||
import type { ItemFactoryInterface } from "../Items/ItemFactoryInterface";
|
||||
import { SelectCharacterScene, SelectCharacterSceneName } from "../Login/SelectCharacterScene";
|
||||
import type { ITiledMap, ITiledMapLayer, ITiledMapProperty, ITiledMapObject, ITiledTileSet } from "../Map/ITiledMap";
|
||||
import { MenuScene, MenuSceneName } from "../Menu/MenuScene";
|
||||
import { PlayerAnimationDirections } from "../Player/Animation";
|
||||
import { hasMovedEventName, Player, requestEmoteEventName } from "../Player/Player";
|
||||
import { ErrorSceneName } from "../Reconnecting/ErrorScene";
|
||||
@ -92,7 +91,6 @@ import { PropertyUtils } from "../Map/PropertyUtils";
|
||||
import Tileset = Phaser.Tilemaps.Tileset;
|
||||
import { userIsAdminStore } from "../../Stores/GameStore";
|
||||
import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
|
||||
import { get } from "svelte/store";
|
||||
import { EmbeddedWebsiteManager } from "./EmbeddedWebsiteManager";
|
||||
|
||||
export interface GameSceneInitInterface {
|
||||
@ -404,12 +402,6 @@ export class GameScene extends DirtyScene {
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Now, let's load the script, if any
|
||||
const scripts = this.getScriptUrls(this.mapFile);
|
||||
for (const script of scripts) {
|
||||
iframeListener.registerScript(script);
|
||||
}
|
||||
}
|
||||
|
||||
//hook initialisation
|
||||
@ -568,6 +560,12 @@ export class GameScene extends DirtyScene {
|
||||
}
|
||||
|
||||
this.createPromiseResolve();
|
||||
// Now, let's load the script, if any
|
||||
const scripts = this.getScriptUrls(this.mapFile);
|
||||
const scriptPromises = [];
|
||||
for (const script of scripts) {
|
||||
scriptPromises.push(iframeListener.registerScript(script));
|
||||
}
|
||||
|
||||
this.userInputManager.spaceEvent(() => {
|
||||
this.outlinedItem?.activate();
|
||||
@ -585,6 +583,7 @@ export class GameScene extends DirtyScene {
|
||||
this.triggerOnMapLayerPropertyChange();
|
||||
|
||||
if (!this.room.isDisconnected()) {
|
||||
this.scene.sleep();
|
||||
this.connect();
|
||||
}
|
||||
|
||||
@ -608,6 +607,10 @@ export class GameScene extends DirtyScene {
|
||||
this.chatVisibilityUnsubscribe = chatVisibilityStore.subscribe((v) => {
|
||||
this.openChatIcon.setVisible(!v);
|
||||
});
|
||||
|
||||
Promise.all([this.connectionAnswerPromise as Promise<unknown>, ...scriptPromises]).then(() => {
|
||||
this.scene.wake();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@ -685,19 +688,7 @@ export class GameScene extends DirtyScene {
|
||||
this.connection.onServerDisconnected(() => {
|
||||
console.log("Player disconnected from server. Reloading scene.");
|
||||
this.cleanupClosingScene();
|
||||
|
||||
const gameSceneKey = "somekey" + Math.round(Math.random() * 10000);
|
||||
const game: Phaser.Scene = new GameScene(this.room, this.MapUrlFile, gameSceneKey);
|
||||
this.scene.add(gameSceneKey, game, true, {
|
||||
initPosition: {
|
||||
x: this.CurrentPlayer.x,
|
||||
y: this.CurrentPlayer.y,
|
||||
},
|
||||
reconnecting: true,
|
||||
});
|
||||
|
||||
this.scene.stop(this.scene.key);
|
||||
this.scene.remove(this.scene.key);
|
||||
this.createSuccessorGameScene(true, true);
|
||||
});
|
||||
|
||||
this.connection.onActionableEvent((message) => {
|
||||
@ -721,7 +712,7 @@ export class GameScene extends DirtyScene {
|
||||
});
|
||||
|
||||
// When connection is performed, let's connect SimplePeer
|
||||
this.simplePeer = new SimplePeer(this.connection, !this.room.isPublic, this.playerName);
|
||||
this.simplePeer = new SimplePeer(this.connection);
|
||||
peerStore.connectToSimplePeer(this.simplePeer);
|
||||
screenSharingPeerStore.connectToSimplePeer(this.simplePeer);
|
||||
videoFocusStore.connectToSimplePeer(this.simplePeer);
|
||||
@ -759,8 +750,9 @@ export class GameScene extends DirtyScene {
|
||||
this.connectionAnswerPromiseResolve(onConnect.room);
|
||||
// Analyze tags to find if we are admin. If yes, show console.
|
||||
|
||||
this.scene.wake();
|
||||
if (this.scene.isSleeping()) {
|
||||
this.scene.stop(ReconnectingSceneName);
|
||||
}
|
||||
|
||||
//init user position and play trigger to check layers properties
|
||||
this.gameMap.setPosition(this.CurrentPlayer.x, this.CurrentPlayer.y);
|
||||
@ -814,13 +806,24 @@ export class GameScene extends DirtyScene {
|
||||
|
||||
private triggerOnMapLayerPropertyChange() {
|
||||
this.gameMap.onPropertyChange("exitSceneUrl", (newValue, oldValue) => {
|
||||
if (newValue)
|
||||
if (newValue) {
|
||||
this.onMapExit(
|
||||
Room.getRoomPathFromExitSceneUrl(newValue as string, window.location.toString(), this.MapUrlFile)
|
||||
);
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
layoutManagerActionStore.removeAction("roomAccessDenied");
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
this.gameMap.onPropertyChange("exitUrl", (newValue, oldValue) => {
|
||||
if (newValue) this.onMapExit(Room.getRoomPathFromExitUrl(newValue as string, window.location.toString()));
|
||||
if (newValue) {
|
||||
this.onMapExit(Room.getRoomPathFromExitUrl(newValue as string, window.location.toString()));
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
layoutManagerActionStore.removeAction("roomAccessDenied");
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
this.gameMap.onPropertyChange("openWebsite", (newValue, oldValue, allProps) => {
|
||||
if (newValue === undefined) {
|
||||
@ -832,7 +835,8 @@ export class GameScene extends DirtyScene {
|
||||
newValue as string,
|
||||
this.MapUrlFile,
|
||||
allProps.get("openWebsiteAllowApi") as boolean | undefined,
|
||||
allProps.get("openWebsitePolicy") as string | undefined
|
||||
allProps.get("openWebsitePolicy") as string | undefined,
|
||||
allProps.get("openWebsiteWidth") as number | undefined
|
||||
);
|
||||
layoutManagerActionStore.removeAction("openWebsite");
|
||||
};
|
||||
@ -915,9 +919,10 @@ export class GameScene extends DirtyScene {
|
||||
});
|
||||
|
||||
this.gameMap.onPropertyChange("zone", (newValue, oldValue) => {
|
||||
if (newValue === undefined || newValue === false || newValue === "") {
|
||||
if (oldValue) {
|
||||
iframeListener.sendLeaveEvent(oldValue as string);
|
||||
} else {
|
||||
}
|
||||
if (newValue) {
|
||||
iframeListener.sendEnterEvent(newValue as string);
|
||||
}
|
||||
});
|
||||
@ -940,9 +945,13 @@ export class GameScene extends DirtyScene {
|
||||
return;
|
||||
}
|
||||
const escapedMessage = HtmlUtils.escapeHtml(openPopupEvent.message);
|
||||
let html = `<div id="container" hidden><div class="nes-container with-title is-centered">
|
||||
let html = '<div id="container" hidden>';
|
||||
if (escapedMessage) {
|
||||
html += `<div class="nes-container with-title is-centered">
|
||||
${escapedMessage}
|
||||
</div> `;
|
||||
}
|
||||
|
||||
const buttonContainer = '<div class="buttonContainer"</div>';
|
||||
html += buttonContainer;
|
||||
let id = 0;
|
||||
@ -972,7 +981,11 @@ ${escapedMessage}
|
||||
const btnId = id;
|
||||
button.onclick = () => {
|
||||
iframeListener.sendButtonClickedEvent(openPopupEvent.popupId, btnId);
|
||||
// Disable for a short amount of time to let time to the script to remove the popup
|
||||
button.disabled = true;
|
||||
setTimeout(() => {
|
||||
button.disabled = false;
|
||||
}, 100);
|
||||
};
|
||||
id++;
|
||||
}
|
||||
@ -1228,30 +1241,10 @@ ${escapedMessage}
|
||||
propertyName: string,
|
||||
propertyValue: string | number | boolean | undefined
|
||||
): void {
|
||||
const layer = this.gameMap.findLayer(layerName);
|
||||
if (layer === undefined) {
|
||||
console.warn('Could not find layer "' + layerName + '" when calling setProperty');
|
||||
return;
|
||||
}
|
||||
if (propertyName === "exitUrl" && typeof propertyValue === "string") {
|
||||
this.loadNextGameFromExitUrl(propertyValue);
|
||||
}
|
||||
if (layer.properties === undefined) {
|
||||
layer.properties = [];
|
||||
}
|
||||
const property = layer.properties.find((property) => property.name === propertyName);
|
||||
if (property === undefined) {
|
||||
if (propertyValue === undefined) {
|
||||
return;
|
||||
}
|
||||
layer.properties.push({ name: propertyName, type: typeof propertyValue, value: propertyValue });
|
||||
return;
|
||||
}
|
||||
if (propertyValue === undefined) {
|
||||
const index = layer.properties.indexOf(property);
|
||||
layer.properties.splice(index, 1);
|
||||
}
|
||||
property.value = propertyValue;
|
||||
this.gameMap.setLayerProperty(layerName, propertyName, propertyValue);
|
||||
}
|
||||
|
||||
private setLayerVisibility(layerName: string, visible: boolean): void {
|
||||
@ -1290,6 +1283,18 @@ ${escapedMessage}
|
||||
targetRoom = await Room.createRoom(roomUrl);
|
||||
} catch (e /*: unknown*/) {
|
||||
console.error('Error while fetching new room "' + roomUrl.toString() + '"', e);
|
||||
|
||||
//show information room access denied
|
||||
layoutManagerActionStore.addAction({
|
||||
uuid: "roomAccessDenied",
|
||||
type: "warning",
|
||||
message: "Room access denied. You don't have right to access on this room.",
|
||||
callback: () => {
|
||||
layoutManagerActionStore.removeAction("roomAccessDenied");
|
||||
},
|
||||
userInputManager: this.userInputManager,
|
||||
});
|
||||
|
||||
this.mapTransitioning = false;
|
||||
return;
|
||||
}
|
||||
@ -1298,9 +1303,6 @@ ${escapedMessage}
|
||||
urlManager.pushStartLayerNameToUrl(roomUrl.hash);
|
||||
}
|
||||
|
||||
const menuScene: MenuScene = this.scene.get(MenuSceneName) as MenuScene;
|
||||
menuScene.reset();
|
||||
|
||||
if (!targetRoom.isEqual(this.room)) {
|
||||
if (this.scene.get(targetRoom.key) === null) {
|
||||
console.error("next room not loaded", targetRoom.key);
|
||||
@ -1344,7 +1346,6 @@ ${escapedMessage}
|
||||
iframeListener.unregisterAnswerer("getState");
|
||||
iframeListener.unregisterAnswerer("loadTileset");
|
||||
iframeListener.unregisterAnswerer("getMapData");
|
||||
iframeListener.unregisterAnswerer("getState");
|
||||
iframeListener.unregisterAnswerer("triggerActionMessage");
|
||||
iframeListener.unregisterAnswerer("removeActionMessage");
|
||||
this.sharedVariablesManager?.close();
|
||||
@ -1419,7 +1420,7 @@ ${escapedMessage}
|
||||
private async loadNextGame(exitRoomPath: URL): Promise<void> {
|
||||
try {
|
||||
const room = await Room.createRoom(exitRoomPath);
|
||||
return gameManager.loadMap(room, this.scene);
|
||||
return gameManager.loadMap(room);
|
||||
} catch (e /*: unknown*/) {
|
||||
console.warn('Error while pre-loading exit room "' + exitRoomPath.toString() + '"', e);
|
||||
}
|
||||
@ -1480,7 +1481,7 @@ ${escapedMessage}
|
||||
});
|
||||
} catch (err) {
|
||||
if (err instanceof TextureError) {
|
||||
gameManager.leaveGame(this, SelectCharacterSceneName, new SelectCharacterScene());
|
||||
gameManager.leaveGame(SelectCharacterSceneName, new SelectCharacterScene());
|
||||
}
|
||||
throw err;
|
||||
}
|
||||
@ -1839,8 +1840,9 @@ ${escapedMessage}
|
||||
"jitsiInterfaceConfig"
|
||||
);
|
||||
const jitsiUrl = allProps.get("jitsiUrl") as string | undefined;
|
||||
const jitsiWidth = allProps.get("jitsiWidth") as number | undefined;
|
||||
|
||||
jitsiFactory.start(roomName, this.playerName, jwt, jitsiConfig, jitsiInterfaceConfig, jitsiUrl);
|
||||
jitsiFactory.start(roomName, this.playerName, jwt, jitsiConfig, jitsiInterfaceConfig, jitsiUrl, jitsiWidth);
|
||||
this.connection?.setSilent(true);
|
||||
mediaManager.hideGameOverlay();
|
||||
|
||||
@ -1896,4 +1898,24 @@ ${escapedMessage}
|
||||
waScaleManager.zoomModifier *= zoomFactor;
|
||||
biggestAvailableAreaStore.recompute();
|
||||
}
|
||||
|
||||
public createSuccessorGameScene(autostart: boolean, reconnecting: boolean) {
|
||||
const gameSceneKey = "somekey" + Math.round(Math.random() * 10000);
|
||||
const game = new GameScene(this.room, this.MapUrlFile, gameSceneKey);
|
||||
this.scene.add(gameSceneKey, game, autostart, {
|
||||
initPosition: {
|
||||
x: this.CurrentPlayer.x,
|
||||
y: this.CurrentPlayer.y,
|
||||
},
|
||||
reconnecting: reconnecting,
|
||||
});
|
||||
|
||||
//If new gameScene doesn't start automatically then we change the gameScene in gameManager so that it can start the new gameScene
|
||||
if (!autostart) {
|
||||
gameManager.gameSceneIsCreated(game);
|
||||
}
|
||||
|
||||
this.scene.stop(this.scene.key);
|
||||
this.scene.remove(this.scene.key);
|
||||
}
|
||||
}
|
||||
|
||||
@ -282,7 +282,7 @@ export class CustomizeScene extends AbstractCharacterScene {
|
||||
this.scene.sleep(CustomizeSceneName);
|
||||
waScaleManager.restoreZoom();
|
||||
this.events.removeListener("wake");
|
||||
gameManager.tryResumingGame(this, EnableCameraSceneName);
|
||||
gameManager.tryResumingGame(EnableCameraSceneName);
|
||||
customCharacterSceneVisibleStore.set(false);
|
||||
}
|
||||
|
||||
|
||||
@ -1,50 +1,34 @@
|
||||
import { gameManager } from "../Game/GameManager";
|
||||
import {TextField} from "../Components/TextField";
|
||||
import Image = Phaser.GameObjects.Image;
|
||||
import {mediaManager} from "../../WebRtc/MediaManager";
|
||||
import {SoundMeter} from "../Components/SoundMeter";
|
||||
import {HtmlUtils} from "../../WebRtc/HtmlUtils";
|
||||
import {touchScreenManager} from "../../Touch/TouchScreenManager";
|
||||
import {PinchManager} from "../UserInput/PinchManager";
|
||||
import Zone = Phaser.GameObjects.Zone;
|
||||
import { MenuScene } from "../Menu/MenuScene";
|
||||
import { ResizableScene } from "./ResizableScene";
|
||||
import {
|
||||
enableCameraSceneVisibilityStore,
|
||||
} from "../../Stores/MediaStore";
|
||||
import { enableCameraSceneVisibilityStore } from "../../Stores/MediaStore";
|
||||
|
||||
export const EnableCameraSceneName = "EnableCameraScene";
|
||||
|
||||
export class EnableCameraScene extends ResizableScene {
|
||||
|
||||
constructor() {
|
||||
super({
|
||||
key: EnableCameraSceneName
|
||||
key: EnableCameraSceneName,
|
||||
});
|
||||
}
|
||||
|
||||
preload() {
|
||||
}
|
||||
preload() {}
|
||||
|
||||
create() {
|
||||
|
||||
this.input.keyboard.on('keyup-ENTER', () => {
|
||||
this.input.keyboard.on("keyup-ENTER", () => {
|
||||
this.login();
|
||||
});
|
||||
|
||||
enableCameraSceneVisibilityStore.showEnableCameraScene();
|
||||
}
|
||||
|
||||
public onResize(): void {
|
||||
}
|
||||
public onResize(): void {}
|
||||
|
||||
update(time: number, delta: number): void {
|
||||
}
|
||||
update(time: number, delta: number): void {}
|
||||
|
||||
public login(): void {
|
||||
enableCameraSceneVisibilityStore.hideEnableCameraScene();
|
||||
|
||||
this.scene.sleep(EnableCameraSceneName);
|
||||
gameManager.goToStartingMap(this.scene);
|
||||
gameManager.goToStartingMap();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { gameManager } from "../Game/GameManager";
|
||||
import { Scene } from "phaser";
|
||||
import { ErrorScene } from "../Reconnecting/ErrorScene";
|
||||
import { ErrorScene, ErrorSceneName } from "../Reconnecting/ErrorScene";
|
||||
import { WAError } from "../Reconnecting/WAError";
|
||||
import { waScaleManager } from "../Services/WaScaleManager";
|
||||
|
||||
@ -36,6 +36,17 @@ export class EntryScene extends Scene {
|
||||
),
|
||||
this.scene
|
||||
);
|
||||
} else if (err.response && err.response.status == 403) {
|
||||
ErrorScene.showError(
|
||||
new WAError(
|
||||
"Connection rejected",
|
||||
"You cannot join the World. Try again later" +
|
||||
(err.response.data ? ". \n\r \n\r" + `${err.response.data}` : "") +
|
||||
".",
|
||||
"If you want more information, you may contact administrator or contact us at: hello@workadventu.re"
|
||||
),
|
||||
this.scene
|
||||
);
|
||||
} else {
|
||||
ErrorScene.showError(err, this.scene);
|
||||
}
|
||||
|
||||
@ -6,18 +6,16 @@ import {loginSceneVisibleStore} from "../../Stores/LoginSceneStore";
|
||||
export const LoginSceneName = "LoginScene";
|
||||
|
||||
export class LoginScene extends ResizableScene {
|
||||
|
||||
private name: string = '';
|
||||
private name: string = "";
|
||||
|
||||
constructor() {
|
||||
super({
|
||||
key: LoginSceneName
|
||||
key: LoginSceneName,
|
||||
});
|
||||
this.name = gameManager.getPlayerName() || '';
|
||||
this.name = gameManager.getPlayerName() || "";
|
||||
}
|
||||
|
||||
preload() {
|
||||
}
|
||||
preload() {}
|
||||
|
||||
create() {
|
||||
loginSceneVisibleStore.set(true);
|
||||
@ -27,15 +25,13 @@ export class LoginScene extends ResizableScene {
|
||||
name = name.trim();
|
||||
gameManager.setPlayerName(name);
|
||||
|
||||
this.scene.stop(LoginSceneName)
|
||||
gameManager.tryResumingGame(this, SelectCharacterSceneName);
|
||||
this.scene.stop(LoginSceneName);
|
||||
gameManager.tryResumingGame(SelectCharacterSceneName);
|
||||
this.scene.remove(LoginSceneName);
|
||||
loginSceneVisibleStore.set(false);
|
||||
}
|
||||
|
||||
update(time: number, delta: number): void {
|
||||
}
|
||||
update(time: number, delta: number): void {}
|
||||
|
||||
public onResize(): void {
|
||||
}
|
||||
public onResize(): void {}
|
||||
}
|
||||
|
||||
@ -101,7 +101,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
|
||||
this.scene.stop(SelectCharacterSceneName);
|
||||
waScaleManager.restoreZoom();
|
||||
gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
|
||||
gameManager.tryResumingGame(this, EnableCameraSceneName);
|
||||
gameManager.tryResumingGame(EnableCameraSceneName);
|
||||
this.players = [];
|
||||
selectCharacterSceneVisibleStore.set(false);
|
||||
this.events.removeListener("wake");
|
||||
|
||||
@ -9,7 +9,6 @@ import type { CompanionResourceDescriptionInterface } from "../Companion/Compani
|
||||
import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingManager";
|
||||
import { touchScreenManager } from "../../Touch/TouchScreenManager";
|
||||
import { PinchManager } from "../UserInput/PinchManager";
|
||||
import { MenuScene } from "../Menu/MenuScene";
|
||||
import { selectCompanionSceneVisibleStore } from "../../Stores/SelectCompanionStore";
|
||||
import { waScaleManager } from "../Services/WaScaleManager";
|
||||
import { isMobile } from "../../Enum/EnvironmentVariable";
|
||||
@ -28,12 +27,12 @@ export class SelectCompanionScene extends ResizableScene {
|
||||
|
||||
constructor() {
|
||||
super({
|
||||
key: SelectCompanionSceneName
|
||||
key: SelectCompanionSceneName,
|
||||
});
|
||||
}
|
||||
|
||||
preload() {
|
||||
getAllCompanionResources(this.load).forEach(model => {
|
||||
getAllCompanionResources(this.load).forEach((model) => {
|
||||
this.companionModels.push(model);
|
||||
});
|
||||
|
||||
@ -42,7 +41,6 @@ export class SelectCompanionScene extends ResizableScene {
|
||||
}
|
||||
|
||||
create() {
|
||||
|
||||
selectCompanionSceneVisibleStore.set(true);
|
||||
|
||||
waScaleManager.saveZoom();
|
||||
@ -53,13 +51,15 @@ export class SelectCompanionScene extends ResizableScene {
|
||||
}
|
||||
|
||||
// input events
|
||||
this.input.keyboard.on('keyup-ENTER', this.selectCompanion.bind(this));
|
||||
this.input.keyboard.on("keyup-ENTER", this.selectCompanion.bind(this));
|
||||
|
||||
this.input.keyboard.on('keydown-RIGHT', this.moveToRight.bind(this));
|
||||
this.input.keyboard.on('keydown-LEFT', this.moveToLeft.bind(this));
|
||||
this.input.keyboard.on("keydown-RIGHT", this.moveToRight.bind(this));
|
||||
this.input.keyboard.on("keydown-LEFT", this.moveToLeft.bind(this));
|
||||
|
||||
if (localUserStore.getCompanion()) {
|
||||
const companionIndex = this.companionModels.findIndex((companion) => companion.name === localUserStore.getCompanion());
|
||||
const companionIndex = this.companionModels.findIndex(
|
||||
(companion) => companion.name === localUserStore.getCompanion()
|
||||
);
|
||||
if (companionIndex > -1 || companionIndex < this.companions.length) {
|
||||
this.currentCompanion = companionIndex;
|
||||
this.selectedCompanion = this.companions[companionIndex];
|
||||
@ -93,22 +93,22 @@ export class SelectCompanionScene extends ResizableScene {
|
||||
// next scene
|
||||
this.scene.stop(SelectCompanionSceneName);
|
||||
waScaleManager.restoreZoom();
|
||||
gameManager.tryResumingGame(this, EnableCameraSceneName);
|
||||
gameManager.tryResumingGame(EnableCameraSceneName);
|
||||
this.scene.remove(SelectCompanionSceneName);
|
||||
selectCompanionSceneVisibleStore.set(false);
|
||||
}
|
||||
|
||||
private createCurrentCompanion(): void {
|
||||
for (let i = 0; i < this.companionModels.length; i++) {
|
||||
const companionResource = this.companionModels[i]
|
||||
const companionResource = this.companionModels[i];
|
||||
const [middleX, middleY] = this.getCompanionPosition();
|
||||
const companion = this.physics.add.sprite(middleX, middleY, companionResource.name, 0);
|
||||
this.setUpCompanion(companion, i);
|
||||
this.anims.create({
|
||||
key: companionResource.name,
|
||||
frames: this.anims.generateFrameNumbers(companionResource.name, {start: 0, end: 2,}),
|
||||
frames: this.anims.generateFrameNumbers(companionResource.name, { start: 0, end: 2 }),
|
||||
frameRate: 10,
|
||||
repeat: -1
|
||||
repeat: -1,
|
||||
});
|
||||
|
||||
companion.setInteractive().on("pointerdown", () => {
|
||||
@ -149,7 +149,7 @@ export class SelectCompanionScene extends ResizableScene {
|
||||
}
|
||||
|
||||
public moveToRight() {
|
||||
if(this.currentCompanion === (this.companions.length - 1)){
|
||||
if (this.currentCompanion === this.companions.length - 1) {
|
||||
return;
|
||||
}
|
||||
this.currentCompanion += 1;
|
||||
@ -174,50 +174,47 @@ export class SelectCompanionScene extends ResizableScene {
|
||||
if (this.currentCompanion !== num) {
|
||||
companionVisible = false;
|
||||
}
|
||||
if( num === (this.currentCompanion + 1) ){
|
||||
if (num === this.currentCompanion + 1) {
|
||||
companionY -= deltaY;
|
||||
companionX += deltaX;
|
||||
companionScale = 0.8;
|
||||
companionOpactity = 0.6;
|
||||
companionVisible = true;
|
||||
}
|
||||
if( num === (this.currentCompanion + 2) ){
|
||||
if (num === this.currentCompanion + 2) {
|
||||
companionY -= deltaY;
|
||||
companionX += (deltaX * 2);
|
||||
companionX += deltaX * 2;
|
||||
companionScale = 0.8;
|
||||
companionOpactity = 0.6;
|
||||
companionVisible = true;
|
||||
}
|
||||
if( num === (this.currentCompanion - 1) ){
|
||||
if (num === this.currentCompanion - 1) {
|
||||
companionY -= deltaY;
|
||||
companionX -= deltaX;
|
||||
companionScale = 0.8;
|
||||
companionOpactity = 0.6;
|
||||
companionVisible = true;
|
||||
}
|
||||
if( num === (this.currentCompanion - 2) ){
|
||||
if (num === this.currentCompanion - 2) {
|
||||
companionY -= deltaY;
|
||||
companionX -= (deltaX * 2);
|
||||
companionX -= deltaX * 2;
|
||||
companionScale = 0.8;
|
||||
companionOpactity = 0.6;
|
||||
companionVisible = true;
|
||||
}
|
||||
return {companionX, companionY, companionScale, companionOpactity, companionVisible}
|
||||
return { companionX, companionY, companionScale, companionOpactity, companionVisible };
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns pixel position by on column and row number
|
||||
*/
|
||||
private getCompanionPosition(): [number, number] {
|
||||
return [
|
||||
this.game.renderer.width / 2,
|
||||
this.game.renderer.height / 3
|
||||
];
|
||||
return [this.game.renderer.width / 2, this.game.renderer.height / 3];
|
||||
}
|
||||
|
||||
private setUpCompanion(companion: Phaser.Physics.Arcade.Sprite, numero: number) {
|
||||
|
||||
const {companionX, companionY, companionScale, companionOpactity, companionVisible} = this.defineSetupCompanion(numero);
|
||||
const { companionX, companionY, companionScale, companionOpactity, companionVisible } =
|
||||
this.defineSetupCompanion(numero);
|
||||
companion.setBounce(0.2);
|
||||
companion.setCollideWorldBounds(true);
|
||||
companion.setVisible(companionVisible);
|
||||
|
||||
@ -1,430 +0,0 @@
|
||||
import { LoginScene, LoginSceneName } from "../Login/LoginScene";
|
||||
import { SelectCharacterScene, SelectCharacterSceneName } from "../Login/SelectCharacterScene";
|
||||
import { SelectCompanionScene, SelectCompanionSceneName } from "../Login/SelectCompanionScene";
|
||||
import { gameManager } from "../Game/GameManager";
|
||||
import { localUserStore } from "../../Connexion/LocalUserStore";
|
||||
import { gameReportKey, gameReportRessource, ReportMenu } from "./ReportMenu";
|
||||
import { connectionManager } from "../../Connexion/ConnectionManager";
|
||||
import { GameConnexionTypes } from "../../Url/UrlManager";
|
||||
import { menuIconVisible } from "../../Stores/MenuStore";
|
||||
import { videoConstraintStore } from "../../Stores/MediaStore";
|
||||
import { showReportScreenStore } from "../../Stores/ShowReportScreenStore";
|
||||
import { HtmlUtils } from "../../WebRtc/HtmlUtils";
|
||||
import { iframeListener } from "../../Api/IframeListener";
|
||||
import { Subscription } from "rxjs";
|
||||
import { registerMenuCommandStream } from "../../Api/Events/ui/MenuItemRegisterEvent";
|
||||
import { sendMenuClickedEvent } from "../../Api/iframe/Ui/MenuItem";
|
||||
import { consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
|
||||
import { get } from "svelte/store";
|
||||
import { playersStore } from "../../Stores/PlayersStore";
|
||||
import { mediaManager } from "../../WebRtc/MediaManager";
|
||||
import { chatVisibilityStore } from "../../Stores/ChatStore";
|
||||
import { ADMIN_URL } from "../../Enum/EnvironmentVariable";
|
||||
|
||||
export const MenuSceneName = "MenuScene";
|
||||
const gameMenuKey = "gameMenu";
|
||||
const gameMenuIconKey = "gameMenuIcon";
|
||||
const gameSettingsMenuKey = "gameSettingsMenu";
|
||||
const gameShare = "gameShare";
|
||||
|
||||
const closedSideMenuX = -1000;
|
||||
const openedSideMenuX = 0;
|
||||
|
||||
/**
|
||||
* The scene that manages the game menu, rendered using a DOM element.
|
||||
*/
|
||||
export class MenuScene extends Phaser.Scene {
|
||||
private menuElement!: Phaser.GameObjects.DOMElement;
|
||||
private gameQualityMenuElement!: Phaser.GameObjects.DOMElement;
|
||||
private gameShareElement!: Phaser.GameObjects.DOMElement;
|
||||
private gameReportElement!: ReportMenu;
|
||||
private sideMenuOpened = false;
|
||||
private settingsMenuOpened = false;
|
||||
private gameShareOpened = false;
|
||||
private gameQualityValue: number;
|
||||
private videoQualityValue: number;
|
||||
private menuButton!: Phaser.GameObjects.DOMElement;
|
||||
private subscriptions = new Subscription();
|
||||
constructor() {
|
||||
super({ key: MenuSceneName });
|
||||
|
||||
this.gameQualityValue = localUserStore.getGameQualityValue();
|
||||
this.videoQualityValue = localUserStore.getVideoQualityValue();
|
||||
|
||||
this.subscriptions.add(
|
||||
registerMenuCommandStream.subscribe((menuCommand) => {
|
||||
this.addMenuOption(menuCommand);
|
||||
})
|
||||
);
|
||||
|
||||
this.subscriptions.add(
|
||||
iframeListener.unregisterMenuCommandStream.subscribe((menuCommand) => {
|
||||
this.destroyMenu(menuCommand);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
reset() {
|
||||
const addedMenuItems = [...this.menuElement.node.querySelectorAll(".fromApi")];
|
||||
for (let index = addedMenuItems.length - 1; index >= 0; index--) {
|
||||
addedMenuItems[index].remove();
|
||||
}
|
||||
}
|
||||
|
||||
public addMenuOption(menuText: string) {
|
||||
const wrappingSection = document.createElement("section");
|
||||
const escapedHtml = HtmlUtils.escapeHtml(menuText);
|
||||
wrappingSection.innerHTML = `<button class="fromApi" id="${escapedHtml}">${escapedHtml}</button>`;
|
||||
const menuItemContainer = this.menuElement.node.querySelector("#gameMenu main");
|
||||
if (menuItemContainer) {
|
||||
menuItemContainer.querySelector(`#${escapedHtml}.fromApi`)?.remove();
|
||||
menuItemContainer.insertBefore(wrappingSection, menuItemContainer.querySelector("#socialLinks"));
|
||||
}
|
||||
}
|
||||
|
||||
preload() {
|
||||
this.load.html(gameMenuKey, "resources/html/gameMenu.html");
|
||||
this.load.html(gameMenuIconKey, "resources/html/gameMenuIcon.html");
|
||||
this.load.html(gameSettingsMenuKey, "resources/html/gameQualityMenu.html");
|
||||
this.load.html(gameShare, "resources/html/gameShare.html");
|
||||
this.load.html(gameReportKey, gameReportRessource);
|
||||
}
|
||||
|
||||
create() {
|
||||
menuIconVisible.set(true);
|
||||
this.menuElement = this.add.dom(closedSideMenuX, 30).createFromCache(gameMenuKey);
|
||||
this.menuElement.setOrigin(0);
|
||||
MenuScene.revealMenusAfterInit(this.menuElement, "gameMenu");
|
||||
|
||||
if (mediaManager.hasNotification()) {
|
||||
HtmlUtils.getElementByIdOrFail("enableNotification").hidden = true;
|
||||
}
|
||||
|
||||
const middleX = window.innerWidth / 3 - 298;
|
||||
this.gameQualityMenuElement = this.add.dom(middleX, -400).createFromCache(gameSettingsMenuKey);
|
||||
MenuScene.revealMenusAfterInit(this.gameQualityMenuElement, "gameQuality");
|
||||
|
||||
this.gameShareElement = this.add.dom(middleX, -400).createFromCache(gameShare);
|
||||
MenuScene.revealMenusAfterInit(this.gameShareElement, gameShare);
|
||||
this.gameShareElement.addListener("click");
|
||||
this.gameShareElement.on("click", (event: MouseEvent) => {
|
||||
event.preventDefault();
|
||||
if ((event?.target as HTMLInputElement).id === "gameShareFormSubmit") {
|
||||
this.copyLink();
|
||||
} else if ((event?.target as HTMLInputElement).id === "gameShareFormCancel") {
|
||||
this.closeGameShare();
|
||||
}
|
||||
});
|
||||
|
||||
this.gameReportElement = new ReportMenu(
|
||||
this,
|
||||
connectionManager.getConnexionType === GameConnexionTypes.anonymous
|
||||
);
|
||||
showReportScreenStore.subscribe((user) => {
|
||||
if (user !== null) {
|
||||
this.closeAll();
|
||||
const uuid = playersStore.getPlayerById(user.userId)?.userUuid;
|
||||
if (uuid === undefined) {
|
||||
throw new Error("Could not find UUID for user with ID " + user.userId);
|
||||
}
|
||||
this.gameReportElement.open(uuid, user.userName);
|
||||
}
|
||||
});
|
||||
|
||||
this.input.keyboard.on("keyup-TAB", () => {
|
||||
this.sideMenuOpened ? this.closeSideMenu() : this.openSideMenu();
|
||||
});
|
||||
this.menuButton = this.add.dom(0, 0).createFromCache(gameMenuIconKey);
|
||||
this.menuButton.addListener("click");
|
||||
this.menuButton.on("click", () => {
|
||||
this.sideMenuOpened ? this.closeSideMenu() : this.openSideMenu();
|
||||
});
|
||||
|
||||
this.menuElement.addListener("click");
|
||||
this.menuElement.on("click", this.onMenuClick.bind(this));
|
||||
|
||||
chatVisibilityStore.subscribe((v) => {
|
||||
this.menuButton.setVisible(!v);
|
||||
});
|
||||
}
|
||||
|
||||
//todo put this method in a parent menuElement class
|
||||
static revealMenusAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) {
|
||||
//Dom elements will appear inside the viewer screen when creating before being moved out of it, which create a flicker effect.
|
||||
//To prevent this, we put a 'hidden' attribute on the root element, we remove it only after the init is done.
|
||||
setTimeout(() => {
|
||||
(menuElement.getChildByID(rootDomId) as HTMLElement).hidden = false;
|
||||
}, 250);
|
||||
}
|
||||
|
||||
public revealMenuIcon(): void {
|
||||
//TODO fix me: add try catch because at the same time, 'this.menuButton' variable doesn't exist and there is error on 'getChildByID' function
|
||||
try {
|
||||
(this.menuButton.getChildByID("menuIcon") as HTMLElement).hidden = false;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
openSideMenu() {
|
||||
if (this.sideMenuOpened) return;
|
||||
this.closeAll();
|
||||
this.sideMenuOpened = true;
|
||||
this.menuButton.getChildByID("openMenuButton").innerHTML = "X";
|
||||
const connection = gameManager.getCurrentGameScene(this).connection;
|
||||
if (connection && connection.isAdmin()) {
|
||||
const adminSection = this.menuElement.getChildByID("adminConsoleSection") as HTMLElement;
|
||||
adminSection.hidden = false;
|
||||
}
|
||||
//TODO bind with future metadata of card
|
||||
//if (connectionManager.getConnexionType === GameConnexionTypes.anonymous){
|
||||
const adminSection = this.menuElement.getChildByID("socialLinks") as HTMLElement;
|
||||
adminSection.hidden = false;
|
||||
//}
|
||||
this.tweens.add({
|
||||
targets: this.menuElement,
|
||||
x: openedSideMenuX,
|
||||
duration: 500,
|
||||
ease: "Power3",
|
||||
});
|
||||
}
|
||||
|
||||
private closeSideMenu(): void {
|
||||
if (!this.sideMenuOpened) return;
|
||||
this.sideMenuOpened = false;
|
||||
this.closeAll();
|
||||
this.menuButton.getChildByID("openMenuButton").innerHTML = `<img src="/static/images/menu.svg">`;
|
||||
consoleGlobalMessageManagerVisibleStore.set(false);
|
||||
this.tweens.add({
|
||||
targets: this.menuElement,
|
||||
x: closedSideMenuX,
|
||||
duration: 500,
|
||||
ease: "Power3",
|
||||
});
|
||||
}
|
||||
|
||||
private openGameSettingsMenu(): void {
|
||||
if (this.settingsMenuOpened) {
|
||||
this.closeGameQualityMenu();
|
||||
return;
|
||||
}
|
||||
//close all
|
||||
this.closeAll();
|
||||
|
||||
this.settingsMenuOpened = true;
|
||||
|
||||
const gameQualitySelect = this.gameQualityMenuElement.getChildByID("select-game-quality") as HTMLInputElement;
|
||||
gameQualitySelect.value = "" + this.gameQualityValue;
|
||||
const videoQualitySelect = this.gameQualityMenuElement.getChildByID("select-video-quality") as HTMLInputElement;
|
||||
videoQualitySelect.value = "" + this.videoQualityValue;
|
||||
|
||||
this.gameQualityMenuElement.addListener("click");
|
||||
this.gameQualityMenuElement.on("click", (event: MouseEvent) => {
|
||||
event.preventDefault();
|
||||
if ((event?.target as HTMLInputElement).id === "gameQualityFormSubmit") {
|
||||
const gameQualitySelect = this.gameQualityMenuElement.getChildByID(
|
||||
"select-game-quality"
|
||||
) as HTMLInputElement;
|
||||
const videoQualitySelect = this.gameQualityMenuElement.getChildByID(
|
||||
"select-video-quality"
|
||||
) as HTMLInputElement;
|
||||
this.saveSetting(parseInt(gameQualitySelect.value), parseInt(videoQualitySelect.value));
|
||||
} else if ((event?.target as HTMLInputElement).id === "gameQualityFormCancel") {
|
||||
this.closeGameQualityMenu();
|
||||
}
|
||||
});
|
||||
|
||||
let middleY = this.scale.height / 2 - 392 / 2;
|
||||
if (middleY < 0) {
|
||||
middleY = 0;
|
||||
}
|
||||
let middleX = this.scale.width / 2 - 457 / 2;
|
||||
if (middleX < 0) {
|
||||
middleX = 0;
|
||||
}
|
||||
this.tweens.add({
|
||||
targets: this.gameQualityMenuElement,
|
||||
y: middleY,
|
||||
x: middleX,
|
||||
duration: 1000,
|
||||
ease: "Power3",
|
||||
});
|
||||
}
|
||||
|
||||
private closeGameQualityMenu(): void {
|
||||
if (!this.settingsMenuOpened) return;
|
||||
this.settingsMenuOpened = false;
|
||||
|
||||
this.gameQualityMenuElement.removeListener("click");
|
||||
this.tweens.add({
|
||||
targets: this.gameQualityMenuElement,
|
||||
y: -400,
|
||||
duration: 1000,
|
||||
ease: "Power3",
|
||||
});
|
||||
}
|
||||
|
||||
private openGameShare(): void {
|
||||
if (this.gameShareOpened) {
|
||||
this.closeGameShare();
|
||||
return;
|
||||
}
|
||||
//close all
|
||||
this.closeAll();
|
||||
|
||||
const gameShareLink = this.gameShareElement.getChildByID("gameShareLink") as HTMLInputElement;
|
||||
gameShareLink.value = location.toString();
|
||||
|
||||
this.gameShareOpened = true;
|
||||
|
||||
let middleY = this.scale.height / 2 - 85;
|
||||
if (middleY < 0) {
|
||||
middleY = 0;
|
||||
}
|
||||
let middleX = this.scale.width / 2 - 200;
|
||||
if (middleX < 0) {
|
||||
middleX = 0;
|
||||
}
|
||||
this.tweens.add({
|
||||
targets: this.gameShareElement,
|
||||
y: middleY,
|
||||
x: middleX,
|
||||
duration: 1000,
|
||||
ease: "Power3",
|
||||
});
|
||||
}
|
||||
|
||||
private closeGameShare(): void {
|
||||
const gameShareInfo = this.gameShareElement.getChildByID("gameShareInfo") as HTMLParagraphElement;
|
||||
gameShareInfo.innerText = "";
|
||||
gameShareInfo.style.display = "none";
|
||||
this.gameShareOpened = false;
|
||||
this.tweens.add({
|
||||
targets: this.gameShareElement,
|
||||
y: -400,
|
||||
duration: 1000,
|
||||
ease: "Power3",
|
||||
});
|
||||
}
|
||||
|
||||
private onMenuClick(event: MouseEvent) {
|
||||
const htmlMenuItem = event?.target as HTMLInputElement;
|
||||
if (htmlMenuItem.classList.contains("not-button")) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
|
||||
if (htmlMenuItem.classList.contains("fromApi")) {
|
||||
sendMenuClickedEvent(htmlMenuItem.id);
|
||||
return;
|
||||
}
|
||||
|
||||
switch ((event?.target as HTMLInputElement).id) {
|
||||
case "changeNameButton":
|
||||
this.closeSideMenu();
|
||||
gameManager.leaveGame(this, LoginSceneName, new LoginScene());
|
||||
break;
|
||||
case "sparkButton":
|
||||
this.gotToCreateMapPage();
|
||||
break;
|
||||
case "changeSkinButton":
|
||||
this.closeSideMenu();
|
||||
gameManager.leaveGame(this, SelectCharacterSceneName, new SelectCharacterScene());
|
||||
break;
|
||||
case "changeCompanionButton":
|
||||
this.closeSideMenu();
|
||||
gameManager.leaveGame(this, SelectCompanionSceneName, new SelectCompanionScene());
|
||||
break;
|
||||
case "closeButton":
|
||||
this.closeSideMenu();
|
||||
break;
|
||||
case "shareButton":
|
||||
this.openGameShare();
|
||||
break;
|
||||
case "editGameSettingsButton":
|
||||
this.openGameSettingsMenu();
|
||||
break;
|
||||
case "oidcLogin":
|
||||
connectionManager.loadOpenIDScreen();
|
||||
break;
|
||||
case "toggleFullscreen":
|
||||
this.toggleFullscreen();
|
||||
break;
|
||||
case "enableNotification":
|
||||
this.enableNotification();
|
||||
break;
|
||||
case "adminConsoleButton":
|
||||
if (get(consoleGlobalMessageManagerVisibleStore)) {
|
||||
consoleGlobalMessageManagerVisibleStore.set(false);
|
||||
} else {
|
||||
consoleGlobalMessageManagerVisibleStore.set(true);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private async copyLink() {
|
||||
await navigator.clipboard.writeText(location.toString());
|
||||
const gameShareInfo = this.gameShareElement.getChildByID("gameShareInfo") as HTMLParagraphElement;
|
||||
gameShareInfo.innerText = "Link copied, you can share it now!";
|
||||
gameShareInfo.style.display = "block";
|
||||
}
|
||||
|
||||
private saveSetting(valueGame: number, valueVideo: number) {
|
||||
if (valueGame !== this.gameQualityValue) {
|
||||
this.gameQualityValue = valueGame;
|
||||
localUserStore.setGameQualityValue(valueGame);
|
||||
window.location.reload();
|
||||
}
|
||||
if (valueVideo !== this.videoQualityValue) {
|
||||
this.videoQualityValue = valueVideo;
|
||||
localUserStore.setVideoQualityValue(valueVideo);
|
||||
videoConstraintStore.setFrameRate(valueVideo);
|
||||
}
|
||||
this.closeGameQualityMenu();
|
||||
}
|
||||
|
||||
private gotToCreateMapPage() {
|
||||
//const sparkHost = 'https://'+window.location.host.replace('play.', '')+'/choose-map.html';
|
||||
//TODO fix me: this button can to send us on WorkAdventure BO.
|
||||
//const sparkHost = ADMIN_URL + "/getting-started";
|
||||
|
||||
//The redirection must be only on workadventu.re domain
|
||||
//To day the domain staging cannot be use by customer
|
||||
const sparkHost = "https://workadventu.re/getting-started";
|
||||
window.open(sparkHost, "_blank");
|
||||
}
|
||||
|
||||
private closeAll() {
|
||||
this.closeGameQualityMenu();
|
||||
this.closeGameShare();
|
||||
this.gameReportElement.close();
|
||||
}
|
||||
|
||||
private toggleFullscreen() {
|
||||
const body = document.querySelector("body");
|
||||
if (body) {
|
||||
if (document.fullscreenElement ?? document.fullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else {
|
||||
body.requestFullscreen();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public destroyMenu(menu: string) {
|
||||
this.menuElement.getChildByID(menu).remove();
|
||||
}
|
||||
|
||||
public isDirty(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
private enableNotification() {
|
||||
mediaManager.requestNotification().then(() => {
|
||||
if (mediaManager.hasNotification()) {
|
||||
HtmlUtils.getElementByIdOrFail("enableNotification").hidden = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,120 +0,0 @@
|
||||
import { MenuScene } from "./MenuScene";
|
||||
import { gameManager } from "../Game/GameManager";
|
||||
import { blackListManager } from "../../WebRtc/BlackListManager";
|
||||
import { playersStore } from "../../Stores/PlayersStore";
|
||||
|
||||
export const gameReportKey = "gameReport";
|
||||
export const gameReportRessource = "resources/html/gameReport.html";
|
||||
|
||||
export class ReportMenu extends Phaser.GameObjects.DOMElement {
|
||||
private opened: boolean = false;
|
||||
|
||||
private userUuid!: string;
|
||||
private userName!: string | undefined;
|
||||
private anonymous: boolean;
|
||||
|
||||
constructor(scene: Phaser.Scene, anonymous: boolean) {
|
||||
super(scene, -2000, -2000);
|
||||
this.anonymous = anonymous;
|
||||
this.createFromCache(gameReportKey);
|
||||
|
||||
if (this.anonymous) {
|
||||
const divToHide = this.getChildByID("reportSection") as HTMLElement;
|
||||
divToHide.hidden = true;
|
||||
const textToHide = this.getChildByID("askActionP") as HTMLElement;
|
||||
textToHide.hidden = true;
|
||||
}
|
||||
|
||||
scene.add.existing(this);
|
||||
MenuScene.revealMenusAfterInit(this, gameReportKey);
|
||||
|
||||
this.addListener("click");
|
||||
this.on("click", (event: MouseEvent) => {
|
||||
event.preventDefault();
|
||||
if ((event?.target as HTMLInputElement).id === "gameReportFormSubmit") {
|
||||
this.submitReport();
|
||||
} else if ((event?.target as HTMLInputElement).id === "gameReportFormCancel") {
|
||||
this.close();
|
||||
} else if ((event?.target as HTMLInputElement).id === "toggleBlockButton") {
|
||||
this.toggleBlock();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public open(userUuid: string, userName: string | undefined): void {
|
||||
if (this.opened) {
|
||||
this.close();
|
||||
return;
|
||||
}
|
||||
|
||||
this.userUuid = userUuid;
|
||||
this.userName = userName;
|
||||
|
||||
const mainEl = this.getChildByID("gameReport") as HTMLElement;
|
||||
this.x = this.getCenteredX(mainEl);
|
||||
this.y = this.getHiddenY(mainEl);
|
||||
|
||||
const gameTitleReport = this.getChildByID("nameReported") as HTMLElement;
|
||||
gameTitleReport.innerText = userName || "";
|
||||
|
||||
const blockButton = this.getChildByID("toggleBlockButton") as HTMLElement;
|
||||
blockButton.innerText = blackListManager.isBlackListed(this.userUuid) ? "Unblock this user" : "Block this user";
|
||||
|
||||
this.opened = true;
|
||||
|
||||
gameManager.getCurrentGameScene(this.scene).userInputManager.disableControls();
|
||||
|
||||
this.scene.tweens.add({
|
||||
targets: this,
|
||||
y: this.getCenteredY(mainEl),
|
||||
duration: 1000,
|
||||
ease: "Power3",
|
||||
});
|
||||
}
|
||||
|
||||
public close(): void {
|
||||
gameManager.getCurrentGameScene(this.scene).userInputManager.restoreControls();
|
||||
this.opened = false;
|
||||
const mainEl = this.getChildByID("gameReport") as HTMLElement;
|
||||
this.scene.tweens.add({
|
||||
targets: this,
|
||||
y: this.getHiddenY(mainEl),
|
||||
duration: 1000,
|
||||
ease: "Power3",
|
||||
});
|
||||
}
|
||||
|
||||
//todo: into a parent class?
|
||||
private getCenteredX(mainEl: HTMLElement): number {
|
||||
return window.innerWidth / 4 - mainEl.clientWidth / 2;
|
||||
}
|
||||
private getHiddenY(mainEl: HTMLElement): number {
|
||||
return -mainEl.clientHeight - 50;
|
||||
}
|
||||
private getCenteredY(mainEl: HTMLElement): number {
|
||||
return window.innerHeight / 4 - mainEl.clientHeight / 2;
|
||||
}
|
||||
|
||||
private toggleBlock(): void {
|
||||
!blackListManager.isBlackListed(this.userUuid)
|
||||
? blackListManager.blackList(this.userUuid)
|
||||
: blackListManager.cancelBlackList(this.userUuid);
|
||||
this.close();
|
||||
}
|
||||
|
||||
private submitReport(): void {
|
||||
const gamePError = this.getChildByID("gameReportErr") as HTMLParagraphElement;
|
||||
gamePError.innerText = "";
|
||||
gamePError.style.display = "none";
|
||||
const gameTextArea = this.getChildByID("gameReportInput") as HTMLInputElement;
|
||||
if (!gameTextArea || !gameTextArea.value) {
|
||||
gamePError.innerText = "Report message cannot to be empty.";
|
||||
gamePError.style.display = "block";
|
||||
return;
|
||||
}
|
||||
gameManager
|
||||
.getCurrentGameScene(this.scene)
|
||||
.connection?.emitReportPlayerMessage(this.userUuid, gameTextArea.value);
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
@ -90,7 +90,11 @@ export class ErrorScene extends Phaser.Scene {
|
||||
// Axios HTTP error
|
||||
// client received an error response (5xx, 4xx)
|
||||
scene.start(ErrorSceneName, {
|
||||
title: "HTTP " + error.response.status + " - " + error.response.statusText,
|
||||
title:
|
||||
"HTTP " +
|
||||
error.response.status +
|
||||
" - " +
|
||||
(error.response.data ? error.response.data : error.response.statusText),
|
||||
subTitle: "An error occurred while accessing URL:",
|
||||
message: error.response.config.url,
|
||||
});
|
||||
|
||||
@ -170,7 +170,7 @@ function createVideoConstraintStore() {
|
||||
setFrameRate: (frameRate: number) =>
|
||||
update((constraints) => {
|
||||
constraints.frameRate = { ideal: frameRate };
|
||||
|
||||
localUserStore.setVideoQualityValue(frameRate);
|
||||
return constraints;
|
||||
}),
|
||||
};
|
||||
@ -324,14 +324,11 @@ export type LocalStreamStoreValue = StreamSuccessValue | StreamErrorValue;
|
||||
interface StreamSuccessValue {
|
||||
type: "success";
|
||||
stream: MediaStream | null;
|
||||
// The constraints that we got (and not the one that have been requested)
|
||||
constraints: MediaStreamConstraints;
|
||||
}
|
||||
|
||||
interface StreamErrorValue {
|
||||
type: "error";
|
||||
error: Error;
|
||||
constraints: MediaStreamConstraints;
|
||||
}
|
||||
|
||||
let currentStream: MediaStream | null = null;
|
||||
@ -339,10 +336,13 @@ let currentStream: MediaStream | null = null;
|
||||
/**
|
||||
* Stops the camera from filming
|
||||
*/
|
||||
function stopCamera(): void {
|
||||
function applyCameraConstraints(currentStream: MediaStream | null, constraints: MediaTrackConstraints | boolean): void {
|
||||
if (currentStream) {
|
||||
for (const track of currentStream.getVideoTracks()) {
|
||||
track.stop();
|
||||
track.enabled = constraints !== false;
|
||||
if (constraints && constraints !== true) {
|
||||
track.applyConstraints(constraints);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -350,10 +350,16 @@ function stopCamera(): void {
|
||||
/**
|
||||
* Stops the microphone from listening
|
||||
*/
|
||||
function stopMicrophone(): void {
|
||||
function applyMicrophoneConstraints(
|
||||
currentStream: MediaStream | null,
|
||||
constraints: MediaTrackConstraints | boolean
|
||||
): void {
|
||||
if (currentStream) {
|
||||
for (const track of currentStream.getAudioTracks()) {
|
||||
track.stop();
|
||||
track.enabled = constraints !== false;
|
||||
if (constraints && constraints !== true) {
|
||||
track.applyConstraints(constraints);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -372,52 +378,38 @@ export const localStreamStore = derived<Readable<MediaStreamConstraints>, LocalS
|
||||
set({
|
||||
type: "error",
|
||||
error: new Error("Unable to access your camera or microphone. You need to use a HTTPS connection."),
|
||||
constraints,
|
||||
});
|
||||
return;
|
||||
} else if (isIOS()) {
|
||||
set({
|
||||
type: "error",
|
||||
error: new WebviewOnOldIOS(),
|
||||
constraints,
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
set({
|
||||
type: "error",
|
||||
error: new BrowserTooOldError(),
|
||||
constraints,
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (constraints.audio === false) {
|
||||
stopMicrophone();
|
||||
}
|
||||
if (constraints.video === false) {
|
||||
stopCamera();
|
||||
}
|
||||
applyMicrophoneConstraints(currentStream, constraints.audio || false);
|
||||
applyCameraConstraints(currentStream, constraints.video || false);
|
||||
|
||||
if (constraints.audio === false && constraints.video === false) {
|
||||
currentStream = null;
|
||||
if (currentStream === null) {
|
||||
// we need to assign a first value to the stream because getUserMedia is async
|
||||
set({
|
||||
type: "success",
|
||||
stream: null,
|
||||
constraints,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
stopMicrophone();
|
||||
stopCamera();
|
||||
currentStream = await navigator.mediaDevices.getUserMedia(constraints);
|
||||
set({
|
||||
type: "success",
|
||||
stream: currentStream,
|
||||
constraints,
|
||||
});
|
||||
return;
|
||||
} catch (e) {
|
||||
@ -431,7 +423,6 @@ export const localStreamStore = derived<Readable<MediaStreamConstraints>, LocalS
|
||||
set({
|
||||
type: "error",
|
||||
error: e,
|
||||
constraints,
|
||||
});
|
||||
// Let's try without video constraints
|
||||
requestedCameraState.disableWebcam();
|
||||
@ -444,50 +435,39 @@ export const localStreamStore = derived<Readable<MediaStreamConstraints>, LocalS
|
||||
set({
|
||||
type: "error",
|
||||
error: e,
|
||||
constraints,
|
||||
});
|
||||
}
|
||||
|
||||
/*constraints.video = false;
|
||||
if (constraints.audio === false) {
|
||||
console.info("Error. Unable to get microphone and/or camera access.", $mediaStreamConstraintsStore, e);
|
||||
set({
|
||||
type: 'error',
|
||||
error: e,
|
||||
constraints
|
||||
});
|
||||
// Let's make as if the user did not ask.
|
||||
requestedCameraState.disableWebcam();
|
||||
} else {
|
||||
console.info("Error. Unable to get microphone and/or camera access. Trying audio only.", $mediaStreamConstraintsStore, e);
|
||||
try {
|
||||
currentStream = await navigator.mediaDevices.getUserMedia(constraints);
|
||||
set({
|
||||
type: 'success',
|
||||
stream: currentStream,
|
||||
constraints
|
||||
});
|
||||
return;
|
||||
} catch (e2) {
|
||||
console.info("Error. Unable to get microphone fallback access.", $mediaStreamConstraintsStore, e2);
|
||||
set({
|
||||
type: 'error',
|
||||
error: e,
|
||||
constraints
|
||||
});
|
||||
}
|
||||
}*/
|
||||
}
|
||||
})();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export interface ObtainedMediaStreamConstraints {
|
||||
video: boolean;
|
||||
audio: boolean;
|
||||
}
|
||||
|
||||
let obtainedMediaConstraint: ObtainedMediaStreamConstraints = {
|
||||
audio: false,
|
||||
video: false,
|
||||
};
|
||||
/**
|
||||
* A store containing the real active media constrained (not the one requested by the user, but the one we got from the system)
|
||||
* A store containing the actual states of audio and video (activated or deactivated)
|
||||
*/
|
||||
export const obtainedMediaConstraintStore = derived(localStreamStore, ($localStreamStore) => {
|
||||
return $localStreamStore.constraints;
|
||||
});
|
||||
export const obtainedMediaConstraintStore = derived<Readable<MediaStreamConstraints>, ObtainedMediaStreamConstraints>(
|
||||
mediaStreamConstraintsStore,
|
||||
($mediaStreamConstraintsStore, set) => {
|
||||
const newObtainedMediaConstraint = {
|
||||
video: !!$mediaStreamConstraintsStore.video,
|
||||
audio: !!$mediaStreamConstraintsStore.audio,
|
||||
};
|
||||
if (newObtainedMediaConstraint !== obtainedMediaConstraint) {
|
||||
obtainedMediaConstraint = newObtainedMediaConstraint;
|
||||
set(obtainedMediaConstraint);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* Device list
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
import { writable } from "svelte/store";
|
||||
import { get, writable } from "svelte/store";
|
||||
import Timeout = NodeJS.Timeout;
|
||||
import { userIsAdminStore } from "./GameStore";
|
||||
import { CONTACT_URL } from "../Enum/EnvironmentVariable";
|
||||
|
||||
export const menuIconVisible = writable(false);
|
||||
export const menuIconVisiblilityStore = writable(false);
|
||||
export const menuVisiblilityStore = writable(false);
|
||||
export const menuInputFocusStore = writable(false);
|
||||
|
||||
let warningContainerTimeout: Timeout | null = null;
|
||||
function createWarningContainerStore() {
|
||||
@ -21,3 +25,90 @@ function createWarningContainerStore() {
|
||||
}
|
||||
|
||||
export const warningContainerStore = createWarningContainerStore();
|
||||
|
||||
export enum SubMenusInterface {
|
||||
settings = "Settings",
|
||||
profile = "Profile",
|
||||
createMap = "Create a Map",
|
||||
aboutRoom = "About the Room",
|
||||
globalMessages = "Global Messages",
|
||||
contact = "Contact",
|
||||
}
|
||||
|
||||
function createSubMenusStore() {
|
||||
const { subscribe, update } = writable<string[]>([
|
||||
SubMenusInterface.settings,
|
||||
SubMenusInterface.profile,
|
||||
SubMenusInterface.createMap,
|
||||
SubMenusInterface.aboutRoom,
|
||||
SubMenusInterface.globalMessages,
|
||||
SubMenusInterface.contact,
|
||||
]);
|
||||
|
||||
return {
|
||||
subscribe,
|
||||
addMenu(menuCommand: string) {
|
||||
update((menuList: string[]) => {
|
||||
if (!menuList.find((menu) => menu === menuCommand)) {
|
||||
menuList.push(menuCommand);
|
||||
}
|
||||
return menuList;
|
||||
});
|
||||
},
|
||||
removeMenu(menuCommand: string) {
|
||||
update((menuList: string[]) => {
|
||||
const index = menuList.findIndex((menu) => menu === menuCommand);
|
||||
if (index !== -1) {
|
||||
menuList.splice(index, 1);
|
||||
}
|
||||
return menuList;
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export const subMenusStore = createSubMenusStore();
|
||||
|
||||
function checkSubMenuToShow() {
|
||||
if (!get(userIsAdminStore)) {
|
||||
subMenusStore.removeMenu(SubMenusInterface.globalMessages);
|
||||
}
|
||||
|
||||
if (CONTACT_URL === undefined) {
|
||||
subMenusStore.removeMenu(SubMenusInterface.contact);
|
||||
}
|
||||
}
|
||||
|
||||
checkSubMenuToShow();
|
||||
|
||||
export const customMenuIframe = new Map<string, { url: string; allowApi: boolean }>();
|
||||
|
||||
export function handleMenuRegistrationEvent(
|
||||
menuName: string,
|
||||
iframeUrl: string | undefined = undefined,
|
||||
source: string | undefined = undefined,
|
||||
options: { allowApi: boolean }
|
||||
) {
|
||||
if (get(subMenusStore).includes(menuName)) {
|
||||
console.warn("The menu " + menuName + " already exist.");
|
||||
return;
|
||||
}
|
||||
|
||||
subMenusStore.addMenu(menuName);
|
||||
|
||||
if (iframeUrl !== undefined) {
|
||||
const url = new URL(iframeUrl, source);
|
||||
customMenuIframe.set(menuName, { url: url.toString(), allowApi: options.allowApi });
|
||||
}
|
||||
}
|
||||
|
||||
export function handleMenuUnregisterEvent(menuName: string) {
|
||||
const subMenuGeneral: string[] = Object.values(SubMenusInterface);
|
||||
if (subMenuGeneral.includes(menuName)) {
|
||||
console.warn("The menu " + menuName + " is a mandatory menu. It can't be remove");
|
||||
return;
|
||||
}
|
||||
|
||||
subMenusStore.removeMenu(menuName);
|
||||
customMenuIframe.delete(menuName);
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { derived, get, Readable, readable, writable, Writable } from "svelte/store";
|
||||
import { derived, Readable, readable, writable } from "svelte/store";
|
||||
import { peerStore } from "./PeerStore";
|
||||
import type { LocalStreamStoreValue } from "./MediaStore";
|
||||
import { DivImportance } from "../WebRtc/LayoutManager";
|
||||
import { gameOverlayVisibilityStore } from "./GameOverlayStoreVisibility";
|
||||
|
||||
declare const navigator: any; // eslint-disable-line @typescript-eslint/no-explicit-any
|
||||
@ -106,7 +105,6 @@ export const screenSharingLocalStreamStore = derived<Readable<MediaStreamConstra
|
||||
set({
|
||||
type: "success",
|
||||
stream: null,
|
||||
constraints,
|
||||
});
|
||||
return;
|
||||
}
|
||||
@ -121,7 +119,6 @@ export const screenSharingLocalStreamStore = derived<Readable<MediaStreamConstra
|
||||
set({
|
||||
type: "error",
|
||||
error: new Error("Your browser does not support sharing screen"),
|
||||
constraints,
|
||||
});
|
||||
return;
|
||||
}
|
||||
@ -141,10 +138,6 @@ export const screenSharingLocalStreamStore = derived<Readable<MediaStreamConstra
|
||||
set({
|
||||
type: "success",
|
||||
stream: null,
|
||||
constraints: {
|
||||
video: false,
|
||||
audio: false,
|
||||
},
|
||||
});
|
||||
};
|
||||
}
|
||||
@ -152,7 +145,6 @@ export const screenSharingLocalStreamStore = derived<Readable<MediaStreamConstra
|
||||
set({
|
||||
type: "success",
|
||||
stream: currentStream,
|
||||
constraints,
|
||||
});
|
||||
return;
|
||||
} catch (e) {
|
||||
@ -162,7 +154,6 @@ export const screenSharingLocalStreamStore = derived<Readable<MediaStreamConstra
|
||||
set({
|
||||
type: "error",
|
||||
error: e,
|
||||
constraints,
|
||||
});
|
||||
}
|
||||
})();
|
||||
@ -184,7 +175,6 @@ export const screenSharingAvailableStore = derived(peerStore, ($peerStore, set)
|
||||
export interface ScreenSharingLocalMedia {
|
||||
uniqueId: string;
|
||||
stream: MediaStream | null;
|
||||
//subscribe(this: void, run: Subscriber<ScreenSharingLocalMedia>, invalidate?: (value?: ScreenSharingLocalMedia) => void): Unsubscriber;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
export const showReportScreenStore = writable<{ userId: number; userName: string } | null>(null);
|
||||
export const userReportEmpty = {
|
||||
userId: 0,
|
||||
userName: "Empty",
|
||||
};
|
||||
|
||||
export const showReportScreenStore = writable<{ userId: number; userName: string }>(userReportEmpty);
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import { derived } from "svelte/store";
|
||||
import { consoleGlobalMessageManagerFocusStore } from "./ConsoleGlobalMessageManagerStore";
|
||||
import { menuInputFocusStore } from "./MenuStore";
|
||||
import { chatInputFocusStore } from "./ChatStore";
|
||||
import { showReportScreenStore, userReportEmpty } from "./ShowReportScreenStore";
|
||||
|
||||
//derived from the focus on Menu, ConsoleGlobal, Chat and ...
|
||||
export const enableUserInputsStore = derived(
|
||||
[consoleGlobalMessageManagerFocusStore, chatInputFocusStore],
|
||||
([$consoleGlobalMessageManagerFocusStore, $chatInputFocusStore]) => {
|
||||
return !$consoleGlobalMessageManagerFocusStore && !$chatInputFocusStore;
|
||||
[menuInputFocusStore, chatInputFocusStore, showReportScreenStore],
|
||||
([$menuInputFocusStore, $chatInputFocusStore, $showReportScreenStore]) => {
|
||||
return !$menuInputFocusStore && !$chatInputFocusStore && !($showReportScreenStore !== userReportEmpty);
|
||||
}
|
||||
);
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user