feat: improve home view layout and add games activity dependency

This commit revamps the home view layout for better user experience by adding more interactive elements such as clickable cards and icon buttons. It also includes a new dependency for games activity. The changes include:

- Replaced text elements with cards to display user IPK and total SKS.
- Added clickable functionality to the IPK card to toggle visibility.
- Replaced navigation buttons with icon buttons for better visual appeal.
- Added games-activity:3.0.0 to the app dependencies in the build.gradle file.

app/build.gradle.kts

@@ -70,6 +70,7 @@ dependencies {
     implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.7.0")
     implementation("androidx.work:work-runtime-ktx:2.9.0")
     implementation("androidx.appcompat:appcompat:1.6.1")
+    implementation("androidx.games:games-activity:3.0.0")
     testImplementation("junit:junit:4.13.2")
     androidTestImplementation("androidx.test.ext:junit:1.1.5")
     androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")

app/src/main/java/com/uad/portal/views/HomeView.kt

@@ -1,50 +1,116 @@
 package com.uad.portal.views
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
-import androidx.compose.material3.Button
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Book
+import androidx.compose.material.icons.filled.CalendarToday
+import androidx.compose.material.icons.filled.ExitToApp
+import androidx.compose.material.icons.filled.Settings
+import androidx.compose.material3.Card
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+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.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import coil.compose.rememberImagePainter
 import com.uad.portal.MainViewModel
 
+
 @Composable
 fun HomeView(mainViewModel: MainViewModel) {
-    Column(modifier = Modifier
-        .fillMaxWidth()
-        .padding(horizontal = 32.dp)) {
-        Text("You are logged in as ${mainViewModel.userInfoState.value?.username ?: "Unknown"}")
-        Text("Your IPK is ${mainViewModel.userInfoState.value?.ipk ?: "Unknown"}")
-        Text("Your total SKS is ${mainViewModel.userInfoState.value?.sks ?: "Unknown"}")
-        mainViewModel.userInfoState.value?.avatarUrl?.let {
-            if (it.isNotEmpty()) {
-                Image(
-                    painter = rememberImagePainter(it),
-                    contentDescription = "User Avatar",
-                    modifier = Modifier.size(100.dp)
-                )
+    val ipkVisible = remember { mutableStateOf(false) }
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(24.dp),
+        verticalArrangement = Arrangement.Top
+    ) {
+
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            mainViewModel.userInfoState.value?.avatarUrl?.let {
+                if (it.isNotEmpty()) {
+                    Image(
+                        painter = rememberImagePainter(it),
+                        contentDescription = "User Avatar",
+                        modifier = Modifier
+                            .size(64.dp)
+                            .clip(CircleShape)
+                    )
+                }
             }
+            Spacer(modifier = Modifier.width(16.dp))
+            Text("Halo, ${mainViewModel.userInfoState.value?.username ?: "Unknown"} 🤚", style = TextStyle(fontSize = 24.sp, fontWeight = FontWeight.Bold))
         }
 
-        Spacer(modifier = Modifier.height(16.dp))
-        Button(onClick = { mainViewModel.navigate(Screen.Attendance) }) {
-            Text("Absensi")
-        }
+        Spacer(modifier = Modifier.height(24.dp))
 
-        Spacer(modifier = Modifier.height(16.dp))
-        Button(onClick = { mainViewModel.navigate(Screen.Reglab) }) {
-            Text("Reglab")
-        }
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            Card(
+                modifier = Modifier
+                    .weight(1f)
+                    .aspectRatio(1f)
+                    .clickable { ipkVisible.value = !ipkVisible.value },
+                shape = RoundedCornerShape(16.dp)
+            ) {
+                Box(contentAlignment = Alignment.Center) {
+                    if (ipkVisible.value) {
+                        Text("IPK: ${mainViewModel.userInfoState.value?.ipk ?: "Unknown"}", style = TextStyle(fontSize = 20.sp, fontWeight = FontWeight.Bold))
+                    } else {
+                        Text("Tekan untuk melihat IPK", style = TextStyle(fontSize = 20.sp, fontWeight = FontWeight.Bold)) // Add this line
+                    }
+                }
+            }
+
+            Spacer(modifier = Modifier.width(24.dp))
 
-        Spacer(modifier = Modifier.height(16.dp))
-        Button(onClick = { mainViewModel.navigate(Screen.Settings) }) {
-            Text("Settings")
+            Card(
+                modifier = Modifier
+                    .weight(1f)
+                    .aspectRatio(1f),
+                shape = RoundedCornerShape(16.dp)
+            ) {
+                Box(contentAlignment = Alignment.Center) {
+                    Text("Total SKS: ${mainViewModel.userInfoState.value?.sks ?: "Unknown"}", style = TextStyle(fontSize = 20.sp, fontWeight = FontWeight.Bold))
+                }
+            }
         }
-        Spacer(modifier = Modifier.height(16.dp))
-        Button(onClick = mainViewModel::logout) {
-            Text("Logout")
+
+        Spacer(modifier = Modifier.height(24.dp))
+
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            IconButton(onClick = { mainViewModel.navigate(Screen.Attendance) }) {
+                Icon(Icons.Filled.CalendarToday, contentDescription = "Absensi")
+            }
+
+            IconButton(onClick = { mainViewModel.navigate(Screen.Reglab) }) {
+                Icon(Icons.Filled.Book, contentDescription = "Reglab")
+            }
+
+            IconButton(onClick = { mainViewModel.navigate(Screen.Settings) }) {
+                Icon(Icons.Filled.Settings, contentDescription = "Settings")
+            }
+
+            IconButton(onClick = mainViewModel::logout) {
+                Icon(Icons.Filled.ExitToApp, contentDescription = "Logout")
+            }
         }
     }
 }