# LineFunQueue 微信小程序客户端

## 项目简介

LineFunQueue是一款面向排队场景的微信小程序，提供多种互动小游戏，帮助用户在排队等待过程中消遣时间、增进社交互动。

产品采用"轻交互、重线下沟通"理念，鼓励用户在现实场景中进行面对面互动。主要游戏包括"海龟汤"等解谜类游戏，由主持人引导玩家参与。

## 技术架构

- 前端框架：Taro 4.x + React + TypeScript
- 构建工具：Vite
- CSS预处理器：Sass
- 状态管理：React Hooks
- 接口请求：Taro.request
- 云开发：微信云开发、云函数

## 目录结构

```
client/
├── config/              # 项目配置文件
├── src/                 # 源代码
│   ├── app.config.ts    # 应用配置
│   ├── app.scss         # 全局样式
│   ├── app.ts           # 应用入口
│   ├── index.html       # HTML模板
│   ├── assets/          # 静态资源
│   ├── components/      # 通用组件
│   │   ├── base/        # 基础组件
│   │   ├── game/        # 游戏相关组件
│   │   └── room/        # 房间相关组件
│   ├── constants/       # 常量定义
│   ├── hooks/           # 自定义Hooks
│   ├── interfaces/      # 类型定义
│   ├── pages/           # 页面
│   │   ├── game-plaza/  # 游戏广场
│   │   ├── login/       # 登录页
│   │   ├── game-detail/ # 游戏详情页
│   │   ├── room/        # 房间页面
│   │   │   ├── create/  # 创建房间
│   │   │   └── join/    # 加入房间
│   │   ├── games/       # 游戏页面
│   │   │   └── turtle-soup/ # 海龟汤游戏
│   │   │       ├── host/   # 主持人视图
│   │   │       └── player/ # 玩家视图
│   │   └── profile/     # 个人中心
│   ├── services/        # 服务
│   │   ├── api.ts       # API接口
│   │   ├── cloud.ts     # 云开发服务
│   │   └── game.ts      # 游戏服务
│   ├── store/           # 状态管理
│   ├── styles/          # 样式文件
│   └── utils/           # 工具函数
└── package.json         # 依赖配置
```

## 主要功能

1. 游戏广场：浏览可玩游戏列表，支持分类和搜索
2. 创建房间：主持人创建游戏房间，设置游戏参数
3. 加入房间：玩家通过房间码加入游戏
4. 等待房间：展示房间信息和已加入玩家，设置游戏配置
5. 游戏进行：主持人和玩家各自有不同的游戏界面和交互方式
6. 游戏历史：查看历史游戏记录
7. 个人中心：用户信息管理

## 关键组件

1. `GameCard`：游戏卡片组件，用于展示游戏缩略信息
2. `Button`：自定义按钮组件，支持多种样式和状态
3. `RoomCodeInput`：房间码输入组件，提供直观的输入体验
4. `PlayerAvatar`：玩家头像组件，展示玩家状态和角色

## 页面说明

### 游戏广场
- 功能：展示全部游戏，支持分类筛选和搜索
- 技术要点：使用ScrollView实现横向分类Tab和纵向游戏列表，下拉刷新

### 游戏详情
- 功能：展示游戏详细信息，包括规则、所需人数、预计时长等
- 技术要点：支持创建房间和分享

### 创建房间
- 功能：主持人创建游戏房间，设置游戏参数
- 技术要点：表单验证，主题和难度选择

### 加入房间
- 功能：玩家通过房间码加入游戏
- 技术要点：自定义房间码输入组件，扫码加入

### 等待房间
- 功能：展示已加入玩家，进行游戏准备
- 技术要点：房间信息实时更新，准备状态同步

### 游戏页面
- 功能：根据不同游戏类型和角色提供不同的游戏体验
- 技术要点：主持人和玩家视图分离，游戏状态管理

## 开发指南

### 环境准备
1. Node.js v16+
2. pnpm 8+
3. 微信开发者工具

### 安装依赖
```bash
pnpm install
```

### 开发模式
```bash
# 微信小程序
pnpm dev:weapp
```

### 生产构建
```bash
pnpm build:weapp
```

### 开发新组件
1. 在 `src/components` 目录下创建组件文件夹
2. 创建 `index.tsx` 和 `index.scss` 文件
3. 导出组件并在需要的地方引用

### 开发新页面
1. 在 `src/pages` 目录下创建页面文件夹
2. 创建 `index.tsx`、`index.scss` 和 `index.config.ts` 文件
3. 在 `app.config.ts` 中添加页面路径

## 注意事项

1. API接口地址需要在开发环境和生产环境分别配置
2. 云开发环境ID需要替换为实际项目的环境ID
3. 微信开发者工具中需要开启ES6转ES5、增强编译等功能
4. 测试时建议使用体验版或真机调试