From 315015282a1dd81602d1662075f76eb714f9ca96 Mon Sep 17 00:00:00 2001
From: Lars Berning <151194+laberning@users.noreply.github.com>
Date: Sat, 19 Feb 2022 22:33:22 +0100
Subject: [PATCH] fixes layout problem in portrait orientation

---
 app/client/arcade/RowingGames.js       |  3 ++-
 app/client/components/GameComponent.js | 14 ++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

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