# 麻将直播叠加UI系统

这是一个用于麻将直播的浏览器叠加层系统，可以在视频流上显示玩家信息、分数、胡牌动画等元素，并通过控制面板进行实时控制。

## 功能特点

- **视频背景支持**：可以播放URL视频、本地视频或设备捕获
- **玩家信息显示**：四个玩家的姓名、分数、颜色和位置
- **胡牌动画**：显示番种、符数和得点，并有分数变动动画
- **本场与立直棒**：记录并显示当前场次信息
- **听牌提示**：高亮显示听牌玩家
- **实时控制面板**：可通过单独窗口控制所有显示内容
- **可定制样式**：调整颜色、透明度、字体大小等

## 文件结构

- `index.html` - 叠加层主页面，显示视频和UI元素
- `control.html` - 控制面板，用于操作叠加层
- `style.css` - 样式文件
- `app.js` - 核心逻辑和事件处理
- `README.md` - 项目说明

## 快速开始

### 本地运行

1. 直接在浏览器中打开 `control.html` 文件
2. 点击「打开叠加层」按钮，会打开一个新窗口显示叠加层
3. 使用控制面板上的各种功能来控制叠加层显示

### 在OBS中使用

1. 启动OBS Studio
2. 添加「浏览器」来源
3. 设置URL为 `file:///D:/TraeProject/TestWebSite/index.html`（根据实际路径修改）
4. 设置合适的宽度和高度（建议1920x1080）
5. 然后在另一个浏览器窗口中打开 `control.html` 进行控制

## 事件通信协议

系统使用 `postMessage` API 在控制面板和叠加层之间通信，支持以下事件类型：

### 1. 更新玩家信息
```json
{
  "event": "update_player",
  "player_index": 0,
  "name": "张三",
  "score": 25000,
  "color": "rgba(255, 100, 100, 0.6)",
  "is_tenpai": false
}
```

### 2. 胡牌事件
```json
{
  "event": "win",
  "winner": 1,
  "losers": [0, 2, 3],
  "han": 3,
  "fu": 40,
  "points": 8000,
  "is_tsumo": true,
  "text": "三暗刻 自摸"
}
```

### 3. 调整分数
```json
{
  "event": "adjust_score",
  "player_index": 2,
  "delta": -1500
}
```

### 4. 设置听牌
```json
{
  "event": "set_tenpai",
  "player_index": 0,
  "is_tenpai": true
}
```

### 5. 设置本场与立直棒
```json
{
  "event": "set_honba_riichi",
  "honba": 1,
  "riichi_sticks": 2
}
```

### 6. 设置样式
```json
{
  "event": "set_style",
  "player_index": 0,
  "opacity": 0.6,
  "font_size": 18
}
```

### 7. 设置视频源
```json
{
  "event": "set_video_source",
  "src": "https://example.com/video.mp4"
}
```

## 自定义和扩展

### 修改样式
- 可以编辑 `style.css` 文件来自定义界面外观
- 支持调整位置、颜色、透明度、字体等

### 添加功能
- 可以在 `app.js` 中扩展事件处理函数
- 支持添加新的事件类型和处理逻辑

## 浏览器兼容性

- Chrome 90+
- Edge 90+
- Firefox 88+
- Safari 14+

## 注意事项

- 为了获得最佳体验，建议使用Chrome或Edge浏览器
- 在OBS中使用时，请确保本地文件路径正确
- 对于远程视频源，请确保视频允许跨域访问
- 如果需要在不同设备间控制，请考虑实现WebSocket服务器端