Библиотека девопса | DevOps, SRE, Sysadmin

🎮 Пять мини-игр пока llm думает

Пока LLM думает, билд собирается или файл загружается, пользователь смотрит в спиннер. Эту проблему решает react-waiting-game — React-компонент с пятью встроенными аркадными играми для экранов ожидания.

Что это

Библиотека без внешних зависимостей. Все игры нарисованы в стиле 1-bit pixel art на одном canvas. Управление одной кнопкой — клавиатура, мышь и тач работают одинаково. Компонент SSR-safe и сам ставится на паузу, если вкладка скрыта.

Пять игр на выбор:

- jellyfish — медуза плывёт вверх пока держишь кнопку, тонет когда отпускаешь
- runner — прыжки через кактусы и уклонение от птиц
- gravity — инверсия гравитации между шипами на полу и потолке
- invaders — авто-стрельба вправо, переключение между рядами нажатием
- rhythm — ноты летят в зону попадания, короткий тап или удержание в ритм

Все пять поддерживают комбо-множитель, бонус за near-miss, три пауэр-апа и пять достижений каждая.

Как использовать

Установка:

npm install react-waiting-game

Базовый пример:

import { WaitingArcade } from 'react-waiting-game';

function LoadingScreen() {
  return <WaitingArcade game="runner" autoStart />;
}

Пример с LLM-запросом, игра появляется пока идёт ответ и исчезает когда он пришёл:

import { useState } from 'react';
import { WaitingArcade } from 'react-waiting-game';

function Chat() {
  const [loading, setLoading] = useState(false);

  async function ask() {
    setLoading(true);
    await fetch('/api/chat', { method: 'POST', body: '...' });
    setLoading(false);
  }

  return (
    <div>
      <button onClick={ask} disabled={loading}>Ask</button>
      {loading && (
        <WaitingArcade
          game="runner"
          autoStart
          persistHighScore
          persistAchievements
        />
      )}
    </div>
  );
}

Пропс paused позволяет поставить игру на паузу снаружи — удобно именно в тот момент, когда ответ пришёл и нужно переключить внимание пользователя.

Настройки

Цвет всего элемента меняется одним пропсом color. Скины переключаются через skin — у каждой игры свои варианты, например ninja или frog для runner, octopus для jellyfish. Лучший счёт и достижения сохраняются в localStorage если передать persistHighScore и persistAchievements.

Пример:

<WaitingArcade
  game="jellyfish"
  skin="octopus"
  color="#4f46e5"
  persistHighScore
  persistAchievements
  onGameOver={(score) => console.log('score:', score)}
/>

📍 Навигация: Вакансии • Задачи • Собесы

🐸 Библиотека devops'a

#пульс_индустрии

Please open Telegram to view this post