ایجاد یک سیستم امتیاز سفارشی برای مسابقات Paintball خود

مسابقات Paintball به سرعت حرکت می کنند - در صفحه نمایش نمره ایجاد سردرگمی می کند. Directus (FLT:0 Realtime ماژول به شما اجازه می دهد تا تغییرات در هر مجموعه را به روز رسانی کنید.هنگامی که داور یک امتیاز یا یک تغییر وضعیت مطابقت را به روز می کند، Frontend بلافاصله از طریق WebSocket به روز رسانی می کند.

برای استفاده از آن:

• در این مرحله، گزینه ی زیر را در اختیار خود قرار دهید.
• یک اتصال WebSocket را با نمونه Directus خود ایجاد کنید.
• به مجموعه "اسک ها" یا "تقاد" برای رویدادهای زمان واقعی اشاره کنید.
• به یاد داشته باشید که [در این باره] [و] [به صورت] [و [FLT3] [و] [و [به]] [و [به]]] [و [به]]] [و [به]]] [و [به]] [و [به]]] [و [به روز رسانی] رابط کاربری [و [به روز رسانی].

این رویکرد نیاز به نظرسنجی را از بین می برد و تضمین می کند که هر دستگاه که در حال تماشای کارت امتیاز است همگام سازی شده است.برای مسابقات بزرگ با بسیاری از مسابقات همزمان، در نظر گرفتن استفاده از کانال های WebSocket دامنه به شناسه های بازی خاص برای کاهش پهنای باند.

Deep Dive: WebSocket Connection Management

هنگامی که یک صفحه امتیاز قوی ایجاد می کنید، اتصال به طور ماهرانه ای به و رویدادها از مشتری WebSocket، اتصال مجدد نمایی مجدد - با تاخیر 1 ثانیه شروع می شود و تا 30 ثانیه، ماژول Realtime Directus هر 30 ثانیه به طور پیش فرض ضربان قلب ارسال می کند؛ اگر شما سه مشتری را از دست بدهید تا یک شاخص وب را بررسی کنید، به حداقل رساندن آن است.

ساخت بازی Frontend Display

Frontend چیزی است که بازیکنان، داورها و تماشاگران در واقع می توانند آن را به عنوان یک برنامه وب، یک رابط کاربری اختصاصی تبلت یا حتی یک داشبورد صفحه نمایش بزرگ بسازند.

انتخاب چارچوب

هر چارچوب جاوا اسکریپت مدرن (React، Vue، Svelte یا حتی ویلی JS) کار خواهد کرد.اگر کارکنان مسابقات شما غیر فنی است، یک صفحه HTML + CSS ساده با یک اسکریپت کوچک ممکن است آسان تر باشد برای تعامل پیشرفته تر، React با Directus SDK یک انتخاب جامد است. Vue 3 با ترکیب آن API همچنین به خوبی با استفاده از داده های زمان واقعی (F6 فعال سازی:

برای تیم هایی که یک راه حل سبک را ترجیح می دهند، استفاده از Alpine.js را در نظر بگیرید، این به شما اجازه می دهد رفتار واکنشی به HTML استاتیک بدون یک گام ساخت اضافه کنید، این می تواند برای مسابقات کوچک که در آن شما می خواهید برای ویرایش صفحه نمایش در پرواز ایده آل باشد.

ادغام با Directus SDK

Directus هر دو یک مشتری REST و یک مشتری زمان واقعی را برای یک امتیاز ارائه می دهد، به طور معمول:

• از REST API برای بارگذاری داده های بازی اولیه و اطلاعات تیم استفاده کنید.
• سوئیچ به اشتراک WebSocket برای به روز رسانی های زنده.
• UI را برای به روز رسانی نمرات بدون چشمک زدن (CSS انتقال کمک) طراحی کنید.

جریان ادغام مثال:

1. frontend (در صورت لزوم) را مشخص کنید یا از یک توکن API عمومی فقط خواندن استفاده کنید.
2. لیست بازی های فعلی را از Directus تهیه کنید.
3. برای هر بازی فعال، دو تیم و نمرات فعلی خود را نمایش دهید.
4. اشتراک تغییرات در مجموعه "هسته ها" و دوباره نمایش امتیاز را نشان می دهد.

برای نگه داشتن UI snappy، به روز رسانی نمره دسته: اگر رویدادهای متعدد نمره در عرض چند ثانیه وارد می شوند، آنها را به یک رندر واحد با استفاده از یک به روز رسانی دولتی debounced (به عنوان مثال، درخواست AnimationFrame یا 100ms debounce) تقسیم کنید.

طراحی رابط کاربری

وضوح بسیار مهم است.یک طرح خوب امتیاز بندی شامل:

• نام تیم (رنگ های بزرگ و کنتراست)
• اعداد امتیاز (بسیار بزرگ و آسان برای خواندن از فاصله – حداقل 80px فونت برای نمرات اولیه).
• یک تایمر مسابقه (زمان شمارش شده یا حذف شده)
• شاخص "وضعیت" (به عنوان مثال، "بازی"، "ل"، "پایان"
• اختیاری: حذف یا نسبت مرگ برای آمار فردی

از رنگ های با کنتراست بالا (به عنوان مثال، متن سفید در پس زمینه تاریک) استفاده کنید و از درهم شکستن صفحه نمایش اجتناب کنید.طراحی پاسخگو تضمین می کند که صفحه نمایش نمره در هر دو تلویزیون 50 اینچ و یک تبلت داور خوب به نظر می رسد.

نمایش امتیاز، زمان و وضعیت Match

جریان داده ها مانند این کار می کند:

• داور وارد یک امتیاز (یا یک رویداد حذف) در فرم تلفن همراه می شود که درخواست POST به Directus API می رود.
• Directus رکورد را ذخیره می کند و یک رویداد “ایجاد” را از طریق WebSocket پخش می کند.
• Frontend رویداد را دریافت می کند، حالت محلی خود را به روز می کند و امتیاز را دوباره به دست می آورد.
• تایمر می تواند مشتری را به سمت (استفاده از یک ساعت محلی) یا سمت سرور با زمینه های Directus برای زمان های شروع / پایان کار، با دقت استفاده از رویکرد سمت سرور: هنگامی که یک بازی شروع می شود، داور مجموعه ای از میدان (FLT-7) و frontend زمان باقی مانده از آن را محاسبه می کند.

برای وضعیت بازی، اجازه دهید داورها رشته وضعیت را در Directus تغییر دهند (به عنوان مثال، از "setup" تا "بازی" به "تمام")، یک الگوی مشترک این است که یک "کنترل پنل" برای داورها با دکمه ها برای شروع / توقف تایمر، امتیازات، و نام مجازات ایجاد کنید.

ویژگی های کلیدی یک سیستم امتیاز سفارشی

فراتر از اصول، این ویژگی های پیشرفته را در نظر بگیرید تا مسابقات شما را برجسته کنید:

• دیدگاه های چند زبانه - اگر مسابقات شما به طور همزمان اجرا می شود، صفحه امتیاز می تواند تمام مسابقات فعال را نشان دهد یا اجازه تغییر بین زمینه ها را بدهد.استفاده از یک طرح شبکه با 2x2 یا 3x2 پانل برای نمایش های چند میدان.
• Replay یا حرکت آهسته - نه برای خود امتیاز، بلکه لایه داده می تواند از اقدامات "undo" (تاریخ ذخیره سازی) پشتیبانی کند، بنابراین شما می توانید اشتباهات را تصحیح کنید. پیاده سازی یک log از تمام تغییرات با زمان بندی؛ پانل کنترل می تواند شامل یک دکمه "undo Last" که آخرین رویداد اخیر را برگرداند.
• - آرم های حامی در نوار کناری یا بین بازی ها استفاده از یک مجموعه مستقیم برای "مسئولان" با یک میدان تصویر و یک سفارش.
• API عمومی برای جریان - اگر شما مسابقات را به صورت آنلاین پخش کنید، صفحه امتیاز را با iframe یا RTMP سفارشی جاسازی کنید. بسیاری از ابزارهای جریان مانند OBS می توانند یک پنجره مرورگر را ثبت کنند؛ طراحی امتیاز با یک پس زمینه شفاف، بنابراین آن را بر روی خوراک بازی اضافه می کند.
• ] – حتی با یک سیستم دیجیتال، همیشه کارت امتیاز چاپی و قلم آماده است، علاوه بر این، یک صفحه ساده کشویی غیر قابل دسترس ایجاد کنید که نمرات را در LocalStorage ذخیره می کند و همگام سازی زمانی که شبکه بازگشت می کند.

پیشرفته: Scoreboard Overlay برای Livestreams

اگر قصد دارید مسابقات خود را به صورت جداگانه ای تنظیم کنید، یک صفحه HTML جداگانه برای OBS Overlay ایجاد کنید.همه زمینه ها را حذف کنید، از موقعیت مطلق استفاده کنید و متغیرهای CSS را برای رنگ ها و امتیازات تیم افشا کنید تا تیم جریان می تواند به راحتی آنها را تنظیم کند.از یک \"FLT:9 با .] این صفحه به عنوان یک منبع مرورگر در OBS استفاده کند و به روز رسانی در زمان واقعی به روز رسانی به روز رسانی در عوض به روز رسانی در عوض.

مراحل پیاده سازی

این فرآیند ساختار یافته را دنبال کنید تا تخته امتیاز خود را از ابتدا بسازید تا به زندگی ادامه دهید.

مرحله 1: قوانین مسابقات را تعریف کنید و Scoring

قبل از نوشتن هر کد، دقیقاً مستند کنید که نمره دادن به چه چیزی نیاز به لمس یک پرچم دارد؟ آیا یک قاعده رحمت وجود دارد؟ چگونه پیوندهای بیش از حد حل می شود؟ این قانون مدل داده های شما را به عنوان مثال، اگر نقاط حذف، شما نیاز به یک مجموعه جداگانه برای حذف حوادث.همچنین تعریف محدودیت های زمانی، کاهش زمان، و هر سناریوی خاص مانند مرگ ناگهانی.

مرحله دوم: مجموعه های Directus را تنظیم کنید

وارد پروژه Directus خود شوید و مجموعه هایی را که قبلاً ذکر شده اند، قوانین اعتباردهی اضافه کنید – به عنوان مثال، نمرات باید به صورت صحیح غیر منفی باشند.Configure مجوزهای مربوط به نقش “referee” را برای اجازه دادن به امتیازات و وضعیت مطابقت ایجاد کنید، در حالی که نقش “عمومی” (استفاده شده توسط frontend) تنها دسترسی به فیلد Directus را خوانده است اگر برخی از اطلاعات تماس پنهان (اطلاعات تماس پنهان) باید اطلاعات پنهان باشد.

مرحله 3: ساخت API Endpoint یا استفاده از Directus SDK

شما می توانید از نقاط انتهایی REST تولید شده Directus به طور مستقیم از Frontend استفاده کنید یا نقاط انتهایی API سفارشی را بسازید اگر به منطق کسب و کار اضافی نیاز دارید (به عنوان مثال، برای محاسبه کل از رویدادهای متعدد) برای اکثر مسابقات، REST-in REST و WebSocket Endpoint کافی است.استفاده از SDKDirectus SDK

مرحله 4: توسعه اجزای Frontend

صفحات نمایش را برای بینندگان و پانل کنترل داوران ایجاد کنید. مشاهده تماشاچی فقط بخوانید و بر عناصر بزرگ و روشن تمرکز کنید. پنل کنترل می تواند با دکمه ها و فرم ها فشرده تر باشد.از انیمیشن های CSS برای تغییرات نمره استفاده کند (به عنوان مثال، یک فلش کوتاه هنگامی که یک امتیاز افزایش می یابد).

مرحله پنجم: تست با بازی های واقعی

اجرای بازی با داوطلبانی که به عنوان داور و بازیکنان عمل می کنند، سناریوهای مختلف را ساده می کنند: تغییرات سریع نمره، زمینه های متعدد، تماس های مجازات و مسائل شبکه. بررسی کنید که WebSocket به طور خودکار متصل می شود اگر اتصال کاهش یابد ویژگی های خنثی (در صورت اجرا) را آزمایش کند و اطمینان حاصل شود که نمرات نهایی پس از پایان بازی قابل تغییر نیست: شبکه و تأیید کنید که هنوز هم نمره نهایی را کنترل می کند.

مرحله 6: کارکنان و کارکنان قطار

جلو را بر روی یک سرور محلی یا یک میزبان ابر قرار دهید.برای رویدادهای آفلاین، Directus و Frontend را بر روی یک لپ تاپ محلی با WiFi اجرا کنید. از Docker Compose برای Directus و یک سرور وب سبک (مانند Nginx یا Caddy) برای frontend استفاده کنید. Train در مورد چگونگی استفاده از پنل کنترل - آن را به عنوان یک شکست ساده برای یک سیستم پشتیبان گیری سریع در یک دکمه ویرایش فایل / یک فایل دستی برای شروع کنید.

امنیت و مجوز در Directus

از آنجا که این کارت یک سیستم زنده است که توسط نقش های متعدد قابل دسترسی است، امنیت با ایجاد سه نقش Directus حیاتی است:

• [[۱] [۱۰] [۱۰] [۱] [۱۰] [۱]] [۱]] [۱] [۱]] [۱] [۱]] [۱]]- دسترسی کامل به تمام مجموعه ها و تنظیمات (استفاده شده توسط سازمان دهندگان مسابقات).
• [FLT 1:] - دسترسی به نمرات، وضعیت مطابقت، مجازات و رویدادهای بازی را بخوانید.
• عمومی - فقط دسترسی به نمرات، مسابقات (فقط کسانی که دارای وضعیت "زنده" یا "تمام")، تیم ها و بازیکنان بدون دسترسی به نوشتن.

• شبکه را ساده نگه دارید.[۱۰] از یک شبکه WiFi با پهنای باند کافی استفاده کنید؛ از تبلت های اختصاصی برای داور استفاده کنید.
• اطلاعات اولیه را از بین ببرید.[۱۰] تمام نام های تیم، برنامه های بازی و آرم ها را در جلو در استارت آپ بارگذاری کنید تا یک قطع کننده وب سایت بلافاصله صفحه نمایش را بشکند.
• استفاده از یک عقب افتادگی. یک صفحه HTML استاتیک با زمینه های ورودی دستی به عنوان آخرین راه حل، همگام با یک فایل JSON محلی که بعدا آپلود می شود.
• دقت زمان سنج را امتحان کنید اگر از یک سرور استفاده کنید، پیام های WebSocket را برای جلوگیری از حرکت بین دستگاه ها، به طور متناوب، از [FLT17] [FLT17] استفاده کنید. روش در مشتری برای فواصل دقیق تر.
• دسترسی به اطلاعات از فونت های بزرگ و کنتراست بالا برای بینندگان با اختلالات بصری استفاده کنید. ارائه بازخورد صوتی (auzer) برای رویدادهای مهم مانند شروع / پایان استفاده از مناطق برای اعلام تغییرات نمره برای کاربران صفحه نمایش.
• برنامه ریزی برای قدرت همه دستگاه ها باید به طور کامل شارژ شوند و پشتیبان برای باتری ها و نوار های برق داشته باشند.
• مدل داده های خود را تنظیم کنید.[۱۰] [FLT ۱] یک نمودار از مجموعه ها و روابط را نگه دارید، بنابراین سازمان دهندگان مسابقات آینده به راحتی می توانند سیستم را اصلاح کنند.