🎮 Cap 05: Perfil de Jogador (Compose UI)

🎯 Objetivo da Aula: Ao final desta aula, você sairá do mundo do “texto no console” e criará sua primeira interface visual. Você aprenderá a usar os componentes Text e Button para montar um Perfil de Jogador.

---

🏗️ Construindo o Projeto (Checklist Studio)

Para esta aula, vamos criar um projeto Android real! Siga o padrão:

1. Template: Empty Compose Activity.
2. Name: AppPerfil_SeuNome.
3. Package Name: br.com.curso.perfil.
4. Language: Kotlin.
5. Build Configuration: Kotlin DSL.

---

🧠 Fundamentos: A Teoria Traduzida

📖 Dicionário do Programador

• Compose: É o jeito moderno de desenhar telas. É como brincar de LEGO: você junta peças prontas para formar o app.
• @Composable: É uma etiqueta (anotação) que diz ao Android: “Essa função é um desenho”. Toda função de tela deve ter isso em cima.
• Preview: É a janelinha no Android Studio que mostra o desenho sem precisar ligar o celular.

🎨 Padrão PascalCase

No Compose, funções de interface devem começar com Letra Maiúscula:

• PerfilJogador() ✅
• perfilJogador() ❌

graph TD
    A[Componente: Text] --> B[Resultado Visual]
    C[Componente: Button] --> B

---

📖 Exemplo Passo a Passo: Sua Primeira Tela

1. Apague o código padrão que o Android Studio criou.
2. Crie sua própria função @Composable.
3. Use Column para colocar um item embaixo do outro.

package br.com.curso.perfil
 
import androidx.compose.runtime.Composable
import androidx.compose.material3.Text
import androidx.compose.foundation.layout.Column
 
@Composable
fun PerfilJogador() {
    Column {
        Text(text = "TREINADOR: Ash Ketchum", fontSize = 24.sp)
        Text(text = "NÍVEL: 15")
        Button(onClick = { /* Lógica futura */ }) {
            Text("Ver Pokémons")
        }
    }
}

---

🛠️ Prática Obrigatória 1: Crie um @Composable chamado StatusHub. Ele deve exibir três textos: “Vida: 100”, “Mana: 50” e “Estamina: 80”. Use cores diferentes para cada texto.

---

🛠️ Prática Obrigatória 2: Adicione um botão na sua interface chamado “Iniciar Partida”. Use a propriedade colors = ButtonDefaults.buttonColors(containerColor = Color.Green) para deixar o botão verde.

---

🔑 Gabarito Passo a Passo:

@Composable
fun StatusHub() {
    Column {
        Text(text = "Vida: 100", color = Color.Red)
        Text(text = "Mana: 50", color = Color.Blue)
        Text(text = "Estamina: 80", color = Color.Gray)
        
        Button(
            onClick = { },
            colors = ButtonDefaults.buttonColors(containerColor = Color.Green)
        ) {
            Text("Iniciar Partida")
        }
    }
}

📤 Instruções de Entrega (Microsoft Teams):

1. Envie o código da sua função @Composable.
2. Nomeie como: Gamer_SeuNome_Cap05.kt.
3. Submeta no canal de tarefas.

---

← Capitulo Anterior | Proximo Capitulo →