Fy varaman optimization (gear-foundation#439)

frontend/apps/vara-man/package.json

@@ -17,7 +17,8 @@
     "@dapps-frontend/ui": "workspace:*",
     "@gear-js/api": "0.38.1",
     "@gear-js/react-hooks": "0.12.1",
-    "@gear-js/ui": "0.5.21",
+    "@gear-js/ui": "0.5.26",
+    "@gear-js/vara-ui": "0.0.6",
     "@headlessui/react": "1.7.13",
     "@mantine/form": "6.0.19",
     "@polkadot/api": "11.0.2",

frontend/apps/vara-man/src/app.tsx

@@ -5,19 +5,27 @@ import { useApi, useAccount } from '@gear-js/react-hooks';
 import { Container, Footer } from '@dapps-frontend/ui';
 import { Routing } from './pages';
 import { ApiLoader } from './components/loaders/api-loader';
+import { useLocation } from 'react-router-dom';
 import { Header } from '@/components/layout';
 import { withProviders } from '@/app/hocs';
 
 import '@gear-js/vara-ui/dist/style.css';
+import { useGame } from './app/context/ctx-game';
+import { useMediaQuery } from './hooks/use-mobile-device';
+import { MOBILE_BREAKPOINT } from './app/consts';
 
 const Component = () => {
   const { isApiReady } = useApi();
   const { isAccountReady } = useAccount();
+  const { pathname } = useLocation();
+  const { tournamentGame } = useGame();
+  const isMobile = useMediaQuery(MOBILE_BREAKPOINT);
+
+  const isHeader = pathname === '/game' || (tournamentGame && tournamentGame[0].stage !== 'Registration');
+
   return (
     <div className="flex flex-col min-h-screen overflow-hidden">
-      <div className='container'>
-        <Header />
-      </div>
+      {isHeader && isMobile ? null : <Header />}
       <main className="flex flex-col flex-1 relative pt-3 pb-5 container">
         {isApiReady && isAccountReady ? <Routing /> : <ApiLoader />}
       </main>

frontend/apps/vara-man/src/components/layout/header/Header.module.scss

@@ -1,65 +1,43 @@
 .header {
-  height: 100px;
-  width: 100%;
-  box-sizing: border-box;
-  background: transparent;
-}
-
-.container {
-  height: 100%;
-  padding: 20px 0;
-  max-width: 1200px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: auto;
-}
-
-.walletBalance {
-  color: #000000;
-}
+  position: relative;
+  z-index: 10;
+  padding: 20px;
+
+  &__container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0;
+  }
 
-.menuIcon {
-  & svg path {
-    fill: #000000;
-    stroke: #000000;
+  &__logo {
+    flex-shrink: 0;
   }
-}
 
-.vara-logo {
-  margin-right: 22px;
+  &__wallet {
+    @media screen and (max-width: 767px) {
+      display: none;
+    }
+  }
 }
 
-.headerContent {
-  display: flex;
-  align-items: center;
-  gap: 48px;
+.wallet > button {
+  font-size: 16px;
+  padding-right: 22px;
+  padding-left: 22px;
 }
 
-.cancelGameButton {
-  background: #f24a4a12;
-  color: #f24a4a;
-  border-radius: 0;
+.mobile_balance {
+  display: none;
 
-  svg path {
-    fill: #f24a4a;
-    stroke: #f24a4a;
-  }
-}
-
-.dropdown {
   @media screen and (max-width: 767px) {
     display: block;
+    display: flex;
+    margin-right: 14px;
   }
 }
 
-.dropdown {
-  @media screen and (max-width: 767px) {
-    z-index: 4;
-    display: block;
-
-    button {
-      display: flex !important;
-    }
-  }
+.menu_wrapper {
+  display: flex;
+  flex-direction: row-reverse;
 }

frontend/apps/vara-man/src/components/layout/header/header.tsx

@@ -8,36 +8,26 @@ import { EzGaslessTransactions, EzSignlessTransactions } from '@dapps-frontend/e
 
 import styles from './Header.module.scss';
 import { SIGNLESS_ALLOWED_ACTIONS } from '@/app/consts';
+import { Logo } from './logo';
+import clsx from 'clsx';
+import { useAccount } from '@gear-js/react-hooks';
 
 export const Header = () => {
   const { isAdmin } = useGame();
+  const { account } = useAccount();
 
   return (
     <CommonHeader
-      logo={
-        <Link to="/">
-          <Icons.logo className="h-15" />
-        </Link>
-      }
+      logo={<Logo className={clsx(styles.header__logo, !account && styles['header__logo--center'])} />}
       menu={
         <MenuHandler
-          className={{
-            wallet: {
-              balance: styles.walletBalance,
-            },
-            icon: styles.menuIcon,
-            dropdown: styles.dropdown,
-          }}
           customItems={[
-            {
-              key: 'signless',
-              option: <EzSignlessTransactions allowedActions={SIGNLESS_ALLOWED_ACTIONS} />,
-            },
+            { key: 'signless', option: <EzSignlessTransactions allowedActions={SIGNLESS_ALLOWED_ACTIONS} /> },
             { key: 'gasless', option: <EzGaslessTransactions /> },
           ]}
         />
       }
-      className={{ header: styles.header, content: styles.container }}>
+      className={{ header: styles.header, content: styles.header__container }}>
       {isAdmin && <HeaderAdmin />}
     </CommonHeader>
   );

frontend/apps/vara-man/src/components/layout/header/logo/index.ts

@@ -0,0 +1 @@
+export { Logo } from './logo';

frontend/apps/vara-man/src/components/layout/header/logo/logo.module.scss

@@ -0,0 +1,43 @@
+.link {
+  display: inline-flex;
+  transition: opacity 300ms ease;
+
+  @media screen and (max-width: 767px) {
+    position: relative;
+  }
+
+  &:not(.active):hover {
+    opacity: 0.7;
+  }
+
+  .title {
+    --gradient-to: #0ed3a3;
+
+    align-self: flex-start;
+    margin-top: -4px;
+    font-size: 20px;
+    line-height: 24px;
+    white-space: nowrap;
+    user-select: none;
+
+    @media screen and (max-width: 767px) {
+      display: none;
+      position: absolute;
+      left: 100%;
+      font-size: 10px;
+      line-height: 18px;
+    }
+  }
+}
+
+.logo {
+  width: 100%;
+  height: 100%;
+  max-height: 60px;
+  max-width: 92px;
+
+  @media screen and (max-width: 767px) {
+    max-height: 40px;
+    max-width: 62px;
+  }
+}

frontend/apps/vara-man/src/components/layout/header/logo/logo.tsx

@@ -0,0 +1,20 @@
+import { NavLink } from 'react-router-dom';
+import clsx from 'clsx';
+import styles from './logo.module.scss';
+import { SpriteIcon } from '@/components/ui/sprite-icon';
+// import { ROUTES } from '@/app/consts';
+// import { TextGradient } from '@/components/ui/text-gradient';
+// import { Sprite } from '@/components/ui/sprite';
+// import type { BaseComponentProps } from '@/app/types';
+
+type LogoProps = BaseComponentProps & {
+  label?: string;
+};
+
+export function Logo({ className, label }: LogoProps) {
+  return (
+    <NavLink to={'/'} className={({ isActive }) => clsx(styles.link, isActive && styles.active, className)}>
+      <SpriteIcon name="vara-logo" width={92} height={60} className={styles.logo} />
+    </NavLink>
+  );
+}

frontend/apps/vara-man/src/components/sections/levels/levels-select-mode.tsx

@@ -74,7 +74,7 @@ export function LevelsSelectMode() {
                   </div>
                 </div>
               </div>
-              {item.title === 'Hard' && (
+              {item.title === 'Hardcore' && (
                 <div className="bg-[#EB5757] rounded-b-2xl border border-[var(--stats-theme)] font-semibold text-white flex justify-center items-center gap-1.5">
                   <Icons.blindMode /> Blind mode
                 </div>

frontend/apps/vara-man/src/components/sections/tournament/tournament-find.tsx

@@ -92,8 +92,8 @@ export const TournamentFind = () => {
         <div className="flex flex-col gap-10">
           <Input
             type="text"
-            label="Specify the game admin address:"
             placeholder="kG…"
+            label="Specify the game admin address:"
             required
             className="w-full"
             onChange={(e) => setFindAddress(e.target.value)}

frontend/apps/vara-man/src/feature/game/components/game-canvas/game-canvas.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import BackgroundMapImg from '@/assets/images/border.png';
 import MobileController from '../mobile-controller/mobile-controller';
 import { GameEngine } from '../../models/Game';
@@ -10,13 +10,17 @@ type GameCanvasProps = {
   isPause?: boolean;
 };
 
-export const GameCanvas = ({ canvasRef, fogCanvasRef, gameInstanceRef, isPause }: GameCanvasProps) => {
+const useResizeCanvas = (
+  canvasRef: GameCanvasProps['canvasRef'],
+  fogCanvasRef: GameCanvasProps['fogCanvasRef'],
+  gameInstanceRef: GameCanvasProps['gameInstanceRef'],
+) => {
   useEffect(() => {
     const resizeCanvas = () => {
       const canvas = canvasRef.current;
       const fogCanvas = fogCanvasRef.current;
       if (canvas && fogCanvas) {
-        const dpr = window.devicePixelRatio || 1;
+        const dpr = window.devicePixelRatio;
         canvas.width = canvas.clientWidth * dpr;
         canvas.height = canvas.clientHeight * dpr;
         fogCanvas.width = fogCanvas.clientWidth * dpr;
@@ -31,20 +35,26 @@ export const GameCanvas = ({ canvasRef, fogCanvasRef, gameInstanceRef, isPause }
       }
     };
 
+    if (gameInstanceRef.current) {
+      resizeCanvas();
+    } else {
+      const timeoutId = setTimeout(resizeCanvas, 100);
+      return () => clearTimeout(timeoutId);
+    }
+
     window.addEventListener('resize', resizeCanvas);
-    resizeCanvas();
 
     return () => {
       window.removeEventListener('resize', resizeCanvas);
     };
-  }, [canvasRef, fogCanvasRef, gameInstanceRef]);
+  }, [canvasRef, fogCanvasRef, gameInstanceRef.current]);
+};
+
+export const GameCanvas = ({ canvasRef, fogCanvasRef, gameInstanceRef, isPause }: GameCanvasProps) => {
+  useResizeCanvas(canvasRef, fogCanvasRef, gameInstanceRef);
 
   return (
-    <div
-      className="ml-auto mr-auto max-md:w-full max-md:h-max z-2"
-      style={{
-        position: 'relative',
-      }}>
+    <div className="ml-auto mr-auto max-md:w-full max-md:h-max z-2" style={{ position: 'relative' }}>
       <canvas
         className="-left-6 md:relative md:left-0 md:h-auto h-[100dvh] z-1"
         style={{ position: 'absolute' }}

frontend/apps/vara-man/src/feature/game/components/mobile-controller/mobile-controller.tsx

@@ -33,7 +33,9 @@ const MobileController = ({ gameInstanceRef }: MobileControllerProps) => {
   }, []);
 
   const preventDefault = (e: TouchEvent) => {
-    e.preventDefault();
+    if (e.cancelable) {
+      e.preventDefault();
+    }
   };
 
   const handleShiftTouchStart = () => {