Luodaan mukautettu tulostaulu järjestelmä Paintball turnaus

Miksi tulostaulun sisältö on mukautettu?

Paintball-pelissä ottelut ovat nopeita ja päätökset tapahtuvat sekunneissa. Pelitulostaulut on yleensä suunniteltu perinteisiin urheilulajeihin, kuten koripalloon tai jalkapalloon, eikä niissä ole joustoa, jota tarvitaan väripallon uniikkeihin pelitiloihin.

Kun mukautettu ratkaisu, voit myös omistaa tiedot. Voit myöhemmin analysoida match histories, pelaaja suorituskyky ja turnaustrendit. Jotain mahdotonta kertakäyttöinen paperi arkkia tai suljettuja omia järjestelmiä. Moderni päätön CMS kuten Directus tekee tämän paitsi mahdollista, mutta toistettavissa ympäri tapahtumia.

Opastustulostaulun taustaosaa varten

Directus on avoin lähdekoodi, jonka headless CMS toimii tehokkaana taustaosana tulostaulusovelluksellesi. Se tarjoaa puhtaan, käyttäjäystävällisen käyttöliittymän hallinnoijille, jotka voivat hallita joukkueita, otteluita ja pisteytyksiä kirjoittamatta yhtä koodiriviä. Sen REST- ja GraphQL-rajapinnat yhdistettynä reaaliaikaiseen WebSocket-tukeen tekevät siitä ihanteellisen valinnan live-tulostaulujärjestelmälle.

Suoran projektin perustaminen

Voit ajaa Directusta omalla palvelimellasi (itsehostamallasi) tai käyttää Directus Cloud -palvelua hallitun kokemuksen saavuttamiseksi. Turnauksen yhteydessä olisi parempi, että itse isännöit paikallista verkkoa, jotta vältät latenssin.

  1. Asenna Directus Dockerin kautta tai suorien Node.js-käyttö. virallinen pikakäynnistysopas hahmotellaan prosessi minuutteina.
  2. Aseta tietokanta (PostgreSQL, MySQL, SQLite...SQLite on ihanteellinen offline-käyttöön).
  3. Aseta admin käyttäjä ja luoda projekti erityisesti turnaukseen.
  4. Ota käyttöön Realtime... --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Datamallin suunnittelu

Tulostaulusi on dataskeema olisi peilaamaan rakennetta turnauksen. Luo kokoelmia (tables) Directus varten:

Käytä dirtus-in-suhdekenttiä (monen kesken, monen kesken) näiden kokoelmien linkittämiseksi. Esimerkiksi Match-pelissä voi olla kaksi tiimiä (tai useampia monitiimiformaatteja) ja useita pisteytyksiä, jotka on tallennettu eri aikoina. Turnaus kokoelma jos aiot suorittaa useita tapahtumia samasta Directus instancent.Jokainen turnaus voi olla oma aikataulu ja säännöt.

Aseta oikeudet niin, että vain oikeaksi todistetut tuomarit voivat kirjoittaa pisteitä, kun taas julkinen tulostaulu Frontend tarvitsee vain lukea pääsy uusimmat tiedot. Voit myös luoda ...scorekeeper.. rooli, jossa on rajoitettu kirjoitus pääsy ottelun tila ja tulokset vain.

Reaaliaikapäivitykset suoralla reaaliaikaisella

Paintball turnaukset liikkua nopeasti ...viiveet pisteet näyttö aiheuttaa sekaannusta. Reaaliaikainen moduuli Kun tuomari päivittää pisteet tai ottelun tilan muutokset, etusivu saa päivityksen heti WebSocketin kautta.

Käyttääksesi sitä:

Tämä lähestymistapa poistaa tarpeen gallup ja varmistaa, että jokainen laite katselee tulostaulu pysyy synkronoitu. Suuria turnauksia monia samanaikaisia otteluita, harkita WebSocket kanavien rajattu tiettyjä match IDs vähentää kaistanleveyden.

Syvä sukellus: WebSocket-yhteyden hallinta

Kun rakennat vankka tulostaulu, käsitellä yhteys putoaa hienosti. Tilaa ja [] tapahtumia WebSocket asiakas. Irrottamalla, toteuttaa eksponentiaalinen backoff uudelleenyhteys.Aloita 1 sekunnin viive ja kaksinkertaistaa jopa 30 sekuntia. Directus. Reaaliaikainen moduuli lähettää sykkeen 30 sekunnin välein oletusarvoisesti; jos et kolme sykettä, se on turvallista olettaa yhteyden on menetetty. Näytä pieni .yhteys menetetty . indikaattori tulostaulun niin henkilökunta tietää tarkistaa verkon. Etupää voi palata kyselyihin REST API muutaman sekunnin välein, jos WebSocket pysyy alas.

Eteenpäin -näytön rakentaminen

Etusivu on mitä pelaajat, tuomarit ja katsojat todella nähdä. Voit rakentaa sen web-sovellus, omistettu tabletti käyttöliittymä, tai jopa suuri näyttö kojelauta.

Puitteiden valinta

Mikä tahansa moderni JavaScript-kehys (React, Vue, Svelte tai jopa vanilja JS) toimii. Jos turnauksen henkilökunta ei ole tekninen, yksinkertainen HTML + CSS-sivu pieni skripti voi olla helpoin. Kehittyneemmän interaktiivisuuden vuoksi React with the Directus SDK on vankka valinta. Vue 3 sen Composition API myös paria hyvin reaaliaikaisia tietoja käyttäen tai mukautetun reaktiivisuus.

Joukkueille, jotka haluavat kevyt ratkaisu, harkitse käyttöä Alpine.js. Se voit lisätä reaktiivinen käyttäytyminen staattisen HTML ilman rakentaa askel. Tämä voi olla ihanteellinen pienille turnauksille, joissa haluat muokata tulostaulun lentää.

Integrointi Directus SDK:n kanssa

Directus tarjoaa sekä REST-asiakkaan että reaaliaikaisen asiakkaan. Tulostaulun, you.ll tyypillisesti:

Esimerkki integraatiovirrasta:

  1. Tunnista etusivu (tarvittaessa) tai käytä julkista lukutoistoa.
  2. Nouda nykyinen ottelulista Directukselta.
  3. Näytä jokaiselle aktiiviselle ottelulle kaksi joukkuetta ja niiden nykyiset tulokset.
  4. Tilaa muutokset ... kokoelmassa ja uudelleen pisteet-näytössä.

Säilyttääkseen UPI snappy, erä pisteet päivitykset: jos useita pisteitä tapahtumia tulee muutaman millisekunnin kuluessa, ryhmitellä ne yhteen renderöimällä käyttäen debounced tila päivitys (esim., pyyntöAnimation Frame tai 100ms debounce).

Käyttöliittymän suunnittelu

Selkeys on ensiarvoisen tärkeää. Hyvä tulostaulun pohjaratkaisu sisältää:

Käytä korkean kontrastin värejä (esim. valkoinen teksti tummalla taustalla) ja vältä sotkemista näytön. Responsive suunnittelu takaa tulostaulun näyttää hyvältä sekä 50 tuuman TV ja erotuomari tabletti. TV-näytöissä, harkitse 16:9 kuvasuhde yhden ottelun näkymä; mobiili erotuomari näytöt, käyttää enemmän kompakti asettelu välilehtiä useita otteluita.

Näytetään tulokset, ajastimet, ja ottelun tila

Tietovirta toimii näin:

Jos haluat ottelun tilan, anna tuomarien muuttaa tilakenttää Directus (esim. ... perustamisesta .... ...on .....on .....................................................................................................................................................................................................................

Oman tulostaulujärjestelmän keskeiset ominaisuudet

Perusten lisäksi, harkita näitä kehittyneitä ominaisuuksia tehdä turnauksen erottuu:

Edistynyt: Livestream-verkon tulostaulun overlay-järjestelmä

Jos aiot livestream turnauksen, luoda erillinen HTML-sivu optimoitu OBS overlay. Poista kaikki taustat, käytä absoluuttista paikannusta, ja paljastaa CSS muuttujat joukkueen värejä ja tuloksia, jotta streaming joukkue voi säätää niitä helposti. Käytä läpinäkyvä [ [. Upota tämä sivu selain lähde OBS, ja se päivittää reaaliaikaisesti kuin tulokset muutos.

Täytäntöönpanovaiheet

Seuraa tätä jäsenneltyä prosessia, jotta tulostaulusta voi tulla elinikäinen.

Vaihe 1: Määrittele turnauksen säännöt ja pisteytys

Ennen kuin kirjoitat mitään koodia, dokumentti toimii tarkasti. Onko piste, joka vaatii koskettelua lippuun? Onko armosääntö? Miten ylityösiteet ratkaistaan? Tämä sääntö määrää tietomallisi. Esimerkiksi, jos eliminointipisteet lasketaan, tarvitset erillisen kokoelman eliminointitapahtumiin. Määrittele myös aikarajat, rangaistuspistevähennykset ja mahdolliset erityisskenaariot, kuten äkillinen kuolema.

Vaihe 2: Aseta suora kokoelmia

Kirjaudu Directus-projektiisi ja luo aiemmin kuvatut kokoelmat. Lisää validointisäännöt. Esimerkiksi pisteet on oltava ei-negatiivisia kokonaislukuja. Määritä oikeudet . Tuomarin rooliin, jotta kirjoitusoikeudet ja ottelun tila voidaan määrittää, kun taas ...Public... roolilla (jota käytetään etupuolella) on vain luku-käyttö. Käytä Directus. kentän tason oikeuksia, jos jotkin kentät (kuten pelaajan yhteystiedot) pitäisi piilottaa.

Vaihe 3: Rakenna API-päätepisteet tai käytä Directus SDK:ta

Voit joko käyttää Directus... luotuja REST-päätetapahtumia suoraan etulinjasta, tai rakentaa mukautettuja API-päätepisteitä, jos tarvitset lisäliiketoimintalogiikkaa (esim. laskeaksesi summat useista tapahtumista). Directus SDK yksinkertaistaa tunnistautumista ja reaaliaikaisia tilauksia. Jos tarvitset palvelimen puolella olevan ajastimen synkronoinnin, luo Directus-ohjelmallinen päätepiste, joka päivittää joka sekunti cron-työn tai Flow-järjestelmän avulla.

Vaihe 4: Kehitetään rintamakomponentteja

Luo näyttösivut katsojille ja tuomarien ohjauspaneelille. Pidä katsojan katseluku vain ja keskity suuriin, selkeisiin elementteihin. Ohjauspaneeli voi olla kompaktimpi painikkeilla ja muodoilla. Käytä CSS-animaatioita pisteiden muutoksiin (esim. lyhyt salama, kun pisteet muuttuvat). Ohjauspaneelin kohdalla kannattaa käyttää mobiilia ensimmäistä suunnittelua, jossa on suuret painikkeet, joita voidaan käyttää helposti käsineiden käytön aikana.

Vaihe 5: Testi todellisilla tulitikuilla

Suorita harjoitus vastaa vapaaehtoisia toimivat tuomarit ja pelaajat. Simuloi erilaisia skenaarioita: nopeat pisteet muutokset, useita kenttiä, rangaistuspuhelut ja verkko-ongelmia. Tarkista, että WebSocket kytkee uudelleen automaattisesti, jos yhteys laskee. Testaa perua ominaisuus (jos toteutetaan) ja varmista, että lopullisia tuloksia ei voi muuttaa ottelun päätyttyä. Testaa myös offline varalla: poista verkko ja tarkista, että tulostaulu näyttää vielä viimeiset tiedossa olevat tulokset ja että ohjauspaneeli voi jonottaa muutoksia synkataan myöhemmin.

Vaihe 6: Henkilöstön lähettäminen ja junahenkilöstön lähettäminen

Käytä etupäätä paikallisen palvelimen tai pilvipalvelun. Offline-tapahtumiin suorita Directus ja etupää paikallisella läppärillä WiFi-hotspot-pisteellä. Käytä Docker-komponenttia nippuun Directus ja kevyt web-palvelin (kuten Nginx tai Caddy) etupuolelle. Tee ohjainpaneelin käytöstä mahdollisimman yksinkertaiseksi: yksi napauta joukkueen pisteitä, yksi painike käynnistää/pysäköidä ajastin. Tulosta pika-referenssikortit. Myös valmenna varapisteytysjärjestelmälle järjestelmän täydellisen toimintahäiriön varalta.

Turvallisuus ja luvat Directusissa

Koska tulostaulu on monissa rooleissa käytettävissä oleva live-järjestelmä, turvallisuus on ratkaisevan tärkeää. Aloita luomalla kolme Directus-roolia:

Käytä Directus. Käyttöoikeusjärjestelmä valvoa näitä keräys tasolla. Lisäturvan, rajoittaa tuomarien pääsy IP-osoitteen, jos ohjauspaneeli käytetään vain tiettyihin tabletteihin. Ota HTTPS teidän Directus instanssi, varsinkin jos altistat sen internetiin streaming overlays.

Suorituskyvyn optimointi eläville tulostauluille

Turnaus voi olla kymmeniä otteluita tapahtuu samanaikaisesti. Jotta WebSocket-syöte reagoi:

Vinkkejä onnistuneeseen täytäntöönpanoon

Päätelmä

Omistamalla datamallin ja hyödyntämällä reaaliaikaisia päivityksiä, saat täydellisen joustavuuden sopeutua mihin tahansa sääntö asettaa samalla pitää pelaajat ja katsojat tiedot ottelun joka sekunti. Kun vaiheet tässä on kuvattu alkaen data mallintamisesta käyttöönotto. Voit luoda tulostaulun, joka toimii luotettavasti turnauspäivänä ja vaikuttaa kaikkiin alalla.

Lisätietoja Directus-verkkosivusto, APPA-turnauksen säännöt, ja käytännön web-kehitys opetusohjelmia rakennuksen reaaliaikainen kojelauta Vue.js tai Rekry Seuraava paintball-turnaus ei koskaan näytä samalta.