Enhance ADHDController with explosion handling and update styles

- Added explosion state management to ADHDController, allowing for visual effects during specific actions.
- Implemented new action types for explosion start, finish, and completion in the reducer.
- Introduced a video element for explosion effects, enhancing user experience.
- Updated ADHDLayout styles to accommodate the new explosion video.
- Modified BreakingNews styles for improved readability with italic font style.

Author: RXDCODX

src/components/OBS_Components/ADHDLayout/ADHDController.tsx

@@ -10,13 +10,17 @@ interface ADHDState {
   isVisible: boolean;
   duration: number;
   remainingTime: number;
+  isExploding: boolean;
 }
 
 type ADHDAction =
   | { type: "SHOW"; payload: { duration: number } }
   | { type: "HIDE" }
   | { type: "TICK" }
-  | { type: "EXTEND"; payload: { duration: number } };
+  | { type: "EXTEND"; payload: { duration: number } }
+  | { type: "START_EXPLOSION" }
+  | { type: "FINISH_EXPLOSION" }
+  | { type: "COMPLETE_EXPLOSION" };
 
 const adhdReducer = (state: ADHDState, action: ADHDAction): ADHDState => {
   switch (action.type) {
@@ -25,31 +29,55 @@ const adhdReducer = (state: ADHDState, action: ADHDAction): ADHDState => {
         isVisible: true,
         duration: action.payload.duration,
         remainingTime: action.payload.duration,
+        isExploding: false,
       };
     case "HIDE":
       return {
         ...state,
         isVisible: false,
         remainingTime: 0,
+        isExploding: false,
       };
     case "TICK":
       if (state.remainingTime <= 1) {
         return {
           ...state,
-          isVisible: false,
-          remainingTime: 0,
+          isExploding: true,
         };
       }
       return {
         ...state,
         remainingTime: state.remainingTime - 1,
       };
     case "EXTEND":
+      if (state.isExploding) {
+        // Если идет взрыв, добавляем в очередь
+        return state;
+      }
       return {
         ...state,
         duration: state.duration + action.payload.duration,
         remainingTime: state.remainingTime + action.payload.duration,
       };
+    case "START_EXPLOSION":
+      return {
+        ...state,
+        isExploding: true,
+      };
+    case "FINISH_EXPLOSION":
+      return {
+        ...state,
+        isVisible: false,
+        remainingTime: 0,
+        // isExploding остается true для продолжения воспроизведения видео
+      };
+    case "COMPLETE_EXPLOSION":
+      return {
+        ...state,
+        isVisible: false,
+        remainingTime: 0,
+        isExploding: false,
+      };
     default:
       return state;
   }
@@ -59,12 +87,15 @@ const initialState: ADHDState = {
   isVisible: false,
   duration: 0,
   remainingTime: 0,
+  isExploding: false,
 };
 
 export function ADHDController() {
   const [announced, setAnnounced] = useState<boolean>(false);
   const [state, dispatch] = useReducer(adhdReducer, initialState);
+  const [pendingExtensions, setPendingExtensions] = useState<number[]>([]);
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const explosionRef = useRef<HTMLVideoElement | null>(null);
 
   // Функция форматирования времени в формат MM:SS
   const formatTime = (seconds: number): string => {
@@ -74,6 +105,12 @@ export function ADHDController() {
   };
 
   const handleMessage = (duration: number) => {
+    if (state.isExploding) {
+      // Если идет взрыв, добавляем в очередь продлений
+      setPendingExtensions(prev => [...prev, duration]);
+      return;
+    }
+
     if (state.isVisible) {
       // Если уже показывается, продлеваем время
       dispatch({ type: "EXTEND", payload: { duration } });
@@ -87,10 +124,11 @@ export function ADHDController() {
   SignalRContext.useSignalREffect("adhd", handleMessage, [
     handleMessage,
     state.isVisible,
+    state.isExploding,
   ]);
 
   useEffect(() => {
-    if (state.isVisible && state.remainingTime > 0) {
+    if (state.isVisible && state.remainingTime > 0 && !state.isExploding) {
       intervalRef.current = setInterval(() => {
         dispatch({ type: "TICK" });
       }, 1000);
@@ -107,7 +145,41 @@ export function ADHDController() {
         intervalRef.current = null;
       }
     };
-  }, [state.isVisible, state.remainingTime]);
+  }, [state.isVisible, state.remainingTime, state.isExploding]);
+
+  useEffect(() => {
+    if (state.isExploding && explosionRef.current) {
+      const videoElement = explosionRef.current;
+      videoElement.play();
+
+      // Скрываем ADHDPage через 2 секунды после начала взрыва
+      const hideTimer = setTimeout(() => {
+        dispatch({ type: "FINISH_EXPLOSION" });
+
+        // Проверяем очередь продлений
+        if (pendingExtensions.length > 0) {
+          const totalExtension = pendingExtensions.reduce(
+            (sum, ext) => sum + ext,
+            0
+          );
+          setPendingExtensions([]);
+          dispatch({ type: "SHOW", payload: { duration: totalExtension } });
+        }
+      }, 2000);
+
+      // Ждем окончания видео для полного завершения состояния
+      const handleVideoEnd = () => {
+        dispatch({ type: "COMPLETE_EXPLOSION" });
+      };
+
+      videoElement.addEventListener("ended", handleVideoEnd);
+
+      return () => {
+        clearTimeout(hideTimer);
+        videoElement.removeEventListener("ended", handleVideoEnd);
+      };
+    }
+  }, [state.isExploding, pendingExtensions]);
 
   return (
     <>
@@ -126,6 +198,15 @@ export function ADHDController() {
           </div>
         </div>
       )}
+      {state.isExploding && (
+        <video
+          ref={explosionRef}
+          className={styles.explosionVideo}
+          src="/src/components/OBS_Components/ADHDLayout/content/explosion.webm"
+          autoPlay
+          muted
+        />
+      )}
     </>
   );
 }

src/components/OBS_Components/ADHDLayout/ADHDLayout.module.scss

@@ -171,4 +171,15 @@
   100% {
     transform: scale(1.4);
   }
+}
+
+.explosionVideo {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 1003;
+  pointer-events: none;
 }

src/components/OBS_Components/ADHDLayout/components/BreakingNews.module.scss

@@ -10,6 +10,7 @@
   align-items: center;
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
+  font-style: italic;
 }
 
 .breakingNewsContent {