AI-Coding：2026世界杯实时看板, 支持AI聊天

world-cup-2026

2026 FIFA 世界杯开赛，周末一边看一边VIBE搭了一个纯静态、无后端的实时数据看板，开源在 GitHub。

在线体验： https://skyseraph.github.io/world-cup-2026/

先看一下效果

alt text

它能做什么

3D 地球仪：48 支参赛队标注在地球上，按小组着色，点击球队查看积分和战绩；今日赛事双方用金色弧线连接，点击弧线直接跳到比赛详情
实时赛程：覆盖最近 ±4 天比赛，点击任意场次展开完整时间线（进球 / 换人 / 黄红牌）
12 小组积分榜：每 30 分钟自动更新，完整积分 / 净胜球 / 近期状态
赛事预测：结合 DraftKings 赔率和积分数据生成胜负概率，带详细分析
AI 助手：内置 Claude 聊天，用你自己的 Anthropic API Key，Key 只存本地浏览器

中英文双语，一键切换。

技术架构

整个项目没有后端，没有构建工具，没有 npm install。

浏览器 ─── 读取 data/*.json ──── GitHub Pages（静态文件）
                                        ↑
                              GitHub Actions（每 30 分钟）
                                        │
                              sports-skills CLI
                              （ESPN API，无需 Key）

核心技术选型

层	选择	原因
3D 渲染	Three.js v0.165（CDN importmap）	无需打包，浏览器直接加载 ES Module
数据管道	GitHub Actions + Python	免费、定时、可写仓库
数据源	sports-skills（ESPN API）	无需注册，覆盖世界杯全量数据
AI	Anthropic Claude API	浏览器直连，用户自带 Key
部署	GitHub Pages	免费静态托管

为什么不用框架

纯 HTML + ES Modules，加载速度极快，也方便任何人 fork 后直接改。Three.js 通过 importmap 从 CDN 加载，页面打开就能用，没有任何构建步骤。

数据更新机制

1
2
3
4
# .github/workflows/fetch-data.yml
on:
  schedule:
    - cron: '*/30 * * * *'   # 每 30 分钟

Action 跑 Python 脚本，调用 sports-skills CLI 抓 ESPN 数据，写入 data/*.json，commit 后触发 Pages 重新部署。比赛期间数据延迟不超过 30 分钟。

3D 地球仪实现要点

地球仪基于 Three.js，核心是用经纬度坐标把球队标注到球面：

1
2
3
4
5
6
7
8
9
function latLonToVec(lat, lon, r = 1.02) {
  const phi = (90 - lat) * Math.PI / 180;
  const theta = (lon + 180) * Math.PI / 180;
  return new THREE.Vector3(
    Math.sin(phi) * Math.cos(theta) * r,
    Math.cos(phi) * r,
    Math.sin(phi) * Math.sin(theta) * r
  );
}

今日赛事连线用二次贝塞尔曲线生成弧线，拱起高度根据两点中点距球心的距离自动计算，视觉上有自然的弧度感：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
function makeArc(p1, p2, color) {
  const mid = p1.clone().add(p2).multiplyScalar(0.5);
  const lift = 1 + 0.35 * (1 - mid.length());
  mid.normalize().multiplyScalar(lift + 0.2);
  // 二次贝塞尔采样
  const pts = [];
  for (let t = 0; t <= 1; t += 0.02) {
    pts.push(
      p1.clone().multiplyScalar((1-t)*(1-t))
        .add(mid.clone().multiplyScalar(2*t*(1-t)))
        .add(p2.clone().multiplyScalar(t*t))
    );
  }
  return new THREE.Line(new THREE.BufferGeometry().setFromPoints(pts), ...);
}

AI 助手的实现细节

AI 聊天直接在浏览器调用 Anthropic API，system prompt 里注入了当前积分榜和今日赛程，所以 Claude 能基于实时数据回答问题。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
fetch('https://api.anthropic.com/v1/messages', {
  headers: {
    'x-api-key': localStorage.getItem('wc_api_key'),
    'anthropic-dangerous-direct-browser-calls': 'true',
    'anthropic-version': '2023-06-01',
    'content-type': 'application/json',
  },
  body: JSON.stringify({
    model: 'claude-haiku-4-5-20251001',
    system: `你是世界杯助手。当前积分榜：${standingsText}。今日赛事：${matchesText}`,
    messages: conversation
  })
})

Key 存在 localStorage['wc_api_key']，从不离开用户浏览器，GitHub Pages 服务器完全不接触它。

本地运行（3 步）

1
2
3
4
git clone https://github.com/skyseraph/world-cup-2026.git
cd world-cup-2026
python3 -m http.server 8080
# 访问 http://localhost:8080

手动刷新数据：

1
2
pip install sports-skills
python3 scripts/fetch_data.py

开源地址

GitHub： https://github.com/skyseraph/world-cup-2026

欢迎 Star / Fork，有问题提 Issue。世界杯结束后这套架构也可以复用到其他赛事。