Refactor WaifuAlerts and WaifuRoulette components for improved state management and functionality

- Updated WaifuAlerts to use shallow comparison for currentMessage from the store.
- Added shuffle prop to WaifuRoulette and integrated it with useEffect for better prize handling.
- Enhanced RoulettePro options for improved user experience during prize selection.

Author: RXDCODX

src/components/OBS_Components/WaifuAlerts/WaifuAlerts.tsx

@@ -19,7 +19,9 @@ import WaifuRoulette from "./WaifuRoulette";
 // Очередь сообщений теперь живёт в SignalR-сторе
 
 export default function WaifuAlerts() {
-  const currentMessage = useTelegramusHubStore(state => state.currentMessage);
+  const currentMessage = useTelegramusHubStore(
+    useShallow(state => state.currentMessage)
+  );
   const dequeueCurrent = useTelegramusHubStore(state => state.dequeueCurrent);
   const startHub = useTelegramusHubStore(state => state.start);
   const [announced, setAnnounced] = useState(false);
@@ -53,6 +55,7 @@ export default function WaifuAlerts() {
       console.log("Prizes available:", prizes.length);
 
       if (prizes && prizes.length > 0) {
+        debugger;
         const index = prizes.findIndex(
           prize => prize.id === currentMessage.waifu.shikiId
         );
@@ -191,6 +194,7 @@ export default function WaifuAlerts() {
         currentMessage.waifuHusband?.twitchUser && (
           <WaifuRoulette
             key={currentMessage.waifu.shikiId}
+            shuffle={shufflePrizes}
             callback={() => {
               setIsRouletted(true);
               setRouletteIndex(-1);

src/components/OBS_Components/WaifuAlerts/WaifuRoulette.tsx

@@ -1,6 +1,6 @@
 import "react-roulette-pro/dist/index.css";
 
-import { CSSProperties, useRef, useState } from "react";
+import { CSSProperties, useEffect, useRef, useState } from "react";
 import RoulettePro from "react-roulette-pro";
 
 import { PrizeType, TwitchUser } from "@/shared/api";
@@ -15,6 +15,7 @@ interface Props {
   rouletteIndex: number;
   prizes: PrizeType[];
   callback: () => void;
+  shuffle: () => void;
   twitchUser: TwitchUser;
 }
 
@@ -23,6 +24,7 @@ export default function WaifuRoulette({
   prizes,
   callback,
   twitchUser,
+  shuffle,
 }: Props) {
   if (prizes.length === 0) {
     throw new Error("Prizes is empty");
@@ -46,6 +48,10 @@ export default function WaifuRoulette({
     animationDuration: "2.2s",
   });
 
+  useEffect(() => {
+    shuffle();
+  }, [shuffle]);
+
   return (
     <div
       ref={rouletteDiv}
@@ -83,20 +89,20 @@ export default function WaifuRoulette({
           ></div>
         )}
         <RoulettePro
+          key={rouletteIndex}
           start={rouletteStart}
           prizes={prizes}
           prizeIndex={rouletteIndex}
           spinningTime={20}
           type="horizontal"
-          classes={{}}
-          options={{ withoutAnimation: true }}
+          options={{ withoutAnimation: true, stopInCenter: true }}
           defaultDesignOptions={{
             prizesWithText: true,
             hideCenterDelimiter: true,
           }}
-          prizeItemRenderFunction={prize => (
-            <WaifuRoulettePrizeItem image={prize.image} text={prize.text} />
-          )}
+          // prizeItemRenderFunction={prize => (
+          //   <WaifuRoulettePrizeItem image={prize.image} text={prize.text} />
+          // )}
           onPrizeDefined={() => {
             setVisible(false);
             const div = rouletteDiv.current!;