Skip to content

Commit

Permalink
Merge pull request #268 from 014967/feature/add_wrapper_from_text
Browse files Browse the repository at this point in the history
๋งํ’์„  ์•ˆ์— ํ…์ŠคํŠธ ์ถ”๊ฐ€
  • Loading branch information
014967 authored Oct 10, 2023
2 parents c65bcc9 + 60c757b commit ce3c302
Show file tree
Hide file tree
Showing 11 changed files with 255 additions and 50 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,18 @@ import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import com.airbnb.lottie.compose.LottieAnimation
import com.airbnb.lottie.compose.LottieCompositionSpec
import com.airbnb.lottie.compose.LottieConstants
Expand All @@ -36,14 +42,46 @@ fun WaterLoadingIndicator(
label = "",
)

TwoTooImageView(
modifier = modifier.graphicsLayer {
rotationZ = rotation
},
model = R.drawable.img_watering,
previewPlaceholder = R.drawable.img_watering,
contentScale = ContentScale.Fit,
)
ConstraintLayout(
modifier = modifier,
) {
val (waterWrapper, waterImage) = createRefs()
val screenHeight = LocalConfiguration.current.screenHeightDp
val areaMargin = 12.dp * screenHeight / 812
val bottomSpace = 14.dp * screenHeight / 812
TwoTooImageView(
modifier = Modifier.constrainAs(waterWrapper) {
linkTo(
top = parent.top,
start = parent.start,
end = parent.end,
bottom = parent.bottom,
)
},
model = R.drawable.ic_water_bubble_wrapper,
previewPlaceholder = R.drawable.ic_water_bubble_wrapper,
contentScale = ContentScale.Fit,
)
TwoTooImageView(
modifier = Modifier.padding(
top = areaMargin,
bottom = areaMargin + bottomSpace,
start = areaMargin,
end = areaMargin,
)
.constrainAs(waterImage) {
start.linkTo(parent.start)
end.linkTo(parent.end)
top.linkTo(parent.top)
bottom.linkTo(parent.bottom)
}.graphicsLayer {
rotationZ = rotation
},
model = R.drawable.img_watering,
previewPlaceholder = R.drawable.img_watering,
contentScale = ContentScale.Fit,
)
}
}

@Composable
Expand All @@ -63,7 +101,9 @@ fun FlowerLoadingIndicator(
@Composable
fun PreviewWaterIndicator() {
TwoTooTheme {
WaterLoadingIndicator()
WaterLoadingIndicator(
modifier = Modifier.width(75.dp).height(69.dp),
)
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import com.mashup.twotoo.presenter.home.before.HomeBeforeChallenge
import com.mashup.twotoo.presenter.home.model.BeforeChallengeState
import com.mashup.twotoo.presenter.home.model.BeforeChallengeUiModel
import com.mashup.twotoo.presenter.home.model.HomeChallengeInfoModel
import com.mashup.twotoo.presenter.home.model.HomeFlowerUiModel
import com.mashup.twotoo.presenter.home.model.HomeGoalAchievePartnerAndMeUiModel
import com.mashup.twotoo.presenter.home.model.HomeStateUiModel
import com.mashup.twotoo.presenter.home.model.OngoingChallengeUiModel
Expand Down Expand Up @@ -97,6 +98,9 @@ fun HomeRoute(
onClickCheerButton = homeViewModel::openToCheerBottomSheet,
navigateToGuide = navigateToGuide,
onWiggleAnimationEnd = homeViewModel::onWiggleAnimationEnd,
onClickFlowerTextBubble = {
// Todo ์ „๋‹ฌ๋˜๋Š” HomeFlowerUiModel๋กœ dialog ํ‘œ์‹œ
},
)

with(homeSideEffectHandler) {
Expand Down Expand Up @@ -135,6 +139,7 @@ fun HomeScreen(
onClickCheerButton: () -> Unit = {},
navigateToGuide: () -> Unit,
onWiggleAnimationEnd: () -> Unit = {},
onClickFlowerTextBubble: (HomeFlowerUiModel) -> Unit = {},
) {
Column(modifier = modifier) {
TwoTooMainToolbar(
Expand Down Expand Up @@ -203,6 +208,7 @@ fun HomeScreen(
onCompleteButtonClick = onClickCompleteButton,
onClickCheerButton = onClickCheerButton,
onWiggleAnimationEnd = onWiggleAnimationEnd,
onClickFlowerTextBubble = onClickFlowerTextBubble,
)
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,20 @@ import com.mashup.twotoo.presenter.designsystem.component.button.TwoTooTextButto
import com.mashup.twotoo.presenter.designsystem.theme.TwoTooTheme
import com.mashup.twotoo.presenter.home.TwoTooGoalAchievementProgressbar
import com.mashup.twotoo.presenter.home.model.ChallengeState
import com.mashup.twotoo.presenter.home.model.Flower
import com.mashup.twotoo.presenter.home.model.HomeChallengeStateUiModel
import com.mashup.twotoo.presenter.home.model.HomeCheerUiModel
import com.mashup.twotoo.presenter.home.model.HomeFlowerPartnerAndMeUiModel
import com.mashup.twotoo.presenter.home.model.HomeFlowerUiModel
import com.mashup.twotoo.presenter.home.model.OngoingChallengeUiModel
import com.mashup.twotoo.presenter.home.model.UserType
import com.mashup.twotoo.presenter.home.ongoing.components.HomeBeeButton
import com.mashup.twotoo.presenter.home.ongoing.components.HomeFlowerMeAndPartner
import com.mashup.twotoo.presenter.home.ongoing.components.HomeGoalCount
import com.mashup.twotoo.presenter.home.ongoing.components.HomeGoalField
import com.mashup.twotoo.presenter.home.ongoing.components.HomeShotCountText
import com.mashup.twotoo.presenter.model.FlowerName
import com.mashup.twotoo.presenter.model.Stage
import com.mashup.twotoo.presenter.util.wiggle

/**
Expand All @@ -49,6 +54,7 @@ fun HomeOngoingChallenge(
navigateToHistory: (Int) -> Unit = {},
onClickCheerButton: () -> Unit = {},
onWiggleAnimationEnd: () -> Unit = {},
onClickFlowerTextBubble: (HomeFlowerUiModel) -> Unit = {},
) {
ConstraintLayout(modifier = modifier.fillMaxSize()) {
val (
Expand Down Expand Up @@ -96,6 +102,7 @@ fun HomeOngoingChallenge(
onCommit = onCommit,
homeChallengeStateUiModel = ongoingChallengeUiModel.homeChallengeStateUiModel,
onClickCheerButton = onClickCheerButton,
onClickFlowerTextBubble = onClickFlowerTextBubble,
)

if (ongoingChallengeUiModel.homeChallengeStateUiModel.challengeState == ChallengeState.Complete) {
Expand Down Expand Up @@ -299,3 +306,32 @@ private fun PreviewCheerBothChallenge() {
)
}
}

@Preview(showBackground = true)
@Composable
private fun PreviewCompleteBothChallenge() {
TwoTooTheme {
HomeOngoingChallenge(
ongoingChallengeUiModel = OngoingChallengeUiModel.default.copy(
homeChallengeStateUiModel = HomeChallengeStateUiModel.complete.copy(
challengeStateUiModel = HomeFlowerPartnerAndMeUiModel.authBoth.copy(
partner = HomeFlowerUiModel.partner.copy(
flowerType = Flower(
flowerName = FlowerName.Tulip,
userType = UserType.PARTNER,
growType = Stage.Fifth,
),
),
me = HomeFlowerUiModel.me.copy(
flowerType = Flower(
flowerName = FlowerName.Tulip,
userType = UserType.ME,
growType = Stage.Fifth,
),
),
),
),
),
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ fun HomeFlowerMeAndPartner(
modifier: Modifier = Modifier,
onCommit: () -> Unit = {},
onClickCheerButton: () -> Unit = {},
onClickFlowerTextBubble: (HomeFlowerUiModel) -> Unit = {},
) {
ConstraintLayout(
modifier = modifier,
Expand All @@ -67,30 +68,33 @@ fun HomeFlowerMeAndPartner(
partnerCheer, meCheer, heartImage, partnerFlowerLanguage, meFlowerLanguage,
) = createRefs()

val screenWidth = LocalConfiguration.current.screenWidthDp
val screenHeight = LocalConfiguration.current.screenHeightDp
val bubbleWidth = 75.dp * screenWidth / 375
val bubbleHeight = 69.dp * screenHeight / 812

when (homeChallengeStateUiModel.challengeStateUiModel) {
is HomeFlowerPartnerAndMeUiModel -> with(homeChallengeStateUiModel.challengeStateUiModel) {
if (homeChallengeStateUiModel.challengeState == Complete) {
if ((this.partner.flowerType as Flower).growType >= Stage.Fourth) {
HomeFlowerLanguage(
modifier = Modifier.constrainAs(partnerFlowerLanguage) {
bottom.linkTo(partner.top)
start.linkTo(partner.start)
end.linkTo(partner.end)
},
homeFlowerUiModel = this.partner,
)
}
HomeFlowerLanguage(
modifier = Modifier.constrainAs(partnerFlowerLanguage) {
bottom.linkTo(partner.top)
start.linkTo(partner.start)
end.linkTo(partner.end)
},
homeFlowerUiModel = this.partner,
onClickFlowerTextBubble = onClickFlowerTextBubble,
)

if ((this.me.flowerType as Flower).growType >= Stage.Fourth) {
HomeFlowerLanguage(
modifier = Modifier.constrainAs(meFlowerLanguage) {
bottom.linkTo(me.top)
start.linkTo(me.start)
end.linkTo(me.end)
},
homeFlowerUiModel = this.me,
)
}
HomeFlowerLanguage(
modifier = Modifier.constrainAs(meFlowerLanguage) {
bottom.linkTo(me.top)
start.linkTo(me.start)
end.linkTo(me.end)
},
homeFlowerUiModel = this.me,
onClickFlowerTextBubble = onClickFlowerTextBubble,
)
}

if ((this.authType == FirstCreateChallenge && homeChallengeStateUiModel.challengeState != Complete) ||
Expand Down Expand Up @@ -161,8 +165,8 @@ fun HomeFlowerMeAndPartner(
.testTag(
stringResource(id = R.string.homeOngoingChallengeWaterImage),
)
.width(69.dp)
.height(42.dp)
.width(bubbleWidth)
.height(bubbleHeight)
.constrainAs(waterImage) {
top.linkTo(textHint.bottom)
bottom.linkTo(me.top, margin = 8.dp)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,49 +1,110 @@
package com.mashup.twotoo.presenter.home.ongoing.components

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import com.mashup.twotoo.presenter.R
import com.mashup.twotoo.presenter.designsystem.component.TwoTooImageView
import com.mashup.twotoo.presenter.designsystem.theme.TwoTooTheme
import com.mashup.twotoo.presenter.home.model.Flower
import com.mashup.twotoo.presenter.home.model.HomeFlowerUiModel
import com.mashup.twotoo.presenter.model.Stage

@Composable
fun HomeFlowerLanguage(
homeFlowerUiModel: HomeFlowerUiModel,
modifier: Modifier = Modifier,
onClickFlowerTextBubble: (HomeFlowerUiModel) -> Unit = {},
) {
val context = LocalContext.current
Column(
modifier = modifier,
horizontalAlignment = Alignment.CenterHorizontally,
val growType = (homeFlowerUiModel.flowerType as Flower).growType
val screenHeight = LocalConfiguration.current.screenHeightDp
val screenWidth = LocalConfiguration.current.screenWidthDp
val bubbleWidth = if (growType.isSuccess()) 92.dp else 118.dp * screenWidth / 375
val bubbleHeight = if (growType.isSuccess()) 48.dp else 63.dp * screenHeight / 812
val areaMargin = 10.dp * screenHeight / 812
val bottomMargin = 12.dp * screenHeight / 812

ConstraintLayout(
modifier = modifier.clickable {
onClickFlowerTextBubble(homeFlowerUiModel)
},
) {
Text(
modifier = Modifier.padding(top = 16.dp, bottom = 8.dp),
text = (homeFlowerUiModel.flowerType as Flower).getFlowerName(context = context),
style = TwoTooTheme.typography.headLineNormal24,
color = TwoTooTheme.color.mainBrown,
)
Text(
text = homeFlowerUiModel.flowerType.getFlowerLanguage(context = context),
style = TwoTooTheme.typography.bodyNormal14,
color = TwoTooTheme.color.mainBrown,
textAlign = TextAlign.Center,
maxLines = 2,
val (bubbleWrapper, textRow) = createRefs()
TwoTooImageView(
modifier = Modifier.width(bubbleWidth).height(bubbleHeight).constrainAs(bubbleWrapper) {
start.linkTo(parent.start)
end.linkTo(parent.end)
top.linkTo(parent.top)
bottom.linkTo(parent.bottom)
},
model = if (growType.isSuccess()) R.drawable.ic_flower_text_bubble_wrapper else R.drawable.ic_cheer_bubble_wrapper,
previewPlaceholder = if (growType.isSuccess()) R.drawable.ic_flower_text_bubble_wrapper else R.drawable.ic_cheer_bubble_wrapper,
contentScale = ContentScale.Fit,
)
Row(
modifier = Modifier.padding(
start = areaMargin,
end = areaMargin,
top = areaMargin,
bottom = areaMargin + bottomMargin,
).constrainAs(textRow) {
start.linkTo(parent.start)
end.linkTo(parent.end)
bottom.linkTo(parent.bottom)
top.linkTo(parent.top)
},
horizontalArrangement = Arrangement.spacedBy(4.dp),
verticalAlignment = Alignment.CenterVertically,
) {
if (growType.isSuccess()) {
Text(
text = stringResource(id = R.string.homeCompleteFlowerBubbleSuccessText),
style = TwoTooTheme.typography.bodyNormal16,
color = TwoTooTheme.color.mainBrown,
)
TwoTooImageView(
modifier = Modifier.size(18.dp),
model = R.drawable.ic_flower_text_bubble_textflower,
previewPlaceholder = R.drawable.ic_flower_text_bubble_textflower,
)
} else {
Text(
text = stringResource(id = R.string.homeCompleteFlowerBubbleFaileText),
style = TwoTooTheme.typography.bodyNormal16,
color = TwoTooTheme.color.gray600,
textAlign = TextAlign.Center,
)
}
}
}
}

private fun Stage.isSuccess(): Boolean {
return this >= Stage.Fourth
}

@Preview
@Composable
private fun PreviewHomeFlowerLanguage() {
TwoTooTheme {
HomeFlowerLanguage(homeFlowerUiModel = HomeFlowerUiModel.default)
HomeFlowerLanguage(
modifier = Modifier.width(92.dp).height(48.dp),
homeFlowerUiModel = HomeFlowerUiModel.default,
)
}
}
Loading

0 comments on commit ce3c302

Please sign in to comment.