Рефакторинг стилей и структуры компонента MikuMonday для улучшения компоновки и читабельности.

- Введен новый стиль компоновки компонента MikuMonday для улучшения общей структуры и выравнивания.
- Удалены устаревшие разделы с информацией о пользователе и интегрировано отображение доступных треков непосредственно в область основного контента.
- Обновлён RouletteGroupList для использования более оптимизированной структуры классов для элементов обратной рулетки.
- Добавлены атрибуты данных для улучшения доступности и функциональности в компоненте PrizeItem.
- Очищен неиспользуемый код и улучшена согласованность стилей в модуле MikuMonday.

Author: RXDCODX

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

@@ -1,9 +1,32 @@
+.layout {
+  min-height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 16px;
+  padding: 24px 20px 0;
+  box-sizing: border-box;
+}
+
 .roulette-container {
   background: linear-gradient(135deg, rgba( var(--bs-primary-rgb), 0.1 ) 0%, rgba( var(--bs-primary-rgb), 0.25 ) 100%);
   border-radius: 20px;
   border: 2px solid var(--site-border-accent);
   box-shadow: var(--site-shadow-medium);
   overflow: hidden;
+  width: min(70vw, 1100px);
+  max-width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: stretch;
+  gap: 20px;
+  padding: 24px;
+  margin: 0 auto;
+  justify-self: flex-end;
 }
 
 .roulette-pointer {
@@ -23,77 +46,6 @@
   }
 }
 
-.user-info {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px;
-  margin-top: 30px;
-  padding: 20px;
-}
-
-.user-name-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-}
-
-.label {
-  font-size: 2rem;
-  font-weight: 600;
-  color: var(--site-text-light);
-  text-shadow:
-    0 0 10px rgba( var(--bs-primary-rgb), 0.8 ),
-    0 0 20px rgba( var(--bs-primary-rgb), 0.6 ),
-    var(--text-shadow-heavy);
-}
-
-.user-name {
-  font-size: 3rem;
-  font-weight: 800;
-  color: var(--bs-primary);
-  text-shadow:
-    0 0 15px var(--bs-primary),
-    0 0 30px rgba( var(--bs-primary-rgb), 0.8 ),
-    var(--text-shadow-heavy);
-  animation: glow 2s ease-in-out infinite;
-}
-
-.track-info {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-}
-
-.track-title {
-  font-size: 2.5rem;
-  font-weight: 700;
-  color: var(--site-text-light);
-  text-shadow:
-    0 0 10px rgba(255, 255, 255, 0.8),
-    0 0 20px rgba( var(--bs-primary-rgb), 0.6 ),
-    var(--text-shadow-heavy);
-}
-
-@keyframes glow {
-  0%,
-  100% {
-    text-shadow:
-      0 0 15px var(--bs-primary),
-      0 0 30px rgba( var(--bs-primary-rgb), 0.8 ),
-      var(--text-shadow-heavy);
-  }
-  50% {
-    text-shadow:
-      0 0 25px var(--bs-primary),
-      0 0 40px var(--bs-primary),
-      0 0 50px rgba( var(--bs-primary-rgb), 0.8 ),
-      var(--text-shadow-heavy);
-  }
-}
-
 // Кастомизация стилей рулетки
 :global {
   .react-roulette-pro-default-design {
@@ -125,7 +77,8 @@
 .available-tracks {
   display: flex;
   justify-content: center;
-  margin-top: 10px;
+  margin-bottom: 12px;
+  padding: 0 20px;
 }
 
 .available-tracks-text {
@@ -146,17 +99,13 @@
 .single-roulette {
   width: 100%;
   position: relative;
+}
 
-  // Развернутая рулетка - крутится справа налево
-  &.reversed {
-    transform: scaleX(-1);
+.single-roulette-reversed {
+  transform: scaleX(-1);
 
-    // Возвращаем содержимое в нормальное состояние
-    :global {
-      .react-roulette-pro-prize-item {
-        transform: scaleX(-1);
-      }
-    }
+  [data-roulette-card="true"] {
+    transform: scaleX(-1);
   }
 }
 

src/components/OBS_Components/MikuMonday/MikuMonday.stories.tsx

@@ -98,7 +98,3 @@ export const WithMockData: Story = {
     }, 1000);
   },
 };
-
-
-
-

src/components/OBS_Components/MikuMonday/MikuMonday.tsx

@@ -60,10 +60,17 @@ function MikuMondayContent() {
   return (
     <div
       ref={containerRef}
-      className={" " + animate.animated + " " + animate.fadeIn}
+      className={`${styles.layout} ${animate.animated} ${animate.fadeIn}`}
       onAnimationEnd={handleContainerAnimationEnd}
       style={baseStyle}
     >
+      {availableTracksCount > 0 && (
+        <div className={styles["available-tracks"]}>
+          <span className={styles["available-tracks-text"]}>
+            Осталось свободных треков: {availableTracksCount}
+          </span>
+        </div>
+      )}
       <RouletteGroupList
         ref={groupsRef}
         groups={rouletteGroups}
@@ -75,26 +82,6 @@ function MikuMondayContent() {
           <RoulettePointer visible={visible} pointerHeight={pointerHeight} />
         }
       />
-      <div className={styles["user-info"]}>
-        <div className={styles["user-name-container"]}>
-          <span className={styles["label"]}>Мику заметила:</span>
-          <span className={styles["user-name"]}>
-            {currentAlert.displayName}
-          </span>
-        </div>
-        <div className={styles["track-info"]}>
-          <span className={styles["track-title"]}>
-            И дарит трек #{currentAlert.selectedTrack.number}
-          </span>
-        </div>
-        {availableTracksCount > 0 && (
-          <div className={styles["available-tracks"]}>
-            <span className={styles["available-tracks-text"]}>
-              Осталось свободных треков: {availableTracksCount}
-            </span>
-          </div>
-        )}
-      </div>
     </div>
   );
 }

src/components/OBS_Components/MikuMonday/PrizeItem.tsx

@@ -19,7 +19,7 @@ function PrizeItemComponent({ prize }: PrizeItemProps) {
     : "Мику улыбается этому треку";
 
   return (
-    <article className={containerClass}>
+    <article className={containerClass} data-roulette-card="true">
       <div className={mediaClass}>
         {hasCover && (
           <img

src/components/OBS_Components/MikuMonday/components/RouletteGroupList.tsx

@@ -26,26 +26,14 @@ const RouletteGroupList = forwardRef<HTMLDivElement, RouletteGroupListProps>(
     },
     ref
   ) => (
-    <div
-      ref={ref}
-      className={styles["roulette-container"]}
-      style={{
-        width: "100%",
-        margin: "0 auto",
-        height: "80vh",
-        alignSelf: "center",
-        position: "relative",
-        display: "flex",
-        flexDirection: "column",
-        gap: "20px",
-        justifyContent: "center",
-      }}
-    >
+    <div ref={ref} className={styles["roulette-container"]}>
       {pointer}
       {groups.map((group, index) => (
         <div
           key={index}
-          className={`${styles["single-roulette"]} ${group.isReversed ? styles["reversed"] : ""}`}
+          className={`${styles["single-roulette"]} ${
+            group.isReversed ? styles["single-roulette-reversed"] : ""
+          }`}
           style={{
             opacity: rouletteOpacities[index] ?? 1,
             transition: "opacity 2s ease-out",
@@ -60,7 +48,7 @@ const RouletteGroupList = forwardRef<HTMLDivElement, RouletteGroupListProps>(
             prizeItemRenderFunction={renderPrizeItem}
             spinningTime={20}
             type="horizontal"
-            options={{ withoutAnimation: false, stopInCenter: true }}
+            options={{ withoutAnimation: false, stopInCenter: false }}
             defaultDesignOptions={{
               prizesWithText: true,
               hideCenterDelimiter: true,

src/components/OBS_Components/MikuMonday/hooks/useRouletteAnimation.ts

@@ -11,6 +11,7 @@ import animate from "@/shared/styles/animate.module.scss";
 import type { OperationResult } from "@/shared/types/OperationResult";
 import { createErrorResult } from "@/shared/types/OperationResult";
 
+import styles from "../MikuMonday.module.scss";
 import type { RouletteGroup } from "../types";
 
 type ShowToast = (result: OperationResult<unknown>) => void;
@@ -39,7 +40,7 @@ export function useRouletteAnimation({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    justifyContent: "center",
+    justifyContent: "flex-end",
     animationDuration: "2.2s",
   });
   const [rouletteStart, setRouletteStart] = useState(false);
@@ -111,7 +112,7 @@ export function useRouletteAnimation({
               ...prevStyle,
               animationDuration: "1.5s",
             }));
-            div.className = " " + animate.animated + " " + animate.fadeOut;
+            div.className = `${styles.layout} ${animate.animated} ${animate.fadeOut}`;
           }
         }, 100);
       }