Dlaczego warto dostosować kartę wyników

W paintball mecze są szybkie, a decyzje są podejmowane w ciągu kilku sekund.

  • Aktualizacje wyników w czasie rzeczywistym które odzwierciedlają wysyłki, zdjęcia flag lub cele oparte na punktach natychmiast.
  • Wsparcie dla wielu formatówod zespołów z 3 członkami do gier dużych scenariuszybez konieczności tworzenia sztywnego wzoru.
  • Zwiększone zaangażowanie widzów w ramach dynamicznych grafik, live-timers i statystyk dotyczących zespołu.
  • Zmniejszenie błędów ludzkich automatyzacja wprowadzania danych za pośrednictwem tabletów lub urządzeń arbitrów.
  • Możliwości promowania marki wyświetlanie logo sponsorów, nazw wydarzeń i niestandardowych schematów kolorów.

Dzięki niestandardowemu rozwiązaniu możesz również przejąć dane. Później możesz przeanalizować historię meczów, wyniki graczy i trendy turnieju - coś niemożliwego z jednorazowymi kartami papierowymi lub zamkniętymi systemami własnymi. Nowoczesny bezgłośny CMS, taki jak Directus, sprawia, że jest to nie tylko możliwe, ale również powtarzalne w różnych wydarzeniach.

Wykorzystanie Directus dla Twojego schematu wyników

Directus to otwarty źródłowy bez głowy CMS, który działa jako potężny backend dla aplikacji do karty wyników. zapewnia czysty, przyjazny dla użytkownika interfejs dla administratorów do zarządzania zespołami, meczami i wynikami bez napisania jednej linii kodu.

Wprowadzenie projektu Directus

W przypadku turnieju można korzystać z serwera Directus na własnym serwerze (samo-hostingowym) lub z usług Directus Cloud w celu zarządzania doświadczeniem.

  1. Instaluj Directus za pośrednictwem Docker lub bezpośredniego wdrożenia Node.js. oficjalny przewodnik szybkiego uruchomienia w ciągu kilku minut przedstawia proces.
  2. Konfiguracja bazy danych (PostgreSQL, MySQL, SQLiteSQLite jest idealna do użycia offline).
  3. Ustwórz użytkownika admin i stworz projekt specjalnie dla swojego turnieju.
  4. Włącz moduł Realtime jeśli planujesz użyć WebSockets do natychmiastowych aktualizacji wyników.

Projektowanie modelu danych

Skema danych tablicy wyników powinna odzwierciedlać strukturę turnieju.

  • Zespółnazwa, logo (URL obrazu), lista (współka z graczami), kolor pierwotny.
  • Graczenazwa, liczba, drużyna (relacja), statystyki opcjonalne (eliminacje, zgony, uderzenia).
  • Zestawokoło, pole, czas rozpoczęcia, status (odczasowy, żywy, zakończony, nadgodzinny), czas trwania.
  • Wynikiporządkowanie (relacja), drużyna (relacja), wartość wyników, czas (zwłaszcza przydatny do wyników w czasie), typ zdarzenia wyników (eliminacja, uchwycenie flagi itp.).
  • Sankcjeopcjonalnie, aby śledzić naruszenia (minorne, poważne, dyskwalifikacje) w stosunkach gracza i meczów.
  • Wydarzeniapływ wszystkich istotnych wydarzeń (zmiany wyników, kary, wyprzedzające) w celu ponownego odtwarzania i audytu.

W przypadku zestawów, które są włączone do zbioru, użyj wbudowanych pola relacji Directus (wiele do jednego, wiele do wielu). Turniej W przypadku, gdy planujesz uruchomić wiele wydarzeń z tej samej instancji Directus, każdy turniej może mieć swój harmonogram i zasady.

Ustaw uprawnienia, aby tylko autentyczni sędziowie mogli pisać wyniki, podczas gdy publiczna tablica wyników przedkoła potrzebuje tylko czytania dostępu do najnowszych danych. Możesz również utworzyć rolę scorekeeper z ograniczonym dostępem do pisania do statusu meczu i wyników tylko.

Aktualizacje w czasie rzeczywistym w czasie rzeczywistym w Directus

Turnieje w paintball szybko się poruszają. Moduł w czasie rzeczywistym Jeśli sędzia aktualizuje wynik lub status meczów, frontend otrzymuje aktualizację natychmiast za pośrednictwem WebSocket.

Do użycia:

  • Instaluj w projekcie frontend.
  • Utwórz połączenie WebSocket do instyncji Directus.
  • Zapisz się na zbiór scores lub matches dla wydarzeń w czasie rzeczywistym.
  • Posłuchaj zdarzeń FLT:1, FLT:2 i FLT:3 i odpowiednio aktualizuj interfejs użytkownika.

W przypadku dużych turniejów z wieloma jednoczesnymi meczami rozważ używanie kanałów WebSocket przeznaczonych do określonych identyfikatorów meczów w celu zmniejszenia szerokości pasma.

Głęboki zakorzenienie: Zarządzanie połączeniem WebSocket

Podczas budowy solidnej tablicy wyników, podłączenie z ręką spada łagodnie. Subskrybuj zdarzenia z FLT:4 i FLT:5 z klienta WebSocket. Po odłączeniu, wdroż wykładniczą odtworzenie ponownego połączenia z powrotem rozpoczyna się od opóźnienia 1 sekundy i podwaja się do 30 sekund. Modul Directus w czasie rzeczywistym wysyła bicia serca co 30 sekundy domyślnie; jeśli przegapisz trzy bicia serca, jest bezpieczne założyć, że połączenie jest utracone. Pokaż mały wskaźnik utracone połączenie na tablicy wyników, aby pracownicy wiedzieli, aby sprawdzić sieć.

Frontend może wrócić do ankietowania REST API co kilka sekund, jeśli WebSocket pozostaje w dół.

Wykorzystanie przedniego wyświetlacza

Frontend to to, co gracze, sędziowie i widzów widzą. Możesz go zbudować jako aplikację internetową, interfejs dla tabletów lub nawet duży ekran.

Wybór ram

W przypadku, gdy personel turnieju jest nietechniczny, najłatwiejsza jest opracowanie prostej strony HTML + CSS z małym skryptem. Dla bardziej zaawansowanej interaktywności, React z Directus SDK jest solidnym wyborem. Vue 3 z API Kompozycji dobrze łączy się z danymi w czasie rzeczywistym przy użyciu FLT:6 lub spersonalizowanej Reactivity.

Dla zespołów, które preferują lekkie rozwiązanie, rozważ użycie Alpine.jsto pozwala dodać reakcyjne zachowania do statycznego HTML bez kroków budowy. To może być idealne dla małych turniejów, gdzie chcesz edytować tablicę wyników w ruchu.

Integracja z SDK Directus

Directus zapewnia zarówno klient REST, jak i klient w czasie rzeczywistym.

  • Użyj API REST do ładowania danych początkowych meczów i informacji o drużynie.
  • Przesun się na subskrypcje WebSocket na aktualizacje na żywo.
  • Zaprojektuj interfejs interfejsu do aktualizacji wyników bez migań (pomagają przejścia CSS).

Przykład przepływu integracji:

  1. Authentifyze frontend (jeśli jest to konieczne) lub użyj publicznego tokena API tylko do odczytu.
  2. Przyprowadź aktualną listę z Directus.
  3. Za każdy aktywny mecz wyświetlać dwie drużyny i ich aktualne wyniki.
  4. Zapisz się na zmiany w zbiorze scores i ponownie wyświetlić wyświetlacz wyników.

Aby utrzymać szybkie użytkowanie użytkownika, aktualizacje wyników w serii: jeśli w ciągu kilku milisekund pojawiają się wiele zdarzeń wyników, skomponować je w jednym renderingu za pomocą aktualizacji stanu defonowanego (np. żądanieAnimationFrame lub defonowania 100ms).

Projektowanie interfejsu użytkownika

Najważniejsze jest jasność.

  • Nazwa zespołu (duże, kontrastujące kolory).
  • Liczby wyników (bardzo duże, łatwe do odczytu z odległościminimalny font 80px dla wyników podstawowych).
  • Zegarek zestawu (liczenie odwrotne lub upływ czasu).
  • Wskaźnik status (np. Playing, Break, Final).
  • Wybór: liczniki eliminacji lub wskaźnik zabijania-śmierci dla poszczególnych statystyk.

Użyj barw kontrastu (np. białego tekstu na ciemnym tle) i unikaj nieprzyjemności ekranu. Wzorność odpowiedzialna zapewnia, że tablica wyników będzie dobrze wyglądać zarówno na 50-calowym telewizorze, jak i na tablecie sędziowym. W przypadku wyświetlaczy telewizyjnych należy rozważyć współczynnik widoków 16:9 z jednym widokiem meczu; w przypadku ekranów sędziowców mobilnych należy zastosować bardziej kompaktowy układ z zakładkami do wielu meczów.

Wyświetlanie wyników, czasu i stanu meczu

Przepływ danych działa w ten sposób:

  • Arbiter wprowadza wynik (lub wydarzenie eliminacyjne) w formularzu mobilnym.
  • Directus zapisuje nagranie i nadaje wydarzenie create za pośrednictwem WebSocket.
  • Frontend odbiera wydarzenie, aktualizuje jego lokalny stan i ponownie odda wynik.
  • Zegarek można obsługiwać po stronie klienta (w użyciu lokalnego zegarka) lub po stronie serwera z pola Directus dla czasu rozpoczęcia / zakończenia. Aby upewnić się, użyj podejścia po stronie serwera: gdy rozpocznie się mecz, sędzia ustawia pole a frontend oblicza z tego czasu.

W przypadku statusu meczów, pozwólcie sędziom zmienić pole statusu w Directus (np. z setup do playing do finished).

Kluczowe cechy systemu dostosowanego do potrzeb

Poza podstawowymi elementami, rozważ te zaawansowane funkcje, które pozwolą wyróżnić swój turniej:

  • Wielokrotne wyświetleniejeśli turniej ma jednoczesne pola, tablica wyników może wyświetlać wszystkie aktywne mecze lub umożliwić przełączanie pomiędzy polami.
  • Wielokrotne odtwarzanie lub wolne ruchynie dla samej tablicy wyników, ale warstwa danych może obsługiwać undo działania (historia zapisywania), dzięki czemu można poprawić błędy. Wdrożyć zapis wszystkich zmian wyników z odcinkami czasu; panel sterowania może zawierać przycisk undo last, który odwraca najnowszą zdarzenie.
  • Integracja sponsorówrotate logo sponsorów w pasku bocznym lub między meczami. Użyj kolekcji Directus dla sponsors z pola obrazu i porządku sortowania. Frontend może wyświetlać losowo sponsora co 30 sekund lub wyświetlać je w klikach.
  • Publiczna API do transmisjijeśli nadajesz turniej w sieci, wlej na płytę wyników iframe lub dostosowany RTMP. Wiele narzędzi strumieniowych takich jak OBS może uchwycić okno przeglądarki; zaprojektuj płytę wyników z przejrzystym tłem, aby pokryła się z transmisją gry.
  • Tryb kopii zapasowej papierunawet w systemie cyfrowym, zawsze posiadać drukowaną kartę wyników i długopis.

Zaawansowane: Płyta do płytek

Jeśli planujesz transmitować swój turniej wideo na żywo, utwórz osobną stronę HTML zoptymalizowaną dla pokrycia OBS. Usunąć wszystkie tło, użyć pozycjonowania absolutnego i wystawić zmienne CSS dla kolorów i wyników zespołu, aby zespół streamingowy mógł je łatwo dostosować.

Kroki wdrożenia

Wykonaj ten strukturyzowany proces, aby zbudować tablicę wyników od zera do życia.

Krok 1: Określ zasady turnieju i wyniki

Przed napisanie jakiegokolwiek kodu, dokumentować dokładnie, jak działa wyniki. Czy punkt wymaga dotykania flagi? Czy istnieje zasada miłosierdzia? Jak są rozwiązywane związki nadgodzinne? Zestaw reguł ten dyktuje model danych.

Na przykład, jeśli liczą punkty eliminacji, potrzebujesz oddzielnego zbioru dla wydarzeń eliminacji. Definiuj również limity czasowe, odliczenia punktów karnych i wszelkie specjalne scenariusze, takie jak nagła śmierć.

Krok 2: Zestaw zbiory Directus

Wpisz się do projektu Directus i utwórz kolekcje opisane wcześniej. Dodaj zasady weryfikacji na przykład wyniki muszą być liczbami całkowitymi nie ujemnymi. Zastosować uprawnienia do roli refere, aby umożliwić dostęp do wyników i stanu meczu, podczas gdy rola public (używana przez frontend) ma dostęp wyłącznie do odczytu. Użyj uprawnień na poziomie pola Directus, jeśli niektóre pola (np. informacje kontaktowe gracza) powinny być ukryte.

Krok 3: Zbudować punkty końcowe API lub użyć SDK Directus

Można albo użyć bezpośrednio z frontendu generowanych punktów końcowych REST Directus, albo zbudować indywidualne punkty końcowe API, jeśli potrzeba dodatkowej logiki biznesowej (np. do obliczania sumy z wielu wydarzeń). SDK Directus Jeśli potrzebujesz synchronizacji z serwerem, utwórz dostosowany punkt końcowy Directus, który aktualizuje ] co sekundę za pośrednictwem pracy cron lub przepływu.

Krok 4: Opracowanie komponentów frontendowych

W celu uzyskania wyników, należy użyć animacji CSS (np. krótkiego błyskawica, gdy wynik wyników wzrasta). W celu uzyskania wyników należy rozważyć użycie urządzenia mobilnego, które ma duże przyciski, które można łatwo naciśnić nawet w rękawiczkach.

Krok 5: Sprawdź prawdziwe pasy

Uruchomić mecze praktyki z wolontariuszami działającymi jako sędziowie i gracze. Simułować różne scenariusze: szybkie zmiany wyników, wiele pola, wezwania karne i problemy sieciowe. Sprawdź, czy WebSocket połącza się automatycznie, jeśli połączenie spadnie. Sprawdź funkcję odłączenia (jeśli jest wdrożona) i upewnij się, że wyniki końcowe nie mogą być zmienione po zakończeniu meczu. Sprawdź również offline fallback: odłączyć sieć i sprawdzić, czy tablica wyników nadal pokazuje ostatnie znane wyniki i że panel sterowania może zsynchronizować zmiany, które zostaną później.

Krok 6: Wysyłanie i szkolenie personelu

Wdroż frontend na lokalnym serwerze lub w chmurze. W przypadku wydarzeń offline uruchomić Directus i frontend na lokalnym laptopie z hotspotem WiFi. Użyj Docker Compose do zestawienia Directus i lekkiego serwera internetowego (takich jak Nginx lub Caddy) dla frontendu. Szkolić sędziów w zakresie korzystania z panelu sterowaniaUczyń to tak proste, jak to możliwe: jednym kliknięciem, aby zwiększyć wynik zespołu, jednym przyciskiem, aby uruchomić/ustawić zegarka.

Bezpieczeństwo i zezwolenia w Directus

Ponieważ tablica wyników jest systemem na żywo, do którego dostęp mają wiele ról, bezpieczeństwo jest kluczowe.

  • Administratorpełny dostęp do wszystkich kolekcji i ustawień (używanych przez organizatorów turnieju).
  • Sędziapisz dostęp do wyników, statusu meczów, kar i wydarzeń meczów.
  • PublicznePrzeczytanie tylko dostęp do wyników, meczów (tylko tych, którzy mają status live lub finished), drużyny i graczy.

Użyj systemu zezwoleń Directus do egzekwowania tych na poziomie zbioru. Aby zapewnić dodatkowe bezpieczeństwo, ogranicz dostęp sędziów przez adres IP, jeśli panel sterowania jest używany tylko na określonych tabletach. Włącz HTTPS w Twoim przykładzie Directus, zwłaszcza jeśli wystawisz go na Internet w celu strumienia przesłanek.

Optymalizacja wydajności dla płytek wyników na żywo

W turnieju mogą odbywać się kilkadziesiąt meczów jednocześnie.

  • Subskrybuj tylko kolekcje, które często się zmieniają (np. i ). Unikaj subskrybowania na kolekcje statyczne, takie jak chyba że aktualizują się podczas wydarzenia.
  • Użyj parametrów filtra Directus do subskrypcji tylko odpowiednich rekordów. Na przykład subskrybuj z filtrem do zmniejszenia hałasu.
  • Jeśli w tym samym ramie animacji pojawią się wiele zdarzeń, zestaw je w jedną aktualizację DOM.
  • Nazwa zespołu i logo są przechowywane lokalnie w lokalnym magazynie przeglądarki, więc nie muszą być pobierane na każdym połączeniu.
  • W przypadku bardzo dużych turniejów (setek graczy) strona statystyki graczy i ładowanie ich na żądanie.

Szacunki na udane wdrożenie

  • Trzymaj sieć prostą. Użyj pojedynczej sieci Wi-Fi z odpowiednią przepustowością. Unikaj podłączenia urządzeń publicznych; użyj specjalnych tabletów do rozstrzygania.
  • Zapisać pierwotne dane. Włóż wszystkie nazwy zespołu, harmonogramy meczów i logo w frontend w momencie uruchomienia, aby awaria WebSocket nie natychmiast rozbiła wyświetlacza.
  • Użyj back-up. W ostatnim wypadku należy mieć statyczną stronę HTML z ręcznymi polami wejściowymi, synchronizowaną z lokalnym plikem JSON, który może zostać przesłany później.
  • Sprawdź dokładność zegarka. Jeśli używasz zegarka po stronie serwera, upewnij się, że wiadomości WebSocket zawierają dokładny czas serwera, aby uniknąć przepływu pomiędzy urządzeniach. ] metodę na klienta w bardziej precyzyjnych odstępach czasu.
  • Rozważ dostępność. Użyj dużych czcionek i wysokiego kontrastu dla widzów z niepełnosprawnością wzroku. Zapewnij odbiór dźwiękowy (buzzer) dla ważnych wydarzeń, takich jak początek / koniec meczów. Użyj regionów FLT:18 do ogłoszenia zmian wyników dla użytkowników czytelnika ekranu.
  • Plan na moc. Wszystkie urządzenia powinny być w pełni naładowane, a także mieć zapasy zapasowe baterii i pasów zasilania.
  • Dokumentuj swój model danych. Zapisz diagram zbiórek i relacji, aby przyszli organizatorzy turniejów mogli łatwo zmienić system.

Wniosek

Zastosowany system tablicy wyników oparty na Directus przekształca turniej paintball z chaotycznych wyników ręcznych w profesjonalne, angażujące doświadczenie. Dzięki posiadaniu modelu danych i wykorzystaniu aktualizacji w czasie rzeczywistym uzyskujesz całkowitą elastyczność w dostosowaniu się do ustawionych zasad, jednocześnie utrzymując graczy i widzów informowanych co sekundę meczu. Dzięki krokom przedstawionym tutaj od modelowania danych do rozmieszczenia możesz stworzyć tablicę wyników, która działa niezawodnie w dniu turnieju i robi wrażenie na polu na wszystkich.

Aby uzyskać dalsze informacje, przeczytaj Strona internetowa Directus, Reguły turnieju APPA, oraz praktyczne tutoriale w zakresie tworzenia systemów kontrolnych w czasie rzeczywistym, w których Vue.js lub ReagujTwój następny turniej w paintball nigdy nie będzie taki sam.