为什么自定义计分板事项

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

  • 实时分数更新 即时反映消灭、取出旗帜或点入目标。
  • 支持多种格式3人组到大型场景游戏 不需要硬性模板
  • 加强观众的参与 通过动态图形,活时器,和团队的"特定统计".
  • 减少人为错误 数据输入通过平板电脑或裁判员设备自动进行。
  • 创造机会 显示赞助商的标志、事件名称和自定义的颜色方案。

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

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

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

设立直接项目

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

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

设计数据模型

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

  • 团队——名,标(图像 URL),花名册(与玩家的关系),主色.
  • 玩家——姓名,号码,团队(关系),可选统计(消除,死亡,命中).
  • 匹配——轮播,场外,起步时间,状态(待发,活地,竣工,加班),持续时间.
  • 分数——相配(关系),队(关系),分数值,时间戳(特别是用于活打分),分数事件类型(去除,取旗等).
  • 处罚——可选,追踪与玩家的违纪行为(轻微,主要,取消资格)并匹配关系.
  • 匹配事件——所有重大事件(分数变动,罚则,超时)的日志,用于重放和审计.

使用 Directus 构建的关系字段( many- to- one, many- to- many) 来链接这些收藏。 例如, Match 可以有两个团队( 或更多用于多团队格式) 和多个记分条目记录在不同时间 。 考虑添加一个 锦标赛 收藏, 如果您计划从同一个 Directus 实例中运行多个活动—— 每个锦标赛可以有自己的日程和规则 。

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

实时更新 Directus 实时

彩弹锦标赛动作快 — — 计分显示中的延迟会造成混乱。 Directus 。 实时模块 允许您订阅任何收藏中的更改。当裁判员更新分数或匹配状态时,前端通过WebSocket即时接收更新。

用来:

  • 在您的前端工程中安装 [[FLT: 0]] 。
  • 创建与您 Directus 实例的 WebSocket 连接 。
  • 订阅实时活动的“分数”或“分数”集合。
  • 聆听 [[FLT: 1], , 和 事件,并相应更新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] 或自定义的回击匹配。

对于喜欢轻量级解决方案的团队,考虑使用 阿尔卑斯山.js——它允许您在静态的HTML中添加被动行为,而无需一个构建步骤。这可以成为小锦标赛的理想,因为您想在其中编辑苍蝇上的分牌。

与 Directus SDK 组合

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

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

示例集成流程:

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

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

设计用户界面

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

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

使用高相相通的颜色(例如: 在暗色背景上使用白文本)并避免给屏幕打出分数 。 响应设计确保计分板在50英寸电视上和裁判平板上都好看。 对于电视显示,请考虑一个16:9的相距比, 并使用单一相距的相距; 对于移动裁判平板, 使用一个更紧凑的布局, 并用分表进行多个相距的相距 。

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

数据流是这样运作的:

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

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

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

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

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

高级: Livestreams 的分数盘重叠

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

执行步骤

跟着这个结构化的过程 从头到尾地建立你的分数板

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

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

第2步:设置直取收藏

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

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

您可以直接使用 Directus 生成的 REST 端点, 或者在您需要额外业务逻辑时构建自定义 API 端点( 例如计算多个事件的总和 ) 。 对于大多数锦标赛, 已建入的 REST 和 WebSocket 端点已经足够了 。 导演 SDK 以简化认证和实时订阅。如果需要服务器的“侧边”定时器同步,请创建 Directus 自定义端点,通过 cron 任务或流程每秒更新 。

第4步:开发前端组件

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

第5步: 以真实匹配测试

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

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

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

直接安全和权限

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

  • 署长——全面进入所有收藏品和设置(由锦标赛组织者使用).
  • 裁判人——写出分数,相配状态,罚则,和相配事件. 读取入球队,球员,和联赛的相接情况.
  • 公开——只读取分数,匹配(只有状态“活”或“完成”的),团队和玩家。没有写入权限 。

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

现场计分板的性能优化

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

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

成功执行提示

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

结论

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

进一步阅读时,请探讨 迪德鲁斯网站,该 APPA 锦标赛规则,以及实用的网页开发辅导,以建造实时仪表板 维克.js. 或 单 反应下届彩弹大赛将永远不相同