noby
/
workadventure
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #873 from workadventure-xce/feature/mobile_support 

Mobile/touch support
This commit is contained in:
Kharhamel 2021-04-13 09:49:47 +02:00 committed by GitHub
parent 8cdf572685 633bdfcaff
commit bbc42d2986
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 426 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
front/dist/resources/html/gameMenu.html vendored
View File

@ -36,6 +36,9 @@
<section>
<button id="editGameSettingsButton">Settings</button>
</section>
<section>
<button id="toggleFullscreen">Toggle fullscreen</button>
</section>
<section>
<button id="sparkButton">Create map</button>
</section>

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

@ -151,6 +151,7 @@ video#myCamVideo{
.btn-cam-action {
pointer-events: all;
position: absolute;
bottom: 0px;
right: 0px;
@ -186,18 +187,26 @@ video#myCamVideo{
transition: 280ms;
}
.btn-micro{
pointer-events: auto;
transition: all .3s;
right: 44px;
}
.btn-video{
pointer-events: auto;
transition: all .25s;
right: 134px;
}
.btn-monitor{
pointer-events: auto;
transition: all .2s;
right: 224px;
}
.btn-copy{
pointer-events: auto;
transition: all .3s;
right: 44px;
opacity: 1;
}
.btn-cam-action div img{
height: 22px;
width: 30px;
@ -502,6 +511,7 @@ input[type=range]:focus::-ms-fill-upper {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
/* TODO: DO WE NEED FLEX HERE???? WE WANT A SIDEBAR OF EXACTLY 25% (note: flex useful for direction!!!) */
}
@ -537,6 +547,7 @@ input[type=range]:focus::-ms-fill-upper {
.sidebar {
flex: 0 0 25%;
display: flex;
pointer-events: none;
}
.sidebar > div {

1
front/package.json
View File

@ -31,6 +31,7 @@
"generic-type-guard": "^3.2.0",
"google-protobuf": "^3.13.0",
"phaser": "3.24.1",
"phaser3-rex-plugins": "^1.1.42",
"queue-typescript": "^1.0.1",
"quill": "^1.3.7",
"rxjs": "^6.6.3",

10
front/src/Connexion/LocalUserStore.ts
View File

@ -9,7 +9,8 @@ const gameQualityKey = 'gameQuality';
const videoQualityKey = 'videoQuality';
const audioPlayerVolumeKey = 'audioVolume';
const audioPlayerMuteKey = 'audioMute';
const helpCameraSettingsShown = 'helpCameraSettingsShown';
const helpCameraSettingsShown = 'helpCameraSettingsShown';
const fullscreenKey = 'fullscreen';
class LocalUserStore {
saveUser(localUser: LocalUser) {
@ -100,6 +101,13 @@ class LocalUserStore {
getHelpCameraSettingsShown(): boolean {
return localStorage.getItem(helpCameraSettingsShown) === '1';
}
setFullscreen(value: boolean): void {
localStorage.setItem(fullscreenKey, value.toString());
}
getFullscreen(): boolean {
return localStorage.getItem(fullscreenKey) === 'true';
}
}
export const localUserStore = new LocalUserStore();

71
front/src/Phaser/Components/TextInput.ts
View File

@ -1,46 +1,68 @@
const IGNORED_KEYS = new Set([
'Esc',
'Escape',
'Alt',
'Meta',
'Control',
'Ctrl',
'Space',
'Backspace'
])
export class TextInput extends Phaser.GameObjects.BitmapText {
private minUnderLineLength = 4;
private underLine: Phaser.GameObjects.Text;
private domInput = document.createElement('input');
constructor(scene: Phaser.Scene, x: number, y: number, maxLength: number, text: string, onChange: (text: string) => void) {
constructor(scene: Phaser.Scene, x: number, y: number, maxLength: number, text: string,
onChange: (text: string) => void) {
super(scene, x, y, 'main_font', text, 32);
this.setOrigin(0.5).setCenterAlign()
this.setOrigin(0.5).setCenterAlign();
this.scene.add.existing(this);
this.underLine = this.scene.add.text(x, y+1, this.getUnderLineBody(text.length), { fontFamily: 'Arial', fontSize: "32px", color: '#ffffff'})
this.underLine.setOrigin(0.5)
const style = {fontFamily: 'Arial', fontSize: "32px", color: '#ffffff'};
this.underLine = this.scene.add.text(x, y+1, this.getUnderLineBody(text.length), style);
this.underLine.setOrigin(0.5);
this.domInput.maxLength = maxLength;
this.domInput.style.opacity = "0";
if (text) {
this.domInput.value = text;
}
this.scene.input.keyboard.on('keydown', (event: KeyboardEvent) => {
if (event.keyCode === 8 && this.text.length > 0) {
this.deleteLetter();
} else if ((event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode <= 90)) && this.text.length < maxLength) {
this.addLetter(event.key);
this.domInput.addEventListener('keydown', event => {
if (IGNORED_KEYS.has(event.key)) {
return;
}
if (!/[a-zA-Z0-9:.!&?()+-]/.exec(event.key)) {
event.preventDefault();
}
});
this.domInput.addEventListener('input', (event) => {
if (event.defaultPrevented) {
return;
}
this.text = this.domInput.value;
this.underLine.text = this.getUnderLineBody(this.text.length);
onChange(this.text);
});
document.body.append(this.domInput);
this.focus();
}
private getUnderLineBody(textLength:number): string {
if (textLength < this.minUnderLineLength) textLength = this.minUnderLineLength;
let text = '_______';
for (let i = this.minUnderLineLength; i < textLength; i++) {
text += '__'
text += '__';
}
return text;
}
private deleteLetter() {
this.text = this.text.substr(0, this.text.length - 1);
}
private addLetter(letter: string) {
this.text += letter;
}
getText(): string {
return this.text;
}
@ -56,4 +78,13 @@ export class TextInput extends Phaser.GameObjects.BitmapText {
this.underLine.y = y+1;
return this;
}
focus() {
this.domInput.focus();
}
destroy(): void {
super.destroy();
this.domInput.remove();
}
}

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

@ -51,6 +51,10 @@ import {Room} from "../../Connexion/Room";
import {jitsiFactory} from "../../WebRtc/JitsiFactory";
import {urlManager} from "../../Url/UrlManager";
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 {ChatModeIcon} from "../Components/ChatModeIcon";
import {OpenChatIcon, openChatIconName} from "../Components/OpenChatIcon";
@ -164,6 +168,7 @@ export class GameScene extends ResizableScene implements CenterListener {
private messageSubscription: Subscription|null = null;
private popUpElements : Map<number, DOMElement> = new Map<number, Phaser.GameObjects.DOMElement>();
private originalMapUrl: string|undefined;
public virtualJoystick!: IVirtualJoystick;
constructor(private room: Room, MapUrlFile: string, customKey?: string|undefined) {
super({
@ -399,9 +404,30 @@ export class GameScene extends ResizableScene implements CenterListener {
//initialise list of other player
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
this.userInputManager = new UserInputManager(this);
mediaManager.setUserInputManager(this.userInputManager);
this.userInputManager = new UserInputManager(this, this.virtualJoystick);
// Listener event to reposition virtual joystick
// whatever place you click in game area
this.input.on('pointerdown', (pointer: { x: number; y: number; }) => {
this.virtualJoystick.x = pointer.x;
this.virtualJoystick.y = pointer.y;
});
if (localUserStore.getFullscreen()) {
document.querySelector('body')?.requestFullscreen();
}
//notify game manager can to create currentUser in map
this.createCurrentPlayer();
@ -668,7 +694,7 @@ export class GameScene extends ResizableScene implements CenterListener {
if(openWebsiteTriggerValue && openWebsiteTriggerValue === ON_ACTION_TRIGGER_BUTTON) {
let message = allProps.get(WEBSITE_MESSAGE_PROPERTIES);
if(message === undefined){
message = 'Press on SPACE to open the web site';
message = 'Press SPACE or touch here to open web site';
}
layoutManager.addActionButton('openWebsite', message.toString(), () => {
openWebsiteFunction();
@ -700,7 +726,7 @@ export class GameScene extends ResizableScene implements CenterListener {
if(jitsiTriggerValue && jitsiTriggerValue === ON_ACTION_TRIGGER_BUTTON) {
let message = allProps.get(JITSI_MESSAGE_PROPERTIES);
if (message === undefined) {
message = 'Press on SPACE to enter in jitsi meet room';
message = 'Press SPACE or touch here to enter Jitsi Meet room';
}
layoutManager.addActionButton('jitsiRoom', message.toString(), () => {
openJitsiRoomFunction();

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

@ -35,6 +35,13 @@ export class CustomizeScene extends AbstractCharacterScene {
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];
@ -70,7 +77,7 @@ export class CustomizeScene extends AbstractCharacterScene {
create() {
this.textField = new TextField(this, this.game.renderer.width / 2, 30, 'Customize your own Avatar!');
this.enterField = new TextField(this, this.game.renderer.width / 2, 40, 'you can start the game by pressing SPACE..');
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.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, CustomizeTextures.icon);
this.add.existing(this.logo);
@ -78,22 +85,88 @@ export class CustomizeScene extends AbstractCharacterScene {
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.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.setStrokeStyle(2, 0xFFFFFF);
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, 1);
@ -268,7 +341,9 @@ export class CustomizeScene extends AbstractCharacterScene {
this.moveLayers();
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 / 2;
this.mobileTapENTER.y = this.cameras.main.worldView.y + this.cameras.main.height / 2;
this.textField.x = this.game.renderer.width/2;
@ -276,15 +351,25 @@ export class CustomizeScene extends AbstractCharacterScene {
this.logo.y = this.game.renderer.height - 20;
this.arrowUp.x = this.game.renderer.width - 30;
this.mobileTapUP.x = this.game.renderer.width - 30;
this.arrowUp.y = 60;
this.mobileTapUP.y = 60;
this.arrowDown.x = this.game.renderer.width - 30;
this.mobileTapDOWN.x = this.game.renderer.width - 30;
this.arrowDown.y = 100;
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;
}
}

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

@ -1,6 +1,7 @@
import {gameManager} from "../Game/GameManager";
import {TextField} from "../Components/TextField";
import Image = Phaser.GameObjects.Image;
import Rectangle = Phaser.GameObjects.Rectangle;
import {mediaManager} from "../../WebRtc/MediaManager";
import {RESOLUTION} from "../../Enum/EnvironmentVariable";
import {SoundMeter} from "../Components/SoundMeter";
@ -35,6 +36,7 @@ export class EnableCameraScene extends Phaser.Scene {
private microphoneNameField!: TextField;
private repositionCallback!: (this: Window, ev: UIEvent) => void;
private mobileTapRectangle!: Rectangle;
constructor() {
super({
key: EnableCameraSceneName
@ -54,7 +56,19 @@ export class EnableCameraScene extends Phaser.Scene {
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, 'Press enter to start');
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');
// For mobile purposes - we need a big enough touchable area.
this.mobileTapRectangle = this.add
.rectangle(
this.game.renderer.width / 2,
this.game.renderer.height - 30,
200,
50,
)
.setInteractive()
.on("pointerdown", () => {
this.login();
});
this.cameraNameField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 60, '');
@ -195,6 +209,7 @@ export class EnableCameraScene extends Phaser.Scene {
}
this.textField.x = this.game.renderer.width / 2;
this.mobileTapRectangle.x = this.game.renderer.width / 2;
this.cameraNameField.x = this.game.renderer.width / 2;
this.microphoneNameField.x = this.game.renderer.width / 2;
this.pressReturnField.x = this.game.renderer.width / 2;

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

@ -5,6 +5,8 @@ import Image = Phaser.GameObjects.Image;
import {SelectCharacterSceneName} from "./SelectCharacterScene";
import {ResizableScene} from "./ResizableScene";
import {isUserNameValid, maxUserNameLength} from "../../Connexion/LocalUser";
import { localUserStore } from "../../Connexion/LocalUserStore";
import Rectangle = Phaser.GameObjects.Rectangle;
//todo: put this constants in a dedicated file
export const LoginSceneName = "LoginScene";
@ -20,6 +22,7 @@ export class LoginScene extends ResizableScene {
private pressReturnField!: TextField;
private logo!: Image;
private name: string = '';
private mobileTapRectangle!: Rectangle;
constructor() {
super({
@ -37,17 +40,36 @@ export class LoginScene extends ResizableScene {
create() {
this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Enter your name:');
this.nameInput = new TextInput(this, this.game.renderer.width / 2, 70, maxUserNameLength, this.name,(text: string) => {
this.name = text;
});
localUserStore.setName(text);
})
.setInteractive()
.on('pointerdown', () => {
this.nameInput.focus();
})
this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Press enter to start');
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 Z,Q,S,D to move\n - SHIFT to run";
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', () => {
@ -66,6 +88,7 @@ export class LoginScene extends ResizableScene {
}
private login(name: string): void {
if (this.name === '') return
gameManager.setPlayerName(name);
this.scene.stop(LoginSceneName)
@ -77,6 +100,7 @@ export class LoginScene extends ResizableScene {
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;

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

@ -36,6 +36,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
private selectedRectangleYPos = 0; // Number of the character selected in the columns
private selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option
private players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
private mobileTapRectangle!: Rectangle;
private playerModels!: BodyResourceDescriptionInterface[];
constructor() {
@ -69,8 +70,20 @@ export class SelectCharacterScene extends AbstractCharacterScene {
this.pressReturnField = new TextField(
this,
this.game.renderer.width / 2,
90 + 32 * Math.ceil( this.playerModels.length / this.nbCharactersPerRow) + 40,
'Press enter to start');
90 + 32 * Math.ceil( this.playerModels.length / this.nbCharactersPerRow) + 60,
'Touch here\n\n or \n\nPress enter to start');
// For mobile purposes - we need a big enough touchable area.
this.mobileTapRectangle = this.add
.rectangle(
this.game.renderer.width / 2,
275,
this.game.renderer.width / 2,
50,
)
.setInteractive()
.on("pointerdown", () => {
this.nextScene();
});
const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
@ -193,6 +206,10 @@ export class SelectCharacterScene extends AbstractCharacterScene {
this.customizeButton.setInteractive().on("pointerdown", () => {
this.selectedRectangleYPos = Math.ceil(this.playerModels.length / this.nbCharactersPerRow);
this.updateSelectedPlayer();
this.nextScene();
});
this.customizeButtonSelected.setInteractive().on("pointerdown", () => {
this.nextScene();
});
this.selectedPlayer = this.players[0];

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

@ -29,6 +29,8 @@ export class SelectCompanionScene extends ResizableScene {
private companions: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
private companionModels: Array<CompanionResourceDescriptionInterface|null> = [null];
private confirmTouchArea!: Rectangle;
constructor() {
super({
key: SelectCompanionSceneName
@ -54,12 +56,17 @@ export class SelectCompanionScene extends ResizableScene {
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.pressReturnField = new TextField(
this,
this.game.renderer.width / 2,
90 + 32 * Math.ceil(this.companionModels.length / this.nbCharactersPerRow),
'Press enter to start'
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.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xFFFFFF);

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

@ -291,6 +291,9 @@ export class MenuScene extends Phaser.Scene {
case 'editGameSettingsButton':
this.openGameSettingsMenu();
break;
case 'toggleFullscreen':
this.toggleFullscreen();
break;
case 'adminConsoleButton':
gameManager.getCurrentGameScene(this).ConsoleGlobalMessageManager.activeMessageConsole();
break;
@ -328,4 +331,15 @@ export class MenuScene extends Phaser.Scene {
this.closeGameShare();
this.gameReportElement.close();
}
private toggleFullscreen() {
const body = document.querySelector('body')
if (body) {
if (document.fullscreenElement ?? document.fullscreen) {
document.exitFullscreen()
} else {
body.requestFullscreen();
}
}
}
}

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

@ -47,7 +47,7 @@ export class Player extends Character implements CurrentGamerInterface {
let x = 0;
let y = 0;
if (activeEvents.get(UserInputEvent.MoveUp)) {
y = - moveAmount;
y = -moveAmount;
direction = PlayerAnimationDirections.Up;
moving = true;
} else if (activeEvents.get(UserInputEvent.MoveDown)) {
@ -64,16 +64,18 @@ export class Player extends Character implements CurrentGamerInterface {
direction = PlayerAnimationDirections.Right;
moving = true;
}
moving = moving || activeEvents.get(UserInputEvent.JoystickMove);
if (x !== 0 || y !== 0) {
this.move(x, y);
this.emit(hasMovedEventName, {moving, direction, x: this.x, y: this.y});
} else {
if (this.wasMoving) {
//direction = PlayerAnimationNames.None;
this.stop();
this.emit(hasMovedEventName, {moving, direction: this.previousDirection, x: this.x, y: this.y});
}
} else if (this.wasMoving && moving) {
// slow joystick movement
this.move(0, 0);
this.emit(hasMovedEventName, {moving, direction: this.previousDirection, x: this.x, y: this.y});
} else if (this.wasMoving && !moving) {
this.stop();
this.emit(hasMovedEventName, {moving, direction: this.previousDirection, x: this.x, y: this.y});
}
if (direction !== null) {

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

@ -1,4 +1,8 @@
import { Direction, IVirtualJoystick } from "../../types";
import {GameScene} from "../Game/GameScene";
const {
default: VirtualJoystick,
} = require("phaser3-rex-plugins/plugins/virtualjoystick.js");
interface UserInputManagerDatum {
keyInstance: Phaser.Input.Keyboard.Key;
@ -13,17 +17,24 @@ export enum UserInputEvent {
SpeedUp,
Interact,
Shout,
JoystickMove,
}
//we cannot the 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 {
private KeysCode : Map<UserInputEvent, boolean> = new Map<UserInputEvent, boolean>();
private eventMap : Map<UserInputEvent, boolean> = new Map<UserInputEvent, boolean>();
get(event: UserInputEvent): boolean {
return this.KeysCode.get(event) || false;
return this.eventMap.get(event) || false;
}
set(event: UserInputEvent, value: boolean): void {
this.KeysCode.set(event, value);
this.eventMap.set(event, value);
}
forEach(callback: (value: boolean, key: UserInputEvent) => void): void {
this.eventMap.forEach(callback);
}
any(): boolean {
return Array.from(this.eventMap.values()).reduce((accu, curr) => accu || curr, false);
}
}
@ -32,10 +43,40 @@ export class UserInputManager {
private KeysCode!: UserInputManagerDatum[];
private Scene: GameScene;
private isInputDisabled : boolean;
constructor(Scene : GameScene) {
private joystick : IVirtualJoystick;
private joystickEvents = new ActiveEventList();
private joystickForceThreshold = 60;
private joystickForceAccuX = 0;
private joystickForceAccuY = 0;
constructor(Scene: GameScene, virtualJoystick: IVirtualJoystick) {
this.Scene = Scene;
this.initKeyBoardEvent();
this.isInputDisabled = false;
this.initKeyBoardEvent();
this.joystick = virtualJoystick;
this.joystick.on("update", () => {
this.joystickForceAccuX = this.joystick.forceX ? this.joystickForceAccuX : 0;
this.joystickForceAccuY = this.joystick.forceY ? this.joystickForceAccuY : 0;
const cursorKeys = this.joystick.createCursorKeys();
for (const name in cursorKeys) {
const key = cursorKeys[name as Direction];
switch (name) {
case "up":
this.joystickEvents.set(UserInputEvent.MoveUp, key.isDown);
break;
case "left":
this.joystickEvents.set(UserInputEvent.MoveLeft, key.isDown);
break;
case "down":
this.joystickEvents.set(UserInputEvent.MoveDown, key.isDown);
break;
case "right":
this.joystickEvents.set(UserInputEvent.MoveRight, key.isDown);
break;
}
}
});
}
initKeyBoardEvent(){
@ -78,11 +119,33 @@ export class UserInputManager {
if (this.isInputDisabled) {
return eventsMap;
}
this.joystickEvents.forEach((value, key) => {
if (value) {
switch (key) {
case UserInputEvent.MoveUp:
case UserInputEvent.MoveDown:
this.joystickForceAccuY += this.joystick.forceY;
if (Math.abs(this.joystickForceAccuY) > this.joystickForceThreshold) {
eventsMap.set(key, value);
this.joystickForceAccuY = 0;
}
break;
case UserInputEvent.MoveLeft:
case UserInputEvent.MoveRight:
this.joystickForceAccuX += this.joystick.forceX;
if (Math.abs(this.joystickForceAccuX) > this.joystickForceThreshold) {
eventsMap.set(key, value);
this.joystickForceAccuX = 0;
}
break;
}
}
});
eventsMap.set(UserInputEvent.JoystickMove, this.joystickEvents.any());
this.KeysCode.forEach(d => {
if (d. keyInstance.isDown) {
if (d.keyInstance.isDown) {
eventsMap.set(d.event, true);
}
});
return eventsMap;
}

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

@ -340,14 +340,10 @@ class LayoutManager {
const mainContainer = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
mainContainer.appendChild(div);
const callBackFunctionTrigger = (() => {
console.log('user click on space => ', id);
callBack();
});
//add trigger action
this.actionButtonTrigger.set(id, callBackFunctionTrigger);
userInputManager.addSpaceEventListner(callBackFunctionTrigger);
div.onpointerdown = () => callBack();
this.actionButtonTrigger.set(id, callBack);
userInputManager.addSpaceEventListner(callBack);
}
public removeActionButton(id: string, userInputManager: UserInputManager){

24
front/src/types.ts Normal file
View File

@ -0,0 +1,24 @@
import Phaser from "phaser";
export type CursorKey = {
isDown: boolean
}
export type Direction = 'left' | 'right' | 'up' | 'down'
export interface CursorKeys extends Record<Direction, CursorKey> {
left: CursorKey;
right: CursorKey;
up: CursorKey;
down: CursorKey;
}
export interface IVirtualJoystick extends Phaser.GameObjects.GameObject {
y: number;
x: number;
forceX: number;
forceY: number;
visible: boolean;
createCursorKeys: () => CursorKeys;
}

21
front/tsconfig.json
View File

@ -9,17 +9,18 @@
"downlevelIteration": true,
"jsx": "react",
"allowJs": true,
"esModuleInterop": true,
"strict": true, /* Enable all strict type-checking options. */
"noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
"strictNullChecks": true, /* Enable strict null checks. */
"strictFunctionTypes": true, /* Enable strict checking of function types. */
"strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
"strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
"noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
"alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
"strict": true, /* Enable all strict type-checking options. */
"noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
"strictNullChecks": true, /* Enable strict null checks. */
"strictFunctionTypes": true, /* Enable strict checking of function types. */
"strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
"strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
"noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
"alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
"noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
"noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */
"noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
"noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */
}
}

30
front/yarn.lock
View File

@ -1819,6 +1819,11 @@ eventemitter3@^2.0.3:
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=
eventemitter3@^3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==
eventemitter3@^4.0.0, eventemitter3@^4.0.4:
version "4.0.7"
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@ -3064,6 +3069,11 @@ loglevel@^1.6.8:
resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.0.tgz#728166855a740d59d38db01cf46f042caa041bb0"
integrity sha512-i2sY04nal5jDcagM3FMfG++T69GEEM8CYuOfeOIvmXzOIcwE9a/CJPR0MFM97pYMj/u10lzz7/zd7+qwhrBTqQ==
lokijs@^1.5.11:
version "1.5.11"
resolved "https://registry.yarnpkg.com/lokijs/-/lokijs-1.5.11.tgz#2b2ea82ec66050e4b112c6cfc588dac22d362b13"
integrity sha512-YYyuBPxMn/oS0tFznQDbIX5XL1ltMcwFqCboDr8voYE4VCDzR5vAsrvQDhlnua4lBeqMqHmLvUXRTmRUzUKH1Q==
lower-case@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.1.tgz#39eeb36e396115cc05e29422eaea9e692c9408c7"
@ -3625,6 +3635,11 @@ pako@~1.0.5:
resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
papaparse@^5.3.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/papaparse/-/papaparse-5.3.0.tgz#ab1702feb96e79ab4309652f36db9536563ad05a"
integrity sha512-Lb7jN/4bTpiuGPrYy4tkKoUS8sTki8zacB5ke1p5zolhcSE4TlWgrlsxjrDTbG/dFVh07ck7X36hUf/b5V68pg==
parallel-transform@^1.1.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
@ -3752,6 +3767,16 @@ pbkdf2@^3.0.3:
safe-buffer "^5.0.1"
sha.js "^2.4.8"
phaser3-rex-plugins@^1.1.42:
version "1.1.44"
resolved "https://registry.yarnpkg.com/phaser3-rex-plugins/-/phaser3-rex-plugins-1.1.44.tgz#83588ab2801c5b3a80a18be4f0ae37f1f32096b0"
integrity sha512-JPr3+UQv4+uv4etZr80aFhYxw2dk4UYG9/gQ4uMSSXQuc8gXQkXCr3J3zm8LJqH+1FXeK8nncpC7TKa4uKLgQw==
dependencies:
eventemitter3 "^3.1.2"
lokijs "^1.5.11"
papaparse "^5.3.0"
webfontloader "^1.6.28"
phaser@3.24.1:
version "3.24.1"
resolved "https://registry.yarnpkg.com/phaser/-/phaser-3.24.1.tgz#376e0c965d2a35af37c06ee78627dafbde5be017"
@ -5144,6 +5169,11 @@ wbuf@^1.1.0, wbuf@^1.7.3:
dependencies:
minimalistic-assert "^1.0.0"
webfontloader@^1.6.28:
version "1.6.28"
resolved "https://registry.yarnpkg.com/webfontloader/-/webfontloader-1.6.28.tgz#db786129253cb6e8eae54c2fb05f870af6675bae"
integrity sha1-23hhKSU8tujq5UwvsF+HCvZnW64=
webpack-cli@^3.3.11:
version "3.3.12"
resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.3.12.tgz#94e9ada081453cd0aa609c99e500012fd3ad2d4a"