НОВАЯ МИКУ РУЛЕТКА, ПОКА НЕ ДО КОНЦА

Author: RXDCODX

src/components/OBS_Components/MikuMonday/MikuMonday.tsx

@@ -1,6 +1,6 @@
 import "react-roulette-pro/dist/index.css";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import IntroStage from "./components/stages/IntroStage";
 import ResultStage from "./components/stages/ResultStage";
@@ -22,6 +22,49 @@ function MikuMondayContent() {
 
   const rouletteGroups = useRouletteGroups(currentAlert);
 
+  // Получаем выигрышный трек из рулетки
+  const winnerTrack = useMemo(() => {
+    if (!currentAlert) return undefined;
+
+    const winnerGroup = rouletteGroups.find(group => group.hasWinner);
+    if (!winnerGroup) {
+      console.log(
+        "[MikuMonday] Нет группы с победителем, используем исходный трек"
+      );
+      return currentAlert.selectedTrack;
+    }
+
+    const winnerPrize = winnerGroup.prizes[winnerGroup.prizeIndex];
+    if (!winnerPrize) {
+      console.warn("[MikuMonday] Не найден приз для победителя");
+      return currentAlert.selectedTrack;
+    }
+
+    // Ищем полный объект трека в availableTracks
+    const fullTrack = currentAlert.availableTracks.find(
+      track => track.id === winnerPrize.id
+    );
+
+    if (!fullTrack) {
+      console.warn("[MikuMonday] Не найден полный объект трека", {
+        prizeId: winnerPrize.id,
+        prizeText: winnerPrize.text,
+      });
+      return currentAlert.selectedTrack;
+    }
+
+    console.log("[MikuMonday] Выигрышный трек определен", {
+      originalTrackId: currentAlert.selectedTrack.id,
+      originalTrackNumber: currentAlert.selectedTrack.number,
+      winnerTrackId: fullTrack.id,
+      winnerTrackNumber: fullTrack.number,
+      winnerArtist: fullTrack.artist,
+      winnerTitle: fullTrack.title,
+    });
+
+    return fullTrack;
+  }, [currentAlert, rouletteGroups]);
+
   const [stage, setStage] = useState<StageKey>("waiting");
   const waitingTimeoutRef = useRef<number | null>(null);
   const stageSyncTimeoutRef = useRef<number | null>(null);
@@ -72,30 +115,51 @@ function MikuMondayContent() {
     currentAlert?.skipAvailableTracksUpdate === true;
 
   const handleIntroComplete = useCallback(() => {
+    console.log("[MikuMonday] handleIntroComplete вызван", {
+      rouletteGroupsLength: rouletteGroups.length,
+      currentAlertId: currentAlert?.id,
+      trackNumber: currentAlert?.selectedTrack.number,
+    });
     if (rouletteGroups.length > 0) {
+      console.log("[MikuMonday] Переходим на рулетку");
       setStage("roulette");
       return;
     }
+    console.log("[MikuMonday] Нет рулеток, переходим на результат");
     setStage("result");
-  }, [rouletteGroups.length]);
+  }, [rouletteGroups.length, currentAlert]);
 
   const handleRouletteComplete = useCallback(() => {
     setStage("result");
   }, []);
 
   const handleResultComplete = useCallback(() => {
+    console.log("[MikuMonday] handleResultComplete вызван", {
+      currentAlertId: currentAlert?.id,
+      queueId: currentAlert?.queueId,
+      displayName: currentAlert?.twitchUser.displayName,
+      trackNumber: currentAlert?.selectedTrack.number,
+    });
     setStage("waiting");
     if (waitingTimeoutRef.current !== null) {
       window.clearTimeout(waitingTimeoutRef.current);
     }
 
     waitingTimeoutRef.current = window.setTimeout(() => {
+      console.log("[MikuMonday] Вызываем dequeueCurrent после паузы", {
+        pauseMs: QUEUE_PAUSE_MS,
+      });
       waitingTimeoutRef.current = null;
       dequeueCurrent();
       const nextAlert = useMikuMondayStore.getState().currentAlert;
+      console.log("[MikuMonday] Текущий статус после деквеу", {
+        nextAlertId: nextAlert?.id,
+        nextAlertDisplayName: nextAlert?.twitchUser.displayName,
+        nextAlertTrackNumber: nextAlert?.selectedTrack.number,
+      });
       setStage(nextAlert ? "intro" : "waiting");
     }, QUEUE_PAUSE_MS);
-  }, [dequeueCurrent]);
+  }, [dequeueCurrent, currentAlert]);
 
   if (!currentAlert || stage === "waiting") {
     return (
@@ -130,11 +194,24 @@ function MikuMondayContent() {
 
   return (
     <div className={styles.layout}>
-      <ResultStage
-        track={currentAlert.selectedTrack}
-        twitchUser={currentAlert.twitchUser}
-        onComplete={handleResultComplete}
-      />
+      {(() => {
+        const trackToDisplay = winnerTrack ?? currentAlert.selectedTrack;
+        console.log("[MikuMonday] 📺 Отправляем трек в ResultStage", {
+          trackId: trackToDisplay.id,
+          trackNumber: trackToDisplay.number,
+          trackTitle: trackToDisplay.title,
+          trackArtist: trackToDisplay.artist,
+          isWinnerTrack: winnerTrack !== undefined,
+          winnerGroupExists: rouletteGroups.some(g => g.hasWinner),
+        });
+        return (
+          <ResultStage
+            track={trackToDisplay}
+            twitchUser={currentAlert.twitchUser}
+            onComplete={handleResultComplete}
+          />
+        );
+      })()}
     </div>
   );
 }

src/components/OBS_Components/MikuMonday/MikuMondayController.tsx

@@ -18,6 +18,22 @@ export default function MikuMondayController() {
   const isAlertShowing = useMikuMondayStore(state => state.isAlertShowing);
   const { showToast } = useToastModal();
 
+  useEffect(() => {
+    console.log("[MikuMondayController] currentAlert изменился", {
+      alertId: currentAlert?.id,
+      queueId: currentAlert?.queueId,
+      displayName: currentAlert?.twitchUser.displayName,
+      trackNumber: currentAlert?.selectedTrack.number,
+      isAlertShowing,
+    });
+  }, [
+    currentAlert?.id,
+    currentAlert?.queueId,
+    currentAlert?.selectedTrack.number,
+    currentAlert?.twitchUser.displayName,
+    isAlertShowing,
+  ]);
+
   useEffect(() => {
     startHub().catch(err => {
       showToast(

src/components/OBS_Components/MikuMonday/components/CustomRoulette/CustomRoulette.module.scss

@@ -0,0 +1,59 @@
+.roulette {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+}
+
+.track {
+  display: flex;
+  align-items: center;
+  will-change: transform;
+  padding: 20px 0;
+}
+
+.prize {
+  flex-shrink: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  position: relative;
+  border: 2px solid rgba(57, 197, 187, 0.3);
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.3s;
+  height: 210px;
+
+  &:hover {
+    border-color: rgba(57, 197, 187, 0.8);
+  }
+}
+
+.prizeImage {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+}
+
+.prizeText {
+  position: relative;
+  z-index: 1;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+  text-align: center;
+  word-break: break-word;
+  padding: 12px;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
+  width: 100%;
+  line-height: 1.3;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+}

src/components/OBS_Components/MikuMonday/components/CustomRoulette/CustomRoulette.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useRef, useState } from "react";
+
+import type { RoulettePrize } from "../../types";
+import styles from "./CustomRoulette.module.scss";
+
+interface CustomRouletteProps {
+  prizes: RoulettePrize[];
+  prizeIndex: number;
+  isReversed?: boolean;
+  start: boolean;
+  spinningTime?: number;
+  onComplete?: () => void;
+}
+
+const PRIZE_WIDTH = 200; // ширина одного приза
+const PRIZE_GAP = 10; // отступ между призами
+const SPIN_DURATION = 20; // секунды
+
+export default function CustomRoulette({
+  prizes,
+  prizeIndex,
+  isReversed = false,
+  start,
+  spinningTime = SPIN_DURATION,
+  onComplete,
+}: CustomRouletteProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [translateX, setTranslateX] = useState(0);
+  const [isSpinning, setIsSpinning] = useState(false);
+
+  useEffect(() => {
+    if (!start || isSpinning || prizes.length === 0) return;
+
+    console.log("[CustomRoulette] Начинаем вращение", {
+      prizeIndex,
+      prizesCount: prizes.length,
+      isReversed,
+      spinningTime,
+    });
+
+    setIsSpinning(true);
+
+    // Создаем зацикленный массив призов (повторяем 5 раз для плавной прокрутки)
+    const containerWidth = containerRef.current?.offsetWidth || 1000;
+    const totalPrizeWidth = PRIZE_WIDTH + PRIZE_GAP;
+
+    // Центр контейнера
+    const centerOffset = containerWidth / 2 - PRIZE_WIDTH / 2;
+
+    // Вычисляем сколько полных прокруток сделать (3-5 оборотов)
+    const totalPrizes = prizes.length;
+
+    // Индекс выигрышного приза в повторяющемся массиве (берем средний повтор)
+    const middleRepeat = 2; // из 5 повторов берем средний
+    const targetPrizeIndex = middleRepeat * totalPrizes + prizeIndex;
+
+    // Финальная позиция выигрышного приза
+    const targetPosition = targetPrizeIndex * totalPrizeWidth;
+
+    // Финальная позиция с центрированием
+    const endPosition = centerOffset - targetPosition;
+
+    console.log("[CustomRoulette] Расчет позиций", {
+      endPosition,
+      targetPosition,
+      targetPrizeIndex,
+      centerOffset,
+    });
+
+    // Запускаем анимацию
+    setTranslateX(endPosition);
+
+    // Уведомляем о завершении
+    const timer = setTimeout(() => {
+      console.log("[CustomRoulette] Вращение завершено", {
+        prizeIndex,
+        finalPrize: prizes[prizeIndex],
+      });
+      setIsSpinning(false);
+      onComplete?.();
+    }, spinningTime * 1000);
+
+    return () => clearTimeout(timer);
+  }, [start, prizes, prizeIndex, isReversed, spinningTime, onComplete]);
+
+  // Создаем повторяющийся массив призов
+  const repeatedPrizes = Array(5).fill(prizes).flat();
+
+  return (
+    <div className={styles.roulette} ref={containerRef}>
+      <div
+        className={styles.track}
+        style={{
+          transform: `translateX(${translateX}px)`,
+          transition: isSpinning
+            ? `transform ${spinningTime}s cubic-bezier(0.17, 0.67, 0.12, 0.99)`
+            : "none",
+        }}
+      >
+        {repeatedPrizes.map((prize, index) => (
+          <div
+            key={`${prize.id}-${index}`}
+            className={styles.prize}
+            style={{
+              width: `${PRIZE_WIDTH}px`,
+              marginRight: `${PRIZE_GAP}px`,
+            }}
+          >
+            {prize.image && (
+              <img
+                src={prize.image}
+                alt={prize.text}
+                className={styles.prizeImage}
+              />
+            )}
+            <div className={styles.prizeText}>{prize.text}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/OBS_Components/MikuMonday/components/CustomRoulette/index.ts

@@ -0,0 +1 @@
+export { default } from "./CustomRoulette";

src/components/OBS_Components/MikuMonday/components/CustomRouletteGroupList/CustomRouletteGroupList.module.scss

@@ -0,0 +1,33 @@
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 20px;
+  position: relative;
+}
+
+.rouletteWrapper {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  mask-image: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 1) 25%,
+    rgba(0, 0, 0, 1) 75%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 1) 25%,
+    rgba(0, 0, 0, 1) 75%,
+    rgba(0, 0, 0, 0) 100%
+  );
+
+  &.reversed {
+    // Для reversed рулеток можно добавить особые стили
+  }
+}