PLAIR — plair.pro

• PLAIR Games (/) — вертикальная лента коротких веб-игр: свайп, Play, без установки. Игры присылают авторы, лента ранжирует их по поведению игроков.
• Студия PLAIR (/studio/) — игры для брендов, выставок и обучения.

Чистые HTML, CSS и JavaScript без сборки, хостинг — GitHub Pages из ветки main. Живые функции (счётчики, лайки, комментарии, вход, заявки игр, рекорды) — Cloudflare Worker + D1 в папке worker/.

Полная документация проекта закрытая и в этот публичный репозиторий не выкладывается — она есть у владельца и у команды.

Быстрый старт

python3 -m http.server 8080        # сайт локально: http://localhost:8080
git push origin main               # выложить сайт (1–2 минуты)
cd worker && npx wrangler deploy   # выложить сервер

После правки games/games.js, games/games.css, styles.css, content.js или app.js поднимите их ?v= в HTML — иначе браузеры возьмут старую версию из кэша.

Не помещайте в репозиторий секреты, ключи API и личные адреса.

Правило сетки портфолио студии

При добавлении кейсов в window.PLAIR_CASES (content.js) все изображения кейса должны быть видны одновременно: без стопок, аккордеона, автосмены, обрезки и декоративных рамок. Обычный объём — 2–4 кадра. Не дублируйте кадры ради заполнения сетки.

У каждого изображения указывайте реальные w, h и содержательный alt. Порядок media определяет порядок просмотра, первый кадр также служит миниатюрой кейса.

studio/gallery-layout.js автоматически сравнивает раскладки рядами и колонками по пропорциям изображений и доступной площади. Выбирается наиболее заполненная композиция с ограничением чрезмерной разницы размеров кадров: вертикальные располагаются рядом, горизонтальные обычно в два ряда, смешанные получают собственную раскладку. Исходные пропорции сохраняются. На мобильном экране композиция пересчитывается. При отсутствии размеров используются размеры загруженного изображения.

Не добавляйте CSS-исключения по названию/индексу кейса: новые кейсы должны получать сетку по этому же правилу. При изменении алгоритма проверяйте горизонтальные, вертикальные и смешанные наборы на desktop и 390px; каждый кадр должен оставаться в границах галереи, без перекрытий. Клик по кадру открывает его крупно; стрелки, миниатюры и скролл переключают кейсы.