Added UI adaptation for mobile

neki-dev · Sep 29, 2023 · b5cb023 · b5cb023
1 parent 4604442
commit b5cb023
Show file tree

Hide file tree

Showing 14 changed files with 85 additions and 20 deletions.
diff --git a/src/const/interface.ts b/src/const/interface.ts
@@ -3,3 +3,5 @@ export const INTERFACE_SCALE = {
   min: 0.7,
   max: 1.0,
 };
+
+export const INTERFACE_MOBILE_BREAKPOINT = '(max-height: 400px)';
diff --git a/src/game/scenes/screen/interface/builder/index.tsx b/src/game/scenes/screen/interface/builder/index.tsx
@@ -23,25 +23,25 @@ export const Builder: React.FC = () => {
       case TutorialStep.BUILD_GENERATOR: {
         return setHint({
           variant: BuildingVariant.GENERATOR,
-          text: 'Build generator to get resources',
+          text: 'Build generator\nto get resources',
         });
       }
       case TutorialStep.BUILD_RADAR: {
         return setHint({
           variant: BuildingVariant.RADAR,
-          text: 'Build radar to uncover enemies',
+          text: 'Build radar\nto uncover enemies',
         });
       }
       case TutorialStep.BUILD_TOWER_FIRE: {
         return setHint({
           variant: BuildingVariant.TOWER_FIRE,
-          text: 'Build tower to attack enemies',
+          text: 'Build tower\nto attack enemies',
         });
       }
       case TutorialStep.BUILD_AMMUNITION: {
         return setHint({
           variant: BuildingVariant.AMMUNITION,
-          text: 'Build ammunition to reload towers',
+          text: 'Build ammunition\nto reload towers',
         });
       }
     }

diff --git a/src/game/scenes/screen/interface/builder/preview/index.tsx b/src/game/scenes/screen/interface/builder/preview/index.tsx
@@ -6,7 +6,9 @@ import { GameScene } from '~type/game';
 import { IWorld } from '~type/world';
 import { BuildingVariant } from '~type/world/entities/building';
 
-import { Container, Number, Preview } from './styles';
+import {
+  Container, Number, Preview, Newest,
+} from './styles';
 
 type Props = {
   number: number

diff --git a/src/game/scenes/screen/interface/builder/styles.ts b/src/game/scenes/screen/interface/builder/styles.ts
@@ -1,7 +1,15 @@
 import styled from 'styled-components';
 
+import { INTERFACE_MOBILE_BREAKPOINT } from '~const/interface';
+
 export const Wrapper = styled.div`
   pointer-events: all;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 10px;
+  @media ${INTERFACE_MOBILE_BREAKPOINT} {
+    grid-gap: 2px;
+  }
 `;
 
 export const Info = styled.div`
@@ -16,9 +24,6 @@ export const Variant = styled.div`
   position: relative;
   display: flex;
   align-items: center;
-  &:not(:last-child) {
-    margin-bottom: 10px;
-  }
   &:hover {
     [role=hint] {
       display: none;

diff --git a/src/game/scenes/screen/interface/player-hud/avatar/styles.ts b/src/game/scenes/screen/interface/player-hud/avatar/styles.ts
@@ -1,12 +1,17 @@
 import styled from 'styled-components';
 
+import { INTERFACE_MOBILE_BREAKPOINT } from '~const/interface';
 import { InterfaceBackgroundColor } from '~type/interface';
 
 export const Container = styled.div`
   width: 80px;
   height: 80px;
   background: ${InterfaceBackgroundColor.BLACK_TRANSPARENT_50};
   border-radius: 5px 5px 0 0;
+  @media ${INTERFACE_MOBILE_BREAKPOINT} {
+    width: 70px;
+    height: 70px;
+  }
 `;
 
 export const Image = styled.img`

diff --git a/src/game/scenes/screen/interface/player-hud/health/styles.ts b/src/game/scenes/screen/interface/player-hud/health/styles.ts
@@ -1,11 +1,15 @@
 import styled from 'styled-components';
 
+import { INTERFACE_MOBILE_BREAKPOINT } from '~const/interface';
 import { InterfaceBackgroundColor, InterfaceFont } from '~type/interface';
 
 export const Container = styled.div`
   background: #000;
   width: 80px;
   position: relative;
+  @media ${INTERFACE_MOBILE_BREAKPOINT} {
+    width: 70px;
+  }
 `;
 
 export const Progress = styled.div`

diff --git a/src/game/scenes/screen/interface/player-hud/skills/index.tsx b/src/game/scenes/screen/interface/player-hud/skills/index.tsx
@@ -34,7 +34,7 @@ export const Skills: React.FC = () => {
 
   return (
     <Wrapper>
-      <Button onClick={onClickButton} view={isOpened ? 'active' : undefined} size='fixed'>
+      <Button onClick={onClickButton} view={isOpened ? 'active' : undefined}>
         SKILLS
       </Button>
       {isOpened && <UpgradesList onClose={onClose} />}

diff --git a/src/game/scenes/screen/interface/player-hud/styles.ts b/src/game/scenes/screen/interface/player-hud/styles.ts
@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 
+import { INTERFACE_MOBILE_BREAKPOINT } from '~const/interface';
+
 export const Wrapper = styled.div`
   display: flex;
 `;
@@ -8,8 +10,16 @@ export const Group = styled.div`
   &:not(:last-child) {
     margin-right: 16px;
   }
+  @media ${INTERFACE_MOBILE_BREAKPOINT} {
+    &:not(:last-child) {
+      margin-right: 12px;
+    }
+  }
 `;
 
 export const Space = styled.div`
   height: 6px;
+  @media ${INTERFACE_MOBILE_BREAKPOINT} {
+    height: 4px;
+  }
 `;
diff --git a/src/game/scenes/screen/interface/styles.ts b/src/game/scenes/screen/interface/styles.ts
@@ -1,11 +1,16 @@
 import styled, { css } from 'styled-components';
 
+import { INTERFACE_MOBILE_BREAKPOINT } from '~const/interface';
+
 export const Wrapper = styled.div`
   width: 100%;
   height: 100%;
   padding: 32px;
   display: flex;
   justify-content: space-between;
+  @media ${INTERFACE_MOBILE_BREAKPOINT} {
+    padding: 16px;
+  }
 `;
 
 export const Grid = styled.div`

diff --git a/src/game/scenes/screen/interface/wave/styles.ts b/src/game/scenes/screen/interface/wave/styles.ts
@@ -1,5 +1,6 @@
 import styled, { css, keyframes } from 'styled-components';
 
+import { INTERFACE_MOBILE_BREAKPOINT } from '~const/interface';
 import {
   InterfaceFont,
   InterfaceTextColor,
@@ -25,6 +26,9 @@ export const Container = styled.div`
   padding: 10px 15px 10px 10px;
   background: ${InterfaceBackgroundColor.BLACK_TRANSPARENT_75};
   border-radius: 5px;
+  @media ${INTERFACE_MOBILE_BREAKPOINT} {
+    padding: 7px 11px 7px 7px;
+  }
 `;
 
 export const CurrentNumber = styled.div<{
@@ -46,6 +50,11 @@ export const CurrentNumber = styled.div<{
     return InterfaceBackgroundColor.SUCCESS;
   }};
   box-shadow: 0 20px 0 ${InterfaceBackgroundColor.WHITE_TRANSPARENT_15} inset;
+  @media ${INTERFACE_MOBILE_BREAKPOINT} {
+    font-size: 22px;
+    line-height: 22px;
+    padding: 4px 13px 8px 13px;
+  }
 `;
 
 export const State = styled.div`
@@ -57,6 +66,11 @@ export const Label = styled.div`
   line-height: 11px;
   opacity: 0.5;
   margin-top: -2px;
+  @media ${INTERFACE_MOBILE_BREAKPOINT} {
+    font-size: 8px;
+    line-height: 8px;
+    opacity: 0.75;
+  }
 `;
 
 export const Value = styled.div<{

diff --git a/src/game/scenes/system/interface/amount/styles.ts b/src/game/scenes/system/interface/amount/styles.ts
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 
+import { INTERFACE_MOBILE_BREAKPOINT } from '~const/interface';
 import { InterfaceFont, InterfaceBackgroundColor } from '~type/interface';
 
 export const Placeholder = styled.div`
@@ -42,10 +43,17 @@ export const IconContainer = styled.div`
   justify-content: center;
   width: 32px;
   height: 32px;
+  @media ${INTERFACE_MOBILE_BREAKPOINT} {
+    width: 28px;
+    height: 28px;
+  }
 `;
 
 export const Icon = styled.img`
   width: 16px;
+  @media ${INTERFACE_MOBILE_BREAKPOINT} {
+    width: 14px;
+  }
 `;
 
 export const Value = styled.div`
@@ -57,4 +65,10 @@ export const Value = styled.div`
   display: flex;
   align-items: center;
   flex: 1;
+  @media ${INTERFACE_MOBILE_BREAKPOINT} {
+    height: 28px;
+    font-size: 15px;
+    line-height: 15px;
+    padding: 0 9px 0 6px;
+  }
 `;
diff --git a/src/game/scenes/system/interface/button/index.tsx b/src/game/scenes/system/interface/button/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Container } from './styles';
 
 type Props = {
-  size?: 'fixed' | 'small' | 'medium' | 'large'
+  size?: 'small' | 'medium' | 'large'
   view?: 'active' | 'primary' | 'confirm' | 'decline'
   disabled?: boolean
   onClick: (event: React.MouseEvent<HTMLDivElement>) => void

diff --git a/src/game/scenes/system/interface/button/styles.ts b/src/game/scenes/system/interface/button/styles.ts
@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 
+import { INTERFACE_MOBILE_BREAKPOINT } from '~const/interface';
 import { InterfaceFont, InterfaceBackgroundColor } from '~type/interface';
 
 export const Container = styled.div<{
@@ -44,12 +45,6 @@ export const Container = styled.div<{
   }}
   ${(props) => {
     switch (props.$size) {
-      case 'fixed': return css`
-        text-align: center;
-        font-size: 10px;
-        line-height: 24px;
-        width: 80px;
-      `;
       case 'large': return css`
         font-size: 22px;
         line-height: 22px;
@@ -60,12 +55,21 @@ export const Container = styled.div<{
         line-height: 18px;
         padding: 10px 18px 11px 18px;
       `;
-      case 'small':
-      default: return css`
+      case 'small': return css`
         font-size: 11px;
         line-height: 11px;
         padding: 7px 10px 8px 10px;
       `;
+      default: return css`
+        font-size: 10px;
+        line-height: 10px;
+        text-align: center;
+        padding: 6px 0 7px 0;
+        @media ${INTERFACE_MOBILE_BREAKPOINT} {
+          font-size: 8px;
+          line-height: 8px;
+        }
+      `;
     }
   }}
   ${(props) => (props.$disabled ? css`

diff --git a/src/game/scenes/system/interface/modal/index.tsx b/src/game/scenes/system/interface/modal/index.tsx
@@ -13,8 +13,8 @@ export const Modal: React.FC<Props> = ({ children, onConfirm, onClose }) => (
   <Container>
     <Content>{children}</Content>
     <Buttons>
-        <Button view='confirm' onClick={onConfirm}>Yes</Button>
-        <Button view='decline' onClick={onClose}>No</Button>
+        <Button view='confirm' size='small' onClick={onConfirm}>Yes</Button>
+        <Button view='decline' size='small' onClick={onClose}>No</Button>
     </Buttons>
   </Container>
 );