Add an unused LnadingScreen (the design is not quite there).

2023-10-16 11:37:23 +02:00 · 2023-10-16 11:37:23 +02:00 · a4f24303ef
commit a4f24303ef
parent 4070a6e5fe
21 changed files with 629 additions and 21 deletions
--- a/app/src/main/java/com/pixelized/rplexicon/ui/composable/edit/HandleHitPointEditDialog.kt
+++ b/app/src/main/java/com/pixelized/rplexicon/ui/composable/edit/HandleHitPointEditDialog.kt
@ -2,6 +2,13 @@ package com.pixelized.rplexicon.ui.composable.edit

 import android.content.res.Configuration.UI_MODE_NIGHT_NO
 import android.content.res.Configuration.UI_MODE_NIGHT_YES
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.SizeTransform
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
@ -20,9 +27,9 @@ import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Stable
 import androidx.compose.runtime.State
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
@ -36,6 +43,7 @@ import com.pixelized.rplexicon.ui.composable.NumberPicker
 import com.pixelized.rplexicon.ui.theme.LexiconTheme
 import com.pixelized.rplexicon.utilitary.extentions.ddBorder
 import com.pixelized.rplexicon.utilitary.extentions.lexicon
+import com.pixelized.rplexicon.utilitary.extentions.toLabel

@Stable
 data class HpPointDialogUio(
@ -52,9 +60,14 @@ fun HandleHitPointEditDialog(
    onConfirm: (hp: Int, extra: Int) -> Unit,
 ) {
    dialog.value?.let {
-        val scope = rememberCoroutineScope()
        val hpPager = rememberPagerState(initialPage = it.value) { it.max + 1 }
        val extraPager = rememberPagerState(initialPage = it.extra) { 99 }
+        val hpChange = remember {
+            derivedStateOf { (hpPager.currentPage - it.value).toLabel() }
+        }
+        val extraChange = remember {
+            derivedStateOf { (extraPager.currentPage - it.extra).toLabel() }
+        }
        Dialog(
            properties = remember { DialogProperties(usePlatformDefaultWidth = false) },
            onDismissRequest = onDismissRequest,
@ -81,19 +94,37 @@ fun HandleHitPointEditDialog(
                    Row(
                        verticalAlignment = Alignment.CenterVertically,
                    ) {
-                        NumberPicker(
-                            modifier = Modifier.width(width = 64.dp),
-                            pager = hpPager,
-                        )
+                        Column(
+                            horizontalAlignment = Alignment.CenterHorizontally,
+                        ) {
+                            NumberPicker(
+                                modifier = Modifier.width(width = 64.dp),
+                                pager = hpPager,
+                            )
+                            Text(
+                                fontWeight = FontWeight.Bold,
+                                style = MaterialTheme.typography.labelLarge,
+                                text = hpChange.value,
+                            )
+                        }
                        Text(
                            fontWeight = FontWeight.Light,
                            style = MaterialTheme.typography.bodyLarge,
                            text = "+"
                        )
-                        NumberPicker(
-                            modifier = Modifier.width(width = 64.dp),
-                            pager = extraPager,
-                        )
+                        Column(
+                            horizontalAlignment = Alignment.CenterHorizontally,
+                        ) {
+                            NumberPicker(
+                                modifier = Modifier.width(width = 64.dp),
+                                pager = extraPager,
+                            )
+                            Text(
+                                fontWeight = FontWeight.Bold,
+                                style = MaterialTheme.typography.labelLarge,
+                                text = extraChange.value,
+                            )
+                        }
                    }
                    TextButton(
                        onClick = { onConfirm(hpPager.currentPage, extraPager.currentPage) },
--- a/app/src/main/java/com/pixelized/rplexicon/ui/navigation/ScreenNavHost.kt
+++ b/app/src/main/java/com/pixelized/rplexicon/ui/navigation/ScreenNavHost.kt
@ -13,11 +13,13 @@ import com.pixelized.rplexicon.ui.navigation.screens.AUTHENTICATION_ROUTE
 import com.pixelized.rplexicon.ui.navigation.screens.composableAuthentication
 import com.pixelized.rplexicon.ui.navigation.screens.composableCharacterSheet
 import com.pixelized.rplexicon.ui.navigation.screens.composableHome
+import com.pixelized.rplexicon.ui.navigation.screens.composableLanding
 import com.pixelized.rplexicon.ui.navigation.screens.composableLexiconDetail
 import com.pixelized.rplexicon.ui.navigation.screens.composableLexiconSearch
 import com.pixelized.rplexicon.ui.navigation.screens.composableLocationDetail
 import com.pixelized.rplexicon.ui.navigation.screens.composableQuestDetail
 import com.pixelized.rplexicon.ui.navigation.screens.composableSpellDetail
+import com.pixelized.rplexicon.ui.navigation.screens.navigateToHome

 val LocalScreenNavHost = staticCompositionLocalOf<NavHostController> {
    error("LocalScreenNavHost not ready")
@ -39,12 +41,17 @@ fun ScreenNavHost(
            navController = navHostController,
            startDestination = startDestination,
        ) {
-            composableAuthentication()
+            composableAuthentication(
+                onSignIn = {
+                    navHostController.navigateToHome(option = rootOption())
+                },
+            )
            composableHome(
                lexiconListState = lexiconListState,
                questListState = questListState,
                locationListState = locationListState,
            )
+            composableLanding()
            composableLexiconDetail()
            composableLexiconSearch()
            composableQuestDetail()
--- a/app/src/main/java/com/pixelized/rplexicon/ui/navigation/screens/ComposableAuthentication.kt
+++ b/app/src/main/java/com/pixelized/rplexicon/ui/navigation/screens/ComposableAuthentication.kt
@ -6,17 +6,20 @@ import androidx.navigation.NavOptionsBuilder
 import com.pixelized.rplexicon.ui.navigation.NavigationAnimation
 import com.pixelized.rplexicon.ui.navigation.animatedComposable
 import com.pixelized.rplexicon.ui.screens.authentication.AuthenticationScreen
+import kotlinx.coroutines.CoroutineScope

 private const val ROUTE = "authentication"

 const val AUTHENTICATION_ROUTE = ROUTE

-fun NavGraphBuilder.composableAuthentication() {
+fun NavGraphBuilder.composableAuthentication(
+    onSignIn: CoroutineScope.() -> Unit
+) {
    animatedComposable(
        route = AUTHENTICATION_ROUTE,
        animation = NavigationAnimation.Push,
    ) {
-        AuthenticationScreen()
+        AuthenticationScreen(onSignIn = onSignIn)
    }
 }

--- a/app/src/main/java/com/pixelized/rplexicon/ui/navigation/screens/ComposableLanding.kt
+++ b/app/src/main/java/com/pixelized/rplexicon/ui/navigation/screens/ComposableLanding.kt
@ -0,0 +1,26 @@
+package com.pixelized.rplexicon.ui.navigation.screens
+
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.NavHostController
+import androidx.navigation.NavOptionsBuilder
+import com.pixelized.rplexicon.ui.navigation.NavigationAnimation
+import com.pixelized.rplexicon.ui.navigation.animatedComposable
+import com.pixelized.rplexicon.ui.screens.landing.LandingScreen
+
+private const val ROUTE = "landing"
+const val LANDING_ROUTE = ROUTE
+
+fun NavGraphBuilder.composableLanding() {
+    animatedComposable(
+        route = LANDING_ROUTE,
+        animation = NavigationAnimation.Push,
+    ) {
+        LandingScreen()
+    }
+}
+
+fun NavHostController.navigateToLanding(
+    option: NavOptionsBuilder.() -> Unit = {},
+) {
+    navigate(route = ROUTE, builder = option)
+}
--- a/app/src/main/java/com/pixelized/rplexicon/ui/screens/authentication/AuthenticationScreen.kt
+++ b/app/src/main/java/com/pixelized/rplexicon/ui/screens/authentication/AuthenticationScreen.kt
@ -55,9 +55,6 @@ import androidx.hilt.navigation.compose.hiltViewModel
 import com.pixelized.rplexicon.LocalActivity
 import com.pixelized.rplexicon.LocalSnack
 import com.pixelized.rplexicon.R
-import com.pixelized.rplexicon.ui.navigation.LocalScreenNavHost
-import com.pixelized.rplexicon.ui.navigation.rootOption
-import com.pixelized.rplexicon.ui.navigation.screens.navigateToHome
 import com.pixelized.rplexicon.ui.theme.LexiconTheme
 import com.pixelized.rplexicon.ui.theme.colors.GoogleColorPalette
 import com.pixelized.rplexicon.utilitary.sensor.Gyroscope
@ -86,11 +83,11 @@ sealed class AuthenticationStateUio {
 fun AuthenticationScreen(
    authenticationVM: AuthenticationViewModel = hiltViewModel(),
    versionVM: VersionViewModel = hiltViewModel(),
+    onSignIn: CoroutineScope.() -> Unit,
 ) {
    val snack = LocalSnack.current
    val context = LocalContext.current
    val activity = LocalActivity.current
-    val screen = LocalScreenNavHost.current
    val state = authenticationVM.rememberAuthenticationState()

    Surface {
@ -114,9 +111,7 @@ fun AuthenticationScreen(
                    CircularProgressIndicator()
                }
            },
-            onSignIn = {
-                screen.navigateToHome(option = rootOption())
-            },
+            onSignIn = onSignIn,
            onSignInError = {
                snack.showSnackbar(
                    message = it?.message ?: context.getString(R.string.error_generic)
--- a/app/src/main/java/com/pixelized/rplexicon/ui/screens/landing/LandingItem.kt
+++ b/app/src/main/java/com/pixelized/rplexicon/ui/screens/landing/LandingItem.kt
@ -0,0 +1,203 @@
+package com.pixelized.rplexicon.ui.screens.landing
+
+import android.content.res.Configuration.UI_MODE_NIGHT_NO
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import androidx.compose.ui.unit.dp
+import com.pixelized.rplexicon.R
+import com.pixelized.rplexicon.ui.theme.LexiconTheme
+import com.pixelized.rplexicon.utilitary.extentions.lexicon
+
+@Stable
+data class LandingItemUio(
+    @DrawableRes val icon: Int,
+    val title: String?,
+    val subTitle: String?,
+)
+
+@Composable
+fun LandingItem(
+    modifier: Modifier = Modifier,
+    item: LandingItemUio,
+    rotation: Float = 0f,
+    ratio: Float = 0.23f,
+    alpha: Float = 0.6f,
+    padding: PaddingValues = PaddingValues(),
+    onClick: (LandingItemUio) -> Unit,
+) {
+    LandingHorizontalItem(
+        modifier = modifier,
+        item = item,
+        rotation = rotation,
+        ratio = ratio,
+        alpha = alpha,
+        padding = padding,
+        onClick = onClick,
+    )
+}
+
+@Composable
+private fun LandingHorizontalItem(
+    modifier: Modifier = Modifier,
+    item: LandingItemUio,
+    rotation: Float,
+    ratio: Float,
+    alpha: Float,
+    padding: PaddingValues,
+    onClick: (LandingItemUio) -> Unit,
+) {
+    Box(
+        modifier = modifier.clickable { onClick(item) },
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(64.dp)
+                .clip(shape = RectangleShape),
+        ) {
+            Image(
+                modifier = Modifier
+                    .padding(paddingValues = padding)
+                    .fillMaxWidth(fraction = ratio)
+                    .aspectRatio(1f)
+                    .rotate(degrees = rotation)
+                    .align(alignment = Alignment.TopEnd),
+                painter = painterResource(id = item.icon),
+                alpha = alpha,
+                contentScale = ContentScale.FillBounds,
+                colorFilter = ColorFilter.tint(color = MaterialTheme.colorScheme.onSurface),
+                contentDescription = null,
+            )
+            Box(
+                modifier = Modifier
+                    .matchParentSize()
+                    .background(brush = rememberBackgroundGradient())
+            )
+        }
+        Row(
+            modifier = Modifier.padding(paddingValues = padding),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(space = 4.dp),
+        ) {
+            item.title?.let {
+                Text(
+                    modifier = Modifier.alignByBaseline(),
+                    style = MaterialTheme.typography.titleLarge,
+                    fontWeight = FontWeight.Normal,
+                    text = AnnotatedString(
+                        text = it,
+                        spanStyles = listOf(
+                            AnnotatedString.Range(
+                                item = MaterialTheme.lexicon.typography.bodyDropCapSpan,
+                                start = 0,
+                                end = Integer.min(1, it.length),
+                            )
+                        ),
+                    )
+                )
+            }
+            item.subTitle?.let {
+                Text(
+                    modifier = Modifier.alignByBaseline(),
+                    style = MaterialTheme.typography.bodyMedium,
+                    fontWeight = FontWeight.Light,
+                    text = item.subTitle,
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun rememberBackgroundGradient(): Brush {
+    val colorScheme = MaterialTheme.colorScheme
+    return remember {
+        Brush.horizontalGradient(
+            colors = listOf(
+                colorScheme.surface.copy(alpha = 0.5f),
+                colorScheme.surface.copy(alpha = 1.0f),
+            )
+        )
+    }
+}
+
+@Composable
+@Preview(uiMode = UI_MODE_NIGHT_NO)
+@Preview(uiMode = UI_MODE_NIGHT_YES)
+private fun LandingItemPreview(
+    @PreviewParameter(LandingItemPreviewProvider::class) preview: LandingItemUio,
+) {
+    LexiconTheme {
+        Surface {
+            LandingItem(
+                modifier = Modifier.fillMaxWidth(),
+                item = preview,
+                padding = PaddingValues(horizontal = 16.dp),
+                onClick = { },
+            )
+        }
+    }
+}
+
+fun landingItems() = listOf(
+    LandingItemUio(
+        icon = R.drawable.ic_class_barbarian_24,
+        title = "Brulkhai",
+        subTitle = "Barbare"
+    ),
+    LandingItemUio(
+        icon = R.drawable.ic_class_cleric_24,
+        title = "Léandre",
+        subTitle = "Clerc"
+    ),
+    LandingItemUio(
+        icon = R.drawable.ic_class_ranger_24,
+        title = "Nélia",
+        subTitle = "Rôdeur"
+    ),
+    LandingItemUio(
+        icon = R.drawable.ic_class_warlock_24,
+        title = "Tigrane",
+        subTitle = "Occultiste",
+    ),
+    LandingItemUio(
+        icon = R.drawable.ic_class_bard_24,
+        title = "Unathana",
+        subTitle = "Barde",
+    ),
+)
+
+private class LandingItemPreviewProvider : PreviewParameterProvider<LandingItemUio> {
+    override val values: Sequence<LandingItemUio> = landingItems().asSequence()
+}
--- a/app/src/main/java/com/pixelized/rplexicon/ui/screens/landing/LandingScreen.kt
+++ b/app/src/main/java/com/pixelized/rplexicon/ui/screens/landing/LandingScreen.kt
@ -0,0 +1,139 @@
+package com.pixelized.rplexicon.ui.screens.landing
+
+import android.content.res.Configuration.UI_MODE_NIGHT_NO
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.State
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.pixelized.rplexicon.R
+import com.pixelized.rplexicon.ui.theme.LexiconTheme
+import com.pixelized.rplexicon.utilitary.extentions.lexicon
+
+@Composable
+fun LandingScreen() {
+
+}
+
+@Composable
+private fun LandingContent(
+    modifier: Modifier = Modifier,
+    padding: Dp = 16.dp,
+    items: State<List<LandingItemUio>>,
+) {
+    LazyColumn(
+        modifier = modifier,
+        contentPadding = PaddingValues(vertical = padding),
+        verticalArrangement = Arrangement.spacedBy(space = 8.dp),
+        content = {
+            items(count = 1) {
+                Text(
+                    modifier = Modifier.padding(horizontal = padding),
+                    style = MaterialTheme.typography.titleLarge,
+                    text = AnnotatedString(
+                        text = "Feuilles de personnages",
+                        spanStyles = listOf(
+                            AnnotatedString.Range(
+                                item = MaterialTheme.lexicon.typography.titleDropCapSpan,
+                                start = 0,
+                                end = Integer.min(1, "Character".length),
+                            )
+                        ),
+                    ),
+                )
+            }
+            items(items = items.value) {
+                LandingItem(
+                    modifier = Modifier.fillMaxWidth(),
+                    item = it,
+                    rotation = 270f,
+                    ratio = 0.75f,
+                    alpha = 0.5f,
+                    padding = PaddingValues(horizontal = padding),
+                    onClick = { },
+                )
+            }
+            items(count = 1) {
+                Text(
+                    modifier = Modifier.padding(horizontal = padding),
+                    style = MaterialTheme.typography.titleLarge,
+                    text = AnnotatedString(
+                        text = "Lexique",
+                        spanStyles = listOf(
+                            AnnotatedString.Range(
+                                item = MaterialTheme.lexicon.typography.titleDropCapSpan,
+                                start = 0,
+                                end = Integer.min(1, "Lexique".length),
+                            )
+                        ),
+                    ),
+                )
+            }
+            items(count = 1) {
+                LandingItem(
+                    modifier = Modifier.fillMaxWidth(),
+                    item = LandingItemUio(
+                        title = "Personnages",
+                        subTitle = null,
+                        icon = R.drawable.ic_visored_helm_24,
+                    ),
+                    padding = PaddingValues(horizontal = padding),
+                    onClick = { },
+                )
+            }
+            items(count = 1) {
+                LandingItem(
+                    modifier = Modifier.fillMaxWidth(),
+                    item = LandingItemUio(
+                        title = "Journal de quêtes",
+                        subTitle = null,
+                        icon = R.drawable.ic_scroll_unfurled_24,
+                    ),
+                    padding = PaddingValues(horizontal = padding),
+                    onClick = { },
+                )
+            }
+            items(count = 1) {
+                LandingItem(
+                    modifier = Modifier.fillMaxWidth(),
+                    item = LandingItemUio(
+                        title = "Cartes",
+                        subTitle = null,
+                        icon = R.drawable.ic_treasure_map_24,
+                    ),
+                    padding = PaddingValues(horizontal = padding),
+                    onClick = { },
+                )
+            }
+        },
+    )
+}
+
+@Composable
+@Preview(uiMode = UI_MODE_NIGHT_NO)
+@Preview(uiMode = UI_MODE_NIGHT_YES)
+private fun LandingPreview() {
+    LexiconTheme {
+        Surface {
+            LandingContent(
+                modifier = Modifier.fillMaxSize(),
+                items = remember { mutableStateOf(landingItems()) }
+            )
+        }
+    }
+}
--- a/app/src/main/java/com/pixelized/rplexicon/ui/theme/typography/LexiconTypography.kt
+++ b/app/src/main/java/com/pixelized/rplexicon/ui/theme/typography/LexiconTypography.kt
@ -33,7 +33,7 @@ class LexiconTypography(
        baselineShift = BaselineShift(-0.1f),
        letterSpacing = (-3).sp
    ),
-    val titleDropCap: TextStyle = base.displayLarge.copy(
+    val titleDropCap: TextStyle = base.displayMedium.copy(
        fontFamily = zallFontFamily,
        baselineShift = BaselineShift(-0.1f),
        letterSpacing = (-4).sp