merge into develop
16
CHANGELOG.md
@ -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
|
||||
|
||||
|
@ -153,23 +153,6 @@ services:
|
||||
- "traefik.http.routers.uploader-ssl.tls=true"
|
||||
- "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:
|
||||
#image: thecodingmachine/nodejs:14
|
||||
image: thecodingmachine/workadventure-back-base:latest
|
||||
|
13
front/dist/index.tmpl.html
vendored
@ -1,9 +1,9 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta name="viewport" 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">
|
||||
|
||||
<!-- TRACK CODE -->
|
||||
@ -32,6 +32,7 @@
|
||||
|
||||
<title>Partey</title>
|
||||
</head>
|
||||
|
||||
<body id="body" style="margin: 0; background-color: #000">
|
||||
<div class="main-container" id="main-container">
|
||||
<!-- Create the editor container -->
|
||||
@ -46,6 +47,13 @@
|
||||
<div id="activeCam" class="activeCam">
|
||||
<div id="div-myCamVideo" class="video-container nes-container is-rounded is-dark">
|
||||
<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 class="btn-cam-action">
|
||||
@ -132,4 +140,5 @@
|
||||
</audio>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
@ -45,7 +45,7 @@
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 44vh;
|
||||
top: 40vh;
|
||||
width: 100%;
|
||||
}
|
||||
#enableCameraScene button#enableCameraSceneFormCancel {
|
||||
|
@ -45,6 +45,9 @@
|
||||
font-size: 7px;
|
||||
margin: 0px 20px;
|
||||
}
|
||||
#helpCameraSettings section p a{
|
||||
font-size: 8px;
|
||||
}
|
||||
#helpCameraSettings section p.err{
|
||||
color: #ff0000;
|
||||
}
|
||||
@ -80,6 +83,10 @@
|
||||
<p>If you prefer to continue without allowing camera and microphone access, click on Continue</p>
|
||||
<p id='browserHelpSetting'></p>
|
||||
</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">
|
||||
<a href="#" class="nes-btn" id="helpCameraSettingsFormRefresh">Refresh</a>
|
||||
<button type="submit" class="nes-btn is-warning" id="helpCameraSettingsFormContinue">Continue</button>
|
||||
|
18
front/dist/resources/style/mobile-style.scss
vendored
@ -23,27 +23,17 @@
|
||||
}
|
||||
|
||||
.btn-cam-action {
|
||||
min-width: 150px;
|
||||
|
||||
&:hover{
|
||||
transform: translateY(20px);
|
||||
}
|
||||
div {
|
||||
margin: 0 1%;
|
||||
&:hover {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
bottom: 30px;
|
||||
|
||||
&.btn-micro {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.btn-monitor {
|
||||
right: 130px;
|
||||
}
|
||||
|
||||
&.btn-video {
|
||||
right: 65px;
|
||||
}
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
251
front/dist/resources/style/style.css
vendored
@ -1,15 +1,20 @@
|
||||
* a, button, select{
|
||||
* a,
|
||||
button,
|
||||
select {
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
body button:focus,
|
||||
body img:focus,
|
||||
body input:focus {
|
||||
outline: -webkit-focus-ring-color auto 0;
|
||||
}
|
||||
|
||||
body .message-info {
|
||||
width: 20%;
|
||||
height: auto;
|
||||
@ -20,23 +25,29 @@ body .message-info{
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body .message-info.error {
|
||||
background: red;
|
||||
}
|
||||
|
||||
body .message-info.success {
|
||||
background: green;
|
||||
}
|
||||
|
||||
body .message-info.info {
|
||||
background: dodgerblue;
|
||||
}
|
||||
|
||||
body .message-info.warning {
|
||||
background: #ffa500d6;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
|
||||
.video-container i {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
@ -62,6 +73,7 @@ body .message-info.warning{
|
||||
padding: 10px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.video-container img.block-logo {
|
||||
left: 30%;
|
||||
bottom: 15%;
|
||||
@ -94,7 +106,7 @@ body .message-info.warning{
|
||||
}
|
||||
|
||||
.video-container button.report:hover {
|
||||
width: 150px;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.video-container button.report img {
|
||||
@ -108,6 +120,7 @@ body .message-info.warning{
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.video-container button.report span {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
@ -116,12 +129,14 @@ body .message-info.warning{
|
||||
font-size: 16px;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
|
||||
.video-container img.active {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.video-container video {
|
||||
height: 100%;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
|
||||
.video-container video:focus {
|
||||
@ -136,7 +151,7 @@ body .message-info.warning{
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
bottom: 30px;
|
||||
max-height: 200px;
|
||||
max-height: 20%;
|
||||
}
|
||||
|
||||
video#myCamVideo {
|
||||
@ -147,61 +162,123 @@ video#myCamVideo{
|
||||
/*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 {
|
||||
pointer-events: all;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 450px;
|
||||
height: 150px;
|
||||
display: inline-flex;
|
||||
bottom: 10px;
|
||||
right: 15px;
|
||||
width: 15vw;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
|
||||
/*btn animation*/
|
||||
|
||||
.btn-cam-action div {
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
position: absolute;
|
||||
/*position: absolute;*/
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
width: auto;
|
||||
transform: translateY(20px);
|
||||
transition-timing-function: ease-in-out;
|
||||
bottom: 20px;
|
||||
pointer-events: none;
|
||||
margin-bottom: 20px;
|
||||
margin: 0 4%;
|
||||
}
|
||||
|
||||
.btn-cam-action div.disabled {
|
||||
background: #d75555;
|
||||
}
|
||||
|
||||
.btn-cam-action div.enabled {
|
||||
background: #73c973;
|
||||
}
|
||||
|
||||
.btn-cam-action:hover div {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-cam-action div:hover {
|
||||
background: #407cf7;
|
||||
box-shadow: 4px 4px 48px #666;
|
||||
transition: 120ms;
|
||||
}
|
||||
|
||||
.btn-micro {
|
||||
pointer-events: auto;
|
||||
transition: all .3s;
|
||||
right: 44px;
|
||||
/*right: 44px;*/
|
||||
}
|
||||
|
||||
.btn-video {
|
||||
pointer-events: auto;
|
||||
transition: all .25s;
|
||||
right: 134px;
|
||||
/*right: 134px;*/
|
||||
}
|
||||
|
||||
.btn-monitor {
|
||||
pointer-events: auto;
|
||||
transition: all .2s;
|
||||
right: 224px;
|
||||
/*right: 224px;*/
|
||||
}
|
||||
|
||||
.btn-copy {
|
||||
pointer-events: auto;
|
||||
transition: all .3s;
|
||||
right: 44px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-cam-action div img {
|
||||
height: 22px;
|
||||
width: auto;
|
||||
@ -210,17 +287,18 @@ video#myCamVideo{
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
|
||||
/* Spinner */
|
||||
|
||||
.connecting-spinner {
|
||||
/*display: inline-block;*/
|
||||
position: absolute;
|
||||
left: calc(50% - 62px);
|
||||
top: calc(50% - 62px);
|
||||
|
||||
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.connecting-spinner:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
@ -232,6 +310,7 @@ video#myCamVideo{
|
||||
border-color: #fff transparent #fff transparent;
|
||||
animation: connecting-spinner 1.2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes connecting-spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
@ -241,16 +320,14 @@ video#myCamVideo{
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.rtc-error {
|
||||
position: absolute;
|
||||
left: calc(50% - 68px);
|
||||
top: calc(50% - 68px);
|
||||
|
||||
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.rtc-error:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
@ -280,6 +357,7 @@ video#myCamVideo{
|
||||
width: 50%;
|
||||
border: white 6px solid;
|
||||
}
|
||||
|
||||
.webrtcsetup .background-img {
|
||||
position: relative;
|
||||
display: block;
|
||||
@ -290,21 +368,25 @@ video#myCamVideo{
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
#myCamVideoSetup {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.webrtcsetup.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/* New layout */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
@ -315,25 +397,21 @@ body {
|
||||
.game-overlay {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar>div {
|
||||
max-height: 21%;
|
||||
}
|
||||
|
||||
.sidebar>div:hover {
|
||||
max-height: 25%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
#game {
|
||||
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 {
|
||||
@ -341,7 +419,9 @@ body {
|
||||
grid: 2rem / 4rem 10rem;
|
||||
}
|
||||
|
||||
.audioplayer > button, .audioplayer > div, .audioplayer > label {
|
||||
.audioplayer>button,
|
||||
.audioplayer>div,
|
||||
.audioplayer>label {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -365,49 +445,62 @@ body {
|
||||
max-width: 5rem;
|
||||
border: none;
|
||||
}
|
||||
#audioplayer_mute:focus, #audioplayer_mute:active {
|
||||
|
||||
#audioplayer_mute:focus,
|
||||
#audioplayer_mute:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#audioplayer_mute>svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#audioplayer_volume_icon_playing.muted {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#audioplayer_volume_icon_playing.low #audioplayer_volume_icon_playing_high {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#audioplayer_volume_icon_playing.low #audioplayer_volume_icon_playing_mid {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#audioplayer_volume_icon_playing.mid #audioplayer_volume_icon_playing_high {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#audioplayerctrl>#audioplayer_volume {
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* sollte eigentlich in den aspect-ratio teil ..
|
||||
*/
|
||||
|
||||
#audioplayerctrl.loading {
|
||||
transform: translateY(-90%);
|
||||
}
|
||||
|
||||
#audioplayerctrl.hidden {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Style Input Range
|
||||
* https://www.cssportal.com/style-input-range/
|
||||
*/
|
||||
|
||||
input[type=range] {
|
||||
height: 28px;
|
||||
-webkit-appearance: none;
|
||||
@ -415,9 +508,11 @@ input[type=range] {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
input[type=range]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
@ -427,6 +522,7 @@ input[type=range]::-webkit-slider-runnable-track {
|
||||
border-radius: 5px;
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
box-shadow: 1px 1px 1px #000000;
|
||||
border: 1px solid #000000;
|
||||
@ -437,9 +533,11 @@ input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
margin-top: -8.5px;
|
||||
}
|
||||
|
||||
input[type=range]:focus::-webkit-slider-runnable-track {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
input[type=range]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
@ -449,6 +547,7 @@ input[type=range]::-moz-range-track {
|
||||
border-radius: 5px;
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
input[type=range]::-moz-range-thumb {
|
||||
box-shadow: 1px 1px 1px #000000;
|
||||
border: 1px solid #000000;
|
||||
@ -457,6 +556,7 @@ input[type=range]::-moz-range-thumb {
|
||||
border-radius: 5px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
input[type=range]::-ms-track {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
@ -465,18 +565,21 @@ input[type=range]::-ms-track {
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
input[type=range]::-ms-fill-lower {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 10px;
|
||||
box-shadow: 1px 1px 1px #000000;
|
||||
}
|
||||
|
||||
input[type=range]::-ms-fill-upper {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 10px;
|
||||
box-shadow: 1px 1px 1px #000000;
|
||||
}
|
||||
|
||||
input[type=range]::-ms-thumb {
|
||||
margin-top: 1px;
|
||||
box-shadow: 1px 1px 1px #000000;
|
||||
@ -486,14 +589,15 @@ input[type=range]::-ms-thumb {
|
||||
border-radius: 5px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
input[type=range]:focus::-ms-fill-lower {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
input[type=range]:focus::-ms-fill-upper {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
.game-overlay {
|
||||
display: none;
|
||||
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!!!) */
|
||||
}
|
||||
|
||||
.game-overlay+div {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.game-overlay+div>div {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.game-overlay.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.game-overlay video {
|
||||
width: 100%
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-section {
|
||||
@ -524,6 +636,7 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
flex-basis: 96%;
|
||||
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;
|
||||
pointer-events: auto;
|
||||
/*flex-shrink: 2;*/
|
||||
}
|
||||
|
||||
@ -535,21 +648,26 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
.sidebar {
|
||||
flex: 0 0 25%;
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sidebar>div {
|
||||
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;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
padding: 12px 12px !important;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.sidebar>div:hover {
|
||||
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 */
|
||||
|
||||
.media-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -560,9 +678,7 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
.chat-mode {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
|
||||
align-items: flex-start;
|
||||
|
||||
padding: 1%;
|
||||
}
|
||||
|
||||
@ -576,6 +692,7 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
.chat-mode>div:hover {
|
||||
margin: 0%;
|
||||
}
|
||||
|
||||
.chat-mode.one-col {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
@ -592,6 +709,7 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
|
||||
/*CONSOLE*/
|
||||
|
||||
.message-container,
|
||||
@ -666,6 +784,7 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
transform: rotateY(0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.main-console div.console img:hover,
|
||||
.message-container div.clear img:hover {
|
||||
opacity: 1;
|
||||
@ -716,6 +835,7 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
padding: 10px 30px;
|
||||
transition: all .2s ease;
|
||||
}
|
||||
|
||||
.main-console .btn-action .btn:hover {
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
background-color: #ffda01;
|
||||
@ -761,20 +881,23 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
.main-console section div.upload label {
|
||||
color: #ffda01;
|
||||
}
|
||||
|
||||
.main-console section div.upload input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-console section div.upload label img {
|
||||
height: 150px;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
|
||||
.main-console section div.upload label img {
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*audio html when audio message playing*/
|
||||
|
||||
.main-container .audio-playing {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
@ -790,22 +913,27 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
.main-container .audio-playing.active {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.main-container .audio-playing img {
|
||||
/*width: 30px;*/
|
||||
border-radius: 50%;
|
||||
background-color: #ffda01;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.main-container .audio-playing p {
|
||||
color: white;
|
||||
margin-left: 10px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
|
||||
/* VIDEO QUALITY */
|
||||
|
||||
.main-console div.setting h1 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.main-console div.setting select {
|
||||
background: black;
|
||||
color: white;
|
||||
@ -815,16 +943,19 @@ input[type=range]:focus::-ms-fill-upper {
|
||||
padding: 10px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.main-console div.setting select:focus {
|
||||
border: solid 1px white;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.main-console div.setting.active section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/*REPORT input*/
|
||||
|
||||
div.modal-report-user {
|
||||
position: absolute;
|
||||
width: 800px;
|
||||
@ -880,6 +1011,7 @@ div.modal-report-user{
|
||||
padding: 10px 30px;
|
||||
transition: all .2s ease;
|
||||
}
|
||||
|
||||
.modal-report-user button:hover {
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
background-color: #ffda01;
|
||||
@ -905,10 +1037,13 @@ div.modal-report-user{
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 30px;
|
||||
max-width: calc(800px - 60px); /* size of modal - padding*/
|
||||
max-width: calc(800px - 60px);
|
||||
/* size of modal - padding*/
|
||||
}
|
||||
|
||||
|
||||
/*MESSAGE*/
|
||||
|
||||
.discussion {
|
||||
position: fixed;
|
||||
left: -300px;
|
||||
@ -919,9 +1054,11 @@ div.modal-report-user{
|
||||
padding: 20px;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.discussion.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.discussion .active-btn {
|
||||
display: none;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
@ -935,12 +1072,15 @@ div.modal-report-user{
|
||||
border: none;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.discussion .active-btn.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.discussion .active-btn:hover {
|
||||
transform: scale(1.1) rotateY(3.142rad);
|
||||
}
|
||||
|
||||
.discussion .active-btn img {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
@ -955,6 +1095,7 @@ div.modal-report-user{
|
||||
border: none;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
|
||||
.discussion .close-btn img {
|
||||
height: 15px;
|
||||
right: 15px;
|
||||
@ -984,6 +1125,7 @@ div.modal-report-user{
|
||||
.discussion .participants .participant:hover {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.discussion .participants .participant:hover p {
|
||||
color: black;
|
||||
}
|
||||
@ -1065,6 +1207,7 @@ div.modal-report-user{
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.discussion .messages .message p a {
|
||||
color: white;
|
||||
}
|
||||
@ -1095,12 +1238,14 @@ div.modal-report-user{
|
||||
height: 20px;
|
||||
background-color: #ffffff69;
|
||||
}
|
||||
|
||||
.discussion .send-message img:hover {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
/** Action button **/
|
||||
|
||||
div.action {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@ -1112,18 +1257,42 @@ div.action{
|
||||
animation-iteration-count: infinite;
|
||||
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 {
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
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 {
|
||||
font-family: 'Press Start 2P';
|
||||
text-align: left;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.popUpElement div {
|
||||
font-family: 'Press Start 2P';
|
||||
font-size: 10px;
|
||||
@ -1140,12 +1309,16 @@ div.action p.action-body{
|
||||
.popUpElement .buttonContainer {
|
||||
float: right;
|
||||
background-color: inherit;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@keyframes mymove {
|
||||
0% {bottom: 40px;}
|
||||
50% {bottom: 30px;}
|
||||
100% {bottom: 40px;}
|
||||
0% {
|
||||
bottom: 40px;
|
||||
}
|
||||
50% {
|
||||
bottom: 30px;
|
||||
}
|
||||
100% {
|
||||
bottom: 40px;
|
||||
}
|
||||
}
|
124
front/dist/static/images/favicons/manifest.json
vendored
@ -1,41 +1,149 @@
|
||||
{
|
||||
"name": "App",
|
||||
"short_name": "WA",
|
||||
"name": "WorkAdventure",
|
||||
"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",
|
||||
"type": "image\/png",
|
||||
"density": "0.75"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-48x48.png",
|
||||
"src": "/static/images/favicons/android-icon-48x48.png",
|
||||
"sizes": "48x48",
|
||||
"type": "image\/png",
|
||||
"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",
|
||||
"type": "image\/png",
|
||||
"density": "1.5"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-96x96.png",
|
||||
"src": "/static/images/favicons/android-icon-96x96.png",
|
||||
"sizes": "96x96",
|
||||
"type": "image\/png",
|
||||
"density": "2.0"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-144x144.png",
|
||||
"src": "/static/images/favicons/android-icon-144x144.png",
|
||||
"sizes": "144x144",
|
||||
"type": "image\/png",
|
||||
"density": "3.0"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-192x192.png",
|
||||
"src": "/static/images/favicons/android-icon-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image\/png",
|
||||
"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"
|
||||
}]
|
||||
}
|
@ -32,7 +32,7 @@
|
||||
"generic-type-guard": "^3.2.0",
|
||||
"google-protobuf": "^3.13.0",
|
||||
"nes.css": "^2.3.0",
|
||||
"phaser": "3.24.1",
|
||||
"phaser": "^3.54.0",
|
||||
"phaser3-rex-plugins": "^1.1.42",
|
||||
"queue-typescript": "^1.0.1",
|
||||
"quill": "1.3.6",
|
||||
|
@ -63,14 +63,14 @@ class IframeListener {
|
||||
// Do we trust the sender of this message?
|
||||
// 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).
|
||||
let found = false;
|
||||
let foundSrc: string | null = null;
|
||||
for (const iframe of this.iframes) {
|
||||
if (iframe.contentWindow === message.source) {
|
||||
found = true;
|
||||
foundSrc = iframe.src;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!found) {
|
||||
if (!foundSrc) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -90,7 +90,11 @@ class IframeListener {
|
||||
scriptUtils.goToPage(payload.data.url);
|
||||
}
|
||||
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') {
|
||||
scriptUtils.closeCoWebSite();
|
||||
|
@ -11,8 +11,8 @@ class ScriptUtils {
|
||||
|
||||
}
|
||||
|
||||
public openCoWebsite(url : string){
|
||||
coWebsiteManager.loadCoWebsite(url,url);
|
||||
public openCoWebsite(url: string, base: string) {
|
||||
coWebsiteManager.loadCoWebsite(url, base);
|
||||
}
|
||||
|
||||
public closeCoWebSite(){
|
||||
|
@ -10,7 +10,7 @@ export interface CharacterTexture {
|
||||
export const maxUserNameLength: number = MAX_USERNAME_LENGTH;
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
|
@ -10,8 +10,6 @@ const TURN_USER: string = process.env.TURN_USER || '';
|
||||
const TURN_PASSWORD: string = process.env.TURN_PASSWORD || '';
|
||||
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 RESOLUTION = 2;
|
||||
const ZOOM_LEVEL = 1/*3/4*/;
|
||||
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
|
||||
export const MAX_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || '') || 8;
|
||||
@ -25,8 +23,6 @@ export {
|
||||
PUSHER_URL,
|
||||
UPLOADER_URL,
|
||||
ADMIN_URL,
|
||||
RESOLUTION,
|
||||
ZOOM_LEVEL,
|
||||
POSITION_DELAY,
|
||||
MAX_EXTRAPOLATION_TIME,
|
||||
STUN_SERVER,
|
||||
|
@ -1,8 +1,6 @@
|
||||
import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js';
|
||||
|
||||
const outOfScreenX = -1000;
|
||||
const outOfScreenY = -1000;
|
||||
|
||||
import ScaleManager = Phaser.Scale.ScaleManager;
|
||||
import {waScaleManager} from "../Services/WaScaleManager";
|
||||
|
||||
//the assets were found here: https://hannemann.itch.io/virtual-joystick-pack-free
|
||||
export const joystickBaseKey = 'joystickBase';
|
||||
@ -10,26 +8,58 @@ export const joystickBaseImg = 'resources/objects/joystickSplitted.png';
|
||||
export const joystickThumbKey = 'joystickThumb';
|
||||
export const joystickThumbImg = 'resources/objects/smallHandleFilledGrey.png';
|
||||
|
||||
const baseSize = 50;
|
||||
const thumbSize = 25;
|
||||
const radius = 17.5;
|
||||
|
||||
export class MobileJoystick extends VirtualJoystick {
|
||||
private resizeCallback: () => void;
|
||||
|
||||
constructor(scene: Phaser.Scene) {
|
||||
super(scene, {
|
||||
x: outOfScreenX,
|
||||
y: outOfScreenY,
|
||||
radius: 20,
|
||||
base: scene.add.image(0, 0, joystickBaseKey).setDisplaySize(60, 60).setDepth(99999),
|
||||
thumb: scene.add.image(0, 0, joystickThumbKey).setDisplaySize(30, 30).setDepth(99999),
|
||||
x: -1000,
|
||||
y: -1000,
|
||||
radius: radius * window.devicePixelRatio,
|
||||
base: scene.add.image(0, 0, joystickBaseKey).setDisplaySize(baseSize * window.devicePixelRatio, baseSize * window.devicePixelRatio).setDepth(99999),
|
||||
thumb: scene.add.image(0, 0, joystickThumbKey).setDisplaySize(thumbSize * window.devicePixelRatio, thumbSize * window.devicePixelRatio).setDepth(99999),
|
||||
enable: true,
|
||||
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.y = pointer.y;
|
||||
this.visible = true;
|
||||
this.enable = true;
|
||||
} else {
|
||||
this.visible = false;
|
||||
this.enable = false;
|
||||
}
|
||||
});
|
||||
this.scene.input.on('pointerup', () => {
|
||||
this.x = outOfScreenX;
|
||||
this.y = outOfScreenY;
|
||||
this.visible = false;
|
||||
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
@ -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
@ -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;
|
||||
}
|
||||
}
|
@ -95,11 +95,8 @@ export class GameManager {
|
||||
console.log('starting '+ (this.currentGameSceneName || this.startRoom.id))
|
||||
scenePlugin.start(this.currentGameSceneName || this.startRoom.id);
|
||||
scenePlugin.launch(MenuSceneName);
|
||||
|
||||
if (!localUserStore.getHelpCameraSettingsShown()) {
|
||||
scenePlugin.launch(HelpCameraSettingsSceneName);//700
|
||||
}
|
||||
}
|
||||
|
||||
public gameSceneIsCreated(scene: GameScene) {
|
||||
this.currentGameSceneName = scene.scene.key;
|
||||
|
@ -15,8 +15,6 @@ import {
|
||||
JITSI_PRIVATE_MODE,
|
||||
MAX_PER_GROUP,
|
||||
POSITION_DELAY,
|
||||
RESOLUTION,
|
||||
ZOOM_LEVEL
|
||||
} from "../../Enum/EnvironmentVariable";
|
||||
import {
|
||||
ITiledMap,
|
||||
@ -85,10 +83,14 @@ import DOMElement = Phaser.GameObjects.DOMElement;
|
||||
import {Subscription} from "rxjs";
|
||||
import {worldFullMessageStream} from "../../Connexion/WorldFullMessageStream";
|
||||
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 {touchScreenManager} from "../../Touch/TouchScreenManager";
|
||||
import {PinchManager} from "../UserInput/PinchManager";
|
||||
import {joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey} from "../Components/MobileJoystick";
|
||||
import {waScaleManager} from "../Services/WaScaleManager";
|
||||
|
||||
export interface GameSceneInitInterface {
|
||||
initPosition: PointInterface|null,
|
||||
@ -127,13 +129,13 @@ interface DeleteGroupEventInterface {
|
||||
|
||||
const defaultStartLayerName = 'start';
|
||||
|
||||
export class GameScene extends ResizableScene implements CenterListener {
|
||||
export class GameScene extends DirtyScene implements CenterListener {
|
||||
Terrains : Array<Phaser.Tilemaps.Tileset>;
|
||||
CurrentPlayer!: CurrentGamerInterface;
|
||||
MapPlayers!: Phaser.Physics.Arcade.Group;
|
||||
MapPlayersByKey : Map<number, RemotePlayer> = new Map<number, RemotePlayer>();
|
||||
Map!: Phaser.Tilemaps.Tilemap;
|
||||
Layers!: Array<Phaser.Tilemaps.StaticTilemapLayer>;
|
||||
Layers!: Array<Phaser.Tilemaps.TilemapLayer>;
|
||||
Objects!: Array<Phaser.Physics.Arcade.Sprite>;
|
||||
mapFile!: ITiledMap;
|
||||
groups: Map<number, Sprite>;
|
||||
@ -183,6 +185,7 @@ export class GameScene extends ResizableScene implements CenterListener {
|
||||
private messageSubscription: Subscription|null = null;
|
||||
private popUpElements : Map<number, DOMElement> = new Map<number, Phaser.GameObjects.DOMElement>();
|
||||
private originalMapUrl: string|undefined;
|
||||
private pinchManager: PinchManager|undefined;
|
||||
|
||||
constructor(private room: Room, MapUrlFile: string, customKey?: string|undefined) {
|
||||
super({
|
||||
@ -201,12 +204,11 @@ export class GameScene extends ResizableScene implements CenterListener {
|
||||
})
|
||||
this.connectionAnswerPromise = new Promise<RoomJoinedMessageInterface>((resolve, reject): void => {
|
||||
this.connectionAnswerPromiseResolve = resolve;
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
//hook preload scene
|
||||
preload(): void {
|
||||
addLoader(this);
|
||||
const localUser = localUserStore.getLocalUser();
|
||||
const textures = localUser?.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.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.
|
||||
@ -364,12 +369,14 @@ export class GameScene extends ResizableScene implements CenterListener {
|
||||
|
||||
//hook create scene
|
||||
create(): void {
|
||||
this.trackDirtyAnims();
|
||||
|
||||
gameManager.gameSceneIsCreated(this);
|
||||
urlManager.pushRoomIdToUrl(this.room);
|
||||
this.startLayerName = urlManager.getStartLayerNameFromUrl();
|
||||
|
||||
if (touchScreenManager.supportTouchScreen) {
|
||||
new PinchManager(this);
|
||||
this.pinchManager = new PinchManager(this);
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
//add layer on map
|
||||
this.Layers = new Array<Phaser.Tilemaps.StaticTilemapLayer>();
|
||||
|
||||
this.Layers = new Array<Phaser.Tilemaps.TilemapLayer>();
|
||||
let depth = -2;
|
||||
for (const layer of this.gameMap.layersIterator) {
|
||||
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);
|
||||
if (exitSceneUrl !== undefined) {
|
||||
@ -435,8 +441,8 @@ export class GameScene extends ResizableScene implements CenterListener {
|
||||
|
||||
|
||||
//create input to move
|
||||
mediaManager.setUserInputManager(this.userInputManager);
|
||||
this.userInputManager = new UserInputManager(this);
|
||||
mediaManager.setUserInputManager(this.userInputManager);
|
||||
|
||||
if (localUserStore.getFullscreen()) {
|
||||
document.querySelector('body')?.requestFullscreen();
|
||||
@ -931,6 +937,8 @@ ${escapedMessage}
|
||||
this.simplePeer?.closeAllConnections();
|
||||
this.simplePeer?.unregister();
|
||||
this.messageSubscription?.unsubscribe();
|
||||
this.userInputManager.destroy();
|
||||
this.pinchManager?.destroy();
|
||||
|
||||
for(const iframeEvents of this.iframeSubscriptionList){
|
||||
iframeEvents.unsubscribe();
|
||||
@ -1078,17 +1086,18 @@ ${escapedMessage}
|
||||
//todo: in a dedicated class/function?
|
||||
initCamera() {
|
||||
this.cameras.main.setBounds(0,0, this.Map.widthInPixels, this.Map.heightInPixels);
|
||||
this.cameras.main.startFollow(this.CurrentPlayer, true);
|
||||
this.updateCameraOffset();
|
||||
this.cameras.main.setZoom(ZOOM_LEVEL);
|
||||
}
|
||||
|
||||
addLayer(Layer : Phaser.Tilemaps.StaticTilemapLayer){
|
||||
addLayer(Layer : Phaser.Tilemaps.TilemapLayer){
|
||||
this.Layers.push(Layer);
|
||||
}
|
||||
|
||||
createCollisionWithPlayer() {
|
||||
this.physics.disableUpdate();
|
||||
//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.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.
|
||||
*/
|
||||
update(time: number, delta: number) : void {
|
||||
mediaManager.setLastUpdateScene();
|
||||
this.dirty = false;
|
||||
mediaManager.updateScene();
|
||||
this.currentTick = time;
|
||||
if (this.CurrentPlayer.isMoving()) {
|
||||
this.dirty = true;
|
||||
}
|
||||
this.CurrentPlayer.moveUser(delta);
|
||||
if (this.CurrentPlayer.isMoving()) {
|
||||
this.dirty = true;
|
||||
this.physics.enableUpdate();
|
||||
} else {
|
||||
this.physics.disableUpdate();
|
||||
}
|
||||
|
||||
|
||||
// Let's handle all events
|
||||
while (this.pendingEvents.length !== 0) {
|
||||
this.dirty = true;
|
||||
const event = this.pendingEvents.dequeue();
|
||||
switch (event.type) {
|
||||
case "InitUserPositionEvent":
|
||||
@ -1248,6 +1269,7 @@ ${escapedMessage}
|
||||
// Let's move all users
|
||||
const updatedPlayersPositions = this.playersPositionInterpolator.getUpdatedPositions(time);
|
||||
updatedPlayersPositions.forEach((moveEvent: HasMovedEvent, userId: number) => {
|
||||
this.dirty = true;
|
||||
const player: RemotePlayer | undefined = this.MapPlayersByKey.get(userId);
|
||||
if (player === undefined) {
|
||||
throw new Error('Cannot find player with ID "' + userId + '"');
|
||||
@ -1417,7 +1439,8 @@ ${escapedMessage}
|
||||
this.connection?.emitActionableEvent(itemId, eventName, state, parameters);
|
||||
}
|
||||
|
||||
public onResize(): void {
|
||||
public onResize(ev: UIEvent): void {
|
||||
super.onResize(ev);
|
||||
this.reposition();
|
||||
|
||||
// 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
|
||||
* (tries to put the character in the center of the reamining space if there is a discussion going on.
|
||||
* 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 remaining space if there is a discussion going on.
|
||||
*/
|
||||
private updateCameraOffset(): void {
|
||||
const array = layoutManager.findBiggestAvailableArray();
|
||||
let xCenter = (array.xEnd - array.xStart) / 2 + array.xStart;
|
||||
let yCenter = (array.yEnd - array.yStart) / 2 + array.yStart;
|
||||
const xCenter = (array.xEnd - array.xStart) / 2 + array.xStart;
|
||||
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:
|
||||
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 {
|
||||
@ -1554,4 +1576,9 @@ ${escapedMessage}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
zoomByFactor(zoomFactor: number) {
|
||||
waScaleManager.zoomModifier *= zoomFactor;
|
||||
this.updateCameraOffset();
|
||||
}
|
||||
}
|
||||
|
@ -11,7 +11,6 @@ import {AbstractCharacterScene} from "./AbstractCharacterScene";
|
||||
import {areCharacterLayersValid} from "../../Connexion/LocalUser";
|
||||
import { MenuScene } from "../Menu/MenuScene";
|
||||
import { SelectCharacterSceneName } from "./SelectCharacterScene";
|
||||
import { RESOLUTION } from "../../Enum/EnvironmentVariable";
|
||||
|
||||
export const CustomizeSceneName = "CustomizeScene";
|
||||
|
||||
@ -35,24 +34,25 @@ export class CustomizeScene extends AbstractCharacterScene {
|
||||
}
|
||||
|
||||
preload() {
|
||||
addLoader(this);
|
||||
|
||||
this.load.html(customizeSceneKey, 'resources/html/CustomCharacterScene.html');
|
||||
|
||||
this.layers = loadAllLayers(this.load);
|
||||
this.loadCustomSceneSelectCharacters().then((bodyResourceDescriptions) => {
|
||||
bodyResourceDescriptions.forEach((bodyResourceDescription) => {
|
||||
if(!bodyResourceDescription.level){
|
||||
if(bodyResourceDescription.level == undefined || bodyResourceDescription.level < 0 || bodyResourceDescription.level > 5 ){
|
||||
throw 'Texture level is null';
|
||||
}
|
||||
this.layers[bodyResourceDescription.level].unshift(bodyResourceDescription);
|
||||
});
|
||||
});
|
||||
|
||||
//this function must stay at the end of preload function
|
||||
addLoader(this);
|
||||
}
|
||||
|
||||
create() {
|
||||
const middleX = this.getMiddleX();
|
||||
this.customizeSceneElement = this.add.dom(middleX, 0).createFromCache(customizeSceneKey);
|
||||
this.customizeSceneElement = this.add.dom(-1000, 0).createFromCache(customizeSceneKey);
|
||||
this.centerXDomElement(this.customizeSceneElement, 150);
|
||||
MenuScene.revealMenusAfterInit(this.customizeSceneElement, customizeSceneKey);
|
||||
|
||||
this.customizeSceneElement.addListener('click');
|
||||
@ -112,6 +112,8 @@ export class CustomizeScene extends AbstractCharacterScene {
|
||||
this.moveLayers();
|
||||
this.updateSelectedLayer();
|
||||
}
|
||||
|
||||
this.onResize();
|
||||
}
|
||||
|
||||
private moveCursorHorizontally(index: number): void {
|
||||
@ -259,13 +261,7 @@ export class CustomizeScene extends AbstractCharacterScene {
|
||||
}
|
||||
|
||||
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 {
|
||||
@ -274,24 +270,7 @@ export class CustomizeScene extends AbstractCharacterScene {
|
||||
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;
|
||||
|
||||
const middleX = this.getMiddleX();
|
||||
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
|
||||
);
|
||||
this.centerXDomElement(this.customizeSceneElement, 150);
|
||||
}
|
||||
|
||||
private nextSceneToCamera(){
|
||||
|
@ -1,9 +1,7 @@
|
||||
import {gameManager} from "../Game/GameManager";
|
||||
import {TextField} from "../Components/TextField";
|
||||
import Image = Phaser.GameObjects.Image;
|
||||
import Rectangle = Phaser.GameObjects.Rectangle;
|
||||
import {mediaManager} from "../../WebRtc/MediaManager";
|
||||
import {RESOLUTION} from "../../Enum/EnvironmentVariable";
|
||||
import {SoundMeter} from "../Components/SoundMeter";
|
||||
import {SoundMeterSprite} from "../Components/SoundMeterSprite";
|
||||
import {HtmlUtils} from "../../WebRtc/HtmlUtils";
|
||||
@ -11,6 +9,7 @@ import {touchScreenManager} from "../../Touch/TouchScreenManager";
|
||||
import {PinchManager} from "../UserInput/PinchManager";
|
||||
import Zone = Phaser.GameObjects.Zone;
|
||||
import { MenuScene } from "../Menu/MenuScene";
|
||||
import {ResizableScene} from "./ResizableScene";
|
||||
|
||||
export const EnableCameraSceneName = "EnableCameraScene";
|
||||
enum LoginTextures {
|
||||
@ -23,7 +22,7 @@ enum LoginTextures {
|
||||
|
||||
const enableCameraSceneKey = 'enableCameraScene';
|
||||
|
||||
export class EnableCameraScene extends Phaser.Scene {
|
||||
export class EnableCameraScene extends ResizableScene {
|
||||
private textField!: TextField;
|
||||
private cameraNameField!: TextField;
|
||||
private arrowLeft!: Image;
|
||||
@ -37,11 +36,11 @@ export class EnableCameraScene extends Phaser.Scene {
|
||||
private soundMeter: SoundMeter;
|
||||
private soundMeterSprite!: SoundMeterSprite;
|
||||
private microphoneNameField!: TextField;
|
||||
private repositionCallback!: (this: Window, ev: UIEvent) => void;
|
||||
|
||||
private enableCameraSceneElement!: Phaser.GameObjects.DOMElement;
|
||||
|
||||
private mobileTapZone!: Zone;
|
||||
|
||||
constructor() {
|
||||
super({
|
||||
key: EnableCameraSceneName
|
||||
@ -62,8 +61,9 @@ export class EnableCameraScene extends Phaser.Scene {
|
||||
|
||||
create() {
|
||||
|
||||
const middleX = this.getMiddleX();
|
||||
this.enableCameraSceneElement = this.add.dom(middleX, 0).createFromCache(enableCameraSceneKey);
|
||||
this.enableCameraSceneElement = this.add.dom(-1000, 0).createFromCache(enableCameraSceneKey);
|
||||
this.centerXDomElement(this.enableCameraSceneElement, 300);
|
||||
|
||||
MenuScene.revealMenusAfterInit(this.enableCameraSceneElement, enableCameraSceneKey);
|
||||
|
||||
const continuingButton = this.enableCameraSceneElement.getChildByID('enableCameraSceneFormSubmit') as HTMLButtonElement;
|
||||
@ -75,12 +75,14 @@ export class EnableCameraScene extends Phaser.Scene {
|
||||
if (touchScreenManager.supportTouchScreen) {
|
||||
new PinchManager(this);
|
||||
}
|
||||
//this.scale.setZoom(ZOOM_LEVEL);
|
||||
//Phaser.Display.Align.In.BottomCenter(this.pressReturnField, zone);
|
||||
|
||||
/* 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.
|
||||
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", () => {
|
||||
this.login();
|
||||
});
|
||||
@ -130,8 +132,7 @@ export class EnableCameraScene extends Phaser.Scene {
|
||||
this.soundMeterSprite.setVisible(false);
|
||||
this.add.existing(this.soundMeterSprite);
|
||||
|
||||
this.repositionCallback = this.reposition.bind(this);
|
||||
window.addEventListener('resize', this.repositionCallback);
|
||||
this.onResize();
|
||||
}
|
||||
|
||||
private previousCam(): void {
|
||||
@ -209,10 +210,9 @@ export class EnableCameraScene extends Phaser.Scene {
|
||||
this.arrowUp.setVisible(this.microphoneSelected > 0);
|
||||
|
||||
}
|
||||
this.reposition();
|
||||
}
|
||||
|
||||
private reposition(): void {
|
||||
public onResize(): void {
|
||||
let div = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup');
|
||||
let bounds = div.getBoundingClientRect();
|
||||
if (!div.srcObject) {
|
||||
@ -225,44 +225,41 @@ export class EnableCameraScene extends Phaser.Scene {
|
||||
this.cameraNameField.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.y = bounds.bottom / RESOLUTION + 16;
|
||||
this.soundMeterSprite.y = bounds.bottom / this.scale.zoom + 16;
|
||||
|
||||
this.microphoneNameField.y = this.soundMeterSprite.y + 22;
|
||||
|
||||
this.arrowRight.x = bounds.right / RESOLUTION + 16;
|
||||
this.arrowRight.y = (bounds.top + bounds.height / 2) / RESOLUTION;
|
||||
this.arrowRight.x = bounds.right / this.scale.zoom + 16;
|
||||
this.arrowRight.y = (bounds.top + bounds.height / 2) / this.scale.zoom;
|
||||
|
||||
this.arrowLeft.x = bounds.left / RESOLUTION - 16;
|
||||
this.arrowLeft.y = (bounds.top + bounds.height / 2) / RESOLUTION;
|
||||
this.arrowLeft.x = bounds.left / this.scale.zoom - 16;
|
||||
this.arrowLeft.y = (bounds.top + bounds.height / 2) / this.scale.zoom;
|
||||
|
||||
this.arrowDown.x = this.microphoneNameField.x + this.microphoneNameField.width / 2 + 16;
|
||||
this.arrowDown.y = this.microphoneNameField.y;
|
||||
|
||||
this.arrowUp.x = this.microphoneNameField.x - this.microphoneNameField.width / 2 - 16;
|
||||
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 {
|
||||
this.soundMeterSprite.setVolume(this.soundMeter.getVolume());
|
||||
mediaManager.updateScene();
|
||||
|
||||
mediaManager.setLastUpdateScene();
|
||||
|
||||
const middleX = this.getMiddleX();
|
||||
this.tweens.add({
|
||||
targets: this.enableCameraSceneElement,
|
||||
x: middleX,
|
||||
duration: 1000,
|
||||
ease: 'Power3'
|
||||
});
|
||||
this.centerXDomElement(this.enableCameraSceneElement, 300);
|
||||
}
|
||||
|
||||
private login(): void {
|
||||
HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
|
||||
this.soundMeter.stop();
|
||||
window.removeEventListener('resize', this.repositionCallback);
|
||||
|
||||
mediaManager.stopCamera();
|
||||
mediaManager.stopMicrophone();
|
||||
@ -282,15 +279,4 @@ export class EnableCameraScene extends Phaser.Scene {
|
||||
}
|
||||
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)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -2,6 +2,7 @@ import {gameManager} from "../Game/GameManager";
|
||||
import {Scene} from "phaser";
|
||||
import {ErrorScene} from "../Reconnecting/ErrorScene";
|
||||
import {WAError} from "../Reconnecting/WAError";
|
||||
import {waScaleManager} from "../Services/WaScaleManager";
|
||||
|
||||
export const EntrySceneName = "EntryScene";
|
||||
|
||||
@ -17,7 +18,11 @@ export class EntryScene extends Scene {
|
||||
}
|
||||
|
||||
create() {
|
||||
|
||||
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);
|
||||
}).catch((err) => {
|
||||
if (err.response && err.response.status == 404) {
|
||||
|
@ -4,7 +4,6 @@ import {ResizableScene} from "./ResizableScene";
|
||||
import { localUserStore } from "../../Connexion/LocalUserStore";
|
||||
import {MenuScene} from "../Menu/MenuScene";
|
||||
import { isUserNameValid } from "../../Connexion/LocalUser";
|
||||
import { RESOLUTION } from "../../Enum/EnvironmentVariable";
|
||||
|
||||
export const LoginSceneName = "LoginScene";
|
||||
|
||||
@ -27,8 +26,8 @@ export class LoginScene extends ResizableScene {
|
||||
}
|
||||
|
||||
create() {
|
||||
const middleX = this.getMiddleX();
|
||||
this.loginSceneElement = this.add.dom(middleX, 0).createFromCache(loginSceneKey);
|
||||
this.loginSceneElement = this.add.dom(-1000, 0).createFromCache(loginSceneKey);
|
||||
this.centerXDomElement(this.loginSceneElement, 200);
|
||||
MenuScene.revealMenusAfterInit(this.loginSceneElement, loginSceneKey);
|
||||
|
||||
const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement;
|
||||
@ -78,27 +77,10 @@ export class LoginScene extends ResizableScene {
|
||||
}
|
||||
|
||||
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 {
|
||||
const middleX = this.getMiddleX();
|
||||
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);
|
||||
this.centerXDomElement(this.loginSceneElement, 200);
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,23 @@
|
||||
import {Scene} from "phaser";
|
||||
import DOMElement = Phaser.GameObjects.DOMElement;
|
||||
|
||||
export abstract class ResizableScene extends Scene {
|
||||
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
@ -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
|
||||
];
|
||||
}
|
||||
|
||||
}
|
@ -37,8 +37,6 @@ export class SelectCharacterScene extends AbstractCharacterScene {
|
||||
}
|
||||
|
||||
preload() {
|
||||
addLoader(this);
|
||||
|
||||
this.load.html(selectCharacterKey, 'resources/html/selectCharacterScene.html');
|
||||
|
||||
this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => {
|
||||
@ -47,13 +45,15 @@ export class SelectCharacterScene extends AbstractCharacterScene {
|
||||
});
|
||||
})
|
||||
this.playerModels = loadAllDefaultModels(this.load);
|
||||
|
||||
//this function must stay at the end of preload function
|
||||
addLoader(this);
|
||||
}
|
||||
|
||||
create() {
|
||||
|
||||
const middleX = this.getMiddleX();
|
||||
this.selectCharacterSceneElement = this.add.dom(middleX, 0).createFromCache(selectCharacterKey);
|
||||
this.selectCharacterSceneElement = this.add.dom(-1000, 0).createFromCache(selectCharacterKey);
|
||||
this.centerXDomElement(this.selectCharacterSceneElement, 150);
|
||||
MenuScene.revealMenusAfterInit(this.selectCharacterSceneElement, selectCharacterKey);
|
||||
|
||||
this.selectCharacterSceneElement.addListener('click');
|
||||
@ -279,36 +279,12 @@ export class SelectCharacterScene extends AbstractCharacterScene {
|
||||
}
|
||||
|
||||
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 {
|
||||
//move position of user
|
||||
this.moveUser();
|
||||
|
||||
const middleX = this.getMiddleX();
|
||||
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
|
||||
);
|
||||
this.centerXDomElement(this.selectCharacterSceneElement, 150);
|
||||
}
|
||||
}
|
||||
|
@ -10,7 +10,6 @@ import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingM
|
||||
import {touchScreenManager} from "../../Touch/TouchScreenManager";
|
||||
import {PinchManager} from "../UserInput/PinchManager";
|
||||
import { MenuScene } from "../Menu/MenuScene";
|
||||
import { RESOLUTION } from "../../Enum/EnvironmentVariable";
|
||||
|
||||
export const SelectCompanionSceneName = "SelectCompanionScene";
|
||||
|
||||
@ -31,21 +30,20 @@ export class SelectCompanionScene extends ResizableScene {
|
||||
}
|
||||
|
||||
preload() {
|
||||
addLoader(this);
|
||||
|
||||
this.load.html(selectCompanionSceneKey, 'resources/html/SelectCompanionScene.html');
|
||||
|
||||
getAllCompanionResources(this.load).forEach(model => {
|
||||
this.companionModels.push(model);
|
||||
});
|
||||
|
||||
//this function must stay at the end of preload function
|
||||
addLoader(this);
|
||||
}
|
||||
|
||||
create() {
|
||||
|
||||
const middleX = this.getMiddleX();
|
||||
this.selectCompanionSceneElement = this.add.dom(middleX, 0).createFromCache(selectCompanionSceneKey);
|
||||
this.selectCompanionSceneElement = this.add.dom(-1000, 0).createFromCache(selectCompanionSceneKey);
|
||||
this.centerXDomElement(this.selectCompanionSceneElement, 150);
|
||||
MenuScene.revealMenusAfterInit(this.selectCompanionSceneElement, selectCompanionSceneKey);
|
||||
|
||||
this.selectCompanionSceneElement.addListener('click');
|
||||
@ -88,13 +86,7 @@ export class SelectCompanionScene extends ResizableScene {
|
||||
}
|
||||
|
||||
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 {
|
||||
@ -137,13 +129,7 @@ export class SelectCompanionScene extends ResizableScene {
|
||||
public onResize(ev: UIEvent): void {
|
||||
this.moveCompanion();
|
||||
|
||||
const middleX = this.getMiddleX();
|
||||
this.tweens.add({
|
||||
targets: this.selectCompanionSceneElement,
|
||||
x: middleX,
|
||||
duration: 1000,
|
||||
ease: 'Power3'
|
||||
});
|
||||
this.centerXDomElement(this.selectCompanionSceneElement, 150);
|
||||
}
|
||||
|
||||
private updateSelectedCompanion(): void {
|
||||
@ -239,15 +225,4 @@ export class SelectCompanionScene extends ResizableScene {
|
||||
companion.setX(companionX);
|
||||
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
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -1,14 +1,14 @@
|
||||
import {mediaManager} from "../../WebRtc/MediaManager";
|
||||
import {HtmlUtils} from "../../WebRtc/HtmlUtils";
|
||||
import {localUserStore} from "../../Connexion/LocalUserStore";
|
||||
import {RESOLUTION} from "../../Enum/EnvironmentVariable";
|
||||
import {DirtyScene} from "../Game/DirtyScene";
|
||||
|
||||
export const HelpCameraSettingsSceneName = 'HelpCameraSettingsScene';
|
||||
const helpCameraSettings = 'helpCameraSettings';
|
||||
/**
|
||||
* 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 helpCameraSettingsOpened: boolean = false;
|
||||
|
||||
@ -30,6 +30,9 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
|
||||
this.revealMenusAfterInit(this.helpCameraSettingsElement, helpCameraSettings);
|
||||
this.helpCameraSettingsElement.addListener('click');
|
||||
this.helpCameraSettingsElement.on('click', (event:MouseEvent) => {
|
||||
if((event?.target as HTMLInputElement).id === 'mailto') {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormRefresh') {
|
||||
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();
|
||||
} else {
|
||||
this.closeHelpCameraSettingsOpened();
|
||||
localUserStore.setHelpCameraSettingsShown();
|
||||
}
|
||||
|
||||
mediaManager.setHelpCameraSettingsCallBack(() => {
|
||||
this.openHelpCameraSettingsOpened();
|
||||
});
|
||||
}
|
||||
|
||||
private openHelpCameraSettingsOpened(): void {
|
||||
HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
|
||||
this.helpCameraSettingsOpened = true;
|
||||
try{
|
||||
if(window.navigator.userAgent.includes('Firefox')){
|
||||
HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-firefox.png"/>';
|
||||
}else if(window.navigator.userAgent.includes('Chrome')){
|
||||
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 middleX = this.getMiddleX();
|
||||
this.tweens.add({
|
||||
@ -63,23 +73,26 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
|
||||
ease: 'Power3',
|
||||
overflow: 'scroll'
|
||||
});
|
||||
|
||||
this.dirty = true;
|
||||
}
|
||||
|
||||
private closeHelpCameraSettingsOpened(): void {
|
||||
const middleX = this.getMiddleX();
|
||||
const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement;
|
||||
/*const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement;
|
||||
helpCameraSettingsInfo.innerText = '';
|
||||
helpCameraSettingsInfo.style.display = 'none';
|
||||
helpCameraSettingsInfo.style.display = 'none';*/
|
||||
this.helpCameraSettingsOpened = false;
|
||||
this.tweens.add({
|
||||
targets: this.helpCameraSettingsElement,
|
||||
y: -400,
|
||||
y: -1000,
|
||||
x: middleX,
|
||||
duration: 1000,
|
||||
ease: 'Power3',
|
||||
overflow: 'scroll'
|
||||
});
|
||||
localUserStore.setHelpCameraSettingsShown();
|
||||
|
||||
this.dirty = true;
|
||||
}
|
||||
|
||||
private revealMenusAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) {
|
||||
@ -91,18 +104,11 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
|
||||
}
|
||||
|
||||
update(time: number, delta: number): void {
|
||||
const middleX = this.getMiddleX();
|
||||
const middleY = this.getMiddleY();
|
||||
this.tweens.add({
|
||||
targets: this.helpCameraSettingsElement,
|
||||
x: middleX,
|
||||
y: middleY,
|
||||
duration: 1000,
|
||||
ease: 'Power3'
|
||||
});
|
||||
this.dirty = false;
|
||||
}
|
||||
|
||||
public onResize(ev: UIEvent): void {
|
||||
super.onResize(ev);
|
||||
const middleX = this.getMiddleX();
|
||||
const middleY = this.getMiddleY();
|
||||
this.tweens.add({
|
||||
@ -115,24 +121,27 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
|
||||
}
|
||||
|
||||
private getMiddleX() : number{
|
||||
return (this.game.renderer.width / RESOLUTION) -
|
||||
return (this.scale.width / 2) -
|
||||
(
|
||||
this.helpCameraSettingsElement
|
||||
&& this.helpCameraSettingsElement.node
|
||||
&& this.helpCameraSettingsElement.node.getBoundingClientRect().width > 0
|
||||
? (this.helpCameraSettingsElement.node.getBoundingClientRect().width / 4)
|
||||
? (this.helpCameraSettingsElement.node.getBoundingClientRect().width / (2 * this.scale.zoom))
|
||||
: (400 / 2)
|
||||
);
|
||||
}
|
||||
|
||||
private getMiddleY() : number{
|
||||
const middleY = ((window.innerHeight) - (
|
||||
const middleY = ((this.scale.height) - (
|
||||
(this.helpCameraSettingsElement
|
||||
&& this.helpCameraSettingsElement.node
|
||||
&& this.helpCameraSettingsElement.node.getBoundingClientRect().height > 0
|
||||
? this.helpCameraSettingsElement.node.getBoundingClientRect().height : 400 /*FIXME to use a const will be injected in HTMLElement*/) * 2)) / 2;
|
||||
return (middleY > 0 ? middleY / RESOLUTION : 0);
|
||||
? this.helpCameraSettingsElement.node.getBoundingClientRect().height : 400 /*FIXME to use a const will be injected in HTMLElement*/)/this.scale.zoom)) / 2;
|
||||
return (middleY > 0 ? middleY : 0);
|
||||
}
|
||||
|
||||
public isDirty(): boolean {
|
||||
return this.dirty;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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){
|
||||
middleY = 0;
|
||||
}
|
||||
let middleX = (window.innerWidth / 3) - 298;
|
||||
let middleX = this.scale.width / 2 - 457/2;
|
||||
if(middleX < 0){
|
||||
middleX = 0;
|
||||
}
|
||||
@ -236,11 +236,11 @@ export class MenuScene extends Phaser.Scene {
|
||||
|
||||
this.gameShareOpened = true;
|
||||
|
||||
let middleY = (window.innerHeight / 3) - (257);
|
||||
let middleY = this.scale.height / 2 - 85;
|
||||
if(middleY < 0){
|
||||
middleY = 0;
|
||||
}
|
||||
let middleX = (window.innerWidth / 3) - 298;
|
||||
let middleX = this.scale.width / 2 - 200;
|
||||
if(middleX < 0){
|
||||
middleX = 0;
|
||||
}
|
||||
@ -350,4 +350,8 @@ export class MenuScene extends Phaser.Scene {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public isDirty(): boolean {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
@ -7,6 +7,7 @@ export const hasMovedEventName = "hasMoved";
|
||||
export interface CurrentGamerInterface extends Character{
|
||||
moveUser(delta: number) : void;
|
||||
say(text : string) : void;
|
||||
isMoving(): boolean;
|
||||
}
|
||||
|
||||
export class Player extends Character implements CurrentGamerInterface {
|
||||
@ -83,4 +84,8 @@ export class Player extends Character implements CurrentGamerInterface {
|
||||
}
|
||||
this.wasMoving = moving;
|
||||
}
|
||||
|
||||
public isMoving(): boolean {
|
||||
return this.wasMoving;
|
||||
}
|
||||
}
|
||||
|
105
front/src/Phaser/Services/HdpiManager.ts
Normal 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
@ -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);
|
@ -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
|
||||
public static readonly KEY = 'Outline';
|
||||
|
@ -1,4 +1,6 @@
|
||||
import {Pinch} from "phaser3-rex-plugins/plugins/gestures.js";
|
||||
import {waScaleManager} from "../Services/WaScaleManager";
|
||||
import {GameScene} from "../Game/GameScene";
|
||||
|
||||
export class PinchManager {
|
||||
private scene: Phaser.Scene;
|
||||
@ -7,16 +9,33 @@ export class PinchManager {
|
||||
constructor(scene: Phaser.Scene) {
|
||||
this.scene = 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
|
||||
let newZoom = this.scene.cameras.main.zoom * pinch.scaleFactor;
|
||||
if (newZoom < 0.25) {
|
||||
newZoom = 0.25;
|
||||
} else if(newZoom > 2) {
|
||||
newZoom = 2;
|
||||
if (pinch.scaleFactor > 1.2 || pinch.scaleFactor < 0.8) {
|
||||
// Pinch too fast! Probably a bad measure.
|
||||
return;
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
@ -54,6 +54,7 @@ export class UserInputManager {
|
||||
this.Scene = Scene;
|
||||
this.isInputDisabled = false;
|
||||
this.initKeyBoardEvent();
|
||||
this.initMouseWheel();
|
||||
if (touchScreenManager.supportTouchScreen) {
|
||||
this.initVirtualJoystick();
|
||||
}
|
||||
@ -170,4 +171,14 @@ export class UserInputManager {
|
||||
removeSpaceEventListner(callback : Function){
|
||||
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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -349,7 +349,7 @@ class LayoutManager {
|
||||
userInputManager.addSpaceEventListner(callBack);
|
||||
}
|
||||
|
||||
public removeActionButton(id: string, userInputManager: UserInputManager){
|
||||
public removeActionButton(id: string, userInputManager?: UserInputManager){
|
||||
//delete previous element
|
||||
const previousDiv = this.actionButtonInformation.get(id);
|
||||
if(previousDiv){
|
||||
@ -357,10 +357,45 @@ class LayoutManager {
|
||||
this.actionButtonInformation.delete(id);
|
||||
}
|
||||
const previousEventCallback = this.actionButtonTrigger.get(id);
|
||||
if(previousEventCallback){
|
||||
if(previousEventCallback && userInputManager){
|
||||
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();
|
||||
|
@ -4,6 +4,8 @@ import {discussionManager, SendMessageCallback} from "./DiscussionManager";
|
||||
import {UserInputManager} from "../Phaser/UserInput/UserInputManager";
|
||||
import {localUserStore} from "../Connexion/LocalUserStore";
|
||||
import {UserSimplePeerInterface} from "./SimplePeer";
|
||||
import {SoundMeter} from "../Phaser/Components/SoundMeter";
|
||||
|
||||
declare const navigator:any; // eslint-disable-line @typescript-eslint/no-explicit-any
|
||||
|
||||
let videoConstraint: boolean|MediaTrackConstraints = {
|
||||
@ -26,6 +28,7 @@ export type StartScreenSharingCallback = (media: MediaStream) => void;
|
||||
export type StopScreenSharingCallback = (media: MediaStream) => void;
|
||||
export type ReportCallback = (message: string) => 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)
|
||||
export class MediaManager {
|
||||
@ -40,6 +43,7 @@ export class MediaManager {
|
||||
microphoneClose: HTMLImageElement;
|
||||
microphone: HTMLImageElement;
|
||||
webrtcInAudio: HTMLAudioElement;
|
||||
mySoundMeterElement: HTMLDivElement;
|
||||
private webrtcOutAudio: HTMLAudioElement;
|
||||
constraintsMedia : MediaStreamConstraints = {
|
||||
audio: audioConstraint,
|
||||
@ -49,6 +53,8 @@ export class MediaManager {
|
||||
startScreenSharingCallBacks : Set<StartScreenSharingCallback> = new Set<StartScreenSharingCallback>();
|
||||
stopScreenSharingCallBacks : Set<StopScreenSharingCallback> = new Set<StopScreenSharingCallback>();
|
||||
showReportModalCallBacks : Set<ShowReportCallBack> = new Set<ShowReportCallBack>();
|
||||
helpCameraSettingsCallBacks : Set<HelpCameraSettingsCallBack> = new Set<HelpCameraSettingsCallBack>();
|
||||
|
||||
private microphoneBtn: HTMLDivElement;
|
||||
private cinemaBtn: HTMLDivElement;
|
||||
private monitorBtn: HTMLDivElement;
|
||||
@ -63,6 +69,12 @@ export class MediaManager {
|
||||
|
||||
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() {
|
||||
|
||||
this.myCamVideo = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideo');
|
||||
@ -121,10 +133,16 @@ export class MediaManager {
|
||||
this.pingCameraStatus();
|
||||
|
||||
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.updateSoudMeter();
|
||||
}
|
||||
|
||||
public blurCamera() {
|
||||
@ -225,6 +243,10 @@ export class MediaManager {
|
||||
}).catch((err) => {
|
||||
console.error(err);
|
||||
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) => {
|
||||
console.error(err);
|
||||
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.monitor.style.display = "none";
|
||||
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(() => {
|
||||
console.info('Error get camera, trying with video option at null');
|
||||
return this.getLocalStream().catch((err) => {
|
||||
console.info('Error get camera, trying with video option at null =>', err);
|
||||
this.disableCameraStyle();
|
||||
return this.getLocalStream().then((stream : MediaStream) => {
|
||||
this.hasCamera = false;
|
||||
return stream;
|
||||
}).catch((err) => {
|
||||
this.disableMicrophoneStyle();
|
||||
console.info("error get media ", this.constraintsMedia.video, this.constraintsMedia.audio, err);
|
||||
throw err;
|
||||
});
|
||||
@ -425,6 +456,13 @@ export class MediaManager {
|
||||
return navigator.mediaDevices.getUserMedia(this.constraintsMedia).then((stream : MediaStream) => {
|
||||
this.localStream = stream;
|
||||
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;
|
||||
}).catch((err: Error) => {
|
||||
throw err;
|
||||
@ -451,6 +489,7 @@ export class MediaManager {
|
||||
track.stop();
|
||||
}
|
||||
}
|
||||
this.mySoundMeter?.stop();
|
||||
}
|
||||
|
||||
setCamera(id: string): Promise<MediaStream> {
|
||||
@ -496,6 +535,13 @@ export class MediaManager {
|
||||
</button>
|
||||
<video id="${userId}" autoplay></video>
|
||||
<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>
|
||||
`;
|
||||
|
||||
@ -585,6 +631,12 @@ export class MediaManager {
|
||||
throw `Unable to find video for ${userId}`;
|
||||
}
|
||||
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){
|
||||
// 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);
|
||||
this.remoteVideo.delete(userId);
|
||||
|
||||
this.soundMeters.get(userId)?.stop();
|
||||
this.soundMeters.delete(userId);
|
||||
this.soundMeterElements.delete(userId);
|
||||
|
||||
//permit to remove user in discussion part
|
||||
this.removeParticipant(userId);
|
||||
}
|
||||
@ -717,6 +773,7 @@ export class MediaManager {
|
||||
}
|
||||
|
||||
public setUserInputManager(userInputManager : UserInputManager){
|
||||
this.userInputManager = userInputManager;
|
||||
discussionManager.setUserInputManager(userInputManager);
|
||||
}
|
||||
//check if user is active
|
||||
@ -739,6 +796,57 @@ export class MediaManager {
|
||||
public setShowReportModalCallBacks(callback: ShowReportCallBack){
|
||||
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();
|
||||
|
@ -22,7 +22,7 @@ export class ScreenSharingPeer extends Peer {
|
||||
constructor(user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection) {
|
||||
super({
|
||||
initiator: initiator ? initiator : false,
|
||||
reconnectTimer: 10000,
|
||||
//reconnectTimer: 10000,
|
||||
config: {
|
||||
iceServers: [
|
||||
{
|
||||
|
@ -82,15 +82,11 @@ export class SimplePeer {
|
||||
});
|
||||
|
||||
mediaManager.showGameOverlay();
|
||||
mediaManager.getCamera().then(() => {
|
||||
|
||||
mediaManager.getCamera().finally(() => {
|
||||
//receive message start
|
||||
this.Connection.receiveWebrtcStart((message: UserSimplePeerInterface) => {
|
||||
this.receiveWebrtcStart(message);
|
||||
});
|
||||
|
||||
}).catch((err) => {
|
||||
console.error("err", err);
|
||||
});
|
||||
|
||||
this.Connection.disconnectMessage((data: WebRtcDisconnectMessageInterface): void => {
|
||||
|
@ -28,7 +28,7 @@ export class VideoPeer extends Peer {
|
||||
constructor(public user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection) {
|
||||
super({
|
||||
initiator: initiator ? initiator : false,
|
||||
reconnectTimer: 10000,
|
||||
//reconnectTimer: 10000,
|
||||
config: {
|
||||
iceServers: [
|
||||
{
|
||||
|
@ -2,7 +2,7 @@ import 'phaser';
|
||||
import GameConfig = Phaser.Types.Core.GameConfig;
|
||||
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 {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene";
|
||||
import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene";
|
||||
@ -17,6 +17,10 @@ import {HelpCameraSettingsScene} from "./Phaser/Menu/HelpCameraSettingsScene";
|
||||
import {localUserStore} from "./Connexion/LocalUserStore";
|
||||
import {ErrorScene} from "./Phaser/Reconnecting/ErrorScene";
|
||||
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();
|
||||
|
||||
@ -67,15 +71,23 @@ switch (phaserMode) {
|
||||
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 = {
|
||||
type: mode,
|
||||
title: "WorkAdventure",
|
||||
width: width / RESOLUTION,
|
||||
height: height / RESOLUTION,
|
||||
scale: {
|
||||
parent: "game",
|
||||
width: gameSize.width,
|
||||
height: gameSize.height,
|
||||
zoom: realSize.width / gameSize.width,
|
||||
autoRound: true,
|
||||
resizeInterval: 999999999999
|
||||
},
|
||||
scene: [EntryScene,
|
||||
LoginScene,
|
||||
SelectCharacterScene,
|
||||
isMobile() ? SelectCharacterMobileScene : SelectCharacterScene,
|
||||
SelectCompanionScene,
|
||||
EnableCameraScene,
|
||||
ReconnectingScene,
|
||||
@ -83,7 +95,7 @@ const config: GameConfig = {
|
||||
CustomizeScene,
|
||||
MenuScene,
|
||||
HelpCameraSettingsScene],
|
||||
zoom: RESOLUTION,
|
||||
//resolution: window.devicePixelRatio / 2,
|
||||
fps: fps,
|
||||
dom: {
|
||||
createContainer: true
|
||||
@ -99,6 +111,8 @@ const config: GameConfig = {
|
||||
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: {
|
||||
postBoot: game => {
|
||||
// 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) {
|
||||
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
|
||||
for (const scene of game.scene.getScenes(true)) {
|
||||
@ -126,8 +143,7 @@ window.addEventListener('resize', function (event) {
|
||||
});
|
||||
|
||||
coWebsiteManager.onResize.subscribe(() => {
|
||||
const {width, height} = coWebsiteManager.getGameSize();
|
||||
game.scale.resize(width / RESOLUTION, height / RESOLUTION);
|
||||
waScaleManager.applyNewSize();
|
||||
});
|
||||
|
||||
iframeListener.init();
|
||||
|
@ -19,9 +19,6 @@ describe("isUserNameValid()", () => {
|
||||
it("should not validate spaces", () => {
|
||||
expect(isUserNameValid(' ')).toBe(false);
|
||||
});
|
||||
it("should not validate numbers", () => {
|
||||
expect(isUserNameValid('a12')).toBe(false);
|
||||
});
|
||||
it("should not validate special characters", () => {
|
||||
expect(isUserNameValid('a&-')).toBe(false);
|
||||
});
|
||||
|
55
front/tests/Phaser/Services/HdpiManagerTest.ts
Normal 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
@ -24,7 +24,7 @@
|
||||
{
|
||||
"name":"exitUrl",
|
||||
"type":"string",
|
||||
"value":"\/@\/tcm\/workadventure\/floor0"
|
||||
"value":"\/@\/tcm\/workadventure\/wa-village"
|
||||
}],
|
||||
"type":"tilelayer",
|
||||
"visible":true,
|
||||
|
Before Width: | Height: | Size: 3.8 KiB |
BIN
maps/Village/logo-WA.png
Normal file
After Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
BIN
maps/Village/sol_intérieur.png
Normal file
After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 3.6 KiB |
Before Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 3.6 KiB |
Before Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 3.7 KiB |
Before Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 3.8 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 3.6 KiB |
Before Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 3.6 KiB |
Before Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 3.1 KiB |
Before Width: | Height: | Size: 3.8 KiB |
Before Width: | Height: | Size: 3.0 KiB |
BIN
maps/Village/tileset1-repositioning.png
Normal file
After Width: | Height: | Size: 24 KiB |
BIN
maps/Village/tileset1.png
Normal file
After Width: | Height: | Size: 29 KiB |
82
maps/tests/autoresize.json
Normal 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
@ -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
|
||||
}
|
@ -42,6 +42,38 @@
|
||||
<a href="#" class="testLink" data-testmap="script_api.json" target="_blank">Testing scripting API with a script</a>
|
||||
</td>
|
||||
</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>
|
||||
|
||||
<script>
|
||||
|
82
maps/tests/mobile.json
Normal 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
@ -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
|
||||
}
|