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

add tree tokens, fix tree removal animation

src/Game/GameWorld.ts

@@ -26,7 +26,8 @@ import {
   MODELS,
   SKY_COLOR,
   SUN_ANGLE,
-  SUN_COLOR, TAU,
+  SUN_COLOR,
+  TAU,
   TREE_GROWTH_DURATION
 } from '../3d/constants'
 import { getObject } from '../3d/assets'
@@ -400,6 +401,6 @@ export default class GameWorld {
       if (linkedTileComponent !== undefined) {
         linkedTileComponent.treeEntity = undefined
       }
-    }, TREE_GROWTH_DURATION)
+    }, TREE_GROWTH_DURATION * 1000)
   }
 }

src/components/Panel.tsx

@@ -24,6 +24,7 @@ import { getTreeImageByColorGrowthStage, TreeTokenStack } from './TreeTokenStack
 import { ImageStack } from './common/ImageStack'
 import { InteractionState } from './GamePlayer'
 import { GameActions } from '../Game/Game'
+import { SunlightBadge } from './SunlightBadge'
 
 interface props {
   mi: number // my player id
@@ -132,9 +133,14 @@ export const Panel: FunctionComponent<props> = ({ mi, roomState, purchase, plant
                       key={growthStage}
                       onClick={(activePlayerId === mi && (gameState.preparingRound <= 0 || growthStage === GrowthStage.SHORT.toString())) ? () => handlerAvailableTokenClick(Number.parseInt(growthStage)) : undefined}
                       imgPath={getTreeImageByColorGrowthStage(playerInfo.color, Number.parseInt(growthStage))}
-                      stack={new Array(amount).fill(<SunlightTag>
+                      stack={new Array(amount).fill(<SunlightBadge
+                        sx={{
+                          top: 0,
+                          right: '-4px',
+                          position: 'absolute'
+                        }}>
                         {Number.parseInt(growthStage) === GrowthStage.SEED ? ACTION_COST_SEED : ACTION_COST_GROW[Number.parseInt(growthStage) - 1 as GrowthStage]}
-                      </SunlightTag>)}
+                      </SunlightBadge>)}
                       badge={amount}
                     />
                   </Box>

src/components/ScoreTokenStack.tsx

@@ -1,9 +1,9 @@
 import React, { FunctionComponent } from 'react'
 import PropTypes, { InferProps } from 'prop-types'
-import token1 from '../assets/images/token1.png'
-import token2 from '../assets/images/token2.png'
-import token3 from '../assets/images/token3.png'
-import token4 from '../assets/images/token4.png'
+import token1 from '../assets/images/tokens/token1.png'
+import token2 from '../assets/images/tokens/token2.png'
+import token3 from '../assets/images/tokens/token3.png'
+import token4 from '../assets/images/tokens/token4.png'
 import { ImageStack } from './common/ImageStack'
 
 const tokenImages = ['', token1, token2, token3, token4]

src/components/SunlightBadge.tsx

@@ -0,0 +1,36 @@
+import React, { FunctionComponent } from 'react'
+import PropTypes, { InferProps } from 'prop-types'
+import sun from '../assets/images/sun.svg'
+import { Box } from '@theme-ui/components'
+
+const propTypes = {
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  children: PropTypes.node,
+  sx: PropTypes.object
+}
+
+export const SunlightBadge: FunctionComponent<InferProps<typeof propTypes>> = ({ children, size = '24px', sx }) => {
+  return (
+    <Box
+      sx={{
+        boxSizing: 'content-box',
+        backgroundImage: `url(${sun})`,
+        backgroundSize: 'auto 100%',
+        textAlign: 'center',
+        width: size,
+        height: size,
+        lineHeight: size,
+        textShadow: (theme: { colors: { sunTagShadow: string } }) => `
+            -1px -1px 1px ${theme.colors.sunTagShadow},
+            1px -1px 1px ${theme.colors.sunTagShadow},
+            -1px 1px 1px ${theme.colors.sunTagShadow},
+            1px 1px 1px ${theme.colors.sunTagShadow}`,
+        fontSize: 0,
+        ...sx
+      }}>
+      {children}
+    </Box>
+  )
+}
+
+SunlightBadge.propTypes = propTypes

src/components/SunlightTag.tsx

@@ -4,12 +4,13 @@ import { Box, Flex } from '@theme-ui/components'
 import sun from '../assets/images/sun.svg'
 
 const propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  sx: PropTypes.object
 }
 
-export const SunlightTag: FunctionComponent<InferProps<typeof propTypes>> = ({ children }) => {
+export const SunlightTag: FunctionComponent<InferProps<typeof propTypes>> = ({ children, sx }) => {
   return (
-    <Flex>
+    <Flex sx={sx}>
       <Box>
         <img alt='sun icon' style={{ maxHeight: '24px' }} src={sun}/>
       </Box>

src/components/TestPanel.tsx

@@ -46,32 +46,17 @@ roomState.game.playerInfo[0].playerBoard[GrowthStage.TALL][1] = false
 roomState.game.preparingRound = 0
 globalRoom.network.state = roomState
 globalRoom.network.myConnectionManager.id = 'id1'
+// const axial0 = new Axial(0, 0)
+// const axial1 = new Axial(-1, 1)
+// const axial2 = new Axial(-2, 2)
+const axial3 = new Axial(-3, 3)
 globalRoom.network.myConnectionManager.on(ConnEvent.PEER_OPEN, () => {
   globalRoom.network.myConnectionManager.id = 'id1'
   createTree(globalRoom.game.gameWorld, {
     color: Color.BLUE,
-    growthStage: GrowthStage.SHORT,
-    axial: Axial.origin
+    growthStage: GrowthStage.SEED,
+    axial: axial3
   })
-  roomState.game.board[Axial.origin.toString()] = {
-    color: Color.BLUE,
-    growthStage: GrowthStage.SHORT,
-    leaves: 4
-  }
-  createTree(globalRoom.game.gameWorld, {
-    color: Color.BLUE,
-    growthStage: GrowthStage.TALL,
-    axial: new Axial(1, 0)
-  })
-  roomState.game.board[new Axial(1, 0).toString()] = {
-    color: Color.BLUE,
-    growthStage: GrowthStage.TALL,
-    leaves: 3
-  }
-  window.setTimeout(() => {
-    globalRoom.game.gameWorld.setTile(Axial.origin, { color: Color.BLUE, growthStage: GrowthStage.TALL })
-    globalRoom.game.gameWorld.setTile(new Axial(1, 0), { color: undefined, growthStage: undefined })
-  }, 1000)
 })
 
 const propTypes = {

src/components/TreeTokenStack.tsx

@@ -1,9 +1,63 @@
 import React, { FunctionComponent, useMemo } from 'react'
 import PropTypes, { InferProps } from 'prop-types'
 import { ImageStack } from './common/ImageStack'
-import placeholder from '../assets/images/tree-placeholder.png'
-import { SunlightTag } from './SunlightTag'
 import { ACTION_COST_PURCHASE, Color, GrowthStage } from '../3d/constants'
+import { SunlightBadge } from './SunlightBadge'
+
+import seedBlue from '../assets/images/tokens/seedBlue.png'
+import shortBlue from '../assets/images/tokens/shortBlue.png'
+import midBlue from '../assets/images/tokens/midBlue.png'
+import tallBlue from '../assets/images/tokens/tallBlue.png'
+
+import seedGreen from '../assets/images/tokens/seedGreen.png'
+import shortGreen from '../assets/images/tokens/shortGreen.png'
+import midGreen from '../assets/images/tokens/midGreen.png'
+import tallGreen from '../assets/images/tokens/tallGreen.png'
+
+import seedOrange from '../assets/images/tokens/seedOrange.png'
+import shortOrange from '../assets/images/tokens/shortOrange.png'
+import midOrange from '../assets/images/tokens/midOrange.png'
+import tallOrange from '../assets/images/tokens/tallOrange.png'
+
+import seedYellow from '../assets/images/tokens/seedYellow.png'
+import shortYellow from '../assets/images/tokens/shortYellow.png'
+import midYellow from '../assets/images/tokens/midYellow.png'
+import tallYellow from '../assets/images/tokens/tallYellow.png'
+
+const TREE_TOKENS_BLUE = {
+  [GrowthStage.SEED]: seedBlue,
+  [GrowthStage.SHORT]: shortBlue,
+  [GrowthStage.MID]: midBlue,
+  [GrowthStage.TALL]: tallBlue
+}
+
+const TREE_TOKENS_GREEN = {
+  [GrowthStage.SEED]: seedGreen,
+  [GrowthStage.SHORT]: shortGreen,
+  [GrowthStage.MID]: midGreen,
+  [GrowthStage.TALL]: tallGreen
+}
+
+const TREE_TOKENS_ORANGE = {
+  [GrowthStage.SEED]: seedOrange,
+  [GrowthStage.SHORT]: shortOrange,
+  [GrowthStage.MID]: midOrange,
+  [GrowthStage.TALL]: tallOrange
+}
+
+const TREE_TOKENS_YELLOW = {
+  [GrowthStage.SEED]: seedYellow,
+  [GrowthStage.SHORT]: shortYellow,
+  [GrowthStage.MID]: midYellow,
+  [GrowthStage.TALL]: tallYellow
+}
+
+const TREE_TOKENS = {
+  [Color.BLUE]: TREE_TOKENS_BLUE,
+  [Color.GREEN]: TREE_TOKENS_GREEN,
+  [Color.ORANGE]: TREE_TOKENS_ORANGE,
+  [Color.YELLOW]: TREE_TOKENS_YELLOW
+}
 
 const propTypes = {
   canBuy: PropTypes.arrayOf(PropTypes.bool.isRequired).isRequired,
@@ -12,12 +66,20 @@ const propTypes = {
   onClick: PropTypes.func
 }
 
-export const getTreeImageByColorGrowthStage = (_color: Color, _growthStage: GrowthStage): string => placeholder
+export const getTreeImageByColorGrowthStage = (color: Color, growthStage: GrowthStage): string => TREE_TOKENS[color][growthStage]
 
 export const TreeTokenStack: FunctionComponent<InferProps<typeof propTypes>> = ({ canBuy, growthStage, color, onClick }) => {
   const [stack, shouldMute] = useMemo(() => {
     const stack = canBuy.map((_, k) => (
-      <SunlightTag key={k}>{ACTION_COST_PURCHASE[growthStage as GrowthStage][k]}</SunlightTag>
+      <SunlightBadge
+        key={k}
+        sx={{
+          top: 0,
+          right: '-4px',
+          position: 'absolute'
+        }}>
+        {ACTION_COST_PURCHASE[growthStage as GrowthStage][k]}
+      </SunlightBadge>
     ))
     if (!canBuy[0]) {
       const k = canBuy.indexOf(true)
@@ -31,11 +93,10 @@ export const TreeTokenStack: FunctionComponent<InferProps<typeof propTypes>> = (
     }
     return [stack, canBuy]
   }, [canBuy, growthStage])
-  // TODO: replace this placeholder imgPath with real tree image path, which shall depend on its color and growthStage
   return (
     <ImageStack
       stack={stack}
-      shouldMute={shouldMute}
+      enabled={shouldMute}
       imgPath={getTreeImageByColorGrowthStage(color, growthStage)}
       onClick={onClick}
       badge={canBuy.filter(s => s).length}

src/components/common/ImageStack.tsx

@@ -8,13 +8,13 @@ import Hammer from 'react-hammerjs'
 
 const propTypes = {
   stack: PropTypes.arrayOf(PropTypes.node).isRequired,
-  shouldMute: PropTypes.arrayOf(PropTypes.bool.isRequired),
+  enabled: PropTypes.arrayOf(PropTypes.bool.isRequired),
   imgPath: PropTypes.string.isRequired,
   onClick: PropTypes.func,
   badge: PropTypes.node
 }
 
-export const ImageStack: FunctionComponent<InferProps<typeof propTypes>> = ({ stack, imgPath, badge, shouldMute, onClick }) => {
+export const ImageStack: FunctionComponent<InferProps<typeof propTypes>> = ({ stack, imgPath, badge, enabled, onClick }) => {
   const [hovering, setHovering] = useState(false)
   useEffect(() => {
     const listener = (): void => setHovering(false)
@@ -61,9 +61,9 @@ export const ImageStack: FunctionComponent<InferProps<typeof propTypes>> = ({ st
             }}>
             <Image
               path={imgPath}
-              disabled={content === '-' || shouldMute?.[k] === false}
+              disabled={content === '-' || enabled?.[k] === false}
               onClick={k === 0 ? onClick : undefined}>
-              {content}
+              {enabled?.[k] === false ? '-' : content}
             </Image>
           </Box>
         ))}

src/theme/colors.js

@@ -60,6 +60,7 @@ export const light = {
   fgPales: colors.dark.map(makeFade),
   border: transparentize(0.8, baseColors.dark[0]),
   highlight: transparentize(0.9, baseColors.dark[0]),
+  sunTagShadow: '#9c4727',
   code: {
     color: '#0451a5',
     backgroundColor: '#ffffff',