Merge pull request #13 from dipsywong98/dipsy/ui-ux-enhance

Dipsy/ui ux enhance

package.json

@@ -7,6 +7,7 @@
     "@babel/core": "7.9.0",
     "@mdi/js": "^5.5.55",
     "@mdi/react": "^1.4.0",
+    "@popperjs/core": "^2.5.2",
     "@svgr/webpack": "4.3.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
@@ -64,7 +65,9 @@
     "react-app-polyfill": "^1.0.6",
     "react-dev-utils": "^10.2.1",
     "react-dom": "^16.13.1",
+    "react-hammerjs": "^1.0.1",
     "react-modal": "^3.11.2",
+    "react-popper": "^2.2.3",
     "resolve": "1.15.0",
     "resolve-url-loader": "3.1.1",
     "sass-loader": "8.0.2",
@@ -111,6 +114,7 @@
     "@types/ramda": "^0.27.14",
     "@types/react": "^16.9.48",
     "@types/react-dom": "^16.9.0",
+    "@types/react-hammerjs": "^1.0.1",
     "@types/react-modal": "^3.10.6",
     "@types/theme-ui": "^0.3.6",
     "@types/uuid": "^8.3.0",

src/3d/constants.ts

@@ -132,3 +132,13 @@ export const ACTION_COST_PURCHASE: { [k in GrowthStage]: readonly number[] } = {
   [GrowthStage.MID]: [3, 3, 4],
   [GrowthStage.TALL]: [4, 5]
 } as const
+
+export const IMAGE_SIZE = 50
+export const IMAGE_SIZE_CSS = `${IMAGE_SIZE}px`
+
+export const GROWTH_STAGE_NAME: { [k in GrowthStage]: string } = {
+  [GrowthStage.SEED]: 'seed',
+  [GrowthStage.SHORT]: 'short tree',
+  [GrowthStage.MID]: 'middle tree',
+  [GrowthStage.TALL]: 'tall tree'
+}

src/Game/Game.ts

@@ -12,14 +12,11 @@ import { isTreeGrowthStage } from './isTreeGrowthStage'
 
 export enum GameEvent {
   UPDATE_GAME_STATE,
-  REQUEST_GAME_STATE,
   GAME_OVER,
-  CLICK,
-  GAME_INIT
+  CLICK
 }
 
 export enum GameActions {
-  CLICK,
   GROW_TREE,
   END_TURN,
   PLANT_SEED,
@@ -83,14 +80,6 @@ export class Game extends Observable<typeof GameEvent, GameEventPayload> {
 
   public stop (payload: unknown): void {
     this.emit(GameEvent.GAME_OVER, { data: payload })
-    // this.gameWorld.dispose()
-  }
-
-  public async click (x: number, y: number): Promise<void> {
-    return await this.dispatch({
-      action: GameActions.CLICK,
-      payload: [x, y]
-    }).catch(this.errorHandler)
   }
 
   public async endTurn (): Promise<void> {
@@ -106,6 +95,9 @@ export class Game extends Observable<typeof GameEvent, GameEventPayload> {
     if (gameState.turn === this.nPlayers) {
       if (gameState.preparingRound > 0) {
         gameState.preparingRound--
+        if (gameState.preparingRound === 0) {
+          gameState.rayDirection = -1
+        }
       }
       if (gameState.preparingRound === 0) {
         gameState.rayDirection++

src/Game/GameWorld.ts

@@ -10,23 +10,31 @@ import {
   PerspectiveCamera,
   sRGBEncoding,
   Vector2,
+  Vector3,
   VSMShadowMap,
   WebGLRenderer
 } from 'three'
 import TreeSystem from './systems/TreeSystem'
 import TweenSystem from './systems/TweenSystem'
 import { disposeObj3D } from '../3d/helpers'
 import TreeComponent from './components/TreeComponent'
-import TweenBaseComponent from './components/TweenComponent'
+import TweenComponent from './components/TweenComponent'
 import AxialCoordsComponent from './components/AxialCoordsComponent'
-import { AMBIENT_COLOR, INITIAL_SUN_ORIENTATION, MODELS, SKY_COLOR, SUN_ANGLE, SUN_COLOR } from '../3d/constants'
+import {
+  AMBIENT_COLOR,
+  INITIAL_SUN_ORIENTATION,
+  MODELS,
+  SKY_COLOR,
+  SUN_ANGLE,
+  SUN_COLOR,
+  TREE_GROWTH_DURATION
+} from '../3d/constants'
 import { getObject } from '../3d/assets'
 import TileComponent from './components/TileComponent'
 import AxialCoordsSystem from './systems/AxialCoordsSystem'
 import TileSystem from './systems/TileSystem'
 import SunOrientationTagComponent from './components/SunOrientationTagComponent'
 import SunOrientationSystem from './systems/SunOrientationSystem'
-import { createTree } from './entities/tree'
 import dat from 'dat.gui'
 import { Axial } from '../3d/Coordinates/Axial'
 import { CYLINDER_OBJ } from '../3d/extraObjects'
@@ -36,8 +44,12 @@ import { TileInfo } from './types/TileInfo'
 import TouchSystem from './systems/TouchSystem'
 import { RendererComposerSystem } from './systems/RendererComposerSystem'
 import RendererComposerComponent from './components/RendererComposerComponent'
-import SelectableTagComponent from './components/SelectableTagComponent'
+import SelectableComponent from './components/SelectableComponent'
 import SelectionSystem from './systems/SelectionSystem'
+import { createTree } from './entities/tree'
+import TweenObjectProperties from './types/TweenObjectProperties'
+import { applyVector3 } from './easing/applyEasing'
+import jelly from './easing/3d/jelly'
 
 export default class GameWorld {
   gui: dat.GUI
@@ -118,19 +130,19 @@ export default class GameWorld {
   }
 
   private initGUI (): void {
-    const sunControl = this.gui.add(this, 'sunOrientationRad', 0, 2 * Math.PI)
-    sunControl.name('Sun orientation')
-    sunControl.step(0.01)
+    // const sunControl = this.gui.add(this, 'sunOrientationRad', 0, 2 * Math.PI)
+    // sunControl.name('Sun orientation')
+    // sunControl.step(0.01)
   }
 
   private initECS (): void {
     this.world.registerComponent(TreeComponent)
-    this.world.registerComponent(TweenBaseComponent)
+    this.world.registerComponent(TweenComponent)
     this.world.registerComponent(AxialCoordsComponent)
     this.world.registerComponent(TileComponent)
     this.world.registerComponent(SunOrientationTagComponent)
     this.world.registerComponent(RendererComposerComponent)
-    this.world.registerComponent(SelectableTagComponent)
+    this.world.registerComponent(SelectableComponent)
 
     this.world.unregisterSystem(WebGLRendererSystem)
     this.world.registerSystem(RendererComposerSystem, { priority: 999, gameWorld: this })
@@ -171,8 +183,8 @@ export default class GameWorld {
     const cameraFolder = this.gui.addFolder('Camera')
 
     cameraFolder.add(this.camera.position, 'z', 20, 300, 1).name('zoom')
-    cameraFolder.add(cameraTiltObj.rotation, 'x', -Math.PI / 2, 0, 0.01).name('tilt')
-    cameraFolder.add(cameraRotationObj.rotation, 'y', 0, Math.PI * 2, 0.01).name('rotation')
+    // cameraFolder.add(cameraTiltObj.rotation, 'x', -Math.PI / 2, 0, 0.01).name('tilt')
+    // cameraFolder.add(cameraRotationObj.rotation, 'y', 0, Math.PI * 2, 0.01).name('rotation')
     cameraFolder.open()
 
     this.world.createEntity()
@@ -257,7 +269,8 @@ export default class GameWorld {
         .addObject3DComponent(tileContainer, boardEntity)
         .addComponent(AxialCoordsComponent, { axial })
         .addComponent(TileComponent)
-        .addComponent(SelectableTagComponent)
+      tileEntity
+        .addComponent(SelectableComponent, { refEntity: tileEntity })
       this.tileEntities.set(axial.toString(), tileEntity)
     })
 
@@ -267,7 +280,6 @@ export default class GameWorld {
           const ringContainerObj = new Object3D()
           ringContainerObj.name = 'ringContainer'
           const ringClone = ring.clone()
-          ringClone.position.y -= 0.3
           const mesh = ringClone.children.find((o): o is Mesh => o instanceof Mesh)
           // Assuming material exists and is a MeshStandardMaterial
           const originalMaterial = mesh?.material
@@ -315,13 +327,51 @@ export default class GameWorld {
    * @param growthStage
    */
   public setTile (axial: Axial, { color, growthStage }: Partial<TileInfo> = {}): void {
-    // TODO: implement the description
-    if (color !== undefined && growthStage !== undefined) {
-      createTree(this, { color, growthStage, axial })
+    const treeEntity = this.tileEntities.get(axial.toString())?.getComponent(TileComponent)?.treeEntity
+    const treeComponent = treeEntity?.getMutableComponent(TreeComponent)
+    if (treeComponent !== undefined) {
+      if (growthStage !== undefined) {
+        treeComponent.growthStage = growthStage
+      } else if (treeEntity !== undefined) {
+        this.removeTree(axial)
+      }
+    } else {
+      if (color !== undefined && growthStage !== undefined) {
+        createTree(this, { color, growthStage, axial })
+      }
     }
   }
 
   public setRayDirection (directionType: number): void {
     this.sunOrientationRad = INITIAL_SUN_ORIENTATION + directionType * Math.PI / 3
   }
+
+  public getActiveEntity (): ECSYThreeEntity | undefined {
+    return this.activeObject?.entity?.getComponent(SelectableComponent)?.refEntity
+  }
+
+  public getActiveAxial (): Axial | undefined {
+    return this.getActiveEntity()?.getComponent(AxialCoordsComponent)?.axial
+  }
+
+  private removeTree (axial: Axial): void {
+    // animate tree removal
+    const linkedTileComponent = this.tileEntities.get(axial.toString())?.getMutableComponent(TileComponent)
+    const treeEntity = linkedTileComponent?.treeEntity
+    treeEntity?.getComponent<TweenComponent<TweenObjectProperties<Object3D, 'scale'>>>(TweenComponent)?.tweens?.push({
+      duration: TREE_GROWTH_DURATION,
+      from: new Vector3(1, 1, 1),
+      func: applyVector3(jelly),
+      loop: 1,
+      prop: 'scale',
+      to: new Vector3(0, 0, 0),
+      value: 0
+    })
+    setTimeout(() => {
+      treeEntity?.remove()
+      if (linkedTileComponent !== undefined) {
+        linkedTileComponent.treeEntity = undefined
+      }
+    }, TREE_GROWTH_DURATION)
+  }
 }

src/Game/components/SelectableComponent.ts

@@ -0,0 +1,10 @@
+import { Component, Types } from 'ecsy'
+import { ECSYThreeEntity } from 'ecsy-three'
+
+export default class SelectableComponent extends Component<SelectableComponent> {
+  refEntity!: ECSYThreeEntity
+}
+
+SelectableComponent.schema = {
+  refEntity: { type: Types.Ref }
+}

src/Game/components/TreeComponent.ts

@@ -16,11 +16,6 @@ export default class TreeComponent extends Component<TreeComponent> {
   groundShade?: ECSYThreeEntity
 
   reset (): void {
-    this.plant?.remove()
-    this.seed?.remove()
-    this.tree?.remove()
-    this.shade?.remove()
-    this.groundShade?.remove()
     this.plant = undefined
     this.seed = undefined
     this.tree = undefined

src/Game/entities/tree.ts

@@ -5,6 +5,7 @@ import { Color, GrowthStage } from '../../3d/constants'
 import { Axial } from '../../3d/Coordinates/Axial'
 import AxialCoordsComponent from '../components/AxialCoordsComponent'
 import { ECSYThreeEntity } from 'ecsy-three'
+import TweenComponent from '../components/TweenComponent'
 
 export interface TreeOptions {
   color: Color
@@ -32,4 +33,5 @@ export const createTree = (gameWorld: GameWorld, { color, growthStage, axial }:
     .addComponent(AxialCoordsComponent, {
       axial
     })
+    .addComponent(TweenComponent)
 }

src/Game/getInitialState.ts

@@ -39,7 +39,7 @@ export const getInitialState = (players: number): GameState => {
     preparingRound: 2,
     dirtyTiles: [],
     turn: 0,
-    rayDirection: -1,
+    rayDirection: 0,
     revolutionLeft: 3,
     board: getInitialBoard(),
     scoreTokens: {
@@ -55,7 +55,7 @@ export const getInitialState = (players: number): GameState => {
     state.playerInfo[id] = getInitialPlayerInfo(id)
   }
   if (players === 2) {
-    state.scoreTokens[3] = []
+    state.scoreTokens[4] = []
   }
   return state
 }

src/Game/systems/SelectionSystem.ts

@@ -1,5 +1,5 @@
 import GameWorldSystem from './GameWorldSystem'
-import SelectableTagComponent from '../components/SelectableTagComponent'
+import SelectableComponent from '../components/SelectableComponent'
 import { ECSYThreeObject3D, Object3DComponent } from 'ecsy-three'
 import { Object3D, Raycaster } from 'three'
 
@@ -41,7 +41,7 @@ export default class SelectionSystem extends GameWorldSystem {
         parent = currentRef?.parent ?? null
         if (parent !== null) {
           if (isECSYObject3D(parent)) {
-            willContinueSearch = parent.entity.getComponent(SelectableTagComponent) === undefined
+            willContinueSearch = parent.entity.getComponent(SelectableComponent) === undefined
           } else if (currentRef !== parent) {
             willContinueSearch = true
           }
@@ -63,6 +63,6 @@ export default class SelectionSystem extends GameWorldSystem {
 
 SelectionSystem.queries = {
   selectables: {
-    components: [SelectableTagComponent, Object3DComponent]
+    components: [SelectableComponent, Object3DComponent]
   }
 }

src/Game/systems/TouchSystem.ts

@@ -31,7 +31,6 @@ export default class TouchSystem extends GameWorldSystem {
       this.panDistances.push([velocityX, velocityY])
     })
     this.hm.on('tap', () => {
-      console.log('ran')
       this.gameWorld.activeObject = this.gameWorld.hoverObject
     })
     this.hm.on('pinch', ({ scale }) => {
@@ -49,7 +48,7 @@ export default class TouchSystem extends GameWorldSystem {
   execute (delta: number, time: number): void {
     while (this.panDistances.length > 0) {
       const [hDistance, vDistance] = this.panDistances.pop()
-      this.gameWorld.cameraRotationObj.rotation.y -= hDistance * 0.05
+      this.gameWorld.cameraRotationObj.rotation.y -= hDistance * 0.1
 
       const newTilt = this.gameWorld.cameraTiltObj.rotation.x - vDistance * 0.05
       this.gameWorld.cameraTiltObj.rotation.x = Math.max(-Math.PI / 2, Math.min(-0.1, newTilt))