Kodėl svarbu pritaikytas rezultato lentelė

Žaidimai piktbalyje vyksta greitai, o sprendimai vyksta per sekundes. Iš eilės skirtos rezultatų plokštės paprastai skirtos tradiciniams sportams, pavyzdžiui, krepšiniui ar futboloje, ir neturi lankstumo, reikalingos unikaliems žaidimo būdais.

  • Realo laiko rezultatų atnaujinimas kurie iš karto atspindi eliminacijas, vėliavos užėmimus arba taškų nustatytus tikslus.
  • Pagalba daugeliui formatai nuo trijų žmonių komandų iki didelių scenarijų žaidimų be griežtos šablono.
  • Padidėjęs žiūrovų dalyvavimas per dinamišką grafiką, realius laikrodžius ir komandos konkrečias statistikas.
  • Mažesnė žmogaus klaida automatizuojant duomenų įrašą per tabletes arba arbitrus įrenginius.
  • Žinomumo galimybės Parodyti sponsorų logotipus, renginių pavadinimus ir pasirinktus spalvų schemas.

Naudojant pritaikytą sprendimą, jūs taip pat turite duomenis. Galite vėliau analizuoti rungtynų istoriją, žaidėjų rezultatus ir turnyro tendencijas - ką nors neįmanoma su viena kartą panaudotais popieriais lapiais arba uždaromis nuosavybės sistemomis. Šiuolaikinis be galvos CMS, kaip Directus, daro tai ne tik įmanoma, bet ir pakartotinis įvairiuose renginiuose.

Naudokite "Directus" savo rezultatų lentelėje

Directus yra atvirosios kodo be galvos CMS, kuris veikia kaip galingas jūsų rezultatų plokštelės programos pagrindas. Jis suteikia švarus, naudotojo draugiškas sąsajas administruotojams valdyti komandas, rungtynes ir rezultatus, neprašydamas nė vienos eilutės kodo. Jo REST ir GraphQL API, kartu su realaus laiko WebSocket palaikymu, daro jį idealu pasirinkimu gyvajai rezultatų plokštelės sistemai.

Įkūrimas "Directus" projektas

Galite paleisti Directus savo serveriu (sameigame viešame svetainėje) arba naudoti Directus Cloud paslaugą, kad turnyro nustatymu būtų geriau savarankiškai viešai naudotis vietiniu tinklu, kad būtų išvengta vėlybės.

  1. Įdėkite Directus per Docker arba tiesioginį Node.js įrenginį. oficialus greitosios pradangos vadovas per minutę apibūdina procesą.
  2. Konfigurokite savo duomenų bazę (PostgreSQL, MySQL, SQLiteSQLite yra ideali ne internetu naudojimui).
  3. Įkūrite admin vartotoją ir sukurkite projektą, skirtas jūsų turnyrui.
  4. Įjungti Realtime modulį, jei planuojate naudoti WebSockets, kad būtų galima iš karto atnaujinti balsus.

Duomenų modelio kūrimas

Jūsų rezultatų plokštės duomenų schema turėtų atspindėti jūsų turnyro struktūrą.

  • Komandaivardė, logotipas (vaizdo URL adresas), sąrašas (susisiekimas su žaidėjais), pagrindinė spalva.
  • Žaidėjaivardė, skaičius, komanda (susisiekimas), nepaprastosios statistikos (išbraukimas, mirtis, pažeisti).
  • Dvienklisrunda, laukas, pradžia, statusas (laikoma, gyva, baigta, papildoma), trukmė.
  • Išskaičiuotiparygimas (rūšis), komanda (rūšis), rezultato vertė, laiko ženklas (ypač naudingas realiam rezultato įrašiimui), rezultato renginio tipas (eliminatorius, vėliavos užėmimas ir kt.).
  • Baudosneprivaloma, kad būtų galima stebėti pažeidimus (mažąsias, didelės, diskvalifikacijos) su žaidėjais ir rungtynėse.
  • Pasidalyčių įvykiai visų reikšmingų įvykių (balso pokyčių, baudų, laiko pertraukų) įrašas, skirtas atkurti ir audituoti.

Naudokite Directus įterptus ryšių laukus (daugiai į vieną, daugiai į daug) šių rinkinių sujungimui. Turnyras Jei planuojate vykdyti kelis renginius iš tos pačios "Directus" instancijos, kiekvienas turnyras gali turėti savo tvarkaraštį ir taisykles.

Įdėkite leidimus, kad tik autentiškiami teisėjai galėtų rašyti balsus, o viešai skirto balsos plokštės priekyje reikia tik skaityti prieigą prie naujausių duomenų. Taip pat galite sukurti balso gavimo rolę su ribotu rašymo prieiga tik rungtynės statusui ir balsai.

Realybės atnaujinimas su Directus Realybės atnaujinimai

Pentbolais turnyrai greitai judasi. Realo laiko modulys Jei arbitrai atnaujina rezultatą arba rungtynės statusą, frontendas iš karto gauna atnaujinimą per WebSocket.

Naudojant jį:

  • Įdėkite savo frontend projekto.
  • Sukurkite "WebSocket" ryšį su Directus instancija.
  • Pasirašykite į realaus laiko renginių šempų arba pergalvių rinkinį.
  • Klausykite , , ir įvykių ir atitinkamai atnaujinkite interfacialą sąsają.

Šis metodas eliminuoja apklausos poreikį ir užtikrina, kad kiekvienas prietaisas, stebintis rezultatų lentelę, liktų sinchronizuotas.

Gersis: "WebSocket" ryšio valdymas

Kai statysite tvirtą rezultatų plokštę, prijungimas su rankomis žlugs gražiai. Pasirašykite į ir įvykius iš WebSocket kliento. Išjungus, įgyvendinkite eksponencialinį grįžtamąjį ryšįpradėkite 1 sekundės vėlavinimu ir padvigubinkite iki 30 sekundžių. Realaus laiko modulis išmatuojant siunčia širdies plakimus kas 30 sekundžių; jei praleisi tris širdies plakimus, yra saugiau manyti, kad ryšys prarastas. Parodykite mažą s jungimas prarastas rodiklį rezultatų plokštėje, kad darbuotojai žinotų, kaip patikrinti tinklą. Frontendas gali grįžti į REST API apklausą kas kelias sekundes, jei WebSocket lieka žemiau.

Išankstinio ekrano kūrimas

Frontendas yra tai, ką žaidėjai, teisėjai ir žiūrovai iš tikrųjų mato. Galite jį sukurti kaip interneto programą, specialią tabletės sąsają ar net didelį ekrano prietaisų lentelę.

Rinkimas

Bet kuri šiuolaikinė JavaScript sistema (React, Vue, Svelte ar net vanilė JS) bus veiksminga. Jei jūsų turnyro darbuotojai nėra techniniai, paprasčiausias HTML + CSS puslapis su mažu scenariju gali būti lengvesnis. Siekiant pažangios sąveikos, React su Directus SDK yra tvirtas pasirinkimas. Vue 3 su savo Kompozicijos API taip pat puikiai suderina su realaus laiko duomenimis naudojant arba pritaikytą Reactivity.

Komandoms, kurios pageidauja lengvaus sprendimo, apsvarstykite Alpine.jstai leidžia pridėti reakcinį elgesį statiniam HTML be statinio žingsnio. Tai gali būti idealus mažoms turnyroms, kuriose norite iš karto redaguoti rezultatų lentelę.

Integruoti su Directus SDK

Directus teikia tiek REST klientą, tiek real-time klientą.

  • Naudokite REST API, kad įkraustumėte pradinius rungtynės duomenis ir komandos informaciją.
  • Pasikeiskite į "WebSocket" prenumeratą, kad galėtumėte gauti atnaujinimus.
  • Suprojektuokite interfeilią, kad būtų galima atnaujinti balsus be blikščių (CSS perėjimo pagalba).

Pavyzdžiui, integracijos srautas:

  1. Authentify (jei reikia) frontend arba naudoti viešą tik skaitymo API žetoną.
  2. Atneškite dabartinį "Directus" sąrašą.
  3. Kiekvienam aktyviam rungtynui parodykite dvi komandas ir jų dabartinius rezultatus.
  4. Pasirašykite pakeitimus šablinių rinkinyje ir perkelkite rezultatų ekraną.

Norėdami išlaikyti UI greitą, atnaujinkite rinkodaros rezultatus: jei per kelias milisekundas įvyksta daugybės rezultatų įvykių, grupinkite juos į vieną rodinį, naudodamiesi išstojimo būsenos atnaujinimu (pvz., prašykite "AnimationFrame" arba 100ms išstojimo).

Naudotojo sąsajos projektas

Gera rezultatų lentelės išdėstymas apima:

  • Komandų pavadinimai (didieji, kontrastuojantys spalvos).
  • Skolo skaičius (labai didelis, lengvai perskaityti iš atstumominimalus 80px rašytojas pirminėms skolo skirtoms).
  • Dalyvavimo laikrodis (išskaičiuotas arba praėjus laikas).
  • statuso rodiklis (pvz., Playing, Break, Final).
  • Privaloma: atskirų statistikos duomenų atveju - eliminuotųjų skaičiavėjų arba žūties ir mirties santykis.

Naudokite kontrastines spalvas (pvz., baltą tekstą tamsiame fonu) ir vengkite ekraną apvaldyti. Atsakingas dizainas užtikrina, kad 50 colių televizoriaus ir arbitražo kompiuterio plokštelės rezultato lentelė atrodytų gerai. Televizijos ekranams atsižvelkite į 16:9 rapo santykį su vienu rungtynės vaizdu; mobiliniams arbitražo ekranams naudokite kompaktsesnį išdėstymą su daugiomis rungtynėms skirtomis lentelėmis.

Parodant rezultatus, laiko laikrodžius ir rungtynės statusą

Duomenų srautas veikia taip:

  • Arbitras įvedia rezultatą (arba eliminuotąjį įvykį) mobilioje formoje.
  • Directus išsaugoja įrašą ir transliuoja "create" renginį per "WebSocket".
  • Pratinė dalis gauna renginį, atnaujina savo vietos būklę ir atveria rezultatą.
  • Laikrodis gali būti tvarkomas klientų pusėje (naudojant vietinį laikrodį) arba serverio pusėje su "Directus" laukiais pradinio ir pabaigos laikais. tikslu, naudokite serverio pusėje požiūrį: kai prasideda rungtynių, teisėjas nustato "FLT:7" lauką, o frontendas apskaičiuoja likusią laiką iš to. Serverius taip pat gali atnaujinti "FLT:8" lauką kas sekundę per "Directus" srautą arba mažą užsakomą galutinį tašką.

Žaidimo statusui leiskite arbitrams pakeisti statusą Directuse (pvz., nuo setup iki playing iki finished). Dažnas būdas yra turėti control panel matymą arbitrams su mygtais pradėti/stoti laikrį, padidinti balų ir šaukti baudą.

Pagrindinės pasirinktinio rezultatų kortelės sistemos ypatybės

Be pagrindinių dalykų, apsvarstykite šias pažangias funkcijas, kad jūsų turnyras būtų išskirtinis:

  • Daug kartų matomas rungtynėsjei turnyras vyksta vienu metu, rezultatas gali parodyti visas aktyvias rungtynes arba leisti perjungti tarp laukų.
  • Pertraukiant arba lėtai judėdamine dėl pačios rezultatų plokštės, bet duomenų sluoksnis gali remti undo veiksmus (paminkimo istoriją), kad galėtumėte ištaisyti klaidas. Įgyvendinkite visų rezultatų pokyčių įrašą su laiko ženklomis; valdymo panele gali būti įtrauktas undo paskutinį mygtuką, kuris atšaukia naujausią įvykius.
  • Sponsorių integracijaProstuokite sponsorų logotipus puslapio juostėje arba tarp rungtynių. Naudokite Directus kolekciją sponsorams su vaizdų laukiniu ir sorteiruo. Frontendas gali rodyti atsitiktinį sponsorą kas 30 sekundžių arba rodyti juos žvejoje.
  • Viešoji transliuotojo tinklalapio APIjei transliuojate turnyrą internetu, įkėkite rezultatų plokštės aplenkymą su iframe arba pritaikytą RTMP. Daugelis transliacijos įrankių, tokių kaip OBS, gali užfiksuoti naršyklės langą; dizainuokite rezultatų plokštę skaidru fonu, kad ji aplenktų žaidimo maitinimą.
  • Papiršo atsarginės atsargos režimas net su skaitmenine sistema, visada turėkite spausdytą rezultatų kortelę ir rašiklę paruoštą. Be to, sukurkite paprastą ne interneto tinkląį atėjimo puslapį, kuris saugosi rezultatų vietos saugykloje ir sinchronizuoja, kai grįžta tinklas.

Išankstinis: Livestreams skirtas skaitymo lentelė

Jei planuojate savo turnyro transliuoti tiesiogiai, sukurkite atskirą HTML puslapį, optimizuotą OBS viršūnui. Ištrinkite visus fonus, naudokite absoliučią pozicionuojimą ir atskirinkite CSS kintamuosius komandos spalvų ir rezultatus, kad transliuojantysis komanda galėtų juos lengvai pritaikyti. Naudokite skaidrus su . Įkreipiate šį puslapį kaip naršyklės šaltinį OBS, ir jis atnaujins realiu laiku, kai pasikeis rezultatas.

Įgyvendinimo žingsniai

Sekite šį struktūrizuotą procesą, kad iš naujo sukursite savo rezultatų tabulę ir pradėsite gyventi.

1 žingsnis: nustatykite turnyro taisykles ir rezultatą

Prieš rašydami bet kokį kodą, dokumentuokite, kaip tiksliai veikia skaitymo rezultatas. Ar taškas reikalauja paliesti vėliavą? Ar yra gailestingumo taisyklė? Kaip išsprendžiami viršvalandiniai ryšiai? Ši taisyklė diktuoja jūsų duomenų modelį.

Pavyzdžiui, jei eliminuoti taškai yra skaičiuojami, jums reikia atskiro rinkinio eliminuoti įvykiams. Taip pat apibrėžkite laiko ribas, baudų taškų atskaitymus ir bet kokius specialius scenarijus, tokius kaip staigus mirtis.

2 žingsnis: Įkūrite "Directus" kolekcijas

Įskokite į savo projektą "Directus" ir sukursite anksčiau aprašytus kolekcijas. Įdėkite patvirtinimo taisykles. Pavyzdžiui, balsai turi būti ne neigiami visieji skaičiai. Konfigurokite leidimus refere vaidmenui, kad būtų galima rašyti į balsas ir rungtynės statusą, o public vaidmenis (kurią naudoja frontendas) turi tik skaitymo prieigą. Naudokite "Directus" lauko lygio leidimus, jei kai kurie laukai (pvz., žaidėjų kontaktinės informacijos) turi būti paslėpti.

3 žingsnis: sukurkite API galutinius taškus arba naudokite Directus SDK

Galite naudoti Directus sukurtus REST galutinius taškus tiesiogiai iš priekinio pakilo arba sukurti pritaikytus API galutinius taškus, jei jums reikia papildomos verslo logikos (pvz., apskaičiuoti sumą iš daugelio renginių). Daugeliui turnyrų pakanka integruotų REST ir WebSocket galutinių taškų. Directus SDK Jei jums reikia sinchronizuoti serverio pusės laikrodį, sukurkite "Directus" užsakomą galutinį tašką, kuris kiekvieną sekundę atnaujina per cron darbą arba srautą.

Ketvirtoji žingsnis: sukurti priekinio lygio komponentus

Įdaryti žiūrovų ekranų puslapius ir valdiklių valdymo panelą. Laikykite žiūrovo vaizdą tik skaitomą ir sutelkite dėmesį į didelius, aiškius elementus. Valdiklio panelis gali būti kompaktiesnis su mygtukomis ir formais. Naudokite CSS animacijas, kad pasikeistų rezultatas (pvz., trumpas žvilgsnis, kai rezultatas padidėja). Valdiklio panelui apsvarstykite naudoti mobilią pirmąjį dizainą su dideliais mygtukomis, kuriuos galima lengvai paspausti dar dėvėdami rankenėlės.

5 žingsnis: išbandykite tikrus rungtynius

Praktikuokite rungtynes savanoriais, veikiančiais kaip teisėjai ir žaidėjai. Simuliruokite įvairius scenarijus: greitas rezultatas, daugelį laukų, baudų skambučius ir tinklo problemas. Patikrinkite, ar "WebSocket" automatiškai vėl prijungia, jei jungtis sumažėja. Pasistokite atšaukti funkciją (jei įgyvendinama) ir įsitikinkite, kad galutiniai rezultatai negali būti pakeisti po rungtynės pabaigos. Taip pat išbandykite nešalinę atšaukimą: išjungkite tinklą ir patikrinkite, kad rezultatas dar rodo paskutinį žinomas rezultatas ir kad valdymo panelas gali eilės pakeitimus, kurie vėliau sinchronizuojami.

6 žingsnis: Pasitraukite ir treniruokite darbuotojus

Įdiegtumėte frontendą vietiniame serveriui arba debesų hostyje. Uždarbinant ne interneto renginius, paleiskite Directus ir frontendą vietiniame nešiojamuoju kompiuteriu su WiFi šilumos punktu. Naudokite Docker Compose, kad sujungtumėte Directus ir lengvą interneto serverią (pvz., Nginx ar Caddy) prie frontendo. Išmokykite teisėjus, kaip naudoti valdymo skydįPadarykite tai kuo paprasčiau: vieną spustelį padidinti komandos rezultatą, vieną mygtuką pradėti / sustabdyti laikrodį. Spauskite greitą nuorodą kortelę.

Taip pat mokykite atsarginį rezultatą ant popieriaus rankinio sistemos, jei sistema visiškai nesėkės.

Saugumo ir leidimų Directuse

Kadangi rezultato lentelė yra gyva sistema, prie kurios gali pasiekti daug vaidmenų, saugumas yra labai svarbus. Pradėkite nuo trijų Directus vaidmenų kūrimo:

  • Administratoriusvisios kolekcijos ir nustatymų prieiga (turnyro organizatoriai naudojasi).
  • Teisėjasrašykite galimybę susipažinti su rezultatais, rungtynės statusas, baudomis ir rungtynės renginiais.
  • Bendrovė tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, tik skaitykite, ir nedėkite.

Naudokite Directus leidimų sistemą, kad juos vykdytumėte rinkimo lygiu. Papildomo saugumo tikslais apriboti teisėjų prieigą pagal IP adresą, jei valdymo panelas naudojamas tik tam tikruose planšetinėse kompiuteriniuose. Įgalinkite HTTPS Directus instancijoje, ypač jei jį atskleidžiate internete, kad būtų galima srautas.

Gyviųjų rezultatų plokštelės veikimo optimizavimas

Turnyras gali turėti dešimtis rungtynių vienu metu.

  • Nustokite tik kolekcijas, kurios dažnai keičiasi (pvz., FLT:12 ir FLT:13).
  • Naudokite Directus filtro parametrus tik atitinkamoms įrašoms. Pavyzdžiui, nusipirkite į su filtru siekiant sumažinti triukšmą.
  • Jei keli rezultatai įvyksta toje pačioje animacijos sistemoje, juos suderinkite į vieną DOM atnaujinimą.
  • Paslėpkite komandos pavadinimus ir logotipus vietiniu būdu naršyklėje "localStorage", kad jie nebūtų reikalingi kiekviename ryšiui.
  • Labai dideliems turnyriams ( šimtai žaidėjų) atsisiųsti žaidėjų statistiką ir įkelti juos pagal reikalavimą.

Patartis sėkmingai įgyvendinti

  • Laikykis tinklo paprastas. Naudokite vienkartinį WiFi tinklą su tinkamu juostiniu plotu. Neleiskite jungti viešųjų įrenginių; naudokite specialius tabletes, kad būtų galima arbitražuoti.
  • Iš pradžių saugokite duomenis. Įstatyme įnešite visus komandų pavadinimus, rungtynų grafiką ir logotipus į priekį, kad WebSocket išlygas neatkrės ekraną iš karto.
  • Naudokitės atšaukimo. Turi statinį HTML puslapį su rankiniais įvedimo laukais kaip paskutinį sprendimą, sinchronizuotą su vietiniu JSON failu, kuris gali būti įkeltas vėliau.
  • Pasitikrinkite laikraščio tikslumą. Jei naudojate serverio pusės laikrodį, įsitikinkite, kad jūsų "WebSocket" pranešimuose yra tiksli serverio laikas, kad išvengtumėte tarp įrenginių srauto. Kliento metodas tikslesniems intervalams.
  • Apsvarstykite prieinamumą. Naudokite didelius rašymo ženklus ir didelį kontrastą žiūrovams su regėjimo sutrikimais. Suteikite garso atsiliepimą (buzzer) svarbių įvykių, tokių kaip rungtynės pradžia / pabaiga. Naudokite regionus, kad skelbtumėte skoro skaitytojų naudotojams pakeitimus.
  • Planuokite jėgos. Visi įrenginiai turėtų būti visiškai įkrauti ir turėti baterija ir elektros juostelės atsarginius skyrius.
  • Dokumentiruokite savo duomenų modelį. Laikykite kolekcijų ir santykių diagramą, kad būsimieji turnyro organizatoriai galėtų lengvai pakeisti sistemą.

Išvada

Įmonė, kuri yra sukurtas pagal Directus, perkelia "paintball" turnyrą iš chaotiškų rankinių rezultato į profesionalią ir patrauklingą patirtį. Naudojant savo duomenų modelį ir realiu laiku atnaujinančius duomenis, jūs gaunate visišką lankstumą prisitaikyti prie bet kokių taisyklių, o žaidėjus ir žiūrovus informuoti kiekvieną rungtynės sekundę.

Daugiau informacijos galima rasti Directus svetainė, APPA turnyro taisyklės, ir praktiniai tinklalapių kūrimo mokiniai, kuriais siekiama sukurti realų laiko prietaisų plokštes su Vue.js arba ReaguotiJūsų kitas pentrbalo turnyras niekada nebus toks pats.