Стварање прилагођеног система за резултате за свој турнир пејнтбола

Зашто је важно прилагодљиву таблицу

У пејнтболу, утакмице су брзе и одлуке се доносе за секунди.

ФЛТ:0 Обнављања резултата у реалном времену ФЛТ:1 који одмах одражавају елиминације, улазак знаме или циљеве засноване на тачкама.
ФЛТ:0 Поддршка за више формата од тимова од 3 човека до великих сценаријских игара без присиљања тврде шаблоне.
Побољшавање ангажовања гледалаца кроз динамичку графику, живо време и статистику специфичну за тиме.
ФЛТ:0 Смањује људску грешку аутоматизацијом уласка података путем таблета или уређаја за судија.
ФЛТ:0 Шансе за брендинг за приказивање логотипа спонзора, имена догађаја и прилагођене боје.

Са прилагођеном решењем, такође имате податке. Касније можете анализирати историју утакмица, перформансе играча и трендове турнира - нешто немогуће са једнократним папирним листима или затвореним власничким системима.

Употреба Директуса за позадину табеле

Directus је отворен код безглавни CMS који делује као моћна позадина за вашу апликацију за тачку. Он пружа чисту, корисничку интерфејс за администраторе да управљају тимовима, мачевима и резултатима без писања једне редове кода.

Постављање пројекта Директус

Можете покренути Directus на свом серверу (самохостиран) или користити услугу Directus Cloud за управљање искуством.

Инсталирајте Директус преко Докера или директне дистрибуције Ноде. дж. Официјални водич за брзо започнување ФЛТ:1 описује процес у неколико минута.
Конфигурирајте базу података (PostgreSQL, MySQL, SQLiteSQLite је идеално за офлајн употребу).
Постави администратор и креирај пројекат посебно за свој турнир.
Обезбедите модул Реалtime ако планирате да користите WebSockets за тренутне ажурирања резултата.

Дизајн модела података

Схема података на вашем талину треба да буде слична структури турнира.

ФЛТ:0]]Тимс[[ФЛТ:1]]име, лого (URL слике), рестри (у односу на играче), примарна боја.
Играчи, број, тим (однос), изборне статистике (исклучења, смрти, удара).
ФЛТ:0 Мачеви ФЛТ: 1 Рунд, поље, почетно време, статус (остао, жив, завршен, прекорачни час), трајање.
Показања ФЛТ: 0 Показања ФЛТ: 1 Показања Матча (однос), тима (однос), вредност резултата, временски штамп (посебно користан за живо постизање), тип догађаја постизања резултата (илиминација, улазак знаме итд.).
Наказања ФЛТ: 0 Опционална, за праћење прекршаја (мање, велике, дисквалификације) са играчима и односима утакмица.
ФЛТ:0 Мач догађаји ФЛТ: 1 Логови свих значајних догађаја (промене резултата, казне, временски прекиди) за реплеј и аудит.

Користете уграђене поље Directus (многи-на-једно, много-на-многи) да бисте повезали ове колекције. На пример, у матчу могу бити два тима (или више за формат више тима) и више записених резултата у различитим временима.

Устави дозволе тако да само аутентиковани судија могу да пишу резултате, док је јавном таблицу резултата потребно само читање доступа на најновије податке. Такође можете створити улогу скорикера са ограниченом доступам до записима само за статус утакмице и резултате.

Ажурирања у реалном времену са Directus Реал-टाइм

Пејнтбол турнири се брзо крећу. Задаци у показатељу резултата стварају збуњење. Директус Реалटाइм модул ФЛТ:1 омогућава вам да се пријавите за промене у било којој колекцији. Када судија ажурише резултат или промене статеса утакмице, фронтэнд одмах прима ажурирање преко ВебСокета.

Да би се користио:

Устави у свој проект фронт-енда.
Стварити ВебСокет повезаност са Directus инстанцијом.
Уписајте се у колекцију токова или такмица за догађаје у реалном времену.
Слушајте догађаје , , и и ажурирајте кориснички упутство у складу са тим.

Овај приступ елиминише потребу за анкетирањем и осигурава да сваки уређај који гледа резултатну табелу остане синхронизован.

Дубока потапања: управљање повезивањем ВебСокета

Када изградите снажан талић, руковање везе пада грациозно. Подписајте се на догађаје и из WebSocket клијента. При одцепњи, имплементирајте експоненцијску повратну повезаностпочинајте са одлагом од 1 секунди и удвостручите до 30 секунди. Директус Реал-टाइм модул по дефолту šalје срчане ударе сваких 30 секунди; ако пропустите три срчане ударе, сигурно је претпоставити да је повезаност изгубена. Покажите мали индикатор Свршање изгубљено на талицу резултата тако да особље зна да провера мрежу. Предњи крај може поново да падне на анкетацију REST API сваке неколико секунди ако WebSocket остане понизан.

Изградња фронтэнд дисплеја

Фронтэнд је оно што играчи, судија и гледаоци заправо виде. Можете га изградити као веб апликацију, посвећен интерфејс таблета или чак и дашборд са великим екраном.

Избор оквир

Сваки модерни JavaScript оквир (React, Vue, Svelte, или чак и vanilla JS) ће радити. Ако је ваш турнирски особље не-технички, једноставна HTML + CSS страница са малим скриптом може бити најлакша. За напредну интерактивност, React са Directus SDK је солидан избор. Vue 3 са својим Compose API такође добро се парје са реално време подацима користећи или прилагођену Реактивност.

За тиме које више воле лакше решење, размислите о употреби Алпина.js.

Интеграција са Директус СДК

Directus пружа и REST клијент и клијент у реалном времену.

Користите REST API за загруђивање почетних података о маче и информација о тиму.
Премиње на WebSocket претплате за живо ажурирање.
Дизајнирање интерфедерације да ажурира резултате без блескања (ССС транзиције помоћи).

Пример интеграционог потока:

Аутентицирајте фронтэнд (ако је потребно) или користите јавни тек за читање API токен.
Донеси актуелну листу утакмица из Директуса.
За сваки активни утакмица, прикажите две тиме и њихове тренутне резултате.
Потпишите промене у колекцији токова и поново приказите приказивање резултата.

Да би интерфейс био брз, надодаљивање резултата: ако се више догађаја резултата догодију у року од неколико милисекунда, групирајте их у једно рендардирање користећи дебоунцеване ажурирање (на пример, захтев АнимацијаФраме или 100ms дебоунце).

Дизајн корисничког интерфејса

Чистота је од најважнијих разлога.

Имена тимова (велике, контрастиране боје).
Бројеви резултата (више велики, лако читати са растојањаминимални 80px шрифт за основне резултате).
Тајмер за утакмицање (распана или протекло време).
Индикатор статуса (на пример, Играње, Брек, Финал).
Опционално: бројевици елиминације или однос умри-убије за појединачне статистике.

Употребите контрастне боје (на пример, бели текст на темном фону) и избегавајте преплављење екрана. Ресансиван дизајн осигурава добар изглед табеле на телевизору од 50 инча и на таблету судија.

Показање резултата, временских времена и статеса утакмице

Поток података ради ovako:

Судија уноси резултат (или елиминационо догађај) на мобилни формулар.
Директус чува запис и емитује догађај create преко ВебСокета.
Фронтэнд прима догађај, ажурише свој локални статус и поново даје резултат.
Тајмер се може обрађивати на страни клијента (користећи локални сат) или на страни сервера са Directus пољима за почетак/крај времена. За прецизност, користите приступ на страни сервера: када игра почне, судић поставља поље и фронтэнд израчунава преостало време од тога. Сервер такође може ажурисати поље сваке секунде преко потока Directus или мале прилагођене крајње тачке.

За статус утакмице, дозволите судијама да промене поље статуса у Directus (на пример, од setup до playing до finished).

Главне карактеристике прилагођеног система талонова

Осим основних ствари, размотрите ове напредне карактеристике да бисте направили свој турнир истакнутим:

ФЛТ:0 Види више матча ФЛТ: 1 Ако ваш турнир покреће истовремено поље, талица може показати све активне поле или дозволити прелазак између поља.
ФЛТ:0 Реплей или спо-моција не за саму тачку резултата, али слој података може подржати undo акције (заправочу складиштења) тако да можете исправити грешке.
ФЛТ:0 Спасоранс интеграција ФЛТ: 1 Ротирате логотипе спонзора у страничном ретку или између утакмица. Користете колекцију Директус за спасора са пољом слике и редоследом сортирања. Фронтэнд може показати случајног спонзора сваких 30 секунди или их приказивати у тикеру.
ФЛТ:0 Публична API за стриминг. Ако емитујете турнир на мрежи, уградите набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор набор на
ФЛТ:0 Паперово резервно решење, чак и са дигиталним системом, увек имате штампану картицу резултата и перо спремне.

Напредна: Покрив плоча за живе струје

Ако планирате да живите свој турнир, креирајте посебну HTML страницу оптимизовану за OBS-оверлај. Улучите све позадине, користите апсолутно позиционисање и излозите CSS променљиве за боје тима и резултате тако да их стриминг тим може лако прилагодити.

Схема имплементације

Следите овај структуриран процес како бисте изградили свој резултат од нула до живота.

Корак 1: Опреми правила турнира и резултате

Пре него што напишете код, документујте тачно како ради резултат. Да ли је тачка захтева додирнуто знаме? Да ли постоји правило милосрђа? Како се решава веза за прекорачни рад? Овај скуп правила диктује ваш модел података. На пример, ако се рачунају елиминационе тачке, потребна је посебна колекција за елиминационе догађаје. Такође дефинишете временске границе, дедукције штрајних тачака и било које посебне сценарије као што су изненадна смрт.

Корак 2: Поставите Directus колекције

Уведите се у свој пројекат Directus и креирајте колекције које су описане раније. Додајте правила валидацијеНа пример, резултати морају бити не-негативни цели бројеви. Конфигуришете дозволе за улогу рефери како би се омогућио писање до резултата и статус утакмица, док улога публична (коју користи фронтэнд) има доступ само за читање.

Корак 3: Изградите API крајње тачке или користите Directus SDK

Можете користити Directus генерисане REST краће тачке директно из фронтенда, или изградити прилагођене API краће тачке ако вам је потребна додатна пословна логика (на пример, да израчунавате тотале од више догађаја). За већину турнира, уграђени REST и WebSocket краће тачке су довољне.

Четврти корак: Развијте компоненте фронт-енда

Уредите странице за приказивање за гледаоце и контролни панел за судија. Држите гледаоце вид само за читање и фокусирајте се на велике, јасне елементе. Контролни панел може бити компакснији са копцима и облицима. Користете ЦСС анимације за промене резултата (на пример, кратки блискак када резултат повећава).

Корак 5: Проба са стварним утакмицама

Поправљајте вежбе са добровољцима који делују као судије и играчи. Симулирајте различите сценарије: брзе промене резултата, више поља, казне позиве и мрежне проблеме. Проверите да ли се ВебСокет аутоматски поново повезује ако се веза спушта. Проверите функцију откуцање (ако је имплементисана) и осигурајте да коначне резултате не могу бити промењене након завршетка утакмице. Такође проверите офлајн паук: искључите мрежу и проверите да ли плоча резултата још увек показује последње познате резултате и да контролни панел може да се синхронише касније.

Шеста фаза: Постављајте и обучајте особље

Постављајте фронтэнд на локалном серверу или облачном хосту. За офлайн догађаје, покретите Директус и фронтэнд на локалном лаптопу са WiFi-ом готспотом. Користете Докер Компоуз да бисте комбиновали Директус и лаки веб сервер (као што су Нгинкс или Кади) за фронтэнд. Учете судија како користити контролни панелДайте то што је могуће једноставније: један клик да повећа резултате тима, један дугме за покретање/стајање тајмера.

Безбедност и дозволе у Directusu

Пошто је талица резултат живо систем до које се приступају више улова, безбедност је критична. Почни са стварањем три улога Directus:

Администратор ФЛТ: 1 Сврстан приступ свим колекцијама и подешавањама (који користе организатори турнира).
Рефери пише приступ резултатима, статусу утакмица, пеналите и догађајима утакмица.
Публични ФЛТ: 1 Прочитани приступ резултатима, утакмицама (само онима са статусом live или finished), тимовима и играчима.

Користете систем дозвола Directus да их примените на нивоу колекције. За додатну сигурност, ограничите приступ судија по IP адреси ако се контролни панел користи само на одређеним таблетима. Омогућите HTTPS на вашем Directus инстанци, посебно ако га изложите на интернет за струју наклапања.

Оптимизација перформансе за живе талоне

Турнир може имати десетине утакмица истовремено.

Само претплатите се колекцијама које се често мењају (на пример, и ). Избегавајте претплате статичким колекцијама као што су осим ако се не ажуришу током догађаја.
Користете параметри филтера Directus да бисте се обуписали само релевантним записима. На пример, обупишите се на са филтром да бисте смањили бубу.
На фронтенду, дебоунце ажурирања интерфедерације. Ако више догађаја резултата дођу у истом анимационим оквиру, погрупите их у једну ажурирање DOM.
Каше име тима и логотипе локално у локалном складиштењу прегледача, тако да их не морате изнети на сваку повезаност.
За веома велике турнире (стотине играча), настранишите статистику играча и нагрупите их по захтеву.

Савети за успешну имплементацију

ФЛТ:0 Држите мрежу једноставну. Употребите једну ВиФИ мрежу са адекватном пролажношћу. Избегавајте повезивање јавних уређаја; користите посвећене таблете за судија.
Каше првични подаци. [ Наградите све имена тима, распореде утакмица и логове у фронтэнд на покретању тако да WebSocket прекид не прекине дисплеј одмах.
Употребите паду. У последњем случају, имајте статичку HTML страницу са ручним улазничким пољима, синхронизовану са локалним JSON датотеком који се може касније преузети.
ФЛТ:0 Тест тачност тајмера. Ако користите тајмер са стране сервера, уверите се да WebSocket поруке укључују точан временски временски период сервера како бисте избегли дрифтирање између уређаја.
ФЛТ:0 Разуми доступност. Употребите велике шрифте и висок контраст за гледаоце са оштећеним очима. Достави аудио поврат (бузнер) за важне догађаје као што су почетак / крај утакмице.
ФЛТ:0 План за енергију. Сви уређаји треба да буду потпуно напуњени и да имају резервне копије за батерије и струје.
ФЛТ:0 Документирајте свој модел података. Држите дијаграм колекција и односа тако да будући организатори турнира лако могу да модификују систем.

Закључ

Успособен систем талонова изграђен на Директусу претвара турнир пејнтбола из хаотичних ручних резултата у професионално, ангажовачко искуство. Совладањем свог модела података и коришћењем ажурирања у реалном времену, добијате потпуну флексибилност да се прилагодите било којој сети правила, док играчи и гледаоци чувате информисане сваке секунде утакмице.

За даље читање, истражите веб страницу ФЛТ:0 Директус, правила турнира ФЛТ:2 АППА и практичне наставнике за развој веб-страница за изградњу дашборда у реалном времену са ФЛТ:4 Видецс ФЛТ:5 или Реакт ФЛТ:7 Ваш следећи турнир пејнтбол никада неће изгледати истим.