为什么自定义的记分牌事项

在彩弹方面,比赛速度快,决定数秒就成。Off the shelf计分牌通常为传统运动设计,如篮球或足球,缺乏彩弹独特比赛模式所需的灵活性。定制系统提供:

  • Real 时间分数更新,反映淘汰,旗下捕获,或点 基于目标即时.
  • 支持多种格式——从3 ⁇ man团队到大型情景游戏——不强制硬模板.
  • ]通过动态图形,实时器,以及团队XQ特异性统计器,增强观众的接触[.
  • 通过平板电脑或裁判员设备将数据输入自动化,从而减少人为错误.
  • 带给赞助商的标志,事件名称和自定义颜色方案的机会[.

使用自定义的解决方案,您也可以拥有数据。 之后您可以分析匹配历史、玩家表现和联赛趋势的功能 — 某些无法使用一次性纸单或封闭的专有系统。 像Directus这样的现代无头CMS不仅可以做到,而且可以跨事件重复。

利用Directus为您的分数板后端服务

Directus 是开源无头的CMS, 充当您计分板应用程序的强大后端。 它为管理员提供了一个干净, 方便用户的界面, 管理团队, 匹配, 和分数而不写单行代码 。 它的 REST 和 GraphQL API 结合实时 WebSocket 支持, 使它成为了活计分板系统的理想选择 。

设立直接项目

可以在自己的服务器(自主控)上运行Directus,也可以使用Directus Cloud服务来管理经验。对于比赛的设置,本地网络上自我托管或许更可取,以避免空闲。请遵循这些步骤 :

  1. 通过 Docker 或直接节点部署安装 Directus 。 [[FLT: 0]] 官方快速启动指南 [[[FLT: 1]] 以分钟为单位概述了进程 。
  2. 配置您的数据库( PostgreSQL, MySQL, SQLite - SQLite 是离线使用的理想) 。
  3. 设置管理员用户, 并为您的锦标赛创建一个项目 。
  4. 如果您计划使用WebSockets进行即时分数更新, 请启用“ 重时” 模块 。

设计数据模型

您的计分板数据计划应该反映您的锦标赛结构。 在 Directus 中创建收藏( 表) :

  • 团队——名称,标志(图像 URL),名册(与玩家的关系),主色.
  • layers ——名称,号码,团队(关系),可选统计(消除,死亡,命中).
  • 机器[]——圆形,场,开始时间,状态(待发,活,完,加班),持续时间.
  • 分数 ——对局(关系),队(关系),分数值,时间戳(特别是用于直播评分),评分事件类型(消除,国旗捕获等).
  • 处罚——可选,追踪与玩家的违纪行为(轻微,主要,取消资格)并匹配关系.
  • Match Events——所有重大事件(分数变化,罚则,超时)的日志,用于重播和审计.

使用 Directus 构建的关系字段( many ⁇ to ⁇ one, many ⁇ to ⁇ many) 来链接这些收藏。 例如, Match 可以在不同的时间录制两个团队( 或更多多团队格式) 和多个分数条目。 如果您计划从同一个 Directus 实例中运行多个事件, 请考虑添加一个 [FLT: 0] [FLT: 1] 集合 。

设定权限, 以便只有经认证的裁判员才能写分, 而公共记分牌前端只需要读取最新数据。 您也可以创建“ 记分员” 角色, 并且只使用有限的写入匹配状态和分数 。

实时更新 Directus 实时

彩弹锦标赛动作迅速 — 分数显示中的延迟会制造混乱。 Directus 的 [[FLT: 0]] realtime 模块 [[[FLT: 1]] 允许您订阅任何收藏中的更改。 当裁判更新分数或匹配状态变化时, 前端会立即通过 WebSocket 接收更新 。

用它来:

  • 在您的前端工程中安装 [[FLT: 0]] 。
  • 创建与您 Directus 实例的 WebSocket 连接 。
  • 订阅实时活动的“分数”或“分数”集合。
  • 聆听 , ,和 事件,并相应更新UI.

这种方法可以消除投票需求,并确保每个观看计分板的设备保持同步. 对于多个同时匹配的大赛,考虑使用被标注在具体匹配ID上的WebSocket频道来减少带宽.

深潜: WebSocket 连接管理

当建立强健的记分牌时, 处理连接会轻而易举地下降。 请订阅 WebSocket 客户端的 [[FLT: 4] 和 [[FLT: 5] 事件。 在断开时, 执行指数回转连接—— 启动1秒延迟, 并双倍重达30秒。 Directus 实时模块默认会发送心跳; 如果您错过3秒心跳, 假设连接丢失是安全的。 在记分牌上显示一个小的“ 连接丢失” 指示器, 工作人员知道检查网络。 如果 WebSocket 仍然在下, 前端可以每几秒返回到 REST API 投票 。

构建前端显示

前端是玩家,裁判和观众实际看到的。你可以把它建设成一个网络应用程序,一个专用的平板界面,甚至一个大型屏幕仪表板。

选择框架

任何现代JavaScript框架(React, Vue, Svelte, 甚至vanilla JS)都会奏效。 如果您的联赛工作人员是非技术性的, 简单的 HTML + CSS 页面, 包含一个小脚本, 可能很容易。 对于更高级的交互, 与 Directus SDK 的对应是一个坚实的选择。 Vue 3 及其组成 API 也与使用 [[FLT: 6] 的实时数据或自定义的对应数据配对 。

对于喜欢轻量级解决方案的球队,考虑使用Alpine.js[——它允许您在静态HTML中添加被动行为而不附加一个积分阶段,这对小联赛来说是理想的,因为您想在苍蝇上编辑积分牌.

与 Directus SDK 组合

Directus 既提供 REST 客户端,又提供实时客户端。对于记分牌,您通常会:

  • 使用REST API来装入初始匹配数据和团队信息.
  • 切换到 WebSocket 订阅以进行实时更新.
  • 设计UI以不闪烁方式更新分数( CSS transitions help) 。

示例集成流程 :

  1. 认证前端( 如果需要) 或使用只读 API 令牌的 。
  2. 从 Directus 获取当前匹配列表 。
  3. 每一场活动比赛,显示两队及其目前的成绩.
  4. 订阅“分数”收藏的更改,并重新提交分数显示。

为了保持UI的速成,批量分数更新:如果多个分数事件在几毫秒内出现,使用解跳状态更新(例如请求AnimationFrame或100ms debuscout)将其组合成单个渲染.

设计用户界面

明晰是至高无上,良好的记分牌布局包括:

  • 团队名称(大,对比的颜色).
  • 分数(非常大,从距离看很容易读取——初级分数最少80px字体).
  • 匹配计时器( 计时器或过期时间) 。
  • “状况”指标(例如“铺设”、“碎块”、“最后”)。
  • 可选:消除计数器或杀死个人统计数据的死亡率。

使用高相近的颜色(例如,在暗色背景上使用白文本),避免对屏幕进行擦拭. 响应设计确保计分板在50英寸电视机和裁判平板机上都好看. 对于电视显示,考虑一个16:9的宽比,并采用单一的匹配视图;对于移动裁判屏幕,使用一个更紧凑的布局,并配有多个匹配的标签.

显示计分器、计时器和匹配状态

数据流是这样运作的:

  • 裁判员通过移动形式输入得分(或消除事件),POST请求会转到Directus API.
  • Directus保存记录,并通过WebSocket广播“创建”活动。
  • 前端接收事件,更新其本地状态,并重新交回分数.
  • 定时器可以处理客户端 \\ 使用本地时钟 或服务器\ \ 与 Directus 字段进行启动/ 结束时间 。 为了准确性, 请使用服务器\ 侧方法: 当匹配开始时, 裁判员设置 [[ FLT: 7] 字段, 前端则从此计算剩余时间 。 服务器也可以通过 Directus 流或一个小自定义端点每秒更新一个 [ [ FLT: 8] 字段 。

对于匹配状态,让裁判员将Directus(例如,从“设置”改为“玩 ” ) 的地位域改为“完成 ” 。 一个常见的规律是,对裁判员设置一个“控制面板”视图,并按按钮开始/停止计时器、加分和计时。 将此构建为需要认证的单独页面-使用Directus的内建-基于作用的-保护权限。

自定义记分板系统的关键特性

超越基本,考虑这些高级的特性,使你的联赛突出:

  • 多键匹配视图 — 如果您的联赛运行同时的球场, 计分板可以显示所有活动匹配, 或者允许在球场之间切换。 使用带有 2x2 或 3x2 面板的网格布局来进行多位置的显示 。
  • 重放或慢放 — 不是对计分板本身, 但数据层可以支持“ 取消” 动作( 存储历史) , 这样您就可以校正错误。 执行一个带有时间戳的计分更改日志; 控制面板可以包含一个“ 取消最后” 按钮, 以返回最近的事件 。
  • 赞助商集成[]-在侧边栏或匹配之间旋转赞助商的标志。使用Directus集,用于“赞助商”,并带有图像字段和排序顺序。前端可以每30秒显示随机赞助商,也可以在勾选器中显示它们。
  • 流线的公用API ——如果你在网上播放联赛,就用iframe或自定义的RTMP嵌入积分板覆盖. OBS等许多流线工具可以捕捉浏览器窗口;设计有透明背景的积分板,从而覆盖游戏的种子.
  • 纸张备份模式——即使有数字系统,也总是有打印的记分卡和笔。此外,创建简单的离线可倒置页面,在网络返回时将分数存储在本地Storage和同步中。

高级: Livestreams的记分板重叠

如果您计划用模拟流线来进行比赛, 请创建一个单独的 HTML 页面, 优化 OBS 覆盖。 取消所有背景, 使用绝对定位, 并曝光 CSS 变量的团队颜色和分数, 以便流线组可以轻松调整它们。 使用透明 [[ [FLT: 9]] 。 将此页面作为浏览器源嵌入 OBS , 并将随分数变化而实时更新 。

执行步骤

跟着这个结构化的过程,从头到尾地构建你的记分牌。

步骤1:确定比赛规则和评分

在写入代码之前, 文档精确的分数如何工作。 点需要触摸旗帜吗 ? 是否有一条仁慈规则? 加班关系是如何解决的 ? 此规则将决定您的数据模型 。 例如, 如果消除点数计算, 您需要为消除事件单独收集。 还要定义时限、 罚分扣减以及诸如突然死亡等特殊情形 。

步骤2:设置直线收藏

登录到您的 Directus 项目并创建前面概述的收藏。 添加验证规则, 例如, 分数必须是非 {负整数。 配置“ refeere” 角色的权限, 允许写入分数和匹配状态, 而“ 公用” 角色( 前端使用) 只能读作 {> 。 如果隐藏一些字段( 如玩家联系信息) , 请使用 Directus 的 字段 级别权限 。

步骤3:建立 API 端点或使用 Directus SDK

也可以直接使用 Directus 生成的 REST 端点, 或者在您需要额外业务逻辑时构建自定义的 API 端点( 例如计算多个事件的总和 ) 。 对于大多数锦标赛, 已建的 REST 和 WebSocket 端点都足够了 。 使用 [[FLT: 0]] Directus SDK [[FLT: 1]] 简化认证和实时订阅。 如果您需要服务器%side 时间器同步, 请创建 Directus 的自定义端点, 每秒通过一个 cron 任务或一个流程更新 [[FLT: 11] 。

步骤4: 开发前端组件

为观众创建显示页面,为裁判创建控制面板。保留只读取显示视图,并聚焦大而清晰的元素。控制面板可以更紧凑的按键和表格。使用CSS动画来改变分数(例如,在分数递增时短暂闪烁)。对于控制面板,请考虑使用一个带有大按钮的移动首发设计,即使戴手套也能轻松地被调用。

步骤 5: 以真实匹配进行测试

运行练习与担任裁判和玩家的志愿者匹配。 模拟各种方案: 快速分数变化、 多字段、 罚则呼叫和网络问题。 请检查 WebSocket 是否在连接下降时自动重联。 测试取消功能( 如果执行) , 并确保在匹配结束后不能更改最终分数 。 同时测试离线倒计时: 解开网络并核实计分板是否仍然显示最后已知分数, 控制面板是否可排队更改以待补 。

步骤6:部署和培训工作人员

在本地服务器或云端主机上部署前端。 对于离线事件, 运行 Directus 和前端的本地笔记本电脑, 并带有 WiFi 热点。 请使用 Docker 编译器将 Directus 和轻量级网络服务器( 如 Nginx 或 Caddy) 捆绑起来。 训练裁判员如何使用控制面板—— 尽可能简单: 一次敲击以加分, 一次按键以启动/ 停止计时器。 打印快速的参考卡。 并在纸张手动系统中训练一个备用计分器, 以防系统完全故障 。

直接的安全和权限

由于计分板是一个被多个角色访问的直播系统,所以安全性至关重要. Start 由创建三个Directus角色开始:

  • 管理员[——完全进入所有收藏和设置(由锦标赛组织者使用).
  • Referee ——写入分数,匹配状态,罚则,以及匹配事件. 读入参赛队伍,球员,以及联赛的参赛权限.
  • public——只读到分数,比对(只有状态"活"或"完"的),球队,以及球员的进入. 无写入.

使用 Directus 的许可系统在收藏级别执行这些功能。 对于额外的安全性, 当控制面板只用于特定的平板时, 请限制 IP 地址的裁判访问。 在 Directus 实例上启用 HTTPS , 特别是当您将其暴露到互联网上进行流线覆盖时。

现场计分板的性能优化

锦标赛可能同时进行数十场比赛。 为了让 WebSocket 种子响应:

  • 只订阅经常更改的收藏(例如和]]),避免订阅静态收藏,如,除非它们在活动期间更新。
  • 使用 Directus 的过滤参数只订阅相关记录。 例如, 使用 [[FLT: 15] ] 的过滤器来订阅, 以减少噪音 。
  • 前端,解析UI更新. 如果多个得分事件在同一动画框架内到达,则将其分批为单个DOM更新.
  • 浏览器本地Storage中的缓存团队名称和标志,
  • 对于非常大的联赛(百名球员),贴补球员的STAT并按要求加载.

成功执行提示

  • 保持网络简单. 使用一个带适当带宽的单一WiFi网络. 避免连接公共设备; 使用专用平板来裁判. 考虑使用5GHz网络来降低干扰.
  • 缓存初始数据. 启动时将所有团队名称,匹配时间表和标志装入前端,以便一个 WebSocket 退出不会立即中断显示.
  • 使用倒置. 拥有一个静态的HTML页面,作为最后手段使用人工输入字段,同步到本地的JSON文件,以后可以上传.
  • 测试定时器的准确性. 如果使用服务器的%] 边定时器, 请确保您的 WebSocket 信件包含精确的服务器时间, 以避免设备之间的漂移。 或者, 在客户端上使用 方法, 以更精确的间隔 。
  • 考虑可访问性. 对视障观众使用大字体和高对比度. 为匹配开始/结束等重要事件提供音频反馈(蜂鸣器). 使用区域为屏幕阅读器用户宣布分数变化.
  • 动力计划. 所有设备应全部充电,并有电池和动力条的备份,尽可能在UPS上运行计分板笔记本电脑.
  • 文档您的数据模型. 保存一个收藏和关系图,以便未来的锦标赛组织者可以轻松修改系统.

结论

以Directus为基础的定制计分牌系统将彩球锦标赛从混乱的手工计分转换成专业的,有参与的经验。 通过拥有数据模型和实时更新,你获得了适应任何规则的完全灵活性,同时让球员和观众随时了解比赛的每秒。 通过这里概述的步骤——从数据模型到部署——你可以创建一个计分牌,在联赛日可靠运行,并让场上所有人印象深刻。

欲进一步阅读,请探索Directus网站,APPA锦标赛规则[,以及实际的网页开发辅导,关于用Vue.js或反射建造实时仪表板的网页开发辅导. 您的下届彩弹锦标赛将永远看起来不相同.