Add standalone Edit Profile screen

app/src/main/java/com/cornellappdev/score/screen/EditProfileScreen.kt

@@ -0,0 +1,125 @@
+package com.cornellappdev.score.screen
+
+import androidx.annotation.DrawableRes
+import androidx.annotation.StringRes
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.selection.selectable
+import androidx.compose.foundation.selection.selectableGroup
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.cornellappdev.score.R
+import com.cornellappdev.score.components.NavigationHeader
+import com.cornellappdev.score.theme.Style
+
+enum class ProfilePicture(@DrawableRes val drawable: Int, @StringRes val label: Int) {
+    BLANK(R.drawable.profile_blank, R.string.profile_blank),
+    TENNIS(R.drawable.profile_tennis, R.string.profile_tennis),
+    BASEBALL(R.drawable.profile_baseball, R.string.profile_baseball),
+    SOCCER(R.drawable.profile_soccer, R.string.profile_soccer)
+}
+
+@Composable
+fun EditProfileScreen(
+    onBack: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    var selectedPicture by rememberSaveable { mutableStateOf(ProfilePicture.BASEBALL) }
+    EditProfileScreen(
+        selectedPicture = selectedPicture,
+        onPictureSelected = { selectedPicture = it },
+        onBack = onBack,
+        modifier = modifier
+    )
+}
+
+@Composable
+fun EditProfileScreen(
+    selectedPicture: ProfilePicture,
+    onPictureSelected: (ProfilePicture) -> Unit,
+    onBack: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Column(modifier.fillMaxSize().background(Color.White)) {
+        NavigationHeader(stringResource(R.string.edit_profile), onBack)
+        Column(
+            modifier = Modifier.fillMaxWidth().verticalScroll(rememberScrollState())
+                .padding(top = 60.dp, bottom = 32.dp),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Image(
+                painter = painterResource(selectedPicture.drawable),
+                contentDescription = stringResource(R.string.selected_profile_picture, stringResource(selectedPicture.label)),
+                modifier = Modifier.size(100.dp)
+            )
+            Spacer(Modifier.height(40.dp))
+            Text(
+                text = stringResource(R.string.select_profile_picture),
+                style = Style.metricMedium.copy(fontFeatureSettings = "liga off, clig off"),
+                color = Color.Black,
+                modifier = Modifier.padding(horizontal = 24.dp)
+            )
+            Spacer(Modifier.height(24.dp))
+            Row(
+                modifier = Modifier.widthIn(max = 393.dp).fillMaxWidth()
+                    .padding(horizontal = 24.dp).selectableGroup(),
+                horizontalArrangement = Arrangement.spacedBy(20.dp)
+            ) {
+                ProfilePicture.entries.forEach { picture ->
+                    val selected = picture == selectedPicture
+                    Box(
+                        modifier = Modifier.weight(1f).aspectRatio(1f).clip(CircleShape)
+                            .selectable(selected = selected, role = Role.RadioButton,
+                                onClick = { onPictureSelected(picture) }),
+                        contentAlignment = Alignment.Center
+                    ) {
+                        Image(
+                            painter = painterResource(picture.drawable),
+                            contentDescription = stringResource(picture.label),
+                            modifier = Modifier.fillMaxSize()
+                        )
+                        if (selected) {
+                            Box(Modifier.fillMaxSize().background(Color.White.copy(alpha = 0.6f), CircleShape)
+                                .border(3.dp, Color(0xFF4DBB35), CircleShape))
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true, widthDp = 393, heightDp = 852)
+@Composable
+private fun EditProfileScreenPreview() {
+    EditProfileScreen(onBack = {})
+}

app/src/main/res/drawable/profile_baseball.xml

@@ -0,0 +1,35 @@
+<?xml version='1.0' encoding='utf-8'?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="70dp" android:height="70dp" android:viewportWidth="70" android:viewportHeight="70">
+  <group>
+    <clip-path android:pathData="M 0,35 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0 Z" />
+    <path android:pathData="M-5.0,-3.0h84.0v85.0h-84.0Z" android:fillColor="#AFE4F7" />
+    <path android:pathData="M65.4727 60.9004C57.3625 50.436 46.2524 24.566 66.6933 4.80189" android:strokeColor="#A5210D" android:strokeWidth="3" />
+    <path android:pathData="M55.1837,31.3906L58.2465,28.8177" android:strokeColor="#A5210D" android:strokeWidth="3" android:strokeLineCap="round" />
+    <path android:pathData="M52.1067,28.249L54.5836,31.3898" android:strokeColor="#A5210D" android:strokeWidth="3" android:strokeLineCap="round" />
+    <path android:pathData="M56.568,21.7063L60.2287,20.0941" android:strokeColor="#A5210D" android:strokeWidth="3" android:strokeLineCap="round" />
+    <path android:pathData="M54.4937,17.829L55.9919,21.5378" android:strokeColor="#A5210D" android:strokeWidth="3" android:strokeLineCap="round" />
+    <path android:pathData="M59.5727,13.4084L63.4795,12.5502" android:strokeColor="#A5210D" android:strokeWidth="3" android:strokeLineCap="round" />
+    <path android:pathData="M58.3039,9.19795L59.0409,13.1295" android:strokeColor="#A5210D" android:strokeWidth="3" android:strokeLineCap="round" />
+    <path android:pathData="M56.3791,41.0178L58.4266,37.5816" android:strokeColor="#A5210D" android:strokeWidth="3" android:strokeLineCap="round" />
+    <path android:pathData="M52.0715,39.0626L55.4428,41.2153" android:strokeColor="#A5210D" android:strokeWidth="3" android:strokeLineCap="round" />
+    <path android:pathData="M59.1591,49.3774L60.7109,45.6906" android:strokeColor="#A5210D" android:strokeWidth="3" android:strokeLineCap="round" />
+    <path android:pathData="M54.9883,47.9871L58.6252,49.6521" android:strokeColor="#A5210D" android:strokeWidth="3" android:strokeLineCap="round" />
+    <path android:pathData="M3.74805 60.9004C11.8582 50.436 22.9683 24.566 2.52739 4.80189" android:strokeColor="#A5210D" android:strokeWidth="3" />
+    <path android:pathData="M14.036980000000002,31.39055L10.97422,28.81771" android:strokeColor="#A5210D" android:strokeWidth="3" android:strokeLineCap="round" />
+    <path android:pathData="M17.1140415,28.2489805L14.637137500000001,31.3898325" android:strokeColor="#A5210D" android:strokeWidth="3" android:strokeLineCap="round" />
+    <path android:pathData="M12.6526885,21.706265499999997L8.9919605,20.094101499999997" android:strokeColor="#A5210D" android:strokeWidth="3" android:strokeLineCap="round" />
+    <path android:pathData="M14.727064500000001,17.8289855L13.2288645,21.5378135" android:strokeColor="#A5210D" android:strokeWidth="3" android:strokeLineCap="round" />
+    <path android:pathData="M9.6480525,13.4084085L5.7412005,12.5502165" android:strokeColor="#A5210D" android:strokeWidth="3" android:strokeLineCap="round" />
+    <path android:pathData="M10.9168125,9.197955499999999L10.1798365,13.129479499999999" android:strokeColor="#A5210D" android:strokeWidth="3" android:strokeLineCap="round" />
+    <path android:pathData="M12.841597,41.017801999999996L10.794129,37.581542" android:strokeColor="#A5210D" android:strokeWidth="3" android:strokeLineCap="round" />
+    <path android:pathData="M17.149182,39.062537L13.777874,41.215277" android:strokeColor="#A5210D" android:strokeWidth="3" android:strokeLineCap="round" />
+    <path android:pathData="M10.061594,49.377358L8.50981,45.69063" android:strokeColor="#A5210D" android:strokeWidth="3" android:strokeLineCap="round" />
+    <path android:pathData="M14.232441000000001,47.987120999999995L10.595457,49.652161" android:strokeColor="#A5210D" android:strokeWidth="3" android:strokeLineCap="round" />
+    <path android:pathData="M 1.0,35.0 a 34.0,34.0 0 1,0 68.0,0 a 34.0,34.0 0 1,0 -68.0,0 Z" android:strokeColor="#333333" android:strokeWidth="2" />
+    <path android:pathData="M26 34.5C26 36.433 24.433 38 22.5 38C20.567 38 19 36.433 19 34.5C19 32.567 20.567 31 22.5 31C24.433 31 26 32.567 26 34.5Z" android:fillColor="#333333" />
+    <path android:pathData="M51 34.5C51 36.433 49.433 38 47.5 38C45.567 38 44 36.433 44 34.5C44 32.567 45.567 31 47.5 31C49.433 31 51 32.567 51 34.5Z" android:fillColor="#333333" />
+    <path android:pathData="M22 33C22 33.5523 21.5523 34 21 34C20.4477 34 20 33.5523 20 33C20 32.4477 20.4477 32 21 32C21.5523 32 22 32.4477 22 33Z" android:fillColor="#FFFFFF" />
+    <path android:pathData="M47 33C47 33.5523 46.5523 34 46 34C45.4477 34 45 33.5523 45 33C45 32.4477 45.4477 32 46 32C46.5523 32 47 32.4477 47 33Z" android:fillColor="#FFFFFF" />
+    <path android:pathData="M31 38C32.3694 39.5092 35.8865 41.6222 39 38" android:strokeColor="#333333" android:strokeWidth="2" android:strokeLineCap="round" />
+  </group>
+</vector>

app/src/main/res/drawable/profile_blank.xml

@@ -0,0 +1,9 @@
+<?xml version='1.0' encoding='utf-8'?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="70dp" android:height="70dp" android:viewportWidth="70" android:viewportHeight="70">
+  <path android:pathData="M 1.0,35.0 a 34.0,34.0 0 1,0 68.0,0 a 34.0,34.0 0 1,0 -68.0,0 Z" android:fillColor="#EAEAEA" android:strokeColor="#333333" android:strokeWidth="2" />
+  <path android:pathData="M26 35.5C26 37.433 24.433 39 22.5 39C20.567 39 19 37.433 19 35.5C19 33.567 20.567 32 22.5 32C24.433 32 26 33.567 26 35.5Z" android:fillColor="#333333" />
+  <path android:pathData="M51 35.5C51 37.433 49.433 39 47.5 39C45.567 39 44 37.433 44 35.5C44 33.567 45.567 32 47.5 32C49.433 32 51 33.567 51 35.5Z" android:fillColor="#333333" />
+  <path android:pathData="M22 34C22 34.5523 21.5523 35 21 35C20.4477 35 20 34.5523 20 34C20 33.4477 20.4477 33 21 33C21.5523 33 22 33.4477 22 34Z" android:fillColor="#FFFFFF" />
+  <path android:pathData="M47 34C47 34.5523 46.5523 35 46 35C45.4477 35 45 34.5523 45 34C45 33.4477 45.4477 33 46 33C46.5523 33 47 33.4477 47 34Z" android:fillColor="#FFFFFF" />
+  <path android:pathData="M31 39C32.3694 40.5092 35.8865 42.6222 39 39" android:strokeColor="#333333" android:strokeWidth="2" android:strokeLineCap="round" />
+</vector>

app/src/main/res/drawable/profile_soccer.xml

@@ -0,0 +1,32 @@
+<?xml version='1.0' encoding='utf-8'?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="70dp" android:height="70dp" android:viewportWidth="70" android:viewportHeight="70">
+  <group>
+    <clip-path android:pathData="M 0,35 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0 Z" />
+    <path android:pathData="M-5.0,-3.0h84.0v85.0h-84.0Z" android:fillColor="#BDA4DB" />
+    <path android:pathData="M 1.0,35.0 a 34.0,34.0 0 1,0 68.0,0 a 34.0,34.0 0 1,0 -68.0,0 Z" android:strokeColor="#333333" android:strokeWidth="2" />
+    <path android:pathData="M26 34.5C26 36.433 24.433 38 22.5 38C20.567 38 19 36.433 19 34.5C19 32.567 20.567 31 22.5 31C24.433 31 26 32.567 26 34.5Z" android:fillColor="#333333" />
+    <path android:pathData="M51 34.5C51 36.433 49.433 38 47.5 38C45.567 38 44 36.433 44 34.5C44 32.567 45.567 31 47.5 31C49.433 31 51 32.567 51 34.5Z" android:fillColor="#333333" />
+    <path android:pathData="M22 33C22 33.5523 21.5523 34 21 34C20.4477 34 20 33.5523 20 33C20 32.4477 20.4477 32 21 32C21.5523 32 22 32.4477 22 33Z" android:fillColor="#FFFFFF" />
+    <path android:pathData="M47 33C47 33.5523 46.5523 34 46 34C45.4477 34 45 33.5523 45 33C45 32.4477 45.4477 32 46 32C46.5523 32 47 32.4477 47 33Z" android:fillColor="#FFFFFF" />
+    <path android:pathData="M31 38C32.3694 39.5092 35.8865 41.6222 39 38" android:strokeColor="#333333" android:strokeWidth="2" android:strokeLineCap="round" />
+    <path android:pathData="M56 12.5L66 23.5L63.5 33.5L52 30.5L47.5 17.5L56 12.5Z" android:fillColor="#333333" />
+    <path android:pathData="M36.4998 -13L50.4999 -15.4999L54.4998 -6.5L49.9999 1.00006L33.9999 -1.49994L36.4998 -13Z" android:fillColor="#333333" />
+    <path android:pathData="M25.5 42L40 44.5L42.5 58.5L29.5 64L19 53.5L25.5 42Z" android:fillColor="#333333" />
+    <path android:pathData="M-10.2012 34.5003L5.22421 35.3015L9.4998 48.1564L-3.40786 56.4425L-15.6129 47.0052L-10.2012 34.5003Z" android:fillColor="#333333" />
+    <path android:pathData="M15.5 13.5L27.5 7L32.5 14L22.5 24.5L12 23.5L15.5 13.5Z" android:fillColor="#333333" />
+    <path android:pathData="M56.5 58L66 47L74 52L64 65.5L55 64.5L56.5 58Z" android:fillColor="#333333" />
+    <path android:pathData="M26.5 68H30.5L35.5 70L25 83.5L16 82.5L26.5 68Z" android:fillColor="#333333" />
+    <path android:pathData="M22 22C22.2516 31.2517 23.4147 36.272 27 45" android:strokeColor="#333333" android:strokeWidth="2" />
+    <path android:pathData="M38.5 46C44.9665 41.1782 49.7317 34.3328 53.5 27.5" android:strokeColor="#333333" android:strokeWidth="2" />
+    <path android:pathData="M62.5 31.5C63.6294 34.1667 66.3034 42.6 65.9646 49" android:strokeColor="#333333" android:strokeWidth="2" />
+    <path android:pathData="M30.5 14.0001C33.3333 13.6667 42.7 14.5 49.5 18.5" android:strokeColor="#333333" android:strokeWidth="2" />
+    <path android:pathData="M39 57.5C42.3333 58.1667 53.8 59.6 59 58" android:strokeColor="#333333" android:strokeWidth="2" />
+    <path android:pathData="M29.5 60C29.5 61.6667 30.2 68.2 31 69" android:strokeColor="#333333" android:strokeWidth="2" />
+    <path android:pathData="M20.9998 53.4995C16.1169 52.6003 8.83844 49.0027 7.49975 46.9996" android:strokeColor="#333333" android:strokeWidth="2" />
+    <path android:pathData="M14 22C12 23.5 6.1 29.7001 4.5 36.5001" android:strokeColor="#333333" android:strokeWidth="2" />
+    <path android:pathData="M27 9C27.7577 6.54315 34.0954 1.14772 40 1" android:strokeColor="#333333" android:strokeWidth="2" />
+    <path android:pathData="M55.9489 14C56.2801 12.625 55.154 8.5 48 3" android:strokeColor="#333333" android:strokeWidth="2" />
+    <path android:pathData="M64 24.2018C65.5556 23.9358 68.9333 23.7229 70 25" android:strokeColor="#333333" android:strokeWidth="2" />
+    <path android:pathData="M16.5 14.5006C11.4779 13.5597 7.38818 15.8356 6.5 16.0006" android:strokeColor="#333333" android:strokeWidth="2" />
+  </group>
+</vector>

app/src/main/res/drawable/profile_tennis.xml

@@ -0,0 +1,15 @@
+<?xml version='1.0' encoding='utf-8'?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="70dp" android:height="70dp" android:viewportWidth="70" android:viewportHeight="70">
+  <group>
+    <clip-path android:pathData="M 0,35 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0 Z" />
+    <path android:pathData="M-5.0,-3.0h84.0v85.0h-84.0Z" android:fillColor="#9DB428" />
+    <path android:pathData="M8 7C17.7391 13.2088 42.5739 22.3912 64 9.45082" android:strokeColor="#FFFFFF" android:strokeWidth="6" />
+    <path android:pathData="M66.1426 64.4648C55.9766 59.3823 29.9251 51.5923 7.04719 61.0928" android:strokeColor="#FFFFFF" android:strokeWidth="6" />
+    <path android:pathData="M 1.0,35.0 a 34.0,34.0 0 1,0 68.0,0 a 34.0,34.0 0 1,0 -68.0,0 Z" android:strokeColor="#333333" android:strokeWidth="2" />
+    <path android:pathData="M26 34.5C26 36.433 24.433 38 22.5 38C20.567 38 19 36.433 19 34.5C19 32.567 20.567 31 22.5 31C24.433 31 26 32.567 26 34.5Z" android:fillColor="#333333" />
+    <path android:pathData="M51 34.5C51 36.433 49.433 38 47.5 38C45.567 38 44 36.433 44 34.5C44 32.567 45.567 31 47.5 31C49.433 31 51 32.567 51 34.5Z" android:fillColor="#333333" />
+    <path android:pathData="M22 33C22 33.5523 21.5523 34 21 34C20.4477 34 20 33.5523 20 33C20 32.4477 20.4477 32 21 32C21.5523 32 22 32.4477 22 33Z" android:fillColor="#FFFFFF" />
+    <path android:pathData="M47 33C47 33.5523 46.5523 34 46 34C45.4477 34 45 33.5523 45 33C45 32.4477 45.4477 32 46 32C46.5523 32 47 32.4477 47 33Z" android:fillColor="#FFFFFF" />
+    <path android:pathData="M31 38C32.3694 39.5092 35.8865 41.6222 39 38" android:strokeColor="#333333" android:strokeWidth="2" android:strokeLineCap="round" />
+  </group>
+</vector>

app/src/main/res/values/strings.xml

@@ -1,3 +1,10 @@
 <resources>
     <string name="app_name">Score</string>
+    <string name="edit_profile">Edit Profile</string>
+    <string name="select_profile_picture">Select a profile picture:</string>
+    <string name="selected_profile_picture">Selected profile picture: %1$s</string>
+    <string name="profile_blank">Blank</string>
+    <string name="profile_tennis">Tennis</string>
+    <string name="profile_baseball">Baseball</string>
+    <string name="profile_soccer">Soccer</string>
 </resources>