frontend/src/components/TheftStartModal.tsx - dev - kochkatech/CorpGame

frontend/src/components/TheftStartModal.tsx

72 строки3 KB

kochkareal

chore: добавлен .gitattributes, нормализованы переносы строк (LF везде, кроме .bat/.cmd)

06 авг 2026, 15:18

06 авг 2026, 15:18c25ef1b

import { useState } from 'react';
import { Modal } from './Modal';
import { Button } from './ui/Button';
import { Emoji } from './ui/Emoji';
import { GameConfig, Team } from '../types';
import { api, ApiError } from '../api/client';

interface Props {
  target: Team | null;
  onClose: () => void;
  config: GameConfig;
}

export function TheftStartModal({ target, onClose, config }: Props) {
  const [resource, setResource] = useState('');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  if (!target) return null;

  // Показываем только то, что реально есть у цели — выбор не вслепую.
  const stealable = config.resources.filter((r) => (target.resources[r.key] ?? 0) > 0);
  const selected = stealable.some((r) => r.key === resource) ? resource : stealable[0]?.key ?? '';

  async function start() {
    setBusy(true);
    setError(null);
    try {
      await api.post('/team/interactions/theft/start', { targetTeamId: target!.id, resource: selected });
      onClose();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : 'Не удалось начать кражу');
    } finally {
      setBusy(false);
    }
  }

  return (
    <Modal open={!!target} onClose={onClose} title={`Украсть у команды «${target.name}»`}>
      <div className="flex flex-col gap-3">
        {stealable.length === 0 ? (
          <p className="text-white/70">У этой команды сейчас нечего красть.</p>
        ) : (
          <>
            <p className="text-sm text-white/70">Выберите ресурс — показано только, что у цели есть, без количества:</p>
            <div className="grid grid-cols-2 gap-2">
              {stealable.map((r) => {
                const isSel = selected === r.key;
                return (
                  <button
                    key={r.key}
                    onClick={() => setResource(r.key)}
                    className={`flex items-center gap-2 rounded-lg border p-2 text-left transition ${
                      isSel ? 'border-focus bg-main/20' : 'border-line bg-surfaceDeep hover:border-main'
                    }`}
                  >
                    <Emoji name={r.key} fallback={r.icon} label={r.label} className="h-6 w-6" />
                    <span className="flex-1 text-sm">{r.label}</span>
                  </button>
                );
              })}
            </div>
            {error && <div className="rounded-lg bg-black/30 px-3 py-2 text-sm text-red-300">{error}</div>}
            <Button variant="accent" onClick={start} busy={busy} disabled={!selected}>
              {busy ? 'Начинаем…' : 'Начать кражу'}
            </Button>
          </>
        )}
      </div>
    </Modal>
  );
}