fix: 🐛 Status bar image

✅ Closes: #86

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Bug #178: Fix for player to be able to move in mobile version (MadejaMaciej)
 - Bug #177: Fix for menu and other parts not visible in mobile version (MadejaMaciej)
+- Bug #86: Fix status bar image (MadejaMaciej)
 
 - Enh #179: Allow users to remove the game from saved game list (MadejaMaciej)
 

src/components/game/Game.tsx

@@ -94,14 +94,18 @@ function Game({
       <div
         style={{
           height: "4.90740740740741vh",
-          marginLeft: "vw",
+          marginLeft: "5vw",
           marginRight: "5vw",
         }}
       >
         <Text text={info} classes="red info left no-vertical-margin" />
       </div>
       <canvas ref={canvasRef} id="game-canvas" />
-      <GameMenu setOpened={setOpened} gameState={savedGame} />
+      <GameMenu
+        setOpened={setOpened}
+        gameState={savedGame}
+        windowDimensions={windowDimensions}
+      />
     </div>
   );
 }

src/components/ui/DayBoard.tsx

@@ -10,6 +10,7 @@ function DayBoard() {
       <h3
         style={{
           textAlign: "center",
+          margin: 0,
         }}
       >
         MONDAY

src/components/ui/GameBoard.tsx

@@ -1,35 +1,40 @@
-import React from "react";
+import React, { useMemo } from "react";
 import GameTitle from "./GameTitle";
 import pickaxeAndShover from "../../images/ui/pickaxe_and_shovel1.png";
 import board from "../../images/ui/down_board.png";
+import { ResizeUIProps } from "../../types/menu";
+
+function GameBoard({ windowDimensions }: ResizeUIProps) {
+  const ratio = useMemo(() => 1847 / 551, []);
+  const widthPixels = useMemo(
+    () => (1847 * windowDimensions.width) / 3840,
+    [windowDimensions]
+  );
 
-function GameBoard() {
   return (
     <div
       style={{
         display: "flex",
+        position: "relative",
         backgroundImage: `url(${board})`,
-        backgroundPosition: "center",
         backgroundRepeat: "no-repeat",
-        backgroundSize: "cover",
+        backgroundSize: "contain",
+        top: "1vh",
+        left: "5vw",
+        width: `${widthPixels}px`,
+        height: `${widthPixels / ratio}px`,
+        justifyContent: "space-between",
+        padding: "3vh 2vw 0",
       }}
     >
-      <div>
-        <img
-          src={pickaxeAndShover}
-          alt="Pickaxe and shovel"
-          className="board-pickaxe"
-        />
+      <div className="board-pickaxe">
+        <img src={pickaxeAndShover} alt="Pickaxe and shovel" />
       </div>
       <div>
-        <GameTitle />
+        <GameTitle windowDimensions={windowDimensions} />
       </div>
-      <div>
-        <img
-          src={pickaxeAndShover}
-          alt="Pickaxe and shovel"
-          className="board-pickaxe"
-        />
+      <div className="board-pickaxe board-pickaxe-right">
+        <img src={pickaxeAndShover} alt="Pickaxe and shovel" />
       </div>
     </div>
   );

src/components/ui/GameMenu.tsx

@@ -5,7 +5,7 @@ import Clock from "./Clock";
 import BottomMenuButtons from "./BottomMenuButtons";
 import { InGameMenuProps } from "../../types/menu";
 
-function GameMenu({ gameState, setOpened }: InGameMenuProps) {
+function GameMenu({ gameState, setOpened, windowDimensions }: InGameMenuProps) {
   return (
     <div
       style={{
@@ -27,9 +27,10 @@ function GameMenu({ gameState, setOpened }: InGameMenuProps) {
         <div
           style={{
             display: "flex",
+            maxHeight: "70%",
           }}
         >
-          <GameBoard />
+          <GameBoard windowDimensions={windowDimensions} />
           <Clock />
         </div>
         <div>

src/components/ui/GameTitle.tsx

@@ -1,10 +1,36 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { setText } from "../../context/language";
+import { ResizeUIProps } from "../../types/menu";
+
+function GameTitle({ windowDimensions }: ResizeUIProps) {
+  const ratio = useMemo(() => 60.3376 / 50.1747, []);
+  const widthPixels = useMemo(
+    () => (1134.9712917023096663815226689478 * windowDimensions.width) / 3840,
+    [windowDimensions]
+  );
+  const fontSize = useMemo(() => widthPixels / 5.7586, [widthPixels]);
 
-function GameTitle() {
   return (
     <div>
-      <h2>{"Lost Dutchman Mine"}</h2>
+      <h2
+        className="title-on-board"
+        style={{
+          fontSize: `${fontSize}px`,
+          lineHeight: `${fontSize / ratio}px`,
+        }}
+      >
+        Lost <br /> Dutchman <br />
+        Mine{" "}
+        <span
+          className="trademark"
+          style={{
+            fontSize: `${fontSize / 3}px`,
+            lineHeight: `${fontSize / ratio / 3}px`,
+          }}
+        >
+          TM
+        </span>
+      </h2>
     </div>
   );
 }

src/components/ui/Termometer.tsx

@@ -6,6 +6,7 @@ function Termometer() {
     <div
       style={{
         position: "relative",
+        marginLeft: "3vw",
       }}
     >
       <img
@@ -18,6 +19,8 @@ function Termometer() {
           bottom: "2.5%",
           left: "0%",
           height: "95%",
+          WebkitFilter: "drop-shadow(3px 3px 3px #222)",
+          filter: "drop-shadow(3px 3px 3px #222)",
         }}
       />
       {/* Bar of termometer */}

src/styles/index.css

@@ -39,10 +39,6 @@ body:focus {
   color: #fff;
 }
 
-.board-pickaxe {
-  width: 70px;
-}
-
 .absolute {
   position: absolute;
 }
@@ -112,3 +108,17 @@ body:focus {
 .custom--dropdown-container {
   cursor: pointer;
 }
+
+.title-on-board {
+  text-align: center;
+  margin: 0;
+  margin-top: -2vh;
+}
+
+.board-pickaxe img {
+  width: 4vw;
+}
+
+.trademark {
+  color: hsl(0deg 0% 5.49%);
+}

src/types/menu.d.ts

@@ -27,8 +27,18 @@ export type BottomMenuButtonsProps = {
   setOpened: Function;
 };
 
+export type GameTitle = {
+  parentWidth: number;
+  parentHeight: number;
+};
+
+export type ResizeUIProps = {
+  windowDimensions: WindowDimensions;
+};
+
 export interface InGameMenuProps extends BottomMenuButtonsProps {
   gameState: SavedGame;
+  windowDimensions: WindowDimensions;
 }
 
 export interface MenuButtonProps extends TextProps {