🎮 Cap 07: 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.

---

🏢 O Cenário Prático (Seu Desafio): Até agora, seu jogo só “falava” através do Logcat — um console de texto que só o programador vê. Chegou a hora de criar a primeira tela de verdade! Seu desafio é montar a Tela de Perfil do Jogador: exibir o nome e a classe do seu personagem e adicionar um botão de ação (como “Atacar” ou “Curar”) que o jogador possa realmente tocar na tela.

---

🏗️ 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: AppPokedexMestre_SeuNome.
3. Package Name: br.com.curso.pokedex.
4. Language: Kotlin.
5. Build Configuration: Kotlin DSL.

💡 Este projeto, AppPokedexMestre_SeuNome, é o projeto único do curso: vamos evoluí-lo aula após aula, do Cap 07 até o Cap 22.

---

🧠 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

---

📦 Imports Necessários

Antes de copiar os códigos abaixo, adicione estes imports no topo do seu arquivo .kt:

import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.sp

---

📖 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.pokedex

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_Cap07.kt.
3. Submeta no canal de tarefas.

---

⬅️ Voltar para a Home

⬅️ Anterior Próximo ➡️