Table of Contents

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

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

  • Ажурирања резултата у реалном времену који одмах одражавају елиминације, улазак заставе или циљ на основу тачака.
  • Поддршка више форматаод тимова од 3 човека до великих сценаријских игарабез присиљања чврстог шаблона.
  • Побољшавање ангажовања гледаоца кроз динамичну графику, живото-времену и статистику специфичну за тим.
  • Мање људске грешке путем аутоматизације уласка података путем таблета или уређаја за судија.
  • Могућности брендирања да прикаже логотипе спонзора, имена догађаја и прилагођене боје.

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

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

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

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

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

  1. Инсталирајте Директус преко Докера или директног Node.js распореда. званични водич за брзо почетак описује процес у неколико минута.
  2. Конфигурирајте базу података (PostgreSQL, MySQL, SQLiteSQLite је идеално за офлајн употребу).
  3. Постави администратор и направи пројекат посебно за свој турнир.
  4. Обезбедите модул Реалtime ако планирате да користите ВебСокетес за тренутне ажурирања резултата.

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

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

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

Уграђени односи Directus (многи-на-једно, много-на-многи) користе се за повезивање ових колекција. Турнир Уколико планирате да покренуте више догађаја из исте Directus инстанце, сваки турнир може имати свој распоред и правила.

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

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

Пејнтбол турнири се крећу брзо. Модул у реалном времену Када судија ажурише резултат или промени статус утакмице, фронтэнд одмах прима ажурирање преко ВебСокета.

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

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

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

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

Када изградите јаку таблу за резултате, руковање везе пада грациозно. Подписајте се на догађаје и из WebSocket клијента. При одсумку, имплементирајте експоненцијску повратну повезаностзачатак са одлагом од 1 секунди и удвостручите до 30 секунди. Директус Реал-тайм модул по дефолту прати срчане ударе сваких 30 секунди; ако пропустите три срчане ударе, безбедно је претпоставити да је повезаност изгубена. Покажите мали индикатор загубљеног повезања на таблу за резултате тако да особље знају да провера мрежу.

Фронтэнд може поново пасти на анкетирање REST API сваких неколико секунди ако WebSocket остане понижен.

Стварање фронтендова дисплеја

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

Избор оквир

Било који модерни JavaScript оквир (Рейакт, Вью, Свелт или чак Ванила ЈС) ће радити. Ако је ваш турнирски особље нетехнички, једноставна HTML + CSS страница са малим скриптом може бити најлакша. За напредније интерактивност, Реакт са Директус СДК је солидан избор. Вью 3 са својим Композиционим API такође добро се парје са реално-временим подацима користећи или прилагођену Реактивност.

За тиме који више воле лакше решење, размислите о употреби Алпина.жссме вам омогућити да додате реактивно понашање у статички HTML без корака изградње. Ово може бити идеално за мале турнире где желите да уредите талу на лету.

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

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

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

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

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

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

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

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

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

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

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

Поток података ради на овај начин:

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

За статус утакмице, дозволите судијама да промене поље статуса у Директусу (на пример, од setup до playing до finished). Уобичајен модел је да судијама има изглед control panel са копцима за покретање/останку таймера, повећање резултата и покане казни.

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

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

  • Многе гледања спојникаако ваш турнир ради на истовременој полици, на табели резултата могу се показати све активне утакмице или дозволити прелазак између полица.
  • Реплеј или споро покретне за саму тачку резултата, али слој података може подржати undo акције (заправочу складиштења) тако да можете исправити грешке. Реализујте дневник свих промена резултата са временским штампама; контролни панел може укључити кнопку undo last која повраћа најновије догађај.
  • Интеграција спонзораротирате логотипе спонзора у страничном траку или између утакмица. Користете Directus колекцију за sponsors са пољом слике и редоследом сортирања.
  • Публична API за преносако емитујете турнир на мрежи, уградите набор на тачку са ифремом или прилагођеном РТМП. Многи инструменти за стриминг као што је ОБС могу да засне прозоре прегледача; дизајнирајте тачку са транспарентним позадином тако да се набор натапи игра.
  • Режим резервног папирауколико имате дигитални систем, увек држите штампуну картицу резултата и перо спремне.

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

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

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

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

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

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

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

Стамп 2: Поставите Directus колекције

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

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

Можете користити директно из фронтенда генераirane REST крајне тачке Directus или изградити прилагођене API крајне тачке ако вам је потребна додатна пословна логика (на пример, за израчунавање сутова из више догађаја). Директус СДК да се поједностави аутентификација и претплате у реално време. Ако вам је потребна синхронизација тајмер-сада сервера, креирајте прилагођену крајњу тачку Directus који се ажурише сваку секуну преко Cron рада или потока.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Закључ

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

За даље читање, истражите Веб сајт Директус, Правила турнира АППА, и практичне обуке за развој веб-страница за изградњу дашборда у реалном времену са Vue.js или РеакцијаТвоје следеће пејнтбол турнире неће изгледати исто.