# 第 5 课：卡片名字与布局

> **本课目标**：给每种稀有度配上具体的卡片名字（小火龙、冰霜之狼、雷霆神龙……）。再把界面分区，让窗口整齐漂亮。
>
> **预计时间**：35~45 分钟
>
> **学完之后**：你能用数组管理一组"内容"，并用 `box()`/`color()` 让窗口有层次感。

---

## 0. 上课前先理理

### 从 "★ 稀有卡 ★" 到 "★ 稀有卡 ★ 冰霜之狼"

设计思路两步走：

```
1. 随机决定稀有度（这一步和第 3、4 课一样）
2. 从这一档的卡片数组里再随机选一张
```

### 卡牌表设计

| 稀有度 | 卡片名 | 张数 |
|--------|--------|------|
| 普通 | 小火龙、水跃鱼、绿草龟、小电鼠、土拨仔 | 5 |
| 稀有 | 烈焰飞龙、冰霜之狼、暗影豹、风暴鹰、水晶鹿 | 5 |
| 超稀有 | 雷霆神龙、凤凰王、深海巨兽 | 3 |

### 界面分区目标

```
┌────────────────────────────┐
│   [单抽]    [十连抽]        │  ← 顶部：操作区
├────────────────────────────┤
│                            │
│   ★ 稀有卡 ★               │  ← 中部：结果区（凹陷边框）
│         冰霜之狼            │
│                            │
├────────────────────────────┤
│   单抽：普通 0 稀有 1 超 0   │  ← 底部：统计区（灰色背景）
└────────────────────────────┘
```

### 这一课认识 2 个新朋友

| 名字          | 干什么                                       |
|---------------|---------------------------------------------|
| 多组数组       | 每档稀有度一个数组，下标随机选                 |
| `box()`        | 控件的边框样式（凹陷、凸起、扁平……）          |
| `color()`      | 控件的**背景色**（注意和 `labelcolor` 文字色 区分） |

---

## 1. 起步：先看现状

打开 `lesson_gui_5.cpp`。骨架是第 4 课结束的样子——但是变量 `info_box` 之后要改名 `stats_box`。先编译看看：

```bash
cmake -B build -DLESSON=5
cmake --build build && ./build/gacha5
```

### ✅ 检查点 1
- [ ] 和第 4 课一样：单抽、十连抽都能用，结果只有"普通/稀有/超稀有"

---

## 2. 步骤 1：定义三组卡片数组

### 🤔 先想一下
- 每档数组长度可以不一样吗？（可以！）
- 怎么从数组里"随机取一张"？

### ✏️ 在所有函数之外（include 下面）加（替换对应 TODO）：

```cpp
std::string normal_cards[5] = {
    "小火龙", "水跃鱼", "绿草龟", "小电鼠", "土拨仔"
};
std::string rare_cards[5] = {
    "烈焰飞龙", "冰霜之狼", "暗影豹", "风暴鹰", "水晶鹿"
};
std::string super_cards[3] = {
    "雷霆神龙", "凤凰王", "深海巨兽"
};
```

### ▶️ 编译运行

### ✅ 检查点 2
- [ ] 编译没报错（即使还没用到这些数组）
- [ ] 程序行为同前

---

## 3. 步骤 2：让单抽显示具体卡名

### 🤔 先想一下
- "普通卡数组有 5 张，要随机选一张"——表达式是？（答案：`normal_cards[std::rand() % 5]`）
- 超稀有数组只有 3 张，对应的取模数是？

### ✏️ 把 `draw_one_callback` 函数体**整体替换**成：

```cpp
void draw_one_callback(Fl_Widget *w, void *data) {
    int r = std::rand() % 100;
    std::string result = "";
    std::string card_name = "";

    if (r < 70) {
        result = "☆ 普通卡 ☆";
        card_name = normal_cards[std::rand() % 5];
        result_box->labelcolor(fl_rgb_color(128, 128, 128));
    } else if (r < 95) {
        result = "★ 稀有卡 ★";
        card_name = rare_cards[std::rand() % 5];
        result_box->labelcolor(FL_BLUE);
    } else {
        result = "★★★ 超稀有卡！！ ★★★";
        card_name = super_cards[std::rand() % 3];
        result_box->labelcolor(FL_RED);
    }

    // 拼成两行：稀有度 + 换行 + 卡片名
    std::string display = result + "\n     " + card_name + "\n";
    result_box->labelsize(24);
    result_box->label(display.c_str());
}
```

> 注意：暂时把 `info_box->label(...)` 拿掉了，下一步再统一处理统计行。

### ▶️ 编译运行

### ✅ 检查点 3
- [ ] 点单抽 → 看到两行：稀有度 + 卡片名
- [ ] 多点几次：同一档里的卡片名会随机变化

---

## 4. 步骤 3：让十连抽也显示卡名

### ✏️ 把 `draw_ten_callback` 里的 `for` 循环**整体替换**成：

```cpp
for (int i = 1; i <= 10; i++) {
    int r = std::rand() % 100;
    all += "第" + std::to_string(i) + "抽：";

    if (r < 70) {
        all += "普通  " + normal_cards[std::rand() % 5];
    } else if (r < 95) {
        all += "★稀有  " + rare_cards[std::rand() % 5];
        rare_count++;
    } else {
        all += "★★★超稀有  " + super_cards[std::rand() % 3];
        super_count++;
    }
    all += "\n";
}
```

只是在每个分支末尾把卡名拼了上去。

### ▶️ 编译运行

### ✅ 检查点 4
- [ ] 十连抽 10 行结果，每行都有卡名
- [ ] 同一档里卡名随机变化

---

## 5. 步骤 4：分区布局，让界面变好看 ⭐

现在界面看着像草稿。我们用 `box()` 和 `color()` 给它分区。

顺手做一件清理：把 `info_box` 改名 `stats_box`（语义更准——它显示的是统计而不是单次信息）。

### ✏️ 改 4 处

**(1) 全局变量改名**（替换对应 TODO）：

```cpp
Fl_Box *stats_box;
```
（删掉原来的 `Fl_Box *info_box;`）

**(2) 用编辑器**把整个文件里**所有 `info_box`** 替换成 `stats_box`（两个回调函数里都有用）。

**(3) 改窗口高度**：
```cpp
Fl_Window *window = new Fl_Window(420, 520, "抽卡世界 - 第5课");
```

**(4) 把 `result_box` 和原来的 `info_box` 创建代码换成新版（替换 main 里相关 3 段）**：

```cpp
result_box = new Fl_Box(20, 80, 380, 350, "点击按钮开始抽卡！");
result_box->labelsize(22);
result_box->align(FL_ALIGN_TOP | FL_ALIGN_LEFT);
result_box->box(FL_DOWN_BOX);          // ← 凹陷边框，像卡片

stats_box = new Fl_Box(20, 445, 380, 40, "等待抽卡...");
stats_box->labelsize(14);
stats_box->box(FL_FLAT_BOX);
stats_box->color(fl_rgb_color(230, 230, 230));   // ← 浅灰背景
```

也别忘了改按钮位置（让它们和新的窗口宽度匹配）：

```cpp
Fl_Button *btn1 = new Fl_Button(40, 15, 150, 45, "抽一张");
Fl_Button *btn10 = new Fl_Button(230, 15, 150, 45, "十连抽");
```

### 💡 新工具：`box()` 和 `color()`

```cpp
result_box->box(FL_DOWN_BOX);    // 边框样式：凹陷
stats_box->color(fl_rgb_color(230, 230, 230));   // 背景色
```

常用边框样式：

| 样式 | 效果 |
|------|------|
| `FL_NO_BOX` | 没有边框（默认） |
| `FL_FLAT_BOX` | 扁平、有背景 |
| `FL_UP_BOX` | 凸起 |
| `FL_DOWN_BOX` | 凹陷 |
| `FL_EMBOSSED_BOX` | 浮雕 |

⚠ **别混淆**：`color()` 是**背景色**，`labelcolor()` 是**文字色**。

### ▶️ 编译运行

### ✅ 检查点 5
- [ ] 中间是个**凹陷框**，结果显示在里面
- [ ] 底部是**灰底**的统计区
- [ ] 单抽 / 十连抽都还能用
- [ ] 整体看起来"像个游戏"了

🎉 **第 5 课通关！**

---

## 6. 玩一玩

1. 把三组卡片名全换成你自己的主题（宝可梦、数码宝贝、三国武将、星座……）。
2. 超稀有再加 2 张，**别忘了改取模数** `% 3` → `% 5`。
3. 把 `FL_DOWN_BOX` 改成 `FL_UP_BOX`、`FL_EMBOSSED_BOX` 试试。
4. 改窗口背景色：在 `Fl_Window` 创建后加 `window->color(fl_rgb_color(245, 245, 255));`。
5. **思考题**：如果数组长度从 5 改成 8，`rand() % 5` 不改会怎样？

---

## 7. 课后挑战（选做）

- **A. 图鉴按钮**：再加一个按钮 "图鉴"，点了把三组数组里所有卡名拼成长字符串显示出来。
- **B. 突出超稀有**：在单抽回调里，如果抽到超稀有就把 `result_box->box(FL_UP_BOX);`（凸起感）；其他档恢复 `FL_DOWN_BOX`。
- **C. 思考题**：现在两个回调里都有"判断 `r` → 选卡名"的相似代码。能写一个函数 `std::string get_card(int &rarity)`，让两个回调都调用它吗？（这是第 6 课会做的事，可以提前试）

---

## 8. 卡住了？常见小问题

| 现象 | 多半是 |
|------|-------|
| 数组越界崩溃 | `% N` 没和数组长度对齐 |
| 同档卡名总是同一个 | `rand() % N` 放错位置，或一次抽卡里调多次但漏写 |
| 编译报 `stats_box` 未定义 | 改名时漏了某处的 `info_box` |
| 文字看不见但背景能看到 | `labelcolor` 和 `color` 设成同色了 |
| 凹陷框看不见 | `result_box->box(FL_DOWN_BOX);` 没加 |

---

## 9. 偷看老师答案

```bash
cmake -B build -DLESSON=5 -DUSE_SOLUTION=ON
cmake --build build && ./build/gacha5
```

---

## 10. 下一课预告

第 6 课是**大作业**：把前面所有功能组合起来——加**金币系统**（每抽消耗金币）、**累计统计**、**重置/退出按钮**，做一个真正像样的抽卡游戏。

> 📝 学完记得在 `学习进度与状态-GUI.md` 里把第 5 课打勾。

**下一课**：`第06课-完整抽卡游戏.md`