Miért fontos egy személyre szabott pontszámlap

A paintballban a mérkőzések gyorsak, a döntések másodpercek alatt történnek. A készleteken lévő pontszámlapokat általában a hagyományos sportokhoz, mint a kosárlabda vagy a foci, tervezték, és a paintball egyedi játékmódjainak nem kell rugalmasságát biztosítaniuk.

  • Az eredmény aktuális amelyek azonnal tükrözik a megszüntetéseket, a zászlófoglalásokat vagy a pontokon alapuló célkitűzéseket.
  • Több formátum támogatása3 főből álló csapatoktól a nagy forgatókönyvű játékokiga merev mintát kényszerítés nélkül.
  • A nézők részvételének javítása dinamikus grafikon, élő időzítő és csapatspecifikus statisztikák segítségével.
  • Az emberi hiba csökkentése az adatbevitel automatizálása a tabletta vagy a bíró eszközön keresztül.
  • A márkafejlesztési lehetőségek a támogató logóinak, az események nevekének és a személyre szabott színrendszerek megjelenítése.

A felhasználói szabványos megoldással a adatok is a maga tulajdonában vannak. Később elemzheted a mérkőzés történelmét, a játékosok teljesítményét és a turné tendenciáit - valami lehetetlen egyfelhasználható papírlapokkal vagy zárt, sajátos rendszerekkel. A modern fej nélküli CMS, mint a Directus, nemcsak lehetséges, hanem ismétlődő is az eseményeken keresztül.

A Directus-ot a pontszámlap háttérben használva

A Directus egy nyílt forráskódú, fej nélküli CMS, amely az eredménylap alkalmazásának erős háttérben működik. A rendszer tisztán és felhasználóbarát felületet biztosít a adminisztrátorok számára, hogy egyetlen kódvonalot sem írva kezeljék a csapatokat, a meccseket és a pontszámokat. A REST és a GraphQL API-i, valamint a valós idejű WebSocket támogatása, ideális választásvá teszik a élő eredménylap rendszer számára.

A Directus projekt létrehozása

A Directus-t a saját szerveredben futtathatod (magadobban tárolt) vagy a Directus Cloud szolgáltatást használhatsz kezelhető élményhez. A turné beállítása esetén a késleltetés elkerülése érdekében a helyi hálózaton történő önberuházás lehet előnyös. Kövesse az alábbi lépéseket:

  1. A Directus telepítése Docker-en keresztül vagy a direct Node.js telepítésen keresztül. hivatalos gyorsstart útmutató Minutákban felvázolja a folyamatot.
  2. A adatbázis konfigurálása (PostgreSQL, MySQL, SQLiteSQLite ideális offline használatra).
  3. Készítsen egy admin felhasználót és készítsen egy projektet a turnéra.
  4. Aktívelje a Realtime modulot, ha WebSockets-et szeretne azonnali pontszámfrissítésekhez használni.

Az adatmodell tervezése

A pontszámlapjának adatskémája tükrözi a turné szerkezetét.

  • Csapatoknév, logó (kép URL), listát (játékosokkal való kapcsolat), elsődleges színt.
  • A játékosoknév, szám, csapat (viszony), választható statisztika (kivonások, halálesetek, ütések).
  • A mérőkör, mező, kezdőidő, állapot (megvárás, élő, befejezett, túlórás), időtartam.
  • A pontszámokmérőzés (viszony), csapat (viszony), pontszámérték, időbélyeg (különösen hasznos a live pontszámoláshoz), pontszámot adó eseménytípus (kivonás, zászlófogás stb.).
  • Szabályoka játékos és a mérkőzés közötti kapcsolatok (kisebb, nagyobb, diszkvalifikáció) követése.
  • Összeegyeztető eseményekaz összes jelentős esemény (a pontszámváltozás, a büntetések, a kivonások) naplója a ismétlés és a könyvvizsgálat céljából.

A Directus beépített kapcsolatterületeket (több-egy, sok-sok) használjuk ezeket a gyűjteményeket összekapcsolni. Például egy Matchben két csapat (vagy több csapatformátumban) és több pontszámot rögzíthetnek különböző időpontokban. Turné A versenyeket a versenyeken belül is lehetne kiállítani, ha több eseményet tervez ugyanabban a Directus-eseményben.

Az engedélyeit úgy állítsa be, hogy csak hitelesített bírák írhassanak pontszámokat, míg a nyilvános pontszámpult frontendnek csak a legújabb adatokhoz kell olvasható hozzáférés.

A Directus valós idejű frissítések

A paintball versenyeket gyorsan mozgatják. valós idejű modul Ha egy bíró frissít egy pontszámot vagy egy mérkőzés állapotát, a frontend azonnal kapja a frissítést a WebSocket.

Használat:

  • A frontend projektjebe telepítse a t.
  • Hozz létre WebSocket kapcsolatot a Directus példány.
  • A valós idejű eseményekhez kapcsolódó scores vagy matches gyűjteményre feliratkozzon.
  • Hallgasd meg az , , és eseményeket, és frissítse a felhasználói felületet ennek megfelelően.

Ez az megközelítés megszüntetheti a szavazás szükségességét és biztosítja, hogy minden eszköz, amely a pontszámlapot nézi, szinkronizálódjon. A sok egyidejű meccsekkel rendelkező nagy turnirok esetében fontolja meg a websocket csatornákat, amelyek a specifikus azonosítókkal rendelkeznek, hogy csökkentse a sávszélességet.

A mélymerülés: WebSocket kapcsolatkezelés

A robusztus pontszámlap építéséhez a kézi csatlakozás elegáns módon csökken. A WebSocket ügyfél által előállított és eseményekre feliratkozzon. A szünet esetén az exponenciális visszaállítási kapcsolatot kezdje 1 másodperces késedelmet és duplázza 30 másodpercig. A Directus valós idejű modul alapértelmezve minden 30 másodpercenként küld szívverést; ha három szívverést hagyja ki, biztonságos feltételezni, hogy elvesztette a kapcsolatot. Mutasson egy kis Sonnection lost mutatót a pontszámlapon, hogy a személyzet tudja ellenőrizni a hálózatot.

A frontend visszaeshet a REST API-t pár másodpercenként, ha a WebSocket lemaradt.

A frontend kijelző építése

A frontend az, amit a játékosok, a bírák és a nézők látnak. Web alkalmazás, egy speciális tablett interfész vagy még egy nagy képernyő paneli is lehet.

A keretrendszer kiválasztása

Bármilyen modern JavaScript keretszerkezet (React, Vue, Svelte vagy akár vanilla JS) működik. Ha a turné személyzetének nem technikai, egy egyszerű HTML + CSS oldalt egy kis skriptával lehet a legegyszerűbb. A fejlettebb interaktivitás érdekében a React a Directus SDK-val jó választás. A Vue 3 a Komposíció API-val jól párosodik a valós idejű adatokkal a vagy a személyre szabott Reactivity használatával.

A könnyű megoldást szeretnének használni a csapatok számára. Alpine.jsaz lehetővé teszi, hogy statikus HTML-hez reakciós viselkedést hozzon létrehozni anélkül, hogy egy építő lépés lenne. Ez ideális lehet a kis turnékon, ahol a pontszámlapot azonnal szerkeszteni szeretné.

A Directus SDK-val való integráció

A Directus mind a REST-ügyfél, mind a valós idejű ügyféleket biztosít.

  • A REST API-t használva töltsd be az első mérkőzés adatait és a csapat adatait.
  • Átálljon a WebSocket előfizetésekre élő frissítésekhez.
  • A felhasználói felületet úgy tervezzük, hogy a pontszámokat megcsinálva frissítse (CSS átmenet segítségével).

Példakészlet integrációs áramlás:

  1. A frontend hitelesítése (ha szükséges) vagy a nyilvános olvasható API-jelölés használata.
  2. Hozd a Directus-tól a jelenlegi listát.
  3. Minden aktív meccsnél a két csapatot és a jelenlegi pontszámukat kell megmutatni.
  4. Írja alá a scores gyűjteményben bekövetkezett változásokot, és adja át a pontszámot.

A felhasználói felhasználói felhasználó felület gyorsaként kezelése érdekében, a sorrendfelújítások: ha több pontszám eseménye néhány milisekundon belül történik, csoportosítsák őket egy egységes renderezésbe, a felfüggesztett állapot frissítésével (pl. kérjük az AnimationFrame-t vagy a 100ms-es felfüggesztést).

Használófelület tervezése

A világosság a legfontosabb.

  • Csapat neve (nagy, kontrasztos színek).
  • A pontszámok (nagyon nagy, könnyen olvasható távolról80px font minimum az elsődleges pontszámok esetében).
  • A mérkőzés időzítője (visszatérő számlázás vagy eltelt idő).
  • A status mutató (pl. Playing, Break, Final).
  • Valódi: a kiirtási számolók vagy az egyes statisztikák esetében a halál-halál arány.

Használd a magas kontrasztos színeket (pl. fehér szöveg sötét háttéren) és kerüld a képernyő zűrzavarát. A reagálható tervezés biztosítja, hogy a pontszámpult jó legyen mind a 50 hüvelyi televízió, mind a bíró táblagékon. A televíziós kijelzők esetében 16:9-os képernyős arányt kell figyelembe venni egy mérkőzésből álló képernyővel; a mobil bíró képernyőkkel szemben pedig egy kompaktabb, több mérkőzésre alkalmas lapokkal rendelkező elrendezéssel.

A pontszámok, az időzítések és a mérkőzés állapotának megjelenítése

Az adatáramlás így működik:

  • A bíró egy mobil formában beír egy pontszámot (vagy egy kivonási eseményt).
  • A Directus az előadást tárolja és a WebSocket segítségével közvetíti a create eseményt.
  • A frontend megkapja az eseményet, frissíti a helyi állapotát, és újra adja a pontszámot.
  • A időzítő a kliens oldalon (lokális óra segítségével) vagy a szerver oldalon kezelhető a Directus mezőkkel a kezdő/végidőre. A pontosítás érdekében használja a szerveroldalon megközelítést: amikor a mérkőzés kezdődik, a bíró a mezőt állítja be, és a frontend számít ki a maradék időt ebből. A szerver egy mezőt másodpercenként frissíthet a Directus áramlás vagy egy kis egyedi végpont segítségével.

A mérkőzés állapotához hagyja, hogy a bírák megváltoztassák a Directus állapot mezőjét (pl. a setup-től playing-ig finished-ig). A szokásos mintában az az, hogy a bírák számára egy control panel nézőt használjanak a gombokkal, amelyek a időzítő, a fokozatos pontszámok és a büntetések beállításához alkalmasak. Ezt külön oldalon kell építeni, amely hitelesítést igényel.

A rendes pontszámlap rendszer fő jellemzői

A lényegeken túl, fontolja meg ezeket a fejlett funkciókat, hogy a turnéja kiemelkedjen:

  • Több nézőpontha a turné egyidejűen fut a pályákon, a pontszámlapon láthatóak a teljes aktív mérkőzések vagy a pályák közötti átváltás.
  • Újrajátszás vagy lassú mozgásnem a pontszámlapban, de az adatlap támogathatja a undo műveleteket (tartománytároló) így a hibákat is meg tudja javítani. Az összes pontszámváltozás naplóját az időcímkékkel valósítsa meg; a vezérlőlap tartalmazhat egy undo last gombot, amely visszafordítja a legutóbbi eseményet.
  • Sponszor integrációjaA szponzor logóit egy oldalsó oldalon vagy a mérkőzések között fordítsák. A Directus gyűjteményet használjuk a szponzorok számára egy kép mezővel és sorrendgel. A frontend 30 másodpercenként láthat egy véletlenszerű szponzorot vagy jelölheti őket egy jelölőben.
  • Közös API for streamingha az online tornányt közvetíted, a pontszámlapot iframe-vel vagy egyedi RTMP-vel embedd be. Sok streaming eszköz, mint az OBS, elkaphat egy böngésző ablakot; a pontszámlapot átlátható háttérrel tervezd, hogy átfedje a játékot.
  • Papír biztonsági mentési mód még a digitális rendszerben is mindig legyen nyomtatott jegyjegy és toll kész.

Fejlesztett: Értékpapírok átfedése a élőforrások számára

Ha a turné élőben akar közvetíteni, hozzon létre egy külön HTML oldalt, amely OBS-tökrözőre van optimalizálva. Vedd el minden háttért, használd az abszolút pozícionálást, és mutassa ki a CSS változókat a csapat színekére és pontszámára, hogy a streaming csapat könnyen módosíthassa őket. Használd átlátható t a .

A végrehajtási lépések

Kövesse ezt a strukturált folyamatot, hogy az eredménylapot a semmiből az életre építse.

1. lépés: Kiderítse a verseny szabályait és a pontszámot

A kódok elkészítése előtt dokumentálja pontosan, hogy működik a pontszámolás. Szükséges-e egy pontnak egy zászló megérintése? Van-e kegyelmi szabály? Hogyan oldják meg a túlórás kapcsolatokat? Ez a szabályzattal együtt határozza meg az adatmodellt. Például, ha a kivonási pontok számolnak, külön gyűjtésre van szükség a kivonási eseményekhez.

2. lépés: Beállítson a Directus gyűjteményeket

A Directus projekthez lépjen be és hozzon létre a korábban ismertetett gyűjteményeket. Adjon hozzá érvényesítési szabályokat Például a pontszámok nem negatív egészszámoknak kell lenniük. A referee szerepének engedéllyel kell konfigurálnia, hogy a pontszámokhoz és a mérkőzés állapotához való írási hozzáférést lehetővé tegye, míg a public szerep (a frontend által használt) csak olvasható hozzáférést biztosít. Használja a Directus mezőszintű engedélyeket, ha egyes mezőket (például játékos kapcsolattartási információkat) el kell rejteni.

3. lépés: építsen API végpontokat vagy használd a Directus SDK-t

A Directus által generált REST végpontokat közvetlenül a frontendből használhatja, vagy ha további üzleti logikára van szüksége, egyedi API végpontokat is építhet (pl. több eseményből származó összegek kiszámításához). A legtöbb turné esetében a beépített REST és a WebSocket végpontok elegendőek. Directus SDK Ha szerver oldalon időzítő szinkronizációra van szükséged, hozz létre egy Directus egyedi végpontot, amely minden másodpercben frissít egy cron-munka vagy egy Flow segítségével.

4. lépés: Fejlesztse a frontend komponenseket

A nézők számára a kijelzőlapokat és a bírák számára a vezérlőlapot készítsen. Tartsa a nézőt csak olvashatóan látóvédelemmel és koncentráljon a nagy, tiszta elemekre. A vezérlőlap kompaktabb lehet gombokkal és formákkal. Használja a CSS animációkat a pontszámváltozásokhoz (pl. rövid villám, amikor a pontszám növeked). A vezérlőlap számára fontolja meg, hogy használjon egy mobil-első designot, amely nagy gombokkal könnyen megnyomható, még akkor is, ha kesztyűt visel.

5. lépés: Valódi mérőzésekkel teszteljük

A játékot a játékot végző önkéntesek és játékosok segítségével futtasd. Szimuláld a különböző forgatókönyveket: gyors pontszámváltozás, több mező, büntetőhívás és hálózati kérdések. Ellenőrizd, hogy a WebSocket automatikusan újra csatlakozik-e, ha a kapcsolat csökken. Ellenőrizd a visszavonó funkciót (ha megvalósítható) és győződj meg arról, hogy a döntő pontszámokat nem lehet megváltoztatni a meccs befejezése után.

6. lépés: Szállítsd ki és képzd fel a személyzetet

A frontend telepítése egy helyi szerverre vagy egy felhőberendezőre. A offline eseményekhez futtasd a Directus-ot és a frontendet egy helyi laptopon, amely WiFi hotspot-t tartalmaz. Használd a Docker Compose-t a Directus és egy könnyű web-szolgáltatót (például a Nginx vagy a Caddy) a frontendhez. Tanítsd a bírákat a vezérlőpanel használatáraMég egyszerűbbé tegye: egy kattintás a csapat pontszámának növelésére, egy gomb a timer megkezdéséhez/állítására. nyomd ki a gyors hivatkozási kártyákat. Tanítsd a biztonsági jegyzőt a papír kézikönyvi rendszerben a teljes rendszerhibásodás esetén.

Biztonsági és engedélyezési rendszerek a Directusban

Mivel a pontszámlap egy élő rendszer, amelyhez több szerep hozzáfér, a biztonság kritikus. Kezdje három Directus szerep létrehozásával:

  • AdminisztrátorTeltérő hozzáférés minden gyűjteményhez és beállításokhoz (a turnészervezők által használt).
  • A bíróírja meg a pontszámokhoz, a mérkőzés állapotához, a büntetésekhez és a mérkőzés eseményeihez való hozzáférést.
  • Közönség csak olvasható hozzáférés a pontszámokhoz, a mérkőzésekre (csak a live vagy finished állapotúakhoz), a csapatokhoz és a játékosokhoz.

A Directus engedélyezési rendszer használatával ezeket a gyűjtési szinten érvényesítheti. További biztonság érdekében korlátozza az IP cím alapján az ítélők hozzáférését, ha a vezérlőlap csak bizonyos tablettákra van használatos. Lehetővé tegye az HTTPS-t a Directus példányán, különösen akkor, ha a streaming átfedésekre feltüntette az interneten.

A Live Scoreboardok teljesítményoptimalizálása

Egy turnéban több tucat meccs is lehet egyszerre.

  • Csak olyan gyűjteményekre feliratkozzon, amelyek gyakran változnak (pl. és ). Kerülje el a és a statikus gyűjtemények feliratkozását, kivéve, ha az esemény során frissülnek.
  • A Directus szűrőparametriumokat használjon csak a releváns feljegyzések előfizetésére. Például a zaj csökkentése érdekében a filtert használjon.
  • A frontendben a felhasználói felhasználói rendszer frissítését kell feloldani. Ha több pontszám eseménye ugyanazon animációs keretrendszerben érkezik, egy DOM frissítésbe kell őket rakni.
  • A csapat nevét és logóját a böngésző helyi tárolójában tárolja, így nem kell minden csatlakozáson elhozni őket.
  • Nagyon nagy turnék esetében (százok játékos), oldalt olvassa el a játékos statisztikáját, és töltsd be őket igény szerint.

Tippek a sikeres végrehajtáshoz

  • Tartsd egyszerűnek a hálózatot. A hálózati hálózatok esetében a hálózati hálózatok a hálózati hálózatokhoz való csatlakozáshoz és a hálózati hálózatokhoz való csatlakozáshoz szükséges, a hálózati hálózatokhoz való csatlakozáshoz szükséges, a hálózati hálózatokhoz való csatlakozáshoz szükséges, a hálózati hálózatokhoz való csatlakozáshoz szükséges, a hálózati hálózatokhoz való csatlakozáshoz szükséges, a hálózati hálózatokhoz való csatlakozáshoz szükséges, a hálózati hálózatokhoz való csatlakozáshoz szükséges, a hálózati hálózatokhoz való csatlakozáshoz szükséges, a hálózati hálózatokhoz való csatlakozáshoz szükséges, a hálózati hálózatokhoz való csatlakozáshoz szükséges, a hálózati hálózatokhoz való csatlakozáshoz szükséges, a hálózati hálózatokhoz való csatlakozáshoz szükséges, a hálózati hálózati hálózatokhoz való csatlakozáshoz szükséges, a hálózati hálózati hálózatokhoz való csatlakozáshoz való hozzáféréshez szükséges.
  • A kezdeti adatokat tárolja. Teljesítsd a csapat nevét, a meccs ütemezését és logóit a frontendbe a beindításnál, hogy a WebSocket-szünet ne törje meg azonnal a kijelzőt.
  • Használd a visszaesést. A végső lehetőségként legyen egy statikus HTML oldal a kézi beadási mezőkkel, amelyet egy helyi JSON fájlhoz szinkronizálnak, amelyet később feltölthet.
  • Ellenőrizd a időzítő pontosságát. Ha egy szerver oldalon lévő időzítővel használ, győződjön meg arról, hogy a WebSocket üzenetei tartalmazza a szerver pontos idejét, hogy elkerüljék a készülékek közötti driftot. A következő: A módszer a kliensnél pontosabb időközönként.
  • Gondolj a hozzáférhetőségre. Használjon nagy fontokat és magas kontrasztot a látáshiányú nézők számára. Adjon hangvisszatéréset (szócsat) olyan fontos eseményekhez, mint a mérkőzés kezdete / vége. Használja a régiókat a képernyőolvasó felhasználók pontszámváltozásának bejelentésére.
  • A hatalomra terve. Minden készüléknek teljes mértékben feltölteni kell, és legyen biztonsági másolata az akkumulátorok és az áramsorozatok számára.
  • Dokumentáld az adatmodellt. Tartsa meg a gyűjtemények és a kapcsolatok diagramját, hogy a jövőbeni turnészervezők könnyen módosíthassák a rendszert.

A következtetés

A Directus-on épített, személyre szabott pontszámpárrendszer a paintball versenyeket káoszos kézi pontszámokból professzionális, bevágó élménybe alakítja. Az adatmodellje és a valós idejű frissítések segítségével teljes rugalmasságot kapsz a játékok és a nézők minden másodpercében tájékoztatása mellett a játék bármely szabályainak alkalmazásában. Az itt ismertetett lépések segítségével - az adatmodellezéstől a telepítésig - olyan pontszámpártyát lehet létrehozni, amely megbízhatóan fut a verseny napján és mindenkivel a pályán.

További olvasáshoz a Directus weboldal, a Az APPA verseny szabályai, valamint gyakorlati webfejlesztési tanfolyamokat valós idejű panelek létrehozására a Vue.js vagy A reakcióA következő paintball turnéja soha nem lesz ugyanaz.