Табло счёта
Табло с перекидными цифрами для матчей и игр в реальном времени
Что такое табло счёта?
Табло счёта — это специальный инструмент для подсчёта очков на спортивных мероприятиях и в играх. Это онлайн-табло воспроизводит внешний вид и анимацию перекидывания настоящего механического табло, обеспечивая погружающий опыт для настольного тенниса, бадминтона, баскетбола, настольных игр, викторин и многого другого.
Предлагает несколько цветовых схем, включая красно-синюю и красно-жёлтую, поддерживает до 6 команд и имеет полноэкранный режим для проецирования на большие экраны. Все данные автоматически сохраняются в локальном хранилище браузера.
Цифровое табло показывает scores, teams, rounds или время в видимом виде. Оно подходит для занятий, тренировок, небольших турниров, quizzes, board games и livestreams. Перед использованием стоит понять, нужно ли вручную менять очки, сбрасывать их или сохранять по раундам. Для official competitions нужны правила, logging и дополнительная проверка.Как использовать
Как использовать
- Выберите цветовую схему: красно-синяя, красно-жёлтая и другие
- Нажмите на название команды для редактирования
- Используйте кнопки + / − для изменения счёта
- Нажмите кнопку полноэкранного режима для проецирования на большой экран
Советы по отображению
- Включите полноэкранный режим до начала мероприятия, чтобы имена, цвета и счёт были видны из зоны зрителей.
- Если счёт имеет официальное значение, сохраняйте отдельную запись в бумажном или электронном виде на случай закрытия вкладки или очистки локального хранилища.
Применение
Технический принцип
Табло работает как небольшой клиентский конечный автомат: каждая команда — объект с полями имени, счёта и цвета, а весь состав сохраняется в window.localStorage в виде JSON-строки при каждом изменении. Поскольку localStorage синхронный и привязан к origin плюс профилю браузера, та же вкладка переживает обновление страницы, но другой браузер или окно приватного режима начинает с пустого состава. Анимация перекидных цифр — чистый CSS: каждая цифра состоит из двух половин, вращающихся вокруг оси X, а при изменении счёта видимая цифра меняется с анимацией transform: rotateX длительностью 300-400 мс. Поскольку анимация управляется локальным состоянием, а не сетевым кадром, дисплей продолжает работать, даже если Wi-Fi на площадке пропадёт во время игры. Полноэкранная презентация использует стандартный Fullscreen API (element.requestFullscreen, document.exitFullscreen), поэтому табло заполняет проектор или телевизор без элементов интерфейса браузера. Синхронизация между вкладками опирается на событие storage: когда ключ localStorage изменяется в одной вкладке, все остальные вкладки того же origin получают StorageEvent и перерисовываются из обновлённого JSON. Это позволяет телефону судейского ноутбука и кортовому планшету оставаться синхронизированными без бэкенда, поскольку данные никуда не покидают устройство.
- Сохранение состояния: window.localStorage.setItem с JSON-сериализованным составом при каждом изменении счёта, привязано к origin и профилю браузера
- Анимация перекидных цифр: два CSS-псевдоэлемента анимируются с transform: rotateX за ≈ 300-400 мс; цикл анимации на JS не требуется
- Fullscreen API: element.requestFullscreen() / document.exitFullscreen() с событием fullscreenchange для отслеживания выхода по клавише Esc
- Синхронизация между вкладками: window.addEventListener('storage', handler) срабатывает на каждой другой вкладке при изменении ключа
- Нижняя граница счёта: значения ограничены нулём, поэтому кнопка минус не даёт отрицательных результатов при неформальной игре
- Цветовая тема: CSS custom properties (--team-a, --team-b) меняют палитру без перерисовки DOM-дерева
- Верхние границы счёта зависят от выбранного набора правил: например, в баскетболе ограничения нет, в настольном теннисе — 11 очков с правилом дьюса в 2 очка
Примеры
Баскетбольное табло на перерыв
Команда A: Lakers Цвет: красный
Команда B: Celtics Цвет: синий
Q1: 22 - 18
Q2: 41 - 38 (перерыв)
Q3: 60 - 55
Q4 итог: 82 - 76
Тема: красно-синяя, во весь экран на проекторе залаТеннисный матч по сетам
Сет 1: 6 - 4 (выиграл игрок A)
Сет 2: 3 - 6 (выиграл игрок B)
Сет 3: 7 - 5 (выиграл игрок A)
Итог: игрок A побеждает 2-1
Совет: переименуйте команды в имена игроков, сбрасывайте между матчамиВикторина, формат на 4 команды
Раунд 1: Команда Quokka 8, Команда Otter 6, Команда Bear 7, Команда Wolf 5
Раунд 2: 14, 13, 12, 10
Раунд 3: 21, 22, 17, 16
Итог: 30, 31, 25, 23 -> побеждает Otter
Поддерживается до 6 команд, счёт сохраняется в localStorageНастольный теннис, партия до 11 очков
Последовательность: 1-0, 2-0, 2-1, 3-1, 3-2, 3-3, 4-3, ..., 10-9
Ровно при 10-10: нужно выиграть с разницей в 2
Итог: 12 - 10
Тема: красно-жёлтая для контрастного просмотра на большом экране
Сброс счёта сохраняет имена игроков для следующей партииЧасто задаваемые вопросы
Для каких видов спорта подходит?
Изначально сделано для настольного тенниса и бадминтона (резкая смена счёта, крупные жирные цифры в стиле флипа). Точно так же годится для настольных игр, викторин, баскетбола, волейбола, киберспортивных турниров, школьных соревнований и любых задач с быстрым обновлением счёта.
Можно ли менять названия и цвета команд?
Да. Названия команд редактируются прямо по клику. Из готовых тем выбирайте подходящую цветовую пару (красный-синий, красный-жёлтый и т. д.). Загрузка логотипов или изображений не предусмотрена.
Как работает анимация флипа?
Это CSS 3D-трансформация, имитирующая механические перекидные таблички. Длительность переворота короткая (несколько сотен миллисекунд), чтобы не мешать быстрому ведению счёта. Если предпочитаете мгновенные обновления, отключите анимацию в настройках.
Сохранится ли счёт после обновления страницы?
Да. Текущий состав (названия команд, счёт, цвета) сохраняется в localStorage при каждом изменении, поэтому обновление страницы в том же браузере счёт не сбрасывает. Смена браузера или очистка данных сайта возвращают значения к 0:0.
Можно ли выводить счёт на проектор или большой экран?
Да. Табло поддерживает полноэкранный режим — его можно выводить на проектор, телевизор или внешний монитор. Счёт сохраняется в localStorage и переживает обновление страницы в том же браузере.
Поддерживается ли счёт по сетам и партиям (например, в теннисе)?
В некоторых сборках — да, можно задать структуру «лучший из N сетов» и сбрасывать счёт очков в конце каждого сета. Более простые версии считают только очки. Выбирайте режим, подходящий вашему виду спорта.
Загружается ли что-нибудь?
Нет. Табло работает целиком в вашем браузере. Счёт живёт во вкладке и (по желанию) в localStorage. На сервер ничего не передаётся.