Zašto je važno prilagoditi tablicu za rezultate

U paintbalu su utakmice brze i odluke se donose u sekundi.

  • U tom slučaju, u slučaju da se ne može utvrditi što je u pitanju, potrebno je utvrditi da je u skladu s člankom 1. stavkom 1.
  • Podrška za više formata, od timova od 3 čovjeka do velikih scenarija bez prisiljavanja na čvrstog predmeta.
  • Povećano sudjelovanje gledalaca kroz dinamičnu grafiku, live timere i statistiku za tim.
  • Smanjenje ljudske greške automatskim unosom podataka putem tableta ili uređaja za sudije.
  • Mogleće za brendiranje za prikaz logotipova sponzora, imena događaja i prilagođenih boja.

S prilagođenim rješenjem, također posjedujete podatke. Kasnije možete analizirati povijest utakmica, performanse igrača i trende turnira - nešto nemoguće s jednokratnim papirnim listovima ili zatvorenim vlasničkim sustavima.

Iskoristi Directus za svoj rezultat

Directus je open-source CMS bez glave koji djeluje kao moćan backend za vašu aplikaciju za rezultatne ploče. On pruža čisti, korisnički prihvatljiv interfejs za administratore kako bi upravljali timovima, utakmicama i rezultatima bez pisanja jedne linije koda.

Uspostavljanje projekta Directus

Možete pokrenuti Directus na vlastitom serveru (samo-hostiran) ili koristiti Directus Cloud uslugu za upravljano iskustvo.

  1. Instalirajte Directus putem Dockera ili direktne Node.js implementacije.
  2. Konfigurirajte svoju bazu podataka (PostgreSQL, MySQL, SQLiteSQLite je idealno za offline upotrebu).
  3. Postavite korisnika admin i kreirate projekt posebno za vaš turnir.
  4. Aktivirajte modul Realtime ako planirate koristiti WebSockets za trenutne ažuriranja rezultata.

Dizajniranje modela podataka

Slika podataka u vašem tabletu mora biti odražavajuća struktura vašeg turnira.

  • Timovi, ime, logotip (URL slike), popis (u odnosu na igrače), primarnu boju.
  • Igrači, ime, broj, tim (vezu), opcionalne statistike (eliminiranje, smrt, udari).
  • Utakmice: Rundi, polje, vrijeme početka, status (odlaže, uživo, završen, prekovremeni), trajanje.
  • Scenarije: 1 Mojč (vezu), tim (vezu), vrijednost ocjene, vremenski stempel (posebno korisni za live scoring), tip događaja (eliminiranje, hvatanje zastave itd.).
  • Penalije su opcionalne, za praćenje prekršaja (manjih, velikih, diskvalifikacija) s odnosima igrača i utakmice.
  • Utakmični događaji: log svih značajnih događaja (mijenjenja rezultata, kazne, timeouts) za ponovnu igru i reviziju.

Koristite ugrađene polje Directus odnosa (mnoga na jedno, mnogo na mnogo) za povezivanje ovih zbirki. Na primjer, utakmica može imati dva tima (ili više za više timova formata) i više zapisova rezultata zabilježenih u različitim vremenima. Razmislite o dodavanju zbirke turnira FLT:0 ako planirate pokrenuti više događaja iz iste Directus instancesvaki turnir može imati svoj raspored i pravila.

Nastavite dozvole tako da samo ovjereni sudije mogu pisati rezultate, dok javni frontend ploče samo mora čitati pristup najnovijim podacima.

Aktualizacije u stvarnom vremenu s Directusom u stvarnom vremenu

Paintball turniri se brzo kreću. Odlazak u prikazu rezultata stvara zbunjenost. Directus® Realtime modul FLT:1 omogućava pretplatiti promjene u bilo kojoj kolekciji. Kada sudija ažurira rezultat ili promjene stanja utakmice, frontend odmah prima ažuriranje putem WebSocket.

Za korištenje:

  • Instalirajte u svoj projekt frontend.
  • Kreirajte WebSocket vezu na Directus instance.
  • Podržite zbirku scores ili matches za događaje u stvarnom vremenu.
  • Slušajte događaje FLT:1, FLT:2 i FLT:3 i ispravite UI u skladu s tim.

Ovaj pristup eliminiše potrebu za ankete i osigurava da svaki uređaj koji gleda rezultatnu ploču ostaje sinhronizovani.

Duboko potonucenje: upravljanje veza WebSocket

Prilikom izgradnje robustne tablice za ocjene, upravljačka veza se graciozno spušta. Potpisite događaje FLT:4 i FLT:5 iz WebSocket klijenta. Prilikom isključenja, provedite eksponencijalnu povratnu povezanostpočnite s odlaganjem od 1 sekunde i udvostručite do 30 sekundi. Modul Directus Realtime automatski šalje utiske svake 30 sekundi; ako propustite tri utiske srca, sigurno je pretpostaviti da je veza izgubljena. Pokažite mali pokazatelj Uostak veze izgubljen na tablici za ocjene kako bi osoblje znati provjeriti mrežu. Frontend može pasti natrag na ankete REST API svakih nekoliko sekundi ako WebSocket ostane dolje.

Izgradnja prednjeg ekrana

Frontend je ono što igrači, sudije i gledatelji zapravo vide. Možete ga izgraditi kao web aplikaciju, poseban interfejs na tabletu ili čak i veliki ekran.

Izbor okvirova

Svaki modernji JavaScript okvir (React, Vue, Svelte ili čak vaniljski JS) će raditi. Ako je vaš turnirni osoblje ne-tehnički, jednostavna HTML + CSS stranica s malom skriptom može biti najlakša. Za napredniju interaktivnost, React s Directus SDK je čvrst izbor. Vue 3 s API-om Kompozicije također dobro se udruži s stvarnim vremenom podacima koristeći ili prilagođenu Reaktivnost.

Za timove koji vole lakše rješenje, razmislite o korištenju Alpine.js.

Integriranje s Directus SDK-om

Directus pruža i REST klijent i real-time klijent.

  • Koristite REST API za punjenje početnih podataka o utakmici i informacija o timu.
  • Prebaci se na pretplatu na WebSocket za ažuriranje uživo.
  • Dizajn UI-a kako bi se rezultati ažurirali bez bliskanja (pomoć CSS prelaza).

Primjeri integracije:

  1. U slučaju potrebe, potvrdi autentičnost frontend-a ili koristi javni API token koji se može samo čitati.
  2. Dođi sa Directus-a.
  3. Za svaki aktivni meč, prikažite dvije ekipe i njihove trenutne rezultate.
  4. Podpisati promjene u zbirci scores i ponovno prikazati prikaz rezultata.

Da bi UI bio brz, ažurirajte rezultate serije: ako se više događaja rezultata pojavljuju u roku od nekoliko milisekunda, grupirajte ih u jedan render koristeći ispravku stanja koji je oduzeta (npr. zahtjev za animacionom okvirom ili oduzetim od 100ms).

Dizajniranje korisničkog interfejsa

Jasnost je od najveće važnosti.

  • Naziv tima (velike, kontrastne boje).
  • Brojni brojevi (veoma veliki, lako čitati sa udaljenostiminimalni font 80px za primarne brojeve).
  • U skladu s člankom 3.4.2.
  • status pokazatelj (npr. Playing, Break, Final).
  • Opcionalno: brojevi eliminacije ili odnos smrti i smrti za pojedinačne statistike.

Koristite boje visoke kontraste (npr. bijeli tekst na tamnoj pozadini) i izbjegavajte nered ekrana. Odgovarajući dizajn osigurava da je rezultatna ploča dobro izgleda na TV-u od 50 inča i na tabletu sudije. Za TV displeje, uzmite u obzir razmjer 16:9 s jednim prikazom utakmice; za mobilne displeje sudije, koristite kompaktniji raspored s tabama za više utakmica.

Pokazivanje rezultata, vremenskog vremena i stanja utakmice

Promen datoteke radi ovako:

  • Sudija udaje rezultat (ili događaj eliminacije) na mobilnom obrazac.
  • Directus čuva zapis i emituje događaj create putem WebSocket-a.
  • Frontend prima događaj, ažurira svoj lokalni status i ponovno daje rezultat.
  • Timer se može upravljati na strani klijenta (koristeći lokalni sat) ili na strani servera s Directus poljima za početno/krajnje vrijeme. Za preciznost, koristite pristup na strani servera: kada se utakmica počne, sudija postavi polje i frontend izračunava preostali vrijeme od toga.

Za status utakmice, neka sudije mijenjaju polje stanja u Directusu (npr. s setup na playing na finished). Čestito je imati control panel prikaz za sudije sa dugmicima za pokretanje/stvaranje časova, povećanje bodova i poziv na kazne.

Ključne osobine prilagođene ploče za rezultat

Osim osnovnih stvari, razmotrite ove napredne karakteristike kako biste se vaš turnir izdvojio:

  • Ako vaš turnir pokreće istovremeno polja, tabla može prikazati sve aktivne utakmice ili omogućiti prekid između polja.
  • Ne za sam timbor, ali datovni sloj može podržati undo akcije (prikazivanje povijesti) kako biste mogli ispraviti greške.
  • Sponsor integracija (FLT:0) Sponsor logotip može se okrenuti u stranicu ili između utakmica.
  • Ako prikazivate turnir na internetu, ugradite preklop scoreboard sa iframe ili prilagođenim RTMP. Mnogi streaming alati poput OBS mogu uhvatiti prozor preglednika; dizajnirati scoreboard s transparentnom pozadinom tako da preklop igraju.
  • U slučaju da se radi o digitalnom sustavu, uvijek imate štampanu karticu rezultata i olovku spremne.

Napredna: Overlay za livestreams

Ako planirate uživo emitirati svoj turnir, kreirate odvojenu HTML stranicu optimiziranu za OBS prekršavanje. Uklonite sve pozadine, koristite apsolutno pozicioniranje i izložite CSS varijable za boje i ocjene tima kako bi ih streaming tim mogao lako prilagoditi.

Korakovi za provedbu

Pratite ovaj strukturirani proces kako biste izgradili svoj rezultatni tablon od nule do uživo.

Korak 1: Definiranje pravila turnira i postizanje bodova

Prije pisanja bilo kojeg koda, dokumentirajte točno kako postizanje bodova radi. Da li je točka zahtijeva dodir zastave? Postoji li pravilo milosrđa? Kako se rješavaju veze za prekovremene radne dane? Ovaj skup pravila diktira vaš model podataka. Na primjer, ako se računaju bodovi eliminacije, potrebno je odvojena zbirka za događaje eliminacije. Također definirajte vremenske ograničenja, oduzimanje bodova kazne i bilo kakve posebne scenarije poput iznenadne smrti.

Drugi korak: Postavite Directus kolekcije

Upis u svoj projekt Directus i kreirajte kolekcije koje su opisane ranije. Dodajte pravila validacijeNa primjer, bodovi moraju biti ne-negativni celine brojeve. Konfigurišite dozvole za ulogu refere kako bi omogućili pisani pristup rezultatima i statusu utakmice, dok ulogu public (koristi frontend) ima samo čitan pristup. Koristite Directus dopuštenja na razini polja ako se neka polja (kao što su informacije o kontaktu s igračima) trebaju skrivati.

Korak 3: Izgradite API krajnje točke ili koristite Directus SDK

Možete ili koristiti REST krajnje točke generirane Directus direktno iz frontenda, ili izgraditi prilagođene API krajnje točke ako vam je potrebna dodatna poslovna logika (npr. za izračun ukupnih iz više događaja). Za većinu turnira su dovoljne ugrađene REST i WebSocket krajnje točke. Koristite Directus SDK za pojednostavljenje autentifikacije i upisa u stvarnom vremenu.

Četvrti korak: Razvijte komponente Frontenda

U nastavku, možete vidjeti kako se prikazuje prikaz na stranicama za gledatelje i kontrolni panel za sudije. Držite pogled gledatelja samo za čitanje i fokusirajte se na velike, jasne elemente. Kontrolni panel može biti kompaktniji sa dugmicima i obrascima. Koristite CSS animacije za promjene rezultata (npr. kratka bljeska kada rezultat raste).

Korak 5: Ispitivanje stvarnim udobama

Uprkos tome, možete provjeriti da se WebSocket automatski ponovno povezuje ako se povezava padne. Provjerite funkciju otkazivanja (ako je provedena) i osigurati da konačni rezultati ne mogu biti izmenjeni nakon završetka utakmice. Također provjerite offline back-up: isključite mrežu i provjerite da je na rezultatnoj ploči još uvijek prikazano posljednje poznate rezultate i da upravljački panel može usporediti promjene koje će se sinhronizirati kasnije.

Krak 6: Izloženje i obuka osoblja

Primjerice, primjerice, primjerice, u slučaju da se ne može koristiti i za određene događaje, pokrenite Directus i frontend na lokalnom laptopu s WiFi hotspotom.

Sigurnost i dozvole u Directusu

Budući da je tablica rezultatova živ sustav pristupan više uloga, sigurnost je ključna.

  • Administrator (F.L.T.:0) - Potpuni pristup svim kolekcijama i postavkama (koristi organizatori turnira).
  • Referee piše pristup rezultatima, statusom utakmice, kaznenim kaznima i događajima utakmice.
  • Publika: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjetski klub: Svjets

Koristite sustav Directus dozvola za izvršenje na nivou prikupljanja. Za dodatnu sigurnost, ograničite pristup sudija IP adresom ako se upravljački panel koristi samo na određenim tabletima. omogućite HTTPS na vašoj Directus priči, posebno ako ga izložite internetu za streaming prekrivenosti.

Optimiziranje performansi za live rezultatne ploče

Turnir može imati desetine utakmica koja se događaju istovremeno.

  • Samo se pretplatite kolekcijama koje se često mijenjaju (npr. i ). Izbjegavajte pretplatiti se statičkim kolekcijama poput osim ako se ne ažuriraju tijekom događaja.
  • Koristite parametre filtera Directus za potpis samo relevantnih zapisa.
  • Na frontendu, deponirajte ažuriranja UI-a. Ako se više događaja rezultata dogode u istom animacijskom okviru, sastavite ih u jednu DOM ažuriranje.
  • Cache imena tima i logotipi lokalno u lokalnom skladištu pretraživača tako da ne moraju biti preuzete na svakom povezivanju.
  • Za vrlo velike turnire (stotine igrača), stranice statistike igrača i učitavati ih na zahtjev.

Savjeti za uspješnu provedbu

  • Uzmite jednostavnu mrežu. Koristite jednu WiFi mrežu s odgovarajućom propusnom pružnjom. Izbjegavajte povezivanje javnih uređaja; koristite namjenske tablete za sudjenje.
  • Kash početne podatke. Prikaži sve imena tima, rasporede utakmica i logotipove u frontend pri pokretanju kako WebSocket prekid ne bi odmah slomio prikaz.
  • Koristite back-up. Imajte statičku HTML stranicu s ručnim ulaznim poljima kao posljednji izlaz, sinhroniziranu s lokalnim JSON datotekom koji se može naknadno učitati.
  • ]Pokušaj tačnost vremenske tačike. Ako koristite vremenski tačnik na strani servera, osigurati da WebSocket poruke uključuju tačan vremenski period servira kako bi se izbjeglo pomak između uređaja.
  • Uzmite u obzir dostupnost. Koristite velike fontove i visok kontrast za gledalace s slabim vidom. Obezbijedi audio povratnu informaciju (buzzer) za važne događaje poput početka / kraja utakmice.
  • Plan za napajanje. Svi uređaji treba biti potpuno napunjeni i imati rezervne kopije za baterije i napajanje.
  • Dokumentišite svoj model podataka. Držite dijagram zbirki i odnosa kako bi budući organizatori turnira mogli lako modificirati sustav.

U skladu s člankom 1.

Prilagođeni sustav scoreboard-a izgrađen na Directus-u pretvara paintball turnir od haotičnih ručnih rezultata u profesionalno, privlačno iskustvo. posjedovanjem svog modela podataka i korištenjem ažuriranja u stvarnom vremenu, dobijate potpunu fleksibilnost u prilagođavanju bilo kojem zaduženom pravilu dok držite igrače i gledatelje informirani u svakoj sekundi utakmice. Korakima koji su ovdje opisani, od modeliranja podataka do raspoređivanja, možete stvoriti scoreboard koji se pouzdano provodi u dan turnira i impresionira sve na terenu.

Za daljnje čitanje, istražite web stranicu FLT:0 Directusa, pravila turnira FLT:2 APPA i praktična web razvojna nastavka o izgradnji uređaja u stvarnom vremenu s FLT:4 Vue.js ili FLT:6 React.