From 1d067fb14730f271688c172e985a3c4c244d4765 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Sat, 4 Nov 2023 13:05:09 +0600 Subject: [PATCH] show random lab banner, lol --- public/images/peoples_lab.svg | 954 ++++---- public/images/peoples_lab_masked.svg | 1962 +++++++++++++++++ src/components/lab/LabFactoryBanner/index.tsx | 37 +- .../lab/LabFactoryBanner/styles.module.scss | 7 +- 4 files changed, 2472 insertions(+), 488 deletions(-) create mode 100644 public/images/peoples_lab_masked.svg diff --git a/public/images/peoples_lab.svg b/public/images/peoples_lab.svg index f44d23e0..5b846b5c 100644 --- a/public/images/peoples_lab.svg +++ b/public/images/peoples_lab.svg @@ -24,15 +24,15 @@ inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" inkscape:document-units="px" - inkscape:zoom="1" - inkscape:cx="207" - inkscape:cy="336" + inkscape:zoom="0.70710678" + inkscape:cx="203.64675" + inkscape:cy="567.09964" inkscape:window-width="1280" inkscape:window-height="731" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" - inkscape:current-layer="g2" + inkscape:current-layer="svg1" showgrid="false" /> @@ -337,30 +337,6 @@ offset="1" id="stop21" /> - - - - - - - - @@ -565,7 +541,7 @@ offset="0" id="stop103041" /> @@ -578,30 +554,6 @@ x2="119.1357" y2="166.1172" gradientUnits="userSpaceOnUse" /> - - - - - - - - + x1="369.13211" + y1="168.02052" + x2="369.04922" + y2="164.33627" /> - - - - + + + + + + + + + + + + + + + sodipodi:insensitive="true" + style="display:inline"> + d="m 54.471077,71.072355 c 0,0 -5.933967,3.178862 -6.993173,3.602436 -1.059205,0.423573 -2.119357,6.357483 -2.119357,6.357483 0,0 -2.87e-4,0.212223 -0.847978,1.271967 -0.84769,1.059748 -4.237538,6.780941 -4.237538,7.416574 -7.16821,10.639235 -0.249001,27.292905 2.9297,34.710055 3.178697,7.41715 0,11.65588 0,11.65588 l 1.695368,2.33106 c 0,0 4.669759,-8.02391 4.669759,-10.1434 0,-2.11949 -5.268861,-12.06428 -5.692978,-12.91196 -0.424116,-0.8477 -0.212106,-1.05964 -2.331058,-4.45042 -2.118954,-3.39074 0,-15.045358 0,-17.800479 0,-2.639732 8.943279,-10.138335 9.692942,-12.253342 0.185979,-0.06711 0.452267,-0.15212 0.843273,-0.256392 1.097637,-0.292718 5.927001,-1.536732 6.073452,-1.829445 0.146448,-0.292718 -0.07292,-1.097903 -0.07292,-1.097903 0,0 -0.08602,0.03534 -0.241103,0.07762 l -0.950888,-1.736532 0.331076,1.850615 c -0.157665,0.01694 -0.333665,0.02823 -0.529252,0.02823 -0.0052,0 -0.01169,4.97e-4 -0.01705,5.88e-4 l -0.296969,-0.08644 -0.329312,-0.366359 -0.436926,0.655095 c -0.0543,0.01413 -0.112023,0.03012 -0.168184,0.04528 l -0.455744,-0.334017 -0.384002,0.575708 c -0.02808,0.0085 -0.05598,0.01672 -0.08409,0.02529 l -0.22699,-0.455156 -0.22699,0.595701 c -0.05862,0.0185 -0.110981,0.03565 -0.168772,0.0541 l -0.372828,-0.429869 -0.07292,0.548657 0.04058,0.01235 c -0.749937,0.245015 -1.307274,0.439611 -1.363116,0.459272 0.4509,-0.458406 1.030175,-0.938166 1.620685,-1.420157 l 0.222873,0.196411 0.06175,-0.432222 c 0.07115,-0.05822 0.139439,-0.115923 0.209937,-0.174065 l 0.386941,0.386942 V 77.04349 c 0.04662,-0.03957 0.09773,-0.07993 0.143486,-0.119375 l 0.661564,0.571591 -0.214053,-0.97735 c 0.02504,-0.02336 0.05136,-0.0467 0.07586,-0.06998 l 0.613931,0.64451 -0.29344,-0.966765 c 0.02972,-0.03145 0.05397,-0.06225 0.08233,-0.0935 0.276474,0.259286 0.82365,0.758625 0.796229,0.621576 -0.02423,-0.121073 -0.23102,-0.675453 -0.396351,-1.112016 0.08136,-0.123436 0.152122,-0.245197 0.199351,-0.363419 0.04089,0.01569 0.07567,0.02885 0.12408,0.04822 0.365848,0.146356 1.2802,1.755938 1.2802,1.755938 0,0 0.03669,-0.402292 -0.365771,-1.060855 C 56.958626,75.303417 56.405505,74.579702 56.337582,74.491322 56.034817,72.844549 54.47109,71.07236 54.47109,71.07236 Z m -2.483365,8.274548 -0.636277,0.935599 c 0.101241,-0.29397 0.334319,-0.609249 0.636277,-0.935599 z" /> + style="opacity:0.0481931;fill:#ffaacc;stroke-width:0.301085;stroke-miterlimit:0" + d="m 63.080818,36.399344 a 7.4739308,14.460315 0 0 0 -4.10993,2.419266 v 24.081518 a 7.4739308,14.460315 0 0 0 4.10993,2.419854 7.4739308,14.460315 0 0 0 3.551863,-1.760642 V 38.139993 a 7.4739308,14.460315 0 0 0 -3.551863,-1.740649 z" /> @@ -1558,80 +1556,360 @@ id="path146" sodipodi:nodetypes="cccccc" /> + + + + + + + + id="g90" + transform="matrix(0.82289645,0,0,0.82289645,11.19772,37.237875)" + inkscape:label="unmasked" + style="display:inline" + sodipodi:insensitive="true"> + + + + + + + - - + id="g51" + style="display:inline;mix-blend-mode:normal" + transform="matrix(2.5315377,-1.6192625,1.6192625,2.5315377,-1136.3762,344.19004)"> + + + + + + + + + transform="matrix(0.73644121,0.47105426,-0.53688965,0.83936755,185.6395,-152.2614)"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/peoples_lab_masked.svg b/public/images/peoples_lab_masked.svg new file mode 100644 index 00000000..5ccd2f99 --- /dev/null +++ b/public/images/peoples_lab_masked.svg @@ -0,0 +1,1962 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/lab/LabFactoryBanner/index.tsx b/src/components/lab/LabFactoryBanner/index.tsx index 50d5e45c..0faf919a 100644 --- a/src/components/lab/LabFactoryBanner/index.tsx +++ b/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 = () => ( -
- -
Лаборатория!
+ return ( +
+ +
Лаборатория!
- -

- - Всё, что происходит здесь — всего лишь эксперимент, о котором - не узнает никто за пределами Убежища. - -

+ +

+ + Всё, что происходит здесь — всего лишь эксперимент, о + котором не узнает никто за пределами Убежища. + +

+ - -
-); - +
+ ); +}; export { LabFactoryBanner }; diff --git a/src/components/lab/LabFactoryBanner/styles.module.scss b/src/components/lab/LabFactoryBanner/styles.module.scss index bfdf5e21..02a7eb28 100644 --- a/src/components/lab/LabFactoryBanner/styles.module.scss +++ b/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-size: cover; + background: url('/images/peoples_lab.svg') 50% 100% / cover; padding: $gap; border-radius: $radius; + + &.masked { + background-image: url('/images/peoples_lab_masked.svg'); + } } .title {