Вёрстка главного экрана

OscellaMobile/app/build.gradle.kts

@@ -1,6 +1,7 @@
 plugins {
     alias(libs.plugins.android.application)
     alias(libs.plugins.kotlin.android)
+    kotlin("plugin.serialization") version "1.5.30"
 }
 
 android {
@@ -75,5 +76,6 @@ dependencies {
     implementation(libs.ktor.client.android)
     implementation(libs.storage.kt)
 
+
     implementation (libs.accompanist.systemuicontroller)
 }

OscellaMobile/app/src/main/java/com/example/oscellamobile/models/Game.kt

@@ -0,0 +1,18 @@
+package com.example.oscellamobile.models
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class Game(
+    val id: Int,
+    val name_game: String,
+    val description: String?,
+    val company: Int?,
+    val picture: String?,
+    val views: Int?,
+    val favourites: Int?,
+    val age_rating: Int?,
+    val link_torrent: String?,
+    val link_oficial: String?,
+    val short_description: String?
+)

OscellaMobile/app/src/main/java/com/example/oscellamobile/screens/MainWindow.kt

@@ -1,5 +1,6 @@
 package com.example.oscellamobile.screens
 
+import android.util.Log
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.Image
@@ -19,10 +20,13 @@ 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.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Card
+import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -43,6 +47,7 @@ import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.Shadow
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.drawscope.DrawScope
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
@@ -51,8 +56,13 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.navigation.NavHostController
 import com.example.oscellamobile.R
+import com.example.oscellamobile.domain.utlis.Constant
+import com.example.oscellamobile.models.Game
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
+import io.github.jan.supabase.postgrest.from
+import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.delay
+import kotlinx.coroutines.withContext
 import org.intellij.lang.annotations.JdkConstants.HorizontalAlignment
 import kotlin.math.cos
 import kotlin.math.sin
@@ -60,6 +70,23 @@ import kotlin.math.sin
 
 @Composable
 fun MainWindow(navController: NavHostController) {
+
+    var games by remember { mutableStateOf<List<Game>>(listOf()) }
+
+    LaunchedEffect(Unit) {
+        withContext(Dispatchers.IO) {
+            try {
+                games = Constant.supabase.from("Game")
+                    .select().decodeList<Game>()
+                games.forEach { Game ->
+                    Log.d("C", Game.name_game)
+                }
+            } catch (e: Exception) {
+                Log.e("C", "Ошибка загрузки данных", e)
+            }
+        }
+    }
+
     val systemUiController = rememberSystemUiController()
 
     // Automatically hide the status bar when the composable is first displayed
@@ -148,7 +175,12 @@ fun MainWindow(navController: NavHostController) {
                     modifier = Modifier.fillMaxSize(),
                     contentAlignment = Alignment.Center
                 ) {
-                    Text("Игры", color = Color(0xFFFDFFFC), fontFamily = playfairdisplay, fontSize = 17.sp)
+                    Text(
+                        "Игры",
+                        color = Color(0xFFFDFFFC),
+                        fontFamily = playfairdisplay,
+                        fontSize = 17.sp
+                    )
                 }
             }
 
@@ -167,7 +199,12 @@ fun MainWindow(navController: NavHostController) {
                     modifier = Modifier.fillMaxSize(),
                     contentAlignment = Alignment.Center
                 ) {
-                    Text("Компании", color = Color(0xFFFDFFFC), fontFamily = playfairdisplay, fontSize = 17.sp)
+                    Text(
+                        "Компании",
+                        color = Color(0xFFFDFFFC),
+                        fontFamily = playfairdisplay,
+                        fontSize = 17.sp
+                    )
                 }
             }
 
@@ -186,224 +223,246 @@ fun MainWindow(navController: NavHostController) {
                     modifier = Modifier.fillMaxSize(),
                     contentAlignment = Alignment.Center
                 ) {
-                    Text("Облако", color = Color(0xFFFDFFFC), fontFamily = playfairdisplay, fontSize = 17.sp)
+                    Text(
+                        "Облако",
+                        color = Color(0xFFFDFFFC),
+                        fontFamily = playfairdisplay,
+                        fontSize = 17.sp
+                    )
                 }
             }
             Spacer(Modifier.width(10.dp))
         }
         Spacer(Modifier.height(100.dp))
-        Card(
-            modifier = Modifier
-                .padding(20.dp, 0.dp, 20.dp, 0.dp)
-                .background(color = Color(0xFFFDFFFC), shape = RoundedCornerShape(15.dp)),
-        ) {
-            Row {
-                Spacer(Modifier.width(10.dp))
-                Column {
-                    Text(
-                        text = "Hoyoverse",
-                        fontSize = 20.sp,
-                        fontFamily = kdamFontFamily,
-                        color = Color(0xFF2EC4B6)
-                    )
-                    Text(text = "Фэнтези", fontSize = 12.sp, fontFamily = kdamFontFamily, color = Color(0xFFE71D36))
-                    Spacer(Modifier.width(20.dp))
-                    Column {
-                        Text(
-                            text = "Основные метки:",
-                            fontSize = 14.sp,
-                            fontFamily = kdamFontFamily,
-                            color = Color(0xFF7F807E)
-                        )
-                        Column(
-                            Modifier.padding(10.dp)
-                        ) {
-                            Box(
-                                modifier = Modifier
-                                    .width(107.dp)
-                                    .height(22.dp)
-                                    .background(
-                                        color = Color(0xFF2EC4B6),
-                                        shape = RoundedCornerShape(20.dp)
-                                    ),
-                                contentAlignment = Alignment.Center
+
+        LazyColumn {
+            items(
+                games,
+                key = { Game -> Game.id },
+            ) { Game->
+                Card(
+                    modifier = Modifier
+                        .padding(20.dp, 0.dp, 20.dp, 0.dp)
+                        .background(color = Color(0xFFFDFFFC), shape = RoundedCornerShape(15.dp)),
+                ) {
+                    Row {
+                        Spacer(Modifier.width(10.dp))
+                        Column {
+                            Text(
+                                text = "Hoyoverse",
+                                fontSize = 20.sp,
+                                fontFamily = kdamFontFamily,
+                                color = Color(0xFF2EC4B6)
                             )
-                            {
+                            Text(
+                                text = "Фэнтези",
+                                fontSize = 12.sp,
+                                fontFamily = kdamFontFamily,
+                                color = Color(0xFFE71D36)
+                            )
+                            Spacer(Modifier.width(20.dp))
+                            Column {
                                 Text(
-                                    text = "Пошаговая",
-                                    color = Color(0xFFFDFFFC),
-                                    fontFamily = caveat,
-                                    fontSize = 20.sp
+                                    text = "Основные метки:",
+                                    fontSize = 14.sp,
+                                    fontFamily = kdamFontFamily,
+                                    color = Color(0xFF7F807E)
                                 )
+                                Column(
+                                    Modifier.padding(10.dp)
+                                ) {
+                                    Box(
+                                        modifier = Modifier
+                                            .width(107.dp)
+                                            .height(22.dp)
+                                            .background(
+                                                color = Color(0xFF2EC4B6),
+                                                shape = RoundedCornerShape(20.dp)
+                                            ),
+                                        contentAlignment = Alignment.Center
+                                    )
+                                    {
+                                        Text(
+                                            text = "Пошаговая",
+                                            color = Color(0xFFFDFFFC),
+                                            fontFamily = caveat,
+                                            fontSize = 20.sp
+                                        )
+                                    }
+                                    Spacer(Modifier.height(7.dp))
+                                    Box(
+                                        modifier = Modifier
+                                            .width(107.dp)
+                                            .height(22.dp)
+                                            .background(
+                                                color = Color(0xFF2EC4B6),
+                                                shape = RoundedCornerShape(20.dp)
+                                            ),
+                                        contentAlignment = Alignment.Center
+                                    )
+                                    {
+                                        Text(
+                                            text = "Ролевая",
+                                            color = Color(0xFFFDFFFC),
+                                            fontFamily = caveat,
+                                            fontSize = 20.sp
+                                        )
+                                    }
+                                    Spacer(Modifier.height(7.dp))
+                                    Box(
+                                        modifier = Modifier
+                                            .width(107.dp)
+                                            .height(22.dp)
+                                            .background(
+                                                color = Color(0xFF2EC4B6),
+                                                shape = RoundedCornerShape(20.dp)
+                                            ),
+                                        contentAlignment = Alignment.Center
+                                    )
+                                    {
+                                        Text(
+                                            text = "Стратегия",
+                                            color = Color(0xFFFDFFFC),
+                                            fontFamily = caveat,
+                                            fontSize = 20.sp
+                                        )
+                                    }
+                                }
                             }
-                            Spacer(Modifier.height(7.dp))
-                            Box(
-                                modifier = Modifier
-                                    .width(107.dp)
-                                    .height(22.dp)
-                                    .background(
-                                        color = Color(0xFF2EC4B6),
-                                        shape = RoundedCornerShape(20.dp)
-                                    ),
-                                contentAlignment = Alignment.Center
-                            )
-                            {
-                                Text(
-                                    text = "Ролевая",
-                                    color = Color(0xFFFDFFFC),
-                                    fontFamily = caveat,
-                                    fontSize = 20.sp
+                        }
+                        Column {
+                            Row {
+                                Spacer(Modifier.width(45.dp))
+                                Box(
+                                    modifier = Modifier
+                                        .width(130.dp)
+                                        .height(30.dp)
+                                        .border(
+                                            BorderStroke(2.dp, Color(0x80B0B0B0)),
+                                            shape = RoundedCornerShape(15.dp)
+                                        )
                                 )
+                                {
+                                    Text(
+                                        text = "Избранное: 23",
+                                        fontSize = 16.sp,
+                                        fontFamily = playfairdisplay,
+                                        color = Color(0xFFFF9F1C),
+                                        modifier = Modifier.align(Alignment.Center)
+                                    )
+                                }
+                                val size = 31.dp
+
+                                var isOrange by remember { mutableStateOf(false) }
+
+                                val buttonColor = if (isOrange) Color(0xFFFF9F1C) else Color.Gray
+
+                                Canvas(
+                                    modifier = Modifier
+                                        .size(30.dp)
+                                        .clickable(onClick = { isOrange = !isOrange })
+                                ) {
+                                    drawStar(
+                                        center = center,
+                                        radius = size.toPx() / 2,
+                                        color = buttonColor
+                                    )
+                                }
                             }
-                            Spacer(Modifier.height(7.dp))
-                            Box(
-                                modifier = Modifier
-                                    .width(107.dp)
-                                    .height(22.dp)
-                                    .background(
-                                        color = Color(0xFF2EC4B6),
-                                        shape = RoundedCornerShape(20.dp)
-                                    ),
-                                contentAlignment = Alignment.Center
-                            )
-                            {
+                            Row {
+                                Spacer(Modifier.width(10.dp))
+                                Text(
+                                    Game.name_game,
+                                    fontSize = 20.sp,
+                                    fontFamily = kdamFontFamily,
+                                    color = Color(0xFF7F807E),
+                                )
+                                Spacer(Modifier.width(10.dp))
                                 Text(
-                                    text = "Стратегия",
-                                    color = Color(0xFFFDFFFC),
-                                    fontFamily = caveat,
-                                    fontSize = 20.sp
+                                    text = "16+",
+                                    fontSize = 20.sp,
+                                    fontFamily = kdamFontFamily,
+                                    color = Color(0xFFE71D36),
                                 )
                             }
+                            Image(
+                                painter = painterResource(id = R.drawable.test),
+                                contentDescription = "Описание изображения",
+                                modifier = Modifier
+                                    .width(300.dp)
+                                    .height(138.dp)
+                            )
                         }
+
                     }
-                }
-                Column {
-                    Row {
-                        Spacer(Modifier.width(45.dp))
+                    Column {
+                        Box(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(5.dp)
+                                .background(brush = gradientBox, shape = RoundedCornerShape(10.dp))
+                        ) {
+                            Text(
+                                text = "История начинается с того, что два члена экипажа «Звёздного экспресса», Март 7 и Дань Хэн, доставляют редкие реликвии Герте, хозяйке космической станции. Внезапно рейнджеры пустоты из " +
+                                        "Легиона Антиматерии атакуют Космическую станцию и нападают на людей. К счастью, " +
+                                        "Март 7 и Дань Хэн, а также ведущий исследователь Аста " +
+                                        "и начальник службы безопасности Арлан смогли отбиться от них.",
+                                textAlign = TextAlign.Center,
+                                fontSize = 9.sp,
+                                fontFamily = ibmplexmono
+                            )
+                        }
+                        Spacer(modifier = Modifier.height(5.dp))
+                    }
+                    Row(
+                        modifier = Modifier
+                            .height(60.dp),
+
+                        ) {
                         Box(
                             modifier = Modifier
                                 .width(130.dp)
-                                .height(30.dp)
+                                .height(40.dp)
+                                .padding(5.dp, 5.dp, 0.dp, 0.dp)
                                 .border(
                                     BorderStroke(2.dp, Color(0x80B0B0B0)),
                                     shape = RoundedCornerShape(15.dp)
-                                )
+                                ),
                         )
                         {
                             Text(
-                                text = "Избранное: 23",
-                                fontSize = 16.sp,
+                                text = "Просмотры: 199",
+                                fontSize = 15.sp,
                                 fontFamily = playfairdisplay,
-                                color = Color(0xFFFF9F1C),
+                                color = Color(0xFFE71D36),
                                 modifier = Modifier.align(Alignment.Center)
                             )
                         }
-                        val size = 31.dp
-
-                        var isOrange by remember { mutableStateOf(false) }
-
-                        val buttonColor = if (isOrange) Color(0xFFFF9F1C) else Color.Gray
-
-                        Canvas(
-                            modifier = Modifier
-                                .size(30.dp)
-                                .clickable(onClick = { isOrange = !isOrange })
+                        Spacer(modifier = Modifier.width(70.dp))
+                        Button(
+                            onClick = { /*TODO*/ }, modifier = Modifier
+                                .background(
+                                    color = Color(0xFFE71D36),
+                                    shape = RoundedCornerShape(20.dp)
+                                ),
+                            colors = ButtonDefaults.buttonColors(
+                                containerColor = Color.Transparent
+                            )
                         ) {
-                            drawStar(center = center, radius = size.toPx() / 2, color = buttonColor)
+                            Text(
+                                text = "Подробности",
+                                textAlign = TextAlign.Center,
+                                fontFamily = playfairdisplay,
+                                fontSize = 16.sp,
+                                color = Color(0xFFFDFFFC)
+                            )
                         }
                     }
-                    Row {
-                        Spacer(Modifier.width(10.dp))
-                        Text(
-                            text = "Honkai Star Rail",
-                            fontSize = 20.sp,
-                            fontFamily = kdamFontFamily,
-                            color = Color(0xFF7F807E),
-                        )
-                        Spacer(Modifier.width(10.dp))
-                        Text(
-                            text = "16+",
-                            fontSize = 20.sp,
-                            fontFamily = kdamFontFamily,
-                            color = Color(0xFFE71D36),
-                        )
-                    }
-                    Image(
-                        painter = painterResource(id = R.drawable.test),
-                        contentDescription = "Описание изображения",
-                        modifier = Modifier
-                            .width(300.dp)
-                            .height(138.dp)
-                    )
-                }
-
-            }
-            Column {
-                Box(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(5.dp)
-                        .background(brush = gradientBox, shape = RoundedCornerShape(10.dp))
-                ) {
-                    Text(
-                        text = "История начинается с того, что два члена экипажа «Звёздного экспресса», Март 7 и Дань Хэн, доставляют редкие реликвии Герте, хозяйке космической станции. Внезапно рейнджеры пустоты из " +
-                                "Легиона Антиматерии атакуют Космическую станцию и нападают на людей. К счастью, " +
-                                "Март 7 и Дань Хэн, а также ведущий исследователь Аста " +
-                                "и начальник службы безопасности Арлан смогли отбиться от них.",
-                        textAlign = TextAlign.Center,
-                        fontSize = 9.sp,
-                        fontFamily = ibmplexmono
-                    )
-                }
-                Spacer(modifier = Modifier.height(5.dp))
-            }
-                Row(
-                    modifier = Modifier
-                        .height(60.dp),
-
-                ) {
-                    Box(
-                        modifier = Modifier
-                            .width(130.dp)
-                            .height(40.dp)
-                            .padding(5.dp, 5.dp, 0.dp,0.dp)
-                            .border(
-                                BorderStroke(2.dp, Color(0x80B0B0B0)),
-                                shape = RoundedCornerShape(15.dp)
-                            ),
-                    )
-                    {
-                        Text(
-                            text = "Просмотры: 199",
-                            fontSize = 15.sp,
-                            fontFamily = playfairdisplay,
-                            color = Color(0xFFE71D36),
-                            modifier = Modifier.align(Alignment.Center)
-                        )
-                    }
-                    Spacer(modifier = Modifier.width(70.dp))
-                    Button(
-                        onClick = { /*TODO*/ }, modifier = Modifier
-                            .background(
-                                color = Color(0xFFE71D36),
-                                shape = RoundedCornerShape(20.dp)
-                            ),
-                        colors = ButtonDefaults.buttonColors(
-                            containerColor = Color.Transparent
-                        )
-                    ) {
-                        Text(
-                            text = "Подробности",
-                            textAlign = TextAlign.Center,
-                            fontFamily = playfairdisplay,
-                            fontSize = 16.sp,
-                            color = Color(0xFFFDFFFC)
-                        )
-                    }
                 }
             }
         }
     }
+}
 
 fun DrawScope.drawStar(center: Offset, radius: Float, color: Color) {
     val path = androidx.compose.ui.graphics.Path()