cyteen
/
openrowingmonitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes layout problem in portrait orientation

This commit is contained in:
Lars Berning 2022-02-19 22:33:22 +01:00
parent 75b837b95b
commit 315015282a
No known key found for this signature in database
GPG Key ID: 028E73C9E1D8A0B3
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/client/arcade/RowingGames.js
View File

@ -15,11 +15,12 @@ import StrokeFighterStartScene from './StrokeFighterStartScene.js'
* @param {number} clientWidth
* @param {number} clientHeight
*/
export function createRowingGames (canvasElement, clientWidth, clientHeight) {
export function createRowingGames (rootComponent, canvasElement, clientWidth, clientHeight) {
const k = createGameEngine({
debug: true,
global: false,
canvas: canvasElement,
root: rootComponent,
crisp: false,
width: clientWidth,
height: clientHeight

14
app/client/components/GameComponent.js
View File

@ -22,17 +22,19 @@ export class GameComponent extends AppElement {
height: 100vh;
display: flex;
}
#arcade {
width: 100vh !important;
height: 100vh !important;
@media (orientation: landscape) {
#arcade {
width: 100vh !important;
height: 100vh !important;
}
}
@media (orientation: portrait) {
:host {
flex-direction: column
}
#arcade {
width: 100vw;
height: 100vw;
width: 100vw !important;
height: 100vw !important;
}
}
div > .icon {
@ -110,7 +112,7 @@ export class GameComponent extends AppElement {
const canvas = this.renderRoot.querySelector('#arcade')
// this.rowingGames = createRowingGames(canvas, canvas.clientWidth, canvas.clientHeight)
// @ts-ignore
this.rowingGames = createRowingGames(canvas, gameSize, gameSize)
this.rowingGames = createRowingGames(this.renderRoot, canvas, gameSize, gameSize)
// This mitigates a problem with delayed app state updates in the kaboom game.
// If we use the change events from our Web Component to notify the game (i.e. by using the