Kāpēc rezultātu apkopojums ir pielāgots

Peintbolā spēles ir ātras un lēmumi notiek sekundēs. Neveiksmīgi rezultātu apkopojumi parasti ir paredzēti tādiem tradicionālajiem sporta veidiem kā basketbols vai futbols, un tiem trūkst elastības, kas nepieciešama peintbola unikālajiem spēļu režīmiem.

  • Reālā laika rezultātu atjauninājumi , kas atspoguļo tūlītējus samazinājumus, karoga uztveršanu vai uz punktu balstītus mērķus.
  • Atbalsts vairākiem formātiem —no 3 cilvēku komandām līdz lielām scenārija spēlēm — bez stingras veidnes piespiešanas.
  • Pastiprināta skatītāju iesaistīšanās , izmantojot dinamisku grafiku, laikiestati un komandu specifiskos statistikas datus.
  • Rezultāta cilvēka kļūda, automātiski ievadot datus ar planšetdatoru vai arbitru ierīcēm.
  • Branding ideatys, lai parādītu sponsora logo, notikumu nosaukumus un pielāgotas krāsu shēmas.

Ar pielāgotu risinājumu, jums arī pieder dati. Jūs varat vēlāk analizēt spēles vēsturi, spēlētāju sniegumu, un turnīra tendences-kaut kas nav iespējams ar vienreizlietojamu papīra loksnes vai slēgtas patentētas sistēmas. Mūsdienu bezgalvu CMS, piemēram, Directus padara to ne tikai iespējams, bet atkārtojams starp notikumiem.

Atšķirīga virziena izmantošana jūsu rezultātu pārskata aizmugurei

Directus ir atvērtā pirmkoda bezgalvas CMS, kas darbojas kā spēcīgs jūsu rezultātu apkopojuma programmas aizmugure. Tas nodrošina tīru, lietotājam draudzīgu saskarni administratoriem, lai pārvaldītu komandas, spēles un rādītājus, nerakstot vienu koda rindu. Tā REST un GraphQL API apvienojumā ar reālā laika WebSocket atbalstu padara to par ideālu izvēli, lai dzīvotu rezultātu apkopojuma sistēmu.

Direktora projekta iestatīšana

Jūs varat palaist Directus uz sava servera (pašsaņem) vai izmantot Directus Cloud pakalpojumu pārvaldītai pieredzei. Turnīra iestatīšanai, pašaizsardzību vietējā tīklā varētu būt vēlams, lai izvairītos no latentuma. Sekojiet šiem soļiem:

  1. Instalējiet tiešos pakalpojumus caur Docker vai tiešu Node.js izvietojumu. oficiālais ātrās palaišanas ceļvedis iezīmē procesu minūtēs.
  2. Konfigurēt jūsu datubāzi (PostgreSQL, MySQL, SQLite—SQLite ir ideāli piemērots lietošanai bezsaistē).
  3. Izveidojiet admin lietotāju un izveidojiet projektu tieši jūsu turnīram.
  4. Ieslēdziet “Realtime” moduli, ja plānojat izmantot WebSockets tūlītējai rezultātu atjaunināšanai.

Datu modeļa izstrāde

Jūsu rezultātu pārskata datu shēmai būtu jāatspoguļo jūsu turnīra struktūra. Izveidot kolekcijas (tabulas) in Directus for:

  • Personas—vārds, logo (attēla URL), sargs (attiecībā uz spēlētājiem), primārā krāsa.
  • Spēlētāji—vārds, numurs, komanda (relācija), izvēles statistika (likvidācija, nāve, hits).
  • Matches—apaļs, lauks, sākuma laiks, statuss (pavadīt, dzīvot, pabeigt, virsstundas), ilgums.
  • Progresi—atbilstība (relācija), komanda (relācija), punktu skaits, laika zīmogs (īpaši noderīgs dzīvajam punktu skaitam), punktu skaita noteikšanas notikuma veids (likvidācija, karoga notveršana utt.).
  • Sankcijas—pēc izvēles, lai izsekotu infrastruktūras (nelielas, lielas, diskvalifikācija) ar spēlētāju un spēles attiecības.
  • Match Events—visu nozīmīgo notikumu (pamata izmaiņas, sodi, noildze) žurnāls par atkārtotu spēli un revīziju.

Piemēram, sasaistot šīs kolekcijas, izmantojiet Directus izveidotos attiecību laukus (daudzus, daudzus, daudzus), piemēram, Match var būt divas komandas (vai vairāk multikomandas formātiem) un vairākas sekcijas, kas ierakstītas dažādos laikos. Apsveriet, vai pievienot Turnament kolekciju, ja plānojat veikt vairākus notikumus no vienas Directus instances – katram turnīram var būt savs grafiks un noteikumi.

Iestatiet atļaujas, lai tikai autentificēti tiesneši varētu rakstīt punktus, savukārt publiskajam rezultātu pārskatam ir tikai nepieciešams nolasīt jaunākos datus. Jūs varat arī izveidot “scorekeeper” lomu ar ierobežotu rakstīšanas piekļuvi, lai atbilstu tikai statusam un rezultātiem.

Reālā laika atjauninājumi ar Directus Realtime

Paintball turnīri ātri pārvietojas – kavējas punktu displejā. Directus’ Realtime modulis ļauj pierakstīties uz izmaiņām jebkurā kolekcijā. Kad tiesnesis atjaunina punktus vai spēles statusu, priekšpuse saņem atjauninājumu uzreiz caur WebSocket.

Lai to izmantotu:

  • Instalējiet jūsu priekšpuses projektā.
  • Izveidojiet WebSocket savienojumu ar jūsu Directus instanci.
  • Pieraksties uz reāllaika pasākumu „rezultātu” vai „sakritību” kolekciju.
  • Ieklausieties , un pasākumos un attiecīgi atjauniniet SRN.

Šī pieeja novērš nepieciešamību veikt aptauju un nodrošina, ka katra ierīce, kas skatās rezultātu apkopojumu, paliek sinhronizēta. Lieliem turnīriem ar daudzām vienlaicīgiem spēlēm apsveriet WebSocket kanālu izmantošanu, lai noteiktu atbilstības ID, lai samazinātu joslas platumu.

Dziļa dive: WebSocket savienojumu pārvaldība

Veidojot spēcīgu rezultātu pārskatu, apstrādāt savienojumu pilieni graciozi. Parakstīties uz un notikumiem no WebSocket klienta. Uz atvienošanos, īstenot eksponenciālu dublēšanās reconnectation-sākt ar 1-sekundi kavējumu un dubultot līdz 30 sekundēm. Directus’ Realtime modulis nosūta sirdspukstus ik pēc 30 sekundēm pēc noklusējuma; ja jūs garām trīs sirdspukstiem, tas ir droši pieņemt savienojumu ir zaudēts. Rādīt nelielu “savienojums zaudēts” rādītāju rezultātu tablo, lai darbinieki zinātu, lai pārbaudītu tīklu. Priekšgals var nokrist atpakaļ uz aptaujāšanu REST API ik pēc dažām sekundēm, ja WebSocket paliek uz leju.

Būvēt priekšpusi

Priekšpuse ir tas, ko spēlētāji, tiesneši un skatītāji faktiski redzēt. Jūs varat izveidot to kā tīmekļa lietojumprogrammu, veltīta planšetdatora interfeisu, vai pat liels ekrāna paneļa.

Ietvarstruktūras izvēle

Jebkurš mūsdienu JavaScript ietvars (React, Vue, Svelte vai pat vanilla JS) darbosies. Ja jūsu turnīra personāls ir netehnisks, vienkāršākais varētu būt vienkārša HTML + CSS lapa ar nelielu skriptu. Lai uzlabotu interaktivitāti, Reaktivitāte ar Directus SDK ir stabila izvēle. Vue 3 ar savu Composition API arī pāriem ar reālā laika datiem, izmantojot vai pielāgotu reaktivitāti.

Komandas, kas izvēlas vieglu risinājumu, apsveriet, izmantojot Alpine.js,—tas ļauj pievienot reaktīvo uzvedību statiskajam HTML bez celšanas soļa. Tas var būt ideāli piemērots maziem turnīriem, kur vēlaties rediģēt lidojuma rezultātu apkopojumu.

Integrācija ar Directus SDK

Directus nodrošina gan REST klientu, gan reāllaika klientu. Par rezultātu apkopojumu parasti:

  • Izmantojiet REST API, lai ielādētu sākotnējos spēles datus un komandas informāciju.
  • Pārslēgties uz WebSocket abonementiem, lai tiešraidē atjaunotu datus.
  • Design UI atjaunināt rādītājus bez mirgošanas (CSS pārejas palīdzību).

Integrācijas plūsmas piemērs:

  1. Autentificēt priekšpuses (ja nepieciešams) vai izmantot tikai lasāmu API marķieri.
  2. Ielādē pašreizējo sakritību sarakstu no Directus.
  3. Par katru aktīvo maču, parādīt divas komandas un to pašreizējo punktu skaitu.
  4. Pierakstīties uz izmaiņām “rezultātu” kolekcijā un atkārtoti saņemt rezultātu displeju.

Lai saglabātu UI snappy, partijas score atjauninājumus: ja vairāki score notikumi ienāk dažu milisekundes, grupējiet tos vienā renderēt, izmantojot atsauču stāvoklī atjauninājumu (piem, pieprasītAnimationFrame vai 100ms atsauču).

Lietotāja saskarnes projektēšana

Skaidrība ir pats svarīgākais. Labs rezultātu apkopojums izkārtojums ietver:

  • Komandas nosaukumi (lielas, kontrastējošas krāsas).
  • Punktu numuri (ļoti lieli, viegli lasāmi no attāluma – vismaz 80px fonts primārajiem rādītājiem).
  • Sakritības taimeris (skaitīšanas vai pagājušo laiku).
  • “Status” indikators (piemēram, “Status”, “Break”, “Final”).
  • Pēc izvēles: atsevišķu statu likvidēšanas skaitītāju vai nāves gadījumu attiecība.

Izmantojiet augstas kontrasta krāsas (piemēram, baltu tekstu uz tumša fona) un izvairieties no ekrāna lāpīšanas. Atsponsīvs dizains nodrošina rezultātu apkopojumu, kas izskatās labi gan 50 collu TV, gan referenta planšetdatorā. TV displejiem apsveriet 16:9 malu attiecību ar vienu spēles skatu; mobilajiem referentu ekrāniem izmantojiet kompaktāku izkārtojumu ar cilnēm vairākām spēlēm.

Rādīt rezultātus, taimeri, un spēles statuss

Datu plūsma darbojas šādi:

  • Referents ievada punktu skaitu (vai izslēgšanas notikumu) uz mobilās formas. Šī POST prasība nonāk Directus API.
  • Directus saglabā ierakstu un pārraida “radīt” pasākumu, izmantojot WebSocket.
  • Priekšsacīkstes saņem pasākumu, atjaunina tā vietējo stāvokli un vēlreiz apstiprina rezultātu.
  • Taimeri var apstrādāt ar klienta puses (izmantojot lokālo pulksteni) vai servera puses ar Directus laukiem sākuma/beigu laikiem. Precizitātei izmantot servera puses pieeju: kad sākas spēles, tiesnesis uzstāda lauku, un priekšgals aprēķina atlikušo laiku no tā. Serveris var arī atjaunināt lauku katru sekundi, izmantojot Directus plūsmu vai nelielu pielāgotu galapunktu.

Attiecībā uz atbilsmes statusu, ļaujiet rekomendācijas dalībniekiem mainīt statusa lauku Directus (piemēram, no “setup” līdz “playing” līdz “pabeigts”). Kopējam modelim ir jābūt “kontroles paneļa” skatam ar taustiņiem, lai sāktu/apturētu taimeri, pieauguma rādītājus, un izsaukuma sodus. Veidot to kā atsevišķu lapu, kas prasa autentifikāciju- izmantot Directus iebūvētās atļaujas, lai to aizsargātu.

Rezultātu apkopojuma sistēmas galvenās iezīmes

Ārpus pamatiem, apsvērt šīs uzlabotas funkcijas, lai padarītu jūsu turnīrs izceļas:

  • Daudzveidīgi spēles skati — ja turnīrs notiek vienlaicīgi, rezultātu apkopojums var parādīt visas aktīvās spēles vai ļaut pārslēgties starp laukiem. Vairāku lauku displejiem izmantojiet režģa izkārtojumu ar 2x2 vai 3x2 paneļiem.
  • Atkārtot vai lēno kustību—nevis pašam rezultātu apkopojumam, bet datu slānis var atbalstīt „undo” darbības (glabāšanas vēsture), lai jūs varētu izlabot kļūdas. Ieviest žurnālu ar visiem rezultātu izmaiņām ar laika zīmogiem; vadības panelī var būt “undo last” poga, kas atgriež jaunāko notikumu.
  • Sponsoru integrācija—rotē sponsora logotipus sānjoslā vai starp spēlēm. Izmantojiet Directus kolekciju “sponsoriem” ar attēlu lauku un šķirošanas kārtību. Priekšpuse var rādīt nejaušu sponsoru ik pēc 30 sekundēm vai parādīt tos ērčā.
  • Publiskā API straumēšanai—ja pārraidāt turnīru tiešsaistē, iegulsnējiet rezultātu apkopojumu ar iframe vai pielāgotu RTMP. Daudzi straumēšanas rīki, piemēram, OBS, var uztvert pārlūkprogrammas logu; izstrādā rezultātu apkopojumu ar caurspīdīgu fonu, lai tas pārklāj spēles barotni.
  • Paper rezerves režīmā — pat ar digitālo sistēmu vienmēr ir drukāta scorecard un pildspalva gatava. Papildus tam izveido vienkāršu bezsaistē pieejamu rezerves lapu, kas saglabā rādītājus lokālāStorage un sinhronizē, kad tīkls atgriežas.

Progress: rezultātu apkopojums par tiešraidēm

Ja plānojat dzīvot straumēt savu turnīru, izveidojiet atsevišķu HTML lapu, kas optimizēta OBS apšuvumam. Izņemiet visus fonus, izmantojiet absolūto pozicionēšanu un pakļaujiet CSS mainīgos komandu krāsas un rādītājus, lai straumēšanas komanda varētu tos viegli pielāgot. Izmantojiet caurspīdīgu ar .]. Ieguldiet šo lapu kā pārlūka avotu OBS, un tas tiks atjaunināts reāllaikā, kā rādītāji mainās.

Īstenošanas posmi

Sekojiet šim strukturētajam procesam, lai izveidotu savu rezultātu pārskatu no nulles līdz pat dzīves ciklam.

1. solis: Noteikt turnīra noteikumus un rezultātus

Pirms rakstot kādu kodu, dokuments, kā tieši darbojas punktu skaits. Vai punkts prasa pieskarties karogu? Vai ir žēlastības noteikums? Kā tiek atrisinātas virsstundas saites? Šis noteikums nosaka jūsu datu modeli. Piemēram, ja izslēgšanas punkti skaita, jums ir nepieciešams atsevišķs krājums par likvidēšanas notikumiem. Tāpat jānosaka laika ierobežojumi, soda punktu atskaitījumi, un jebkādi īpaši scenāriji, piemēram, pēkšņa nāve.

2. solis: Uzstādīt Directus kolekcijas

Ieiet savā Directus projektā un izveidojiet iepriekš aprakstītās kolekcijas. Pievienojiet validācijas noteikumus, piemēram, rādītājiem jābūt nenegatīviem. Konfigurējiet atļaujas “referenta” lomai, lai ļautu rakstīt punktus un saskaņot statusu, kamēr “publiskā” loma (izmanto priekšpuse) ir tikai lasīšanas pieeja. Izmantojiet Directus lauka līmeņa atļaujas, ja daži lauki (piemēram, spēlētāju kontaktinformācija) ir jāslēpj.

3. solis: Veidot API mērķa punktus vai izmantot Directus SDK

Jūs varat vai nu izmantot Directus ģenerētos REST galapunktus tieši no priekšpuses, vai veidot pielāgotus API galapunktus, ja jums ir nepieciešama papildus biznesa loģika (piemēram, lai aprēķinātu kopsummas no vairākiem notikumiem). Lielākajai daļai turnīru, iebūvētie REST un WebSocket galapunkti ir pietiekami. Izmantojiet Directirus SDK, lai vienkāršotu autentifikāciju un reāllaika abonementus. Ja jums ir nepieciešama servera puses taimera sinhronizācija, izveidojiet Directus pielāgotu galapunktu, kas atjaunina katru sekundi, izmantojot cron darbu vai plūsmu.

4. solis: izstrādāt priekšpuses komponentus

Izveidojiet displeja lapas skatītājiem un kontroles paneli referentiem. Turiet skatītāju skatā tikai lasāmus un fokusē uz lieliem, skaidriem elementiem. Vadības panelis var būt kompaktāks ar pogām un formām. Izmantojiet CSS animācijas punktu izmaiņām (piemēram, īsu zibspuldzi, ja punktu skaita pieaugums). Vadības panelim apsveriet mobilās pirmās konstrukcijas izmantošanu ar lielām pogām, kuras var viegli pieskarties pat cimdu nēsāšanas laikā.

5. solis: Tests ar reālām sakritībām

Palaist prakse atbilst brīvprātīgajiem, kas darbojas kā tiesneši un spēlētāji. Imitē dažādus scenārijus: ātras punktu izmaiņas, vairākus laukus, soda zvanus un tīkla problēmas. Pārbaudiet, vai WebSocket automātiski savienojas, ja savienojums samazinās. Pārbaudi atteikuma iespēju (ja tā ir ieviesta) un nodrošina, ka beigu punktus pēc spēles beigām nevar mainīt. Pārbaudi arī atsaistes atvilkumu: atslēdziet tīklu un pārbaudiet, vai rezultātu apkopojums joprojām rāda pēdējos zināmos punktus un ka kontroles panelis var rindas izmaiņas sinhronizēt vēlāk.

6. darbība: Darbinieks un vilciena personāls

Izvietot priekšpusi uz lokālā servera vai mākoņa resursdatora. Nesaistes notikumiem palaist Directus un priekšpusi uz vietējā klēpjdatora ar WiFi karsto punktu. Izmantojiet Docker Komponēt, lai saišķotu Directus un vieglu tīmekļa serveri (piemēram, Nginx vai Caddy). Vilciena sazinieties ar par to, kā izmantot vadības paneli - padarīt to pēc iespējas vienkāršāku: vienu piesitienu, lai palielinātu komandas rezultātu, vienu pogu, lai sāktu/apturētu taimeri. Izdrukāt ātrās atsauces kartes. Apmāciet arī rezerves skaļruni papīra manuālajā sistēmā, ja sistēmas darbība ir pilnīga.

Drošība un atļaujas tiešā veidā

Tā kā rezultātu apkopojums ir tiešraides sistēma, kurai var piekļūt vairākas lomas, drošība ir kritiska. Sākt ar trim Directus lomām:

  • Administrators—pilnīga piekļuve visām kolekcijām un iestatījumiem (izmanto turnīra organizatori).
  • Atbilde—rakstīt piekļuvi punktiem, spēles statusu, soda naudu un spēles notikumiem. Lasīt piekļuvi komandām, spēlētājiem, un turnīri.
  • Publiskā—tikai lasīt piekļuvi punktus, spēles (tikai tiem, kam statuss “dzīvs” vai “pabeigts”), komandas un spēlētāji.

Izmantojiet Directus atļauju sistēmu, lai nodrošinātu to izpildi savākšanas līmenī. Papildu drošībai, ierobežot ar IP adresi, ja vadības panelis tiek izmantots tikai konkrētās planšetdatoros. Iespējot HTTPS jūsu Directus instance, īpaši, ja pakļaujat to internetam straumēšanai.

Rezultātu tablo par rezultātiem tiešsaistē

Turnīra var būt desmitiem spēles notiek vienlaicīgi. Lai saglabātu WebSocket barotne reaģē:

  • Tikai abonēt kolekcijas, kas bieži mainās (piemēram, un ]). Izvairieties no abonēšanas statiskajām kolekcijām, piemēram , ja vien tās neatjaunojas pasākuma laikā.
  • Izmantojiet Directus filtra parametrus, lai pierakstītos tikai uz attiecīgajiem ierakstiem. Piemēram, abonējiet ar filtru , lai samazinātu troksni.
  • Priekšpusē, atlēciena UI atjauninājumi. Ja vienā animācijas kadrā ieradīsies vairāki rezultātu notikumi, tos pārdozē vienā DOM atjauninājumā.
  • Kešu komandu nosaukumi un logosi lokāli pārlūka lokālajā glabātuvē, lai tie nebūtu jānes uz katra savienojuma.
  • Ļoti lieliem turnīriem (sajūstiem spēlētāju), paginate spēlētāju statistiku un ielādēt tos pēc pieprasījuma.

Padomi veiksmīgai īstenošanai

  • Nemainiet tīklu vienkārši. Izmantojiet vienu WiFi tīklu ar atbilstošu joslas platumu. Nepieslēdziet publiskās ierīces; izmantojiet speciālas planšetes, lai veiktu refereēšanu. Apsveriet 5 GHz tīklu, lai radītu mazākus traucējumus.
  • Pielādēt sākotnējos datus. Ielādējiet visus komandu nosaukumus, sakarīgos grafikus un logos starta brīdī, lai WebSocket atvienojums uzreiz nesaplīst.
  • Izmantojiet atkāpšanos. Ir statisks HTML lapa ar manuāliem ievades laukiem kā pēdējo līdzekli, sinhronizēts ar lokālu JSON failu, kuru var augšupielādēt vēlāk.
  • Izpētiet taimera precizitāti. Ja izmantojat servera puses taimeri, pārliecinieties, ka jūsu WebSocket ziņojumi ietver precīzu servera laiku, lai izvairītos no nobīdes starp ierīcēm. Alternatīvi, izmantojiet ] metodi klientam precīzākiem intervāliem.
  • Uztvert pieejamību. Izmantojiet lielus fontus un augstu kontrastu skatītājiem ar redzes traucējumiem. Nodrošināt audio atgriezenisko saiti (buzzer) svarīgiem notikumiem, piemēram, sakritība sākuma/gala. Izmantojiet reģionus, lai paziņotu par punktu izmaiņām ekrāna lasītājiem.
  • Bezvadu plāns. Visām ierīcēm jābūt pilnībā uzlādētām, un tām jābūt rezerves elementiem baterijām un barošanas blokiem. Ja iespējams, darbina datoram ar datora izvadu UPS.
  • Dokumentējiet savu datu modeli. Saglabājiet kolekciju un attiecību shēmu, lai turpmākie turnīru organizatori varētu viegli mainīt sistēmu.

Secinājums

Pielāgota rezultātu pārskata sistēma, kas veidota uz Directus bāzes, pārveido peintbola turnīru no haotiska manuāla rezultāta uz profesionālu, iesaistošu pieredzi. Pieņemot savu datu modeli un piesaistot reāllaika atjauninājumus, jūs iegūstat pilnīgu elastību, lai pielāgotos jebkuram noteikumam, vienlaikus saglabājot spēlētāju un skatītāju informāciju katru sekundi no spēles. Ar šeit aprakstītajiem soļiem – no datu modelēšanas līdz izvietošanai – jūs varat izveidot rezultātu apkopojumu, kas darbojas uzticami turnīra dienā un ieskaidro visus uz laukuma.

Lai veiktu tālāku lasīšanu, izpētījiet Directus mājas lapu, APPA turnīra noteikumus[ un praktiskās tīmekļa izstrādes pamācības reālā laika paneļa būvēšanai ar Vue.js vai Reak].Jūsu nākamais peintbola turnīrs nekad neizskatīsies tāds pats.