用 FlipOff 把浏览器或电视变成复古翻牌显示屏（自定义…

需要免费、离线可用的网页版机械翻牌（split-flap）机场显示板，并想自定义消息、网格尺寸、配色或嵌入到其他页面时使用。

适用场景

解决思路

1. 克隆仓库并运行：git clone https://github.com/magnum6actual/flipoff.git，然后 cd flipoff；可直接 open index.html，或推荐用 python3 -m http.server 8080 本地服务后访问 http://localhost:8080（音频需要本地服务）。
2. 注意音频自动播放限制：浏览器会阻止自动播放，必须让用户先点击一次以启用 Web Audio API 上下文，之后每条消息切换时会自动播放声音。
3. 在 js/constants.js 中集中修改所有配置：GRID_COLS（每行字符数）、GRID_ROWS（行数）、SCRAMBLE_DURATION（每个翻牌乱序时长，毫秒）、STAGGER_DELAY（每个翻牌启动间隔，毫秒）、AUTO_ROTATE_INTERVAL（自动切换消息间隔，毫秒）、SCRAMBLE_COLORS、ACCENT_COLORS、MESSAGES。
4. 添加自定义消息：编辑 js/constants.js 中的 MESSAGES 数组，每条为纯字符串；文本会自动在网格中换行，短于网格会补空格，长于网格会被截断，长度需不超过 GRID_COLS × GRID_ROWS 个字符。
5. 修改网格尺寸：在 js/constants.js 中调整 GRID_COLS 与 GRID_ROWS，例如紧凑 16×4 滚动条、宽屏影院 40×6、竖屏信息亭 20×12；改完后下次页面加载会自动重新渲染翻牌。
6. 使用键盘快捷键：Enter/Space 下一条消息、Arrow Left 上一条、Arrow Right 下一条、F 切换全屏、M 切换静音、Escape 退出全屏。
7. 通过编程 API 控制：import Board from './js/Board.js'，new Board(document.getElementById('board-container'))，然后调用 board.setMessage('GATE CHANGE B12')、board.next()、board.previous()。
8. 用 MessageRotator 控制轮播：new MessageRotator(board, messages, AUTO_ROTATE_INTERVAL)，调用 rotator.start()、rotator.stop()、rotator.next()、rotator.previous()。
9. 用 SoundEngine 控制声音：new SoundEngine()，必须在用户手势后 await sound.init()，然后调用 sound.play()、sound.mute()、sound.unmute()、sound.toggle()。
10. 用 KeyboardController 绑定按键：new KeyboardController({ onNext, onPrevious, onFullscreen, onMute })，然后 kb.attach() 开始监听、kb.detach() 停止监听。
11. 以 iframe 嵌入：<iframe src="/flipoff/index.html" width="1280" height="400" style="border:none; background:#000;" allowfullscreen></iframe>。
12. 以内联方式只嵌入显示板：在页面放 <div id="flip-board"></div>，用 <script type="module"> 导入 Board、SoundEngine 和 constants.js 中的 MESSAGES、AUTO_ROTATE_INTERVAL，创建 board 与 sound，首次 click 时 await sound.init()，再用 setInterval 轮换 board.setMessage 并 sound.play()。
13. 自定义配色主题：在 js/constants.js 中修改 SCRAMBLE_COLORS 与 ACCENT_COLORS（如深蓝终端主题），并在 css/board.css 中覆盖 .tile 的 background-color、color、border-color。
14. 接入实时数据：用 fetch('/api/departures') 获取数据，拼接 `${data.flight} ${data.destination} ${data.gate}` 后 board.setMessage(message.toUpperCase()) 并 sound.play()，用 setInterval 定时刷新（如 30_000 毫秒）。
15. 轮播自定义促销消息：定义 promos 数组，用 setInterval 每 5000 毫秒调用 board.setMessage(promos[i % promos.length]) 与 sound.play() 并递增 i。
16. 在 React/Vue 中封装：用 useRef 保存容器与 board，useEffect 中 new Board(containerRef.current)，setInterval 轮换消息，清理时 clearInterval，返回 <div ref={containerRef} className="flip-board-container" />。
17. 排查常见问题：无声音需先用户交互；部署后无声需确保 flapAudio.js（base64）被正确服务并检查 MIME 类型；翻牌不动需确认 tile.css 已加载且无 JS 报错；小屏溢出需减小 GRID_COLS/GRID_ROWS 或加 CSS overflow: hidden；全屏失效需页面获得焦点；消息被截断需缩短或增大网格；CSP 阻止音频需加 media-src 'self' blob: data:；模块 CORS 报错需用本地服务器而非 file://。
18. 电视/信息亭部署：用 npx serve . 或 python3 -m http.server 提供静态服务，用 chromium-browser --kiosk --app=http://localhost:8080 自动全屏启动，并在 index.html 中加入鼠标空闲 3 秒后隐藏光标的脚本。

适用边界 · 注意事项

• 需要框架、npm 构建流程或复杂工程化时（FlipOff 是纯 vanilla HTML/CSS/JS，无构建步骤）。
• 无法让用户进行任何点击/交互的场景（Web Audio 自动播放会被浏览器阻止，声音无法启用）。
• 消息长度必须超过 GRID_COLS × GRID_ROWS 且不能增大网格或缩短文本时。