fix: adjust bottom bar positioning and game container alignment

Author: tcandicetc

src/App.vue

@@ -51,7 +51,7 @@ const goToGameScene = () => {
 
 <style scoped>
 .bottom-bar {
-  position: absolute;
+  position: fixed;
   display: flex;
   bottom: 0;
   height: 70px;

src/components/PhaserGame.vue

@@ -261,7 +261,7 @@ watch([showPopup, popupData], async ([isOpen, data]) => {
 </script>
 
 <template>
-  <div id="game-container" />
+  <div id="game-container" :style="{ bottom: `${GameData.bottomBarHeight}px` }" />
   <div class="popup-overlay" id="popup" v-if="showPopup">
     <div class="popup-content">
       <button class="popup-close" id="popupClose" @click="closePopup()">x</button>
@@ -309,8 +309,11 @@ watch([showPopup, popupData], async ([isOpen, data]) => {
 
 <style scoped>
 #game-container {
-  width: 100%;
-  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 0;
 }
 
 .popup-overlay {

src/game/scenes/Game.ts

@@ -59,7 +59,7 @@ export class Game extends Scene {
     const startY = GameData.screenHeight - spacingY * (rows + 1)
     const startX = 0
 
-    this.contentContainer = this.add.container(0, -GameData.bottomBarHeight)
+    this.contentContainer = this.add.container(0, 0)
 
     for (let row = 0; row < rows; row++) {
       for (let col = 0; col < cols; col++) {
@@ -95,7 +95,7 @@ export class Game extends Scene {
         const maxY =  GameData.screenHeight * 0.5 - lastTile.centerY
         this.contentContainer.y = this.containerStartY + deltaY
 
-        this.contentContainer.y = Phaser.Math.Clamp(this.contentContainer.y, -GameData.bottomBarHeight , maxY)
+        this.contentContainer.y = Phaser.Math.Clamp(this.contentContainer.y, 0, maxY)
       }
     })
 
@@ -139,10 +139,10 @@ export class Game extends Scene {
     const tile = new HexTile(randomData(this, pos.x, pos.y))
     this.contentContainer.addAt(tile, 0)
     GameData.path.push(tile)
-    this.contentContainer.y = Math.max(GameData.screenHeight * 0.5 - lastTile.y, -GameData.bottomBarHeight)
+    this.contentContainer.y = Math.max(GameData.screenHeight * 0.5 - lastTile.y, 0)
     this.tweens.add({
       targets: this.contentContainer,
-      y: Math.max(GameData.screenHeight * 0.5 - pos.y, -GameData.bottomBarHeight),
+      y: Math.max(GameData.screenHeight * 0.5 - pos.y, 0),
       duration: 1000,
       ease: 'Sine.easeInOut',
     })