);
}
function ColorPicker({ onPick, onCancel }) {
return (
e.stopPropagation()}>
Выберите цвет
{COLORS.map((c) => (
onPick(c)} />
))}
);
}
function LogPanel({ logRef, log, open }) {
return (
Ход игры
{log.map((line, i) =>
{line}
)}
);
}
/* Кольцо направления хода: две дуги со стрелками, вращаются вокруг сброса;
при направлении против часовой вращение реверсируется */
function TurnRing({ ccw }) {
return (
);
}
/* Летящая карта: вылетает из точки from и приземляется в to (границы в px) */
function FlyingCard({ fly, onDone }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return undefined;
let raf2;
const raf1 = requestAnimationFrame(() => {
raf2 = requestAnimationFrame(() => {
const sx = fly.to.width / fly.from.width;
const sy = fly.to.height / fly.from.height;
el.style.transform =
`translate(${fly.to.x - fly.from.x}px, ${fly.to.y - fly.from.y}px) ` +
`scale(${sx}, ${sy}) rotate(0deg)`;
});
});
const t = setTimeout(onDone, 480);
return () => { cancelAnimationFrame(raf1); if (raf2) cancelAnimationFrame(raf2); clearTimeout(t); };
}, [fly, onDone]);
return (
);
}
/* ------------------------------ Экран игры ----------------------------- */
function GameView({ profile, onLeave, tableBg }) {
const [state, setState] = useState(null);
const [error, setError] = useState("");
const [pendingWild, setPendingWild] = useState(null);
const [fly, setFly] = useState(null);
const [flyDraw, setFlyDraw] = useState(null); // полёт карты из колоды
const [hiddenDrawUid, setHiddenDrawUid] = useState(null); // взятая карта скрыта, пока летит
const [discardHistory, setDiscardHistory] = useState([]); // кучка сброса с наклонами
const [logOpen, setLogOpen] = useState(false);
const [seenLog, setSeenLog] = useState(0);
const [unoFlash, setUnoFlash] = useState(false);
const [sortMode, setSortMode] = useState(() => {
try { return localStorage.getItem("uno-hand-sort") || ""; } catch (e) { return ""; }
});
const unoTimer = useRef(null);
const prevHandUidsRef = useRef(null); // состав руки на прошлом обновлении — для поиска взятой карты
const logRef = useRef(null);
const isDesktop = useIsDesktop();
const seatRing = useSeatRing();
/* переключение сортировки руки (повторный клик по активной отключает) */
const toggleSort = useCallback((m) => {
setSortMode((cur) => {
const next = cur === m ? "" : m;
try {
if (next) localStorage.setItem("uno-hand-sort", next);
else localStorage.removeItem("uno-hand-sort");
} catch (e) { /* приватный режим — просто не сохраняем */ }
return next;
});
}, []);
const versionRef = useRef(0);
const lastTopUid = useRef(undefined); // uid верхней карты сброса с прошлого опроса
const lastDrawVersion = useRef(null); // версия, для которой анимировали взятие
const flyRects = useRef(new Map()); // где в руке лежала сыгранная нами карта
const clearFly = useCallback(() => setFly(null), []);
const clearFlyDraw = useCallback(() => { setFlyDraw(null); setHiddenDrawUid(null); }, []);
const applyState = useCallback((data) => {
if (!data || data.unchanged) return;
versionRef.current = data.version;
setState(data);
}, []);
/* анимация выкладывания карты на сброс: следим за сменой верхней карты */
useEffect(() => {
if (!state || !state.discardTop) { lastTopUid.current = null; return; }
const uid = state.discardTop.uid;
if (uid === lastTopUid.current) return;
const isFirstState = lastTopUid.current === undefined;
lastTopUid.current = uid;
const entry = { uid, image: state.discardTop.image, rot: rotFor(uid) };
if (isFirstState) {
setDiscardHistory([entry]); // при загрузке страницы карту на столе не анимируем
return;
}
setDiscardHistory((h) => [...h.slice(-5), entry]); // кучка хранит последние ~6 карт
// откуда летит: наша карта из руки, карта бота из его веера, либо колода
let from = null;
if (state.you && state.lastPlayPid === state.you.id && flyRects.current.has(uid)) {
from = flyRects.current.get(uid);
flyRects.current.delete(uid);
} else if (state.lastPlayPid) {
const el = document.querySelector(`.opponent[data-pid="${state.lastPlayPid}"]`);
if (el) {
const r = el.getBoundingClientRect();
from = { x: r.left + r.width / 2 - 22, y: r.top + r.height / 2 - 33, width: 44, height: 66 };
}
}
if (!from) {
const pile = document.querySelector(".pile.draw img");
if (pile) {
const r = pile.getBoundingClientRect();
from = { x: r.left, y: r.top, width: r.width, height: r.height };
}
}
const target = document.querySelector(".pile.discard .stack-card:last-of-type");
if (!from || !target) return;
setFly({ uid, image: state.discardTop.image, from, to: target.getBoundingClientRect() });
}, [state && state.discardTop && state.discardTop.uid]);
/* анимация взятия карты из колоды: к нам — лицом, к сопернику — рубашкой */
useEffect(() => {
if (!state) return;
if (lastDrawVersion.current === null) { lastDrawVersion.current = state.version; return; }
if (state.version === lastDrawVersion.current) return;
lastDrawVersion.current = state.version;
if (state.status !== "playing" || !state.lastDrawPid) return;
const deck = document.querySelector(".pile.draw img");
if (!deck) return;
const from = deck.getBoundingClientRect();
if (state.you && state.lastDrawPid === state.you.id && state.you.hand.length) {
const hand = state.you.hand;
const prev = prevHandUidsRef.current;
// взятая карта — та, которой не было в руке на прошлом обновлении
// (при сортированной руке новая карта не обязана быть последней)
const card = (prev && hand.find((c) => !prev.has(c.uid))) || hand[hand.length - 1];
const el = document.querySelector(`.hand .card[data-uid="${card.uid}"]`);
if (!el) return;
const to = el.getBoundingClientRect();
setHiddenDrawUid(card.uid);
setFlyDraw({ uid: "draw" + state.version, image: card.image, from, to });
} else {
const el = document.querySelector(`.opponent[data-pid="${state.lastDrawPid}"]`);
if (!el) return;
const r = el.getBoundingClientRect();
setFlyDraw({
uid: "draw" + state.version,
image: "assets/cards/back.jpg",
from,
to: { x: r.left + r.width / 2 - 20, y: r.top + r.height / 2 - 30, width: 40, height: 60 },
});
}
}, [state && state.version]);
/* запоминаем текущий состав руки — на следующем обновлении по этому набору
определяется взятая карта (эффект выше читает значение с прошлого рендера) */
useEffect(() => {
const hand = state && state.you && state.you.hand;
prevHandUidsRef.current = hand ? new Set(hand.map((c) => c.uid)) : null;
}, [state && state.version]);
/* опрос состояния */
useEffect(() => {
let stopped = false;
const tick = async () => {
try {
const data = await api(`/games/${profile.gameId}?token=${profile.token}&v=${versionRef.current}`);
if (!stopped) applyState(data);
} catch (e) {
if (e.status === 400) { saveProfile(null); onLeave(); } // игра закончилась на сервере
}
};
tick();
const id = setInterval(tick, POLL_MS);
return () => { stopped = true; clearInterval(id); };
}, [profile, applyState, onLeave]);
/* автоскролл лога */
useEffect(() => {
if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;
}, [state && state.log.length]);
/* непрочитанные строки лога: открытие шторки сбрасывает счётчик */
const logLen = state ? state.log.length : 0;
useEffect(() => {
if (logOpen) setSeenLog(logLen);
}, [logOpen, logLen]);
const unread = Math.max(0, logLen - seenLog);
const act = async (path, body) => {
try {
setError("");
applyState(await api(`/games/${profile.gameId}${path}`, { token: profile.token, ...body }));
} catch (e) {
setError(e.message);
setTimeout(() => setError(""), 3000);
}
};
if (!state) return
Загрузка…
;
const you = state.you;
const others = state.players.filter((p) => !you || p.id !== you.id);
const top = state.discardTop;
const handRaw = you ? you.hand : [];
const hand = sortHand(handRaw, sortMode);
const clickCard = (e, card) => {
if (!state.yourTurn) return;
if (!isPlayable(card, top, state.activeColor)) return;
if (e && e.currentTarget) {
// запоминаем, где карта лежала в руке — отсюда она полетит на стол
flyRects.current.set(card.uid, e.currentTarget.getBoundingClientRect());
}
if (card.kind === "wild" || card.kind === "wild_draw4") setPendingWild(card);
else act("/play", { cardId: card.uid });
};
const playWild = (color) => {
const card = pendingWild;
setPendingWild(null);
if (card) act("/play", { cardId: card.uid, color });
};
return (
![]({img("assets/cards/back.jpg")})
)}