feat: HG mode - změna obrázků, animace v modálech

client/src/components/HellGirlFlames.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { createSymbolMask, loadHellGirlImages } from "../utils/hellGirlImages";
+import "./HellGirlFlames.scss";
+
+/** Plamen vzplane a rozpadne se v jiskry za ~1,2 s, pak GIF drží černý snímek — mezitím se obsah vynoří z černé. */
+const BURN_MS = 1500;
+
+/** `target` = obsah dialogu, ve kterém se hoří. */
+type Burn = { src: string, target: HTMLElement };
+
+/**
+ * Doplňky stylu Hell Girl: při otevření dialogu jeho obsah zčerná, uprostřed jednou
+ * vzplane plamen („Ippen, shinde miru?") a obsah se pak z černé vynoří. Dále symbol ohně ze znělky
+ * u titulku dne (nastaví CSS proměnnou --hg-symbol, dokud se nenačte, zůstávají v titulku původní květy).
+ */
+const HellGirlFlames: React.FC = () => {
+    const [burning, setBurning] = useState<Burn>();
+    const flameBlobRef = useRef<Blob | undefined>(undefined);
+
+    const burn = (target: HTMLElement) => {
+        const blob = flameBlobRef.current;
+        if (!blob || window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return;
+        // Pokaždé nová URL — jinak by prohlížeč GIF (bez opakování) znovu nepřehrál
+        setBurning({ src: URL.createObjectURL(blob), target });
+    };
+
+    useEffect(() => {
+        if (!burning) return;
+        const timeout = setTimeout(() => setBurning(undefined), BURN_MS);
+        return () => {
+            clearTimeout(timeout);
+            URL.revokeObjectURL(burning.src);
+        };
+    }, [burning]);
+
+    useEffect(() => {
+        let cancelled = false;
+        const root = document.documentElement;
+        loadHellGirlImages().then(images => {
+            if (!images || cancelled) return;
+            fetch(images.flame)
+                .then(r => r.ok ? r.blob() : undefined)
+                .then(blob => { flameBlobRef.current = blob; })
+                .catch(() => { /* bez plamenů */ });
+            createSymbolMask(images.symbol).then(mask => {
+                if (!mask || cancelled) return;
+                root.style.setProperty('--hg-symbol', `url(${mask})`);
+                root.setAttribute('data-hg-symbol', '');
+            });
+        });
+        return () => {
+            cancelled = true;
+            root.style.removeProperty('--hg-symbol');
+            root.removeAttribute('data-hg-symbol');
+        };
+    }, []);
+
+    // Dialogy (react-bootstrap) se vkládají přes portál přímo do <body>
+    useEffect(() => {
+        const observer = new MutationObserver(mutations => {
+            const modalContent = mutations
+                .flatMap(m => Array.from(m.addedNodes))
+                .map(node => node instanceof HTMLElement ? node.querySelector<HTMLElement>('.modal-content') : null)
+                .find(element => !!element);
+            if (modalContent) burn(modalContent);
+        });
+        observer.observe(document.body, { childList: true });
+        return () => observer.disconnect();
+    }, []);
+
+    if (!burning) return null;
+    return createPortal(
+        <div className="hg-burn" aria-hidden="true">
+            <img className="hg-burn-flame" src={burning.src} alt="" />
+        </div>,
+        burning.target,
+    );
+};
+
+export default HellGirlFlames;