GoalMap.js

render (): React$Element<Object> {
    let {user, kid, goal, balance} = this.props
    let currentLevel = this.getCurrentLevel()
    if (!goal) return this.renderEmptyState()
    let pipes = this.getPipes(goal, kid, user, currentLevel, this.getLevelToClimbTo())
    return <View style={{flex: 1}}>
      <ColorFix color={colors.stratos} />
      <ColorFix isBottom color={colors.fiftyShades} />
      <Animated.ScrollView ref={this.setScrollRef} onScroll={this.onScroll} scrollEventThrottle={16} contentContainerStyle={styles.scrollContainer} style={styles.container}>
        <LinearGradient style={styles.backgroundImageView} colors={[colors.stratos, colors.stratos, colors.kingfisherDaisy]}>
          {this.renderAnimatedBackgroundElements()}
          {this.renderStaticBackgroundElements()}
          {this.renderGoalImage()}
          {pipes ? pipes.map((pipe, index) => this.renderPipe(pipe, index)) : undefined}
        </LinearGradient>
        <Image source={goalMapMountain} style={styles.ground} />
        <GoalMapUnderground currentLevel={currentLevel} goal={goal} kid={kid} balance={balance} />
      </Animated.ScrollView>
    </View>
}

renderAnimatedBackgroundElements = () => {
    return [
      <Animated.Image key={0} source={goalMapCloudsApple} style={[styles.animatedBgImage1, {transform: [{translateX: this.getBgImage1Animation()}]}]} />,
      <Animated.Image key={1} source={goalMapClouds} style={[styles.animatedBgImage2, {transform: [{translateX: this.getBgImage2Animation()}]}]} />,
      <Animated.Image key={2} source={goalMapCloudsSparkles} style={[styles.animatedBgImage3, {transform: [{translateX: this.getBgImage3Animation()}]}]} />,
      <Animated.Image key={3} source={goalMapDuck} style={[styles.animatedBgImage4, {transform: [{translateX: this.getBgImage4Animation()}]}]} />,
      <Animated.Image key={4} source={goalMapTennis} style={[styles.animatedBgImage5, {transform: [{translateX: this.getBgImage5Animation()}]}]} />,
      <Animated.Image key={5} source={goalMapHeadphones} style={[styles.animatedBgImage6, {transform: [{translateX: this.getBgImage6Animation()}]}]} />,
      <Animated.Image key={7} source={goalMapVRHeadset} style={[styles.animatedBgImage8, {transform: [{translateX: this.getBgImage8Animation()}]}]} />,
      <Animated.Image key={8} source={goalMapConsole} style={[styles.animatedBgImage9, {transform: [{translateX: this.getBgImage9Animation()}]}]} />,
      <Animated.Image key={9} source={goalMapLolipop} style={[styles.animatedBgImage10, {transform: [{translateX: this.getBgImage10Animation()}]}]} />
    ]
}

  
getPipes = (goal: Goal, kid: Kid, user: User, currentLevel: number, levelToClimbTo: number): Array<*> => {
    let arr = []
    for (let index = 0; index < 101; index++)
      Object.values(PIPE_TYPES).forEach((pipeType) => {
        pipeType = ((pipeType: Object): Array <number>)
        let pipeName = Object.keys(PIPE_TYPES).find(key => PIPE_TYPES[key] === pipeType)
        if (pipeType?.indexOf(index) !== -1) return arr.push({image: getPipeImage(user, index, pipeName, currentLevel, levelToClimbTo), type: pipeName})
        return undefined
      })
    return arr
}
  
const PIPE_TYPES: Object = {
  leftCenterHorizontalFlats: [],
  centerHorizontalFlats: [91, 81, 71, 61, 51, 41, 31, 21, 11],
  rightCenterHorizontalFlats: [90, 82, 70, 62, 50, 42, 30, 22, 10, 2],
  leftCenterVerticalFlats: [96, 92, 80, 76, 60, 56, 40, 36, 20, 16],
  centerVerticalFlats: [100, 99, 98],
  rightCenterVerticalFlats: [],
  centerCornerLefts: [97],
  doubleLeftCornerUps: [95, 79, 59, 39, 19],
  doubleLeftVerticalFlats: [94, 78, 58, 38, 18],
  doubleLeftCornerRights: [93, 77, 57, 37, 17],
  doubleRightCornerUps: [89, 69, 49, 29, 9],
  doubleRightVerticalFlats: [88, 48, 28, 8],
  doubleRightCornerLefts: [87, 47, 27, 7],
  leftCornerRightCorners: [86, 67, 46, 26, 6],
  rightCornerRights: [85, 65, 45, 25, 5],
  rightCornerUps: [84, 64, 44, 24, 4],
  rightCornerLefts: [83, 63, 43, 23, 3],
  centerCornerUps: [75, 55, 35, 15],
  centerCornerRights: [74, 54, 34, 14],
  centerCornerToCornerLeft: [73, 53, 33, 13],
  leftCornerToCornerRight: [72, 52, 32, 12],
  doubleRightVerticalFlats2: [70],
  doubleRightCornerLefts2: [68],
  lastToGoalCornerPipes: [1]
}