יצירת מערכת סינכרון אישית עבור טורניר המשחקים שלך

למה דווקא מצגת מתאימה

ב-Creball, משחקים מהירים והחלטות מתרחשים בתוך שניות. Off-the-shelf הבקיעboards נועדו בדרך כלל עבור ספורט מסורתי כמו כדורסל או כדורגל, חסר את הגמישות הנדרשת עבור מצבי משחק ייחודיים של כדור צבע.

העדכונים של Real-Time זה משקף את חיסול, דגל לוכד, או מטרות מבוססות נקודה באופן מיידי.
תמיכה בפורמטים מרוביםמ 3-man קבוצות למשחקי תרחיש גדולים - מבלי לכפות תבנית נוקשה.
מעורבות צופים מוגברת באמצעות גרפיקה דינמית, משככי חיים ו סטטינים ספציפיים של הצוות.
הפחתת השגיאה האנושית באמצעות אוטומציה של כניסה לנתונים באמצעות טאבלטים או מכשירים של שופטים.
הזדמנויות מיתוג כדי להציג לוגו חסות, שמות אירועים, ותוכנות צבע מותאמות אישית.

עם פתרון מותאם אישית, אתה יכול גם לנתח את ההיסטוריה של המשחק, ביצועים של שחקן ומגמות טורניר - משהו בלתי אפשרי עם סדינים חד פעמיים נייר או מערכות קנייניות סגורות. CMS מודרני ללא ראש כמו Directus עושה את זה לא רק אפשרי אבל חוזר על פני אירועים.

עקבו אחרי Your Scoreboard Backend

Directus הוא קוד פתוח ללא ראש CMS שפועל כגיבוי רב עוצמה ליישום הרישום שלך.זה מספק ממשק נקי וידידותי למשתמש למנהלים לניהול צוותים, משחקים וציונים ללא כתיבת קו אחד של קוד.ה- REST ו- GraphQL APIs, בשילוב עם תמיכה בזמן אמת WebSocket תמיכה, לעשות זאת בחירה אידיאלית עבור מערכת סיכות חי.

הקמת פרויקט Directus

אתה יכול לרוץ ישירות בשרת שלך (מטופח) או להשתמש בשירות הענן של Directus לחוויה מנוהלת. עבור הצבת טורניר, א-אירוח עצמי ברשת מקומית עשוי להיות עדיפה על מנת להימנע משקיפות.

התקנת Directus באמצעות Docker או פריסת Node.js ישירה. מדריך מהיר מתאר את התהליך תוך דקות.
הגדר את מסד הנתונים שלך (PostgreSQL, MySQL, SQLite -SQLite הוא אידיאלי לשימוש לא מקוון).
הגדר משתמש מנהל ויצור פרויקט ספציפי לטורניר שלך.
ניתן למודול "Realtime" אם אתה מתכנן להשתמש WebSockets עבור עדכונים מיידיים.

עיצוב מודל הנתונים

schema הנתונים של לוח הציון שלך צריך לשקף את המבנה של הטורניר שלך. ליצור אוספים (לוחים) ב Directus עבור:

צוותיםשם, לוגו (תמונה URL), רולסטר (relation to שחקנים), צבע ראשוני.
שחקניםשם, מספר, צוות (relation), סטטינים אופציונליים (התרעות, מקרי מוות, להיטים).
עקבו אחרי- סביב, שדה, להתחיל זמן, מעמד (ריצה, חיים, גמור, במשרה חלקית), משך זמן.
תוצאות- התאמה (relation), צוות (relation), ערך ציון, פעמים (בעיקר שימושי עבור ניקוד חי), ציון סוג אירוע (התחמשות, לכידת דגל וכו ').
עונשים-אופציונלי, לעקוב אחר זוועות (minor, גדול, דיסוציאציה) עם שחקנים והתאמה יחסים.
אירועים מתאימים- יומן של כל האירועים המשמעותיים (שינויים משמעותיים, עונשים, תהלוכות זמן) עבור משחק מחדש וביקורת.

השתמש ב שדות יחסים בנויים של Directus (many-to-one, רבים-to-many) כדי לקשר אוספים אלה.לדוגמה, התאמה יכולה להיות שני צוותים (או יותר עבור פורמטים מרובים-צוות) וערכי ציון מרובים שנרשמו בזמנים שונים. תחרות טורניר אם אתה מתכנן לנהל אירועים מרובים מאותה דוגמה ישירה - כל טורניר יכול להיות לוח הזמנים והכללים שלו.

הגדר הרשאות כך שרק שופטים אותנטיים יכולים לכתוב ציונים, בעוד שחזית לוח התכנון הציבורי צריכה רק לקרוא גישה לנתונים האחרונים.You יכול גם ליצור תפקיד "שומר" עם גישה מוגבלת לכתיבה לסטטוס ולציונים בלבד.

עדכון בזמן אמת עם Directus Realtime

טורנירי גלגל הצבעים נעים במהירות - עיכובים בתצוגת ציון יוצרים בלבול. מודול בזמן אמת מאפשר לך להירשם לשינויים בכל אוסף.כאשר שופט מעדכן ציון או מצב תואם שינויים, ה- Frontend מקבל את העדכון באופן מיידי באמצעות WebSocket.

להשתמש בו:

התקנת ה-FLT:0 בפרויקט החזית שלך.
צור קשר WebSocket ל-Directus שלך.
הירשם לאוסף "Scores" או "התאמה" לאירועים בזמן אמת.
(ב) ,2 , ויקרא י"א , ויקרא יט, ו[ה] ,

גישה זו מבטלת את הצורך בסקר ולהבטיח שכל מכשיר צופה בלוח הסימון נשאר מסונכרן.עבור טורנירים גדולים עם משחקים בו-זמנית רבים, שקול להשתמש בערוצי WebSocket בהיקף של זיהויי התאמה ספציפיים כדי להפחית רוחב פס.

דיבה עמוקה: WebSocket Connection Management

בעת בניית לוח ניקוד חזק, להתמודד עם חיבור טיפות חסד להירשם ל-FLT:4 ו- (FLT:5) אירועים של הלקוח WebSocket. על ניתוק, ליישם את החזרה האקספוננציאלית מחדש - עם עיכוב של 1 שניות להכפיל עד 30 שניות. Directus Realtime של זמן שולח פעימות לב כל 30 שניות על ידי ברירת מחדל; אם אתה מתגעגע שלוש פעימות לב, זה בטוח כדי לקבל את הציון הקטן על גבי ה-ידי צוות ה-ידי ה-ידי ה-ידי ה-ידי ה-ידי ה-ידי ה-ידי ה-הסימון הוא רק כדי ירידה של ה-הספקיתקורד האחורי של ה-ידי ה-ידי ה-הת ה-ידי ה- API הוא רק כדי ירידה של ה-זמנית של ה-זמנית כדי למנוע את ה- "לעמוד האחורי של ה-"דפסדפס האחורי של ה-ידי צוות ה-"מחדשהספק"דפסהספקיתחול"מחדשהספק אם נשאר רק במעט"דפס האחורי של ה-"דפס האחורי של ה-"מחדשהספק אם הוא יכול לזכור את ה-"מחדש"מחדש"דפס האחורי של ה-"דפס האחורי של ה-ידי

בניית התצוגה הקדמית

החזית היא מה שחקנים, שופטים וצופים רואים באמת.אתה יכול לבנות אותה כאפליקציית אינטרנט, ממשק טאבלט ייעודי, או אפילו לוח נתונים גדול.

בחירת מסגרת

כל מסגרת JavaScript מודרנית (React, Vue, Svelte, או אפילו וניל JS) תעבוד.אם צוות הטורניר שלך הוא לא טכני, דף HTML + CSS פשוט עם תסריט קטן עשוי להיות הקל ביותר.עבור אינטראקציה מתקדמת יותר, תגובה עם Directus SDK הוא בחירה מוצק.Vue 3 עם ה- API שלה גם עם נתונים בזמן אמת באמצעות LT:6 או אקטיביות אישית.

עבור צוותים המעדיפים פתרון קל משקל, שקול להשתמש אלפיני.ג'ס- זה מאפשר לך להוסיף התנהגות תגובתית ל-HTML סטטי ללא שלב בנייה.זה יכול להיות אידיאלי עבור טורנירים קטנים שבו אתה רוצה לערוך את לוח הציון על זבוב.

עקבו אחרי Directus SDK

Directus מספק ללקוח REST וגם לקוח בזמן אמת. עבור לוח ציון, בדרך כלל:

השתמש ב- API כדי לטעון נתונים מתאימים ראשוניים ומידע על צוות REST.
לעבור למנויים WebSocket עבור עדכונים חיים.
עיצוב UI כדי לעדכן ציונים ללא הצצה (CSS מעברים עזרה).

דוגמה לשילוב:

לתקן את החזית (אם צריך) או להשתמש בסימון API לקריאה בלבד.
נצלו את רשימת המשחקים הנוכחית של Directus.
לכל משחק פעיל, להציג את שתי הקבוצות ואת הציונים הנוכחיים שלהם.
הירשם לשינויים באוסף "השלים" ומחק מחדש את התצוגה.

כדי לשמור על העדכונים של UI, ציון אצווה: אם אירועים מרובים מגיעים בתוך כמה אלפיות שניות, לחלק אותם לתוך נוסחת יחיד באמצעות עדכון המדינה debounced (למשל, בקשה AnimationFrame או -100ms debounce).

עיצוב ממשק המשתמש

קלרנס הוא ראשוני.פריסת ציון טובה כוללת:

שמות של צוות (גדול, צבעים מנוגדים).
מספרים (גדולים מאוד, קלים לקריאה מרחוק - מינימום 80px פונט עבור ציונים ראשוניים).
זמן מתאים (חשבון לאחור או זמן מחלף).
אינדיקטור "סטטוס" (למשל "משחק", "Break", "Final").
אופציונלי: יחס של חיסול או יחס מוות לסטטיסטיקות בודדות.

השתמש בצבעים גבוהים (למשל, טקסט לבן על רקע כהה) ולהימנע מלחיצת המסך. עיצוב אחראי מבטיח את לוח הציון נראה טוב הן בטלוויזיה 50 אינץ ' והן לוח מתייחס. עבור תצוגות טלוויזיה, לשקול יחס 16:9 עם נוף אחד התאמה; עבור מסכים סלולרי, להשתמש פריסה קומפקטית יותר עם כרטיסיות עבור מספר משחקים.

הצגת ציוני זמן, טיים ו- Match Status

זרימת הנתונים עובדת כך:

מתייחס נכנס לציון (או אירוע חיסול) בטופס נייד.שבקשה POST הולכת ל-Directus API.
Directus מציל את הרשומה ומשדרת אירוע "יצור" באמצעות WebSocket.
החזית מקבלת את האירוע, מעדכנת את המדינה המקומית שלה, ומחזירה את הציון.
ניתן לטפל בלקוח בצד (באמצעות שעון מקומי) או השרת לצד שדות Directus עבור זמני התחלה / end. עבור דיוק, להשתמש בגישה בצד השרת: כאשר משחק מתחיל, השופט קובע את שדה 7FLT, ואת החזית מחשבת זמן שנותר מזה.השרת יכול גם לעדכן שדה 8:8 בכל שנייה באמצעות זרם ישיר או קצה קטן.

עבור מעמד התאמה, לתת למתייחסים לשנות את שדה הסטטוס ב Directus (למשל, מ"התחל" ל"משחק" ל"מעודכן") דפוס משותף הוא לקבל "פאנל שליטה" עבור שופטים עם כפתורים כדי להתחיל / לעצור את ה-Timer, ציוני עלייה ולקרוא עונשים.

תכונות מפתח של מערכת ההרחבה Custom Scoreboard

מעבר ליסוד, שקול את התכונות המתקדמות הללו כדי להפוך את הטורניר שלך לבלוט:

מספר צפיותאם הטורניר שלך פועל במקביל שדות, לוח הציון יכול להראות את כל המשחקים הפעילים או לאפשר מעבר בין שדות. השתמש פריסת רשת עם 2x2 או 3x2 לוחות עבור תצוגות מרובות שדה.
Replay או Slow-motion- לא עבור הסימון עצמו, אבל שכבת הנתונים יכולה לתמוך בפעולות "לאנדו" (אחסון ההיסטוריה) כך שתוכל לתקן שגיאות. ליישם יומן של שינויים ב-זמניים; לוח הבקרה יכול לכלול כפתור "לאנדו אחרון" המחזיר את האירוע האחרון.
אינטגרציה- לוגוי ספונסרים בצד או בין משחקים. השתמש אוסף Directus עבור "מגיבים" עם שדה תמונה וסדר מסוג מסוים.החזית יכולה להראות חסות אקראית כל 30 שניות או להציג אותם בדג'ר.
ממשק API ציבורי לסטרימינג- אם אתה משדר את הטורניר באינטרנט, להטביע את לוח הציון עם iframe או מותאם אישית RTMP. הרבה כלי הזרמה כמו OBS יכול ללכוד חלון דפדפן; לתכנן את לוח הציון עם רקע שקוף כך שהוא overlays את הזנה המשחק.
מצב הגיבוי נייר- אפילו עם מערכת דיגיטלית, תמיד יש כרטיס מסך מודפס ועט מוכן.בנוסף, ליצור דף פשוט ללא פגע כי חנויות ציונים במקומיים וסנכרנים כאשר הרשת חוזרת.

המונחים: pinboard Overlay for Livestreams

אם אתם מתכננים לחיות את התחרות שלכם, ליצור דף HTML נפרד מותאם ל- OBS overlay. Remove את כל הרקע, השתמש במיקומים מוחלטים, לחשוף את המשתנים של CSS עבור צבעים ועשרות, כך שצוות הזרמה יכול להתאים אותם בקלות.

המונחים:

בצע תהליך מובנה זה כדי לבנות את לוח הציון שלך מאפס כדי לחיות.

שלב 1: כללי טורניר Define ו-Scoring

לפני כתיבת קוד כלשהו, מסמך בדיוק כיצד הניקוד עובד.האם נקודה דורשת נגיעה בדגל?האם יש כלל רחמים?כיצד יפתרו יחסי זמן?חוק זה קובע את מודל הנתונים שלך.לדוגמה, אם נקודות חיסול, אתה צריך אוסף נפרד עבור אירועי חיסול.

שלב 2: הגדרת איסוף

היכנסו לתוך פרויקט Directus שלכם וליצור את האוספים המתוארים מוקדם יותר.הוספת חוקי אימות - לדוגמה, ציונים חייבים להיות לא שליליים integers. Conform הרשאות לתפקיד "referee" כדי לאפשר לכתוב גישה לעשרות ולעמוד מעמד, בעוד שתפקיד "ציבור" (שמשתמשים בה החזית) קרא רק גישה.

שלב 3: בניית נקודות קצה API או שימוש ב- SDK Directus

אתה יכול להשתמש ב- REST נקודות קצה שנוצרו ישירות מהחזית, או לבנות נקודות קצה API מותאם אישית אם אתה צריך לוגיקה עסקית נוספת (למשל, כדי לחשב את סך הכלים מאירועים מרובים). Directus SDK כדי לפשט אימות ומנויים בזמן אמת, אם אתה צריך סינכרוניזציה של שרת, ליצור נקודת קצה אישית ישירות שני המעדכן את ה-FLT:11 בכל שנייה באמצעות עבודה קרום או זרימה.

שלב 4: לפתח את ה-Preend Components

צור את דפי התצוגה עבור צופים ואת לוח הבקרה עבור שופטים. שמור את תצוגת הצופה קורא רק להתמקד על אלמנטים גדולים וברורים.לוח הבקרה יכול להיות קומפקטי יותר עם כפתורים וצורות. השתמש ב- CSS עבור שינויים ציון (למשל, פלאש קצר כאשר ציון increments) עבור לוח הבקרה, לשקול באמצעות עיצוב נייד הראשון עם כפתורים גדולים שניתן להזיש בקלות אפילו ללבוש כפפות.

שלב 5: מבחן עם התאמה אמיתית

הפעל התאמות עם מתנדבים הפועלים כשופטים ושחקנים.סימונים תרחישים שונים: שינויים מהירים, שדות מרובים, שיחות עונש, ובעיות רשת.בדוק כי WebSocket מתחבר מחדש באופן אוטומטי אם החיבור טיפות.בדוק את התכונה undo (אם ייושמו) ולהבטיח שציונים הסופיים לא ניתן לשנות לאחר המשחק מסתיים.בנוסף לבדוק את הנפילה הלא מקוונת ולוודא כי הציון עדיין מראה את הציון האחרון הידוע וניתן לסנכרונכרן שינויים מאוחר יותר.

שלב 6: סיקור ואימון

§ § קדמית על שרת מקומי או מארח ענן. לאירועים לא מקוונים, לרוץ Directus ואת החזית על מחשב נייד מקומי עם נקודה חמה WiFi. השתמש Docker Compose כדי לארוז Directus ו שרת אינטרנט קל משקל (כמו Nginx או Caddy) עבור הקדמית. מאמנים מתייחסים על איך להשתמש בלוח הבקרה - עשה את זה פשוט ככל האפשר: אחד כדי להזזזזזזזזזזזזזזזק ב-זמנית של צוות, אחד, אחד, גם את הציון המהיר של לוח הזמנים של לוח הזמנים של לוח הזמנים של לוח הזמנים של לוח הבקרה.

אבטחה וסמכויות בDirectus

מכיוון שהמערכת החיתונית היא מערכת חיה שגישה אליה תפקידים מרובים, האבטחה היא קריטית.התחל על ידי יצירת שלושה תפקידים:

מנהל מנהלגישה מלאה לכל האוספים וההגדרות (המשתמשים במארגני טורנירים).
Referee- לכתוב גישה לעשרות, לדרג מעמד, לעונשים ולאירועים מתאימים.קרא גישה לצוותים, לשחקנים ולטורנירים.
ציבורגישה לקריאה בלבד לעשרות, משחקים (רק אלה עם מעמד "חיים" או "מיושבים"), קבוצות ושחקנים.

השתמש במערכת הרשאות של Directus כדי לאכוף את אלה ברמת האיסוף.עבור אבטחה נוספת, להגביל את הגישה על ידי כתובת IP אם לוח הבקרה משמש רק על לוחות ספציפיים. Enable HTTPS על המקרה שלך Directus, במיוחד אם אתה חושף אותו לאינטרנט עבור הזרמת יתרויות.

אופטימיזציה ל- Live Scoreboards

לטורניר יש עשרות משחקים בו זמנית.כדי לשמור על ההזנת WebSocket:

רק להירשם לאוספים שמשנים לעיתים קרובות (למשל, FLT:12 ו-FLT:13) להימנע מהשתתפות באוספים סטטיים כמו FLT:14 אלא אם כן הם מעדכנים במהלך האירוע.
השתמש בפרמטרים המסננים של Directus כדי להירשם רק לרשומות רלוונטיות.לדוגמה, להירשם ל-FLT (ב- 15 עם מסנן 16 כדי להפחית את הרעש.
בחזית, debounce UI עדכונים.אם אירועים מרובים מגיעים בתוך אותה מסגרת אנימציה, אצווה אותם לעדכון חד-פעמי.
שמות צוות Cache ולוגים מקומיים במחלקת המקומי של הדפדפן כך שהם לא צריכים להיזרק על כל חיבור.
עבור טורנירים גדולים מאוד (מאות שחקנים), טטטים שחקן מדמיינים ומטעימים אותם על הביקוש.

טיפים ליישום מוצלח

שמור על הרשת פשוט. השתמש ברשת WiFi אחת עם רוחב פס נאותה.הימנעות מחברת מכשירים ציבוריים; השתמש בטבליות ייעודיות למתן מענה.חשב רשת של 5 GHz להפרעות נמוכות יותר.
לטמון את הנתונים הראשונים לטעון את כל השמות של הצוות, לוחות הזמנים של המשחק, ואת הלוגוים לתוך החזית בסטארט-אפ כך ש- WebSocket Outage לא שובר את התצוגה באופן מיידי.
השתמש בנפילה יש דף HTML סטטי עם שדות קלט ידני כמו אתר נופש אחרון, מסונכרן לקובץ JSON מקומי שניתן להעלות מאוחר יותר.
בדוק את הדיוק של הזמן. אם משתמשים ב- Server-side timer, ודאו שהודעות WebSocket שלכם כוללות את זמן השרת המדויק כדי להימנע מסחף בין מכשירים. (ב) . שיטה ללקוח עבור מרווחים מדויקים יותר.
שקול נגישות. השתמש בגופנים גדולים וניגוד גבוה לצופים עם ליקויים חזותיים.ספק משוב אודיו (זמזם) לאירועים חשובים כמו תחילת המשחק / סיום השימוש. השתמש ב- 18 אזורים כדי להכריז על שינויים במשתמשי מסך.
תוכנית לכוח כל המכשירים צריכים להיות טעון לחלוטין, ויש להם גיבויים סוללות ופסי חשמל. להפעיל את מחשב המחשב הנייד של לוח הציון על UPS במידת האפשר.
מסמך מודל הנתונים שלך שמור על דיאגרמת אוספים ומערכות יחסים כך מארגני טורניר עתידיים יכולים לשנות בקלות את המערכת.

מסקנה

מערכת ניקוד מותאם אישית שנבנה על Directus הופכת את טורניר כדור הצבעים מציוני ידני כאוטי לחוויה מקצועית, מרתקת. על ידי ניהול מודל הנתונים שלך ומינוף עדכונים בזמן אמת, אתה מקבל גמישות מוחלטת להסתגל לכל חוק שנקבע תוך שמירה על שחקנים וצופים הודיע בכל שנייה של המשחק.עם השלבים המפורטים כאן - החל ממודל נתונים ועד פריסה - אתה יכול ליצור ציון כי באופן אמין על יום והתרשמות על כל אחד על המגרש.

לקריאה נוספת, לחקור את אתר Directus, כללי תחרות APPA, ומדריךי פיתוח אתרים מעשיים על בניית לוחות נתונים בזמן אמת עם Vue.js או או תגובה תגובהתחרות הדוגמניות הבאה שלך לעולם לא תיראה אותו הדבר.