diff --git a/app/client/arcade/RowingGames.js b/app/client/arcade/RowingGames.js index 2c45b27..9be074d 100644 --- a/app/client/arcade/RowingGames.js +++ b/app/client/arcade/RowingGames.js @@ -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 diff --git a/app/client/components/GameComponent.js b/app/client/components/GameComponent.js index 9af245f..9d135b3 100644 --- a/app/client/components/GameComponent.js +++ b/app/client/components/GameComponent.js @@ -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