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

@@ -26,7 +26,6 @@ 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 +35,9 @@ 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'
 
 export default class GameWorld {
   gui: dat.GUI
@@ -130,7 +130,7 @@ export default class GameWorld {
     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 })
@@ -257,7 +257,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 +268,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 +315,29 @@ 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 treeComponent = this.tileEntities.get(axial.toString())?.getComponent(TileComponent)?.treeEntity?.getMutableComponent(TreeComponent)
+    if (treeComponent !== undefined) {
+      if (growthStage !== undefined) {
+        treeComponent.growthStage = growthStage
+      } else {
+        treeComponent.reset()
+      }
+    } 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
+  }
 }

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/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 SelectableTagComponent from '../components/SelectableComponent'
 import { ECSYThreeObject3D, Object3DComponent } from 'ecsy-three'
 import { Object3D, Raycaster } from 'three'
 

src/Game/systems/TreeSystem.ts

@@ -22,7 +22,7 @@ import jelly from '../easing/3d/jelly'
 import TweenComponent from '../components/TweenComponent'
 import TweenObjectProperties from '../types/TweenObjectProperties'
 import linear from '../easing/3d/linear'
-import SelectableTagComponent from '../components/SelectableTagComponent'
+import SelectableComponent from '../components/SelectableComponent'
 
 export default class TreeSystem extends GameWorldSystem {
   execute (delta: number, time: number): void {
@@ -51,10 +51,16 @@ export default class TreeSystem extends GameWorldSystem {
         return
       }
 
-      const linkedTileComp = this.gameWorld.tileEntities.get(axialComp.axial.toString())?.getMutableComponent(TileComponent)
-      if (linkedTileComp !== undefined) {
-        linkedTileComp.treeEntity = entity
+      const linkedTileEntity = this.gameWorld.tileEntities.get(axialComp.axial.toString())
+      if (linkedTileEntity === undefined) {
+        return
+      }
+
+      const linkedTileComp = linkedTileEntity.getMutableComponent(TileComponent)
+      if (linkedTileComp === undefined) {
+        return
       }
+      linkedTileComp.treeEntity = entity
 
       const { color } = treeComp
       obj3d.name = 'tree-' + entity.id.toString() + '-' + Color[color]
@@ -100,7 +106,7 @@ export default class TreeSystem extends GameWorldSystem {
         treeComp.plant = this.world
           .createEntity()
           .addObject3DComponent(plantContainerObj, entity)
-          .addComponent(SelectableTagComponent)
+          .addComponent(SelectableComponent, { refEntity: linkedTileEntity })
         treeComp.tree = this.world
           .createEntity()
           .addObject3DComponent(treeObj, treeComp.plant)

src/components/App.tsx

@@ -1,5 +1,4 @@
 import React, { FunctionComponent, useState } from 'react'
-import { useRoom } from '../lib/RoomContext'
 import { Flex } from 'theme-ui'
 import NavBar from './NavBar'
 import { transition } from '../theme/transitions'
@@ -18,37 +17,49 @@ export enum AppState {
 }
 
 const App: FunctionComponent = () => {
-  const [state, _setState] = useState(AppState.HOME)
-  const room = useRoom()
-  const setState = (newState: AppState): void => {
-    if (newState !== state) {
-      if (newState === AppState.HOME) {
-        room.leaveRoom()
-        window.history.pushState({
-          pageTitle: 'Whatever Game'
-        }, '', process.env.PUBLIC_URL)
-      } else if (newState === AppState.ROOM) {
-        window.history.pushState({
-          pageTitle: (room.roomCode ?? '') + ' - Whatever Game'
-        }, '', `${process.env.PUBLIC_URL}/${room.roomCode ?? ''}`)
-      }
-      _setState(newState)
-    }
-  }
+  const [state, setState] = useState(AppState.HOME)
   return (
     <Box>
       <NavBar setState={setState} state={state}/>
       <Box sx={{ width: '100vw', height: '100vh', overflow: 'hidden', position: 'relative' }}>
         <GameContextProvider>
           <GameRenderer/>
-          <Flex sx={{ width: '100vw', bottom: 0, left: `${-(state - 2) * 100}%`, position: 'absolute', ...transition(0.3, ['left'], 'linear') }}>
+          <Flex
+            sx={{
+              width: '100vw',
+              bottom: 0,
+              left: `${-(state - 2) * 100}%`,
+              position: 'absolute',
+              ...transition(0.3, ['left'], 'linear')
+            }}>
             <GamePlayer setState={setState}/>
           </Flex>
-          <Flex sx={{ width: '100vw', height: '100vh', left: `${-(state - 1) * 100}%`, justifyContent: 'center', alignItems: 'center', position: 'absolute', ...transition(0.3, ['left'], 'linear') }}>
+          <Flex
+            sx={{
+              width: '100vw',
+              height: '100vh',
+              left: `${-(state - 1) * 100}%`,
+              justifyContent: 'center',
+              alignItems: 'center',
+              position: 'absolute',
+              ...transition(0.3, ['left'], 'linear')
+            }}>
             <Room setState={setState}/>
           </Flex>
-          <Flex sx={{ width: '100vw', height: '100vh', left: `${-state * 100}%`, justifyContent: 'center', alignItems: 'center', position: 'absolute', ...transition(0.3, ['left'], 'linear') }}>
+          <Flex
+            sx={{
+              width: '100vw',
+              height: '100vh',
+              left: `${-state * 100}%`,
+              justifyContent: 'center',
+              alignItems: 'center',
+              position: 'absolute',
+              ...transition(0.3, ['left'], 'linear')
+            }}>
             <Home setState={setState}/>
+            {
+              // <TestPanel setState={setState}/>
+            }
           </Flex>
         </GameContextProvider>
       </Box>