show random lab banner, lol

src/components/lab/LabFactoryBanner/index.tsx

@@ -1,26 +1,29 @@
-import React, { FC } from 'react';
+import React, { useRef } from 'react';
+
+import classNames from 'classnames';
 
 import { Group } from '~/components/containers/Group';
 
 import styles from './styles.module.scss';
 
-interface LabFactoryBannerProps {}
+const LabFactoryBanner = () => {
+  const masked = useRef(Math.random() <= 0.5).current;
 
-const LabFactoryBanner: FC<LabFactoryBannerProps> = () => (
+  return (
-  <div className={styles.banner}>
+    <div className={classNames(styles.banner, { [styles.masked]: masked })}>
-    <Group>
+      <Group>
-      <div className={styles.title}>Лаборатория!</div>
+        <div className={styles.title}>Лаборатория!</div>
 
-      <Group className={styles.content}>
+        <Group className={styles.content}>
-        <p>
+          <p>
-          <strong>
+            <strong>
-            Всё, что происходит здесь &mdash; всего лишь эксперимент, о котором
+              Всё, что происходит здесь &mdash; всего лишь эксперимент, о
-            не узнает никто за пределами Убежища.
+              котором не узнает никто за пределами Убежища.
-          </strong>
+            </strong>
-        </p>
+          </p>
+        </Group>
       </Group>
-    </Group>
+    </div>
-  </div>
+  );
-);
+};
-
 export { LabFactoryBanner };

src/components/lab/LabFactoryBanner/styles.module.scss

@@ -5,10 +5,13 @@
 
   display: flex;
   aspect-ratio: 0.7;
-  background: url('/images/peoples_lab.svg') 50% 100%;
+  background: url('/images/peoples_lab.svg') 50% 100% / cover;
-  background-size: cover;
   padding: $gap;
   border-radius: $radius;
+
+  &.masked {
+    background-image: url('/images/peoples_lab_masked.svg');
+  }
 }
 
 .title {