Merge branch 'develop' of github.com:thecodingmachine/workadventure into skiprender2

# Conflicts:
#	front/src/Phaser/Game/GameScene.ts
#	front/src/index.ts
This commit is contained in:
David Négrier 2021-05-06 16:25:13 +02:00
commit 6b4d064f19
143 changed files with 6943 additions and 1272 deletions

View File

@ -1,7 +1,11 @@
name: Build, push and deploy Docker image name: Build, push and deploy Docker image
on: on:
- push release:
types: [created]
pull_request:
types: [ labeled, synchronize ]
# Enables BuildKit # Enables BuildKit
env: env:
@ -10,7 +14,7 @@ env:
jobs: jobs:
build-front: build-front:
if: ${{ github.event.release || contains(github.event.pull_request.labels.*.name, 'deploy') }}
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
@ -30,11 +34,11 @@ jobs:
username: ${{ secrets.DOCKER_USERNAME }} username: ${{ secrets.DOCKER_USERNAME }}
password: ${{ secrets.DOCKER_PASSWORD }} password: ${{ secrets.DOCKER_PASSWORD }}
repository: thecodingmachine/workadventure-front repository: thecodingmachine/workadventure-front
tags: ${{ env.GITHUB_REF_SLUG }} tags: ${{ github.event.pull_request && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }}
add_git_labels: true add_git_labels: true
build-back: build-back:
if: ${{ github.event.release || contains(github.event.pull_request.labels.*.name, 'deploy') }}
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
@ -53,11 +57,11 @@ jobs:
username: ${{ secrets.DOCKER_USERNAME }} username: ${{ secrets.DOCKER_USERNAME }}
password: ${{ secrets.DOCKER_PASSWORD }} password: ${{ secrets.DOCKER_PASSWORD }}
repository: thecodingmachine/workadventure-back repository: thecodingmachine/workadventure-back
tags: ${{ env.GITHUB_REF_SLUG }} tags: ${{ github.event.pull_request && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }}
add_git_labels: true add_git_labels: true
build-pusher: build-pusher:
if: ${{ github.event.release || contains(github.event.pull_request.labels.*.name, 'deploy') }}
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
@ -76,11 +80,11 @@ jobs:
username: ${{ secrets.DOCKER_USERNAME }} username: ${{ secrets.DOCKER_USERNAME }}
password: ${{ secrets.DOCKER_PASSWORD }} password: ${{ secrets.DOCKER_PASSWORD }}
repository: thecodingmachine/workadventure-pusher repository: thecodingmachine/workadventure-pusher
tags: ${{ env.GITHUB_REF_SLUG }} tags: ${{ github.event.pull_request && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }}
add_git_labels: true add_git_labels: true
build-uploader: build-uploader:
if: ${{ github.event.release || contains(github.event.pull_request.labels.*.name, 'deploy') }}
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
@ -99,11 +103,11 @@ jobs:
username: ${{ secrets.DOCKER_USERNAME }} username: ${{ secrets.DOCKER_USERNAME }}
password: ${{ secrets.DOCKER_PASSWORD }} password: ${{ secrets.DOCKER_PASSWORD }}
repository: thecodingmachine/workadventure-uploader repository: thecodingmachine/workadventure-uploader
tags: ${{ env.GITHUB_REF_SLUG }} tags: ${{ github.event.pull_request && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }}
add_git_labels: true add_git_labels: true
build-maps: build-maps:
if: ${{ github.event.release || contains(github.event.pull_request.labels.*.name, 'deploy') }}
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
@ -123,7 +127,7 @@ jobs:
username: ${{ secrets.DOCKER_USERNAME }} username: ${{ secrets.DOCKER_USERNAME }}
password: ${{ secrets.DOCKER_PASSWORD }} password: ${{ secrets.DOCKER_PASSWORD }}
repository: thecodingmachine/workadventure-maps repository: thecodingmachine/workadventure-maps
tags: ${{ env.GITHUB_REF_SLUG }} tags: ${{ github.event.pull_request && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }}
add_git_labels: true add_git_labels: true
deeploy: deeploy:
@ -134,6 +138,7 @@ jobs:
- build-maps - build-maps
- build-uploader - build-uploader
runs-on: ubuntu-latest runs-on: ubuntu-latest
if: ${{ contains(github.event.pull_request.labels.*.name, 'deploy') }}
steps: steps:
- name: Checkout - name: Checkout
@ -151,14 +156,14 @@ jobs:
JITSI_URL: ${{ secrets.JITSI_URL }} JITSI_URL: ${{ secrets.JITSI_URL }}
SECRET_JITSI_KEY: ${{ secrets.SECRET_JITSI_KEY }} SECRET_JITSI_KEY: ${{ secrets.SECRET_JITSI_KEY }}
TURN_STATIC_AUTH_SECRET: ${{ secrets.TURN_STATIC_AUTH_SECRET }} TURN_STATIC_AUTH_SECRET: ${{ secrets.TURN_STATIC_AUTH_SECRET }}
DEPLOY_REF: ${{ env.GITHUB_HEAD_REF_SLUG }}
with: with:
namespace: workadventure-${{ env.GITHUB_REF_SLUG }} namespace: workadventure-${{ env.GITHUB_HEAD_REF_SLUG }}
- name: Add a comment in PR - name: Add a comment in PR
uses: unsplash/comment-on-pr@v1.2.0 uses: unsplash/comment-on-pr@v1.2.0
if: ${{ env.GITHUB_REF_SLUG != 'master' }}
env: env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with: with:
msg: Environment deployed at https://play.${{ env.GITHUB_REF_SLUG }}.workadventure.test.thecodingmachine.com msg: Environment deployed at https://play.${{ env.GITHUB_HEAD_REF_SLUG }}.test.workadventu.re
check_for_duplicate_msg: true check_for_duplicate_msg: true

View File

@ -1,7 +1,8 @@
name: Cleanup images and environments name: Cleanup images and environments
on: on:
- delete pull_request:
types: [ closed ]
# Enables BuildKit # Enables BuildKit
env: env:
@ -14,13 +15,12 @@ jobs:
steps: steps:
# Create a slugified value of the branch # Create a slugified value of the branch
- uses: rlespinasse/github-slug-action@1.1.0 - uses: rlespinasse/github-slug-action@3.1.0
- name: Cleanup - name: Cleanup
continue-on-error: true
uses: thecodingmachine/deeployer-cleanup-action@master uses: thecodingmachine/deeployer-cleanup-action@master
env: env:
KUBE_CONFIG_FILE: ${{ secrets.KUBE_CONFIG_FILE }} KUBE_CONFIG_FILE: ${{ secrets.KUBE_CONFIG_FILE }}
with: with:
# FIXME: we are not using ${{ env.GITHUB_REF_SLUG }} that resolves to master BUT! we are not using a slugified namespace namespace: workadventure-${{ env.GITHUB_HEAD_REF_SLUG }}
# so complex namespace names will not be treated correctly
namespace: workadventure-${{ github.event.ref }}

View File

@ -3,8 +3,11 @@
name: "Continuous Integration" name: "Continuous Integration"
on: on:
- "pull_request" push:
- "push" branches:
- master
- develop
pull_request:
jobs: jobs:

24
CHANGELOG.md Normal file
View File

@ -0,0 +1,24 @@
## 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
* Maps can now contain "group" layers (layers that contain other layers) - #899 #779 (@Lurkars @moufmouf)
### Updates
### Bug Fixes

View File

@ -20,7 +20,7 @@ Install Docker.
Run: Run:
``` ```
docker-compose up docker-compose up -d
``` ```
The environment will start. The environment will start.

View File

@ -1,8 +1,8 @@
{ {
local env = std.extVar("env"), local env = std.extVar("env"),
local namespace = env.GITHUB_REF_SLUG, local namespace = env.DEPLOY_REF,
local tag = namespace, local tag = namespace,
local url = if namespace == "master" then "workadventu.re" else namespace+".workadventure.test.thecodingmachine.com", local url = if namespace == "master" then "workadventu.re" else namespace+".test.workadventu.re",
// develop branch does not use admin because of issue with SSL certificate of admin as of now. // develop branch does not use admin because of issue with SSL certificate of admin as of now.
local adminUrl = if namespace == "master" || namespace == "develop" || std.startsWith(namespace, "admin") then "https://"+url else null, local adminUrl = if namespace == "master" || namespace == "develop" || std.startsWith(namespace, "admin") then "https://"+url else null,
"$schema": "https://raw.githubusercontent.com/thecodingmachine/deeployer/master/deeployer.schema.json", "$schema": "https://raw.githubusercontent.com/thecodingmachine/deeployer/master/deeployer.schema.json",

View File

@ -30,7 +30,8 @@ services:
UPLOADER_URL: /uploader UPLOADER_URL: /uploader
ADMIN_URL: /admin ADMIN_URL: /admin
MAPS_URL: /maps MAPS_URL: /maps
STARTUP_COMMAND_1: yarn install STARTUP_COMMAND_1: ./templater.sh
STARTUP_COMMAND_2: yarn install
TURN_SERVER: "turn:localhost:3478,turns:localhost:5349" TURN_SERVER: "turn:localhost:3478,turns:localhost:5349"
# Use TURN_USER/TURN_PASSWORD if your Coturn server is secured via hard coded credentials. # Use TURN_USER/TURN_PASSWORD if your Coturn server is secured via hard coded credentials.
# Advice: you should instead use Coturn REST API along the TURN_STATIC_AUTH_SECRET in the Back container # Advice: you should instead use Coturn REST API along the TURN_STATIC_AUTH_SECRET in the Back container
@ -152,23 +153,6 @@ services:
- "traefik.http.routers.uploader-ssl.tls=true" - "traefik.http.routers.uploader-ssl.tls=true"
- "traefik.http.routers.uploader-ssl.service=uploader" - "traefik.http.routers.uploader-ssl.service=uploader"
website:
image: thecodingmachine/nodejs:12-apache
environment:
STARTUP_COMMAND_1: npm install
STARTUP_COMMAND_2: npm run watch &
APACHE_DOCUMENT_ROOT: dist/
volumes:
- ./website:/var/www/html
labels:
- "traefik.http.routers.website.rule=Host(`workadventure.localhost`)"
- "traefik.http.routers.website.entryPoints=web"
- "traefik.http.services.website.loadbalancer.server.port=80"
- "traefik.http.routers.website-ssl.rule=Host(`workadventure.localhost`)"
- "traefik.http.routers.website-ssl.entryPoints=websecure"
- "traefik.http.routers.website-ssl.tls=true"
- "traefik.http.routers.website-ssl.service=website"
messages: messages:
#image: thecodingmachine/nodejs:14 #image: thecodingmachine/nodejs:14
image: thecodingmachine/workadventure-back-base:latest image: thecodingmachine/workadventure-back-base:latest

View File

@ -48,20 +48,27 @@
<div id="activeCam" class="activeCam"> <div id="activeCam" class="activeCam">
<div id="div-myCamVideo" class="video-container"> <div id="div-myCamVideo" class="video-container">
<video id="myCamVideo" autoplay muted></video> <video id="myCamVideo" autoplay muted></video>
<div id="mySoundMeter" class="sound-progress">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div> </div>
</div> </div>
<div class="btn-cam-action"> <div class="btn-cam-action">
<div id="btn-micro" class="btn-micro"> <div id="btn-monitor" class="btn-monitor">
<img id="microphone" src="resources/logos/microphone.svg"> <img id="monitor" src="resources/logos/monitor.svg">
<img id="microphone-close" src="resources/logos/microphone-close.svg"> <img id="monitor-close" src="resources/logos/monitor-close.svg">
</div> </div>
<div id="btn-video" class="btn-video"> <div id="btn-video" class="btn-video">
<img id="cinema" src="resources/logos/cinema.svg"> <img id="cinema" src="resources/logos/cinema.svg">
<img id="cinema-close" src="resources/logos/cinema-close.svg"> <img id="cinema-close" src="resources/logos/cinema-close.svg">
</div> </div>
<div id="btn-monitor" class="btn-monitor"> <div id="btn-micro" class="btn-micro">
<img id="monitor" src="resources/logos/monitor.svg"> <img id="microphone" src="resources/logos/microphone.svg">
<img id="monitor-close" src="resources/logos/monitor-close.svg"> <img id="microphone-close" src="resources/logos/microphone-close.svg">
</div> </div>
</div> </div>

View File

@ -0,0 +1,160 @@
<style>
*{
font-family: PixelFont-7,monospace!important;
}
#customizeScene {
background: #0000;
/*border: 1px solid #ebeeee;*/
border-radius: 6px;
margin: 10px auto 0;
color: #ebeeee;
width: 42vw;
height: 48vh;
/*max-width: 300px;
max-height: 48vh;*/
overflow: hidden;
}
#customizeScene h1 {
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
border-bottom: 1px solid #a6abaf;
border-radius: 6px 6px 0 0;
box-sizing: border-box;
color: #727678;
display: block;
height: 43px;
padding-top: 10px;
margin: 0;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
}
#customizeScene input {
font-size: 70%;
background: linear-gradient(top, #d6d7d7, #dee0e0);
border: 1px solid #a1a3a3;
border-radius: 4px;
box-shadow: 0 1px #fff;
box-sizing: border-box;
color: #696969;
height: 30px;
transition: box-shadow 0.3s;
width: 100%;
text-align: center;
}
#customizeScene section {
margin: 10px;
}
#customizeScene section.action {
text-align: center;
position: sticky;
bottom: 0;
top: 100%;
}
#customizeScene section.action.action-move {
top: 55%;
}
#customizeScene button {
margin: 2px 10px;
background-color: black;;
color: #ebeeee;
border-radius: 7px;
padding-bottom: 4px;
}
#customizeScene button#customizeSceneFormCancel {
background-color: #aca6a600;
color: #292929;
}
#customizeScene section h6,
#customizeScene section h5{
margin: 1px;
}
#customizeScene section.text-center{
text-align: center;
}
#customizeScene section a{
font-size: 14px;
text-decoration: underline;
color: #ebeeee;
}
#customizeScene section a:hover{
font-weight: 700;
}
#customizeScene section p{
text-align: left;
font-size: 8px;
margin: 10px 10px;
}
#customizeScene section p.err{
color: red;
text-align: center;
}
#customizeScene section p.info{
display: none;
text-align: center;
}
#customizeScene section input#customizeSceneLink{
background-color: #a1a3a3;
}
#customizeScene section button.customizeSceneButton{
position: absolute;
margin: 0;
top: -8vh;
font-size: 10px;
padding: 2px 4px;
}
#customizeScene section button.customizeSceneButton#customizeSceneButtonLeft{
left: 0vw;
}
#customizeScene section button.customizeSceneButton#customizeSceneButtonRight{
right: 0vw;
}
#customizeScene section button.customizeSceneButton#customizeSceneButtonUp{
left: calc(2vw + 40px);
transform: rotate(90deg);
margin-top: -20px;
}
#customizeScene section button.customizeSceneButton#customizeSceneButtonDown{
right: calc(2vw + 40px);
transform: rotate(90deg);
margin-top: 20px;
}
#customizeScene section.action img{
width: 8px;
height: 8px;
}
#customizeScene section.action a#customizeSceneFormBack img{
margin-top: -2px;
}
#customizeScene section.action button#customizeSceneFormSubmit img{
transform: rotate(180deg);
}
@media only screen and (max-width: 600px) {
#customizeScene {
max-width: 160px;
overflow-y: scroll;
}
}
@media only screen and (max-height: 400px) {
#customizeScene section.action {
top: 92%;
}
#customizeScene section.action.action-move {
top: 80%;
}
}
</style>
<form id="customizeScene" hidden>
<section class="text-center">
<h5>Custom your WOKA</h3>
</section>
<section class="action action-move">
<button class="customizeSceneButton" id="customizeSceneButtonLeft"> < </button>
<button class="customizeSceneButton" id="customizeSceneButtonRight"> > </button>
<!--<button class="customizeSceneButton" id="customizeSceneButtonUp"> < </button>
<button class="customizeSceneButton" id="customizeSceneButtonDown"> > </button>-->
</section>
<section class="action">
<a type="submit" id="customizeSceneFormBack">Back <img src="resources/objects/arrow_up.png"/></a>
<button type="submit" id="customizeSceneFormSubmit">Next <img src="resources/objects/arrow_up.png"/></button>
</section>
</form>

View File

@ -0,0 +1,129 @@
<style>
*{
font-family: PixelFont-7,monospace!important;
}
#enableCameraScene {
background: #000000;
/*border: 1px solid #ebeeee;*/
border-radius: 6px;
margin: 20px auto 0;
color: #ebeeee;
max-height: 48vh;
width: 42vw;
max-width: 300px;
overflow: hidden;
}
#enableCameraScene h1 {
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
border-bottom: 1px solid #a6abaf;
border-radius: 6px 6px 0 0;
box-sizing: border-box;
color: #727678;
display: block;
height: 43px;
padding-top: 10px;
margin: 0;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
}
#enableCameraScene input {
font-size: 70%;
background: linear-gradient(top, #d6d7d7, #dee0e0);
border: 1px solid #a1a3a3;
border-radius: 4px;
box-shadow: 0 1px #fff;
box-sizing: border-box;
color: #696969;
height: 30px;
transition: box-shadow 0.3s;
width: 100%;
text-align: center;
}
#enableCameraScene section.title {
position: absolute;
top: 1vh;
width: 100%;
}
#enableCameraScene section.action{
text-align: center;
margin: 0;
position: absolute;
top: 40vh;
width: 100%;
}
#enableCameraScene button {
margin: 10px;
background-color: black;;
color: #ebeeee;
border-radius: 7px;
padding-bottom: 4px;
}
#enableCameraScene button#enableCameraSceneFormCancel {
background-color: #c7c7c700;
color: #292929;
}
#enableCameraScene section h6,
#enableCameraScene section h5{
margin: 1px;
}
#enableCameraScene section.text-center{
text-align: center;
}
#enableCameraScene section a{
font-size: 8px;
text-decoration: underline;
color: #ebeeee;
}
#enableCameraScene section a:hover{
font-weight: 700;
}
#enableCameraScene section p{
text-align: left;
font-size: 8px;
margin: 10px 10px;
}
#enableCameraScene section p.err{
color: red;
text-align: center;
}
#enableCameraScene section p.info{
display: none;
text-align: center;
}
#enableCameraScene section input#enableCameraSceneLink{
background-color: #a1a3a3;
}
#enableCameraScene section img{
width: 160px;
margin: 20px 0;
}
/*@media only screen and (max-width: 800px),
only screen and (max-height: 600px) {
#enableCameraScene{
overflow-y: scroll;
}
}*/
</style>
<form id="enableCameraScene" hidden>
<!-- FIX me -->
<section class="title text-center">
<h5>Turn on your camera and microphone</h5>
</section>
<!--<section class="text-center">
<video id="myCamVideoSetup" autoplay muted></video>
</section>
<section class="text-center">
<h5>Select your camera</h3>
<select id="camera">
</select>
</section>
<section class="text-center">
<h5>Select your michrophone</h3>
<select id="michrophone">
</select>
</section>-->
<section class="action">
<button type="submit" id="enableCameraSceneFormSubmit">Let's go!</button>
</section>
</form>

View File

@ -0,0 +1,134 @@
<style>
*{
font-family: PixelFont-7,monospace!important;
}
#selectCompanionScene {
background: #0000;
/*border: 1px solid #ebeeee;*/
border-radius: 6px;
margin: 10px auto 0;
color: #ebeeee;
max-height: 40vh;
max-width: 300px;
width: 40vw;
overflow: hidden;
}
#selectCompanionScene h1 {
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
border-bottom: 1px solid #a6abaf;
border-radius: 6px 6px 0 0;
box-sizing: border-box;
color: #727678;
display: block;
height: 43px;
padding-top: 10px;
margin: 0;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
}
#selectCompanionScene input {
font-size: 70%;
background: linear-gradient(top, #d6d7d7, #dee0e0);
border: 1px solid #a1a3a3;
border-radius: 4px;
box-shadow: 0 1px #fff;
box-sizing: border-box;
color: #696969;
height: 30px;
transition: box-shadow 0.3s;
width: 100%;
text-align: center;
}
#selectCompanionScene section {
margin: 10px;
}
#selectCompanionScene section.action {
text-align: center;
margin: 0;
margin-top: 20vh;
}
#selectCompanionScene button {
margin: 10px 4px;
background-color: black;;
color: #ebeeee;
border-radius: 7px;
padding-bottom: 4px;
width: 100px;
}
#selectCompanionScene button#selectCompanionSceneFormCancel {
background-color: #aca6a600;
color: #292929;
}
#selectCompanionScene section h6,
#selectCompanionScene section h5{
margin: 1px;
}
#selectCompanionScene section.text-center{
text-align: center;
}
#selectCompanionScene section a{
font-size: 14px;
text-decoration: underline;
color: #ebeeee;
}
#selectCompanionScene section a:hover{
font-weight: 700;
}
#selectCompanionScene section p{
text-align: left;
font-size: 8px;
margin: 10px 10px;
}
#selectCompanionScene section p.err{
color: red;
text-align: center;
}
#selectCompanionScene section p.info{
display: none;
text-align: center;
}
#selectCompanionScene section input#selectCompanionSceneLink{
background-color: #a1a3a3;
}
#selectCompanionScene section img{
width: 160px;
margin: 20px 0;
}
#selectCompanionScene section button.selectCharacterButton{
position: absolute;
top: 20vh;
margin: 0;
width: 25px;
}
#selectCompanionScene section button.selectCharacterButton#selectCharacterButtonLeft{
left: 1vw;
}
#selectCompanionScene section button.selectCharacterButton#selectCharacterButtonRight{
right: 1vw;
}
#selectCompanionScene section button#selectCompanionSceneFormCustomYourOwnSubmit{
font-size: 14px;
width: auto;
margin-top: -2px;
background-color: #ffd700;
color: black;
}
@media only screen and (max-width: 800px),
only screen and (max-height: 600px) {
#selectCompanionScene{
overflow-y: scroll;
}
}
</style>
<form id="selectCompanionScene" hidden>
<section class="text-center">
<h5>Select your WOKA</h5>
<button class="selectCharacterButton" id="selectCharacterButtonLeft"> < </button>
<button class="selectCharacterButton" id="selectCharacterButtonRight"> > </button>
</section>
<section class="action">
<a herf="#" id="selectCompanionSceneFormBack">No companion</a>
<button type="submit" id="selectCompanionSceneFormSubmit">Continue</button>
</section>
</form>

View File

@ -1,4 +1,10 @@
<style> <style>
*{
font-family: PixelFont-7,monospace!important;
}
#gameMenu main{
margin-top: 15px;
}
#gameMenu button { #gameMenu button {
background-color: black; background-color: black;
color: white; color: white;
@ -16,6 +22,21 @@
width: 32px; width: 32px;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('/resources/logos/cursor_pointer.png'), pointer;
} }
@media only screen and (max-height: 700px) {
#gameMenu main {
display: flex;
flex-direction: row;
align-items: flex-end;
flex-wrap: wrap;
margin-top: 0;
}
#gameMenu section{
margin: 2px;
}
section#socialLinks{
position: relative;
}
}
</style> </style>
<div id="gameMenu" hidden> <div id="gameMenu" hidden>

View File

@ -1,10 +1,12 @@
<style> <style>
*{
font-family: PixelFont-7,monospace!important;
}
#menuIcon button { #menuIcon button {
background-color: black; background-color: black;
color: white; color: white;
border-radius: 7px; border-radius: 7px;
height: 28px; padding: 2px 8px;
width: 34px;
} }
#menuIcon button img{ #menuIcon button img{
width: 14px; width: 14px;
@ -14,6 +16,11 @@
#menuIcon section { #menuIcon section {
margin: 10px; margin: 10px;
} }
@media only screen and (max-height: 700px) {
#menuIcon section {
margin: 2px;
}
}
</style> </style>
<main id="menuIcon" hidden> <main id="menuIcon" hidden>
<section> <section>

View File

@ -1,11 +1,14 @@
<style> <style>
*{
font-family: PixelFont-7,monospace!important;
}
#gameQuality { #gameQuality {
background: #eceeee; background: #eceeee;
border: 1px solid #42464b; border: 1px solid #42464b;
border-radius: 6px; border-radius: 6px;
height: 257px;
margin: 20px auto 0; margin: 20px auto 0;
width: 298px; width: 50vw;
max-width: 300px;
} }
#gameQuality .cautiousText { #gameQuality .cautiousText {
font-size: 50%; font-size: 50%;
@ -33,7 +36,7 @@
color: #696969; color: #696969;
height: 30px; height: 30px;
transition: box-shadow 0.3s; transition: box-shadow 0.3s;
width: 240px; width: 100%;
} }
#gameQuality section { #gameQuality section {
margin: 10px; margin: 10px;
@ -42,12 +45,11 @@
text-align: center; text-align: center;
} }
#gameQuality button { #gameQuality button {
margin-top: 10px; margin: 10px;
background-color: black; background-color: black;
color: white; color: white;
border-radius: 7px; border-radius: 7px;
padding-bottom: 4px; padding-bottom: 4px;
width: 60px;
} }
#gameQuality button#gameQualityFormCancel { #gameQuality button#gameQualityFormCancel {
background-color: #c7c7c700; background-color: #c7c7c700;
@ -57,7 +59,7 @@
<form id="gameQuality" hidden> <form id="gameQuality" hidden>
<section> <section>
<h3>Game quality</h3> <h5>Game quality</h3>
<p class="cautiousText">(Editing these settings will restart the game)</p> <p class="cautiousText">(Editing these settings will restart the game)</p>
<select id="select-game-quality"> <select id="select-game-quality">
<option value="120">High video quality (120 fps)</option> <option value="120">High video quality (120 fps)</option>
@ -67,7 +69,7 @@
</select> </select>
</section> </section>
<section> <section>
<h3>Video quality</h3> <h5>Video quality</h3>
<select id="select-video-quality"> <select id="select-video-quality">
<option value="30">High video quality (30 fps)</option> <option value="30">High video quality (30 fps)</option>
<option value="20">Medium video quality (20 fps, recommended)</option> <option value="20">Medium video quality (20 fps, recommended)</option>

View File

@ -1,4 +1,7 @@
<style> <style>
*{
font-family: PixelFont-7,monospace!important;
}
#gameReport { #gameReport {
background: #eceeee; background: #eceeee;
border: 1px solid #42464b; border: 1px solid #42464b;

View File

@ -1,11 +1,14 @@
<style> <style>
*{
font-family: PixelFont-7,monospace!important;
}
#gameShare { #gameShare {
background: #eceeee; background: #eceeee;
border: 1px solid #42464b; border: 1px solid #42464b;
border-radius: 6px; border-radius: 6px;
margin: 20px auto 0; margin: 20px auto 0;
width: 298px; width: 50vw;
height: 160px; max-width: 400px;
} }
#gameShare h1 { #gameShare h1 {
background-image: linear-gradient(top, #f1f3f3, #d4dae0); background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@ -40,7 +43,7 @@
margin: 0; margin: 0;
} }
#gameShare button { #gameShare button {
margin-top: 10px; margin: 10px;
background-color: black; background-color: black;
color: white; color: white;
border-radius: 7px; border-radius: 7px;
@ -66,7 +69,7 @@
} }
#gameShare section p{ #gameShare section p{
font-size: 8px; font-size: 8px;
margin: 0px 70px; margin: 0;
} }
#gameShare section p.err{ #gameShare section p.err{
color: red; color: red;

View File

@ -1,11 +1,17 @@
<style> <style>
*{
font-family: PixelFont-7,monospace!important;
}
#helpCameraSettings { #helpCameraSettings {
background: #eceeee; background: #eceeee;
border: 1px solid #42464b; border: 1px solid #42464b;
border-radius: 6px; border-radius: 6px;
margin: 10px auto 0; margin: 25px auto 0;
width: 400px; width: 400px;
height: 370px; max-height: calc(48vh - 50px);
max-width: 48vw;
overflow: hidden;
overflow-y: scroll;
} }
#helpCameraSettings h1 { #helpCameraSettings h1 {
background-image: linear-gradient(top, #f1f3f3, #d4dae0); background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@ -20,18 +26,6 @@
text-align: center; text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
} }
#helpCameraSettings input {
font-size: 70%;
background: linear-gradient(top, #d6d7d7, #dee0e0);
border: 1px solid #a1a3a3;
border-radius: 4px;
box-shadow: 0 1px #fff;
box-sizing: border-box;
color: #696969;
height: 30px;
transition: box-shadow 0.3s;
width: 100%;
}
#helpCameraSettings section { #helpCameraSettings section {
margin: 10px; margin: 10px;
} }
@ -40,7 +34,7 @@
margin: 0; margin: 0;
} }
#helpCameraSettings button { #helpCameraSettings button {
margin-top: 10px; margin: 10px 4px;
background-color: black; background-color: black;
color: white; color: white;
border-radius: 7px; border-radius: 7px;
@ -51,9 +45,8 @@
color: #292929; color: #292929;
} }
#helpCameraSettings section a{ #helpCameraSettings section a{
text-align: center;
font-size: 12px; font-size: 12px;
margin: 0 6px; text-decoration: underline;
color: black; color: black;
} }
#helpCameraSettings section h6, #helpCameraSettings section h6,
@ -67,6 +60,9 @@
font-size: 8px; font-size: 8px;
margin: 0px 20px; margin: 0px 20px;
} }
#helpCameraSettings section p a{
font-size: 8px;
}
#helpCameraSettings section p.err{ #helpCameraSettings section p.err{
color: #ff0000; color: #ff0000;
} }
@ -81,6 +77,12 @@
width: 200px; width: 200px;
margin-top: 10px; margin-top: 10px;
} }
@media only screen and (max-width: 800px),
only screen and (max-height: 600px) {
#helpCameraSettings{
overflow-y: scroll;
}
}
</style> </style>
<form id="helpCameraSettings" hidden> <form id="helpCameraSettings" hidden>
@ -96,8 +98,12 @@
<p>If you prefer to continue without allowing camera and microphone access, click on Continue</p> <p>If you prefer to continue without allowing camera and microphone access, click on Continue</p>
<p id='browserHelpSetting'></p> <p id='browserHelpSetting'></p>
</section> </section>
<!--<section class="text-center">
<p>If your problem persist, please contact us: <a id="mailto" href="mailto:workadventure@thecodingmachine.com?subject=Support camera and microphone settings" target="_blank"> workadventure@thecodingmachine.com</a>.</p>
</section>-->
</section>
<section class="action"> <section class="action">
<button type="submit" id="helpCameraSettingsFormRefresh">Refresh</button> <a href="#" id="helpCameraSettingsFormRefresh">Refresh</a>
<button type="submit" id="helpCameraSettingsFormContinue">Continue</button> <button type="submit" id="helpCameraSettingsFormContinue">Continue</button>
</section> </section>
</form> </form>

View File

@ -0,0 +1,120 @@
<style>
*{
font-family: PixelFont-7,monospace!important;
}
#loginScene {
background: #000000;
/*border: 1px solid #ebeeee;*/
border-radius: 6px;
margin: 20px auto 0;
width: 90%;
max-width: 200px;
color: #ebeeee;
max-height: 40vh;
overflow: hidden;
}
#loginScene h1 {
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
border-bottom: 1px solid #a6abaf;
border-radius: 6px 6px 0 0;
box-sizing: border-box;
color: #727678;
display: block;
height: 43px;
padding-top: 10px;
margin: 0;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
}
#loginScene input {
font-size: 70%;
background: linear-gradient(top, #d6d7d7, #dee0e0);
border: 1px solid #a1a3a3;
border-radius: 4px;
box-shadow: 0 1px #fff;
box-sizing: border-box;
color: #696969;
height: 30px;
transition: box-shadow 0.3s;
width: 100%;
text-align: center;
}
#loginScene section {
margin: 10px;
}
#loginScene section.action{
text-align: center;
margin: 0;
}
#loginScene button {
margin: 10px;
background-color: black;;
color: #ebeeee;
border-radius: 7px;
padding-bottom: 4px;
width: 100px;
}
#loginScene button#loginSceneFormCancel {
background-color: #c7c7c700;
color: #292929;
}
#loginScene section h6,
#loginScene section h5{
margin: 1px;
}
#loginScene section.text-center{
text-align: center;
}
#loginScene section a{
font-size: 8px;
text-decoration: underline;
color: #ebeeee;
}
#loginScene section a:hover{
font-weight: 700;
}
#loginScene section p{
text-align: left;
font-size: 8px;
margin: 10px 10px;
}
#loginScene section p.err{
color: red;
text-align: center;
}
#loginScene section p.info{
display: none;
text-align: center;
}
#loginScene section input#loginSceneLink{
background-color: #a1a3a3;
}
#loginScene section img{
width: 160px;
margin: 20px 0;
}
@media only screen and (max-width: 800px),
only screen and (max-height: 600px) {
#loginScene{
overflow-y: scroll;
}
}
</style>
<form id="loginScene" hidden>
<section class="text-center">
<img src="resources/logos/logo.png">
</section>
<section class="text-center">
<h5>Enter your name</h5>
<p class="info">9 chars maximum</p>
<p class="err" id="errorLoginScene"></p>
</section>
<section>
<input type="text" name="email" id="loginSceneName">
<p>By continuing, you are agreeing our <a href="https://workadventu.re/terms-of-use" target="_blank">terms of use</a>, <a href="https://workadventu.re/privacy-policy" target="_blank">privacy policy</a> and <a href="https://workadventu.re/cookie-policy" target="_blank">cookie policy</a>.</p>
</section>
<section class="action">
<button type="submit" id="loginSceneFormSubmit">Continue</button>
</section>
</form>

View File

@ -0,0 +1,142 @@
<style>
*{
font-family: PixelFont-7,monospace!important;
}
#selectCharacterScene {
background: #0000;
/*border: 1px solid #ebeeee;*/
border-radius: 6px;
margin: 10px auto 0;
color: #ebeeee;
max-height: 48vh;
max-width: 300px;
width: 40vw;
overflow: hidden;
}
#selectCharacterScene h1 {
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
border-bottom: 1px solid #a6abaf;
border-radius: 6px 6px 0 0;
box-sizing: border-box;
color: #727678;
display: block;
height: 43px;
padding-top: 10px;
margin: 0;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
}
#selectCharacterScene input {
font-size: 70%;
background: linear-gradient(top, #d6d7d7, #dee0e0);
border: 1px solid #a1a3a3;
border-radius: 4px;
box-shadow: 0 1px #fff;
box-sizing: border-box;
color: #696969;
height: 30px;
transition: box-shadow 0.3s;
width: 100%;
text-align: center;
}
#selectCharacterScene section {
margin: 10px;
}
#selectCharacterScene section.action {
text-align: center;
margin: 0;
margin-top: 28vh;
}
#selectCharacterScene button {
margin: 10px 0px;
background-color: black;;
color: #ebeeee;
border-radius: 7px;
padding-bottom: 4px;
width: 100px;
}
#selectCharacterScene button#selectCharacterSceneFormCancel {
background-color: #aca6a600;
color: #292929;
}
#selectCharacterScene section h6,
#selectCharacterScene section h5{
margin: 1px;
}
#selectCharacterScene section.text-center{
text-align: center;
}
#selectCharacterScene section a{
font-size: 8px;
text-decoration: underline;
color: #ebeeee;
}
#selectCharacterScene section a:hover{
font-weight: 700;
}
#selectCharacterScene section p{
text-align: left;
font-size: 8px;
margin: 10px 10px;
}
#selectCharacterScene section p.err{
color: red;
text-align: center;
}
#selectCharacterScene section p.info{
display: none;
text-align: center;
}
#selectCharacterScene section input#selectCharacterSceneLink{
background-color: #a1a3a3;
}
#selectCharacterScene section img{
width: 160px;
margin: 20px 0;
}
#selectCharacterScene section button.selectCharacterButton{
position: absolute;
top: 20vh;
margin: 0;
width: 25px;
}
#selectCharacterScene section button.selectCharacterButton#selectCharacterButtonLeft{
display: none;
left: 1vw;
}
#selectCharacterScene section button.selectCharacterButton#selectCharacterButtonRight{
display: none;
right: 1vw;
}
#selectCharacterScene section button#selectCharacterSceneFormCustomYourOwnSubmit{
font-size: 14px;
width: auto;
margin-top: -2px;
background-color: #ffd700;
color: black;
}
@media only screen and (max-width: 800px),
only screen and (max-height: 600px) {
#selectCharacterScene{
overflow-y: scroll;
}
#selectCharacterScene section button.selectCharacterButton#selectCharacterButtonRight{
display: block;
}
#selectCharacterScene section button.selectCharacterButton#selectCharacterButtonLeft{
display: block;
}
}
</style>
<form id="selectCharacterScene" hidden>
<section class="text-center">
<h5>Select your WOKA</h5>
<button class="selectCharacterButton" id="selectCharacterButtonLeft"> < </button>
<button class="selectCharacterButton" id="selectCharacterButtonRight"> > </button>
</section>
<section class="action">
<button type="submit" id="selectCharacterSceneFormSubmit">Continue</button>
<button type="submit" id="selectCharacterSceneFormCustomYourOwnSubmit">Custom your WOKA</button>
</section>
</form>

View File

@ -1,4 +1,7 @@
<style> <style>
*{
font-family: PixelFont-7,monospace!important;
}
#warningMain { #warningMain {
border-radius: 5px; border-radius: 5px;
height: 100px; height: 100px;

View File

@ -1,44 +1 @@
<?xml version="1.0" encoding="utf-8"?> <svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 469.33 426.67"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M426.67,21.33h-384A42.66,42.66,0,0,0,0,64V320a42.66,42.66,0,0,0,42.67,42.67H192v42.66H149.33V448H320V405.33H277.33V362.67H426.67A42.66,42.66,0,0,0,469.33,320V64A42.66,42.66,0,0,0,426.67,21.33Zm0,298.67h-384V64h384Z" transform="translate(0 -21.33)"/><path class="cls-1" d="M267.2,127.15V86.26a8.14,8.14,0,0,1,14.18-5.44l73.2,81.34a8.12,8.12,0,0,1,.25,10.57l-73.2,89.47a8.14,8.14,0,0,1-14.43-5.13V216.54c-64.25,2.09-104.35,29.55-122.42,83.77a8.13,8.13,0,0,1-15.84-2.58C128.94,202,186.59,131.59,267.2,127.15Zm8.14,73a8.13,8.13,0,0,1,8.13,8.14v26l54.36-66.44-54.36-60.39v27.6a8.13,8.13,0,0,1-8.13,8.14c-63.93,0-111.77,44.24-125.87,111.73C175.65,218.53,217.8,200.13,275.34,200.13Z" transform="translate(0 -21.33)"/></svg>
<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 480" style="enable-background:new 0 0 512 480;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<path class="st0" d="M411.1,384.2c-12.2,0-24.3,0-36.5,0C259.6,257.6,144.5,130.9,29.5,4.3c11.4-0.8,22.9-1.6,34.3-2.4
C179.6,129.3,295.3,256.8,411.1,384.2z"/>
<g>
<path class="st0" d="M352,152.5c-8.8-8.7-34.2-31.6-74.5-38.1c-32.3-5.2-58.1,2.7-70,7.3C170.9,81.5,134.3,41.3,97.8,1
C220.4,1,343,1,465.6,1C427.7,51.5,389.8,102,352,152.5z"/>
<path class="st0" d="M511.5,338.3c0,4.7-0.8,12.2-4.7,20.2c-1.2,2.4-3.4,6.3-7.1,10.5c-4,4.4-7.9,7.1-10.2,8.5
c-5.6,3.5-10.7,4.9-13.5,5.6c-3.8,0.9-6.7,1-10.2,1.2c-3.6,0.2-5.3,0-13.1,0c-3,0-5.4,0-7,0C414.5,307,383.2,229.8,352,152.5
C402.9,62.7,448.7,1,465.6,1c7.5,0,14.3,2.3,14.3,2.3c14.5,4.8,22.3,15.8,23.6,17.8c7.4,10.8,8,21.7,8,25.9
C511.5,144.1,511.5,241.2,511.5,338.3z"/>
<path class="st0" d="M312.5,192c-5.2-5.2-15.6-14.1-31.4-19.4c-12.8-4.2-24-4.3-30.9-3.8c-6.2-7.1-12.4-14.2-18.6-21.3
c10.3-2.4,36.5-6.8,65.1,5.3c15.3,6.5,26.1,15.5,32.7,22.2C323.7,180.8,318.1,186.4,312.5,192z"/>
<path class="st0" d="M329.4,175.1c38.8,69.7,77.6,139.4,116.4,209.1c-50.3-55.4-100.6-110.8-151-166.2c6.9,2.9,14.9,0.7,19.2-5.2
c4.6-6.2,4-15.1-1.6-20.8C318.1,186.4,323.7,180.8,329.4,175.1z"/>
<path class="st0" d="M445.8,384.2L445.8,384.2c-38.8-69.7-77.6-139.4-116.4-209.1c5.3,4.9,12.9,6,18.9,2.7
c7.8-4.2,8.3-13.4,8.3-13.8C386.4,237.4,416.1,310.8,445.8,384.2z"/>
</g>
<path class="st0" d="M162.2,150.4C108.3,213,54.4,275.7,0.5,338.3c0-97.1,0-194.3,0-291.4c0-4,0.6-15.1,8.1-26
C16,10.2,25.7,5.8,29.5,4.3C73.7,53,118,101.7,162.2,150.4z"/>
<path class="st0" d="M199.5,192c-5.3-6-10.6-12-15.8-18C122.6,228.8,61.6,283.6,0.5,338.3c0,4.1,0.6,15.5,8.6,26.7
c1.7,2.4,9.6,12.9,24.1,17.2c5.3,1.6,10,1.9,13.1,1.9C97.5,320.2,148.5,256.1,199.5,192z"/>
<path class="st0" d="M84.7,384.2c-12.7,0-25.5,0-38.2,0c58.2-56.2,116.5-112.5,174.7-168.7c8.3,9.1,16.6,18.2,24.9,27.2
c-2.2,1.1-5.5,3-8.4,6.4c-3.1,3.7-4.2,7.3-4.4,7.8C231.3,262.4,194.5,295.2,84.7,384.2z"/>
<path class="st0" d="M46.4,384.2c-15.3-15.3-30.6-30.6-45.9-45.9C52.8,277.5,105.1,216.8,157.4,156c-3.7,6.7-2.2,15.1,3.5,20
c5.4,4.6,13.3,5.1,19.4,1C135.7,246.1,91.1,315.1,46.4,384.2z"/>
<path class="st0" d="M49.6,384.3c-1.1,0-2.1,0-3.2-0.1c50.1-62.9,100.2-125.8,150.3-188.7c-3.5,6.6-2.1,14.8,3.4,19.7
c5.8,5.2,14.8,5.3,21,0.3C164,271.7,106.8,328,49.6,384.3z"/>
<path class="st0" d="M374.6,384.2c-96.6,0-193.3,0-289.9,0C16.5,308,1.3,223,28.5,194.5C57,164.7,150.6,177,233.3,256.9
c-3.9,11.8,2,24.8,13.3,29.6c11,4.7,24,0.4,30.2-10C309.3,312.4,342,348.3,374.6,384.2z"/>
<path class="st0" d="M219.7,226.7"/>
<path class="st0" d="M368.9,480c-74.9,0-149.8,0-224.7,0c-8.8,0-16-7.2-16-16c0-8.8,7.2-16,16-16c74.9,0,149.9,0,224.8,0.1
c8.3,0.7,14.7,7.6,14.7,15.9C383.7,472.3,377.2,479.3,368.9,480z"/>
<rect x="208.1" y="384.2" class="st0" width="31.9" height="63.9"/>
<rect x="272" y="384.2" class="st0" width="32" height="63.9"/>
<path class="st0" d="M410.3,395.5"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 884 B

View File

@ -1,15 +1,24 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 480" style="enable-background:new 0 0 512 480;" xml:space="preserve"> viewBox="0 0 469.3 469.3" style="enable-background:new 0 0 469.3 469.3;" xml:space="preserve">
<style type="text/css"> <style type="text/css">
.st0{fill:#FFFFFF;} .st0{fill:#FFFFFF;}
.st1{opacity:0.9;fill:#FFFFFF;stroke:#FFFFFF;stroke-width:15;stroke-miterlimit:10;enable-background:new ;}
</style> </style>
<path class="st0" d="M466,0H46C20.6,0,0,20.6,0,46v292c0,25.4,20.6,46,46,46h162v64h-64c-8.8,0-16,7.2-16,16s7.2,16,16,16h224 <g>
c8.8,0,16-7.2,16-16s-7.2-16-16-16h-64v-64h162c25.4,0,46-20.6,46-46V46C512,20.6,491.4,0,466,0z M232,264c0-13.3,10.7-24,24-24 <g>
c13.3,0,24,10.7,24,24s-10.7,24-24,24C242.7,288,232,277.3,232,264z M272,448h-32v-64h32V448z M312.6,214.1 <path class="st0" d="M426.7,21.3h-384C19.1,21.3,0,40.4,0,64v256c0,23.6,19.1,42.7,42.7,42.7H192v42.7h-42.7V448H320v-42.7h-42.7
c-6.2,6.2-16.4,6.2-22.6,0c-18.7-18.8-49.1-18.8-67.9,0c0,0,0,0,0,0c-6.4,6.1-16.5,5.8-22.6-0.6c-5.9-6.2-5.9-15.9,0-22 v-42.7h149.3c23.6,0,42.7-19.1,42.7-42.7V64C469.3,40.4,450.2,21.3,426.7,21.3z M426.7,320h-384V64h384V320z"/>
c31.2-31.2,81.9-31.2,113.1,0c0,0,0,0,0,0C318.8,197.7,318.8,207.8,312.6,214.1z M352.2,174.5c-6.2,6.2-16.4,6.3-22.6,0c0,0,0,0,0,0 </g>
c-40.6-40.6-106.4-40.6-147.1,0c-6.2,6.3-16.4,6.3-22.6,0c-6.3-6.2-6.3-16.4,0-22.6c53.1-53.1,139.2-53.1,192.3,0c0,0,0,0,0,0 </g>
C358.4,158.1,358.4,168.2,352.2,174.5C352.2,174.5,352.2,174.5,352.2,174.5L352.2,174.5z"/> <g>
<g>
<path class="st0" d="M267.2,127.2V86.3c0-4.5,3.6-8.1,8.1-8.1c2.3,0,4.5,1,6,2.7l73.2,81.3c2.7,3,2.8,7.5,0.3,10.6l-73.2,89.5
c-2.8,3.5-8,4-11.4,1.1c-1.9-1.5-3-3.8-3-6.3v-40.5c-64.3,2.1-104.4,29.6-122.4,83.8c-1.1,3.3-4.2,5.6-7.7,5.6
c-0.4,0-0.9,0-1.3-0.1c-3.9-0.6-6.8-4-6.8-8C128.9,202,186.6,131.6,267.2,127.2z M275.3,200.1c4.5,0,8.1,3.6,8.1,8.1v26l54.4-66.4
l-54.4-60.4V135c0,4.5-3.6,8.1-8.1,8.1c-63.9,0-111.8,44.2-125.9,111.7C175.6,218.5,217.8,200.1,275.3,200.1z"/>
</g>
</g>
<path class="st1" d="M13.4,42.7C153.6,142.3,293.8,241.9,434,341.5"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 969 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -0,0 +1,49 @@
@media (max-aspect-ratio: 1/1) {
#main-container {
display: flex;
flex-direction: column-reverse;
}
#cowebsite {
left: 0;
top: 0;
width: 100%;
height: 50%;
display: flex;
flex-direction: column-reverse;
&.loading {
transform: translateY(-90%);
}
&.hidden {
transform: translateY(-100%);
}
main {
height: 100%;
}
aside {
height: 30px;
cursor: ns-resize;
flex-direction: column;
img {
cursor: ns-resize;
}
}
.top-right-btn {
&#cowebsite-close {
right: 0;
}
&#cowebsite-fullscreen {
left: 0;
}
}
}
}

View File

@ -87,51 +87,3 @@
} }
} }
} }
@media (max-aspect-ratio: 1/1) {
#main-container {
display: flex;
flex-direction: column-reverse;
}
#cowebsite {
left: 0;
top: 0;
width: 100%;
height: 50%;
display: flex;
flex-direction: column-reverse;
&.loading {
transform: translateY(-90%);
}
&.hidden {
transform: translateY(-100%);
}
main {
height: 100%;
}
aside {
height: 30px;
cursor: ns-resize;
flex-direction: column;
img {
cursor: ns-resize;
}
}
.top-right-btn {
&#cowebsite-close {
right: 0px;
}
&#cowebsite-fullscreen {
right: 25px;
}
}
}
}

View File

@ -1,2 +1,4 @@
@import "cowebsite.scss"; @import "cowebsite.scss";
@import "cowebsite-mobile.scss";
@import "style.css"; @import "style.css";
@import "mobile-style.scss";

View File

@ -0,0 +1,49 @@
@media screen and (max-width: 700px),
screen and (max-height: 700px){
video#myCamVideo {
width: 150px;
}
.sidebar {
width: 20%;
min-width: 200px;
position: absolute;
display: block;
right: 0;
height: 80%;
&> div {
max-height: 120px;
min-width: 200px;
}
.video-container{
min-width: 200px;
}
}
.btn-cam-action {
min-width: 150px;
&:hover{
transform: translateY(20px);
}
div {
margin: 0 1%;
&:hover {
background-color: #666;
}
margin-bottom: 30px;
}
}
.main-section {
position: absolute;
width: 100%;
min-width: 400px;
& > div {
z-index: 2;
}
}
}

View File

@ -53,6 +53,7 @@ body .message-info.warning{
padding-top: 32px; padding-top: 32px;
font-size: 28px; font-size: 28px;
color: white; color: white;
overflow: hidden;
} }
.video-container img{ .video-container img{
@ -97,7 +98,7 @@ body .message-info.warning{
} }
.video-container button.report:hover { .video-container button.report:hover {
width: 150px; width: 160px;
} }
.video-container button.report img{ .video-container button.report img{
@ -125,6 +126,7 @@ body .message-info.warning{
.video-container video{ .video-container video{
height: 100%; height: 100%;
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
} }
.video-container video:focus{ .video-container video:focus{
@ -138,8 +140,9 @@ body .message-info.warning{
#div-myCamVideo { #div-myCamVideo {
position: absolute; position: absolute;
right: 15px; right: 15px;
bottom: 15px; bottom: 30px;
border-radius: 15px 15px 15px 15px; border-radius: 15px 15px 15px 15px;
max-height: 20%;
} }
video#myCamVideo{ video#myCamVideo{
@ -151,28 +154,70 @@ video#myCamVideo{
/*height: 113px;*/ /*height: 113px;*/
} }
.sound-progress{
display: none;
position: absolute;
right: 14px;
top: calc(50% - 5px);
}
.sound-progress.active{
display: table-column;
}
.sound-progress span{
position: absolute;
color: black;
background-color: #00000020;
width: 5px;
height: 5px;
border-radius: 50%;
}
.sound-progress span.active{
background-color: #00c3ff66
}
.sound-progress span:nth-child(1){
top: calc(50% + 20px);
}
.sound-progress span:nth-child(2){
top: calc(50% + 10px);
}
.sound-progress span:nth-child(3){
top: calc(50% - 0px);
}
.sound-progress span:nth-child(4){
top: calc(50% - 10px);
}
.sound-progress span:nth-child(5){
top: calc(50% - 20px);
}
.btn-cam-action { .btn-cam-action {
pointer-events: all; pointer-events: all;
position: absolute; position: absolute;
bottom: 0px; display: inline-flex;
right: 0px; bottom: 10px;
width: 450px; right: 15px;
height: 150px; width: 15vw;
height: 40px;
text-align: center;
align-content: center;
align-items: center;
justify-content: center;
justify-items: center;
} }
/*btn animation*/ /*btn animation*/
.btn-cam-action div{ .btn-cam-action div{
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('/resources/logos/cursor_pointer.png'), pointer;
position: absolute; /*position: absolute;*/
border: solid 0px black; border: solid 0px black;
width: 44px; width: 44px;
height: 44px; height: 44px;
background: #666; background: #666;
box-shadow: 2px 2px 24px #444; box-shadow: 2px 2px 24px #444;
border-radius: 48px; border-radius: 48px;
transform: translateY(40px); transform: translateY(20px);
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
bottom: 20px; margin-bottom: 20px;
margin: 0 4%;
} }
.btn-cam-action div.disabled { .btn-cam-action div.disabled {
background: #d75555; background: #d75555;
@ -186,22 +231,22 @@ video#myCamVideo{
.btn-cam-action div:hover{ .btn-cam-action div:hover{
background: #407cf7; background: #407cf7;
box-shadow: 4px 4px 48px #666; box-shadow: 4px 4px 48px #666;
transition: 280ms; transition: 120ms;
} }
.btn-micro{ .btn-micro{
pointer-events: auto; pointer-events: auto;
transition: all .3s; transition: all .3s;
right: 44px; /*right: 44px;*/
} }
.btn-video{ .btn-video{
pointer-events: auto; pointer-events: auto;
transition: all .25s; transition: all .25s;
right: 134px; /*right: 134px;*/
} }
.btn-monitor{ .btn-monitor{
pointer-events: auto; pointer-events: auto;
transition: all .2s; transition: all .2s;
right: 224px; /*right: 224px;*/
} }
.btn-copy{ .btn-copy{
pointer-events: auto; pointer-events: auto;
@ -338,24 +383,6 @@ body {
} }
@media (max-aspect-ratio: 1/1) {
.game-overlay {
flex-direction: column;
}
.sidebar {
flex-direction: row;
align-items: flex-end;
}
.sidebar > div {
max-width: 21%;
}
.sidebar > div:hover {
max-width: 25%;
}
}
#game { #game {
width: 100%; width: 100%;
@ -530,7 +557,7 @@ input[type=range]:focus::-ms-fill-upper {
} }
.game-overlay video { .game-overlay video {
width: 100% width: 100%;
} }
.main-section { .main-section {
@ -546,6 +573,7 @@ input[type=range]:focus::-ms-fill-upper {
flex-basis: 96%; flex-basis: 96%;
transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s; transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('/resources/logos/cursor_pointer.png'), pointer;
pointer-events: auto;
/*flex-shrink: 2;*/ /*flex-shrink: 2;*/
} }
@ -557,7 +585,6 @@ input[type=range]:focus::-ms-fill-upper {
.sidebar { .sidebar {
flex: 0 0 25%; flex: 0 0 25%;
display: flex; display: flex;
pointer-events: none;
} }
.sidebar > div { .sidebar > div {
@ -565,12 +592,17 @@ input[type=range]:focus::-ms-fill-upper {
transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s; transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s;
cursor: url('/resources/logos/cursor_pointer.png'), pointer; cursor: url('/resources/logos/cursor_pointer.png'), pointer;
border-radius: 15px 15px 15px 15px; border-radius: 15px 15px 15px 15px;
pointer-events: auto;
} }
.sidebar > div:hover { .sidebar > div:hover {
margin: 0%; margin: 0%;
} }
.sidebar > div video {
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
}
/* Let's make sure videos are vertically centered if they need to be cropped */ /* Let's make sure videos are vertically centered if they need to be cropped */
.media-container { .media-container {
display: flex; display: flex;
@ -814,7 +846,7 @@ input[type=range]:focus::-ms-fill-upper {
right: 0; right: 0;
} }
.main-container .audio-playing img{ .main-container .audio-playing img{
width: 30px; /*width: 30px;*/
border-radius: 50%; border-radius: 50%;
background-color: #ffda01; background-color: #ffda01;
padding: 10px; padding: 10px;
@ -822,6 +854,7 @@ input[type=range]:focus::-ms-fill-upper {
.main-container .audio-playing p{ .main-container .audio-playing p{
color: white; color: white;
margin-left: 10px; margin-left: 10px;
margin-top: 14px;
} }
/* VIDEO QUALITY */ /* VIDEO QUALITY */
@ -1053,7 +1086,7 @@ div.modal-report-user{
.discussion .messages{ .discussion .messages{
position: absolute; position: absolute;
height: calc(100% - 360px); height: calc(100% - 390px);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
max-width: calc(100% - 40px); max-width: calc(100% - 40px);
@ -1134,17 +1167,34 @@ div.action{
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
} }
div.action.info,
div.action.warning,
div.action.danger{
transition: all 1s ease;
animation: mymove 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
div.action p.action-body{ div.action p.action-body{
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
padding: 10px; padding: 10px;
background-color: #2d2d2dba; background-color: #2d2d2dba;
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
max-width: 250px; max-width: 350px;
margin-left: calc(50% - 125px); margin-left: calc(50% - 175px);
border-radius: 15px; border-radius: 15px;
} }
div.action.warning p.action-body{
background-color: #ff9800eb;
color: #000;
}
div.action.danger p.action-body{
background-color: #da0000e3;
color: #000;
}
.popUpElement{ .popUpElement{
font-family: 'Press Start 2P'; font-family: 'Press Start 2P';
text-align: left; text-align: left;

View File

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

View File

@ -33,7 +33,7 @@
"phaser": "^3.54.0", "phaser": "^3.54.0",
"phaser3-rex-plugins": "^1.1.42", "phaser3-rex-plugins": "^1.1.42",
"queue-typescript": "^1.0.1", "queue-typescript": "^1.0.1",
"quill": "^1.3.7", "quill": "1.3.6",
"rxjs": "^6.6.3", "rxjs": "^6.6.3",
"simple-peer": "^9.6.2", "simple-peer": "^9.6.2",
"socket.io-client": "^2.3.0", "socket.io-client": "^2.3.0",

View File

@ -2,7 +2,6 @@ import {HtmlUtils} from "../WebRtc/HtmlUtils";
import {UserInputManager} from "../Phaser/UserInput/UserInputManager"; import {UserInputManager} from "../Phaser/UserInput/UserInputManager";
import {RoomConnection} from "../Connexion/RoomConnection"; import {RoomConnection} from "../Connexion/RoomConnection";
import {PlayGlobalMessageInterface} from "../Connexion/ConnexionModels"; import {PlayGlobalMessageInterface} from "../Connexion/ConnexionModels";
import {ADMIN_URL} from "../Enum/EnvironmentVariable";
import {AdminMessageEventTypes} from "../Connexion/AdminMessagesService"; import {AdminMessageEventTypes} from "../Connexion/AdminMessagesService";
export const CLASS_CONSOLE_MESSAGE = 'main-console'; export const CLASS_CONSOLE_MESSAGE = 'main-console';
@ -162,10 +161,11 @@ export class ConsoleGlobalMessageManager {
this.divMessageConsole.appendChild(section); this.divMessageConsole.appendChild(section);
(async () => { (async () => {
try{
// Start loading CSS // Start loading CSS
const cssPromise = ConsoleGlobalMessageManager.loadCss(); const cssPromise = ConsoleGlobalMessageManager.loadCss();
// Import quill // Import quill
const Quill:any = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any const {default: Quill}:any = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any
// Wait for CSS to be loaded // Wait for CSS to be loaded
await cssPromise; await cssPromise;
@ -198,6 +198,9 @@ export class ConsoleGlobalMessageManager {
toolbar: toolbarOptions toolbar: toolbarOptions
}, },
}); });
}catch(err){
console.error(err);
}
})(); })();
} }

View File

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

View File

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

View File

@ -5,6 +5,7 @@ export enum AdminMessageEventTypes {
admin = 'message', admin = 'message',
audio = 'audio', audio = 'audio',
ban = 'ban', ban = 'ban',
banned = 'banned',
} }
interface AdminMessageEvent { interface AdminMessageEvent {

View File

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

View File

@ -27,7 +27,8 @@ import {
SendJitsiJwtMessage, SendJitsiJwtMessage,
CharacterLayerMessage, CharacterLayerMessage,
PingMessage, PingMessage,
SendUserMessage, BanUserMessage SendUserMessage,
BanUserMessage
} from "../Messages/generated/messages_pb" } from "../Messages/generated/messages_pb"
import {UserSimplePeerInterface} from "../WebRtc/SimplePeer"; import {UserSimplePeerInterface} from "../WebRtc/SimplePeer";
@ -169,6 +170,9 @@ export class RoomConnection implements RoomConnection {
} else if (message.hasWorldfullmessage()) { } else if (message.hasWorldfullmessage()) {
worldFullMessageStream.onMessage(); worldFullMessageStream.onMessage();
this.closed = true; this.closed = true;
} else if (message.hasWorldconnexionmessage()) {
worldFullMessageStream.onMessage(message.getWorldconnexionmessage()?.getMessage());
this.closed = true;
}else if (message.hasWebrtcsignaltoclientmessage()) { }else if (message.hasWebrtcsignaltoclientmessage()) {
this.dispatch(EventMessage.WEBRTC_SIGNAL, message.getWebrtcsignaltoclientmessage()); this.dispatch(EventMessage.WEBRTC_SIGNAL, message.getWebrtcsignaltoclientmessage());
} else if (message.hasWebrtcscreensharingsignaltoclientmessage()) { } else if (message.hasWebrtcscreensharingsignaltoclientmessage()) {
@ -188,7 +192,7 @@ export class RoomConnection implements RoomConnection {
} else if (message.hasSendusermessage()) { } else if (message.hasSendusermessage()) {
adminMessagesService.onSendusermessage(message.getSendusermessage() as SendUserMessage); adminMessagesService.onSendusermessage(message.getSendusermessage() as SendUserMessage);
} else if (message.hasBanusermessage()) { } else if (message.hasBanusermessage()) {
adminMessagesService.onSendusermessage(message.getSendusermessage() as BanUserMessage); adminMessagesService.onSendusermessage(message.getBanusermessage() as BanUserMessage);
} else if (message.hasWorldfullwarningmessage()) { } else if (message.hasWorldfullwarningmessage()) {
worldFullWarningStream.onMessage(); worldFullWarningStream.onMessage();
} else if (message.hasRefreshroommessage()) { } else if (message.hasRefreshroommessage()) {

View File

@ -2,12 +2,12 @@ import {Subject} from "rxjs";
class WorldFullMessageStream { class WorldFullMessageStream {
private _stream:Subject<void> = new Subject(); private _stream:Subject<string|null> = new Subject<string|null>();
public stream = this._stream.asObservable(); public stream = this._stream.asObservable();
onMessage() { onMessage(message? :string) {
this._stream.next(); this._stream.next(message);
} }
} }

View File

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

View File

@ -0,0 +1,65 @@
import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js';
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';
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: -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; 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.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);
}
}

View File

@ -0,0 +1,53 @@
import {ITiledMapObject} from "../Map/ITiledMap";
import Text = Phaser.GameObjects.Text;
import {GameScene} from "../Game/GameScene";
import TextStyle = Phaser.GameObjects.TextStyle;
export class TextUtils {
public static createTextFromITiledMapObject(scene: GameScene, object: ITiledMapObject): void {
if (object.text === undefined) {
throw new Error('This object has not textual representation.');
}
const options: {
fontStyle?: string,
fontSize?: string,
fontFamily?: string,
color?: string,
align?: string,
wordWrap?: {
width: number,
useAdvancedWrap?: boolean
}
} = {};
if (object.text.italic) {
options.fontStyle = 'italic';
}
// Note: there is no support for "strikeout" and "underline"
let fontSize: number = 16;
if (object.text.pixelsize) {
fontSize = object.text.pixelsize;
}
options.fontSize = fontSize + 'px';
if (object.text.fontfamily) {
options.fontFamily = '"'+object.text.fontfamily+'"';
}
let color = '#000000';
if (object.text.color !== undefined) {
color = object.text.color;
}
options.color = color;
if (object.text.wrap === true) {
options.wordWrap = {
width: object.width,
//useAdvancedWrap: true
}
}
if (object.text.halign !== undefined) {
options.align = object.text.halign;
}
console.warn(options);
const textElem = scene.add.text(object.x, object.y, object.text.text, options);
textElem.setAngle(object.rotation);
}
}

View File

@ -46,7 +46,7 @@ export abstract class DirtyScene extends ResizableScene {
return this.dirty || this.objectListChanged; return this.dirty || this.objectListChanged;
} }
public onResize(): void { public onResize(ev: UIEvent): void {
this.objectListChanged = true; this.objectListChanged = true;
} }
} }

View File

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

View File

@ -1,4 +1,5 @@
import {ITiledMap} from "../Map/ITiledMap"; import {ITiledMap, ITiledMapLayer} from "../Map/ITiledMap";
import {LayersIterator} from "../Map/LayersIterator";
export type PropertyChangeCallback = (newValue: string | number | boolean | undefined, oldValue: string | number | boolean | undefined, allProps: Map<string, string | boolean | number>) => void; export type PropertyChangeCallback = (newValue: string | number | boolean | undefined, oldValue: string | number | boolean | undefined, allProps: Map<string, string | boolean | number>) => void;
@ -10,8 +11,10 @@ export class GameMap {
private key: number|undefined; private key: number|undefined;
private lastProperties = new Map<string, string|boolean|number>(); private lastProperties = new Map<string, string|boolean|number>();
private callbacks = new Map<string, Array<PropertyChangeCallback>>(); private callbacks = new Map<string, Array<PropertyChangeCallback>>();
public readonly layersIterator: LayersIterator;
public constructor(private map: ITiledMap) { public constructor(private map: ITiledMap) {
this.layersIterator = new LayersIterator(map);
} }
/** /**
@ -55,7 +58,7 @@ export class GameMap {
private getProperties(key: number): Map<string, string|boolean|number> { private getProperties(key: number): Map<string, string|boolean|number> {
const properties = new Map<string, string|boolean|number>(); const properties = new Map<string, string|boolean|number>();
for (const layer of this.map.layers) { for (const layer of this.layersIterator) {
if (layer.type !== 'tilelayer') { if (layer.type !== 'tilelayer') {
continue; continue;
} }

View File

@ -15,10 +15,16 @@ import {
JITSI_PRIVATE_MODE, JITSI_PRIVATE_MODE,
MAX_PER_GROUP, MAX_PER_GROUP,
POSITION_DELAY, POSITION_DELAY,
RESOLUTION,
ZOOM_LEVEL
} from "../../Enum/EnvironmentVariable"; } from "../../Enum/EnvironmentVariable";
import {ITiledMap, ITiledMapLayer, ITiledMapLayerProperty, ITiledMapObject, ITiledTileSet} from "../Map/ITiledMap"; import {
ITiledMap,
ITiledMapLayer,
ITiledMapLayerProperty,
ITiledMapObject,
ITiledText,
ITiledMapTileLayer,
ITiledTileSet
} from "../Map/ITiledMap";
import {AddPlayerInterface} from "./AddPlayerInterface"; import {AddPlayerInterface} from "./AddPlayerInterface";
import {PlayerAnimationDirections} from "../Player/Animation"; import {PlayerAnimationDirections} from "../Player/Animation";
import {PlayerMovement} from "./PlayerMovement"; import {PlayerMovement} from "./PlayerMovement";
@ -58,10 +64,6 @@ import {Room} from "../../Connexion/Room";
import {jitsiFactory} from "../../WebRtc/JitsiFactory"; import {jitsiFactory} from "../../WebRtc/JitsiFactory";
import {urlManager} from "../../Url/UrlManager"; import {urlManager} from "../../Url/UrlManager";
import {audioManager} from "../../WebRtc/AudioManager"; import {audioManager} from "../../WebRtc/AudioManager";
import {IVirtualJoystick} from "../../types";
const {
default: VirtualJoystick,
} = require("phaser3-rex-plugins/plugins/virtualjoystick.js");
import {PresentationModeIcon} from "../Components/PresentationModeIcon"; import {PresentationModeIcon} from "../Components/PresentationModeIcon";
import {ChatModeIcon} from "../Components/ChatModeIcon"; import {ChatModeIcon} from "../Components/ChatModeIcon";
import {OpenChatIcon, openChatIconName} from "../Components/OpenChatIcon"; import {OpenChatIcon, openChatIconName} from "../Components/OpenChatIcon";
@ -84,6 +86,11 @@ import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoading
import RenderTexture = Phaser.GameObjects.RenderTexture; import RenderTexture = Phaser.GameObjects.RenderTexture;
import Tilemap = Phaser.Tilemaps.Tilemap; import Tilemap = Phaser.Tilemaps.Tilemap;
import {DirtyScene} from "./DirtyScene"; 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 { export interface GameSceneInitInterface {
initPosition: PointInterface|null, initPosition: PointInterface|null,
@ -139,7 +146,7 @@ export class GameScene extends DirtyScene implements CenterListener {
pendingEvents: Queue<InitUserPositionEventInterface|AddPlayerEventInterface|RemovePlayerEventInterface|UserMovedEventInterface|GroupCreatedUpdatedEventInterface|DeleteGroupEventInterface> = new Queue<InitUserPositionEventInterface|AddPlayerEventInterface|RemovePlayerEventInterface|UserMovedEventInterface|GroupCreatedUpdatedEventInterface|DeleteGroupEventInterface>(); pendingEvents: Queue<InitUserPositionEventInterface|AddPlayerEventInterface|RemovePlayerEventInterface|UserMovedEventInterface|GroupCreatedUpdatedEventInterface|DeleteGroupEventInterface> = new Queue<InitUserPositionEventInterface|AddPlayerEventInterface|RemovePlayerEventInterface|UserMovedEventInterface|GroupCreatedUpdatedEventInterface|DeleteGroupEventInterface>();
private initPosition: PositionInterface|null = null; private initPosition: PositionInterface|null = null;
private playersPositionInterpolator = new PlayersPositionInterpolator(); private playersPositionInterpolator = new PlayersPositionInterpolator();
public connection!: RoomConnection; public connection: RoomConnection|undefined;
private simplePeer!: SimplePeer; private simplePeer!: SimplePeer;
private GlobalMessageManager!: GlobalMessageManager; private GlobalMessageManager!: GlobalMessageManager;
public ConsoleGlobalMessageManager!: ConsoleGlobalMessageManager; public ConsoleGlobalMessageManager!: ConsoleGlobalMessageManager;
@ -178,7 +185,7 @@ export class GameScene extends DirtyScene implements CenterListener {
private messageSubscription: Subscription|null = null; private messageSubscription: Subscription|null = null;
private popUpElements : Map<number, DOMElement> = new Map<number, Phaser.GameObjects.DOMElement>(); private popUpElements : Map<number, DOMElement> = new Map<number, Phaser.GameObjects.DOMElement>();
private originalMapUrl: string|undefined; private originalMapUrl: string|undefined;
public virtualJoystick!: IVirtualJoystick; private pinchManager: PinchManager|undefined;
constructor(private room: Room, MapUrlFile: string, customKey?: string|undefined) { constructor(private room: Room, MapUrlFile: string, customKey?: string|undefined) {
super({ super({
@ -197,8 +204,7 @@ export class GameScene extends DirtyScene implements CenterListener {
}) })
this.connectionAnswerPromise = new Promise<RoomJoinedMessageInterface>((resolve, reject): void => { this.connectionAnswerPromise = new Promise<RoomJoinedMessageInterface>((resolve, reject): void => {
this.connectionAnswerPromiseResolve = resolve; this.connectionAnswerPromiseResolve = resolve;
}) });
} }
//hook preload scene //hook preload scene
@ -212,6 +218,10 @@ export class GameScene extends DirtyScene implements CenterListener {
} }
this.load.image(openChatIconName, 'resources/objects/talk.png'); this.load.image(openChatIconName, 'resources/objects/talk.png');
if (touchScreenManager.supportTouchScreen) {
this.load.image(joystickBaseKey, joystickBaseImg);
this.load.image(joystickThumbKey, joystickThumbImg);
}
this.load.on(FILE_LOAD_ERROR, (file: {src: string}) => { this.load.on(FILE_LOAD_ERROR, (file: {src: string}) => {
// If we happen to be in HTTP and we are trying to load a URL in HTTPS only... (this happens only in dev environments) // If we happen to be in HTTP and we are trying to load a URL in HTTPS only... (this happens only in dev environments)
if (window.location.protocol === 'http:' && file.src === this.MapUrlFile && file.src.startsWith('http:') && this.originalMapUrl === undefined) { if (window.location.protocol === 'http:' && file.src === this.MapUrlFile && file.src.startsWith('http:') && this.originalMapUrl === undefined) {
@ -259,6 +269,7 @@ export class GameScene extends DirtyScene implements CenterListener {
this.load.spritesheet('layout_modes', 'resources/objects/layout_modes.png', {frameWidth: 32, frameHeight: 32}); this.load.spritesheet('layout_modes', 'resources/objects/layout_modes.png', {frameWidth: 32, frameHeight: 32});
this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml'); this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
//this function must stay at the end of preload function
addLoader(this); addLoader(this);
} }
@ -364,7 +375,11 @@ export class GameScene extends DirtyScene implements CenterListener {
urlManager.pushRoomIdToUrl(this.room); urlManager.pushRoomIdToUrl(this.room);
this.startLayerName = urlManager.getStartLayerNameFromUrl(); this.startLayerName = urlManager.getStartLayerNameFromUrl();
this.messageSubscription = worldFullMessageStream.stream.subscribe((message) => this.showWorldFullError()) if (touchScreenManager.supportTouchScreen) {
this.pinchManager = new PinchManager(this);
}
this.messageSubscription = worldFullMessageStream.stream.subscribe((message) => this.showWorldFullError(message))
const playerName = gameManager.getPlayerName(); const playerName = gameManager.getPlayerName();
if (!playerName) { if (!playerName) {
@ -388,7 +403,7 @@ export class GameScene extends DirtyScene implements CenterListener {
//add layer on map //add layer on map
this.Layers = new Array<Phaser.Tilemaps.TilemapLayer>(); this.Layers = new Array<Phaser.Tilemaps.TilemapLayer>();
let depth = -2; let depth = -2;
for (const layer of this.mapFile.layers) { for (const layer of this.gameMap.layersIterator) {
if (layer.type === 'tilelayer') { if (layer.type === 'tilelayer') {
this.addLayer(this.Map.createLayer(layer.name, this.Terrains, 0, 0).setDepth(depth)); this.addLayer(this.Map.createLayer(layer.name, this.Terrains, 0, 0).setDepth(depth));
@ -404,9 +419,16 @@ export class GameScene extends DirtyScene implements CenterListener {
if (layer.type === 'objectgroup' && layer.name === 'floorLayer') { if (layer.type === 'objectgroup' && layer.name === 'floorLayer') {
depth = 10000; depth = 10000;
} }
if (layer.type === 'objectgroup') {
for (const object of layer.objects) {
if (object.text) {
TextUtils.createTextFromITiledMapObject(this, object);
}
}
}
} }
if (depth === -2) { if (depth === -2) {
throw new Error('Your map MUST contain a layer of type "objectgroup" whose name is "floorLayer" that represents the layer characters are drawn at.'); throw new Error('Your map MUST contain a layer of type "objectgroup" whose name is "floorLayer" that represents the layer characters are drawn at. This layer cannot be contained in a group.');
} }
this.initStartXAndStartY(); this.initStartXAndStartY();
@ -417,26 +439,10 @@ export class GameScene extends DirtyScene implements CenterListener {
//initialise list of other player //initialise list of other player
this.MapPlayers = this.physics.add.group({immovable: true}); this.MapPlayers = this.physics.add.group({immovable: true});
this.virtualJoystick = new VirtualJoystick(this, {
x: this.game.renderer.width / 2,
y: this.game.renderer.height / 2,
radius: 20,
base: this.add.circle(0, 0, 20),
thumb: this.add.circle(0, 0, 10),
enable: true,
dir: "8dir",
});
this.virtualJoystick.visible = true;
//create input to move
mediaManager.setUserInputManager(this.userInputManager);
this.userInputManager = new UserInputManager(this, this.virtualJoystick);
// Listener event to reposition virtual joystick //create input to move
// whatever place you click in game area this.userInputManager = new UserInputManager(this);
this.input.on('pointerdown', (pointer: { x: number; y: number; }) => { mediaManager.setUserInputManager(this.userInputManager);
this.virtualJoystick.x = pointer.x;
this.virtualJoystick.y = pointer.y;
});
if (localUserStore.getFullscreen()) { if (localUserStore.getFullscreen()) {
document.querySelector('body')?.requestFullscreen(); document.querySelector('body')?.requestFullscreen();
@ -729,7 +735,7 @@ export class GameScene extends DirtyScene implements CenterListener {
if (JITSI_PRIVATE_MODE && !jitsiUrl) { if (JITSI_PRIVATE_MODE && !jitsiUrl) {
const adminTag = allProps.get("jitsiRoomAdminTag") as string|undefined; const adminTag = allProps.get("jitsiRoomAdminTag") as string|undefined;
this.connection.emitQueryJitsiJwtMessage(roomName, adminTag); this.connection?.emitQueryJitsiJwtMessage(roomName, adminTag);
} else { } else {
this.startJitsi(roomName, undefined); this.startJitsi(roomName, undefined);
} }
@ -752,9 +758,9 @@ export class GameScene extends DirtyScene implements CenterListener {
}); });
this.gameMap.onPropertyChange('silent', (newValue, oldValue) => { this.gameMap.onPropertyChange('silent', (newValue, oldValue) => {
if (newValue === undefined || newValue === false || newValue === '') { if (newValue === undefined || newValue === false || newValue === '') {
this.connection.setSilent(false); this.connection?.setSilent(false);
} else { } else {
this.connection.setSilent(true); this.connection?.setSilent(true);
} }
}); });
this.gameMap.onPropertyChange('playAudio', (newValue, oldValue, allProps) => { this.gameMap.onPropertyChange('playAudio', (newValue, oldValue, allProps) => {
@ -909,9 +915,11 @@ ${escapedMessage}
audioManager.unloadAudio(); audioManager.unloadAudio();
// We are completely destroying the current scene to avoid using a half-backed instance when coming back to the same map. // We are completely destroying the current scene to avoid using a half-backed instance when coming back to the same map.
this.connection?.closeConnection(); this.connection?.closeConnection();
this.simplePeer.closeAllConnections(); this.simplePeer?.closeAllConnections();
this.simplePeer?.unregister(); this.simplePeer?.unregister();
this.messageSubscription?.unsubscribe(); this.messageSubscription?.unsubscribe();
this.userInputManager.destroy();
this.pinchManager?.destroy();
for(const iframeEvents of this.iframeSubscriptionList){ for(const iframeEvents of this.iframeSubscriptionList){
iframeEvents.unsubscribe(); iframeEvents.unsubscribe();
@ -973,13 +981,14 @@ ${escapedMessage}
} }
private initPositionFromLayerName(layerName: string) { private initPositionFromLayerName(layerName: string) {
for (const layer of this.mapFile.layers) { for (const layer of this.gameMap.layersIterator) {
if (layerName === layer.name && layer.type === 'tilelayer' && (layerName === defaultStartLayerName || this.isStartLayer(layer))) { if ((layerName === layer.name || layer.name.endsWith('/'+layerName)) && layer.type === 'tilelayer' && (layerName === defaultStartLayerName || this.isStartLayer(layer))) {
const startPosition = this.startUser(layer); const startPosition = this.startUser(layer);
this.startX = startPosition.x + this.mapFile.tilewidth/2; this.startX = startPosition.x + this.mapFile.tilewidth/2;
this.startY = startPosition.y + this.mapFile.tileheight/2; this.startY = startPosition.y + this.mapFile.tileheight/2;
} }
} }
} }
private getExitUrl(layer: ITiledMapLayer): string|undefined { private getExitUrl(layer: ITiledMapLayer): string|undefined {
@ -1002,7 +1011,7 @@ ${escapedMessage}
} }
private getProperty(layer: ITiledMapLayer|ITiledMap, name: string): string|boolean|number|undefined { private getProperty(layer: ITiledMapLayer|ITiledMap, name: string): string|boolean|number|undefined {
const properties: ITiledMapLayerProperty[] = layer.properties; const properties: ITiledMapLayerProperty[]|undefined = layer.properties;
if (!properties) { if (!properties) {
return undefined; return undefined;
} }
@ -1014,7 +1023,7 @@ ${escapedMessage}
} }
private getProperties(layer: ITiledMapLayer|ITiledMap, name: string): (string|number|boolean|undefined)[] { private getProperties(layer: ITiledMapLayer|ITiledMap, name: string): (string|number|boolean|undefined)[] {
const properties: ITiledMapLayerProperty[] = layer.properties; const properties: ITiledMapLayerProperty[]|undefined = layer.properties;
if (!properties) { if (!properties) {
return []; return [];
} }
@ -1028,7 +1037,7 @@ ${escapedMessage}
await gameManager.loadMap(room, this.scene); await gameManager.loadMap(room, this.scene);
} }
private startUser(layer: ITiledMapLayer): PositionInterface { private startUser(layer: ITiledMapTileLayer): PositionInterface {
const tiles = layer.data; const tiles = layer.data;
if (typeof(tiles) === 'string') { if (typeof(tiles) === 'string') {
throw new Error('The content of a JSON map must be filled as a JSON array, not as a string'); throw new Error('The content of a JSON map must be filled as a JSON array, not as a string');
@ -1058,8 +1067,8 @@ ${escapedMessage}
//todo: in a dedicated class/function? //todo: in a dedicated class/function?
initCamera() { initCamera() {
this.cameras.main.setBounds(0,0, this.Map.widthInPixels, this.Map.heightInPixels); this.cameras.main.setBounds(0,0, this.Map.widthInPixels, this.Map.heightInPixels);
this.cameras.main.startFollow(this.CurrentPlayer, true);
this.updateCameraOffset(); this.updateCameraOffset();
this.cameras.main.setZoom(ZOOM_LEVEL);
} }
addLayer(Layer : Phaser.Tilemaps.TilemapLayer){ addLayer(Layer : Phaser.Tilemaps.TilemapLayer){
@ -1185,7 +1194,7 @@ ${escapedMessage}
this.lastMoveEventSent = event; this.lastMoveEventSent = event;
this.lastSentTick = this.currentTick; this.lastSentTick = this.currentTick;
const camera = this.cameras.main; const camera = this.cameras.main;
this.connection.sharePosition(event.x, event.y, event.direction, event.moving, { this.connection?.sharePosition(event.x, event.y, event.direction, event.moving, {
left: camera.scrollX, left: camera.scrollX,
top: camera.scrollY, top: camera.scrollY,
right: camera.scrollX + camera.width, right: camera.scrollX + camera.width,
@ -1198,13 +1207,8 @@ ${escapedMessage}
* @param delta The delta time in ms since the last frame. This is a smoothed and capped value based on the FPS rate. * @param delta The delta time in ms since the last frame. This is a smoothed and capped value based on the FPS rate.
*/ */
update(time: number, delta: number) : void { update(time: number, delta: number) : void {
// TODO: add Events.ADDED_TO_SCENE to the scene to track new objects.
// When an object is added, add ANIMATION_UPDATE event on this object (and remove the listener on Events.REMOVE_FROM_SCENE)
// This way, we can set the dirty flag only when an animation is added!!!
this.dirty = false; this.dirty = false;
mediaManager.setLastUpdateScene(); mediaManager.updateScene();
this.currentTick = time; this.currentTick = time;
if (this.CurrentPlayer.isMoving()) { if (this.CurrentPlayer.isMoving()) {
this.dirty = true; this.dirty = true;
@ -1269,7 +1273,7 @@ ${escapedMessage}
* Put all the players on the map on map load. * Put all the players on the map on map load.
*/ */
private doInitUsersPosition(usersPosition: MessageUserPositionInterface[]): void { private doInitUsersPosition(usersPosition: MessageUserPositionInterface[]): void {
const currentPlayerId = this.connection.getUserId(); const currentPlayerId = this.connection?.getUserId();
this.removeAllRemotePlayers(); this.removeAllRemotePlayers();
// load map // load map
usersPosition.forEach((userPosition : MessageUserPositionInterface) => { usersPosition.forEach((userPosition : MessageUserPositionInterface) => {
@ -1413,16 +1417,16 @@ ${escapedMessage}
* Sends to the server an event emitted by one of the ActionableItems. * Sends to the server an event emitted by one of the ActionableItems.
*/ */
emitActionableEvent(itemId: number, eventName: string, state: unknown, parameters: unknown) { emitActionableEvent(itemId: number, eventName: string, state: unknown, parameters: unknown) {
this.connection.emitActionableEvent(itemId, eventName, state, parameters); this.connection?.emitActionableEvent(itemId, eventName, state, parameters);
} }
public onResize(): void { public onResize(ev: UIEvent): void {
super.onResize(); super.onResize(ev);
this.reposition(); this.reposition();
// Send new viewport to server // Send new viewport to server
const camera = this.cameras.main; const camera = this.cameras.main;
this.connection.setViewport({ this.connection?.setViewport({
left: camera.scrollX, left: camera.scrollX,
top: camera.scrollY, top: camera.scrollY,
right: camera.scrollX + camera.width, right: camera.scrollX + camera.width,
@ -1452,19 +1456,18 @@ ${escapedMessage}
} }
/** /**
* Updates the offset of the character compared to the center of the screen according to the layout mananger * Updates the offset of the character compared to the center of the screen according to the layout manager
* (tries to put the character in the center of the reamining space if there is a discussion going on. * (tries to put the character in the center of the remaining space if there is a discussion going on.
*/ */
private updateCameraOffset(): void { private updateCameraOffset(): void {
const array = layoutManager.findBiggestAvailableArray(); const array = layoutManager.findBiggestAvailableArray();
let xCenter = (array.xEnd - array.xStart) / 2 + array.xStart; const xCenter = (array.xEnd - array.xStart) / 2 + array.xStart;
let yCenter = (array.yEnd - array.yStart) / 2 + array.yStart; const yCenter = (array.yEnd - array.yStart) / 2 + array.yStart;
const game = HtmlUtils.querySelectorOrFail<HTMLCanvasElement>('#game canvas');
// Let's put this in Game coordinates by applying the zoom level: // Let's put this in Game coordinates by applying the zoom level:
xCenter /= ZOOM_LEVEL * RESOLUTION;
yCenter /= ZOOM_LEVEL * RESOLUTION;
this.cameras.main.startFollow(this.CurrentPlayer, true, 1, 1, xCenter - this.game.renderer.width / 2, yCenter - this.game.renderer.height / 2); this.cameras.main.setFollowOffset((xCenter - game.offsetWidth/2) * window.devicePixelRatio / this.scale.zoom , (yCenter - game.offsetHeight/2) * window.devicePixelRatio / this.scale.zoom);
} }
public onCenterChange(): void { public onCenterChange(): void {
@ -1478,7 +1481,7 @@ ${escapedMessage}
const jitsiUrl = allProps.get("jitsiUrl") as string|undefined; const jitsiUrl = allProps.get("jitsiUrl") as string|undefined;
jitsiFactory.start(roomName, this.playerName, jwt, jitsiConfig, jitsiInterfaceConfig, jitsiUrl); jitsiFactory.start(roomName, this.playerName, jwt, jitsiConfig, jitsiInterfaceConfig, jitsiUrl);
this.connection.setSilent(true); this.connection?.setSilent(true);
mediaManager.hideGameOverlay(); mediaManager.hideGameOverlay();
//permit to stop jitsi when user close iframe //permit to stop jitsi when user close iframe
@ -1507,14 +1510,29 @@ ${escapedMessage}
} }
//todo: put this into an 'orchestrator' scene (EntryScene?) //todo: put this into an 'orchestrator' scene (EntryScene?)
private showWorldFullError(): void { private showWorldFullError(message: string|null): void {
this.cleanupClosingScene(); this.cleanupClosingScene();
this.scene.stop(ReconnectingSceneName); this.scene.stop(ReconnectingSceneName);
this.scene.remove(ReconnectingSceneName);
this.userInputManager.disableControls(); this.userInputManager.disableControls();
//FIX ME to use status code
if(message == undefined){
this.scene.start(ErrorSceneName, { this.scene.start(ErrorSceneName, {
title: 'Connection rejected', title: 'Connection rejected',
subTitle: 'The world you are trying to join is full. Try again later.', subTitle: 'The world you are trying to join is full. Try again later.',
message: 'If you want more information, you may contact us at: workadventure@thecodingmachine.com' message: 'If you want more information, you may contact us at: workadventure@thecodingmachine.com'
}); });
}else{
this.scene.start(ErrorSceneName, {
title: 'Connection rejected',
subTitle: 'You cannot join the World. Try again later. \n\r \n\r Error: '+message+'.',
message: 'If you want more information, you may contact administrator or contact us at: workadventure@thecodingmachine.com'
});
}
}
zoomByFactor(zoomFactor: number) {
waScaleManager.zoomModifier *= zoomFactor;
this.updateCameraOffset();
} }
} }

View File

@ -1,54 +1,32 @@
import {EnableCameraSceneName} from "./EnableCameraScene"; import {EnableCameraSceneName} from "./EnableCameraScene";
import {TextField} from "../Components/TextField";
import Image = Phaser.GameObjects.Image;
import Rectangle = Phaser.GameObjects.Rectangle; import Rectangle = Phaser.GameObjects.Rectangle;
import {loadAllLayers, loadCustomTexture} from "../Entity/PlayerTexturesLoadingManager"; import {loadAllLayers} from "../Entity/PlayerTexturesLoadingManager";
import Sprite = Phaser.GameObjects.Sprite; import Sprite = Phaser.GameObjects.Sprite;
import Container = Phaser.GameObjects.Container; import Container = Phaser.GameObjects.Container;
import {gameManager} from "../Game/GameManager"; import {gameManager} from "../Game/GameManager";
import {ResizableScene} from "./ResizableScene";
import {localUserStore} from "../../Connexion/LocalUserStore"; import {localUserStore} from "../../Connexion/LocalUserStore";
import {addLoader} from "../Components/Loader"; import {addLoader} from "../Components/Loader";
import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures"; import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
import {AbstractCharacterScene} from "./AbstractCharacterScene"; import {AbstractCharacterScene} from "./AbstractCharacterScene";
import {areCharacterLayersValid} from "../../Connexion/LocalUser"; import {areCharacterLayersValid} from "../../Connexion/LocalUser";
import { MenuScene } from "../Menu/MenuScene";
import { SelectCharacterSceneName } from "./SelectCharacterScene";
export const CustomizeSceneName = "CustomizeScene"; export const CustomizeSceneName = "CustomizeScene";
enum CustomizeTextures{ export const CustomizeSceneKey = "CustomizeScene";
icon = "icon", const customizeSceneKey = 'customizeScene';
arrowRight = "arrow_right",
mainFont = "main_font",
arrowUp = "arrow_up",
}
export class CustomizeScene extends AbstractCharacterScene { export class CustomizeScene extends AbstractCharacterScene {
private textField!: TextField;
private enterField!: TextField;
private arrowRight!: Image;
private arrowLeft!: Image;
private arrowDown!: Image;
private arrowUp!: Image;
private Rectangle!: Rectangle; private Rectangle!: Rectangle;
private mobileTapUP!: Rectangle;
private mobileTapDOWN!: Rectangle;
private mobileTapLEFT!: Rectangle;
private mobileTapRIGHT!: Rectangle;
private mobileTapENTER!: Rectangle;
private logo!: Image;
private selectedLayers: number[] = [0]; private selectedLayers: number[] = [0];
private containersRow: Container[][] = []; private containersRow: Container[][] = [];
private activeRow:number = 0; private activeRow:number = 0;
private layers: BodyResourceDescriptionInterface[][] = []; private layers: BodyResourceDescriptionInterface[][] = [];
private customizeSceneElement!: Phaser.GameObjects.DOMElement;
constructor() { constructor() {
super({ super({
key: CustomizeSceneName key: CustomizeSceneName
@ -56,7 +34,7 @@ export class CustomizeScene extends AbstractCharacterScene {
} }
preload() { preload() {
addLoader(this); this.load.html(customizeSceneKey, 'resources/html/CustomCharacterScene.html');
this.layers = loadAllLayers(this.load); this.layers = loadAllLayers(this.load);
this.loadCustomSceneSelectCharacters().then((bodyResourceDescriptions) => { this.loadCustomSceneSelectCharacters().then((bodyResourceDescriptions) => {
@ -68,105 +46,44 @@ export class CustomizeScene extends AbstractCharacterScene {
}); });
}); });
this.load.image(CustomizeTextures.arrowRight, "resources/objects/arrow_right.png"); //this function must stay at the end of preload function
this.load.image(CustomizeTextures.icon, "resources/logos/tcm_full.png"); addLoader(this);
this.load.image(CustomizeTextures.arrowUp, "resources/objects/arrow_up.png");
this.load.bitmapFont(CustomizeTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
} }
create() { create() {
this.textField = new TextField(this, this.game.renderer.width / 2, 30, 'Customize your own Avatar!'); this.customizeSceneElement = this.add.dom(-1000, 0).createFromCache(customizeSceneKey);
this.centerXDomElement(this.customizeSceneElement, 150);
MenuScene.revealMenusAfterInit(this.customizeSceneElement, customizeSceneKey);
this.enterField = new TextField(this, this.game.renderer.width / 2, 60, 'Start the game by pressing ENTER\n\n or touching the center rectangle'); this.customizeSceneElement.addListener('click');
this.customizeSceneElement.on('click', (event:MouseEvent) => {
this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, CustomizeTextures.icon); event.preventDefault();
this.add.existing(this.logo); if((event?.target as HTMLInputElement).id === 'customizeSceneButtonLeft') {
this.arrowRight = new Image(this, this.game.renderer.width*0.9, this.game.renderer.height/2, CustomizeTextures.arrowRight);
this.add.existing(this.arrowRight);
this.mobileTapRIGHT = this.add
.rectangle(
this.game.renderer.width*0.9,
this.game.renderer.height/2,
32,
32,
)
.setInteractive()
.on("pointerdown", () => {
this.moveCursorHorizontally(1);
});
this.arrowLeft = new Image(this, this.game.renderer.width/9, this.game.renderer.height/2, CustomizeTextures.arrowRight);
this.arrowLeft.flipX = true;
this.add.existing(this.arrowLeft);
this.mobileTapLEFT = this.add
.rectangle(
this.game.renderer.width/9,
this.game.renderer.height/2,
32,
32,
)
.setInteractive()
.on("pointerdown", () => {
this.moveCursorHorizontally(-1); this.moveCursorHorizontally(-1);
}else if((event?.target as HTMLInputElement).id === 'customizeSceneButtonRight') {
this.moveCursorHorizontally(1);
}else if((event?.target as HTMLInputElement).id === 'customizeSceneButtonDown') {
this.moveCursorVertically(1);
}else if((event?.target as HTMLInputElement).id === 'customizeSceneButtonUp') {
this.moveCursorVertically(-1);
}else if((event?.target as HTMLInputElement).id === 'customizeSceneFormBack') {
if(this.activeRow > 0){
this.moveCursorVertically(-1);
}else{
this.backToPreviousScene();
}
}else if((event?.target as HTMLButtonElement).id === 'customizeSceneFormSubmit') {
if(this.activeRow < 5){
this.moveCursorVertically(1);
}else{
this.nextSceneToCamera();
}
}
}); });
this.Rectangle = this.add.rectangle(this.cameras.main.worldView.x + this.cameras.main.width / 2, this.cameras.main.worldView.y + this.cameras.main.height / 2, 32, 33) this.Rectangle = this.add.rectangle(this.cameras.main.worldView.x + this.cameras.main.width / 2, this.cameras.main.worldView.y + this.cameras.main.height / 3, 32, 33)
this.Rectangle.setStrokeStyle(2, 0xFFFFFF); this.Rectangle.setStrokeStyle(2, 0xFFFFFF);
this.add.existing(this.Rectangle); this.add.existing(this.Rectangle);
this.mobileTapENTER = this.add
.rectangle(
this.cameras.main.worldView.x + this.cameras.main.width / 2,
this.cameras.main.worldView.y + this.cameras.main.height / 2,
32,
32,
)
.setInteractive()
.on("pointerdown", () => {
const layers: string[] = [];
let i = 0;
for (const layerItem of this.selectedLayers) {
if (layerItem !== undefined) {
layers.push(this.layers[i][layerItem].name);
}
i++;
}
gameManager.setCharacterLayers(layers);
this.scene.sleep(CustomizeSceneName);
gameManager.tryResumingGame(this, EnableCameraSceneName);
});
this.arrowDown = new Image(this, this.game.renderer.width - 30, 100, CustomizeTextures.arrowUp);
this.arrowDown.flipY = true;
this.add.existing(this.arrowDown);
this.mobileTapDOWN = this.add
.rectangle(
this.game.renderer.width - 30,
100,
32,
32,
)
.setInteractive()
.on("pointerdown", () => {
this.moveCursorVertically(1);
});
this.arrowUp = new Image(this, this.game.renderer.width - 30, 60, CustomizeTextures.arrowUp);
this.add.existing(this.arrowUp);
this.mobileTapUP = this.add
.rectangle(
this.game.renderer.width - 30,
60,
32,
32,
)
.setInteractive()
.on("pointerdown", () => {
this.moveCursorVertically(-1);
});
this.createCustomizeLayer(0, 0, 0); this.createCustomizeLayer(0, 0, 0);
this.createCustomizeLayer(0, 0, 1); this.createCustomizeLayer(0, 0, 1);
@ -177,22 +94,10 @@ export class CustomizeScene extends AbstractCharacterScene {
this.moveLayers(); this.moveLayers();
this.input.keyboard.on('keyup-ENTER', () => { this.input.keyboard.on('keyup-ENTER', () => {
const layers: string[] = []; this.nextSceneToCamera();
let i = 0; });
for (const layerItem of this.selectedLayers) { this.input.keyboard.on('keyup-BACKSPACE', () => {
if (layerItem !== undefined) { this.backToPreviousScene();
layers.push(this.layers[i][layerItem].name);
}
i++;
}
if (!areCharacterLayersValid(layers)) {
return;
}
gameManager.setCharacterLayers(layers);
this.scene.sleep(CustomizeSceneName);
gameManager.tryResumingGame(this, EnableCameraSceneName);
}); });
this.input.keyboard.on('keyup-RIGHT', () => this.moveCursorHorizontally(1)); this.input.keyboard.on('keyup-RIGHT', () => this.moveCursorHorizontally(1));
@ -207,6 +112,8 @@ export class CustomizeScene extends AbstractCharacterScene {
this.moveLayers(); this.moveLayers();
this.updateSelectedLayer(); this.updateSelectedLayer();
} }
this.onResize();
} }
private moveCursorHorizontally(index: number): void { private moveCursorHorizontally(index: number): void {
@ -222,6 +129,27 @@ export class CustomizeScene extends AbstractCharacterScene {
} }
private moveCursorVertically(index:number): void { private moveCursorVertically(index:number): void {
if(index === -1 && this.activeRow === 5){
const button = this.customizeSceneElement.getChildByID('customizeSceneFormSubmit') as HTMLButtonElement;
button.innerHTML = `Next <img src="resources/objects/arrow_up.png"/>`;
}
if(index === 1 && this.activeRow === 4){
const button = this.customizeSceneElement.getChildByID('customizeSceneFormSubmit') as HTMLButtonElement;
button.innerText = 'Finish';
}
if(index === -1 && this.activeRow === 1){
const button = this.customizeSceneElement.getChildByID('customizeSceneFormBack') as HTMLButtonElement;
button.innerText = `Return`;
}
if(index === 1 && this.activeRow === 0){
const button = this.customizeSceneElement.getChildByID('customizeSceneFormBack') as HTMLButtonElement;
button.innerHTML = `Back <img src="resources/objects/arrow_up.png"/>`;
}
this.activeRow += index; this.activeRow += index;
if (this.activeRow < 0) { if (this.activeRow < 0) {
this.activeRow = 0 this.activeRow = 0
@ -236,11 +164,6 @@ export class CustomizeScene extends AbstractCharacterScene {
localUserStore.setCustomCursorPosition(this.activeRow, this.selectedLayers); localUserStore.setCustomCursorPosition(this.activeRow, this.selectedLayers);
} }
update(time: number, delta: number): void {
super.update(time, delta);
this.enterField.setVisible(!!(Math.floor(time / 500) % 2));
}
/** /**
* @param x, the layer's vertical position * @param x, the layer's vertical position
* @param y, the layer's horizontal position * @param y, the layer's horizontal position
@ -298,7 +221,7 @@ export class CustomizeScene extends AbstractCharacterScene {
*/ */
private moveLayers(): void { private moveLayers(): void {
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const screenCenterY = this.cameras.main.worldView.y + this.cameras.main.height / 2; const screenCenterY = this.cameras.main.worldView.y + this.cameras.main.height / 3;
const screenWidth = this.game.renderer.width; const screenWidth = this.game.renderer.width;
const screenHeight = this.game.renderer.height; const screenHeight = this.game.renderer.height;
for (let i = 0; i < this.containersRow.length; i++) { for (let i = 0; i < this.containersRow.length; i++) {
@ -335,41 +258,42 @@ export class CustomizeScene extends AbstractCharacterScene {
this.containersRow[i][j].add(children); this.containersRow[i][j].add(children);
} }
} }
}
update(time: number, delta: number): void {
} }
public onResize(): void { public onResize(): void {
this.moveLayers(); this.moveLayers();
this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2; this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
this.mobileTapENTER.x = this.cameras.main.worldView.x + this.cameras.main.width / 2; this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3;
this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 2;
this.mobileTapENTER.y = this.cameras.main.worldView.y + this.cameras.main.height / 2;
this.textField.x = this.game.renderer.width/2; this.centerXDomElement(this.customizeSceneElement, 150);
}
this.logo.x = this.game.renderer.width - 30; private nextSceneToCamera(){
this.logo.y = this.game.renderer.height - 20; const layers: string[] = [];
let i = 0;
this.arrowUp.x = this.game.renderer.width - 30; for (const layerItem of this.selectedLayers) {
this.mobileTapUP.x = this.game.renderer.width - 30; if (layerItem !== undefined) {
this.arrowUp.y = 60; layers.push(this.layers[i][layerItem].name);
this.mobileTapUP.y = 60; }
i++;
this.arrowDown.x = this.game.renderer.width - 30; }
this.mobileTapDOWN.x = this.game.renderer.width - 30; if (!areCharacterLayersValid(layers)) {
this.arrowDown.y = 100; return;
this.mobileTapDOWN.y = 100; }
this.arrowLeft.x = this.game.renderer.width/9;
this.mobileTapLEFT.x = this.game.renderer.width/9;
this.arrowLeft.y = this.game.renderer.height/2;
this.mobileTapLEFT.y = this.game.renderer.height/2;
this.arrowRight.x = this.game.renderer.width*0.9;
this.mobileTapRIGHT.x = this.game.renderer.width*0.9;
this.arrowRight.y = this.game.renderer.height/2;
this.mobileTapRIGHT.y = this.game.renderer.height/2;
gameManager.setCharacterLayers(layers);
this.scene.sleep(CustomizeSceneName);
this.scene.remove(SelectCharacterSceneName);
gameManager.tryResumingGame(this, EnableCameraSceneName);
}
private backToPreviousScene(){
this.scene.sleep(CustomizeSceneName);
this.scene.run(SelectCharacterSceneName);
} }
} }

View File

@ -1,12 +1,15 @@
import {gameManager} from "../Game/GameManager"; import {gameManager} from "../Game/GameManager";
import {TextField} from "../Components/TextField"; import {TextField} from "../Components/TextField";
import Image = Phaser.GameObjects.Image; import Image = Phaser.GameObjects.Image;
import Rectangle = Phaser.GameObjects.Rectangle;
import {mediaManager} from "../../WebRtc/MediaManager"; import {mediaManager} from "../../WebRtc/MediaManager";
import {RESOLUTION} from "../../Enum/EnvironmentVariable";
import {SoundMeter} from "../Components/SoundMeter"; import {SoundMeter} from "../Components/SoundMeter";
import {SoundMeterSprite} from "../Components/SoundMeterSprite"; import {SoundMeterSprite} from "../Components/SoundMeterSprite";
import {HtmlUtils} from "../../WebRtc/HtmlUtils"; import {HtmlUtils} from "../../WebRtc/HtmlUtils";
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"; export const EnableCameraSceneName = "EnableCameraScene";
enum LoginTextures { enum LoginTextures {
@ -17,12 +20,11 @@ enum LoginTextures {
arrowUp = "arrow_up" arrowUp = "arrow_up"
} }
const enableCameraSceneKey = 'enableCameraScene';
export class EnableCameraScene extends Phaser.Scene { export class EnableCameraScene extends ResizableScene {
private textField!: TextField; private textField!: TextField;
private pressReturnField!: TextField;
private cameraNameField!: TextField; private cameraNameField!: TextField;
private logo!: Image;
private arrowLeft!: Image; private arrowLeft!: Image;
private arrowRight!: Image; private arrowRight!: Image;
private arrowDown!: Image; private arrowDown!: Image;
@ -34,9 +36,11 @@ export class EnableCameraScene extends Phaser.Scene {
private soundMeter: SoundMeter; private soundMeter: SoundMeter;
private soundMeterSprite!: SoundMeterSprite; private soundMeterSprite!: SoundMeterSprite;
private microphoneNameField!: TextField; private microphoneNameField!: TextField;
private repositionCallback!: (this: Window, ev: UIEvent) => void;
private mobileTapRectangle!: Rectangle; private enableCameraSceneElement!: Phaser.GameObjects.DOMElement;
private mobileTapZone!: Zone;
constructor() { constructor() {
super({ super({
key: EnableCameraSceneName key: EnableCameraSceneName
@ -45,8 +49,10 @@ export class EnableCameraScene extends Phaser.Scene {
} }
preload() { preload() {
this.load.html(enableCameraSceneKey, 'resources/html/EnableCameraScene.html');
this.load.image(LoginTextures.playButton, "resources/objects/play_button.png"); this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png");
this.load.image(LoginTextures.arrowRight, "resources/objects/arrow_right.png"); this.load.image(LoginTextures.arrowRight, "resources/objects/arrow_right.png");
this.load.image(LoginTextures.arrowUp, "resources/objects/arrow_up.png"); this.load.image(LoginTextures.arrowUp, "resources/objects/arrow_up.png");
// Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
@ -54,19 +60,30 @@ export class EnableCameraScene extends Phaser.Scene {
} }
create() { create() {
this.textField = new TextField(this, this.game.renderer.width / 2, 20, 'Turn on your camera and microphone');
this.pressReturnField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 30, 'Touch here\n\n or \n\nPress enter to start'); 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;
continuingButton.addEventListener('click', (e) => {
e.preventDefault();
this.login();
});
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.scale.width / 2, 20, '');
// For mobile purposes - we need a big enough touchable area. // For mobile purposes - we need a big enough touchable area.
this.mobileTapRectangle = this.add this.mobileTapZone = this.add.zone(this.scale.width / 2,this.scale.height - 30,200,50)
.rectangle( .setInteractive().on("pointerdown", () => {
this.game.renderer.width / 2,
this.game.renderer.height - 30,
200,
50,
)
.setInteractive()
.on("pointerdown", () => {
this.login(); this.login();
}); });
@ -96,9 +113,6 @@ export class EnableCameraScene extends Phaser.Scene {
this.arrowDown.setInteractive().on('pointerdown', this.nextMic.bind(this)); this.arrowDown.setInteractive().on('pointerdown', this.nextMic.bind(this));
this.add.existing(this.arrowDown); this.add.existing(this.arrowDown);
this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
this.add.existing(this.logo);
this.input.keyboard.on('keyup-ENTER', () => { this.input.keyboard.on('keyup-ENTER', () => {
this.login(); this.login();
}); });
@ -118,8 +132,7 @@ export class EnableCameraScene extends Phaser.Scene {
this.soundMeterSprite.setVisible(false); this.soundMeterSprite.setVisible(false);
this.add.existing(this.soundMeterSprite); this.add.existing(this.soundMeterSprite);
this.repositionCallback = this.reposition.bind(this); this.onResize();
window.addEventListener('resize', this.repositionCallback);
} }
private previousCam(): void { private previousCam(): void {
@ -197,10 +210,9 @@ export class EnableCameraScene extends Phaser.Scene {
this.arrowUp.setVisible(this.microphoneSelected > 0); this.arrowUp.setVisible(this.microphoneSelected > 0);
} }
this.reposition();
} }
private reposition(): void { public onResize(): void {
let div = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup'); let div = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup');
let bounds = div.getBoundingClientRect(); let bounds = div.getBoundingClientRect();
if (!div.srcObject) { if (!div.srcObject) {
@ -209,24 +221,22 @@ export class EnableCameraScene extends Phaser.Scene {
} }
this.textField.x = this.game.renderer.width / 2; this.textField.x = this.game.renderer.width / 2;
this.mobileTapRectangle.x = this.game.renderer.width / 2; this.mobileTapZone.x = this.game.renderer.width / 2;
this.cameraNameField.x = this.game.renderer.width / 2; this.cameraNameField.x = this.game.renderer.width / 2;
this.microphoneNameField.x = this.game.renderer.width / 2; this.microphoneNameField.x = this.game.renderer.width / 2;
this.pressReturnField.x = this.game.renderer.width / 2;
this.pressReturnField.x = this.game.renderer.width / 2;
this.cameraNameField.y = bounds.top / RESOLUTION - 8; this.cameraNameField.y = bounds.top / this.scale.zoom - 8;
this.soundMeterSprite.x = this.game.renderer.width / 2 - this.soundMeterSprite.getWidth() / 2; this.soundMeterSprite.x = this.game.renderer.width / 2 - this.soundMeterSprite.getWidth() / 2;
this.soundMeterSprite.y = bounds.bottom / RESOLUTION + 16; this.soundMeterSprite.y = bounds.bottom / this.scale.zoom + 16;
this.microphoneNameField.y = this.soundMeterSprite.y + 22; this.microphoneNameField.y = this.soundMeterSprite.y + 22;
this.arrowRight.x = bounds.right / RESOLUTION + 16; this.arrowRight.x = bounds.right / this.scale.zoom + 16;
this.arrowRight.y = (bounds.top + bounds.height / 2) / RESOLUTION; this.arrowRight.y = (bounds.top + bounds.height / 2) / this.scale.zoom;
this.arrowLeft.x = bounds.left / RESOLUTION - 16; this.arrowLeft.x = bounds.left / this.scale.zoom - 16;
this.arrowLeft.y = (bounds.top + bounds.height / 2) / RESOLUTION; this.arrowLeft.y = (bounds.top + bounds.height / 2) / this.scale.zoom;
this.arrowDown.x = this.microphoneNameField.x + this.microphoneNameField.width / 2 + 16; this.arrowDown.x = this.microphoneNameField.x + this.microphoneNameField.width / 2 + 16;
this.arrowDown.y = this.microphoneNameField.y; this.arrowDown.y = this.microphoneNameField.y;
@ -234,23 +244,22 @@ export class EnableCameraScene extends Phaser.Scene {
this.arrowUp.x = this.microphoneNameField.x - this.microphoneNameField.width / 2 - 16; this.arrowUp.x = this.microphoneNameField.x - this.microphoneNameField.width / 2 - 16;
this.arrowUp.y = this.microphoneNameField.y; this.arrowUp.y = this.microphoneNameField.y;
this.pressReturnField.y = Math.max(this.game.renderer.height - 30, this.microphoneNameField.y + 20); const actionBtn = document.querySelector<HTMLDivElement>('#enableCameraScene .action');
this.logo.x = this.game.renderer.width - 30; if (actionBtn !== null) {
this.logo.y = Math.max(this.game.renderer.height - 20, this.microphoneNameField.y + 30); actionBtn.style.top = (this.scale.height - 65) + 'px';
}
} }
update(time: number, delta: number): void { update(time: number, delta: number): void {
this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2));
this.soundMeterSprite.setVolume(this.soundMeter.getVolume()); this.soundMeterSprite.setVolume(this.soundMeter.getVolume());
mediaManager.updateScene();
mediaManager.setLastUpdateScene(); this.centerXDomElement(this.enableCameraSceneElement, 300);
} }
private login(): void { private login(): void {
HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none'; HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
this.soundMeter.stop(); this.soundMeter.stop();
window.removeEventListener('resize', this.repositionCallback);
mediaManager.stopCamera(); mediaManager.stopCamera();
mediaManager.stopMicrophone(); mediaManager.stopMicrophone();

View File

@ -2,6 +2,7 @@ import {gameManager} from "../Game/GameManager";
import {Scene} from "phaser"; import {Scene} from "phaser";
import {ErrorScene} from "../Reconnecting/ErrorScene"; import {ErrorScene} from "../Reconnecting/ErrorScene";
import {WAError} from "../Reconnecting/WAError"; import {WAError} from "../Reconnecting/WAError";
import {waScaleManager} from "../Services/WaScaleManager";
export const EntrySceneName = "EntryScene"; export const EntrySceneName = "EntryScene";
@ -17,11 +18,18 @@ export class EntryScene extends Scene {
} }
create() { create() {
gameManager.init(this.scene).then((nextSceneName) => { gameManager.init(this.scene).then((nextSceneName) => {
// Let's rescale before starting the game
// We can do it at this stage.
waScaleManager.applyNewSize();
this.scene.start(nextSceneName); this.scene.start(nextSceneName);
}).catch((err) => { }).catch((err) => {
if (err.response && err.response.status == 404) { if (err.response && err.response.status == 404) {
ErrorScene.showError(new WAError('Page Not Found', 'Could not find map', window.location.pathname), this.scene); ErrorScene.showError(new WAError(
'Access link incorrect',
'Could not find map. Please check your access link.',
'If you want more information, you may contact administrator or contact us at: workadventure@thecodingmachine.com'), this.scene);
} else { } else {
ErrorScene.showError(err, this.scene); ErrorScene.showError(err, this.scene);
} }

View File

@ -1,28 +1,18 @@
import {gameManager} from "../Game/GameManager"; import {gameManager} from "../Game/GameManager";
import {TextField} from "../Components/TextField";
import {TextInput} from "../Components/TextInput";
import Image = Phaser.GameObjects.Image;
import {SelectCharacterSceneName} from "./SelectCharacterScene"; import {SelectCharacterSceneName} from "./SelectCharacterScene";
import {ResizableScene} from "./ResizableScene"; import {ResizableScene} from "./ResizableScene";
import {isUserNameValid, maxUserNameLength} from "../../Connexion/LocalUser";
import { localUserStore } from "../../Connexion/LocalUserStore"; import { localUserStore } from "../../Connexion/LocalUserStore";
import Rectangle = Phaser.GameObjects.Rectangle; import {MenuScene} from "../Menu/MenuScene";
import { isUserNameValid } from "../../Connexion/LocalUser";
//todo: put this constants in a dedicated file
export const LoginSceneName = "LoginScene"; export const LoginSceneName = "LoginScene";
enum LoginTextures {
icon = "icon", const loginSceneKey = 'loginScene';
mainFont = "main_font"
}
export class LoginScene extends ResizableScene { export class LoginScene extends ResizableScene {
private nameInput!: TextInput;
private textField!: TextField; private loginSceneElement!: Phaser.GameObjects.DOMElement;
private infoTextField!: TextField;
private pressReturnField!: TextField;
private logo!: Image;
private name: string = ''; private name: string = '';
private mobileTapRectangle!: Rectangle;
constructor() { constructor() {
super({ super({
@ -32,78 +22,65 @@ export class LoginScene extends ResizableScene {
} }
preload() { preload() {
//this.load.image(LoginTextures.playButton, "resources/objects/play_button.png"); this.load.html(loginSceneKey, 'resources/html/loginScene.html');
this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png");
// Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
} }
create() { create() {
this.loginSceneElement = this.add.dom(-1000, 0).createFromCache(loginSceneKey);
this.centerXDomElement(this.loginSceneElement, 200);
MenuScene.revealMenusAfterInit(this.loginSceneElement, loginSceneKey);
this.nameInput = new TextInput(this, this.game.renderer.width / 2, 70, maxUserNameLength, this.name,(text: string) => { const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement;
this.name = text; const inputElement = this.loginSceneElement.getChildByID('loginSceneName') as HTMLInputElement;
localUserStore.setName(text); inputElement.value = localUserStore.getName() ?? '';
}) inputElement.focus();
.setInteractive() inputElement.addEventListener('keypress', (event: KeyboardEvent) => {
.on('pointerdown', () => { if(inputElement.value.length > 7){
this.nameInput.focus(); event.preventDefault();
}) return;
this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Enter your name:')
.setInteractive()
.on('pointerdown', () => {
this.nameInput.focus();
})
// For mobile purposes - we need a big enough touchable area.
this.mobileTapRectangle = this.add.rectangle(
this.game.renderer.width / 2,
130,
this.game.renderer.width / 2,
60,
).setInteractive()
.on('pointerdown', () => {
this.login(this.name)
})
this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Touch here\n\n or \n\nPress enter to start')
this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
this.add.existing(this.logo);
const infoText = "Commands: \n - Arrows or W, A, S, D to move\n - SHIFT to run";
this.infoTextField = new TextField(this, 10, this.game.renderer.height - 35, infoText, false);
this.input.keyboard.on('keyup-ENTER', () => {
if (isUserNameValid(this.name)) {
this.login(this.name);
} }
pErrorElement.innerHTML = '';
if(inputElement.value && !isUserNameValid(inputElement.value)){
pErrorElement.innerHTML = 'Invalid user name: only letters and numbers are allowed. No spaces.';
}
if (event.key === 'Enter') {
event.preventDefault();
this.login(inputElement);
return;
}
});
const continuingButton = this.loginSceneElement.getChildByID('loginSceneFormSubmit') as HTMLButtonElement;
continuingButton.addEventListener('click', (e) => {
e.preventDefault();
this.login(inputElement);
}); });
} }
update(time: number, delta: number): void { private login(inputElement: HTMLInputElement): void {
if (this.name == '') { const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement;
this.pressReturnField?.setVisible(false); this.name = inputElement.value;
} else { if (this.name === '') {
this.pressReturnField?.setVisible(!!(Math.floor(time / 500) % 2)); pErrorElement.innerHTML = 'The name is empty';
return
} }
if(!isUserNameValid(this.name)){
pErrorElement.innerHTML = 'Invalid user name: only letters and numbers are allowed. No spaces.';
return
} }
private login(name: string): void {
if (this.name === '') return if (this.name === '') return
gameManager.setPlayerName(name); gameManager.setPlayerName(this.name);
this.scene.stop(LoginSceneName) this.scene.stop(LoginSceneName)
gameManager.tryResumingGame(this, SelectCharacterSceneName); gameManager.tryResumingGame(this, SelectCharacterSceneName);
this.scene.remove(LoginSceneName) this.scene.remove(LoginSceneName)
} }
public onResize(ev: UIEvent): void { update(time: number, delta: number): void {
this.textField.x = this.game.renderer.width / 2;
this.nameInput.setX(this.game.renderer.width / 2 - 64);
this.pressReturnField.x = this.game.renderer.width / 2;
this.mobileTapRectangle.x = this.game.renderer.width / 2;
this.logo.x = this.game.renderer.width - 30;
this.logo.y = this.game.renderer.height - 20;
this.infoTextField.y = this.game.renderer.height - 35;
}
} }
public onResize(ev: UIEvent): void {
this.centerXDomElement(this.loginSceneElement, 200);
}
}

View File

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

View File

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

View File

@ -1,275 +1,251 @@
import {gameManager} from "../Game/GameManager"; import {gameManager} from "../Game/GameManager";
import {TextField} from "../Components/TextField";
import Image = Phaser.GameObjects.Image; import Image = Phaser.GameObjects.Image;
import Rectangle = Phaser.GameObjects.Rectangle; import Rectangle = Phaser.GameObjects.Rectangle;
import {EnableCameraSceneName} from "./EnableCameraScene"; import {EnableCameraSceneName} from "./EnableCameraScene";
import {CustomizeSceneName} from "./CustomizeScene"; import {CustomizeSceneName} from "./CustomizeScene";
import {ResizableScene} from "./ResizableScene";
import {localUserStore} from "../../Connexion/LocalUserStore"; import {localUserStore} from "../../Connexion/LocalUserStore";
import {loadAllDefaultModels, loadCustomTexture} from "../Entity/PlayerTexturesLoadingManager"; import {loadAllDefaultModels} from "../Entity/PlayerTexturesLoadingManager";
import {addLoader} from "../Components/Loader"; import {addLoader} from "../Components/Loader";
import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures"; import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
import {AbstractCharacterScene} from "./AbstractCharacterScene"; import {AbstractCharacterScene} from "./AbstractCharacterScene";
import {areCharacterLayersValid} from "../../Connexion/LocalUser"; import {areCharacterLayersValid} from "../../Connexion/LocalUser";
import {touchScreenManager} from "../../Touch/TouchScreenManager";
import {PinchManager} from "../UserInput/PinchManager";
import {MenuScene} from "../Menu/MenuScene";
import { SelectCharacterMobileScene } from "./SelectCharacterMobileScene";
//todo: put this constants in a dedicated file //todo: put this constants in a dedicated file
export const SelectCharacterSceneName = "SelectCharacterScene"; export const SelectCharacterSceneName = "SelectCharacterScene";
enum LoginTextures {
playButton = "play_button", const selectCharacterKey = 'selectCharacterScene';
icon = "icon",
mainFont = "main_font",
customizeButton = "customize_button",
customizeButtonSelected = "customize_button_selected"
}
export class SelectCharacterScene extends AbstractCharacterScene { export class SelectCharacterScene extends AbstractCharacterScene {
private readonly nbCharactersPerRow = 6; protected readonly nbCharactersPerRow = 6;
private textField!: TextField; protected selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option
private pressReturnField!: TextField; protected players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
private logo!: Image; protected playerModels!: BodyResourceDescriptionInterface[];
private customizeButton!: Image;
private customizeButtonSelected!: Image;
private selectedRectangle!: Rectangle; protected selectedRectangle!: Rectangle;
private selectedRectangleXPos = 0; // Number of the character selected in the rows
private selectedRectangleYPos = 0; // Number of the character selected in the columns protected selectCharacterSceneElement!: Phaser.GameObjects.DOMElement;
private selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option protected currentSelectUser = 0;
private players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
private mobileTapRectangle!: Rectangle;
private playerModels!: BodyResourceDescriptionInterface[];
constructor() { constructor() {
super({ super({
key: SelectCharacterSceneName key: SelectCharacterSceneName,
}); });
} }
preload() { preload() {
addLoader(this); this.load.html(selectCharacterKey, 'resources/html/selectCharacterScene.html');
this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => { this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => {
bodyResourceDescriptions.forEach((bodyResourceDescription) => { bodyResourceDescriptions.forEach((bodyResourceDescription) => {
this.playerModels.push(bodyResourceDescription); this.playerModels.push(bodyResourceDescription);
}); });
}) })
this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png");
// Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
this.playerModels = loadAllDefaultModels(this.load); this.playerModels = loadAllDefaultModels(this.load);
this.load.image(LoginTextures.customizeButton, 'resources/objects/customize.png');
this.load.image(LoginTextures.customizeButtonSelected, 'resources/objects/customize_selected.png');
//this function must stay at the end of preload function
addLoader(this); addLoader(this);
} }
create() { create() {
this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Select your character');
this.pressReturnField = new TextField( this.selectCharacterSceneElement = this.add.dom(-1000, 0).createFromCache(selectCharacterKey);
this, this.centerXDomElement(this.selectCharacterSceneElement, 150);
this.game.renderer.width / 2, MenuScene.revealMenusAfterInit(this.selectCharacterSceneElement, selectCharacterKey);
90 + 32 * Math.ceil( this.playerModels.length / this.nbCharactersPerRow) + 60,
'Touch here\n\n or \n\nPress enter to start'); this.selectCharacterSceneElement.addListener('click');
// For mobile purposes - we need a big enough touchable area. this.selectCharacterSceneElement.on('click', (event:MouseEvent) => {
this.mobileTapRectangle = this.add event.preventDefault();
.rectangle( if((event?.target as HTMLInputElement).id === 'selectCharacterButtonLeft') {
this.game.renderer.width / 2, this.moveToLeft();
275, }else if((event?.target as HTMLInputElement).id === 'selectCharacterButtonRight') {
this.game.renderer.width / 2, this.moveToRight();
50, }else if((event?.target as HTMLInputElement).id === 'selectCharacterSceneFormSubmit') {
) this.nextSceneToCameraScene();
.setInteractive() }else if((event?.target as HTMLInputElement).id === 'selectCharacterSceneFormCustomYourOwnSubmit') {
.on("pointerdown", () => { this.nextSceneToCustomizeScene();
this.nextScene(); }
}); });
if (touchScreenManager.supportTouchScreen) {
new PinchManager(this);
}
const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16; const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xFFFFFF); this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xFFFFFF);
this.selectedRectangle.setDepth(2);
this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
this.add.existing(this.logo);
this.input.keyboard.on('keyup-ENTER', () => {
return this.nextScene();
});
this.input.keyboard.on('keydown-RIGHT', () => {
if(this.selectedRectangleYPos * this.nbCharactersPerRow + (this.selectedRectangleXPos + 2))
if (
this.selectedRectangleXPos < this.nbCharactersPerRow - 1
&& ((this.selectedRectangleYPos * this.nbCharactersPerRow) + (this.selectedRectangleXPos + 1) + 1) <= this.playerModels.length
) {
this.selectedRectangleXPos++;
}
this.updateSelectedPlayer();
});
this.input.keyboard.on('keydown-LEFT', () => {
if (
this.selectedRectangleXPos > 0
&& ((this.selectedRectangleYPos * this.nbCharactersPerRow) + (this.selectedRectangleXPos - 1) + 1) <= this.playerModels.length
) {
this.selectedRectangleXPos--;
}
this.updateSelectedPlayer();
});
this.input.keyboard.on('keydown-DOWN', () => {
if (
this.selectedRectangleYPos < Math.ceil(this.playerModels.length / this.nbCharactersPerRow)
&& (
(((this.selectedRectangleYPos + 1) * this.nbCharactersPerRow) + this.selectedRectangleXPos + 1) <= this.playerModels.length // check if player isn't empty
|| (this.selectedRectangleYPos + 1) === Math.ceil(this.playerModels.length / this.nbCharactersPerRow) // check if is custom rectangle
)
) {
this.selectedRectangleYPos++;
}
this.updateSelectedPlayer();
});
this.input.keyboard.on('keydown-UP', () => {
if (
this.selectedRectangleYPos > 0
&& (((this.selectedRectangleYPos - 1) * this.nbCharactersPerRow) + this.selectedRectangleXPos + 1) <= this.playerModels.length
) {
this.selectedRectangleYPos--;
}
this.updateSelectedPlayer();
});
/*create user*/ /*create user*/
this.createCurrentPlayer(); this.createCurrentPlayer();
const playerNumber = localUserStore.getPlayerCharacterIndex(); const playerNumber = localUserStore.getPlayerCharacterIndex();
if (playerNumber && playerNumber !== -1) {
this.selectedRectangleXPos = playerNumber % this.nbCharactersPerRow; this.input.keyboard.on('keyup-ENTER', () => {
this.selectedRectangleYPos = Math.floor(playerNumber / this.nbCharactersPerRow); return this.nextSceneToCameraScene();
this.updateSelectedPlayer(); });
} else if (playerNumber === -1) {
this.selectedRectangleYPos = Math.ceil(this.playerModels.length / this.nbCharactersPerRow); this.input.keyboard.on('keydown-RIGHT', () => {
this.updateSelectedPlayer(); this.moveToRight();
} });
this.input.keyboard.on('keydown-LEFT', () => {
this.moveToLeft();
});
this.input.keyboard.on('keydown-UP', () => {
this.moveToUp();
});
this.input.keyboard.on('keydown-DOWN', () => {
this.moveToDown();
});
} }
update(time: number, delta: number): void { protected nextSceneToCameraScene(): void {
this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2));
}
private nextScene(): void {
if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) { if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
return; return;
} }
if(!this.selectedPlayer){
return;
}
this.scene.stop(SelectCharacterSceneName); this.scene.stop(SelectCharacterSceneName);
if (this.selectedPlayer !== null) {
gameManager.setCharacterLayers([this.selectedPlayer.texture.key]); gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
gameManager.tryResumingGame(this, EnableCameraSceneName); gameManager.tryResumingGame(this, EnableCameraSceneName);
} else {
this.scene.run(CustomizeSceneName);
}
this.scene.remove(SelectCharacterSceneName); this.scene.remove(SelectCharacterSceneName);
} }
protected nextSceneToCustomizeScene(): void {
if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
return;
}
this.scene.sleep(SelectCharacterSceneName);
this.scene.run(CustomizeSceneName);
}
createCurrentPlayer(): void { createCurrentPlayer(): void {
for (let i = 0; i <this.playerModels.length; i++) { for (let i = 0; i <this.playerModels.length; i++) {
const playerResource = this.playerModels[i]; const playerResource = this.playerModels[i];
const col = i % this.nbCharactersPerRow; const [middleX, middleY] = this.getCharacterPosition();
const row = Math.floor(i / this.nbCharactersPerRow); const player = this.physics.add.sprite(middleX, middleY, playerResource.name, 0);
this.setUpPlayer(player, i);
const [x, y] = this.getCharacterPosition(col, row);
const player = this.physics.add.sprite(x, y, playerResource.name, 0);
player.setBounce(0.2);
player.setCollideWorldBounds(true);
this.anims.create({ this.anims.create({
key: playerResource.name, key: playerResource.name,
frames: this.anims.generateFrameNumbers(playerResource.name, {start: 0, end: 2,}), frames: this.anims.generateFrameNumbers(playerResource.name, {start: 0, end: 11}),
frameRate: 10, frameRate: 8,
repeat: -1 repeat: -1
}); });
player.setInteractive().on("pointerdown", () => { player.setInteractive().on("pointerdown", () => {
this.selectedRectangleXPos = col; if(this.currentSelectUser === i){
this.selectedRectangleYPos = row; return;
this.updateSelectedPlayer(); }
this.currentSelectUser = i;
this.moveUser();
}); });
this.players.push(player); this.players.push(player);
} }
const maxRow = Math.ceil( this.playerModels.length / this.nbCharactersPerRow); this.selectedPlayer = this.players[this.currentSelectUser];
this.customizeButton = new Image(this, this.game.renderer.width / 2, 90 + 32 * maxRow + 6, LoginTextures.customizeButton); this.selectedPlayer.play(this.playerModels[this.currentSelectUser].name);
this.customizeButton.setOrigin(0.5, 0.5); }
this.add.existing(this.customizeButton);
this.customizeButtonSelected = new Image(this, this.game.renderer.width / 2, 90 + 32 * maxRow + 6, LoginTextures.customizeButtonSelected);
this.customizeButtonSelected.setOrigin(0.5, 0.5);
this.customizeButtonSelected.setVisible(false);
this.add.existing(this.customizeButtonSelected);
this.customizeButton.setInteractive().on("pointerdown", () => { protected moveUser(){
this.selectedRectangleYPos = Math.ceil(this.playerModels.length / this.nbCharactersPerRow); for(let i = 0; i < this.players.length; i++){
const player = this.players[i];
this.setUpPlayer(player, i);
}
this.updateSelectedPlayer(); this.updateSelectedPlayer();
this.nextScene(); }
});
this.customizeButtonSelected.setInteractive().on("pointerdown", () => {
this.nextScene();
});
this.selectedPlayer = this.players[0]; protected moveToLeft(){
this.selectedPlayer.play(this.playerModels[0].name); if(this.currentSelectUser === 0){
return;
}
this.currentSelectUser -= 1;
this.moveUser();
}
protected moveToRight(){
if(this.currentSelectUser === (this.players.length - 1)){
return;
}
this.currentSelectUser += 1;
this.moveUser();
}
protected moveToUp(){
if(this.currentSelectUser < this.nbCharactersPerRow){
return;
}
this.currentSelectUser -= this.nbCharactersPerRow;
this.moveUser();
}
protected moveToDown(){
if((this.currentSelectUser + this.nbCharactersPerRow) > (this.players.length - 1)){
return;
}
this.currentSelectUser += this.nbCharactersPerRow;
this.moveUser();
}
protected defineSetupPlayer(numero: number){
const deltaX = 32;
const deltaY = 32;
let [playerX, playerY] = this.getCharacterPosition(); // player X and player y are middle of the
playerX = ( (playerX - (deltaX * 2.5)) + ((deltaX) * (numero % this.nbCharactersPerRow)) ); // calcul position on line users
playerY = ( (playerY - (deltaY * 2)) + ((deltaY) * ( Math.floor(numero / this.nbCharactersPerRow) )) ); // calcul position on column users
const playerVisible = true;
const playerScale = 1;
const playserOpactity = 1;
// if selected
if( numero === this.currentSelectUser ){
this.selectedRectangle.setX(playerX);
this.selectedRectangle.setY(playerY);
}
return {playerX, playerY, playerScale, playserOpactity, playerVisible}
}
protected setUpPlayer(player: Phaser.Physics.Arcade.Sprite, numero: number){
const {playerX, playerY, playerScale, playserOpactity, playerVisible} = this.defineSetupPlayer(numero);
player.setBounce(0.2);
player.setCollideWorldBounds(true);
player.setVisible( playerVisible );
player.setScale(playerScale, playerScale);
player.setAlpha(playserOpactity);
player.setX(playerX);
player.setY(playerY);
} }
/** /**
* Returns pixel position by on column and row number * Returns pixel position by on column and row number
*/ */
private getCharacterPosition(x: number, y: number): [number, number] { protected getCharacterPosition(): [number, number] {
return [ return [
this.game.renderer.width / 2 + 16 + (x - this.nbCharactersPerRow / 2) * 32, this.game.renderer.width / 2,
y * 32 + 90 this.game.renderer.height / 2.5
]; ];
} }
private updateSelectedPlayer(): void { protected updateSelectedPlayer(): void {
this.selectedPlayer?.anims.pause(); this.selectedPlayer?.anims.pause(this.selectedPlayer?.anims.currentAnim.frames[0]);
// If we selected the customize button const player = this.players[this.currentSelectUser];
if (this.selectedRectangleYPos === Math.ceil(this.playerModels.length / this.nbCharactersPerRow)) { player.play(this.playerModels[this.currentSelectUser].name);
this.selectedPlayer = null;
this.selectedRectangle.setVisible(false);
this.customizeButtonSelected.setVisible(true);
this.customizeButton.setVisible(false);
localUserStore.setPlayerCharacterIndex(-1);
return;
}
this.customizeButtonSelected.setVisible(false);
this.customizeButton.setVisible(true);
const [x, y] = this.getCharacterPosition(this.selectedRectangleXPos, this.selectedRectangleYPos);
this.selectedRectangle.setVisible(true);
this.selectedRectangle.setX(x);
this.selectedRectangle.setY(y);
this.selectedRectangle.setSize(32, 32);
const playerNumber = this.selectedRectangleXPos + this.selectedRectangleYPos * this.nbCharactersPerRow;
const player = this.players[playerNumber];
player.play(this.playerModels[playerNumber].name);
this.selectedPlayer = player; this.selectedPlayer = player;
localUserStore.setPlayerCharacterIndex(playerNumber); localUserStore.setPlayerCharacterIndex(this.currentSelectUser);
}
update(time: number, delta: number): void {
} }
public onResize(ev: UIEvent): void { public onResize(ev: UIEvent): void {
this.textField.x = this.game.renderer.width / 2; //move position of user
this.pressReturnField.x = this.game.renderer.width / 2; this.moveUser();
this.logo.x = this.game.renderer.width - 30;
this.logo.y = this.game.renderer.height - 20;
this.customizeButton.x = this.game.renderer.width / 2;
this.customizeButtonSelected.x = this.game.renderer.width / 2;
for (let i = 0; i <this.playerModels.length; i++) { this.centerXDomElement(this.selectCharacterSceneElement, 150);
const player = this.players[i];
const col = i % this.nbCharactersPerRow;
const row = Math.floor(i / this.nbCharactersPerRow);
const [x, y] = this.getCharacterPosition(col, row);
player.x = x;
player.y = y;
} }
this.updateSelectedPlayer();
}
} }

View File

@ -3,33 +3,25 @@ import Rectangle = Phaser.GameObjects.Rectangle;
import { addLoader } from "../Components/Loader"; import { addLoader } from "../Components/Loader";
import { gameManager} from "../Game/GameManager"; import { gameManager} from "../Game/GameManager";
import { ResizableScene } from "./ResizableScene"; import { ResizableScene } from "./ResizableScene";
import { TextField } from "../Components/TextField";
import { EnableCameraSceneName } from "./EnableCameraScene"; import { EnableCameraSceneName } from "./EnableCameraScene";
import { localUserStore } from "../../Connexion/LocalUserStore"; import { localUserStore } from "../../Connexion/LocalUserStore";
import { CompanionResourceDescriptionInterface } from "../Companion/CompanionTextures"; import { CompanionResourceDescriptionInterface } from "../Companion/CompanionTextures";
import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingManager"; import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingManager";
import {touchScreenManager} from "../../Touch/TouchScreenManager";
import {PinchManager} from "../UserInput/PinchManager";
import { MenuScene } from "../Menu/MenuScene";
export const SelectCompanionSceneName = "SelectCompanionScene"; export const SelectCompanionSceneName = "SelectCompanionScene";
enum LoginTextures { const selectCompanionSceneKey = 'selectCompanionScene';
playButton = "play_button",
icon = "icon",
mainFont = "main_font"
}
export class SelectCompanionScene extends ResizableScene { export class SelectCompanionScene extends ResizableScene {
private logo!: Image;
private textField!: TextField;
private pressReturnField!: TextField;
private readonly nbCharactersPerRow = 7;
private selectedRectangle!: Rectangle;
private selectedCompanion!: Phaser.Physics.Arcade.Sprite; private selectedCompanion!: Phaser.Physics.Arcade.Sprite;
private companions: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>(); private companions: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
private companionModels: Array<CompanionResourceDescriptionInterface|null> = [null]; private companionModels: Array<CompanionResourceDescriptionInterface> = [];
private confirmTouchArea!: Rectangle; private selectCompanionSceneElement!: Phaser.GameObjects.DOMElement;
private currentCompanion = 0;
constructor() { constructor() {
super({ super({
@ -38,206 +30,199 @@ export class SelectCompanionScene extends ResizableScene {
} }
preload() { preload() {
addLoader(this); this.load.html(selectCompanionSceneKey, 'resources/html/SelectCompanionScene.html');
getAllCompanionResources(this.load).forEach(model => { getAllCompanionResources(this.load).forEach(model => {
this.companionModels.push(model); this.companionModels.push(model);
}); });
this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png"); //this function must stay at the end of preload function
this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
// Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
addLoader(this); addLoader(this);
} }
create() { create() {
this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Select your companion');
const confirmTouchAreaY = 115 + 32 * Math.ceil(this.companionModels.length / this.nbCharactersPerRow); this.selectCompanionSceneElement = this.add.dom(-1000, 0).createFromCache(selectCompanionSceneKey);
this.pressReturnField = new TextField( this.centerXDomElement(this.selectCompanionSceneElement, 150);
this, MenuScene.revealMenusAfterInit(this.selectCompanionSceneElement, selectCompanionSceneKey);
this.game.renderer.width / 2,
confirmTouchAreaY,
'Touch here\n\n or \n\n press enter to start'
);
this.confirmTouchArea = this.add
.rectangle(this.game.renderer.width / 2, confirmTouchAreaY, 200, 50)
.setInteractive()
.on("pointerdown", this.nextScene.bind(this));
const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16; this.selectCompanionSceneElement.addListener('click');
this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xFFFFFF); this.selectCompanionSceneElement.on('click', (event:MouseEvent) => {
event.preventDefault();
if((event?.target as HTMLInputElement).id === 'selectCharacterButtonLeft') {
this.moveToLeft();
}else if((event?.target as HTMLInputElement).id === 'selectCharacterButtonRight') {
this.moveToRight();
}else if((event?.target as HTMLInputElement).id === 'selectCompanionSceneFormSubmit') {
this.nextScene();
}else if((event?.target as HTMLInputElement).id === 'selectCompanionSceneFormBack') {
this._nextScene();
}
});
this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon); if (touchScreenManager.supportTouchScreen) {
this.add.existing(this.logo); new PinchManager(this);
}
// input events // input events
this.input.keyboard.on('keyup-ENTER', this.nextScene.bind(this)); this.input.keyboard.on('keyup-ENTER', this.nextScene.bind(this));
this.input.keyboard.on('keydown-RIGHT', this.selectNext.bind(this)); this.input.keyboard.on('keydown-RIGHT', this.moveToRight.bind(this));
this.input.keyboard.on('keydown-LEFT', this.selectPrevious.bind(this)); this.input.keyboard.on('keydown-LEFT', this.moveToLeft.bind(this));
this.input.keyboard.on('keydown-DOWN', this.jumpToNextRow.bind(this));
this.input.keyboard.on('keydown-UP', this.jumpToPreviousRow.bind(this)); if(localUserStore.getCompanion()){
const companionIndex = this.companionModels.findIndex((companion) => companion.name === localUserStore.getCompanion());
if(companionIndex > -1 || companionIndex < this.companions.length){
this.currentCompanion = companionIndex;
this.selectedCompanion = this.companions[companionIndex];
}
}
localUserStore.setCompanion(null);
gameManager.setCompanion(null);
this.createCurrentCompanion(); this.createCurrentCompanion();
this.selectCompanion(this.getCompanionIndex()); this.updateSelectedCompanion();
} }
update(time: number, delta: number): void { update(time: number, delta: number): void {
this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2));
}
private jumpToPreviousRow(): void {
const index = this.companions.indexOf(this.selectedCompanion) - this.nbCharactersPerRow;
if (index >= 0) {
this.selectCompanion(index);
}
}
private jumpToNextRow(): void {
const index = this.companions.indexOf(this.selectedCompanion) + this.nbCharactersPerRow;
if (index < this.companions.length) {
this.selectCompanion(index);
}
}
private selectPrevious(): void {
const index = this.companions.indexOf(this.selectedCompanion);
this.selectCompanion(index - 1);
}
private selectNext(): void {
const index = this.companions.indexOf(this.selectedCompanion);
this.selectCompanion(index + 1);
}
private selectCompanion(index?: number): void {
if (typeof index === 'undefined') {
index = this.companions.indexOf(this.selectedCompanion);
}
// make sure index is inside possible range
index = Math.min(this.companions.length - 1, Math.max(0, index));
if (this.selectedCompanion === this.companions[index]) {
return;
}
this.selectedCompanion.anims.pause();
this.selectedCompanion = this.companions[index];
this.redrawSelectedRectangle();
const model = this.companionModels[index];
if (model !== null) {
this.selectedCompanion.anims.play(model.name);
}
}
private redrawSelectedRectangle(): void {
this.selectedRectangle.setVisible(true);
this.selectedRectangle.setX(this.selectedCompanion.x);
this.selectedRectangle.setY(this.selectedCompanion.y);
this.selectedRectangle.setSize(32, 32);
}
private storeCompanionSelection(): string|null {
const index = this.companions.indexOf(this.selectedCompanion);
const model = this.companionModels[index];
const companion = model === null ? null : model.name;
localUserStore.setCompanion(companion);
return companion;
} }
private nextScene(): void { private nextScene(): void {
const companion = this.storeCompanionSelection(); localUserStore.setCompanion(this.companionModels[this.currentCompanion].name);
gameManager.setCompanion(this.companionModels[this.currentCompanion].name);
this._nextScene();
}
private _nextScene(){
// next scene // next scene
this.scene.stop(SelectCompanionSceneName); this.scene.stop(SelectCompanionSceneName);
gameManager.setCompanion(companion);
gameManager.tryResumingGame(this, EnableCameraSceneName); gameManager.tryResumingGame(this, EnableCameraSceneName);
this.scene.remove(SelectCompanionSceneName); this.scene.remove(SelectCompanionSceneName);
} }
private createCurrentCompanion(): void { private createCurrentCompanion(): void {
for (let i = 0; i < this.companionModels.length; i++) { for (let i = 0; i < this.companionModels.length; i++) {
const companionResource = this.companionModels[i]; const companionResource = this.companionModels[i]
const [middleX, middleY] = this.getCompanionPosition();
const col = i % this.nbCharactersPerRow; const companion = this.physics.add.sprite(middleX, middleY, companionResource.name, 0);
const row = Math.floor(i / this.nbCharactersPerRow); this.setUpCompanion(companion, i);
const [x, y] = this.getCharacterPosition(col, row);
let name = "null";
if (companionResource !== null) {
name = companionResource.name;
}
const companion = this.physics.add.sprite(x, y, name, 0);
companion.setBounce(0.2);
companion.setCollideWorldBounds(true);
if (companionResource !== null) {
this.anims.create({ this.anims.create({
key: name, key: companionResource.name,
frames: this.anims.generateFrameNumbers(name, {start: 0, end: 2,}), frames: this.anims.generateFrameNumbers(companionResource.name, {start: 0, end: 2,}),
frameRate: 10, frameRate: 10,
repeat: -1 repeat: -1
}); });
}
companion.setInteractive().on("pointerdown", () => { companion.setInteractive().on("pointerdown", () => {
this.selectCompanion(i); this.currentCompanion = i;
this.moveCompanion();
}); });
this.companions.push(companion); this.companions.push(companion);
} }
this.selectedCompanion = this.companions[this.currentCompanion];
this.selectedCompanion = this.companions[0];
}
private getCharacterPosition(x: number, y: number): [number, number] {
return [
this.game.renderer.width / 2 + 16 + (x - this.nbCharactersPerRow / 2) * 32,
y * 32 + 90
];
} }
public onResize(ev: UIEvent): void { public onResize(ev: UIEvent): void {
this.textField.x = this.game.renderer.width / 2; this.moveCompanion();
this.pressReturnField.x = this.game.renderer.width / 2;
this.logo.x = this.game.renderer.width - 30;
this.logo.y = this.game.renderer.height - 20;
for (let i = 0; i < this.companionModels.length; i++) { this.centerXDomElement(this.selectCompanionSceneElement, 150);
}
private updateSelectedCompanion(): void {
this.selectedCompanion?.anims.pause();
const companion = this.companions[this.currentCompanion];
companion.play(this.companionModels[this.currentCompanion].name);
this.selectedCompanion = companion;
}
private moveCompanion(){
for(let i = 0; i < this.companions.length; i++){
const companion = this.companions[i]; const companion = this.companions[i];
this.setUpCompanion(companion, i);
const col = i % this.nbCharactersPerRow; }
const row = Math.floor(i / this.nbCharactersPerRow); this.updateSelectedCompanion();
const [x, y] = this.getCharacterPosition(col, row);
companion.x = x;
companion.y = y;
} }
this.redrawSelectedRectangle(); private moveToLeft(){
if(this.currentCompanion === 0){
return;
}
this.currentCompanion -= 1;
this.moveCompanion();
} }
private getCompanionIndex(): number { private moveToRight(){
const companion = localUserStore.getCompanion(); if(this.currentCompanion === (this.companions.length - 1)){
return;
if (companion === null) { }
return 0; this.currentCompanion += 1;
this.moveCompanion();
} }
return this.companionModels.findIndex(model => model !== null && model.name === companion); private defineSetupCompanion(numero: number){
const deltaX = 30;
const deltaY = 2;
let [companionX, companionY] = this.getCompanionPosition();
let companionVisible = true;
let companionScale = 1.5;
let companionOpactity = 1;
if( this.currentCompanion !== numero ){
companionVisible = false;
}
if( numero === (this.currentCompanion + 1) ){
companionY -= deltaY;
companionX += deltaX;
companionScale = 0.8;
companionOpactity = 0.6;
companionVisible = true;
}
if( numero === (this.currentCompanion + 2) ){
companionY -= deltaY;
companionX += (deltaX * 2);
companionScale = 0.8;
companionOpactity = 0.6;
companionVisible = true;
}
if( numero === (this.currentCompanion - 1) ){
companionY -= deltaY;
companionX -= deltaX;
companionScale = 0.8;
companionOpactity = 0.6;
companionVisible = true;
}
if( numero === (this.currentCompanion - 2) ){
companionY -= deltaY;
companionX -= (deltaX * 2);
companionScale = 0.8;
companionOpactity = 0.6;
companionVisible = true;
}
return {companionX, companionY, companionScale, companionOpactity, companionVisible}
}
/**
* Returns pixel position by on column and row number
*/
private getCompanionPosition(): [number, number] {
return [
this.game.renderer.width / 2,
this.game.renderer.height / 3
];
}
private setUpCompanion(companion: Phaser.Physics.Arcade.Sprite, numero: number){
const {companionX, companionY, companionScale, companionOpactity, companionVisible} = this.defineSetupCompanion(numero);
companion.setBounce(0.2);
companion.setCollideWorldBounds(true);
companion.setVisible( companionVisible );
companion.setScale(companionScale, companionScale);
companion.setAlpha(companionOpactity);
companion.setX(companionX);
companion.setY(companionY);
} }
} }

View File

@ -14,7 +14,7 @@ export interface ITiledMap {
* Map orientation (orthogonal) * Map orientation (orthogonal)
*/ */
orientation: string; orientation: string;
properties: ITiledMapLayerProperty[]; properties?: ITiledMapLayerProperty[];
/** /**
* Render order (right-down) * Render order (right-down)
@ -24,6 +24,11 @@ export interface ITiledMap {
tilewidth: number; tilewidth: number;
tilesets: ITiledTileSet[]; tilesets: ITiledTileSet[];
version: number; version: number;
compressionlevel?: number;
infinite?: boolean;
nextlayerid?: number;
tiledversion?: string;
type?: string;
} }
export interface ITiledMapLayerProperty { export interface ITiledMapLayerProperty {
@ -38,19 +43,35 @@ export interface ITiledMapLayerProperty {
value: boolean value: boolean
}*/ }*/
export interface ITiledMapLayer { export type ITiledMapLayer = ITiledMapGroupLayer | ITiledMapObjectLayer | ITiledMapTileLayer;
export interface ITiledMapGroupLayer {
id?: number,
name: string;
opacity: number;
properties?: ITiledMapLayerProperty[];
type: "group";
visible: boolean;
x: number;
y: number;
/**
* Layers for group layer
*/
layers: ITiledMapLayer[];
}
export interface ITiledMapTileLayer {
id?: number,
data: number[]|string; data: number[]|string;
height: number; height: number;
name: string; name: string;
opacity: number; opacity: number;
properties: ITiledMapLayerProperty[]; properties?: ITiledMapLayerProperty[];
encoding: string; encoding?: string;
compression?: string; compression?: string;
/** type: "tilelayer";
* Type of layer (tilelayer, objectgroup)
*/
type: string;
visible: boolean; visible: boolean;
width: number; width: number;
x: number; x: number;
@ -59,7 +80,28 @@ export interface ITiledMapLayer {
/** /**
* Draw order (topdown (default), index) * Draw order (topdown (default), index)
*/ */
draworder: string; draworder?: string;
}
export interface ITiledMapObjectLayer {
id?: number,
height: number;
name: string;
opacity: number;
properties?: ITiledMapLayerProperty[];
encoding?: string;
compression?: string;
type: "objectgroup";
visible: boolean;
width: number;
x: number;
y: number;
/**
* Draw order (topdown (default), index)
*/
draworder?: string;
objects: ITiledMapObject[]; objects: ITiledMapObject[];
} }
@ -94,6 +136,20 @@ export interface ITiledMapObject {
* Polyline points * Polyline points
*/ */
polyline: {x: number, y: number}[]; polyline: {x: number, y: number}[];
text?: ITiledText
}
export interface ITiledText {
text: string,
wrap?: boolean,
fontfamily?: string,
pixelsize?: number,
color?: string,
underline?: boolean,
italic?: boolean,
strikeout?: boolean,
halign?: "center"|"right"|"justify"|"left"
} }
export interface ITiledTileSet { export interface ITiledTileSet {

View File

@ -0,0 +1,44 @@
import {ITiledMap, ITiledMapLayer} from "./ITiledMap";
/**
* Iterates over the layers of a map, flattening the grouped layers
*/
export class LayersIterator implements IterableIterator<ITiledMapLayer> {
private layers: ITiledMapLayer[] = [];
private pointer: number = 0;
constructor(private map: ITiledMap) {
this.initLayersList(map.layers, '');
}
private initLayersList(layers : ITiledMapLayer[], prefix : string) {
for (const layer of layers) {
if (layer.type === 'group') {
this.initLayersList(layer.layers, prefix + layer.name + '/');
} else {
const layerWithNewName = { ...layer };
layerWithNewName.name = prefix+layerWithNewName.name;
this.layers.push(layerWithNewName);
}
}
}
public next(): IteratorResult<ITiledMapLayer> {
if (this.pointer < this.layers.length) {
return {
done: false,
value: this.layers[this.pointer++]
}
} else {
return {
done: true,
value: null
}
}
}
[Symbol.iterator](): IterableIterator<ITiledMapLayer> {
return new LayersIterator(this.map);
}
}

View File

@ -1,13 +1,14 @@
import {mediaManager} from "../../WebRtc/MediaManager"; import {mediaManager} from "../../WebRtc/MediaManager";
import {HtmlUtils} from "../../WebRtc/HtmlUtils"; import {HtmlUtils} from "../../WebRtc/HtmlUtils";
import {localUserStore} from "../../Connexion/LocalUserStore"; import {localUserStore} from "../../Connexion/LocalUserStore";
import {DirtyScene} from "../Game/DirtyScene";
export const HelpCameraSettingsSceneName = 'HelpCameraSettingsScene'; export const HelpCameraSettingsSceneName = 'HelpCameraSettingsScene';
const helpCameraSettings = 'helpCameraSettings'; const helpCameraSettings = 'helpCameraSettings';
/** /**
* The scene that show how to permit Camera and Microphone access if there are not already allowed * The scene that show how to permit Camera and Microphone access if there are not already allowed
*/ */
export class HelpCameraSettingsScene extends Phaser.Scene { export class HelpCameraSettingsScene extends DirtyScene {
private helpCameraSettingsElement!: Phaser.GameObjects.DOMElement; private helpCameraSettingsElement!: Phaser.GameObjects.DOMElement;
private helpCameraSettingsOpened: boolean = false; private helpCameraSettingsOpened: boolean = false;
@ -20,16 +21,18 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
} }
create(){ create(){
localUserStore.setHelpCameraSettingsShown();
this.createHelpCameraSettings(); this.createHelpCameraSettings();
} }
private createHelpCameraSettings() : void { private createHelpCameraSettings() : void {
const middleX = (window.innerWidth / 3) - (370*0.85); const middleX = this.getMiddleX();
this.helpCameraSettingsElement = this.add.dom(middleX, -800, undefined, {overflow: 'scroll'}).createFromCache(helpCameraSettings); this.helpCameraSettingsElement = this.add.dom(middleX, -800, undefined, {overflow: 'scroll'}).createFromCache(helpCameraSettings);
this.revealMenusAfterInit(this.helpCameraSettingsElement, helpCameraSettings); this.revealMenusAfterInit(this.helpCameraSettingsElement, helpCameraSettings);
this.helpCameraSettingsElement.addListener('click'); this.helpCameraSettingsElement.addListener('click');
this.helpCameraSettingsElement.on('click', (event:MouseEvent) => { this.helpCameraSettingsElement.on('click', (event:MouseEvent) => {
if((event?.target as HTMLInputElement).id === 'mailto') {
return;
}
event.preventDefault(); event.preventDefault();
if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormRefresh') { if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormRefresh') {
window.location.reload(); window.location.reload();
@ -38,27 +41,30 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
} }
}); });
if(!mediaManager.constraintsMedia.audio || !mediaManager.constraintsMedia.video){ if(!localUserStore.getHelpCameraSettingsShown() && (!mediaManager.constraintsMedia.audio || !mediaManager.constraintsMedia.video)){
this.openHelpCameraSettingsOpened(); this.openHelpCameraSettingsOpened();
localUserStore.setHelpCameraSettingsShown();
} }
mediaManager.setHelpCameraSettingsCallBack(() => {
this.openHelpCameraSettingsOpened();
});
} }
private openHelpCameraSettingsOpened(): void{ private openHelpCameraSettingsOpened(): void{
HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none'; HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
this.helpCameraSettingsOpened = true; this.helpCameraSettingsOpened = true;
let middleY = (window.innerHeight / 3) - (495); try{
if(middleY < 0){
middleY = 0;
}
let middleX = (window.innerWidth / 3) - (370*0.85);
if(middleX < 0){
middleX = 0;
}
if(window.navigator.userAgent.includes('Firefox')){ if(window.navigator.userAgent.includes('Firefox')){
HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-firefox.png"/>'; HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-firefox.png"/>';
}else if(window.navigator.userAgent.includes('Chrome')){ }else if(window.navigator.userAgent.includes('Chrome')){
HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-chrome.png"/>'; HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-chrome.png"/>';
} }
}catch(err) {
console.error('openHelpCameraSettingsOpened => getElementByIdOrFail => error', err);
}
const middleY = this.getMiddleY();
const middleX = this.getMiddleX();
this.tweens.add({ this.tweens.add({
targets: this.helpCameraSettingsElement, targets: this.helpCameraSettingsElement,
y: middleY, y: middleY,
@ -67,20 +73,26 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
ease: 'Power3', ease: 'Power3',
overflow: 'scroll' overflow: 'scroll'
}); });
this.dirty = true;
} }
private closeHelpCameraSettingsOpened(): void{ private closeHelpCameraSettingsOpened(): void{
const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement; const middleX = this.getMiddleX();
/*const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement;
helpCameraSettingsInfo.innerText = ''; helpCameraSettingsInfo.innerText = '';
helpCameraSettingsInfo.style.display = 'none'; helpCameraSettingsInfo.style.display = 'none';*/
this.helpCameraSettingsOpened = false; this.helpCameraSettingsOpened = false;
this.tweens.add({ this.tweens.add({
targets: this.helpCameraSettingsElement, targets: this.helpCameraSettingsElement,
y: -400, y: -1000,
x: middleX,
duration: 1000, duration: 1000,
ease: 'Power3', ease: 'Power3',
overflow: 'scroll' overflow: 'scroll'
}); });
this.dirty = true;
} }
private revealMenusAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) { private revealMenusAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) {
@ -91,5 +103,45 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
}, 250); }, 250);
} }
update(time: number, delta: number): void {
this.dirty = false;
}
public onResize(ev: UIEvent): void {
super.onResize(ev);
const middleX = this.getMiddleX();
const middleY = this.getMiddleY();
this.tweens.add({
targets: this.helpCameraSettingsElement,
x: middleX,
y: middleY,
duration: 1000,
ease: 'Power3'
});
}
private getMiddleX() : number{
return (this.scale.width / 2) -
(
this.helpCameraSettingsElement
&& this.helpCameraSettingsElement.node
&& this.helpCameraSettingsElement.node.getBoundingClientRect().width > 0
? (this.helpCameraSettingsElement.node.getBoundingClientRect().width / (2 * this.scale.zoom))
: (400 / 2)
);
}
private getMiddleY() : number{
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*/)/this.scale.zoom)) / 2;
return (middleY > 0 ? middleY : 0);
}
public isDirty(): boolean {
return this.dirty;
}
} }

View File

@ -16,7 +16,7 @@ const gameMenuIconKey = 'gameMenuIcon';
const gameSettingsMenuKey = 'gameSettingsMenu'; const gameSettingsMenuKey = 'gameSettingsMenu';
const gameShare = 'gameShare'; const gameShare = 'gameShare';
const closedSideMenuX = -200; const closedSideMenuX = -1000;
const openedSideMenuX = 0; const openedSideMenuX = 0;
/** /**
@ -118,7 +118,8 @@ export class MenuScene extends Phaser.Scene {
this.closeAll(); this.closeAll();
this.sideMenuOpened = true; this.sideMenuOpened = true;
this.menuButton.getChildByID('openMenuButton').innerHTML = 'X'; this.menuButton.getChildByID('openMenuButton').innerHTML = 'X';
if (gameManager.getCurrentGameScene(this).connection && gameManager.getCurrentGameScene(this).connection.isAdmin()) { const connection = gameManager.getCurrentGameScene(this).connection;
if (connection && connection.isAdmin()) {
const adminSection = this.menuElement.getChildByID('adminConsoleSection') as HTMLElement; const adminSection = this.menuElement.getChildByID('adminConsoleSection') as HTMLElement;
adminSection.hidden = false; adminSection.hidden = false;
} }
@ -191,11 +192,11 @@ export class MenuScene extends Phaser.Scene {
} }
}); });
let middleY = (window.innerHeight / 3) - (257); let middleY = this.scale.height / 2 - 392/2;
if(middleY < 0){ if(middleY < 0){
middleY = 0; middleY = 0;
} }
let middleX = (window.innerWidth / 3) - 298; let middleX = this.scale.width / 2 - 457/2;
if(middleX < 0){ if(middleX < 0){
middleX = 0; middleX = 0;
} }
@ -235,11 +236,11 @@ export class MenuScene extends Phaser.Scene {
this.gameShareOpened = true; this.gameShareOpened = true;
let middleY = (window.innerHeight / 3) - (257); let middleY = this.scale.height / 2 - 85;
if(middleY < 0){ if(middleY < 0){
middleY = 0; middleY = 0;
} }
let middleX = (window.innerWidth / 3) - 298; let middleX = this.scale.width / 2 - 200;
if(middleX < 0){ if(middleX < 0){
middleX = 0; middleX = 0;
} }

View File

@ -109,7 +109,7 @@ export class ReportMenu extends Phaser.GameObjects.DOMElement {
gamePError.style.display = 'block'; gamePError.style.display = 'block';
return; return;
} }
gameManager.getCurrentGameScene(this.scene).connection.emitReportPlayerMessage( gameManager.getCurrentGameScene(this.scene).connection?.emitReportPlayerMessage(
this.userId, this.userId,
gameTextArea.value gameTextArea.value
); );

View File

@ -52,7 +52,7 @@ export class ErrorScene extends Phaser.Scene {
this.subTitleField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2 + 24, this.subTitle); this.subTitleField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2 + 24, this.subTitle);
this.messageField = this.add.text(this.game.renderer.width / 2, this.game.renderer.height / 2 + 38, this.message, { this.messageField = this.add.text(this.game.renderer.width / 2, this.game.renderer.height / 2 + 48, this.message, {
fontFamily: 'Georgia, "Goudy Bookletter 1911", Times, serif', fontFamily: 'Georgia, "Goudy Bookletter 1911", Times, serif',
fontSize: '10px' fontSize: '10px'
}); });

View File

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

View File

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

View File

@ -0,0 +1,41 @@
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;
private pinch!: any; // eslint-disable-line
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
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;
}
});
}
destroy() {
this.pinch.removeAllListeners();
}
}

View File

@ -1,8 +1,7 @@
import { Direction, IVirtualJoystick } from "../../types"; import { Direction } from "../../types";
import {GameScene} from "../Game/GameScene"; import {GameScene} from "../Game/GameScene";
const { import {touchScreenManager} from "../../Touch/TouchScreenManager";
default: VirtualJoystick, import {MobileJoystick} from "../Components/MobileJoystick";
} = require("phaser3-rex-plugins/plugins/virtualjoystick.js");
interface UserInputManagerDatum { interface UserInputManagerDatum {
keyInstance: Phaser.Input.Keyboard.Key; keyInstance: Phaser.Input.Keyboard.Key;
@ -20,6 +19,7 @@ export enum UserInputEvent {
JoystickMove, JoystickMove,
} }
//we cannot use a map structure so we have to create a replacment //we cannot use a map structure so we have to create a replacment
export class ActiveEventList { export class ActiveEventList {
private eventMap : Map<UserInputEvent, boolean> = new Map<UserInputEvent, boolean>(); private eventMap : Map<UserInputEvent, boolean> = new Map<UserInputEvent, boolean>();
@ -44,17 +44,24 @@ export class UserInputManager {
private Scene: GameScene; private Scene: GameScene;
private isInputDisabled : boolean; private isInputDisabled : boolean;
private joystick : IVirtualJoystick; private joystick!: MobileJoystick;
private joystickEvents = new ActiveEventList(); private joystickEvents = new ActiveEventList();
private joystickForceThreshold = 60; private joystickForceThreshold = 60;
private joystickForceAccuX = 0; private joystickForceAccuX = 0;
private joystickForceAccuY = 0; private joystickForceAccuY = 0;
constructor(Scene: GameScene, virtualJoystick: IVirtualJoystick) { constructor(Scene: GameScene) {
this.Scene = Scene; this.Scene = Scene;
this.isInputDisabled = false; this.isInputDisabled = false;
this.initKeyBoardEvent(); this.initKeyBoardEvent();
this.joystick = virtualJoystick; this.initMouseWheel();
if (touchScreenManager.supportTouchScreen) {
this.initVirtualJoystick();
}
}
initVirtualJoystick() {
this.joystick = new MobileJoystick(this.Scene);
this.joystick.on("update", () => { this.joystick.on("update", () => {
this.joystickForceAccuX = this.joystick.forceX ? this.joystickForceAccuX : 0; this.joystickForceAccuX = this.joystick.forceX ? this.joystickForceAccuX : 0;
this.joystickForceAccuY = this.joystick.forceY ? this.joystickForceAccuY : 0; this.joystickForceAccuY = this.joystick.forceY ? this.joystickForceAccuY : 0;
@ -105,6 +112,7 @@ export class UserInputManager {
this.Scene.input.keyboard.removeAllListeners(); this.Scene.input.keyboard.removeAllListeners();
} }
//todo: should we also disable the joystick?
disableControls(){ disableControls(){
this.Scene.input.keyboard.removeAllKeys(); this.Scene.input.keyboard.removeAllKeys();
this.isInputDisabled = true; this.isInputDisabled = true;
@ -163,4 +171,14 @@ export class UserInputManager {
removeSpaceEventListner(callback : Function){ removeSpaceEventListner(callback : Function){
this.Scene.input.keyboard.removeListener('keyup-SPACE', callback); this.Scene.input.keyboard.removeListener('keyup-SPACE', callback);
} }
destroy(): void {
this.joystick.destroy();
}
private initMouseWheel() {
this.Scene.input.on('wheel', (pointer: unknown, gameObjects: unknown, deltaX: number, deltaY: number, deltaZ: number) => {
this.Scene.zoomByFactor(1 - deltaY / 53 * 0.1);
});
}
} }

View File

@ -0,0 +1,16 @@
class TouchScreenManager {
readonly supportTouchScreen:boolean;
constructor() {
this.supportTouchScreen = this.detectTouchscreen();
}
//found here: https://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript#4819886
detectTouchscreen(): boolean {
return (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
}
}
export const touchScreenManager = new TouchScreenManager();

View File

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

View File

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

View File

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

View File

@ -2,7 +2,7 @@ import 'phaser';
import GameConfig = Phaser.Types.Core.GameConfig; import GameConfig = Phaser.Types.Core.GameConfig;
import "../dist/resources/style/index.scss"; import "../dist/resources/style/index.scss";
import {DEBUG_MODE, JITSI_URL, RESOLUTION} from "./Enum/EnvironmentVariable"; import {DEBUG_MODE, isMobile} from "./Enum/EnvironmentVariable";
import {LoginScene} from "./Phaser/Login/LoginScene"; import {LoginScene} from "./Phaser/Login/LoginScene";
import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene"; import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene";
import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene"; import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene";
@ -17,7 +17,9 @@ import {HelpCameraSettingsScene} from "./Phaser/Menu/HelpCameraSettingsScene";
import {localUserStore} from "./Connexion/LocalUserStore"; import {localUserStore} from "./Connexion/LocalUserStore";
import {ErrorScene} from "./Phaser/Reconnecting/ErrorScene"; import {ErrorScene} from "./Phaser/Reconnecting/ErrorScene";
import {iframeListener} from "./Api/IframeListener"; import {iframeListener} from "./Api/IframeListener";
import {discussionManager} from "./WebRtc/DiscussionManager"; import { SelectCharacterMobileScene } from './Phaser/Login/SelectCharacterMobileScene';
import {HdpiManager} from "./Phaser/Services/HdpiManager";
import {waScaleManager} from "./Phaser/Services/WaScaleManager";
import {Game} from "./Phaser/Game/Game"; import {Game} from "./Phaser/Game/Game";
const {width, height} = coWebsiteManager.getGameSize(); const {width, height} = coWebsiteManager.getGameSize();
@ -69,15 +71,31 @@ switch (phaserMode) {
throw new Error('phaserMode parameter must be one of "auto", "canvas" or "webgl"'); throw new Error('phaserMode parameter must be one of "auto", "canvas" or "webgl"');
} }
const hdpiManager = new HdpiManager(640*480, 196*196);
const { game: gameSize, real: realSize } = hdpiManager.getOptimalGameSize({width, height});
const config: GameConfig = { const config: GameConfig = {
type: mode, type: mode,
title: "WorkAdventure", title: "WorkAdventure",
width: width / RESOLUTION, scale: {
height: height / RESOLUTION,
parent: "game", parent: "game",
scene: [EntryScene, LoginScene, SelectCharacterScene, SelectCompanionScene, EnableCameraScene, ReconnectingScene, ErrorScene, CustomizeScene, MenuScene, HelpCameraSettingsScene], width: gameSize.width,
zoom: RESOLUTION, height: gameSize.height,
zoom: realSize.width / gameSize.width,
autoRound: true,
resizeInterval: 999999999999
},
scene: [EntryScene,
LoginScene,
isMobile() ? SelectCharacterMobileScene : SelectCharacterScene,
SelectCompanionScene,
EnableCameraScene,
ReconnectingScene,
ErrorScene,
CustomizeScene,
MenuScene,
HelpCameraSettingsScene],
//resolution: window.devicePixelRatio / 2,
fps: fps, fps: fps,
dom: { dom: {
createContainer: true createContainer: true
@ -109,10 +127,12 @@ const config: GameConfig = {
//const game = new Phaser.Game(config); //const game = new Phaser.Game(config);
const game = new Game(config); const game = new Game(config);
waScaleManager.setScaleManager(game.scale);
window.addEventListener('resize', function (event) { window.addEventListener('resize', function (event) {
coWebsiteManager.resetStyle(); coWebsiteManager.resetStyle();
const {width, height} = coWebsiteManager.getGameSize();
game.scale.resize(width / RESOLUTION, height / RESOLUTION); waScaleManager.applyNewSize();
// Let's trigger the onResize method of any active scene that is a ResizableScene // Let's trigger the onResize method of any active scene that is a ResizableScene
for (const scene of game.scene.getScenes(true)) { for (const scene of game.scene.getScenes(true)) {
@ -123,8 +143,7 @@ window.addEventListener('resize', function (event) {
}); });
coWebsiteManager.onResize.subscribe(() => { coWebsiteManager.onResize.subscribe(() => {
const {width, height} = coWebsiteManager.getGameSize(); waScaleManager.applyNewSize();
game.scale.resize(width / RESOLUTION, height / RESOLUTION);
}); });
iframeListener.init(); iframeListener.init();

12
front/src/rex-plugins.d.ts vendored Normal file
View File

@ -0,0 +1,12 @@
declare module 'phaser3-rex-plugins/plugins/virtualjoystick.js' {
const content: any; // eslint-disable-line
export default content;
}
declare module 'phaser3-rex-plugins/plugins/gestures-plugin.js' {
const content: any; // eslint-disable-line
export default content;
}
declare module 'phaser3-rex-plugins/plugins/gestures.js' {
export const Pinch: any; // eslint-disable-line
}

View File

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

View File

@ -0,0 +1,147 @@
import "jasmine";
import {Room} from "../../../src/Connexion/Room";
import {LayersIterator} from "../../../src/Phaser/Map/LayersIterator";
describe("Layers iterator", () => {
it("should iterate maps with no group", () => {
const layersIterator = new LayersIterator({
"compressionlevel":-1,
"height":2,
"infinite":false,
"layers":[
{
"data":[0, 0, 0, 0],
"height":2,
"id":1,
"name":"Tile Layer 1",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":2,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0],
"height":2,
"id":1,
"name":"Tile Layer 2",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":2,
"x":0,
"y":0
}],
"nextlayerid":2,
"nextobjectid":1,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"2021.03.23",
"tileheight":32,
"tilesets":[],
"tilewidth":32,
"type":"map",
"version":1.5,
"width":2
})
const layers = [];
for (const layer of layersIterator) {
layers.push(layer.name);
}
expect(layers).toEqual(['Tile Layer 1', 'Tile Layer 2']);
});
it("should iterate maps with recursive groups", () => {
const layersIterator = new LayersIterator({
"compressionlevel":-1,
"height":2,
"infinite":false,
"layers":[
{
"id":6,
"layers":[
{
"id":5,
"layers":[
{
"data":[0, 0, 0, 0],
"height":2,
"id":10,
"name":"Tile3",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":2,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0],
"height":2,
"id":9,
"name":"Tile2",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":2,
"x":0,
"y":0
}],
"name":"Group 3",
"opacity":1,
"type":"group",
"visible":true,
"x":0,
"y":0
},
{
"id":7,
"layers":[
{
"data":[0, 0, 0, 0],
"height":2,
"id":8,
"name":"Tile1",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":2,
"x":0,
"y":0
}],
"name":"Group 2",
"opacity":1,
"type":"group",
"visible":true,
"x":0,
"y":0
}],
"name":"Group 1",
"opacity":1,
"type":"group",
"visible":true,
"x":0,
"y":0
}],
"nextlayerid":11,
"nextobjectid":1,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"2021.03.23",
"tileheight":32,
"tilesets":[],
"tilewidth":32,
"type":"map",
"version":1.5,
"width":2
})
const layers = [];
for (const layer of layersIterator) {
layers.push(layer.name);
}
expect(layers).toEqual(['Group 1/Group 3/Tile3', 'Group 1/Group 3/Tile2', 'Group 1/Group 2/Tile1']);
});
});

View File

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

View File

@ -1897,7 +1897,7 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
assign-symbols "^1.0.0" assign-symbols "^1.0.0"
is-extendable "^1.0.1" is-extendable "^1.0.1"
extend@^3.0.2: extend@^3.0.1, extend@^3.0.2:
version "3.0.2" version "3.0.2"
resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa" resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g== integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@ -3975,15 +3975,15 @@ quill-delta@^3.6.2:
extend "^3.0.2" extend "^3.0.2"
fast-diff "1.1.2" fast-diff "1.1.2"
quill@^1.3.7: quill@1.3.6:
version "1.3.7" version "1.3.6"
resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8" resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.6.tgz#99f4de1fee85925a0d7d4163b6d8328f23317a4d"
integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g== integrity sha512-K0mvhimWZN6s+9OQ249CH2IEPZ9JmkFuCQeHAOQax3EZ2nDJ3wfGh59mnlQaZV2i7u8eFarx6wAtvQKgShojug==
dependencies: dependencies:
clone "^2.1.1" clone "^2.1.1"
deep-equal "^1.0.1" deep-equal "^1.0.1"
eventemitter3 "^2.0.3" eventemitter3 "^2.0.3"
extend "^3.0.2" extend "^3.0.1"
parchment "^1.1.4" parchment "^1.1.4"
quill-delta "^3.6.2" quill-delta "^3.6.2"

View File

@ -24,7 +24,7 @@
{ {
"name":"exitUrl", "name":"exitUrl",
"type":"string", "type":"string",
"value":"@\/tcm\/workadventure\/floor0" "value":"\/@\/tcm\/workadventure\/wa-village"
}], }],
"type":"tilelayer", "type":"tilelayer",
"visible":true, "visible":true,
@ -260,15 +260,15 @@
"name":"floorLayer", "name":"floorLayer",
"objects":[ "objects":[
{ {
"height":199.667, "height":140,
"id":1, "id":1,
"name":"Tutobubble", "name":"Tutobubble",
"rotation":0, "rotation":0,
"type":"", "type":"",
"visible":true, "visible":true,
"width":245.667, "width":185,
"x":1170, "x":1022,
"y":350 "y":308
}, },
{ {
"height":86.9996666666667, "height":86.9996666666667,
@ -277,9 +277,9 @@
"rotation":0, "rotation":0,
"type":"", "type":"",
"visible":true, "visible":true,
"width":245.667, "width":187,
"x":1171, "x":1019,
"y":412 "y":361
}, },
{ {
"height":84.6667, "height":84.6667,
@ -288,9 +288,9 @@
"rotation":0, "rotation":0,
"type":"", "type":"",
"visible":true, "visible":true,
"width":210.667, "width":184.5,
"x":1030.5, "x":1023,
"y":318.66665 "y":319
}, },
{ {
"height":99.6667, "height":99.6667,
@ -299,9 +299,9 @@
"rotation":0, "rotation":0,
"type":"", "type":"",
"visible":true, "visible":true,
"width":210.667, "width":185,
"x":1174, "x":1021,
"y":400 "y":348
}], }],
"opacity":1, "opacity":1,
"type":"objectgroup", "type":"objectgroup",
@ -355,7 +355,7 @@
"value":"scriptTuto.js" "value":"scriptTuto.js"
}], }],
"renderorder":"right-down", "renderorder":"right-down",
"tiledversion":"2021.03.23", "tiledversion":"1.5.0",
"tileheight":32, "tileheight":32,
"tilesets":[ "tilesets":[
{ {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

File diff suppressed because one or more lines are too long

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

View File

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

Some files were not shown because too many files have changed in this diff Show More