Fixed interactions with builder for mobile

neki-dev · Sep 29, 2023 · cccfda2 · cccfda2
1 parent 05fcf2d
commit cccfda2
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 19 deletions.
diff --git a/src/game/scenes/screen/interface/builder/index.tsx b/src/game/scenes/screen/interface/builder/index.tsx
@@ -1,9 +1,10 @@
-import { useGame } from 'phaser-react-ui';
+import { useGame, useScene, useSceneUpdate } from 'phaser-react-ui';
 import React, { useEffect, useState } from 'react';
 
 import { Hint } from '~scene/system/interface/hint';
-import { IGame } from '~type/game';
+import { GameScene, IGame } from '~type/game';
 import { TutorialStep } from '~type/tutorial';
+import { IWorld } from '~type/world';
 import { BuildingVariant } from '~type/world/entities/building';
 
 import { BuilderInfo } from './info';
@@ -12,7 +13,9 @@ import { Variant, Info, Wrapper } from './styles';
 
 export const Builder: React.FC = () => {
   const game = useGame<IGame>();
+  const world = useScene<IWorld>(GameScene.WORLD);
 
+  const [activeVariant, setActiveVariant] = useState<Nullable<BuildingVariant>>(null);
   const [hint, setHint] = useState<Nullable<{
     variant: BuildingVariant
     text: string
@@ -66,18 +69,22 @@ export const Builder: React.FC = () => {
     [],
   );
 
+  useSceneUpdate(world, () => {
+    setActiveVariant(world.builder.variant);
+  });
+
   return (
     <Wrapper>
       {Object.values(BuildingVariant).map((variant, index) => (
         <Variant key={variant}>
+          <Info $visible={activeVariant === variant}>
+            <BuilderInfo variant={variant} />
+          </Info>
+
           {hint?.variant === variant && (
             <Hint side="right">{hint.text}</Hint>
           )}
 
-          <Info>
-            <BuilderInfo variant={variant} />
-          </Info>
-
           <BuilderPreview variant={variant} number={index + 1} />
         </Variant>
       ))}

diff --git a/src/game/scenes/screen/interface/builder/preview/index.tsx b/src/game/scenes/screen/interface/builder/preview/index.tsx
@@ -66,7 +66,6 @@ export const BuilderPreview: React.FC<Props> = ({ number, variant }) => {
 
   return (
     <Container
-      onTouchStart={onClick}
       onClick={onClick}
       onMouseEnter={onHover}
       $disallow={isDisallow}

diff --git a/src/game/scenes/screen/interface/builder/styles.ts b/src/game/scenes/screen/interface/builder/styles.ts
@@ -1,6 +1,6 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-import { INTERFACE_MOBILE_BREAKPOINT } from '~const/interface';
+import { INTERFACE_MOBILE_BREAKPOINT, INTERFACE_DESKTOP_BREAKPOINT } from '~const/interface';
 
 export const Wrapper = styled.div`
   pointer-events: all;
@@ -12,24 +12,36 @@ export const Wrapper = styled.div`
   }
 `;
 
-export const Info = styled.div`
+export const Info = styled.div<{
+  $visible?: boolean
+}>`
   position: absolute;
   transform: translate(-100%, 50%);
   margin: -58px 0 0 -15px;
-  display: none;
   z-index: 2;
+  display: none;
+  @media ${INTERFACE_MOBILE_BREAKPOINT} {
+    ${(props) => props.$visible && css`
+      display: block;
+      + [role=hint] {
+        display: none;
+      }
+    `}
+  }
 `;
 
 export const Variant = styled.div`
   position: relative;
   display: flex;
   align-items: center;
-  &:hover {
-    [role=hint] {
-      display: none;
-    }
-    ${Info} {
-      display: block;
+  @media ${INTERFACE_DESKTOP_BREAKPOINT} {
+    &:hover {
+      ${Info} {
+        display: block;
+        + [role=hint] {
+          display: none;
+        }
+      }
     }
   }
 `;
diff --git a/src/game/scenes/world/builder.ts b/src/game/scenes/world/builder.ts
@@ -111,7 +111,9 @@ export class Builder extends EventEmitter implements IBuilder {
 
     this.scene.sound.play(BuildingAudio.UNSELECT);
 
-    this.scene.game.tutorial.complete(TutorialStep.STOP_BUILD);
+    if (this.scene.game.device.os.desktop) {
+      this.scene.game.tutorial.complete(TutorialStep.STOP_BUILD);
+    }
 
     this.clearBuildingVariant();
   }
@@ -343,6 +345,10 @@ export class Builder extends EventEmitter implements IBuilder {
     this.scene.player.giveExperience(DIFFICULTY.BUILDING_BUILD_EXPERIENCE);
 
     this.scene.sound.play(BuildingAudio.BUILD);
+
+    if (!this.scene.game.device.os.desktop) {
+      this.unsetBuildingVariant();
+    }
   }
 
   public createBuilding(data: BuildingBuildData) {

diff --git a/src/game/scenes/world/entities/building/variants/generator.ts b/src/game/scenes/world/entities/building/variants/generator.ts
@@ -40,7 +40,9 @@ export class BuildingGenerator extends Building {
 
     if (this.scene.game.tutorial.state(TutorialStep.BUILD_GENERATOR) === TutorialStepState.IN_PROGRESS) {
       this.scene.game.tutorial.complete(TutorialStep.BUILD_GENERATOR);
-      this.scene.game.tutorial.start(TutorialStep.STOP_BUILD);
+      if (this.scene.game.device.os.desktop) {
+        this.scene.game.tutorial.start(TutorialStep.STOP_BUILD);
+      }
     }
   }