# 社交与排行榜

社交模式将 stream 变为协作式团队体验。每位参与者贡献到共享团队分数 — 非常适合线下活动、团队建设、展会与社区互动活动。

## 社交模式如何工作

当 stream 上启用社交模式时：

- 每位玩家的分数会加入该 stream 的**团队总分**
- 实时记分板显示团队进度、参与人数、剩余时间与里程碑成就
- 玩家可以看到其他人同时游玩时集体分数的更新
- 达到分数里程碑会触发解锁弹窗，可选奖品图片与兑换码（在记分板上渲染为二维码）

## 设置记分板

记分板从 **Streams** 页面按 stream 配置。

1. 前往 **Streams**，找到要以团队模式运行的 stream
2. 打开 stream 的操作菜单并选择 **Scoreboard**

![Stream 菜单中的记分板操作](/img/streams/scoreboard-social.jpg)

3. 在 Scoreboard 配置模态中，将开关切换为 **Active** — 这会在 stream 上启用社交模式

![切换社交记分板为 Active](/img/streams/toggle-social.jpg)

4. 配置下方描述的各个部分

![编辑记分板分区](/img/streams/edit-layers-social.jpg)

5. 完成后点击 **Save**

模态还提供两个快捷操作：

![复制链接与打开记分板快捷操作](/img/streams/open-scoreboard-social.jpg)

- **Copy Link** — 将公开记分板 URL 复制到剪贴板
- **Open Scoreboard** — 在新标签页打开全屏记分板（仅当记分板为 Active 时可用）

### 1. 文案

- **Title** — 显示在记分板浮层顶部（例如活动名称）
- **Team Name** — 显示在团队徽标下方的分数卡片上
- **Scan to Play title / description**（可选）— 全屏「Scan to Play」二维码面板的自定义文案；留空使用默认值
- **Collect Player Name** — 启用后，玩家可在游戏后为社交最高分输入姓名。默认**关闭**。

:::tip
若 stream 已使用启用了 **Name** 字段的[线索收集](/zh/streams/lead-capture/)，该姓名会用于最高分，您无需启用 **Collect Player Name**。仅当您希望在未（或不通过）CTA 姓名字段的情况下出现记分板姓名提示时，才开启 Collect Player Name。
:::

<video autoplay loop muted playsinline preload="none">
  <source src="/vdo/streams/set-title-social.mp4" type="video/mp4" />
</video>

### 2. 主题颜色

- **Primary Color** — 用于重玩按钮与进度条
- **Secondary Color** — 用于分数光效与提交按钮

<video autoplay loop muted playsinline preload="none">
  <source src="/vdo/streams/set-theme-colors-social.mp4" type="video/mp4" />
</video>

### 3. 浮层素材

上传、用 AI 生成或从图库选择记分板浮层使用的四个视觉层：

- **Landscape Background**（1920×1080）— 记分板以横屏运行时显示
- **Portrait Background**（450×800）— 记分板以竖屏运行时显示
- **Team Frame**（1024×1024）— 分数面板周围的装饰框
- **Team Logo**（256×256，透明 PNG）— 您的团队徽标或徽章

<video autoplay loop muted playsinline preload="none">
  <source src="/vdo/streams/set-overlay-assets-social.mp4" type="video/mp4" />
</video>

### 4. 里程碑

最多添加 **5 个里程碑**，团队总分增长时解锁。每个里程碑：

- **Prize Name** — 达到里程碑时显示的标签
- **Milestone Score** — 解锁所需的团队分数（必须高于上一个里程碑，否则无法保存）
- **Redemption Code**（可选）— 玩家可用于领取奖品的代码；在记分板上渲染为二维码
- **Prize Image**（可选）— 在解锁弹窗中显示的图片

当团队跨越里程碑分数时，记分板播放彩纸效果并显示带奖品图片与二维码的解锁弹窗。

:::note
只有在 `/stream` 页面上游玩游戏的玩家才会看到 **Redeem** 按钮与里程碑奖品（奖品名称与奖品图片）。全屏记分板展示不显示单个奖品详情 — 仅显示里程碑进度条与供观众加入的「Scan to Play」二维码。
:::

<video autoplay loop muted playsinline preload="none">
  <source src="/vdo/streams/set-milestones-social.mp4" type="video/mp4" />
</video>

### 5. 显示分区

使用 **Display Sections** 选择实时全屏记分板上显示哪些面板。所有分区默认**开启**。

| 开关 | 显示内容 |
| ---------------------- | -------------------------------------------------- |
| **Score** | 团队总分 |
| **Players** | 参与人数 |
| **Time Left** | 距 stream 结束的倒计时 |
| **Score Progress** | 里程碑进度条 |
| **Top 10 Highscores** | Stream 的个人最高分 |

#### 轮播如何工作

- 启用时，团队 **Score** 面板保持可见
- **Time Left**、**Players** 与 **Score Progress** 共享空间并成对轮播（每次最多两个）
- **Top 10 Highscores** 始终占有**独立**幻灯片，以便列表有足够显示空间
- 需要多张幻灯片时，记分板约每 **6 秒**自动轮播

关闭不需要的分区可让投影更简洁 — 例如，无限时活动可隐藏 **Time Left**，或只想看团队总分时隐藏 **Top 10 Highscores**。

## 剩余时间 / 倒计时

记分板显示实时倒计时，显示距 stream 结束还剩多少时间。这由 stream 的 **Start Date**、**End Date** 与 **Timezone** 设置驱动 — 记分板模态中无需额外配置。

### 如何设置

1. 创建或编辑 stream 时，滚动到 **Schedule** 部分
2. 设置您希望活动结束的 **Start Date** 与 **End Date**
3. 为活动地点选择正确的 **Timezone**

Stream 激活后，记分板上的计时器会自动开始倒计时。

<video autoplay loop muted playsinline preload="none">
  <source src="/vdo/streams/set-timedate-social.mp4" type="video/mp4" />
</video>

### 计时器如何显示

倒计时格式根据剩余时间自适应：

| 剩余时间 | 显示格式 | 示例 |
| -------------- | ------------------- | ------------ |
| 不到 1 分钟 | `00:SS` | 00:42 |
| 不到 1 小时 | `MM:SS` | 12:35 |
| 不到 24 小时 | `HH:MM:SS` | 03:45:12 |
| 不到 30 天 | `Xd XXh` | 2d 14h |
| 30 天以上 | `Xmo Xd` | 1mo 5d |

计时器下方会根据 stream 时区显示情境标签：

- **Ending soon** — 剩余不到 60 秒
- **Ends this morning / afternoon / evening / tonight** — 在当天内结束
- **Ends May 30** — 在未来日期结束
- **Ended** — stream 结束时间已过

## 全屏排行榜展示

公开记分板页面专为线下活动投影设计。社交模式激活后，其 URL 为：

```
https://app.dailyplay.ai/stream/{orgSlug}/{streamSlug}/scoreboard
```

您也可以从 Scoreboard 模态中的 **Copy Link** 按钮获取此链接。

![全屏记分板按钮](/img/streams/full-screen-button-social.jpg)

### 排行榜功能

- **可配置显示分区** — 显示或隐藏 Score、Players、Time Left、Score Progress 与 Top 10 Highscores；启用的次要面板自动轮播（见[显示分区](#5-display-sections)）
- **自动轮换**竖屏与横屏布局，取决于显示方向
- **动画分数增长**（仅全屏）— 团队分数跳跃时，浮动「+X」指示器从分数上升，带分级效果。此动画仅出现在全屏记分板展示上，不出现在玩家游戏结束界面。
  - 小幅增长：绿色文字
  - 中等增长：蓝色文字带光效
  - 大幅增长：黄色文字带增强光效与更大尺寸
- **里程碑进度条** — 显示下一个里程碑，并在达到时庆祝。未达到的里程碑将奖品名称显示为 **"?"**，在团队分数跨过门槛前保持奖励隐藏。解锁后揭示实际奖品名称。
- **二维码** — 有两种不同的二维码体验：
  - **全屏记分板** — 显示单个「Scan to Play」二维码（横屏模式），编码 stream URL，让观众可用手机加入游戏。它**不**显示单个里程碑兑换码。
  - **玩家 stream 页面** — 完成游戏后，已解锁里程碑的玩家会看到 **Redeem** 按钮。点击后打开浮层，显示每个已解锁里程碑兑换码的二维码，以及奖品名称、奖品图片与可点击复制的代码徽章。
- **实时轮询** — 记分板每 10 秒刷新，无需手动重新加载

### 展示提示

- 在活动现场的大屏或投影仪上打开记分板 URL
- 按 **F11** 进入真正的浏览器全屏（无 UI 边框）
- 在手机或平板上横屏投影时，打开全屏也会尝试将设备锁定为横屏方向
- 将玩家游戏 URL 放在单独设备上（或通过二维码分享），以保持记分板展示简洁

## 用例

- **会议互动** — 与会者在手机上游玩，团队分数在舞台上显示
- **零售活动** — 店内顾客共同达成集体目标，为所有人解锁奖品
- **团队建设** — 将不同 streams 分配给不同团队以进行部门竞赛
- **产品发布** — 当社区达到分数里程碑时解锁揭晓内容