Tạo ra một hệ thống bảng điểm tuỳ chỉnh cho cuộc thi vẽ bóng

Tại sao bảng ghi chép được tùy chỉnh

Trong bóng sơn, các trận đấu rất nhanh và quyết định sẽ diễn ra trong vài giây.

Cập nhật điểm ảnh thật phản ánh mục tiêu loại trừ, thu cờ, hoặc chỉ mục tiêu dựa trên phương pháp tính toán của người dân ngay lập tức.
Hỗ trợ định dạng nhiều- từ 3 đội bóng đến những trận đấu kịch bản lớn mà không cần phải có một khuôn mẫu cứng nhắc.
Tăng cường sự tham gia của khán giả thông qua đồ họa động, đồng hồ hẹn giờ trực tiếp, và đội đặc biệt của chúng tôi.
Lỗi của con người đã giảm Bằng cách tự động chuyển dữ liệu vào bằng máy tính bảng hoặc thiết bị trọng tài.
Cơ hội đóng dấu để hiển thị các logo do thám, tên sự kiện và bộ màu riêng.

Với một giải pháp tùy chỉnh, bạn cũng có thể sở hữu dữ liệu. sau đó bạn có thể phân tích lịch sử, hiệu suất người chơi, và xu hướng giải đấu - một điều gì đó không thể với tờ giấy sử dụng hoặc hệ thống đóng cửa. một hệ thống không đầu như Directus hiện đại làm cho điều này không chỉ có thể mà có thể lặp lại thông qua các sự kiện.

Name

Trực tiếp là một mã nguồn mở không đầu (CMS) hoạt động như một hậu phương mạnh mẽ cho ứng dụng bảng điểm của bạn. Nó cung cấp một giao diện sạch, thân thiện với người dùng cho các nhà quản lý để quản lý các đội, khớp và điểm mà không cần viết một dòng mã duy nhất. Nó là RTET và MQL APIs, kết hợp với hỗ trợ mạngSoet thời gian thực, tạo cho nó một sự lựa chọn lý tưởng cho một hệ thống bảng ghi trực tiếp.

Thiết lập một dự án chỉ đạo

Bạn có thể chạy Chỉ thị trên máy chủ của bạn (tự động chạy) hoặc sử dụng dịch vụ Chỉ điểm Mây cho một kinh nghiệm quản lý. Đối với một cuộc thi đấu, tự lập lập mạng lưới địa phương có thể được thích hơn để tránh sự dễ dàng. Hãy theo dõi những bước này:

Cài đặt Chỉ thị qua Docker hoặc một cuộc triển khai trực tiếp nút.js. Hướng dẫn bắt đầu nhanh chính thức Sắp xếp quá trình trong vài phút.
Cấu hình cơ sở dữ liệu (Biểu đồ tần xuất, đường dẫn, đường dẫn cấu hình X)
Thiết lập một người dùng quản trị và tạo ra một dự án đặc biệt cho giải đấu của bạn.
Hãy bật trình đơn “Một số thời gian thực nếu bạn định sử dụng các ổ cắm web để cập nhật điểm ảnh ngay.

Thiết kế mô hình dữ liệu

Bảng số liệu của bạn nên phản ánh cấu trúc của giải đấu.

Đội- Tên, logo (địa chỉ Mạng hình ảnh), danh sách (liên lạc với người chơi), màu chính.
Màu của đấu thủ & 1- Tên, số, đội (sự tương quan), số lượng tùy chọn (các cuộc thẩm vấn, số chết, số lần).
Khớp- Quay, bắt đầu giờ, tình trạng (sống, hoàn tất, làm thêm giờ)
Điểm— que diêm (sự hiện diện), đội (sự hiện diện), giá trị điểm số, nhãn thời gian (đặc biệt hữu ích cho việc ghi trực tiếp), gõ chữ kiểu sự kiện (lication, k catch, obccccc...).
Bút chì— Tùy theo ý riêng, để theo dõi những sự vi phạm (hoặc phạm quyền hạn, đại loại, bất bình đẳng) với người chơi và quan hệ đôi.
Comment— một bản ghi của tất cả các sự kiện quan trọng (các sự thay đổi lớn, hình phạt, thời hạn) để xem lại và kiểm toán.

Dùng các trường liên hệ với chỉ điểm (nhiều điểm tương đồng với máy tính) được xây dựng (nhiều điểm tương đồng với máy tính, nhiều điểm liên kết với nhau. Trận đấu Bộ sưu tập nếu bạn định chạy nhiều sự kiện từ cùng một ví dụ Chỉ huy mỗi giải đấu có thể có lịch trình và quy tắc riêng của nó.

Đặt quyền hạn để chỉ có trọng tài xác thực có thể ghi điểm, trong khi giao diện bảng ghi công cộng chỉ cần đọc những dữ liệu gần đây nhất. Bạn cũng có thể tạo một “chức vụ ghi chữ số với hạn chế quyền ghi để khớp với trạng thái và điểm số.

Tin tức thời gian thực sự cập nhật

Các giải đấu sơn bóng nhanh chóng - đánh bóng trong các mục tiêu hiển thị gây ra sự nhầm lẫn. Mô- đun thời gian thực Cho bạn khả năng ghi đè lên các thay đổi trong tập tin nào. Khi trọng tài cập nhật điểm hay thay đổi trạng thái khớp, giao diện điều khiển nhận được tin cập nhật ngay qua WebSoet.

Dùng nó:

Cài đặt trong dự án giao diện điều khiển của bạn.
Tạo một kết nối WebSocket tới ví dụ Chỉ thị của bạn.
Được gán cho “các bản tóm tắt của sách báo này, hoặc“ so sánh với bộ sưu tập sách của người ta về các sự kiện có thật trong thời gian.
Hãy lắng nghe , , và các sự kiện và cập nhật UI tương ứng.

Cách này loại bỏ nhu cầu thăm dò và đảm bảo rằng mỗi thiết bị xem bảng ghi điểm sẽ đồng bộ hoá. Đối với các giải đấu lớn với nhiều trận đấu cùng lúc, hãy xem xét sử dụng các kênh WebSocket được đo để khớp các mã nhận diện đặc biệt để giảm băng thông.

lặn sâu: Quản lý kết nối ổ cắm Mạng

Khi xây một bảng điểm mạnh mẽ, xử lý sự kết nối giảm xuống một cách duyên dáng. Đặt phụ tùng vào và các sự kiện từ trình khách khớp Web. Khi ngắt kết nối theo thứ tự lại, chạy chậm 1 giây và tăng gấp đôi tới 30 giây. Chỉ dẫn là mô- đun thời gian thật gửi nhịp tim mỗi 30 giây theo mặc định; nếu bạn bỏ lỡ ba nhịp tim, bạn sẽ không thể kết nối được. Hãy hiển thị một chỉ dẫn nhỏ kết nối bị mất kết nối lại trên bảng ghi điểm để kiểm tra lại. Như vậy, chỉ định có thể giảm đi các phiên bản nhất định cho mỗi vài giây.

Xây dựng màn hình trước

Giao diện điều khiển là những gì người chơi, trọng tài, và khán giả thực sự thấy. bạn có thể xây dựng nó như một ứng dụng web, một giao diện bảng tính tận tụy, hoặc thậm chí một bảng điều khiển màn hình lớn.

Chọn khung

Bất kỳ khung JavaScript hiện đại (Ract, Vue, Svelte, hoặc thậm chí vanilla JS) sẽ hoạt động. Nếu các nhân viên của bạn không phải là công nghệ cao, một trang HTML + CN đơn giản có thể dễ dàng hơn. Để tương tác cao cấp hơn, phản ứng với chỉ số SDK là một sự lựa chọn vững chắc. Vue 3 với cấu trúc ADI cũng kết hợp với dữ liệu thời gian thực [FT:6] hay tính hiệu ứng tùy biến.

Đối với các đội thích một giải pháp nhẹ, cân nhắc sử dụng Alpine.js-Nó cho phép bạn thêm hành vi phản ứng vào HTML tĩnh mà không cần xây dựng bước. Nó có thể lý tưởng cho các giải đấu nhỏ nơi bạn muốn chỉnh sửa bảng ghi điểm trên ruồi.

Kết hợp với chỉ thị SDK

Directus cung cấp cho cả một khách hàng và một khách hàng thật sự trong thời gian đó.

Sử dụng hệ thống điều hành ROR để tải dữ liệu khớp ban đầu và thông tin đội.
Chuyển sang WebSocket đăng ký để có cập nhật trực tiếp.
Thiết kế giao diện người dùng để cập nhật các điểm mà không cần nhấp nháy (sự chuyển đổi CNSS).

Dòng chảy tích hợp ví dụ:

Xác thực giao diện điều khiển (nếu cần) hoặc dùng biểu tượng chỉ dùng cho hệ thống đọc tập tin ADI.
Lấy danh sách đối chiếu hiện tại từ Chỉ huy.
Mỗi trận đấu được tổ chức, cho thấy hai đội và điểm hiện tại của họ.
Thuyết phục thay đổi “bộ sưu tập các trang web và phục hồi lại điểm số.

Để giữ bản cập nhật điểm UIP, hãy gõ: nếu nhiều sự kiện ghi được trong vòng vài phần nghìn giây, nhóm chúng thành một bản trình đơn đơn, dùng một bản cập nhật trạng thái bị tắt (v. d., yêu cầu AnimationFrame hay 100m debounce).

Thiết kế giao diện người dùng

Độ sáng là quan trọng nhất.

Tên nhóm (lớn, tương phản màu sắc).
Số điểm (rất lớn, rất dễ đọc từ xa - mimum 80px font chữ số cho điểm chính).
Một đồng hồ đếm ngược (tần hoặc giờ chạy).
Một “người chỉ huy của phái này là người duy nhất có thể dùng các phương pháp khác để giải quyết vấn đề.
Lựa chọn: loại trừ hoặc giết tỉ lệ tử vong của người chết theo từng số liệu.

Dùng màu sắc trái ngược cao (v. d., văn bản màu trắng trên nền tối) và tránh làm rối màn hình. Thiết kế hỗ trợ bảo đảm bảng ghi điểm trông tốt trên cả một chương trình TV 50 inch lẫn bảng cân nhắc. Đối với màn hình ti vi, hãy xem tỷ lệ hình nền 16:9 với một ô xem riêng lẻ; đối với màn hình trọng tải di động, hãy sử dụng một bố trí gọn gàng hơn với nhiều thanh khớp.

Hiển thị điểm số, điểm và trạng thái khớp

Dòng dữ liệu hoạt động như thế này:

Một trọng tài bước vào một điểm (hoặc một sự kiện loại trừ) trên một đơn điện thoại di động. Yêu cầu đó được gửi cho Directus ADI.
Chỉ dẫn lưu lại hồ sơ và phát thanh một “sự kiện tạo ra các máy tính xách tay qua WebSetet.
Giao diện điều khiển nhận được sự kiện, cập nhật tình trạng địa phương và tái lập điểm số.
Trình tổng số thời gian có thể được xử lý cạnh máy khách (dùng đồng hồ cục bộ) hay máy phục vụ chỉ thị cho trường bắt đầu/ chấm. Để có thể xử lý tính chính xác, hãy dùng phương pháp tiếp cận cạnh máy phục vụ: khi nào trận đấu bắt đầu, trọng tài đặt trường , và các giao diện điều khiển tính còn lại từ đó. Máy phục vụ cũng có thể cập nhật một trường mỗi giây qua một dòng chảy trực tiếp hay một điểm tùy chỉnh.

Để phù hợp với hoàn cảnh, hãy để trọng tài thay đổi trường điều khiển ở Directus (v. d., từ “t. Xây dựng bộ lọc này thành“ tính năng chỉnh lại ”.

Tính năng khoá của bảng ghi riêng

Ngoài những điều cơ bản, hãy xem xét những tính năng tiên tiến này để cho thấy cuộc thi đấu của bạn là nổi bật:

Nhiều ô xem khớp- Nếu giải đấu của bạn đồng thời chạy, bảng điểm có thể hiển thị tất cả các trận đấu hoạt động hoặc cho phép chuyển đổi giữa các trường. Hãy dùng bố trí lưới với 2x2 hoặc 3x2 bảng cho nhiều màn hình.
Chơi lại hoặc quay chậm Tuy không phải là bản thân bảng điểm, nhưng lớp dữ liệu có thể hỗ trợ “các hành động không thay đổi (Lịch sử thay đổi) để bạn có thể sửa lỗi.
Hợp nhất tài chính Hãy dùng một bộ sưu tập Chỉ thị cho “những người bảo trợ tập tin có một trường ảnh và một thứ tự. Giao diện có thể hiển thị một nhà tài trợ ngẫu nhiên trong mỗi 30 giây hoặc hiển thị chúng trong một ve.
Public ADI để truyền Nhiều công cụ truyền tải như OBS có thể chụp một cửa sổ duyệt; thiết kế bảng ghi điểm với nền trong suốt để có thể chứa dữ liệu cho trò chơi.
Chế độ sao lưu giấy Ngoài ra, hãy tạo một trang bìa có thể mở rộng để lưu số trong địa phương và đồng bộ khi mạng trở lại.

Cấp cao: Bảng ghi đè lên các dòng trực tiếp

Nếu bạn dự định sống theo dòng, hãy tạo một trang HTML riêng biệt tối ưu hóa cho hệ thống OBS. Gỡ bỏ mọi gốc, sử dụng chức năng định vị tuyệt đối, và vạch trần biến CSS cho màu sắc nhóm và điểm số để đội chạy có thể điều chỉnh dễ dàng. Hãy dùng một trang trong suốt . Việc này được in trang này như là một nguồn trình duyệt ở OBS, và nó sẽ cập nhật theo thời gian thực khi có sự thay đổi.

Những bước tiến

Theo quy trình được cấu trúc này để xây dựng bảng điểm từ đầu đến cuối.

Bước 1: Định nghĩa quy tắc và cấu hình

Trước khi viết bất kỳ mã lệnh nào, tài liệu chính xác hoạt động như thế nào. Điểm nào cần thiết chạm vào cờ? Có quy tắc thương xót không? Liên kết thêm giờ được giải quyết như thế nào? Quy tắc này quy định kiểu dữ liệu của bạn. Lấy thí dụ, nếu đếm điểm loại trừ, bạn cần một tập hợp riêng biệt để loại bỏ sự kiện. Cũng xác định giới hạn thời gian, điểm phạt, và bất kỳ tình huống đặc biệt nào như cái chết đột ngột.

Bước 2: Đặt các bộ sưu tập chỉ thị

Ghi vào dự án Chỉ thị của bạn và tạo các tập hợp được nêu ra trước đó. Thêm các quy tắc hợp lệ (chẳng hạn, điểm số không phải là số nguyên âm). Cấu hình quyền cho “người chơi có khả năng ghi vào thông tin người chơi) trong khi“ vai trò công cộng (được dùng bởi giao diện điều khiển) chỉ truy cập. Hãy dùng quyền hạn của Chỉ định giới hạn của trường « BAR của Chỉ các trường cho phép đăng nhập (như thông tin người chơi) bị ẩn.

Bước 3: Xây dựng điểm kết thúc ADI hoặc dùng chỉ thị SDK

Bạn có thể sử dụng điểm kết thúc sản xuất của Directus trực tiếp từ giao diện điều khiển, hoặc xây dựng các điểm kết thúc hệ thống giao dịch kiểu ADI nếu bạn cần thêm lý trí kinh doanh (v. d., để tính tổng số từ nhiều sự kiện). Đối với phần lớn các giải đấu, các điểm kết thúc được xây dựng, các điểm kết thúc mạng được lắp đặt là đủ. Hãy dùng các điểm kết thúc có thể dùng. Directus SDK để đơn giản hoá sự xác thực và đăng ký thời gian thực. Nếu bạn cần máy phục vụ đồng bộ hoá đồng bộ giờ bên máy phục vụ, hãy tạo một điểm kết thúc riêng (FLT:11) để cập nhật mỗi giây qua công việc cron hoặc một con suối.

Bước 4: Phát triển thành phần trước

Tạo trang hiển thị cho khán giả và bảng điều khiển để xem trọng tài. Giữ cho khán giả xem chỉ đọc và tập trung vào các yếu tố lớn, rõ ràng. Bảng điều khiển có thể được gọn hơn với các nút và đơn. Dùng hoạt hình CSS để thay đổi điểm (v. d., một đèn nháy ngắn khi tăng dần). Đối với bảng điều khiển, hãy xem xét bằng thiết kế di động đầu tiên với các nút lớn có thể được gắn vào ngay cả khi đeo găng tay.

Bước 5: Thử nghiệm với các khớp thật

Chạy việc thực hiện khớp với những người tình nguyện làm trọng tài và người chơi. Mô phỏng nhiều trường hợp khác nhau: thay đổi nhanh, nhiều trường, các cuộc gọi phạt và các vấn đề mạng. Hãy kiểm tra xem bảng ghi lưu đó tự động kết nối lại nếu kết nối rơi xuống. Kiểm tra tính năng hoàn chỉnh (nếu thực hiện) và đảm bảo điểm cuối cùng không thể được thay đổi sau khi kết thúc trận đấu. Cũng thử nghiệm cú ngã ngắt kết nối: tháo nút cắm và kiểm tra xem bảng ghi cuối cùng vẫn còn có thể hiển thị các điểm được và bảng điều khiển có khả năng chuyển đổi sau đó.

Bước 6: Triển khai và đào tạo

Khởi động giao diện điều khiển trên máy phục vụ cục bộ hay máy đám mây. Đối với các sự kiện ngoại tuyến, chạy Chỉ thị và giao diện điều khiển trên máy tính xách tay có điểm nóng WiFi. Dùng trình soạn thảo Docker để gói Chỉ dẫn và một trình phục vụ Mạng nhỏ nhẹ (như Nginx hay Caddy) cho giao diện điều khiển. Trọng tài xe lửa về cách sử dụng bảng điều khiển đơn giản nhất có thể: gõ vào điểm số của một nhóm, một nút để dừng/ dừng lại thẻ nhanh. Cũng chạy thẻ hỗ trợ tập tin. Hơn nữa, hãy chạy thẻ sao lưu trên hệ thống bằng tay trong toàn bộ hệ thống.

An ninh và cho phép trực tiếp

Bởi vì bảng ghi điểm là một hệ thống được truy cập nhiều vai trò, an ninh là quan trọng.

Quản trị— được tiếp cận đầy đủ các bộ sưu tập và thiết lập (được sử dụng bởi các nhà tổ chức giải đấu).
Bộ duyệt Đọc các bài hát, bài hát, bài thi, bài thi và các bài thi.
Chung— chỉ đọc số, khớp (chỉ những người có địa vị “sống sót hoặc“ lập ra các nhóm ”, nhóm và cầu thủ, không có quyền ghi.

Dùng hệ thống cho phép Directus để áp dụng những điều này ở cấp thu thập. Để có thêm sự bảo mật, hãy giới hạn quyền truy cập trọng tài bằng địa chỉ IP nếu bảng điều khiển chỉ được dùng trên những bảng nhất định. Hãy bật trình điều khiển HTTPS trên trình đơn của bạn, đặc biệt nếu bạn để nó lên mạng để có thể tải lên.

Cách tô sáng các bảng điểm trực tiếp

Một giải đấu có thể có hàng tá trận đấu xảy ra cùng một lúc để giữ cho webSetet có thể trả lời:

Chỉ có những bộ sưu tập thường thay đổi (v. d., và . Tránh gán cho những bộ sưu tập tĩnh như trừ khi họ cập nhật trong sự kiện.
Dùng các tham số lọc của Directus chỉ để đặt mua dài hạn các hồ sơ thích hợp.
Trên giao diện điều khiển, cập nhật UI debounce. Nếu nhiều sự kiện ghi được trong cùng một khung hoạt hình, hãy chia chúng thành một bản cập nhật DO.
Tên và logo của nhóm nhớ tạm trong hệ thống địa phương của trình duyệt để không cần phải tìm mỗi kết nối.
Đối với những giải đấu rất lớn (hàng trăm người chơi), người chơi paginate lấy số liệu và nạp vào chúng theo yêu cầu.

Mẹo cho việc giảm thiểu thành công

Giữ mạng đơn giản. Dùng mạng WiFi với dây băng vừa đủ. Tránh kết nối thiết bị công cộng; dùng bảng thánh tích để cân nhắc. Hãy xem mạng 5Hz để có sự can thiệp thấp hơn.
Hãy đốt các dữ liệu ban đầu. Tải tất cả tên của nhóm, thời biểu khớp và logo vào giao diện điều khiển khi khởi động để một ổ cắm Web không phá vỡ màn hình ngay lập tức.
Dùng hậu quả. Có một trang HTML tĩnh với các trường nhập bằng tay như một phương pháp cuối cùng, đồng bộ hoá với một tập tin JSON cục bộ mà có thể tải lên sau này.
Kiểm tra độ chính xác của đồng hồ. Nếu sử dụng trình phục vụ đồng hồ hẹn giờ bên cạnh máy phục vụ, hãy đảm bảo thông điệp cắm mạng bao gồm thời gian máy phục vụ để tránh bị trôi giữa các thiết bị. Hoặc dùng nó Phương pháp cho khách hàng để xác định khoảng cách chính xác hơn.
Hãy xem xét việc có thể tiếp cận. Dùng phông chữ lớn và độ tương phản cao cho người xem bị lỗi thị giác. Cung cấp thông báo thông báo thông tin phản hồi âm thanh (a buzzer) cho các sự kiện quan trọng như sự kiện bắt đầu/end. Hãy dùng vùng để thông báo thay đổi điểm cho người đọc màn hình.
Lên kế hoạch cho quyền lực. Tất cả thiết bị nên được nạp đầy đủ, và có các dự phòng cho pin và dải điện.
Hãy xem xét mô hình dữ liệu của bạn. Hãy giữ biểu đồ về việc sưu tập và các mối quan hệ để những người tổ chức giải đấu trong tương lai có thể dễ dàng thay đổi hệ thống.

Kết luận

Một hệ thống bảng điểm tùy chỉnh được xây dựng trên Directus biến đổi một giải đấu sơn cầu từ điểm bằng tay hỗn loạn thành một trải nghiệm chuyên nghiệp, hấp dẫn. bằng cách sở hữu mô hình dữ liệu và sử dụng các bản cập nhật thời gian thực, bạn sẽ có được sự linh hoạt để thích nghi với bất kỳ quy tắc nào trong khi giữ cho người chơi và khán giả thông báo mỗi giây của trận đấu. với các bước được nêu ra ở đây từ mô hình dữ liệu để triển khai bạn có thể tạo ra một bảng ghi điểm chạy trên giải đấu và gây ấn tượng với tất cả mọi người trên sân đấu.

Để đọc tiếp, hãy khám phá Nơi Mạng Trực tiếpcái Giải đấu APPA quy tắcvà những hướng dẫn phát triển web thực tế về việc xây dựng bảng điều khiển thời gian thực với Vue.js hay Phản ứng Trận đấu tiếp theo của cậu sẽ không còn như xưa nữa.