Skip to content

Instantly share code, notes, and snippets.

@MartinInAction
Created July 1, 2020 10:18
Show Gist options
  • Save MartinInAction/5e9f8a0edd02be1bd3c554c508e91e96 to your computer and use it in GitHub Desktop.
Save MartinInAction/5e9f8a0edd02be1bd3c554c508e91e96 to your computer and use it in GitHub Desktop.
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]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment