Podpora easter eggů

client/src/App.tsx

@@ -10,7 +10,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import PizzaOrderList from './components/PizzaOrderList';
 import SelectSearch, { SelectedOptionValue } from 'react-select-search';
 import 'react-select-search/style.css';
-import './App.css';
+import './App.scss';
 import { SelectSearchOption } from 'react-select-search';
 import { faCircleCheck, faNoteSticky, faTrashCan } from '@fortawesome/free-regular-svg-icons';
 import { useSettings } from './context/settings';
@@ -22,12 +22,25 @@ import { getData, errorHandler, getQrUrl } from './api/Api';
 import { addChoice, removeChoices, removeChoice, changeDepartureTime, jdemeObed, updateNote } from './api/FoodApi';
 import { getHumanDateTime } from './Utils';
 import NoteModal from './components/modals/NoteModal';
+import { useEasterEgg } from './context/eggs';
+import { getImage } from './api/EasterEggApi';
 
 const EVENT_CONNECT = "connect"
 
+// Fixní styl pro všechny easter egg obrázky
+const EASTER_EGG_STYLE = {
+  zIndex: 1,
+  animationName: "bounce-in",
+  animationTimingFunction: "ease"
+}
+
+// Výchozí doba trvání animace v sekundách, pokud není přetíženo v konfiguračním JSONu
+const EASTER_EGG_DEFAULT_DURATION = 0.75;
+
 function App() {
   const auth = useAuth();
   const settings = useSettings();
+  const [easterEgg, easterEggLoading] = useEasterEgg(auth);
   const [isConnected, setIsConnected] = useState<boolean>(false);
   const [data, setData] = useState<ClientData>();
   const [food, setFood] = useState<{ [key in Restaurants]?: DayMenu }>();
@@ -43,6 +56,8 @@ function App() {
   const [dayIndex, setDayIndex] = useState<number>();
   const [loadingPizzaDay, setLoadingPizzaDay] = useState<boolean>(false);
   const [noteModalOpen, setNoteModalOpen] = useState<boolean>(false);
+  const [eggImage, setEggImage] = useState<Blob>();
+  const eggRef = useRef<HTMLImageElement>(null);
   // Prazvláštní workaround, aby socket.io listener viděl aktuální hodnotu
   // https://medium.com/@kishorkrishna/cant-access-latest-state-inside-socket-io-listener-heres-how-to-fix-it-1522a5abebdb
   const dayIndexRef = useRef<number | undefined>(dayIndex);
@@ -161,6 +176,23 @@ function App() {
     }
   }, [handleKeyDown]);
 
+  // Stažení a nastavení easter egg obrázku
+  useEffect(() => {
+    if (auth?.login && easterEgg?.url && !eggImage) {
+      getImage(easterEgg.url).then(data => {
+        if (data) {
+          setEggImage(data);
+          // Smazání obrázku z DOMu po animaci
+          setTimeout(() => {
+            if (eggRef?.current) {
+              eggRef.current.remove();
+            }
+          }, (easterEgg.duration || EASTER_EGG_DEFAULT_DURATION) * 1000);
+        }
+      });
+    }
+  }, [auth?.login, easterEgg?.duration, easterEgg?.url, eggImage]);
+
   const doAddChoice = async (event: React.ChangeEvent<HTMLSelectElement>) => {
     const index = Object.keys(Locations).indexOf(event.target.value as unknown as Locations);
     if (auth?.login) {
@@ -361,8 +393,11 @@ function App() {
   const noOrders = data?.pizzaDay?.orders?.length === 0;
   const canChangeChoice = dayIndex == null || data.todayWeekIndex == null || dayIndex >= data.todayWeekIndex;
 
+  const { path, url, startOffset, endOffset, duration, ...style } = easterEgg || {};
+
   return (
     <>
+      {easterEgg && eggImage && <img ref={eggRef} alt='' src={URL.createObjectURL(eggImage)} style={{ position: 'absolute', ...EASTER_EGG_STYLE, ...style, animationDuration: `${duration ?? EASTER_EGG_DEFAULT_DURATION}s` }} />}
       <Header />
       <div className='wrapper'>
         {data.isWeekend ? <h4>Užívejte víkend :)</h4> : <>