_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

merge into develop

Browse Source
This commit is contained in:
_Bastler 2021-05-08 20:05:08 +02:00
commit deac58ebc7
85 changed files with 2648 additions and 1337 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
CHANGELOG.md
View File

@ -1,4 +1,18 @@
## Version 1.3.0 - in dev ## Version 1.3.9 - in dev
### Updates
- Mobile support has been improved
- WorkAdventure automatically sets the zoom level based on the viewport size to ensure a sensible size of the map is visible, whatever the viewport used
- Mouse wheel support to zoom in / out
- Pinch support on mobile to zoom in / out
- Improved virtual joystick size (adapts to the zoom level)
### Bug Fixes
- Pinch gesture does no longer move the character
## Version 1.3.0
### New Features ### New Features

17
docker-compose.single-domain.yaml
View File

@ -153,23 +153,6 @@ services:
- "traefik.http.routers.uploader-ssl.tls=true" - "traefik.http.routers.uploader-ssl.tls=true"
- "traefik.http.routers.uploader-ssl.service=uploader" - "traefik.http.routers.uploader-ssl.service=uploader"
website:
image: thecodingmachine/nodejs:12-apache
environment:
STARTUP_COMMAND_1: npm install
STARTUP_COMMAND_2: npm run watch &
APACHE_DOCUMENT_ROOT: dist/
volumes:
- ./website:/var/www/html
labels:
- "traefik.http.routers.website.rule=Host(`workadventure.localhost`)"
- "traefik.http.routers.website.entryPoints=web"
- "traefik.http.services.website.loadbalancer.server.port=80"
- "traefik.http.routers.website-ssl.rule=Host(`workadventure.localhost`)"
- "traefik.http.routers.website-ssl.entryPoints=websecure"
- "traefik.http.routers.website-ssl.tls=true"
- "traefik.http.routers.website-ssl.service=website"
messages: messages:
#image: thecodingmachine/nodejs:14 #image: thecodingmachine/nodejs:14
image: thecodingmachine/workadventure-back-base:latest image: thecodingmachine/workadventure-back-base:latest

13
front/dist/index.tmpl.html vendored
View File

@ -1,9 +1,9 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- TRACK CODE --> <!-- TRACK CODE -->
@ -32,6 +32,7 @@
<title>Partey</title> <title>Partey</title>
</head> </head>
<body id="body" style="margin: 0; background-color: #000"> <body id="body" style="margin: 0; background-color: #000">
<div class="main-container" id="main-container"> <div class="main-container" id="main-container">
<!-- Create the editor container --> <!-- Create the editor container -->
@ -46,6 +47,13 @@
<div id="activeCam" class="activeCam"> <div id="activeCam" class="activeCam">
<div id="div-myCamVideo" class="video-container nes-container is-rounded is-dark"> <div id="div-myCamVideo" class="video-container nes-container is-rounded is-dark">
<video id="myCamVideo" autoplay muted></video> <video id="myCamVideo" autoplay muted></video>
<div id="mySoundMeter" class="sound-progress">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div> </div>
</div> </div>
<div class="btn-cam-action"> <div class="btn-cam-action">
@ -132,4 +140,5 @@
</audio> </audio>
</body> </body>
</html> </html>

2
front/dist/resources/html/EnableCameraScene.html vendored
View File

@ -45,7 +45,7 @@
text-align: center; text-align: center;
margin: 0; margin: 0;
position: absolute; position: absolute;
top: 44vh; top: 40vh;
width: 100%; width: 100%;
} }
#enableCameraScene button#enableCameraSceneFormCancel { #enableCameraScene button#enableCameraSceneFormCancel {

7
front/dist/resources/html/helpCameraSettings.html vendored
View File

@ -45,6 +45,9 @@
font-size: 7px; font-size: 7px;
margin: 0px 20px; margin: 0px 20px;
} }
#helpCameraSettings section p a{
font-size: 8px;
}
#helpCameraSettings section p.err{ #helpCameraSettings section p.err{
color: #ff0000; color: #ff0000;
} }
@ -80,6 +83,10 @@
<p>If you prefer to continue without allowing camera and microphone access, click on Continue</p> <p>If you prefer to continue without allowing camera and microphone access, click on Continue</p>
<p id='browserHelpSetting'></p> <p id='browserHelpSetting'></p>
</section> </section>
<!--<section class="text-center">
<p>If your problem persist, please contact us: <a id="mailto" href="mailto:workadventure@thecodingmachine.com?subject=Support camera and microphone settings" target="_blank"> workadventure@thecodingmachine.com</a>.</p>
</section>-->
</section>
<section class="action"> <section class="action">
<a href="#" class="nes-btn" id="helpCameraSettingsFormRefresh">Refresh</a> <a href="#" class="nes-btn" id="helpCameraSettingsFormRefresh">Refresh</a>
<button type="submit" class="nes-btn is-warning" id="helpCameraSettingsFormContinue">Continue</button> <button type="submit" class="nes-btn is-warning" id="helpCameraSettingsFormContinue">Continue</button>

18
front/dist/resources/style/mobile-style.scss vendored
View File

@ -23,27 +23,17 @@
} }
.btn-cam-action { .btn-cam-action {
min-width: 150px;
&:hover{ &:hover{
transform: translateY(20px); transform: translateY(20px);
} }
div { div {
margin: 0 1%;
&:hover { &:hover {
background-color: #666; background-color: #666;
} }
margin-bottom: 30px;
bottom: 30px;
&.btn-micro {
right: 0;
}
&.btn-monitor {
right: 130px;
}
&.btn-video {
right: 65px;
}
} }
} }

251
front/dist/resources/style/style.css vendored
View File

@ -1,15 +1,20 @@
* a, button, select{ * a,
button,
select {
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('/resources/logos/cursor_pointer.png'), pointer;
} }
body { body {
overflow: hidden; overflow: hidden;
font-size: 10px; font-size: 10px;
} }
body button:focus, body button:focus,
body img:focus, body img:focus,
body input:focus { body input:focus {
outline: -webkit-focus-ring-color auto 0; outline: -webkit-focus-ring-color auto 0;
} }
body .message-info { body .message-info {
width: 20%; width: 20%;
height: auto; height: auto;
@ -20,23 +25,29 @@ body .message-info{
padding-top: 10px; padding-top: 10px;
text-align: center; text-align: center;
} }
body .message-info.error { body .message-info.error {
background: red; background: red;
} }
body .message-info.success { body .message-info.success {
background: green; background: green;
} }
body .message-info.info { body .message-info.info {
background: dodgerblue; background: dodgerblue;
} }
body .message-info.warning { body .message-info.warning {
background: #ffa500d6; background: #ffa500d6;
} }
.video-container { .video-container {
position: relative; position: relative;
transition: all 0.2s ease; transition: all 0.2s ease;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('/resources/logos/cursor_pointer.png'), pointer;
} }
.video-container i { .video-container i {
position: absolute; position: absolute;
width: 100px; width: 100px;
@ -62,6 +73,7 @@ body .message-info.warning{
padding: 10px; padding: 10px;
z-index: 2; z-index: 2;
} }
.video-container img.block-logo { .video-container img.block-logo {
left: 30%; left: 30%;
bottom: 15%; bottom: 15%;
@ -94,7 +106,7 @@ body .message-info.warning{
} }
.video-container button.report:hover { .video-container button.report:hover {
width: 150px; width: 160px;
} }
.video-container button.report img { .video-container button.report img {
@ -108,6 +120,7 @@ body .message-info.warning{
width: 25px; width: 25px;
height: 25px; height: 25px;
} }
.video-container button.report span { .video-container button.report span {
position: absolute; position: absolute;
bottom: 6px; bottom: 6px;
@ -116,12 +129,14 @@ body .message-info.warning{
font-size: 16px; font-size: 16px;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('/resources/logos/cursor_pointer.png'), pointer;
} }
.video-container img.active { .video-container img.active {
display: block !important; display: block !important;
} }
.video-container video { .video-container video {
height: 100%; height: 100%;
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
} }
.video-container video:focus { .video-container video:focus {
@ -136,7 +151,7 @@ body .message-info.warning{
position: absolute; position: absolute;
right: 15px; right: 15px;
bottom: 30px; bottom: 30px;
max-height: 200px; max-height: 20%;
} }
video#myCamVideo { video#myCamVideo {
@ -147,61 +162,123 @@ video#myCamVideo{
/*height: 113px;*/ /*height: 113px;*/
} }
.sound-progress {
display: none;
position: absolute;
right: 14px;
top: calc(50% - 5px);
}
.sound-progress.active {
display: table-column;
}
.sound-progress span {
position: absolute;
color: black;
background-color: #00000020;
width: 5px;
height: 5px;
border-radius: 50%;
}
.sound-progress span.active {
background-color: #00c3ff66
}
.sound-progress span:nth-child(1) {
top: calc(50% + 20px);
}
.sound-progress span:nth-child(2) {
top: calc(50% + 10px);
}
.sound-progress span:nth-child(3) {
top: calc(50% - 0px);
}
.sound-progress span:nth-child(4) {
top: calc(50% - 10px);
}
.sound-progress span:nth-child(5) {
top: calc(50% - 20px);
}
.btn-cam-action { .btn-cam-action {
pointer-events: all; pointer-events: all;
position: absolute; position: absolute;
bottom: 0px; display: inline-flex;
right: 0px; bottom: 10px;
width: 450px; right: 15px;
height: 150px; width: 15vw;
height: 40px;
text-align: center;
align-content: center;
align-items: center;
justify-content: center;
justify-items: center;
} }
/*btn animation*/ /*btn animation*/
.btn-cam-action div { .btn-cam-action div {
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('/resources/logos/cursor_pointer.png'), pointer;
position: absolute; /*position: absolute;*/
width: 44px;
height: 44px; height: 44px;
width: auto; width: auto;
transform: translateY(20px); transform: translateY(20px);
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
bottom: 20px; margin-bottom: 20px;
pointer-events: none; margin: 0 4%;
} }
.btn-cam-action div.disabled { .btn-cam-action div.disabled {
background: #d75555; background: #d75555;
} }
.btn-cam-action div.enabled { .btn-cam-action div.enabled {
background: #73c973; background: #73c973;
} }
.btn-cam-action:hover div { .btn-cam-action:hover div {
transform: translateY(0); transform: translateY(0);
} }
.btn-cam-action div:hover { .btn-cam-action div:hover {
background: #407cf7; background: #407cf7;
box-shadow: 4px 4px 48px #666; box-shadow: 4px 4px 48px #666;
transition: 120ms; transition: 120ms;
} }
.btn-micro { .btn-micro {
pointer-events: auto; pointer-events: auto;
transition: all .3s; transition: all .3s;
right: 44px; /*right: 44px;*/
} }
.btn-video { .btn-video {
pointer-events: auto; pointer-events: auto;
transition: all .25s; transition: all .25s;
right: 134px; /*right: 134px;*/
} }
.btn-monitor { .btn-monitor {
pointer-events: auto; pointer-events: auto;
transition: all .2s; transition: all .2s;
right: 224px; /*right: 224px;*/
} }
.btn-copy { .btn-copy {
pointer-events: auto; pointer-events: auto;
transition: all .3s; transition: all .3s;
right: 44px; right: 44px;
opacity: 1; opacity: 1;
} }
.btn-cam-action div img { .btn-cam-action div img {
height: 22px; height: 22px;
width: auto; width: auto;
@ -210,17 +287,18 @@ video#myCamVideo{
pointer-events: all; pointer-events: all;
} }
/* Spinner */ /* Spinner */
.connecting-spinner { .connecting-spinner {
/*display: inline-block;*/ /*display: inline-block;*/
position: absolute; position: absolute;
left: calc(50% - 62px); left: calc(50% - 62px);
top: calc(50% - 62px); top: calc(50% - 62px);
width: 130px; width: 130px;
height: 130px; height: 130px;
} }
.connecting-spinner:after { .connecting-spinner:after {
content: " "; content: " ";
display: block; display: block;
@ -232,6 +310,7 @@ video#myCamVideo{
border-color: #fff transparent #fff transparent; border-color: #fff transparent #fff transparent;
animation: connecting-spinner 1.2s linear infinite; animation: connecting-spinner 1.2s linear infinite;
} }
@keyframes connecting-spinner { @keyframes connecting-spinner {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
@ -241,16 +320,14 @@ video#myCamVideo{
} }
} }
.rtc-error { .rtc-error {
position: absolute; position: absolute;
left: calc(50% - 68px); left: calc(50% - 68px);
top: calc(50% - 68px); top: calc(50% - 68px);
width: 130px; width: 130px;
height: 130px; height: 130px;
} }
.rtc-error:after { .rtc-error:after {
content: " "; content: " ";
display: block; display: block;
@ -280,6 +357,7 @@ video#myCamVideo{
width: 50%; width: 50%;
border: white 6px solid; border: white 6px solid;
} }
.webrtcsetup .background-img { .webrtcsetup .background-img {
position: relative; position: relative;
display: block; display: block;
@ -290,21 +368,25 @@ video#myCamVideo{
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
#myCamVideoSetup { #myCamVideoSetup {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.webrtcsetup.active { .webrtcsetup.active {
display: block; display: block;
} }
/* New layout */ /* New layout */
body { body {
margin: 0; margin: 0;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
} }
.main-container { .main-container {
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
@ -315,25 +397,21 @@ body {
.game-overlay { .game-overlay {
flex-direction: row; flex-direction: row;
} }
.sidebar { .sidebar {
flex-direction: column; flex-direction: column;
} }
.sidebar>div { .sidebar>div {
max-height: 21%; max-height: 21%;
} }
.sidebar>div:hover { .sidebar>div:hover {
max-height: 25%; max-height: 25%;
} }
} }
#game { #game {
width: 100%; width: 100%;
position: relative; /* Position relative is needed for the game-overlay. */ position: relative;
/* Position relative is needed for the game-overlay. */
} }
.audioplayer:first-child { .audioplayer:first-child {
@ -341,7 +419,9 @@ body {
grid: 2rem / 4rem 10rem; grid: 2rem / 4rem 10rem;
} }
.audioplayer > button, .audioplayer > div, .audioplayer > label { .audioplayer>button,
.audioplayer>div,
.audioplayer>label {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
display: flex; display: flex;
align-items: center; align-items: center;
@ -365,49 +445,62 @@ body {
max-width: 5rem; max-width: 5rem;
border: none; border: none;
} }
#audioplayer_mute:focus, #audioplayer_mute:active {
#audioplayer_mute:focus,
#audioplayer_mute:active {
outline: none; outline: none;
} }
#audioplayer_mute>svg { #audioplayer_mute>svg {
width: 100%; width: 100%;
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;
} }
#audioplayer_volume_icon_playing.muted { #audioplayer_volume_icon_playing.muted {
visibility: hidden; visibility: hidden;
display: none; display: none;
} }
#audioplayer_volume_icon_playing.low #audioplayer_volume_icon_playing_high { #audioplayer_volume_icon_playing.low #audioplayer_volume_icon_playing_high {
visibility: hidden; visibility: hidden;
display: none; display: none;
} }
#audioplayer_volume_icon_playing.low #audioplayer_volume_icon_playing_mid { #audioplayer_volume_icon_playing.low #audioplayer_volume_icon_playing_mid {
visibility: hidden; visibility: hidden;
display: none; display: none;
} }
#audioplayer_volume_icon_playing.mid #audioplayer_volume_icon_playing_high { #audioplayer_volume_icon_playing.mid #audioplayer_volume_icon_playing_high {
visibility: hidden; visibility: hidden;
display: none; display: none;
} }
#audioplayerctrl>#audioplayer_volume { #audioplayerctrl>#audioplayer_volume {
width: 100%; width: 100%;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} }
/* /*
* sollte eigentlich in den aspect-ratio teil .. * sollte eigentlich in den aspect-ratio teil ..
*/ */
#audioplayerctrl.loading { #audioplayerctrl.loading {
transform: translateY(-90%); transform: translateY(-90%);
} }
#audioplayerctrl.hidden { #audioplayerctrl.hidden {
transform: translateY(-100%); transform: translateY(-100%);
} }
/* /*
* Style Input Range * Style Input Range
* https://www.cssportal.com/style-input-range/ * https://www.cssportal.com/style-input-range/
*/ */
input[type=range] { input[type=range] {
height: 28px; height: 28px;
-webkit-appearance: none; -webkit-appearance: none;
@ -415,9 +508,11 @@ input[type=range] {
width: 100%; width: 100%;
background-color: transparent; background-color: transparent;
} }
input[type=range]:focus { input[type=range]:focus {
outline: none; outline: none;
} }
input[type=range]::-webkit-slider-runnable-track { input[type=range]::-webkit-slider-runnable-track {
width: 100%; width: 100%;
height: 5px; height: 5px;
@ -427,6 +522,7 @@ input[type=range]::-webkit-slider-runnable-track {
border-radius: 5px; border-radius: 5px;
border: 1px solid #000000; border: 1px solid #000000;
} }
input[type=range]::-webkit-slider-thumb { input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000; box-shadow: 1px 1px 1px #000000;
border: 1px solid #000000; border: 1px solid #000000;
@ -437,9 +533,11 @@ input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
margin-top: -8.5px; margin-top: -8.5px;
} }
input[type=range]:focus::-webkit-slider-runnable-track { input[type=range]:focus::-webkit-slider-runnable-track {
background: #FFFFFF; background: #FFFFFF;
} }
input[type=range]::-moz-range-track { input[type=range]::-moz-range-track {
width: 100%; width: 100%;
height: 5px; height: 5px;
@ -449,6 +547,7 @@ input[type=range]::-moz-range-track {
border-radius: 5px; border-radius: 5px;
border: 1px solid #000000; border: 1px solid #000000;
} }
input[type=range]::-moz-range-thumb { input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000; box-shadow: 1px 1px 1px #000000;
border: 1px solid #000000; border: 1px solid #000000;
@ -457,6 +556,7 @@ input[type=range]::-moz-range-thumb {
border-radius: 5px; border-radius: 5px;
background: #FFFFFF; background: #FFFFFF;
} }
input[type=range]::-ms-track { input[type=range]::-ms-track {
width: 100%; width: 100%;
height: 5px; height: 5px;
@ -465,18 +565,21 @@ input[type=range]::-ms-track {
border-color: transparent; border-color: transparent;
color: transparent; color: transparent;
} }
input[type=range]::-ms-fill-lower { input[type=range]::-ms-fill-lower {
background: #FFFFFF; background: #FFFFFF;
border: 1px solid #000000; border: 1px solid #000000;
border-radius: 10px; border-radius: 10px;
box-shadow: 1px 1px 1px #000000; box-shadow: 1px 1px 1px #000000;
} }
input[type=range]::-ms-fill-upper { input[type=range]::-ms-fill-upper {
background: #FFFFFF; background: #FFFFFF;
border: 1px solid #000000; border: 1px solid #000000;
border-radius: 10px; border-radius: 10px;
box-shadow: 1px 1px 1px #000000; box-shadow: 1px 1px 1px #000000;
} }
input[type=range]::-ms-thumb { input[type=range]::-ms-thumb {
margin-top: 1px; margin-top: 1px;
box-shadow: 1px 1px 1px #000000; box-shadow: 1px 1px 1px #000000;
@ -486,14 +589,15 @@ input[type=range]::-ms-thumb {
border-radius: 5px; border-radius: 5px;
background: #FFFFFF; background: #FFFFFF;
} }
input[type=range]:focus::-ms-fill-lower { input[type=range]:focus::-ms-fill-lower {
background: #FFFFFF; background: #FFFFFF;
} }
input[type=range]:focus::-ms-fill-upper { input[type=range]:focus::-ms-fill-upper {
background: #FFFFFF; background: #FFFFFF;
} }
.game-overlay { .game-overlay {
display: none; display: none;
position: absolute; position: absolute;
@ -503,12 +607,20 @@ input[type=range]:focus::-ms-fill-upper {
/* TODO: DO WE NEED FLEX HERE???? WE WANT A SIDEBAR OF EXACTLY 25% (note: flex useful for direction!!!) */ /* TODO: DO WE NEED FLEX HERE???? WE WANT A SIDEBAR OF EXACTLY 25% (note: flex useful for direction!!!) */
} }
.game-overlay+div {
pointer-events: none;
}
.game-overlay+div>div {
pointer-events: auto;
}
.game-overlay.active { .game-overlay.active {
display: flex; display: flex;
} }
.game-overlay video { .game-overlay video {
width: 100% width: 100%;
} }
.main-section { .main-section {
@ -524,6 +636,7 @@ input[type=range]:focus::-ms-fill-upper {
flex-basis: 96%; flex-basis: 96%;
transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s; transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('/resources/logos/cursor_pointer.png'), pointer;
pointer-events: auto;
/*flex-shrink: 2;*/ /*flex-shrink: 2;*/
} }
@ -535,21 +648,26 @@ input[type=range]:focus::-ms-fill-upper {
.sidebar { .sidebar {
flex: 0 0 25%; flex: 0 0 25%;
display: flex; display: flex;
pointer-events: none;
} }
.sidebar>div { .sidebar>div {
margin: 2%; margin: 2%;
transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s; transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('/resources/logos/cursor_pointer.png'), pointer;
padding: 12px 12px !important; pointer-events: auto;
} }
.sidebar>div:hover { .sidebar>div:hover {
margin: 0%; margin: 0%;
} }
.sidebar>div video {
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
}
/* Let's make sure videos are vertically centered if they need to be cropped */ /* Let's make sure videos are vertically centered if they need to be cropped */
.media-container { .media-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -560,9 +678,7 @@ input[type=range]:focus::-ms-fill-upper {
.chat-mode { .chat-mode {
display: grid; display: grid;
width: 100%; width: 100%;
align-items: flex-start; align-items: flex-start;
padding: 1%; padding: 1%;
} }
@ -576,6 +692,7 @@ input[type=range]:focus::-ms-fill-upper {
.chat-mode>div:hover { .chat-mode>div:hover {
margin: 0%; margin: 0%;
} }
.chat-mode.one-col { .chat-mode.one-col {
grid-template-columns: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr);
} }
@ -592,6 +709,7 @@ input[type=range]:focus::-ms-fill-upper {
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
/*CONSOLE*/ /*CONSOLE*/
.message-container, .message-container,
@ -666,6 +784,7 @@ input[type=range]:focus::-ms-fill-upper {
transform: rotateY(0); transform: rotateY(0);
opacity: 0.5; opacity: 0.5;
} }
.main-console div.console img:hover, .main-console div.console img:hover,
.message-container div.clear img:hover { .message-container div.clear img:hover {
opacity: 1; opacity: 1;
@ -716,6 +835,7 @@ input[type=range]:focus::-ms-fill-upper {
padding: 10px 30px; padding: 10px 30px;
transition: all .2s ease; transition: all .2s ease;
} }
.main-console .btn-action .btn:hover { .main-console .btn-action .btn:hover {
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('/resources/logos/cursor_pointer.png'), pointer;
background-color: #ffda01; background-color: #ffda01;
@ -761,20 +881,23 @@ input[type=range]:focus::-ms-fill-upper {
.main-console section div.upload label { .main-console section div.upload label {
color: #ffda01; color: #ffda01;
} }
.main-console section div.upload input { .main-console section div.upload input {
display: none; display: none;
} }
.main-console section div.upload label img { .main-console section div.upload label img {
height: 150px; height: 150px;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('/resources/logos/cursor_pointer.png'), pointer;
} }
.main-console section div.upload label img { .main-console section div.upload label img {
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('/resources/logos/cursor_pointer.png'), pointer;
} }
/*audio html when audio message playing*/ /*audio html when audio message playing*/
.main-container .audio-playing { .main-container .audio-playing {
position: absolute; position: absolute;
width: 200px; width: 200px;
@ -790,22 +913,27 @@ input[type=range]:focus::-ms-fill-upper {
.main-container .audio-playing.active { .main-container .audio-playing.active {
right: 0; right: 0;
} }
.main-container .audio-playing img { .main-container .audio-playing img {
/*width: 30px;*/ /*width: 30px;*/
border-radius: 50%; border-radius: 50%;
background-color: #ffda01; background-color: #ffda01;
padding: 10px; padding: 10px;
} }
.main-container .audio-playing p { .main-container .audio-playing p {
color: white; color: white;
margin-left: 10px; margin-left: 10px;
margin-top: 14px; margin-top: 14px;
} }
/* VIDEO QUALITY */ /* VIDEO QUALITY */
.main-console div.setting h1 { .main-console div.setting h1 {
color: white; color: white;
} }
.main-console div.setting select { .main-console div.setting select {
background: black; background: black;
color: white; color: white;
@ -815,16 +943,19 @@ input[type=range]:focus::-ms-fill-upper {
padding: 10px; padding: 10px;
border-radius: 15px; border-radius: 15px;
} }
.main-console div.setting select:focus { .main-console div.setting select:focus {
border: solid 1px white; border: solid 1px white;
outline: none; outline: none;
} }
.main-console div.setting.active section { .main-console div.setting.active section {
display: block; display: block;
} }
/*REPORT input*/ /*REPORT input*/
div.modal-report-user { div.modal-report-user {
position: absolute; position: absolute;
width: 800px; width: 800px;
@ -880,6 +1011,7 @@ div.modal-report-user{
padding: 10px 30px; padding: 10px 30px;
transition: all .2s ease; transition: all .2s ease;
} }
.modal-report-user button:hover { .modal-report-user button:hover {
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('/resources/logos/cursor_pointer.png'), pointer;
background-color: #ffda01; background-color: #ffda01;
@ -905,10 +1037,13 @@ div.modal-report-user{
width: 100%; width: 100%;
text-align: left; text-align: left;
padding: 30px; padding: 30px;
max-width: calc(800px - 60px); /* size of modal - padding*/ max-width: calc(800px - 60px);
/* size of modal - padding*/
} }
/*MESSAGE*/ /*MESSAGE*/
.discussion { .discussion {
position: fixed; position: fixed;
left: -300px; left: -300px;
@ -919,9 +1054,11 @@ div.modal-report-user{
padding: 20px; padding: 20px;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.discussion.active { .discussion.active {
left: 0; left: 0;
} }
.discussion .active-btn { .discussion .active-btn {
display: none; display: none;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('/resources/logos/cursor_pointer.png'), pointer;
@ -935,12 +1072,15 @@ div.modal-report-user{
border: none; border: none;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.discussion .active-btn.active { .discussion .active-btn.active {
display: block; display: block;
} }
.discussion .active-btn:hover { .discussion .active-btn:hover {
transform: scale(1.1) rotateY(3.142rad); transform: scale(1.1) rotateY(3.142rad);
} }
.discussion .active-btn img { .discussion .active-btn img {
width: 26px; width: 26px;
height: 26px; height: 26px;
@ -955,6 +1095,7 @@ div.modal-report-user{
border: none; border: none;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('/resources/logos/cursor_pointer.png'), pointer;
} }
.discussion .close-btn img { .discussion .close-btn img {
height: 15px; height: 15px;
right: 15px; right: 15px;
@ -984,6 +1125,7 @@ div.modal-report-user{
.discussion .participants .participant:hover { .discussion .participants .participant:hover {
background-color: #ffffff; background-color: #ffffff;
} }
.discussion .participants .participant:hover p { .discussion .participants .participant:hover p {
color: black; color: black;
} }
@ -1065,6 +1207,7 @@ div.modal-report-user{
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
} }
.discussion .messages .message p a { .discussion .messages .message p a {
color: white; color: white;
} }
@ -1095,12 +1238,14 @@ div.modal-report-user{
height: 20px; height: 20px;
background-color: #ffffff69; background-color: #ffffff69;
} }
.discussion .send-message img:hover { .discussion .send-message img:hover {
background-color: #ffffff; background-color: #ffffff;
} }
/** Action button **/ /** Action button **/
div.action { div.action {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -1112,18 +1257,42 @@ div.action{
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
} }
div.action.info,
div.action.warning,
div.action.danger {
transition: all 1s ease;
animation: mymove 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
div.action p.action-body { div.action p.action-body {
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
padding: 10px; padding: 10px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
max-width: 350px; max-width: 350px;
margin-left: calc(50% - 175px);
} }
div.action.warning p.action-body {
background-color: #ff9800eb;
color: #000;
}
div.action.danger p.action-body {
background-color: #da0000e3;
color: #000;
}
.popUpElement { .popUpElement {
font-family: 'Press Start 2P'; font-family: 'Press Start 2P';
text-align: left; text-align: left;
color: white; color: white;
} }
.popUpElement div { .popUpElement div {
font-family: 'Press Start 2P'; font-family: 'Press Start 2P';
font-size: 10px; font-size: 10px;
@ -1140,12 +1309,16 @@ div.action p.action-body{
.popUpElement .buttonContainer { .popUpElement .buttonContainer {
float: right; float: right;
background-color: inherit; background-color: inherit;
} }
@keyframes mymove { @keyframes mymove {
0% {bottom: 40px;} 0% {
50% {bottom: 30px;} bottom: 40px;
100% {bottom: 40px;} }
50% {
bottom: 30px;
}
100% {
bottom: 40px;
}
} }

124
front/dist/static/images/favicons/manifest.json vendored
View File

@ -1,41 +1,149 @@
{ {
"name": "App", "short_name": "WA",
"name": "WorkAdventure",
"icons": [ "icons": [
{ {
"src": "\/android-icon-36x36.png", "src": "/static/images/favicons/apple-icon-57x57.png",
"sizes": "57x57",
"type": "image\/png"
},
{
"src": "/static/images/favicons/apple-icon-60x60.png",
"sizes": "60x60",
"type": "image\/png"
},
{
"src": "/static/images/favicons/apple-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png"
},
{
"src": "/static/images/favicons/apple-icon-76x76.png",
"sizes": "76x76",
"type": "image\/png"
},
{
"src": "/static/images/favicons/apple-icon-114x114.png",
"sizes": "114x114",
"type": "image\/png"
},
{
"src": "/static/images/favicons/apple-icon-120x120.png",
"sizes": "120x120",
"type": "image\/png"
},
{
"src": "/static/images/favicons/apple-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png"
},
{
"src": "/static/images/favicons/apple-icon-152x152.png",
"sizes": "152x152",
"type": "image\/png"
},
{
"src": "/static/images/favicons/apple-icon-180x180.png",
"sizes": "180x180",
"type": "image\/png"
},
{
"src": "/static/images/favicons/android-icon-36x36.png",
"sizes": "36x36", "sizes": "36x36",
"type": "image\/png", "type": "image\/png",
"density": "0.75" "density": "0.75"
}, },
{ {
"src": "\/android-icon-48x48.png", "src": "/static/images/favicons/android-icon-48x48.png",
"sizes": "48x48", "sizes": "48x48",
"type": "image\/png", "type": "image\/png",
"density": "1.0" "density": "1.0"
}, },
{ {
"src": "\/android-icon-72x72.png", "src": "/static/images/favicons/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "/static/images/favicons/favicon-16x16.png",
"sizes": "16x16",
"type": "image\/png",
"density": "1"
},
{
"src": "/static/images/favicons/favicon-32x32.png",
"sizes": "32x32",
"type": "image\/png",
"density": "1.5"
},
{
"src": "/static/images/favicons/favicon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "/static/images/favicons/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "1"
},
{
"src": "/static/images/favicons/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1"
},
{
"src": "/static/images/favicons/android-icon-72x72.png",
"sizes": "72x72", "sizes": "72x72",
"type": "image\/png", "type": "image\/png",
"density": "1.5" "density": "1.5"
}, },
{ {
"src": "\/android-icon-96x96.png", "src": "/static/images/favicons/android-icon-96x96.png",
"sizes": "96x96", "sizes": "96x96",
"type": "image\/png", "type": "image\/png",
"density": "2.0" "density": "2.0"
}, },
{ {
"src": "\/android-icon-144x144.png", "src": "/static/images/favicons/android-icon-144x144.png",
"sizes": "144x144", "sizes": "144x144",
"type": "image\/png", "type": "image\/png",
"density": "3.0" "density": "3.0"
}, },
{ {
"src": "\/android-icon-192x192.png", "src": "/static/images/favicons/android-icon-192x192.png",
"sizes": "192x192", "sizes": "192x192",
"type": "image\/png", "type": "image\/png",
"density": "4.0" "density": "4.0"
} }
] ],
"start_url": "/",
"background_color": "#000000",
"display_override": ["window-control-overlay", "minimal-ui"],
"display": "standalone",
"scope": "/",
"theme_color": "#000000",
"shortcuts": [
{
"name": "WorkAdventures",
"short_name": "WA",
"description": "WorkAdventure application",
"url": "/",
"icons": [{ "src": "/static/images/favicons/android-icon-192x192.png", "sizes": "192x192" }]
}
],
"description": "WorkAdventure application",
"screenshots": [],
"related_applications": [{
"platform": "web",
"url": "https://workadventu.re"
}, {
"platform": "play",
"url": "https://play.workadventu.re"
}]
} }

2
front/package.json
View File

@ -32,7 +32,7 @@
"generic-type-guard": "^3.2.0", "generic-type-guard": "^3.2.0",
"google-protobuf": "^3.13.0", "google-protobuf": "^3.13.0",
"nes.css": "^2.3.0", "nes.css": "^2.3.0",
"phaser": "3.24.1", "phaser": "^3.54.0",
"phaser3-rex-plugins": "^1.1.42", "phaser3-rex-plugins": "^1.1.42",
"queue-typescript": "^1.0.1", "queue-typescript": "^1.0.1",
"quill": "1.3.6", "quill": "1.3.6",

12
front/src/Api/IframeListener.ts
View File

@ -63,14 +63,14 @@ class IframeListener {
// Do we trust the sender of this message? // Do we trust the sender of this message?
// Let's only accept messages from the iframe that are allowed. // Let's only accept messages from the iframe that are allowed.
// Note: maybe we could restrict on the domain too for additional security (in case the iframe goes to another domain). // Note: maybe we could restrict on the domain too for additional security (in case the iframe goes to another domain).
let found = false; let foundSrc: string | null = null;
for (const iframe of this.iframes) { for (const iframe of this.iframes) {
if (iframe.contentWindow === message.source) { if (iframe.contentWindow === message.source) {
found = true; foundSrc = iframe.src;
break; break;
} }
} }
if (!found) { if (!foundSrc) {
return; return;
} }
@ -90,7 +90,11 @@ class IframeListener {
scriptUtils.goToPage(payload.data.url); scriptUtils.goToPage(payload.data.url);
} }
else if (payload.type === 'openCoWebSite' && isOpenCoWebsite(payload.data)) { else if (payload.type === 'openCoWebSite' && isOpenCoWebsite(payload.data)) {
scriptUtils.openCoWebsite(payload.data.url); const scriptUrl = [...this.scripts.keys()].find(key => {
return this.scripts.get(key)?.contentWindow == message.source
})
scriptUtils.openCoWebsite(payload.data.url, scriptUrl || foundSrc);
} }
else if(payload.type === 'closeCoWebSite') { else if(payload.type === 'closeCoWebSite') {
scriptUtils.closeCoWebSite(); scriptUtils.closeCoWebSite();

4
front/src/Api/ScriptUtils.ts
View File

@ -11,8 +11,8 @@ class ScriptUtils {
} }
public openCoWebsite(url : string){ public openCoWebsite(url: string, base: string) {
coWebsiteManager.loadCoWebsite(url,url); coWebsiteManager.loadCoWebsite(url, base);
} }
public closeCoWebSite(){ public closeCoWebSite(){

2
front/src/Connexion/LocalUser.ts
View File

@ -10,7 +10,7 @@ export interface CharacterTexture {
export const maxUserNameLength: number = MAX_USERNAME_LENGTH; export const maxUserNameLength: number = MAX_USERNAME_LENGTH;
export function isUserNameValid(value: string): boolean { export function isUserNameValid(value: string): boolean {
const regexp = new RegExp('^[A-Za-z]{1,'+maxUserNameLength+'}$'); const regexp = new RegExp('^[A-Za-z0-9]{1,'+maxUserNameLength+'}$');
return regexp.test(value); return regexp.test(value);
} }

4
front/src/Enum/EnvironmentVariable.ts
View File

@ -10,8 +10,6 @@ const TURN_USER: string = process.env.TURN_USER || '';
const TURN_PASSWORD: string = process.env.TURN_PASSWORD || ''; const TURN_PASSWORD: string = process.env.TURN_PASSWORD || '';
const JITSI_URL : string|undefined = (process.env.JITSI_URL === '') ? undefined : process.env.JITSI_URL; const JITSI_URL : string|undefined = (process.env.JITSI_URL === '') ? undefined : process.env.JITSI_URL;
const JITSI_PRIVATE_MODE : boolean = process.env.JITSI_PRIVATE_MODE == "true"; const JITSI_PRIVATE_MODE : boolean = process.env.JITSI_PRIVATE_MODE == "true";
const RESOLUTION = 2;
const ZOOM_LEVEL = 1/*3/4*/;
const POSITION_DELAY = 200; // Wait 200ms between sending position events const POSITION_DELAY = 200; // Wait 200ms between sending position events
const MAX_EXTRAPOLATION_TIME = 100; // Extrapolate a maximum of 250ms if no new movement is sent by the player const MAX_EXTRAPOLATION_TIME = 100; // Extrapolate a maximum of 250ms if no new movement is sent by the player
export const MAX_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || '') || 8; export const MAX_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || '') || 8;
@ -25,8 +23,6 @@ export {
PUSHER_URL, PUSHER_URL,
UPLOADER_URL, UPLOADER_URL,
ADMIN_URL, ADMIN_URL,
RESOLUTION,
ZOOM_LEVEL,
POSITION_DELAY, POSITION_DELAY,
MAX_EXTRAPOLATION_TIME, MAX_EXTRAPOLATION_TIME,
STUN_SERVER, STUN_SERVER,

54
front/src/Phaser/Components/MobileJoystick.ts
View File

@ -1,8 +1,6 @@
import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js'; import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js';
import ScaleManager = Phaser.Scale.ScaleManager;
const outOfScreenX = -1000; import {waScaleManager} from "../Services/WaScaleManager";
const outOfScreenY = -1000;
//the assets were found here: https://hannemann.itch.io/virtual-joystick-pack-free //the assets were found here: https://hannemann.itch.io/virtual-joystick-pack-free
export const joystickBaseKey = 'joystickBase'; export const joystickBaseKey = 'joystickBase';
@ -10,26 +8,58 @@ export const joystickBaseImg = 'resources/objects/joystickSplitted.png';
export const joystickThumbKey = 'joystickThumb'; export const joystickThumbKey = 'joystickThumb';
export const joystickThumbImg = 'resources/objects/smallHandleFilledGrey.png'; export const joystickThumbImg = 'resources/objects/smallHandleFilledGrey.png';
const baseSize = 50;
const thumbSize = 25;
const radius = 17.5;
export class MobileJoystick extends VirtualJoystick { export class MobileJoystick extends VirtualJoystick {
private resizeCallback: () => void;
constructor(scene: Phaser.Scene) { constructor(scene: Phaser.Scene) {
super(scene, { super(scene, {
x: outOfScreenX, x: -1000,
y: outOfScreenY, y: -1000,
radius: 20, radius: radius * window.devicePixelRatio,
base: scene.add.image(0, 0, joystickBaseKey).setDisplaySize(60, 60).setDepth(99999), base: scene.add.image(0, 0, joystickBaseKey).setDisplaySize(baseSize * window.devicePixelRatio, baseSize * window.devicePixelRatio).setDepth(99999),
thumb: scene.add.image(0, 0, joystickThumbKey).setDisplaySize(30, 30).setDepth(99999), thumb: scene.add.image(0, 0, joystickThumbKey).setDisplaySize(thumbSize * window.devicePixelRatio, thumbSize * window.devicePixelRatio).setDepth(99999),
enable: true, enable: true,
dir: "8dir", dir: "8dir",
}); });
this.visible = false;
this.enable = false;
this.scene.input.on('pointerdown', (pointer: { x: number; y: number; }) => { this.scene.input.on('pointerdown', (pointer: { x: number; y: number; wasTouch: boolean; event: TouchEvent }) => {
if (!pointer.wasTouch) {
return;
}
// Let's only display the joystick if there is one finger on the screen
if (pointer.event.touches.length === 1) {
this.x = pointer.x; this.x = pointer.x;
this.y = pointer.y; this.y = pointer.y;
this.visible = true;
this.enable = true;
} else {
this.visible = false;
this.enable = false;
}
}); });
this.scene.input.on('pointerup', () => { this.scene.input.on('pointerup', () => {
this.x = outOfScreenX; this.visible = false;
this.y = outOfScreenY; this.enable = false;
}); });
this.resizeCallback = this.resize.bind(this);
this.scene.scale.on(Phaser.Scale.Events.RESIZE, this.resizeCallback);
}
private resize() {
this.base.setDisplaySize(baseSize / waScaleManager.zoomModifier * window.devicePixelRatio, baseSize / waScaleManager.zoomModifier * window.devicePixelRatio);
this.thumb.setDisplaySize(thumbSize / waScaleManager.zoomModifier * window.devicePixelRatio, thumbSize / waScaleManager.zoomModifier * window.devicePixelRatio);
this.setRadius(radius / waScaleManager.zoomModifier * window.devicePixelRatio);
}
public destroy() {
super.destroy();
this.scene.scale.removeListener(Phaser.Scale.Events.RESIZE, this.resizeCallback);
} }
} }

52
front/src/Phaser/Game/DirtyScene.ts Normal file
View File

@ -0,0 +1,52 @@
import {ResizableScene} from "../Login/ResizableScene";
import GameObject = Phaser.GameObjects.GameObject;
import Events = Phaser.Scenes.Events;
import AnimationEvents = Phaser.Animations.Events;
/**
* A scene that can track its dirty/pristine state.
*/
export abstract class DirtyScene extends ResizableScene {
private isAlreadyTracking: boolean = false;
protected dirty:boolean = true;
private objectListChanged:boolean = true;
/**
* Track all objects added to the scene and adds a callback each time an animation is added.
* Whenever an object is added, removed, or when an animation is played, the dirty state is set to true.
*
* Note: this does not work with animations from sprites inside containers.
*/
protected trackDirtyAnims(): void {
if (this.isAlreadyTracking) {
return;
}
this.isAlreadyTracking = true;
const trackAnimationFunction = this.trackAnimation.bind(this);
this.events.on(Events.ADDED_TO_SCENE, (gameObject: GameObject) => {
this.objectListChanged = true;
gameObject.on(AnimationEvents.ANIMATION_UPDATE, trackAnimationFunction);
});
this.events.on(Events.REMOVED_FROM_SCENE, (gameObject: GameObject) => {
this.objectListChanged = true;
gameObject.removeListener(AnimationEvents.ANIMATION_UPDATE, trackAnimationFunction);
});
this.events.on(Events.RENDER, () => {
this.objectListChanged = false;
});
}
private trackAnimation(): void {
this.objectListChanged = true;
}
public isDirty(): boolean {
return this.dirty || this.objectListChanged;
}
public onResize(ev: UIEvent): void {
this.objectListChanged = true;
}
}

88
front/src/Phaser/Game/Game.ts Normal file
View File

@ -0,0 +1,88 @@
const Events = Phaser.Core.Events;
/**
* A specialization of the main Phaser Game scene.
* It comes with an optimization to skip rendering.
*
* Beware, the "step" function might vary in future versions of Phaser.
*/
export class Game extends Phaser.Game {
public step(time: number, delta: number)
{
// @ts-ignore
if (this.pendingDestroy)
{
// @ts-ignore
return this.runDestroy();
}
const eventEmitter = this.events;
// Global Managers like Input and Sound update in the prestep
eventEmitter.emit(Events.PRE_STEP, time, delta);
// This is mostly meant for user-land code and plugins
eventEmitter.emit(Events.STEP, time, delta);
// Update the Scene Manager and all active Scenes
this.scene.update(time, delta);
// Our final event before rendering starts
eventEmitter.emit(Events.POST_STEP, time, delta);
// This "if" is the changed introduced by the new "Game" class to avoid rendering unnecessarily.
if (this.isDirty()) {
const renderer = this.renderer;
// Run the Pre-render (clearing the canvas, setting background colors, etc)
renderer.preRender();
eventEmitter.emit(Events.PRE_RENDER, renderer, time, delta);
// The main render loop. Iterates all Scenes and all Cameras in those scenes, rendering to the renderer instance.
this.scene.render(renderer);
// The Post-Render call. Tidies up loose end, takes snapshots, etc.
renderer.postRender();
// The final event before the step repeats. Your last chance to do anything to the canvas before it all starts again.
eventEmitter.emit(Events.POST_RENDER, renderer, time, delta);
} else {
// @ts-ignore
this.scene.isProcessing = false;
}
}
private isDirty(): boolean {
// Loop through the scenes in forward order
for (let i = 0; i < this.scene.scenes.length; i++)
{
const scene = this.scene.scenes[i];
const sys = scene.sys;
if (sys.settings.visible && sys.settings.status >= Phaser.Scenes.LOADING && sys.settings.status < Phaser.Scenes.SLEEPING)
{
// @ts-ignore
if(typeof scene.isDirty === 'function') {
// @ts-ignore
const isDirty = scene.isDirty() || scene.tweens.getAllTweens().length > 0;
if (isDirty) {
return true;
}
} else {
return true;
}
}
}
return false;
}
}

3
front/src/Phaser/Game/GameManager.ts
View File

@ -95,11 +95,8 @@ export class GameManager {
console.log('starting '+ (this.currentGameSceneName || this.startRoom.id)) console.log('starting '+ (this.currentGameSceneName || this.startRoom.id))
scenePlugin.start(this.currentGameSceneName || this.startRoom.id); scenePlugin.start(this.currentGameSceneName || this.startRoom.id);
scenePlugin.launch(MenuSceneName); scenePlugin.launch(MenuSceneName);
if (!localUserStore.getHelpCameraSettingsShown()) {
scenePlugin.launch(HelpCameraSettingsSceneName);//700 scenePlugin.launch(HelpCameraSettingsSceneName);//700
} }
}
public gameSceneIsCreated(scene: GameScene) { public gameSceneIsCreated(scene: GameScene) {
this.currentGameSceneName = scene.scene.key; this.currentGameSceneName = scene.scene.key;

73
front/src/Phaser/Game/GameScene.ts
View File

@ -15,8 +15,6 @@ import {
JITSI_PRIVATE_MODE, JITSI_PRIVATE_MODE,
MAX_PER_GROUP, MAX_PER_GROUP,
POSITION_DELAY, POSITION_DELAY,
RESOLUTION,
ZOOM_LEVEL
} from "../../Enum/EnvironmentVariable"; } from "../../Enum/EnvironmentVariable";
import { import {
ITiledMap, ITiledMap,
@ -85,10 +83,14 @@ import DOMElement = Phaser.GameObjects.DOMElement;
import {Subscription} from "rxjs"; import {Subscription} from "rxjs";
import {worldFullMessageStream} from "../../Connexion/WorldFullMessageStream"; import {worldFullMessageStream} from "../../Connexion/WorldFullMessageStream";
import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoadingManager"; import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoadingManager";
import RenderTexture = Phaser.GameObjects.RenderTexture;
import Tilemap = Phaser.Tilemaps.Tilemap;
import {DirtyScene} from "./DirtyScene";
import {TextUtils} from "../Components/TextUtils"; import {TextUtils} from "../Components/TextUtils";
import {touchScreenManager} from "../../Touch/TouchScreenManager"; import {touchScreenManager} from "../../Touch/TouchScreenManager";
import {PinchManager} from "../UserInput/PinchManager"; import {PinchManager} from "../UserInput/PinchManager";
import {joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey} from "../Components/MobileJoystick"; import {joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey} from "../Components/MobileJoystick";
import {waScaleManager} from "../Services/WaScaleManager";
export interface GameSceneInitInterface { export interface GameSceneInitInterface {
initPosition: PointInterface|null, initPosition: PointInterface|null,
@ -127,13 +129,13 @@ interface DeleteGroupEventInterface {
const defaultStartLayerName = 'start'; const defaultStartLayerName = 'start';
export class GameScene extends ResizableScene implements CenterListener { export class GameScene extends DirtyScene implements CenterListener {
Terrains : Array<Phaser.Tilemaps.Tileset>; Terrains : Array<Phaser.Tilemaps.Tileset>;
CurrentPlayer!: CurrentGamerInterface; CurrentPlayer!: CurrentGamerInterface;
MapPlayers!: Phaser.Physics.Arcade.Group; MapPlayers!: Phaser.Physics.Arcade.Group;
MapPlayersByKey : Map<number, RemotePlayer> = new Map<number, RemotePlayer>(); MapPlayersByKey : Map<number, RemotePlayer> = new Map<number, RemotePlayer>();
Map!: Phaser.Tilemaps.Tilemap; Map!: Phaser.Tilemaps.Tilemap;
Layers!: Array<Phaser.Tilemaps.StaticTilemapLayer>; Layers!: Array<Phaser.Tilemaps.TilemapLayer>;
Objects!: Array<Phaser.Physics.Arcade.Sprite>; Objects!: Array<Phaser.Physics.Arcade.Sprite>;
mapFile!: ITiledMap; mapFile!: ITiledMap;
groups: Map<number, Sprite>; groups: Map<number, Sprite>;
@ -183,6 +185,7 @@ export class GameScene extends ResizableScene implements CenterListener {
private messageSubscription: Subscription|null = null; private messageSubscription: Subscription|null = null;
private popUpElements : Map<number, DOMElement> = new Map<number, Phaser.GameObjects.DOMElement>(); private popUpElements : Map<number, DOMElement> = new Map<number, Phaser.GameObjects.DOMElement>();
private originalMapUrl: string|undefined; private originalMapUrl: string|undefined;
private pinchManager: PinchManager|undefined;
constructor(private room: Room, MapUrlFile: string, customKey?: string|undefined) { constructor(private room: Room, MapUrlFile: string, customKey?: string|undefined) {
super({ super({
@ -201,12 +204,11 @@ export class GameScene extends ResizableScene implements CenterListener {
}) })
this.connectionAnswerPromise = new Promise<RoomJoinedMessageInterface>((resolve, reject): void => { this.connectionAnswerPromise = new Promise<RoomJoinedMessageInterface>((resolve, reject): void => {
this.connectionAnswerPromiseResolve = resolve; this.connectionAnswerPromiseResolve = resolve;
}) });
} }
//hook preload scene //hook preload scene
preload(): void { preload(): void {
addLoader(this);
const localUser = localUserStore.getLocalUser(); const localUser = localUserStore.getLocalUser();
const textures = localUser?.textures; const textures = localUser?.textures;
if (textures) { if (textures) {
@ -266,6 +268,9 @@ export class GameScene extends ResizableScene implements CenterListener {
this.load.spritesheet('layout_modes', 'resources/objects/layout_modes.png', {frameWidth: 32, frameHeight: 32}); this.load.spritesheet('layout_modes', 'resources/objects/layout_modes.png', {frameWidth: 32, frameHeight: 32});
this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml'); this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
//this function must stay at the end of preload function
addLoader(this);
} }
// FIXME: we need to put a "unknown" instead of a "any" and validate the structure of the JSON we are receiving. // FIXME: we need to put a "unknown" instead of a "any" and validate the structure of the JSON we are receiving.
@ -364,12 +369,14 @@ export class GameScene extends ResizableScene implements CenterListener {
//hook create scene //hook create scene
create(): void { create(): void {
this.trackDirtyAnims();
gameManager.gameSceneIsCreated(this); gameManager.gameSceneIsCreated(this);
urlManager.pushRoomIdToUrl(this.room); urlManager.pushRoomIdToUrl(this.room);
this.startLayerName = urlManager.getStartLayerNameFromUrl(); this.startLayerName = urlManager.getStartLayerNameFromUrl();
if (touchScreenManager.supportTouchScreen) { if (touchScreenManager.supportTouchScreen) {
new PinchManager(this); this.pinchManager = new PinchManager(this);
} }
this.messageSubscription = worldFullMessageStream.stream.subscribe((message) => this.showWorldFullError(message)) this.messageSubscription = worldFullMessageStream.stream.subscribe((message) => this.showWorldFullError(message))
@ -394,12 +401,11 @@ export class GameScene extends ResizableScene implements CenterListener {
this.physics.world.setBounds(0, 0, this.Map.widthInPixels, this.Map.heightInPixels); this.physics.world.setBounds(0, 0, this.Map.widthInPixels, this.Map.heightInPixels);
//add layer on map //add layer on map
this.Layers = new Array<Phaser.Tilemaps.StaticTilemapLayer>(); this.Layers = new Array<Phaser.Tilemaps.TilemapLayer>();
let depth = -2; let depth = -2;
for (const layer of this.gameMap.layersIterator) { for (const layer of this.gameMap.layersIterator) {
if (layer.type === 'tilelayer') { if (layer.type === 'tilelayer') {
this.addLayer(this.Map.createStaticLayer(layer.name, this.Terrains, 0, 0).setDepth(depth)); this.addLayer(this.Map.createLayer(layer.name, this.Terrains, 0, 0).setDepth(depth));
const exitSceneUrl = this.getExitSceneUrl(layer); const exitSceneUrl = this.getExitSceneUrl(layer);
if (exitSceneUrl !== undefined) { if (exitSceneUrl !== undefined) {
@ -435,8 +441,8 @@ export class GameScene extends ResizableScene implements CenterListener {
//create input to move //create input to move
mediaManager.setUserInputManager(this.userInputManager);
this.userInputManager = new UserInputManager(this); this.userInputManager = new UserInputManager(this);
mediaManager.setUserInputManager(this.userInputManager);
if (localUserStore.getFullscreen()) { if (localUserStore.getFullscreen()) {
document.querySelector('body')?.requestFullscreen(); document.querySelector('body')?.requestFullscreen();
@ -931,6 +937,8 @@ ${escapedMessage}
this.simplePeer?.closeAllConnections(); this.simplePeer?.closeAllConnections();
this.simplePeer?.unregister(); this.simplePeer?.unregister();
this.messageSubscription?.unsubscribe(); this.messageSubscription?.unsubscribe();
this.userInputManager.destroy();
this.pinchManager?.destroy();
for(const iframeEvents of this.iframeSubscriptionList){ for(const iframeEvents of this.iframeSubscriptionList){
iframeEvents.unsubscribe(); iframeEvents.unsubscribe();
@ -1078,17 +1086,18 @@ ${escapedMessage}
//todo: in a dedicated class/function? //todo: in a dedicated class/function?
initCamera() { initCamera() {
this.cameras.main.setBounds(0,0, this.Map.widthInPixels, this.Map.heightInPixels); this.cameras.main.setBounds(0,0, this.Map.widthInPixels, this.Map.heightInPixels);
this.cameras.main.startFollow(this.CurrentPlayer, true);
this.updateCameraOffset(); this.updateCameraOffset();
this.cameras.main.setZoom(ZOOM_LEVEL);
} }
addLayer(Layer : Phaser.Tilemaps.StaticTilemapLayer){ addLayer(Layer : Phaser.Tilemaps.TilemapLayer){
this.Layers.push(Layer); this.Layers.push(Layer);
} }
createCollisionWithPlayer() { createCollisionWithPlayer() {
this.physics.disableUpdate();
//add collision layer //add collision layer
this.Layers.forEach((Layer: Phaser.Tilemaps.StaticTilemapLayer) => { this.Layers.forEach((Layer: Phaser.Tilemaps.TilemapLayer) => {
this.physics.add.collider(this.CurrentPlayer, Layer, (object1: GameObject, object2: GameObject) => { this.physics.add.collider(this.CurrentPlayer, Layer, (object1: GameObject, object2: GameObject) => {
//this.CurrentPlayer.say("Collision with layer : "+ (object2 as Tile).layer.name) //this.CurrentPlayer.say("Collision with layer : "+ (object2 as Tile).layer.name)
}); });
@ -1217,12 +1226,24 @@ ${escapedMessage}
* @param delta The delta time in ms since the last frame. This is a smoothed and capped value based on the FPS rate. * @param delta The delta time in ms since the last frame. This is a smoothed and capped value based on the FPS rate.
*/ */
update(time: number, delta: number) : void { update(time: number, delta: number) : void {
mediaManager.setLastUpdateScene(); this.dirty = false;
mediaManager.updateScene();
this.currentTick = time; this.currentTick = time;
if (this.CurrentPlayer.isMoving()) {
this.dirty = true;
}
this.CurrentPlayer.moveUser(delta); this.CurrentPlayer.moveUser(delta);
if (this.CurrentPlayer.isMoving()) {
this.dirty = true;
this.physics.enableUpdate();
} else {
this.physics.disableUpdate();
}
// Let's handle all events // Let's handle all events
while (this.pendingEvents.length !== 0) { while (this.pendingEvents.length !== 0) {
this.dirty = true;
const event = this.pendingEvents.dequeue(); const event = this.pendingEvents.dequeue();
switch (event.type) { switch (event.type) {
case "InitUserPositionEvent": case "InitUserPositionEvent":
@ -1248,6 +1269,7 @@ ${escapedMessage}
// Let's move all users // Let's move all users
const updatedPlayersPositions = this.playersPositionInterpolator.getUpdatedPositions(time); const updatedPlayersPositions = this.playersPositionInterpolator.getUpdatedPositions(time);
updatedPlayersPositions.forEach((moveEvent: HasMovedEvent, userId: number) => { updatedPlayersPositions.forEach((moveEvent: HasMovedEvent, userId: number) => {
this.dirty = true;
const player: RemotePlayer | undefined = this.MapPlayersByKey.get(userId); const player: RemotePlayer | undefined = this.MapPlayersByKey.get(userId);
if (player === undefined) { if (player === undefined) {
throw new Error('Cannot find player with ID "' + userId + '"'); throw new Error('Cannot find player with ID "' + userId + '"');
@ -1417,7 +1439,8 @@ ${escapedMessage}
this.connection?.emitActionableEvent(itemId, eventName, state, parameters); this.connection?.emitActionableEvent(itemId, eventName, state, parameters);
} }
public onResize(): void { public onResize(ev: UIEvent): void {
super.onResize(ev);
this.reposition(); this.reposition();
// Send new viewport to server // Send new viewport to server
@ -1452,19 +1475,18 @@ ${escapedMessage}
} }
/** /**
* Updates the offset of the character compared to the center of the screen according to the layout mananger * Updates the offset of the character compared to the center of the screen according to the layout manager
* (tries to put the character in the center of the reamining space if there is a discussion going on. * (tries to put the character in the center of the remaining space if there is a discussion going on.
*/ */
private updateCameraOffset(): void { private updateCameraOffset(): void {
const array = layoutManager.findBiggestAvailableArray(); const array = layoutManager.findBiggestAvailableArray();
let xCenter = (array.xEnd - array.xStart) / 2 + array.xStart; const xCenter = (array.xEnd - array.xStart) / 2 + array.xStart;
let yCenter = (array.yEnd - array.yStart) / 2 + array.yStart; const yCenter = (array.yEnd - array.yStart) / 2 + array.yStart;
const game = HtmlUtils.querySelectorOrFail<HTMLCanvasElement>('#game canvas');
// Let's put this in Game coordinates by applying the zoom level: // Let's put this in Game coordinates by applying the zoom level:
xCenter /= ZOOM_LEVEL * RESOLUTION;
yCenter /= ZOOM_LEVEL * RESOLUTION;
this.cameras.main.startFollow(this.CurrentPlayer, true, 1, 1, xCenter - this.game.renderer.width / 2, yCenter - this.game.renderer.height / 2); this.cameras.main.setFollowOffset((xCenter - game.offsetWidth/2) * window.devicePixelRatio / this.scale.zoom , (yCenter - game.offsetHeight/2) * window.devicePixelRatio / this.scale.zoom);
} }
public onCenterChange(): void { public onCenterChange(): void {
@ -1554,4 +1576,9 @@ ${escapedMessage}
}); });
} }
} }
zoomByFactor(zoomFactor: number) {
waScaleManager.zoomModifier *= zoomFactor;
this.updateCameraOffset();
}
} }

41
front/src/Phaser/Login/CustomizeScene.ts
View File

@ -11,7 +11,6 @@ import {AbstractCharacterScene} from "./AbstractCharacterScene";
import {areCharacterLayersValid} from "../../Connexion/LocalUser"; import {areCharacterLayersValid} from "../../Connexion/LocalUser";
import { MenuScene } from "../Menu/MenuScene"; import { MenuScene } from "../Menu/MenuScene";
import { SelectCharacterSceneName } from "./SelectCharacterScene"; import { SelectCharacterSceneName } from "./SelectCharacterScene";
import { RESOLUTION } from "../../Enum/EnvironmentVariable";
export const CustomizeSceneName = "CustomizeScene"; export const CustomizeSceneName = "CustomizeScene";
@ -35,24 +34,25 @@ export class CustomizeScene extends AbstractCharacterScene {
} }
preload() { preload() {
addLoader(this);
this.load.html(customizeSceneKey, 'resources/html/CustomCharacterScene.html'); this.load.html(customizeSceneKey, 'resources/html/CustomCharacterScene.html');
this.layers = loadAllLayers(this.load); this.layers = loadAllLayers(this.load);
this.loadCustomSceneSelectCharacters().then((bodyResourceDescriptions) => { this.loadCustomSceneSelectCharacters().then((bodyResourceDescriptions) => {
bodyResourceDescriptions.forEach((bodyResourceDescription) => { bodyResourceDescriptions.forEach((bodyResourceDescription) => {
if(!bodyResourceDescription.level){ if(bodyResourceDescription.level == undefined || bodyResourceDescription.level < 0 || bodyResourceDescription.level > 5 ){
throw 'Texture level is null'; throw 'Texture level is null';
} }
this.layers[bodyResourceDescription.level].unshift(bodyResourceDescription); this.layers[bodyResourceDescription.level].unshift(bodyResourceDescription);
}); });
}); });
//this function must stay at the end of preload function
addLoader(this);
} }
create() { create() {
const middleX = this.getMiddleX(); this.customizeSceneElement = this.add.dom(-1000, 0).createFromCache(customizeSceneKey);
this.customizeSceneElement = this.add.dom(middleX, 0).createFromCache(customizeSceneKey); this.centerXDomElement(this.customizeSceneElement, 150);
MenuScene.revealMenusAfterInit(this.customizeSceneElement, customizeSceneKey); MenuScene.revealMenusAfterInit(this.customizeSceneElement, customizeSceneKey);
this.customizeSceneElement.addListener('click'); this.customizeSceneElement.addListener('click');
@ -112,6 +112,8 @@ export class CustomizeScene extends AbstractCharacterScene {
this.moveLayers(); this.moveLayers();
this.updateSelectedLayer(); this.updateSelectedLayer();
} }
this.onResize();
} }
private moveCursorHorizontally(index: number): void { private moveCursorHorizontally(index: number): void {
@ -259,13 +261,7 @@ export class CustomizeScene extends AbstractCharacterScene {
} }
update(time: number, delta: number): void { update(time: number, delta: number): void {
const middleX = this.getMiddleX();
this.tweens.add({
targets: this.customizeSceneElement,
x: middleX,
duration: 1000,
ease: 'Power3'
});
} }
public onResize(): void { public onResize(): void {
@ -274,24 +270,7 @@ export class CustomizeScene extends AbstractCharacterScene {
this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2; this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3; this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3;
const middleX = this.getMiddleX(); this.centerXDomElement(this.customizeSceneElement, 150);
this.tweens.add({
targets: this.customizeSceneElement,
x: middleX,
duration: 1000,
ease: 'Power3'
});
}
protected getMiddleX() : number{
return (this.game.renderer.width / RESOLUTION) -
(
this.customizeSceneElement
&& this.customizeSceneElement.node
&& this.customizeSceneElement.node.getBoundingClientRect().width > 0
? (this.customizeSceneElement.node.getBoundingClientRect().width / (2*RESOLUTION))
: 150
);
} }
private nextSceneToCamera(){ private nextSceneToCamera(){

64
front/src/Phaser/Login/EnableCameraScene.ts
View File

@ -1,9 +1,7 @@
import {gameManager} from "../Game/GameManager"; import {gameManager} from "../Game/GameManager";
import {TextField} from "../Components/TextField"; import {TextField} from "../Components/TextField";
import Image = Phaser.GameObjects.Image; import Image = Phaser.GameObjects.Image;
import Rectangle = Phaser.GameObjects.Rectangle;
import {mediaManager} from "../../WebRtc/MediaManager"; import {mediaManager} from "../../WebRtc/MediaManager";
import {RESOLUTION} from "../../Enum/EnvironmentVariable";
import {SoundMeter} from "../Components/SoundMeter"; import {SoundMeter} from "../Components/SoundMeter";
import {SoundMeterSprite} from "../Components/SoundMeterSprite"; import {SoundMeterSprite} from "../Components/SoundMeterSprite";
import {HtmlUtils} from "../../WebRtc/HtmlUtils"; import {HtmlUtils} from "../../WebRtc/HtmlUtils";
@ -11,6 +9,7 @@ import {touchScreenManager} from "../../Touch/TouchScreenManager";
import {PinchManager} from "../UserInput/PinchManager"; import {PinchManager} from "../UserInput/PinchManager";
import Zone = Phaser.GameObjects.Zone; import Zone = Phaser.GameObjects.Zone;
import { MenuScene } from "../Menu/MenuScene"; import { MenuScene } from "../Menu/MenuScene";
import {ResizableScene} from "./ResizableScene";
export const EnableCameraSceneName = "EnableCameraScene"; export const EnableCameraSceneName = "EnableCameraScene";
enum LoginTextures { enum LoginTextures {
@ -23,7 +22,7 @@ enum LoginTextures {
const enableCameraSceneKey = 'enableCameraScene'; const enableCameraSceneKey = 'enableCameraScene';
export class EnableCameraScene extends Phaser.Scene { export class EnableCameraScene extends ResizableScene {
private textField!: TextField; private textField!: TextField;
private cameraNameField!: TextField; private cameraNameField!: TextField;
private arrowLeft!: Image; private arrowLeft!: Image;
@ -37,11 +36,11 @@ export class EnableCameraScene extends Phaser.Scene {
private soundMeter: SoundMeter; private soundMeter: SoundMeter;
private soundMeterSprite!: SoundMeterSprite; private soundMeterSprite!: SoundMeterSprite;
private microphoneNameField!: TextField; private microphoneNameField!: TextField;
private repositionCallback!: (this: Window, ev: UIEvent) => void;
private enableCameraSceneElement!: Phaser.GameObjects.DOMElement; private enableCameraSceneElement!: Phaser.GameObjects.DOMElement;
private mobileTapZone!: Zone; private mobileTapZone!: Zone;
constructor() { constructor() {
super({ super({
key: EnableCameraSceneName key: EnableCameraSceneName
@ -62,8 +61,9 @@ export class EnableCameraScene extends Phaser.Scene {
create() { create() {
const middleX = this.getMiddleX(); this.enableCameraSceneElement = this.add.dom(-1000, 0).createFromCache(enableCameraSceneKey);
this.enableCameraSceneElement = this.add.dom(middleX, 0).createFromCache(enableCameraSceneKey); this.centerXDomElement(this.enableCameraSceneElement, 300);
MenuScene.revealMenusAfterInit(this.enableCameraSceneElement, enableCameraSceneKey); MenuScene.revealMenusAfterInit(this.enableCameraSceneElement, enableCameraSceneKey);
const continuingButton = this.enableCameraSceneElement.getChildByID('enableCameraSceneFormSubmit') as HTMLButtonElement; const continuingButton = this.enableCameraSceneElement.getChildByID('enableCameraSceneFormSubmit') as HTMLButtonElement;
@ -75,12 +75,14 @@ export class EnableCameraScene extends Phaser.Scene {
if (touchScreenManager.supportTouchScreen) { if (touchScreenManager.supportTouchScreen) {
new PinchManager(this); new PinchManager(this);
} }
//this.scale.setZoom(ZOOM_LEVEL);
//Phaser.Display.Align.In.BottomCenter(this.pressReturnField, zone);
/* FIX ME */ /* FIX ME */
this.textField = new TextField(this, this.game.renderer.width / 2, 20, ''); this.textField = new TextField(this, this.scale.width / 2, 20, '');
// For mobile purposes - we need a big enough touchable area. // For mobile purposes - we need a big enough touchable area.
this.mobileTapZone = this.add.zone(this.game.renderer.width / 2,this.game.renderer.height - 30,200,50) this.mobileTapZone = this.add.zone(this.scale.width / 2,this.scale.height - 30,200,50)
.setInteractive().on("pointerdown", () => { .setInteractive().on("pointerdown", () => {
this.login(); this.login();
}); });
@ -130,8 +132,7 @@ export class EnableCameraScene extends Phaser.Scene {
this.soundMeterSprite.setVisible(false); this.soundMeterSprite.setVisible(false);
this.add.existing(this.soundMeterSprite); this.add.existing(this.soundMeterSprite);
this.repositionCallback = this.reposition.bind(this); this.onResize();
window.addEventListener('resize', this.repositionCallback);
} }
private previousCam(): void { private previousCam(): void {
@ -209,10 +210,9 @@ export class EnableCameraScene extends Phaser.Scene {
this.arrowUp.setVisible(this.microphoneSelected > 0); this.arrowUp.setVisible(this.microphoneSelected > 0);
} }
this.reposition();
} }
private reposition(): void { public onResize(): void {
let div = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup'); let div = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup');
let bounds = div.getBoundingClientRect(); let bounds = div.getBoundingClientRect();
if (!div.srcObject) { if (!div.srcObject) {
@ -225,44 +225,41 @@ export class EnableCameraScene extends Phaser.Scene {
this.cameraNameField.x = this.game.renderer.width / 2; this.cameraNameField.x = this.game.renderer.width / 2;
this.microphoneNameField.x = this.game.renderer.width / 2; this.microphoneNameField.x = this.game.renderer.width / 2;
this.cameraNameField.y = bounds.top / RESOLUTION - 8; this.cameraNameField.y = bounds.top / this.scale.zoom - 8;
this.soundMeterSprite.x = this.game.renderer.width / 2 - this.soundMeterSprite.getWidth() / 2; this.soundMeterSprite.x = this.game.renderer.width / 2 - this.soundMeterSprite.getWidth() / 2;
this.soundMeterSprite.y = bounds.bottom / RESOLUTION + 16; this.soundMeterSprite.y = bounds.bottom / this.scale.zoom + 16;
this.microphoneNameField.y = this.soundMeterSprite.y + 22; this.microphoneNameField.y = this.soundMeterSprite.y + 22;
this.arrowRight.x = bounds.right / RESOLUTION + 16; this.arrowRight.x = bounds.right / this.scale.zoom + 16;
this.arrowRight.y = (bounds.top + bounds.height / 2) / RESOLUTION; this.arrowRight.y = (bounds.top + bounds.height / 2) / this.scale.zoom;
this.arrowLeft.x = bounds.left / RESOLUTION - 16; this.arrowLeft.x = bounds.left / this.scale.zoom - 16;
this.arrowLeft.y = (bounds.top + bounds.height / 2) / RESOLUTION; this.arrowLeft.y = (bounds.top + bounds.height / 2) / this.scale.zoom;
this.arrowDown.x = this.microphoneNameField.x + this.microphoneNameField.width / 2 + 16; this.arrowDown.x = this.microphoneNameField.x + this.microphoneNameField.width / 2 + 16;
this.arrowDown.y = this.microphoneNameField.y; this.arrowDown.y = this.microphoneNameField.y;
this.arrowUp.x = this.microphoneNameField.x - this.microphoneNameField.width / 2 - 16; this.arrowUp.x = this.microphoneNameField.x - this.microphoneNameField.width / 2 - 16;
this.arrowUp.y = this.microphoneNameField.y; this.arrowUp.y = this.microphoneNameField.y;
const actionBtn = document.querySelector<HTMLDivElement>('#enableCameraScene .action');
if (actionBtn !== null) {
actionBtn.style.top = (this.scale.height - 65) + 'px';
}
} }
update(time: number, delta: number): void { update(time: number, delta: number): void {
this.soundMeterSprite.setVolume(this.soundMeter.getVolume()); this.soundMeterSprite.setVolume(this.soundMeter.getVolume());
mediaManager.updateScene();
mediaManager.setLastUpdateScene(); this.centerXDomElement(this.enableCameraSceneElement, 300);
const middleX = this.getMiddleX();
this.tweens.add({
targets: this.enableCameraSceneElement,
x: middleX,
duration: 1000,
ease: 'Power3'
});
} }
private login(): void { private login(): void {
HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none'; HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
this.soundMeter.stop(); this.soundMeter.stop();
window.removeEventListener('resize', this.repositionCallback);
mediaManager.stopCamera(); mediaManager.stopCamera();
mediaManager.stopMicrophone(); mediaManager.stopMicrophone();
@ -282,15 +279,4 @@ export class EnableCameraScene extends Phaser.Scene {
} }
this.updateWebCamName(); this.updateWebCamName();
} }
private getMiddleX() : number{
return (this.game.renderer.width / RESOLUTION) -
(
this.enableCameraSceneElement
&& this.enableCameraSceneElement.node
&& this.enableCameraSceneElement.node.getBoundingClientRect().width > 0
? (this.enableCameraSceneElement.node.getBoundingClientRect().width / (2*RESOLUTION))
: (300 / RESOLUTION)
);
}
} }

5
front/src/Phaser/Login/EntryScene.ts
View File

@ -2,6 +2,7 @@ import {gameManager} from "../Game/GameManager";
import {Scene} from "phaser"; import {Scene} from "phaser";
import {ErrorScene} from "../Reconnecting/ErrorScene"; import {ErrorScene} from "../Reconnecting/ErrorScene";
import {WAError} from "../Reconnecting/WAError"; import {WAError} from "../Reconnecting/WAError";
import {waScaleManager} from "../Services/WaScaleManager";
export const EntrySceneName = "EntryScene"; export const EntrySceneName = "EntryScene";
@ -17,7 +18,11 @@ export class EntryScene extends Scene {
} }
create() { create() {
gameManager.init(this.scene).then((nextSceneName) => { gameManager.init(this.scene).then((nextSceneName) => {
// Let's rescale before starting the game
// We can do it at this stage.
waScaleManager.applyNewSize();
this.scene.start(nextSceneName); this.scene.start(nextSceneName);
}).catch((err) => { }).catch((err) => {
if (err.response && err.response.status == 404) { if (err.response && err.response.status == 404) {

26
front/src/Phaser/Login/LoginScene.ts
View File

@ -4,7 +4,6 @@ import {ResizableScene} from "./ResizableScene";
import { localUserStore } from "../../Connexion/LocalUserStore"; import { localUserStore } from "../../Connexion/LocalUserStore";
import {MenuScene} from "../Menu/MenuScene"; import {MenuScene} from "../Menu/MenuScene";
import { isUserNameValid } from "../../Connexion/LocalUser"; import { isUserNameValid } from "../../Connexion/LocalUser";
import { RESOLUTION } from "../../Enum/EnvironmentVariable";
export const LoginSceneName = "LoginScene"; export const LoginSceneName = "LoginScene";
@ -27,8 +26,8 @@ export class LoginScene extends ResizableScene {
} }
create() { create() {
const middleX = this.getMiddleX(); this.loginSceneElement = this.add.dom(-1000, 0).createFromCache(loginSceneKey);
this.loginSceneElement = this.add.dom(middleX, 0).createFromCache(loginSceneKey); this.centerXDomElement(this.loginSceneElement, 200);
MenuScene.revealMenusAfterInit(this.loginSceneElement, loginSceneKey); MenuScene.revealMenusAfterInit(this.loginSceneElement, loginSceneKey);
const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement; const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement;
@ -78,27 +77,10 @@ export class LoginScene extends ResizableScene {
} }
update(time: number, delta: number): void { update(time: number, delta: number): void {
const middleX = this.getMiddleX();
this.tweens.add({
targets: this.loginSceneElement,
x: middleX,
duration: 1000,
ease: 'Power3'
});
} }
public onResize(ev: UIEvent): void { public onResize(ev: UIEvent): void {
const middleX = this.getMiddleX(); this.centerXDomElement(this.loginSceneElement, 200);
this.tweens.add({
targets: this.loginSceneElement,
x: middleX,
duration: 1000,
ease: 'Power3'
});
}
private getMiddleX() : number{
const middleX = ((window.innerWidth) - ((this.loginSceneElement && this.loginSceneElement.width > 0 ? this.loginSceneElement.width : 200 /*FIXME to use a const will be injected in HTMLElement*/)*2)) / 2;
return (middleX > 0 ? (middleX / 2) : 0);
} }
} }

18
front/src/Phaser/Login/ResizableScene.ts
View File

@ -1,5 +1,23 @@
import {Scene} from "phaser"; import {Scene} from "phaser";
import DOMElement = Phaser.GameObjects.DOMElement;
export abstract class ResizableScene extends Scene { export abstract class ResizableScene extends Scene {
public abstract onResize(ev: UIEvent): void; public abstract onResize(ev: UIEvent): void;
/**
* Centers the DOM element on the X axis.
*
* @param object
* @param defaultWidth The width of the DOM element. We try to compute it but it may not be available if called from "create".
*/
public centerXDomElement(object: DOMElement, defaultWidth: number): void {
object.x = (this.scale.width / 2) -
(
object
&& object.node
&& object.node.getBoundingClientRect().width > 0
? (object.node.getBoundingClientRect().width / 2 / this.scale.zoom)
: (300 / this.scale.zoom)
);
}
} }

76
front/src/Phaser/Login/SelectCharacterMobileScene.ts Normal file
View File

@ -0,0 +1,76 @@
import {gameManager} from "../Game/GameManager";
import {TextField} from "../Components/TextField";
import Image = Phaser.GameObjects.Image;
import Rectangle = Phaser.GameObjects.Rectangle;
import {EnableCameraSceneName} from "./EnableCameraScene";
import {CustomizeSceneName} from "./CustomizeScene";
import {localUserStore} from "../../Connexion/LocalUserStore";
import {loadAllDefaultModels} from "../Entity/PlayerTexturesLoadingManager";
import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
import {AbstractCharacterScene} from "./AbstractCharacterScene";
import {areCharacterLayersValid} from "../../Connexion/LocalUser";
import {touchScreenManager} from "../../Touch/TouchScreenManager";
import {PinchManager} from "../UserInput/PinchManager";
import {MenuScene} from "../Menu/MenuScene";
import { SelectCharacterScene, SelectCharacterSceneName } from "./SelectCharacterScene";
export class SelectCharacterMobileScene extends SelectCharacterScene {
create(){
super.create();
this.selectedRectangle.destroy();
}
protected defineSetupPlayer(numero: number){
const deltaX = 30;
const deltaY = 2;
let [playerX, playerY] = this.getCharacterPosition();
let playerVisible = true;
let playerScale = 1.5;
let playserOpactity = 1;
if( this.currentSelectUser !== numero ){
playerVisible = false;
}
if( numero === (this.currentSelectUser + 1) ){
playerY -= deltaY;
playerX += deltaX;
playerScale = 0.8;
playserOpactity = 0.6;
playerVisible = true;
}
if( numero === (this.currentSelectUser + 2) ){
playerY -= deltaY;
playerX += (deltaX * 2);
playerScale = 0.8;
playserOpactity = 0.6;
playerVisible = true;
}
if( numero === (this.currentSelectUser - 1) ){
playerY -= deltaY;
playerX -= deltaX;
playerScale = 0.8;
playserOpactity = 0.6;
playerVisible = true;
}
if( numero === (this.currentSelectUser - 2) ){
playerY -= deltaY;
playerX -= (deltaX * 2);
playerScale = 0.8;
playserOpactity = 0.6;
playerVisible = true;
}
return {playerX, playerY, playerScale, playserOpactity, playerVisible}
}
/**
* Returns pixel position by on column and row number
*/
protected getCharacterPosition(): [number, number] {
return [
this.game.renderer.width / 2,
this.game.renderer.height / 3
];
}
}

34
front/src/Phaser/Login/SelectCharacterScene.ts
View File

@ -37,8 +37,6 @@ export class SelectCharacterScene extends AbstractCharacterScene {
} }
preload() { preload() {
addLoader(this);
this.load.html(selectCharacterKey, 'resources/html/selectCharacterScene.html'); this.load.html(selectCharacterKey, 'resources/html/selectCharacterScene.html');
this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => { this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => {
@ -47,13 +45,15 @@ export class SelectCharacterScene extends AbstractCharacterScene {
}); });
}) })
this.playerModels = loadAllDefaultModels(this.load); this.playerModels = loadAllDefaultModels(this.load);
//this function must stay at the end of preload function
addLoader(this); addLoader(this);
} }
create() { create() {
const middleX = this.getMiddleX(); this.selectCharacterSceneElement = this.add.dom(-1000, 0).createFromCache(selectCharacterKey);
this.selectCharacterSceneElement = this.add.dom(middleX, 0).createFromCache(selectCharacterKey); this.centerXDomElement(this.selectCharacterSceneElement, 150);
MenuScene.revealMenusAfterInit(this.selectCharacterSceneElement, selectCharacterKey); MenuScene.revealMenusAfterInit(this.selectCharacterSceneElement, selectCharacterKey);
this.selectCharacterSceneElement.addListener('click'); this.selectCharacterSceneElement.addListener('click');
@ -279,36 +279,12 @@ export class SelectCharacterScene extends AbstractCharacterScene {
} }
update(time: number, delta: number): void { update(time: number, delta: number): void {
const middleX = this.getMiddleX();
this.tweens.add({
targets: this.selectCharacterSceneElement,
x: middleX,
duration: 1000,
ease: 'Power3'
});
} }
public onResize(ev: UIEvent): void { public onResize(ev: UIEvent): void {
//move position of user //move position of user
this.moveUser(); this.moveUser();
const middleX = this.getMiddleX(); this.centerXDomElement(this.selectCharacterSceneElement, 150);
this.tweens.add({
targets: this.selectCharacterSceneElement,
x: middleX,
duration: 1000,
ease: 'Power3'
});
}
protected getMiddleX() : number{
return (this.game.renderer.width / 2) -
(
this.selectCharacterSceneElement
&& this.selectCharacterSceneElement.node
&& this.selectCharacterSceneElement.node.getBoundingClientRect().width > 0
? (this.selectCharacterSceneElement.node.getBoundingClientRect().width / 4)
: 150
);
} }
} }

35
front/src/Phaser/Login/SelectCompanionScene.ts
View File

@ -10,7 +10,6 @@ import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingM
import {touchScreenManager} from "../../Touch/TouchScreenManager"; import {touchScreenManager} from "../../Touch/TouchScreenManager";
import {PinchManager} from "../UserInput/PinchManager"; import {PinchManager} from "../UserInput/PinchManager";
import { MenuScene } from "../Menu/MenuScene"; import { MenuScene } from "../Menu/MenuScene";
import { RESOLUTION } from "../../Enum/EnvironmentVariable";
export const SelectCompanionSceneName = "SelectCompanionScene"; export const SelectCompanionSceneName = "SelectCompanionScene";
@ -31,21 +30,20 @@ export class SelectCompanionScene extends ResizableScene {
} }
preload() { preload() {
addLoader(this);
this.load.html(selectCompanionSceneKey, 'resources/html/SelectCompanionScene.html'); this.load.html(selectCompanionSceneKey, 'resources/html/SelectCompanionScene.html');
getAllCompanionResources(this.load).forEach(model => { getAllCompanionResources(this.load).forEach(model => {
this.companionModels.push(model); this.companionModels.push(model);
}); });
//this function must stay at the end of preload function
addLoader(this); addLoader(this);
} }
create() { create() {
const middleX = this.getMiddleX(); this.selectCompanionSceneElement = this.add.dom(-1000, 0).createFromCache(selectCompanionSceneKey);
this.selectCompanionSceneElement = this.add.dom(middleX, 0).createFromCache(selectCompanionSceneKey); this.centerXDomElement(this.selectCompanionSceneElement, 150);
MenuScene.revealMenusAfterInit(this.selectCompanionSceneElement, selectCompanionSceneKey); MenuScene.revealMenusAfterInit(this.selectCompanionSceneElement, selectCompanionSceneKey);
this.selectCompanionSceneElement.addListener('click'); this.selectCompanionSceneElement.addListener('click');
@ -88,13 +86,7 @@ export class SelectCompanionScene extends ResizableScene {
} }
update(time: number, delta: number): void { update(time: number, delta: number): void {
const middleX = this.getMiddleX();
this.tweens.add({
targets: this.selectCompanionSceneElement,
x: middleX,
duration: 1000,
ease: 'Power3'
});
} }
private nextScene(): void { private nextScene(): void {
@ -137,13 +129,7 @@ export class SelectCompanionScene extends ResizableScene {
public onResize(ev: UIEvent): void { public onResize(ev: UIEvent): void {
this.moveCompanion(); this.moveCompanion();
const middleX = this.getMiddleX(); this.centerXDomElement(this.selectCompanionSceneElement, 150);
this.tweens.add({
targets: this.selectCompanionSceneElement,
x: middleX,
duration: 1000,
ease: 'Power3'
});
} }
private updateSelectedCompanion(): void { private updateSelectedCompanion(): void {
@ -239,15 +225,4 @@ export class SelectCompanionScene extends ResizableScene {
companion.setX(companionX); companion.setX(companionX);
companion.setY(companionY); companion.setY(companionY);
} }
private getMiddleX() : number{
return (this.game.renderer.width / RESOLUTION) -
(
this.selectCompanionSceneElement
&& this.selectCompanionSceneElement.node
&& this.selectCompanionSceneElement.node.getBoundingClientRect().width > 0
? (this.selectCompanionSceneElement.node.getBoundingClientRect().width / (2*RESOLUTION))
: 150
);
}
} }

55
front/src/Phaser/Menu/HelpCameraSettingsScene.ts
View File

@ -1,14 +1,14 @@
import {mediaManager} from "../../WebRtc/MediaManager"; import {mediaManager} from "../../WebRtc/MediaManager";
import {HtmlUtils} from "../../WebRtc/HtmlUtils"; import {HtmlUtils} from "../../WebRtc/HtmlUtils";
import {localUserStore} from "../../Connexion/LocalUserStore"; import {localUserStore} from "../../Connexion/LocalUserStore";
import {RESOLUTION} from "../../Enum/EnvironmentVariable"; import {DirtyScene} from "../Game/DirtyScene";
export const HelpCameraSettingsSceneName = 'HelpCameraSettingsScene'; export const HelpCameraSettingsSceneName = 'HelpCameraSettingsScene';
const helpCameraSettings = 'helpCameraSettings'; const helpCameraSettings = 'helpCameraSettings';
/** /**
* The scene that show how to permit Camera and Microphone access if there are not already allowed * The scene that show how to permit Camera and Microphone access if there are not already allowed
*/ */
export class HelpCameraSettingsScene extends Phaser.Scene { export class HelpCameraSettingsScene extends DirtyScene {
private helpCameraSettingsElement!: Phaser.GameObjects.DOMElement; private helpCameraSettingsElement!: Phaser.GameObjects.DOMElement;
private helpCameraSettingsOpened: boolean = false; private helpCameraSettingsOpened: boolean = false;
@ -30,6 +30,9 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
this.revealMenusAfterInit(this.helpCameraSettingsElement, helpCameraSettings); this.revealMenusAfterInit(this.helpCameraSettingsElement, helpCameraSettings);
this.helpCameraSettingsElement.addListener('click'); this.helpCameraSettingsElement.addListener('click');
this.helpCameraSettingsElement.on('click', (event:MouseEvent) => { this.helpCameraSettingsElement.on('click', (event:MouseEvent) => {
if((event?.target as HTMLInputElement).id === 'mailto') {
return;
}
event.preventDefault(); event.preventDefault();
if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormRefresh') { if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormRefresh') {
window.location.reload(); window.location.reload();
@ -38,21 +41,28 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
} }
}); });
if(!mediaManager.constraintsMedia.audio || !mediaManager.constraintsMedia.video) { if(!localUserStore.getHelpCameraSettingsShown() && (!mediaManager.constraintsMedia.audio || !mediaManager.constraintsMedia.video)){
this.openHelpCameraSettingsOpened(); this.openHelpCameraSettingsOpened();
} else { localUserStore.setHelpCameraSettingsShown();
this.closeHelpCameraSettingsOpened();
} }
mediaManager.setHelpCameraSettingsCallBack(() => {
this.openHelpCameraSettingsOpened();
});
} }
private openHelpCameraSettingsOpened(): void { private openHelpCameraSettingsOpened(): void {
HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none'; HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
this.helpCameraSettingsOpened = true; this.helpCameraSettingsOpened = true;
try{
if(window.navigator.userAgent.includes('Firefox')){ if(window.navigator.userAgent.includes('Firefox')){
HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-firefox.png"/>'; HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-firefox.png"/>';
}else if(window.navigator.userAgent.includes('Chrome')){ }else if(window.navigator.userAgent.includes('Chrome')){
HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-chrome.png"/>'; HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-chrome.png"/>';
} }
}catch(err) {
console.error('openHelpCameraSettingsOpened => getElementByIdOrFail => error', err);
}
const middleY = this.getMiddleY(); const middleY = this.getMiddleY();
const middleX = this.getMiddleX(); const middleX = this.getMiddleX();
this.tweens.add({ this.tweens.add({
@ -63,23 +73,26 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
ease: 'Power3', ease: 'Power3',
overflow: 'scroll' overflow: 'scroll'
}); });
this.dirty = true;
} }
private closeHelpCameraSettingsOpened(): void { private closeHelpCameraSettingsOpened(): void {
const middleX = this.getMiddleX(); const middleX = this.getMiddleX();
const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement; /*const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement;
helpCameraSettingsInfo.innerText = ''; helpCameraSettingsInfo.innerText = '';
helpCameraSettingsInfo.style.display = 'none'; helpCameraSettingsInfo.style.display = 'none';*/
this.helpCameraSettingsOpened = false; this.helpCameraSettingsOpened = false;
this.tweens.add({ this.tweens.add({
targets: this.helpCameraSettingsElement, targets: this.helpCameraSettingsElement,
y: -400, y: -1000,
x: middleX, x: middleX,
duration: 1000, duration: 1000,
ease: 'Power3', ease: 'Power3',
overflow: 'scroll' overflow: 'scroll'
}); });
localUserStore.setHelpCameraSettingsShown();
this.dirty = true;
} }
private revealMenusAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) { private revealMenusAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) {
@ -91,18 +104,11 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
} }
update(time: number, delta: number): void { update(time: number, delta: number): void {
const middleX = this.getMiddleX(); this.dirty = false;
const middleY = this.getMiddleY();
this.tweens.add({
targets: this.helpCameraSettingsElement,
x: middleX,
y: middleY,
duration: 1000,
ease: 'Power3'
});
} }
public onResize(ev: UIEvent): void { public onResize(ev: UIEvent): void {
super.onResize(ev);
const middleX = this.getMiddleX(); const middleX = this.getMiddleX();
const middleY = this.getMiddleY(); const middleY = this.getMiddleY();
this.tweens.add({ this.tweens.add({
@ -115,24 +121,27 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
} }
private getMiddleX() : number{ private getMiddleX() : number{
return (this.game.renderer.width / RESOLUTION) - return (this.scale.width / 2) -
( (
this.helpCameraSettingsElement this.helpCameraSettingsElement
&& this.helpCameraSettingsElement.node && this.helpCameraSettingsElement.node
&& this.helpCameraSettingsElement.node.getBoundingClientRect().width > 0 && this.helpCameraSettingsElement.node.getBoundingClientRect().width > 0
? (this.helpCameraSettingsElement.node.getBoundingClientRect().width / 4) ? (this.helpCameraSettingsElement.node.getBoundingClientRect().width / (2 * this.scale.zoom))
: (400 / 2) : (400 / 2)
); );
} }
private getMiddleY() : number{ private getMiddleY() : number{
const middleY = ((window.innerHeight) - ( const middleY = ((this.scale.height) - (
(this.helpCameraSettingsElement (this.helpCameraSettingsElement
&& this.helpCameraSettingsElement.node && this.helpCameraSettingsElement.node
&& this.helpCameraSettingsElement.node.getBoundingClientRect().height > 0 && this.helpCameraSettingsElement.node.getBoundingClientRect().height > 0
? this.helpCameraSettingsElement.node.getBoundingClientRect().height : 400 /*FIXME to use a const will be injected in HTMLElement*/) * 2)) / 2; ? this.helpCameraSettingsElement.node.getBoundingClientRect().height : 400 /*FIXME to use a const will be injected in HTMLElement*/)/this.scale.zoom)) / 2;
return (middleY > 0 ? middleY / RESOLUTION : 0); return (middleY > 0 ? middleY : 0);
} }
public isDirty(): boolean {
return this.dirty;
}
} }

12
front/src/Phaser/Menu/MenuScene.ts
View File

@ -192,11 +192,11 @@ export class MenuScene extends Phaser.Scene {
} }
}); });
let middleY = (window.innerHeight / 3) - (257); let middleY = this.scale.height / 2 - 392/2;
if(middleY < 0){ if(middleY < 0){
middleY = 0; middleY = 0;
} }
let middleX = (window.innerWidth / 3) - 298; let middleX = this.scale.width / 2 - 457/2;
if(middleX < 0){ if(middleX < 0){
middleX = 0; middleX = 0;
} }
@ -236,11 +236,11 @@ export class MenuScene extends Phaser.Scene {
this.gameShareOpened = true; this.gameShareOpened = true;
let middleY = (window.innerHeight / 3) - (257); let middleY = this.scale.height / 2 - 85;
if(middleY < 0){ if(middleY < 0){
middleY = 0; middleY = 0;
} }
let middleX = (window.innerWidth / 3) - 298; let middleX = this.scale.width / 2 - 200;
if(middleX < 0){ if(middleX < 0){
middleX = 0; middleX = 0;
} }
@ -350,4 +350,8 @@ export class MenuScene extends Phaser.Scene {
} }
} }
} }
public isDirty(): boolean {
return false;
}
} }

5
front/src/Phaser/Player/Player.ts
View File

@ -7,6 +7,7 @@ export const hasMovedEventName = "hasMoved";
export interface CurrentGamerInterface extends Character{ export interface CurrentGamerInterface extends Character{
moveUser(delta: number) : void; moveUser(delta: number) : void;
say(text : string) : void; say(text : string) : void;
isMoving(): boolean;
} }
export class Player extends Character implements CurrentGamerInterface { export class Player extends Character implements CurrentGamerInterface {
@ -83,4 +84,8 @@ export class Player extends Character implements CurrentGamerInterface {
} }
this.wasMoving = moving; this.wasMoving = moving;
} }
public isMoving(): boolean {
return this.wasMoving;
}
} }

105
front/src/Phaser/Services/HdpiManager.ts Normal file
View File

@ -0,0 +1,105 @@
import ScaleManager = Phaser.Scale.ScaleManager;
interface Size {
width: number;
height: number;
}
export class HdpiManager {
private _zoomModifier: number = 1;
/**
*
* @param minRecommendedGamePixelsNumber The minimum number of pixels we want to display "by default" to the user
* @param absoluteMinPixelNumber The very minimum of game pixels to display. Below, we forbid zooming more
*/
public constructor(private minRecommendedGamePixelsNumber: number, private absoluteMinPixelNumber: number) {
}
/**
* Returns the optimal size in "game pixels" based on the screen size in "real pixels".
*
* Note: the function is returning the optimal size in "game pixels" in the "game" property,
* but also recommends resizing the "real" pixel screen size of the canvas.
* The proposed new real size is a few pixels bigger than the real size available (if the size is not a multiple of the pixel size) and should overflow.
*
* @param realPixelScreenSize
*/
public getOptimalGameSize(realPixelScreenSize: Size): { game: Size, real: Size } {
const realPixelNumber = realPixelScreenSize.width * realPixelScreenSize.height;
// If the screen has not a definition small enough to match the minimum number of pixels we want to display,
// let's make the canvas the size of the screen (in real pixels)
if (realPixelNumber <= this.minRecommendedGamePixelsNumber) {
return {
game: realPixelScreenSize,
real: realPixelScreenSize
};
}
let i = 1;
while (realPixelNumber > this.minRecommendedGamePixelsNumber * i * i) {
i++;
}
// Has the canvas more pixels than the screen? This is forbidden
if ((i - 1) * this._zoomModifier < 1) {
// Let's reset the zoom modifier (WARNING this is a SIDE EFFECT in a getter)
this._zoomModifier = 1 / (i - 1);
return {
game: {
width: realPixelScreenSize.width,
height: realPixelScreenSize.height,
},
real: {
width: realPixelScreenSize.width,
height: realPixelScreenSize.height,
}
}
}
const gameWidth = Math.ceil(realPixelScreenSize.width / (i - 1) / this._zoomModifier);
const gameHeight = Math.ceil(realPixelScreenSize.height / (i - 1) / this._zoomModifier);
// Let's ensure we display a minimum of pixels, even if crazily zoomed in.
if (gameWidth * gameHeight < this.absoluteMinPixelNumber) {
const minGameHeight = Math.sqrt(this.absoluteMinPixelNumber * realPixelScreenSize.height / realPixelScreenSize.width);
const minGameWidth = Math.sqrt(this.absoluteMinPixelNumber * realPixelScreenSize.width / realPixelScreenSize.height);
// Let's reset the zoom modifier (WARNING this is a SIDE EFFECT in a getter)
this._zoomModifier = realPixelScreenSize.width / minGameWidth / (i - 1);
return {
game: {
width: minGameWidth,
height: minGameHeight,
},
real: {
width: realPixelScreenSize.width,
height: realPixelScreenSize.height,
}
}
}
return {
game: {
width: gameWidth,
height: gameHeight,
},
real: {
width: Math.ceil(realPixelScreenSize.width / (i - 1)) * (i - 1),
height: Math.ceil(realPixelScreenSize.height / (i - 1)) * (i - 1),
}
}
}
public get zoomModifier(): number {
return this._zoomModifier;
}
public set zoomModifier(zoomModifier: number) {
this._zoomModifier = zoomModifier;
}
}

47
front/src/Phaser/Services/WaScaleManager.ts Normal file
View File

@ -0,0 +1,47 @@
import {HdpiManager} from "./HdpiManager";
import ScaleManager = Phaser.Scale.ScaleManager;
import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager";
class WaScaleManager {
private hdpiManager: HdpiManager;
private scaleManager!: ScaleManager;
public constructor(private minGamePixelsNumber: number, private absoluteMinPixelNumber: number) {
this.hdpiManager = new HdpiManager(minGamePixelsNumber, absoluteMinPixelNumber);
}
public setScaleManager(scaleManager: ScaleManager) {
this.scaleManager = scaleManager;
}
public applyNewSize() {
const {width, height} = coWebsiteManager.getGameSize();
let devicePixelRatio = 1;
if (window.devicePixelRatio) {
devicePixelRatio = window.devicePixelRatio;
}
const { game: gameSize, real: realSize } = this.hdpiManager.getOptimalGameSize({width: width * devicePixelRatio, height: height * devicePixelRatio});
this.scaleManager.setZoom(realSize.width / gameSize.width / devicePixelRatio);
this.scaleManager.resize(gameSize.width, gameSize.height);
// Override bug in canvas resizing in Phaser. Let's resize the canvas ourselves
const style = this.scaleManager.canvas.style;
style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px';
style.height = Math.ceil(realSize.height / devicePixelRatio) + 'px';
}
public get zoomModifier(): number {
return this.hdpiManager.zoomModifier;
}
public set zoomModifier(zoomModifier: number) {
this.hdpiManager.zoomModifier = zoomModifier;
this.applyNewSize();
}
}
export const waScaleManager = new WaScaleManager(640*480, 196*196);

2
front/src/Phaser/Shaders/OutlinePipeline.ts
View File

@ -1,4 +1,4 @@
export class OutlinePipeline extends Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline { export class OutlinePipeline extends Phaser.Renderer.WebGL.Pipelines.MultiPipeline {
// the unique id of this pipeline // the unique id of this pipeline
public static readonly KEY = 'Outline'; public static readonly KEY = 'Outline';

31
front/src/Phaser/UserInput/PinchManager.ts
View File

@ -1,4 +1,6 @@
import {Pinch} from "phaser3-rex-plugins/plugins/gestures.js"; import {Pinch} from "phaser3-rex-plugins/plugins/gestures.js";
import {waScaleManager} from "../Services/WaScaleManager";
import {GameScene} from "../Game/GameScene";
export class PinchManager { export class PinchManager {
private scene: Phaser.Scene; private scene: Phaser.Scene;
@ -7,16 +9,33 @@ export class PinchManager {
constructor(scene: Phaser.Scene) { constructor(scene: Phaser.Scene) {
this.scene = scene; this.scene = scene;
this.pinch = new Pinch(scene); this.pinch = new Pinch(scene);
this.pinch.setDragThreshold(10);
// The "pinch.scaleFactor" value is very sensitive and causes the screen to flicker.
// We are smoothing its value with previous values to prevent the flicking.
let smoothPinch = 1;
this.pinch.on('pinchstart', () => {
smoothPinch = 1;
});
this.pinch.on('pinch', (pinch:any) => { // eslint-disable-line this.pinch.on('pinch', (pinch:any) => { // eslint-disable-line
let newZoom = this.scene.cameras.main.zoom * pinch.scaleFactor; if (pinch.scaleFactor > 1.2 || pinch.scaleFactor < 0.8) {
if (newZoom < 0.25) { // Pinch too fast! Probably a bad measure.
newZoom = 0.25; return;
} else if(newZoom > 2) { }
newZoom = 2;
smoothPinch = 3/5*smoothPinch + 2/5*pinch.scaleFactor;
if (this.scene instanceof GameScene) {
this.scene.zoomByFactor(smoothPinch);
} else {
waScaleManager.zoomModifier *= smoothPinch;
} }
this.scene.cameras.main.setZoom(newZoom);
}); });
} }
destroy() {
this.pinch.removeAllListeners();
}
} }

11
front/src/Phaser/UserInput/UserInputManager.ts
View File

@ -54,6 +54,7 @@ export class UserInputManager {
this.Scene = Scene; this.Scene = Scene;
this.isInputDisabled = false; this.isInputDisabled = false;
this.initKeyBoardEvent(); this.initKeyBoardEvent();
this.initMouseWheel();
if (touchScreenManager.supportTouchScreen) { if (touchScreenManager.supportTouchScreen) {
this.initVirtualJoystick(); this.initVirtualJoystick();
} }
@ -170,4 +171,14 @@ export class UserInputManager {
removeSpaceEventListner(callback : Function){ removeSpaceEventListner(callback : Function){
this.Scene.input.keyboard.removeListener('keyup-SPACE', callback); this.Scene.input.keyboard.removeListener('keyup-SPACE', callback);
} }
destroy(): void {
this.joystick.destroy();
}
private initMouseWheel() {
this.Scene.input.on('wheel', (pointer: unknown, gameObjects: unknown, deltaX: number, deltaY: number, deltaZ: number) => {
this.Scene.zoomByFactor(1 - deltaY / 53 * 0.1);
});
}
} }

39
front/src/WebRtc/LayoutManager.ts
View File

@ -349,7 +349,7 @@ class LayoutManager {
userInputManager.addSpaceEventListner(callBack); userInputManager.addSpaceEventListner(callBack);
} }
public removeActionButton(id: string, userInputManager: UserInputManager){ public removeActionButton(id: string, userInputManager?: UserInputManager){
//delete previous element //delete previous element
const previousDiv = this.actionButtonInformation.get(id); const previousDiv = this.actionButtonInformation.get(id);
if(previousDiv){ if(previousDiv){
@ -357,10 +357,45 @@ class LayoutManager {
this.actionButtonInformation.delete(id); this.actionButtonInformation.delete(id);
} }
const previousEventCallback = this.actionButtonTrigger.get(id); const previousEventCallback = this.actionButtonTrigger.get(id);
if(previousEventCallback){ if(previousEventCallback && userInputManager){
userInputManager.removeSpaceEventListner(previousEventCallback); userInputManager.removeSpaceEventListner(previousEventCallback);
} }
} }
public addInformation(id: string, text: string, callBack?: Function, userInputManager?: UserInputManager){
//delete previous element
for ( const [key, value] of this.actionButtonInformation ) {
this.removeActionButton(key, userInputManager);
}
//create div and text html component
const p = document.createElement('p');
p.classList.add('action-body');
p.innerText = text;
const div = document.createElement('div');
div.classList.add('action');
div.classList.add(id);
div.id = id;
div.appendChild(p);
this.actionButtonInformation.set(id, div);
const mainContainer = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
mainContainer.appendChild(div);
//add trigger action
if(callBack){
div.onpointerdown = () => {
callBack();
this.removeActionButton(id, userInputManager);
};
}
//remove it after 10 sec
setTimeout(() => {
this.removeActionButton(id, userInputManager);
}, 10000)
}
} }
const layoutManager = new LayoutManager(); const layoutManager = new LayoutManager();

114
front/src/WebRtc/MediaManager.ts
View File

@ -4,6 +4,8 @@ import {discussionManager, SendMessageCallback} from "./DiscussionManager";
import {UserInputManager} from "../Phaser/UserInput/UserInputManager"; import {UserInputManager} from "../Phaser/UserInput/UserInputManager";
import {localUserStore} from "../Connexion/LocalUserStore"; import {localUserStore} from "../Connexion/LocalUserStore";
import {UserSimplePeerInterface} from "./SimplePeer"; import {UserSimplePeerInterface} from "./SimplePeer";
import {SoundMeter} from "../Phaser/Components/SoundMeter";
declare const navigator:any; // eslint-disable-line @typescript-eslint/no-explicit-any declare const navigator:any; // eslint-disable-line @typescript-eslint/no-explicit-any
let videoConstraint: boolean|MediaTrackConstraints = { let videoConstraint: boolean|MediaTrackConstraints = {
@ -26,6 +28,7 @@ export type StartScreenSharingCallback = (media: MediaStream) => void;
export type StopScreenSharingCallback = (media: MediaStream) => void; export type StopScreenSharingCallback = (media: MediaStream) => void;
export type ReportCallback = (message: string) => void; export type ReportCallback = (message: string) => void;
export type ShowReportCallBack = (userId: string, userName: string|undefined) => void; export type ShowReportCallBack = (userId: string, userName: string|undefined) => void;
export type HelpCameraSettingsCallBack = () => void;
// TODO: Split MediaManager in 2 classes: MediaManagerUI (in charge of HTML) and MediaManager (singleton in charge of the camera only) // TODO: Split MediaManager in 2 classes: MediaManagerUI (in charge of HTML) and MediaManager (singleton in charge of the camera only)
export class MediaManager { export class MediaManager {
@ -40,6 +43,7 @@ export class MediaManager {
microphoneClose: HTMLImageElement; microphoneClose: HTMLImageElement;
microphone: HTMLImageElement; microphone: HTMLImageElement;
webrtcInAudio: HTMLAudioElement; webrtcInAudio: HTMLAudioElement;
mySoundMeterElement: HTMLDivElement;
private webrtcOutAudio: HTMLAudioElement; private webrtcOutAudio: HTMLAudioElement;
constraintsMedia : MediaStreamConstraints = { constraintsMedia : MediaStreamConstraints = {
audio: audioConstraint, audio: audioConstraint,
@ -49,6 +53,8 @@ export class MediaManager {
startScreenSharingCallBacks : Set<StartScreenSharingCallback> = new Set<StartScreenSharingCallback>(); startScreenSharingCallBacks : Set<StartScreenSharingCallback> = new Set<StartScreenSharingCallback>();
stopScreenSharingCallBacks : Set<StopScreenSharingCallback> = new Set<StopScreenSharingCallback>(); stopScreenSharingCallBacks : Set<StopScreenSharingCallback> = new Set<StopScreenSharingCallback>();
showReportModalCallBacks : Set<ShowReportCallBack> = new Set<ShowReportCallBack>(); showReportModalCallBacks : Set<ShowReportCallBack> = new Set<ShowReportCallBack>();
helpCameraSettingsCallBacks : Set<HelpCameraSettingsCallBack> = new Set<HelpCameraSettingsCallBack>();
private microphoneBtn: HTMLDivElement; private microphoneBtn: HTMLDivElement;
private cinemaBtn: HTMLDivElement; private cinemaBtn: HTMLDivElement;
private monitorBtn: HTMLDivElement; private monitorBtn: HTMLDivElement;
@ -63,6 +69,12 @@ export class MediaManager {
private triggerCloseJistiFrame : Map<String, Function> = new Map<String, Function>(); private triggerCloseJistiFrame : Map<String, Function> = new Map<String, Function>();
private userInputManager?: UserInputManager;
private mySoundMeter?: SoundMeter|null;
private soundMeters: Map<string, SoundMeter> = new Map<string, SoundMeter>();
private soundMeterElements: Map<string, HTMLDivElement> = new Map<string, HTMLDivElement>();
constructor() { constructor() {
this.myCamVideo = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideo'); this.myCamVideo = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideo');
@ -121,10 +133,16 @@ export class MediaManager {
this.pingCameraStatus(); this.pingCameraStatus();
this.checkActiveUser(); //todo: desactivated in case of bug this.checkActiveUser(); //todo: desactivated in case of bug
this.mySoundMeterElement = (HtmlUtils.getElementByIdOrFail('mySoundMeter'));
this.mySoundMeterElement.childNodes.forEach((value: ChildNode, index) => {
this.mySoundMeterElement.children.item(index)?.classList.remove('active');
});
} }
public setLastUpdateScene(){ public updateScene(){
this.lastUpdateScene = new Date(); this.lastUpdateScene = new Date();
this.updateSoudMeter();
} }
public blurCamera() { public blurCamera() {
@ -225,6 +243,10 @@ export class MediaManager {
}).catch((err) => { }).catch((err) => {
console.error(err); console.error(err);
this.disableCameraStyle(); this.disableCameraStyle();
layoutManager.addInformation('warning', 'Camera access denied. Click here and check navigators permissions.', () => {
this.showHelpCameraSettingsCallBack();
}, this.userInputManager);
}); });
} }
@ -253,6 +275,10 @@ export class MediaManager {
}).catch((err) => { }).catch((err) => {
console.error(err); console.error(err);
this.disableMicrophoneStyle(); this.disableMicrophoneStyle();
layoutManager.addInformation('warning', 'Microphone access denied. Click here and check navigators permissions.', () => {
this.showHelpCameraSettingsCallBack();
}, this.userInputManager);
}); });
} }
@ -324,6 +350,10 @@ export class MediaManager {
this.monitorClose.style.display = "block"; this.monitorClose.style.display = "block";
this.monitor.style.display = "none"; this.monitor.style.display = "none";
this.monitorBtn.classList.remove("enabled"); this.monitorBtn.classList.remove("enabled");
layoutManager.addInformation('warning', 'Screen sharing access denied. Click here and check navigators permissions.', () => {
this.showHelpCameraSettingsCallBack();
}, this.userInputManager);
}); });
} }
@ -402,13 +432,14 @@ export class MediaManager {
} }
} }
return this.getLocalStream().catch(() => { return this.getLocalStream().catch((err) => {
console.info('Error get camera, trying with video option at null'); console.info('Error get camera, trying with video option at null =>', err);
this.disableCameraStyle(); this.disableCameraStyle();
return this.getLocalStream().then((stream : MediaStream) => { return this.getLocalStream().then((stream : MediaStream) => {
this.hasCamera = false; this.hasCamera = false;
return stream; return stream;
}).catch((err) => { }).catch((err) => {
this.disableMicrophoneStyle();
console.info("error get media ", this.constraintsMedia.video, this.constraintsMedia.audio, err); console.info("error get media ", this.constraintsMedia.video, this.constraintsMedia.audio, err);
throw err; throw err;
}); });
@ -425,6 +456,13 @@ export class MediaManager {
return navigator.mediaDevices.getUserMedia(this.constraintsMedia).then((stream : MediaStream) => { return navigator.mediaDevices.getUserMedia(this.constraintsMedia).then((stream : MediaStream) => {
this.localStream = stream; this.localStream = stream;
this.myCamVideo.srcObject = this.localStream; this.myCamVideo.srcObject = this.localStream;
//init sound meter
this.mySoundMeter = null;
if(this.constraintsMedia.audio){
this.mySoundMeter = new SoundMeter();
this.mySoundMeter.connectToSource(stream, new AudioContext());
}
return stream; return stream;
}).catch((err: Error) => { }).catch((err: Error) => {
throw err; throw err;
@ -451,6 +489,7 @@ export class MediaManager {
track.stop(); track.stop();
} }
} }
this.mySoundMeter?.stop();
} }
setCamera(id: string): Promise<MediaStream> { setCamera(id: string): Promise<MediaStream> {
@ -496,6 +535,13 @@ export class MediaManager {
</button> </button>
<video id="${userId}" autoplay></video> <video id="${userId}" autoplay></video>
<img src="resources/logos/blockSign.svg" id="blocking-${userId}" class="block-logo"> <img src="resources/logos/blockSign.svg" id="blocking-${userId}" class="block-logo">
<div id="soundMeter-${userId}" class="sound-progress">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div> </div>
`; `;
@ -585,6 +631,12 @@ export class MediaManager {
throw `Unable to find video for ${userId}`; throw `Unable to find video for ${userId}`;
} }
remoteVideo.srcObject = stream; remoteVideo.srcObject = stream;
//sound metter
const soundMeter = new SoundMeter();
soundMeter.connectToSource(stream, new AudioContext());
this.soundMeters.set(userId, soundMeter);
this.soundMeterElements.set(userId, HtmlUtils.getElementByIdOrFail<HTMLImageElement>('soundMeter-'+userId));
} }
addStreamRemoteScreenSharing(userId: string, stream : MediaStream){ addStreamRemoteScreenSharing(userId: string, stream : MediaStream){
// In the case of screen sharing (going both ways), we may need to create the HTML element if it does not exist yet // In the case of screen sharing (going both ways), we may need to create the HTML element if it does not exist yet
@ -600,6 +652,10 @@ export class MediaManager {
layoutManager.remove(userId); layoutManager.remove(userId);
this.remoteVideo.delete(userId); this.remoteVideo.delete(userId);
this.soundMeters.get(userId)?.stop();
this.soundMeters.delete(userId);
this.soundMeterElements.delete(userId);
//permit to remove user in discussion part //permit to remove user in discussion part
this.removeParticipant(userId); this.removeParticipant(userId);
} }
@ -717,6 +773,7 @@ export class MediaManager {
} }
public setUserInputManager(userInputManager : UserInputManager){ public setUserInputManager(userInputManager : UserInputManager){
this.userInputManager = userInputManager;
discussionManager.setUserInputManager(userInputManager); discussionManager.setUserInputManager(userInputManager);
} }
//check if user is active //check if user is active
@ -739,6 +796,57 @@ export class MediaManager {
public setShowReportModalCallBacks(callback: ShowReportCallBack){ public setShowReportModalCallBacks(callback: ShowReportCallBack){
this.showReportModalCallBacks.add(callback); this.showReportModalCallBacks.add(callback);
} }
public setHelpCameraSettingsCallBack(callback: HelpCameraSettingsCallBack){
this.helpCameraSettingsCallBacks.add(callback);
}
private showHelpCameraSettingsCallBack(){
for(const callBack of this.helpCameraSettingsCallBacks){
callBack();
}
}
updateSoudMeter(){
try{
const volume = parseInt(((this.mySoundMeter ? this.mySoundMeter.getVolume() : 0) / 10).toFixed(0));
this.setVolumeSoundMeter(volume, this.mySoundMeterElement);
for(const indexUserId of this.soundMeters.keys()){
const soundMeter = this.soundMeters.get(indexUserId);
const soundMeterElement = this.soundMeterElements.get(indexUserId);
if(!soundMeter || !soundMeterElement){
return;
}
const volumeByUser = parseInt((soundMeter.getVolume() / 10).toFixed(0));
this.setVolumeSoundMeter(volumeByUser, soundMeterElement);
}
}catch(err){
//console.error(err);
}
}
private setVolumeSoundMeter(volume: number, element: HTMLDivElement){
if(volume <= 0 && !element.classList.contains('active')){
return;
}
element.classList.remove('active');
if(volume <= 0){
return;
}
element.classList.add('active');
element.childNodes.forEach((value: ChildNode, index) => {
const elementChildre = element.children.item(index);
if(!elementChildre){
return;
}
elementChildre.classList.remove('active');
if((index +1) > volume){
return;
}
elementChildre.classList.add('active');
});
}
} }
export const mediaManager = new MediaManager(); export const mediaManager = new MediaManager();

2
front/src/WebRtc/ScreenSharingPeer.ts
View File

@ -22,7 +22,7 @@ export class ScreenSharingPeer extends Peer {
constructor(user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection) { constructor(user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection) {
super({ super({
initiator: initiator ? initiator : false, initiator: initiator ? initiator : false,
reconnectTimer: 10000, //reconnectTimer: 10000,
config: { config: {
iceServers: [ iceServers: [
{ {

6
front/src/WebRtc/SimplePeer.ts
View File

@ -82,15 +82,11 @@ export class SimplePeer {
}); });
mediaManager.showGameOverlay(); mediaManager.showGameOverlay();
mediaManager.getCamera().then(() => { mediaManager.getCamera().finally(() => {
//receive message start //receive message start
this.Connection.receiveWebrtcStart((message: UserSimplePeerInterface) => { this.Connection.receiveWebrtcStart((message: UserSimplePeerInterface) => {
this.receiveWebrtcStart(message); this.receiveWebrtcStart(message);
}); });
}).catch((err) => {
console.error("err", err);
}); });
this.Connection.disconnectMessage((data: WebRtcDisconnectMessageInterface): void => { this.Connection.disconnectMessage((data: WebRtcDisconnectMessageInterface): void => {

2
front/src/WebRtc/VideoPeer.ts
View File

@ -28,7 +28,7 @@ export class VideoPeer extends Peer {
constructor(public user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection) { constructor(public user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection) {
super({ super({
initiator: initiator ? initiator : false, initiator: initiator ? initiator : false,
reconnectTimer: 10000, //reconnectTimer: 10000,
config: { config: {
iceServers: [ iceServers: [
{ {

36
front/src/index.ts
View File

@ -2,7 +2,7 @@ import 'phaser';
import GameConfig = Phaser.Types.Core.GameConfig; import GameConfig = Phaser.Types.Core.GameConfig;
import "../dist/resources/style/index.scss"; import "../dist/resources/style/index.scss";
import {DEBUG_MODE, RESOLUTION} from "./Enum/EnvironmentVariable"; import {DEBUG_MODE, isMobile} from "./Enum/EnvironmentVariable";
import {LoginScene} from "./Phaser/Login/LoginScene"; import {LoginScene} from "./Phaser/Login/LoginScene";
import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene"; import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene";
import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene"; import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene";
@ -17,6 +17,10 @@ import {HelpCameraSettingsScene} from "./Phaser/Menu/HelpCameraSettingsScene";
import {localUserStore} from "./Connexion/LocalUserStore"; import {localUserStore} from "./Connexion/LocalUserStore";
import {ErrorScene} from "./Phaser/Reconnecting/ErrorScene"; import {ErrorScene} from "./Phaser/Reconnecting/ErrorScene";
import {iframeListener} from "./Api/IframeListener"; import {iframeListener} from "./Api/IframeListener";
import { SelectCharacterMobileScene } from './Phaser/Login/SelectCharacterMobileScene';
import {HdpiManager} from "./Phaser/Services/HdpiManager";
import {waScaleManager} from "./Phaser/Services/WaScaleManager";
import {Game} from "./Phaser/Game/Game";
const {width, height} = coWebsiteManager.getGameSize(); const {width, height} = coWebsiteManager.getGameSize();
@ -67,15 +71,23 @@ switch (phaserMode) {
throw new Error('phaserMode parameter must be one of "auto", "canvas" or "webgl"'); throw new Error('phaserMode parameter must be one of "auto", "canvas" or "webgl"');
} }
const hdpiManager = new HdpiManager(640*480, 196*196);
const { game: gameSize, real: realSize } = hdpiManager.getOptimalGameSize({width, height});
const config: GameConfig = { const config: GameConfig = {
type: mode, type: mode,
title: "WorkAdventure", title: "WorkAdventure",
width: width / RESOLUTION, scale: {
height: height / RESOLUTION,
parent: "game", parent: "game",
width: gameSize.width,
height: gameSize.height,
zoom: realSize.width / gameSize.width,
autoRound: true,
resizeInterval: 999999999999
},
scene: [EntryScene, scene: [EntryScene,
LoginScene, LoginScene,
SelectCharacterScene, isMobile() ? SelectCharacterMobileScene : SelectCharacterScene,
SelectCompanionScene, SelectCompanionScene,
EnableCameraScene, EnableCameraScene,
ReconnectingScene, ReconnectingScene,
@ -83,7 +95,7 @@ const config: GameConfig = {
CustomizeScene, CustomizeScene,
MenuScene, MenuScene,
HelpCameraSettingsScene], HelpCameraSettingsScene],
zoom: RESOLUTION, //resolution: window.devicePixelRatio / 2,
fps: fps, fps: fps,
dom: { dom: {
createContainer: true createContainer: true
@ -99,6 +111,8 @@ const config: GameConfig = {
debug: DEBUG_MODE, debug: DEBUG_MODE,
} }
}, },
// Instruct systems with 2 GPU to choose the low power one. We don't need that extra power and we want to save battery
powerPreference: "low-power",
callbacks: { callbacks: {
postBoot: game => { postBoot: game => {
// Commented out to try to fix MacOS bug // Commented out to try to fix MacOS bug
@ -110,12 +124,15 @@ const config: GameConfig = {
} }
}; };
const game = new Phaser.Game(config); //const game = new Phaser.Game(config);
const game = new Game(config);
waScaleManager.setScaleManager(game.scale);
window.addEventListener('resize', function (event) { window.addEventListener('resize', function (event) {
coWebsiteManager.resetStyle(); coWebsiteManager.resetStyle();
const {width, height} = coWebsiteManager.getGameSize();
game.scale.resize(width / RESOLUTION, height / RESOLUTION); waScaleManager.applyNewSize();
// Let's trigger the onResize method of any active scene that is a ResizableScene // Let's trigger the onResize method of any active scene that is a ResizableScene
for (const scene of game.scene.getScenes(true)) { for (const scene of game.scene.getScenes(true)) {
@ -126,8 +143,7 @@ window.addEventListener('resize', function (event) {
}); });
coWebsiteManager.onResize.subscribe(() => { coWebsiteManager.onResize.subscribe(() => {
const {width, height} = coWebsiteManager.getGameSize(); waScaleManager.applyNewSize();
game.scale.resize(width / RESOLUTION, height / RESOLUTION);
}); });
iframeListener.init(); iframeListener.init();

3
front/tests/Phaser/Connexion/LocalUserTest.ts
View File

@ -19,9 +19,6 @@ describe("isUserNameValid()", () => {
it("should not validate spaces", () => { it("should not validate spaces", () => {
expect(isUserNameValid(' ')).toBe(false); expect(isUserNameValid(' ')).toBe(false);
}); });
it("should not validate numbers", () => {
expect(isUserNameValid('a12')).toBe(false);
});
it("should not validate special characters", () => { it("should not validate special characters", () => {
expect(isUserNameValid('a&-')).toBe(false); expect(isUserNameValid('a&-')).toBe(false);
}); });

55
front/tests/Phaser/Services/HdpiManagerTest.ts Normal file
View File

@ -0,0 +1,55 @@
import "jasmine";
import {HdpiManager} from "../../../src/Phaser/Services/HdpiManager";
describe("Test HdpiManager", () => {
it("should match screen size if size is too small.", () => {
const hdpiManager = new HdpiManager(640*480, 64*64);
const result = hdpiManager.getOptimalGameSize({ width: 320, height: 200 });
expect(result.game.width).toEqual(320);
expect(result.game.height).toEqual(200);
expect(result.real.width).toEqual(320);
expect(result.real.height).toEqual(200);
});
it("should match multiple just above.", () => {
const hdpiManager = new HdpiManager(640*480, 64*64);
let result = hdpiManager.getOptimalGameSize({ width: 960, height: 600 });
expect(result.game.width).toEqual(960);
expect(result.game.height).toEqual(600);
result = hdpiManager.getOptimalGameSize({ width: 640 * 2 + 50, height: 480 * 2 + 50 });
expect(result.game.width).toEqual(Math.ceil((640 * 2 + 50) / 2));
expect(result.game.height).toEqual((480 * 2 + 50) / 2);
result = hdpiManager.getOptimalGameSize({ width: 640 * 3 + 50, height: 480 * 3 + 50 });
expect(result.game.width).toEqual(Math.ceil((640 * 3 + 50) / 3));
expect(result.game.height).toEqual(Math.ceil((480 * 3 + 50) / 3));
expect(result.real.width).toEqual(result.game.width * 3);
expect(result.real.height).toEqual(result.game.height * 3);
});
it("should not zoom in too much.", () => {
const hdpiManager = new HdpiManager(640*480, 64*64);
hdpiManager.zoomModifier = 11;
const result = hdpiManager.getOptimalGameSize({ width: 640, height: 640 });
expect(result.game.width).toEqual(64);
expect(result.game.height).toEqual(64);
expect(hdpiManager.zoomModifier).toEqual(10);
});
it("should not zoom out too much.", () => {
const hdpiManager = new HdpiManager(640*480, 64*64);
hdpiManager.zoomModifier = 1/10;
const result = hdpiManager.getOptimalGameSize({ width: 1280, height: 768 });
expect(result.game.width).toEqual(1280);
expect(result.game.height).toEqual(768);
expect(hdpiManager.zoomModifier).toEqual(1);
});
});

1167
front/yarn.lock
View File

File diff suppressed because it is too large Load Diff

2
maps/Tuto/tutoV3.json
View File

@ -24,7 +24,7 @@
{ {
"name":"exitUrl", "name":"exitUrl",
"type":"string", "type":"string",
"value":"\/@\/tcm\/workadventure\/floor0" "value":"\/@\/tcm\/workadventure\/wa-village"
}], }],
"type":"tilelayer", "type":"tilelayer",
"visible":true, "visible":true,

BIN
maps/Village/Teacher fmale 02.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

236
maps/Village/Village.json
View File

File diff suppressed because one or more lines are too long

BIN
maps/Village/logo-WA.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

0
maps/Village/sol_intérieur.png → maps/Village/sol_interieur.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
maps/Village/sol_intérieur.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
maps/Village/su1 Student fmale 14.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.6 KiB

BIN
maps/Village/su1 Student fmale 15.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.5 KiB

BIN
maps/Village/su2 Student fmale 09.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 KiB

BIN
maps/Village/su3 Student fmale 06.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 KiB

BIN
maps/Village/su3 Student fmale 07.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.2 KiB

BIN
maps/Village/su3 Student fmale 09.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 KiB

BIN
maps/Village/su3 Student fmale 11.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 KiB

BIN
maps/Village/su3 Student fmale 12.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

BIN
maps/Village/su3 Student fmale 14.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.6 KiB

BIN
maps/Village/su3 Student fmale 18.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.7 KiB

BIN
maps/Village/su3 Student male 04.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.7 KiB

BIN
maps/Village/su3 Student male 08.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.5 KiB

BIN
maps/Village/su3 Student male 11.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

BIN
maps/Village/su3 Student male 13.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.8 KiB

BIN
maps/Village/su4 Student fmale 01.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.5 KiB

BIN
maps/Village/su4 Student fmale 05.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.6 KiB

BIN
maps/Village/su4 Student fmale 06.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 KiB

BIN
maps/Village/su4 Student fmale 07.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.2 KiB

BIN
maps/Village/su4 Student fmale 09.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 KiB

BIN
maps/Village/su4 Student fmale 11.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 KiB

BIN
maps/Village/su4 Student fmale 13.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.5 KiB

BIN
maps/Village/su4 Student fmale 14.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.6 KiB

BIN
maps/Village/su4 Student fmale 16.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.5 KiB

BIN
maps/Village/su4 Student fmale 17.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.4 KiB

BIN
maps/Village/su4 Student male 07.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 KiB

BIN
maps/Village/su4 Student male 11.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

BIN
maps/Village/su4 Student male 12.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.0 KiB

BIN
maps/Village/tileset1-repositioning.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
maps/Village/tileset1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

82
maps/tests/autoresize.json Normal file
View File

@ -0,0 +1,82 @@
{ "compressionlevel":-1,
"height":25,
"infinite":false,
"layers":[
{
"data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
"height":25,
"id":1,
"name":"floor",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":25,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":25,
"id":2,
"name":"start",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":25,
"x":0,
"y":0
},
{
"draworder":"topdown",
"id":3,
"name":"floorLayer",
"objects":[
{
"height":114.5,
"id":3,
"name":"",
"rotation":0,
"text":
{
"fontfamily":"Sans Serif",
"pixelsize":11,
"text":"Test:\nOpen your browser to the maximum size of your screen. Resize the browser window just smaller than the blue \"carpet\".\nResult:\nThe viewport is zoomed out x2 so that you can still see the \"carpet\"",
"wrap":true
},
"type":"",
"visible":true,
"width":252.4375,
"x":162.78125,
"y":129.5
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}],
"nextlayerid":8,
"nextobjectid":5,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"2021.03.23",
"tileheight":32,
"tilesets":[
{
"columns":11,
"firstgid":1,
"image":"tileset1.png",
"imageheight":352,
"imagewidth":352,
"margin":0,
"name":"tileset1",
"spacing":0,
"tilecount":121,
"tileheight":32,
"tilewidth":32
}],
"tilewidth":32,
"type":"map",
"version":1.5,
"width":25
}

82
maps/tests/energy.json Normal file
View File

@ -0,0 +1,82 @@
{ "compressionlevel":-1,
"height":10,
"infinite":false,
"layers":[
{
"data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
"height":10,
"id":1,
"name":"floor",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":10,
"id":2,
"name":"start",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"draworder":"topdown",
"id":3,
"name":"floorLayer",
"objects":[
{
"height":261.73266830836,
"id":3,
"name":"",
"rotation":0,
"text":
{
"fontfamily":"Sans Serif",
"pixelsize":11,
"text":"Test:\nOpen this page in Chrome.\nOpen Chrome Task Manager (Shift - Esc)\n\nResult:\nThe WorkAdventure tab should take about 10% of CPU.\nThe GPU should almost consume nothing (~4%)",
"wrap":true
},
"type":"",
"visible":true,
"width":252.4375,
"x":46.5894222943362,
"y":34.2876372135732
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}],
"nextlayerid":8,
"nextobjectid":5,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"2021.03.23",
"tileheight":32,
"tilesets":[
{
"columns":11,
"firstgid":1,
"image":"tileset1.png",
"imageheight":352,
"imagewidth":352,
"margin":0,
"name":"tileset1",
"spacing":0,
"tilecount":121,
"tileheight":32,
"tilewidth":32
}],
"tilewidth":32,
"type":"map",
"version":1.5,
"width":10
}

32
maps/tests/index.html
View File

@ -42,6 +42,38 @@
<a href="#" class="testLink" data-testmap="script_api.json" target="_blank">Testing scripting API with a script</a> <a href="#" class="testLink" data-testmap="script_api.json" target="_blank">Testing scripting API with a script</a>
</td> </td>
</tr> </tr>
<tr>
<td>
<input type="radio" name="test-autoresize"> Success <input type="radio" name="test-autoresize"> Failure <input type="radio" name="test-autoresize" checked> Pending
</td>
<td>
<a href="#" class="testLink" data-testmap="autoresize.json" target="_blank">Testing auto-zoom of viewport</a>
</td>
</tr>
<tr>
<td>
<input type="radio" name="test-mouse-wheel"> Success <input type="radio" name="test-mouse-wheel"> Failure <input type="radio" name="test-mouse-wheel" checked> Pending
</td>
<td>
<a href="#" class="testLink" data-testmap="mousewheel.json" target="_blank">Testing zoom via mouse wheel</a>
</td>
</tr>
<tr>
<td>
<input type="radio" name="test-mobile"> Success <input type="radio" name="test-mobile"> Failure <input type="radio" name="test-mobile" checked> Pending
</td>
<td>
<a href="#" class="testLink" data-testmap="mobile.json" target="_blank">Testing movement on mobile</a>
</td>
</tr>
<tr>
<td>
<input type="radio" name="test-energy"> Success <input type="radio" name="test-energy"> Failure <input type="radio" name="test-energy" checked> Pending
</td>
<td>
<a href="#" class="testLink" data-testmap="energy.json" target="_blank">Test energy consumption</a>
</td>
</tr>
</table> </table>
<script> <script>

82
maps/tests/mobile.json Normal file
View File

@ -0,0 +1,82 @@
{ "compressionlevel":-1,
"height":10,
"infinite":false,
"layers":[
{
"data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
"height":10,
"id":1,
"name":"floor",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":10,
"id":2,
"name":"start",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"draworder":"topdown",
"id":3,
"name":"floorLayer",
"objects":[
{
"height":281.232647439376,
"id":3,
"name":"",
"rotation":0,
"text":
{
"fontfamily":"Sans Serif",
"pixelsize":11,
"text":"Test:\nOpen the page on a mobile device (or set Chrome in mobile mode)\n\nResult:\nBy default, the zoom level is not too zoomed in nor out (zoom level gives you the same visibility you typically have on desktop)\n\nYou can move using a virtual joystick\n\nYou can zoom using the \"pinch\" gesture\n\nWhen you zoom in or out, the size of the virtual joystick stays the same (about the size of your thumb)\n\nWhen you \"pinch\", your character does not move\n\nChanging phone orientation works",
"wrap":true
},
"type":"",
"visible":true,
"width":252.4375,
"x":46.5894222943362,
"y":34.2876372135732
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}],
"nextlayerid":8,
"nextobjectid":5,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"2021.03.23",
"tileheight":32,
"tilesets":[
{
"columns":11,
"firstgid":1,
"image":"tileset1.png",
"imageheight":352,
"imagewidth":352,
"margin":0,
"name":"tileset1",
"spacing":0,
"tilecount":121,
"tileheight":32,
"tilewidth":32
}],
"tilewidth":32,
"type":"map",
"version":1.5,
"width":10
}

82
maps/tests/mousewheel.json Normal file
View File

@ -0,0 +1,82 @@
{ "compressionlevel":-1,
"height":10,
"infinite":false,
"layers":[
{
"data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
"height":10,
"id":1,
"name":"floor",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":10,
"id":2,
"name":"start",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"draworder":"topdown",
"id":3,
"name":"floorLayer",
"objects":[
{
"height":261.73266830836,
"id":3,
"name":"",
"rotation":0,
"text":
{
"fontfamily":"Sans Serif",
"pixelsize":11,
"text":"Test:\nUse your mouse wheel\nResult:\nThe canvas is zooming in or out\n\nTest:\nZoom out to the maximum\nResult:\nThe pixel size is the canvas = the pixel size on your monitor\n\nTest:\nZoom in to the maximum\nResult:\nYou see an area slightly larger than your character (with your character at the center if you are not standing on a border of the map)",
"wrap":true
},
"type":"",
"visible":true,
"width":252.4375,
"x":46.5894222943362,
"y":34.2876372135732
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}],
"nextlayerid":8,
"nextobjectid":5,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"2021.03.23",
"tileheight":32,
"tilesets":[
{
"columns":11,
"firstgid":1,
"image":"tileset1.png",
"imageheight":352,
"imagewidth":352,
"margin":0,
"name":"tileset1",
"spacing":0,
"tilecount":121,
"tileheight":32,
"tilewidth":32
}],
"tilewidth":32,
"type":"map",
"version":1.5,
"width":10
}