Я збудував безкоштовну панель виклику Bingo з 331 аудіокліпом та без бекенда
https://ift.tt/NLobh6E
Панель виклику bingo має чотири завдання: тягнути число без повторів, проговорювати його вголос, позначати його на флаг-борді та залишати достатню історію на екрані, щоб перевірити переможця. Я створив це як функціонал лише для браузера для BingWow, оскільки у кімнаті вже є один ведучий та один екран. Немає сенсового спільного стану, який варто надсилати на сервер.
Працююча версія тут: bingwow.com/caller. Вона підтримує 75-м
-кулярну гру, 90-м та 30-м швидким бинго, з голосовими викликами та повноекранною дошкою для телевізора або проектора.
Викликальник локальний стан
Мультиплеєрна гра Bingo потребує сервера, тому що у кожного гравця своя незалежна дошка, і кожен дотик потребує авторитету. Самостійний викликальник цього не потребує. Один ведучий керує ним. Висновок є публічним у кімнаті. Оновлення запускає нову гру, що є нормальним для викликальника.
Головний стан — це редуктор:
interface CallerState {
mode: BallMode; // '30' | '75' | '90'
deck: number[]; // перемішаний, витягувати за допомогою pop()
called: BingoBall[];
calledSet: Set<number>; // O(1) швидке звернення до дошки виклику
isAutoMode: boolean;
roundNumber: number;
}
case 'DRAW': {
if (state.deck.length === 0) return state;
const deck = [...state.deck];
const num = deck.pop()!;
return {
...state,
deck,
called: [...state.called, makeBall(num, state.mode)],
};
}
Викликальник не надсилає запитів, коли число витягують. Колода перемішується у вкладці, флагборд читає набір викликаних, а таймер автодзвону просувається лише після завершення поточної анімації.
Чому я пропустив API Web Speech
speechSynthesis.speak() здавалося дешевою відповіддю. Це не пройшло тест продукту.
Доступні голоси відрізняються залежно від ОС та браузера. Спокійний голос на Mac ставав іншим голосом на Chromebook. Швидкі виклики також погано ставали в чергу під час авто-виклику, а традиційні англійські псевдоніми 90-балу звучали плоско, коли їх читав голос браузера.
Замість цього вантажений викликальник використовує 331 попередньо записаний MP3:
- виклики номерів для ігор на 30, 75 та 90 куль
- кожен традиційний псевдонім 90-балу, від “Legs eleven” до “Two fat ladies”
- привітання, пауза, прогрес та переходи між раундами
- короткі кліпи, які поміщаються між візуальними викликами при більш швидких швидкостях
Це робить звуковий супровід для 90-бального bingo виклику подібним у класній кімнаті, у будинку людей похилого віку, у залі церкви або у вкладці браузера на телевізорі.
Флагборд — продукт
Більшість користувачів називає ту саму поверхню панеллю Bingo виклику, доскою виклику bingo або флагбордом. Код розглядає її як чистий дисплей-компонент: вона не володіє грою; вона лише відображає поточний режим та викликані числа.
75-бальний використовується з колонками B-I-N-G-O. 90-бальний та 30-бальний використовують діапазони чисел. Спільний компонент виклику ініціює режим із маршруту:
// /caller за замовчуванням 75-бальний
<CallerClient />
// /caller/90-ball
<CallerClient initialMode="90" />
// /caller/30-ball
<CallerClient initialMode="30" />
Це дало кожному режиму власну індексовану сторінку, водночас зберігши одну реалізацію викликальника. Сторінка 90-бального також містить інтерактивний список усіх 90 традиційних викликів, зібраний із того самого аудіо-манифесту, який використовується викликальником.
Аудіо випускається з таймлайна анімації
Народжене число злітає у своє клітинку на флагборді. Число має бути проголошене в момент удару, а не тоді, коли React закінчить рендеринг. Перша реалізація прив’язала аудіо до стейтового ефекту, і воно спостерігалось під час авто-виклику.
Виправлення полягало в тому, щоб запускати аудіо з колбеку анімації:
runFlyingBallToCell({
ball,
targetCell,
onAbsorbed: () => {
setCellRevealed(true);
voiceRef.current?.playBallImpact(ball, mode, lingoEnabled);
},
});
Таймлайн володіє таймінгом, редуктор — станом, а флагборд залишається чистою моделлю читання. Таке розділення убезпечило від конфліктів між ручним витягуванням, авто-викликом, вимкненням голосу та повноекранним режимом.
Друк завершує офлайн-гру
Безкоштовний викликальник сам по собі — лише половина бинго-ночі. Гравці все одно потребують картки. Викликальник на 75-м полем має потік Print Cards, який генерує до 500 унікальних карт з кодами валідації. Посібник підтримки тут: Free online bingo caller, а принтер карток тут: bingwow.com/print.
Практична настройка проста:
- Відкрити безкоштовну панель виклику.
- Роздрукувати карти або роздати існуючі квитки.
- Використовувати повноекранний режим на телевізорі або проекторі.
- Почати ручний розіграш або автозвон.
- Перевірити переможця за історією викликів.
Спробуйте викликальника
- Панель виклику на 75 полів: bingwow.com/caller
- Викликальник UK на 90 полів: bingwow.com/caller/90-ball
- Швидкісний викликальник на 30 полів: bingwow.com/caller/30-ball
- Посібник без обладнання для ведучого: free online bingo caller
- Посібник вечора Bingo: how to host bingo night
HI-FI News
через DEV Community: javascript https://ift.tt/62OyCdX
2 червня 2026 р. о 14:37 PM
June 2, 2026 at 02:37PM
Залишити відповідь