Miks kohandatud tulemustabeli küsimused

paintballis on mängud kiired ja otsused toimuvad sekunditega. Väljaspool riiulit asuvad tulemustabelid on tavaliselt mõeldud traditsioonilistele spordialadele, nagu korvpall või jalgpall, ning neil puudub paindlikkus, mida on vaja paintballi ainulaadsete mängurežiimide jaoks.

  • ]Reaalajas skooride uuendused , mis kajastavad kohe kõrvaldamisi, lipu hõivamist või punktipõhiseid eesmärke.
  • ]Toetage mitut formaati ] - alates 3-mehest meeskondadest kuni suurte stsenaariumimängudeni - ilma jäiga malli sundimata.
  • Täiustatud pealtvaatajate kaasamine] dünaamilise graafika, elavate taimerite ja meeskonnaspetsiifiliste statistikate kaudu.
  • Inimliku vea vähendamine, andmete sisestamise automatiseerimine tahvelarvutite või kohtunike seadmete kaudu.
  • ]Suurepärased võimalused sponsori logode, sündmuste nimede ja kohandatud värviskeemide kuvamiseks.

Kohandatud lahenduse korral on ka andmed sinu omad. Hiljem saab analüüsida mängu ajalugu, mängijate sooritust ja turniiritrendi – midagi võimatut ühekordsete paberlehtede või suletud varaliste süsteemide puhul. Kaasaegne peata CMS nagu Directus muudab selle võimalikuks, kuid sündmuste lõikes korratavaks.

Directus'e võimendus tulemustabeli taustaprogrammi jaoks

Directus on avatud lähtekoodiga peata CMS, mis toimib võimsa taustaprogrammina tulemustabeli rakendusele. See pakub administraatoritele puhast ja kasutajasõbralikku liidest meeskondade, vastete ja skooride haldamiseks ilma ühtegi koodirida kirjutamata. Selle REST ja GraphQL APId koos reaalajas WebSocketi toega muudavad selle ideaalseks valikuks reaalajas tulemustabeli süsteemi jaoks.

Directus projekti loomine

Directus' i saab käivitada omaenda serveris (isemajutuses) või kasutada Directus Cloudi teenust, et saada hallatav kogemus. Turniiri seadistuse korral võib latentsuse vältimiseks eelistada isemajutust kohalikus võrgus. Järgi järgmisi samme:

  1. Installige Directus Dockeri kaudu või Node.js otselevitamise kaudu. ] Ametlik kiirstardi juhend ] kirjeldab protsessi minutites.
  2. Konfigureerige oma andmebaas (PostgreSQL, MySQL, SQLite – SQLite on ideaalne võrguühenduseta kasutamiseks).
  3. Seadke administraatori kasutaja ja looge projekt spetsiaalselt oma turniiri jaoks.
  4. Lülitage sisse moodul „Realtime, kui kavatsete kasutada WebSocketsit hetke skoori värskenduste jaoks.

Andmemudeli koostamine

Tulemustabeli andmeskeem peaks peegeldama turniiri struktuuri. Loo Directus'es kollektsioonid (tabelid) järgmisteks teemadeks:

  • ]Rühmad ]-nimi, logo (pilt URL), nimekiri (suhe mängijatega), esmane värv.
  • ]Mängijad ] – nimi, arv, meeskond (suhe), valikulised statistikad (eliminatsioonid, surmad, tabamused).
  • ]Tähised ] – ringi, põllu, algusaja, staatuse (olemas, elus, lõppenud, ületunnitöö), kestuse.
  • ]Skoorid ] – matš (suhe), meeskond (suhe), punktisumma, ajatempel (eriti kasulik reaalajas hindamise jaoks), punktisündmuse tüüp (kõrvaldamine, lipu püüdmine jne).
  • ]Karistused ] – vabatahtlik, et jälgida rikkumisi (väikesed, suured, diskvalifitseeritud) mängija ja matši suhetega.
  • ]Võimalussündmused ] – kõigi oluliste sündmuste (skoorimuutused, karistused, aegumised) loend korduse ja auditeerimise jaoks.

Kasuta Directuse sisseehitatud suhtevälju (palju-ühele, palju-paljudele), et neid kogusid omavahel siduda. Näiteks võib mängul olla kaks võistkonda (või rohkem mitme meeskonna formaatide puhul) ja mitu punktisummat, mis on salvestatud erinevatel aegadel. Kaaluge ] Turniirikogu lisamist, kui kavatsete käivitada mitu üritust samast Directuse näitest – igal turniiril võib olla oma ajakava ja reeglid.

Määra õigused, et ainult autenditud kohtunikud saaksid kirjutada hindeid, samas kui avalik tulemustabeli kasutajaliides vajab ainult lugemist kõige uuematele andmetele. Samuti võib luua "scorekeeperi" rolli, millel on piiratud kirjutamisõigus ainult sobivuse oleku ja skooride korral.

Reaalajas värskendused Directus Reaalajas

Paintballi turniirid liiguvad kiiresti – viivitused punktitabelis tekitavad segadust. Directus' Realtime'i moodul] võimaldab tellida muudatusi igas kollektsioonis. Kui kohtunik uuendab punktisummat või muudab mängu staatust, saab kasutajaliides värskenduse WebSocketi kaudu koheselt.

Kasutada seda:

  • Installige oma esiplaaniprojektile .
  • Looge oma Directus'e protsessiga WebSocketi ühendus.
  • Tellige reaalajas toimuvate sündmuste "skoorid" või "sobib".
  • [[Nikolai Roerich]] püüdis mõista ja mõtestada [[inimese]] eksistentsi.

See lähenemine välistab küsitluse vajaduse ja tagab, et kõik tulemustabelit jälgivad seadmed jäävad sünkroonituks. Suurte turniiride puhul, kus on palju samaaegseid matše, kaaluge ribalaiuse vähendamiseks WebSocketi kanalite kasutamist, mis on mõeldud konkreetsetele sobivuse ID- dele.

Deep Dive: WebSocket Connect Management

Tugeva tulemustabeli ehitamisel langeb käepidemeühendus graatsiliselt. Telli veebisocketi kliendilt [FLT: 4] ja [FLT: 5] sündmused. Lahtiühendamisel rakenda eksponentsiaalset varuühendust – alusta 1- sekundilise viivitusega ja kahekordista kuni 30 sekundiga. Directuse reaalaja moodul saadab vaikimisi südamelöögid iga 30 sekundi järel; kui sul jääb kolm südamelööki vahele, on turvaline eeldada, et ühendus on kadunud. Näita tulemustabelis väikest "ühenduse kadumist" indikaatorit, et töötajad teaksid võrku kontrollida. Kui kasutajaliides jääb maha, võib naasta REST API- i küsimisele iga paari sekundi tagant.

Frontend Display loomine

Frontend on see, mida mängijad, kohtunikud ja pealtvaatajad tegelikult näevad. Selle võib luua veebirakendusena, spetsiaalse tahvelarvuti liidesena või isegi suure ekraani armatuurlauana.

Raamistiku valimine

Töötab iga kaasaegne JavaScripti raamistik (React, Vue, Svelte või isegi vanilla JS). Kui sinu turniiri personal on mittetehniline, võib olla kõige lihtsam kasutada lihtsat HTML + CSS- lehekülge väikese skriptiga. Täpsema interaktiivsuse jaoks on React with Directus SDK kindel valik. Vue 3 oma koosseisuga API paarib hästi ka reaalaja andmetega, kasutades või kohandatud Reactive.

Kerget lahendust eelistavate meeskondade puhul tuleb kasutada Alpine.js- see võimaldab lisada reaktiivset käitumist staatilisele HTML- ile ilma ehitamissammuta. See võib olla ideaalne väikeste turniiride puhul, kus soovid lennu ajal tulemustabelit muuta.

Integreerimine Directus SDK-ga

Directus pakub nii REST-klienti kui ka reaalajas klienti. Tulemustabeli jaoks on tavaliselt:

  • Kasuta REST API-d, et laadida algsed matšiandmed ja meeskonna info.
  • Lülitage WebSocket'i tellimustele reaalajas värskenduste jaoks.
  • Kujunda kasutajaliides, et uuendada skoore ilma vilkumata (CSS-i üleminekud aitavad).

Integratsioonivoo näide:

  1. Autentige kasutajaliides (vajadusel) või kasutage avalikku kirjutuskaitstud API-märki.
  2. Aktiivse sobivuste nimekirja tõmbamine Directusest.
  3. Iga aktiivse mängu puhul kuvage kaks meeskonda ja nende praegused skoorid.
  4. Telli muudatused "skooride" kogumisel ja edastage tulemus kuva uuesti.

Kasutajaliidese skooride värskenduste säilitamiseks: kui mõne millisekundi jooksul saabub mitu skoorisündmust, rühmitage need üheks renderdamiseks, kasutades debounced oleku värskendust (nt requestAnimationFrame või 100 ms debounce).

Kasutajaliidese projekteerimine

Selgus on esmatähtis. Hea tulemustabeli paigutus sisaldab järgmist:

  • Meeskonna nimed (suured, kontrastsed värvid).
  • Tulemusnumbrid (väga suured, kergesti loetavad kaugusest – minimaalselt 80px font esmasteks skoorideks).
  • Tikkumise taimer (lugemisaeg või möödunud aeg).
  • „Olukorra” indikaator (nt „mängimine”, „murdmine”, „lõplik”).
  • Vabatahtlik: kõrvaldamisloendurid või surma-surma suhtarv üksikute statistikaandmete puhul.

Kasuta suure kontrastsusega värve (nt valge tekst tumedal taustal) ja väldi ekraani segadust. Vastupidav disain tagab, et tulemustabel näeb hea välja nii 50- tollisel teleril kui ka kohtunikutahvlil. Teleriekraanide puhul arvesta ühe sobituse vaatega 16: 9 kuvasuhet; mobiilsete kohtunike ekraanide puhul kasuta mitme mängu puhul kompaktsemat kaartidega paigutust.

Skooride, Timersi ja sobivuse kuvamine

Andmevoog töötab nii:

  • Kohtunik sisestab skoori (või elimineerimissündmuse) mobiilivormile. POST päring läheb Directus API- le.
  • Directus salvestab plaadi ja edastab WebSocketi kaudu "loo" sündmuse.
  • Frontend võtab ürituse vastu, uuendab oma kohalikku riiki ja edastab skoori uuesti.
  • Taimerit saab käsitleda kliendipoolselt (kasutades kohalikku kella) või serveripoolselt Directus väljadega algus-/lõppaegadel. Täpsuse huvides kasuta serveripoolset lähenemist: kui vaste algab, määrab kohtunik [FLT: 7]] välja ja kasutajaliides arvutab sellest järelejäänud aja. Server võib ka [FLT: 8] välja iga sekundi järel uuendada Directus voo või väikese kohandatud lõpp- punkti abil.

Tikkumise staatuse saamiseks lase kohtunikel muuta Directuse olekuvälja (nt seadistamisest kuni mängimiseni). Tavaline muster on näha nuppudega kontrollpaneeli, et taimerit käivitada/ peatada, juurdehindlusi teha ja karistusi välja kutsuda. Ehita see eraldi leheküljena, mis nõuab autentimist – kasuta selle kaitsmiseks Directuse sisseehitatud rollipõhiseid õigusi.

Kohandatud tulemustabeli põhiomadused

Lisaks põhitõdedele kaaluge neid täiustatud funktsioone, et muuta oma turniir silma paistma:

  • Mitme mänguvaatega ] – kui sinu turniir jookseb üheaegselt väljadega, võib tulemustabel näidata kõiki aktiivseid vasteid või lubada väljade vahel lülitumist. Kasuta mitmeväljaliste kuvade korral 2x2 või 3x2 paneeliga ruudustikupaigutust.
  • Replay or slow-motion – mitte tulemustabeli enda jaoks, kuid andmekiht võib toetada "undo" toiminguid (ajaloo salvestamist), et saaksite vigu parandada. Rakenda kõigi skoorimuutuste logi ajatemplitega; juhtpaneel võib sisaldada nuppu "undo last", mis pöörab tagasi viimase sündmuse.
  • Sponsori integreerimine— sponsori logode pööramine külgribal või matšide vahel. Kasuta Directus'e kogu "sponsorite" jaoks, millel on pildiväli ja sorteerimisjärjestus. Frontend võib näidata juhuslikku sponsorit iga 30 sekundi järel või näidata neid tiksutis.
  • Avalik rakendusliides voogesituseks—kui edastate turniiri veebis, põimige tulemustabeli katvus iframe'i või kohandatud RTMP-ga. Paljud voogedastusvahendid nagu OBS suudavad jäädvustada brauseriakna; kujundage tulemustabel läbipaistva taustaga, nii et see kataks mänguvoo.
  • Pabervarundamisrežiim – isegi digitaalsüsteemi puhul on alati olemas trükitud tulemuskaart ja pliiats valmis. Lisaks loo lihtne võrguühenduseta varuleht, mis salvestab võrgu naasmisel hinded lokaalhoidlasse ja sünkroonib.

Täiustatud: Livestreamsi tulemustabeli ülekate

Kui soovid turniiril otseülekandena liikuda, loo eraldi HTML- lehekülg, mis on optimeeritud OBS- i ülekatte jaoks. Eemalda kõik taustad, kasuta absoluutset positsioneerimist ning näita CSS- i muutujaid meeskonna värvide ja hinnete jaoks, et voogedastusmeeskond saaks neid hõlpsasti kohandada. Kasuta läbipaistvat koos - ga. Põimi see lehekülg OBS- i brauseriallikaks ning seda uuendatakse reaalajas, kui skoorid muutuvad.

Rakendamise etapid

Järgige seda struktureeritud protsessi, et ehitada oma tulemustabel nullist kuni go-live.

1. samm: turniiride reeglite ja skoori määratlemine

Enne koodi kirjutamist kirjuta täpselt, kuidas punktisumma toimib. Kas punkt nõuab lipu puudutamist? Kas on olemas halastusreegel? Kuidas lahendatakse ületunnitöö seoseid? See reegel määrab sinu andmemudeli. Kui näiteks elimineerimispunktid loevad, tuleb elimineerimissündmuste jaoks eraldi kogumine. Samuti tuleb määrata ajapiirangud, karistuspunkti mahaarvamised ja kõik eristsenaariumid, näiteks äkksurm.

2. samm: Directus kollektsioonide seadistamine

Logi sisse oma Directus projekti ja loo eelnevalt kirjeldatud kogud. Lisa valideerimisreeglid, näiteks peavad hinded olema mittenegatiivsed täisarvud. Määra "referee" rolli õigused, et võimaldada kirjutamisõigust hinde ja sobivuse olekule, samas kui "avalik" roll (mida kasutab kasutajaliides) on kirjutuskaitstud. Kasuta Directuse väljade õigusi, kui mõni välja (näiteks mängija kontaktinfo) peaks olema peidetud.

3. samm: ehitage API lõpp-punktid või kasutage Directus SDK-d

Directuse genereeritud REST- i lõpp-punkte saab kasutada otse kasutajaliidesest või luua kohandatud API- sid, kui vajad täiendavat äriloogikat (nt mitme sündmuse kogusummade arvutamiseks). Enamiku turniiride puhul piisab sisseehitatud REST- i ja WebSocketi lõpp-punktidest. Autentimise ja reaalajas tellimise lihtsustamiseks kasuta Directus SDK[[ FLT:1]]. Kui vajad serveripoolset taimeri sünkroonimist, loo Directuse kohandatud lõpp- punkt, mis uuendab iga sekund mõne cron- töö või voo kaudu.

4. samm: luua eesliinikomponendid

Loo pealtvaatajatele kuvaleheküljed ja kohtunikele mõeldud juhtpaneel. Hoia pealtvaataja vaade ainult loetav ning keskendu suurtele, selgetele elementidele. Juhtpaneel võib olla kompaktsem nuppude ja vormidega. Kasuta CSS- animatsioone skoori muutmiseks (nt lühikest välgatust punktisummade korral). Juhtpaneeli puhul kaalu suurte nuppudega mobiiliesma kujunduse kasutamist, mida saab isegi kindaid kandes hõlpsasti puudutada.

5. samm: testimine reaalsete vastetega

Käivita harjutusmatš kohtunike ja mängijatena tegutsevate vabatahtlikega. Simuleeri erinevaid stsenaariume: kiired skoorimuutused, mitu välja, penaltikõned ja võrguprobleemid. Kontrolli, et WebSocket taasühendaks ühenduse katkemisel automaatselt. Testi tagasivõtmisvõimalust (kui see on rakendatud) ja veendu, et lõplikke skoori ei saa muuta pärast matši lõppu. Testi ka võrgutasaldust: eemalda võrk ja kontrolli, et tulemustabel näitab endiselt viimaseid teadaolevaid punkte ning et juhtpaneel saab muudatusi hiljem sünkroneerida.

6. etapp: personali lähetamine ja rongid

Paiguta kasutajaliides kohalikus serveris või pilvemasinas. Võrguühenduseta sündmuste korral käivita otserakendus ja kasutajaliides kohalikus sülearvutis WiFi- levialaga. Kasuta Docker Compose' i, et ühendada Directus ja kasutajaliidese jaoks kerge veebiserver (näiteks Nginx või Caddy). Harjuta kohtunikke, kuidas juhtpaneeli kasutada – tee see võimalikult lihtsaks: üks puudutamine meeskonna skoori suurendamiseks, üks nupp taimeri käivitamiseks/ peatamiseks. Trüki kiirrekteeri viitekaardid. Süsteemi täieliku rikke korral treeni ka varumängijat.

Turvalisus ja load Directus'es

Kuna tulemustabel on elav süsteem, mida saab kasutada mitme rolliga, on turvalisus väga oluline. Alusta kolme Directuse rolli loomisest:

  • ]Administraator ] – täielik juurdepääs kõikidele kogudele ja seadetele (kasutatakse turniiri korraldajate poolt).
  • Kohtunik ] – kirjutage juurdepääs punktidele, matši staatusele, karistustele ja matšisündmustele.
  • Avalik – ainult lugemisõigusega juurdepääs punktidele, mängudele (ainult need, mille staatus on "otse" või "valmis"), meeskondadele ja mängijatele.

Kasuta Directuse õiguste süsteemi nende rakendamiseks kogu tasandil. Lisaturvalisuse tagamiseks piira kohtunike ligipääsu IP- aadressiga, kui juhtpaneeli kasutatakse ainult konkreetsetel tahvelarvutitel. HTTPS- i lubamine oma Directuse näitel, eriti kui sa seda internetti voogesituseks kasutad.

Tulemuslikkuse optimeerimine live-tulemustabelite jaoks

Turniiril võib korraga toimuda kümneid matše. WebSocketi voo reageerimiseks:

  • Tellige ainult need kogud, mis sageli muutuvad (nt FLT:12 ja FLT:13), vältige staatiliste kogude tellimist nagu FLT:14, kui need ei uuene sündmuse ajal.
  • Kasuta Directuse filtriparameetreid, et tellida ainult asjakohaseid kirjeid. Näiteks tellige müra vähendamiseks filtriga .
  • Kasutajaliidese kasutajaliidese värskendused eemaldatakse. Kui sama animatsiooniraami raames saabub mitu punktisumma sündmust, pakk need ühte DOM- i värskendusse.
  • Vahetage meeskonna nimed ja logod brauseri lokaalsesStorage'is, et neid ei oleks vaja iga ühendusega tõmmata.
  • Väga suurte turniiride (sadade mängijate) puhul paginate mängijate statistikat ja laadige need nõudmisel.

Näpunäiteid eduka rakendamise kohta

Järeldus

Directusele ehitatud kohandatud tulemustabelisüsteem muudab paintballi turniiri kaootilisest manuaalsest skoorist professionaalseks, kaasahaaravaks kogemuseks. Andmemudeli omamine ja reaalajas uuenduste kasutamine võimaldab sul täielikult kohaneda mis tahes reeglitega, hoides samal ajal mängijaid ja pealtvaatajaid kursis iga sekundiga. Siin kirjeldatud sammude abil – andmete modelleerimisest kuni kasutuselevõtuni – saad luua tulemustabeli, mis töötab usaldusväärselt turniiripäeval ja avaldab muljet kõigile väljakul.

Edasiseks lugemiseks tutvuge Directuse veebilehega, FLT:1, FLT:2APPA turniirireeglitega ja praktiliste veebiarendusõpetustega reaalajas armatuurlaudade ehitamisest koos FLT:4] Vue.js või ]React ]. Teie järgmine paintballi turniir ei näe kunagi sama välja.