lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Adding buttons to switch mode

Browse source
This commit is contained in:
David Négrier 2020-08-17 15:20:03 +02:00
parent 05ca8c813e
commit 7fe2cc19c3
3 changed files with 49 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
front/dist/resources/objects/layout_modes.png vendored Normal file
View file

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 297 B

2
front/dist/resources/style/style.css vendored
View file

@ -355,12 +355,14 @@ body {
width: 100%;
flex-wrap: wrap;
align-items: flex-start;
padding: 1%;
}
.chat-mode div {
margin: 1%;
max-height: 96%;
}
.chat-mode.one-col > div {

54
front/src/Phaser/Game/GameScene.ts
View file

@ -106,6 +106,9 @@ export class GameScene extends Phaser.Scene {
private PositionNextScene: Array<Array<{ key: string, hash: string }>> = new Array<Array<{ key: string, hash: string }>>();
private startLayerName: string|undefined;
private presentationModeSprite!: Sprite;
private chatModeSprite!: Sprite;
private repositionCallback!: (this: Window, ev: UIEvent) => void;
static createFromUrl(mapUrlFile: string, instance: string, key: string|null = null): GameScene {
const mapKey = GameScene.getMapKeyByUrl(mapUrlFile);
@ -158,6 +161,12 @@ export class GameScene extends Phaser.Scene {
);
});
this.load.spritesheet(
'layout_modes',
'resources/objects/layout_modes.png',
{frameWidth: 32, frameHeight: 32}
);
loadAllLayers(this.load);
this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
@ -213,6 +222,7 @@ export class GameScene extends Phaser.Scene {
this.scene.stop(this.scene.key);
this.scene.remove(this.scene.key);
window.removeEventListener('resize', this.repositionCallback);
})
// When connection is performed, let's connect SimplePeer
@ -364,15 +374,39 @@ export class GameScene extends Phaser.Scene {
}, 500);
}
// FIXME: handle display / hide based on number of cameras connected
this.presentationModeSprite = this.add.sprite(2, this.game.renderer.height - 2, 'layout_modes', 0);
this.presentationModeSprite.setScrollFactor(0, 0);
this.presentationModeSprite.setOrigin(0, 1);
this.presentationModeSprite.setInteractive();
this.presentationModeSprite.on('pointerup', this.switchLayoutMode.bind(this));
this.chatModeSprite = this.add.sprite(36, this.game.renderer.height - 2, 'layout_modes', 3);
this.chatModeSprite.setScrollFactor(0, 0);
this.chatModeSprite.setOrigin(0, 1);
this.chatModeSprite.setInteractive();
this.chatModeSprite.on('pointerup', this.switchLayoutMode.bind(this));
// FIXME: change this to use the class for input
this.input.keyboard.on('keyup-' + 'M', function () {
const mode = layoutManager.getLayoutMode();
if (mode === LayoutMode.Presentation) {
layoutManager.switchLayoutMode(LayoutMode.VideoChat);
} else {
layoutManager.switchLayoutMode(LayoutMode.Presentation);
}
this.input.keyboard.on('keyup-' + 'M', () => {
this.switchLayoutMode();
});
this.repositionCallback = this.reposition.bind(this);
window.addEventListener('resize', this.repositionCallback);
this.reposition();
}
private switchLayoutMode(): void {
const mode = layoutManager.getLayoutMode();
if (mode === LayoutMode.Presentation) {
layoutManager.switchLayoutMode(LayoutMode.VideoChat);
this.presentationModeSprite.setFrame(1);
this.chatModeSprite.setFrame(2);
} else {
layoutManager.switchLayoutMode(LayoutMode.Presentation);
this.presentationModeSprite.setFrame(0);
this.chatModeSprite.setFrame(3);
}
}
private getExitSceneUrl(layer: ITiledMapLayer): string|undefined {
@ -634,6 +668,7 @@ export class GameScene extends Phaser.Scene {
this.simplePeer.unregister();
this.scene.stop();
this.scene.remove(this.scene.key);
window.removeEventListener('resize', this.repositionCallback);
this.scene.start(nextSceneKey.key, {
startLayerName: nextSceneKey.hash
});
@ -821,4 +856,9 @@ export class GameScene extends Phaser.Scene {
const endPos = mapUrlStart.indexOf(".json");
return mapUrlStart.substring(startPos, endPos);
}
private reposition(): void {
this.presentationModeSprite.setY(this.game.renderer.height - 2);
this.chatModeSprite.setY(this.game.renderer.height - 2);
}
}