add experimental room

public/images/room.svg

@@ -0,0 +1,196 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="677.06873mm"
+   height="363.27292mm"
+   viewBox="0 0 677.06873 363.27292"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   sodipodi:docname="room.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="0.37126662"
+     inkscape:cx="1102.9809"
+     inkscape:cy="597.95303"
+     inkscape:window-width="1280"
+     inkscape:window-height="731"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     showguides="true"><inkscape:grid
+       id="grid25"
+       units="px"
+       originx="0"
+       originy="0"
+       spacingx="0.26458333"
+       spacingy="0.26458334"
+       empcolor="#0099e5"
+       empopacity="0.30196078"
+       color="#0099e5"
+       opacity="0.14901961"
+       empspacing="5"
+       dotted="false"
+       gridanglex="30"
+       gridanglez="30"
+       visible="false" /><sodipodi:guide
+       position="293.48439,267.62282"
+       orientation="640.50365,-3.3112441"
+       id="guide4"
+       inkscape:locked="false" /><sodipodi:guide
+       position="292.60829,98.156236"
+       orientation="370.98418,-1105.9211"
+       id="guide5"
+       inkscape:locked="false" /><sodipodi:guide
+       position="0,6.0024614e-06"
+       orientation="-1373,0"
+       id="guide6"
+       inkscape:locked="false" /><sodipodi:guide
+       position="0,363.27292"
+       orientation="361.51216,1109.2324"
+       id="guide7"
+       inkscape:locked="false" /></sodipodi:namedview><defs
+     id="defs1"><linearGradient
+       id="linearGradient17"
+       inkscape:collect="always"><stop
+         style="stop-color:#2a2a2a;stop-opacity:1;"
+         offset="0"
+         id="stop18" /><stop
+         style="stop-color:#2a2a2a;stop-opacity:0;"
+         offset="1"
+         id="stop19" /></linearGradient><linearGradient
+       id="linearGradient16"
+       inkscape:collect="always"><stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop16" /><stop
+         style="stop-color:#000000;stop-opacity:0;"
+         offset="1"
+         id="stop17" /></linearGradient><linearGradient
+       id="linearGradient34"
+       inkscape:collect="always"><stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop34" /><stop
+         style="stop-color:#171717;stop-opacity:0.73333333;"
+         offset="0.40000001"
+         id="stop20" /><stop
+         style="stop-color:#2a2a2a;stop-opacity:0;"
+         offset="1"
+         id="stop35" /></linearGradient><linearGradient
+       id="linearGradient32"
+       inkscape:collect="always"><stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop37" /><stop
+         style="stop-color:#090909;stop-opacity:0.74509805;"
+         offset="0.28700036"
+         id="stop1" /><stop
+         style="stop-color:#2a2a2a;stop-opacity:0.2;"
+         offset="1"
+         id="stop33" /></linearGradient><linearGradient
+       id="linearGradient28"
+       inkscape:collect="always"><stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop28" /><stop
+         style="stop-color:#272727;stop-opacity:0;"
+         offset="1"
+         id="stop29" /></linearGradient><inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 181.63646 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="677.06873 : 181.63646 : 1"
+       inkscape:persp3d-origin="338.53436 : 121.09097 : 1"
+       id="perspective2" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient28"
+       id="linearGradient29"
+       x1="245.9528"
+       y1="135.98195"
+       x2="246.1647"
+       y2="280.26706"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient32"
+       id="linearGradient33"
+       x1="246.1647"
+       y1="87.378143"
+       x2="-88.728142"
+       y2="70.435226"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient34"
+       id="linearGradient35"
+       x1="194.42955"
+       y1="49.553513"
+       x2="195.01926"
+       y2="-83.005859"
+       gradientUnits="userSpaceOnUse" /><radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient16"
+       id="radialGradient17"
+       cx="268.06876"
+       cy="103.33553"
+       fx="268.06876"
+       fy="103.33553"
+       r="65.423187"
+       gradientTransform="matrix(1.9761,-0.01848906,0.02009885,2.14815,-240.33458,-124.16863)"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient17"
+       id="linearGradient19"
+       x1="246.16471"
+       y1="98.630595"
+       x2="499.77876"
+       y2="98.630595"
+       gradientUnits="userSpaceOnUse" /><filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter4"
+       x="-0.126843"
+       y="-0.063871653"
+       width="1.253686"
+       height="1.1277433"><feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="5.5706215"
+         id="feGaussianBlur4" /></filter></defs><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(177.28996,83.005859)"><path
+       style="opacity:0.931453;fill:url(#linearGradient35);stroke:none;stroke-width:0.529167;stroke-miterlimit:0"
+       d="M -177.28996,-83.005859 123.6203,13.995368 246.16471,53.498702 V -3.1182483 L 499.77876,-83.005859 Z"
+       id="path25"
+       sodipodi:nodetypes="cccccc" /><path
+       style="opacity:1;fill:url(#linearGradient29);stroke:none;stroke-width:0.529167;stroke-miterlimit:0"
+       d="m -177.28996,280.26705 c 29.19391,-9.84773 423.45467,-142.84033 423.45467,-142.84033 v 68.77311 l 253.61405,74.06722 z"
+       id="path28"
+       sodipodi:nodetypes="ccccc" /><path
+       style="opacity:1;fill:url(#linearGradient33);stroke:none;stroke-width:0.529167;stroke-miterlimit:0"
+       d="M 246.16471,53.498702 V 137.42672 L -177.28996,280.26705 V -83.005859 Z"
+       id="path26"
+       sodipodi:nodetypes="ccccc" /><path
+       style="opacity:1;fill:url(#radialGradient17);stroke-width:0.529167;stroke-miterlimit:0;filter:url(#filter4)"
+       d="M 140.76282,25.624924 246.16471,-3.1182483 V 206.19983 L 141.19759,173.43402"
+       id="path16"
+       sodipodi:nodetypes="cccc" /><path
+       style="opacity:0.931453;fill:url(#linearGradient19);fill-opacity:1;stroke:none;stroke-width:0.529167;stroke-miterlimit:0"
+       d="M 246.16471,-3.1182483 499.77876,-83.005859 V 280.26705 L 246.16471,206.19983 V -3.1182483"
+       id="path27" /></g></svg>

src/constants/urls.ts

@@ -3,6 +3,7 @@ import { FlowDisplayVariant, INode } from '~/types';
 export const URLS = {
   BASE: '/',
   LAB: '/lab',
+  ROOM: '/room',
   BORIS: '/boris',
   AUTH: {
     LOGIN: '/auth/login',

src/containers/boris/BorisSuperpowers/index.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 
+import { Card } from '~/components/containers/Card';
 import { Group } from '~/components/containers/Group';
 import { Markdown } from '~/components/containers/Markdown';
 
@@ -7,13 +8,18 @@ export interface BorisSuperpowersProps {}
 
 const BorisSuperpowers: FC<BorisSuperpowersProps> = () => {
   return (
-    <Group>
+    <Card elevation={0}>
-      <h2>Штучки, находящиеся в разработке</h2>
+      <Group>
+        <h3>Сейчас в разработке</h3>
 
-      <Markdown>
+        <Markdown>
-        {`> На данный момент в разработке нет вещей, которые можно показать.\n\n// Приходите завтра`}
+          - Раздел [рум](/room) в начальной стадии, смотрю как будет работать
-      </Markdown>
+          концепт. Суть идеи можно посмотреть на
-    </Group>
+          [гитхабе](https://github.com/muerwre/vault-frontend/issues/158).
+          Предложения можно оставлять здесь.
+        </Markdown>
+      </Group>
+    </Card>
   );
 };
 

src/containers/main/Header/index.tsx

@@ -27,7 +27,7 @@ export interface HeaderProps {}
 const Header: FC<HeaderProps> = observer(() => {
   const [isScrolled, setIsScrolled] = useState(false);
   const { showModal } = useModal();
-  const { isUser, user, fetched } = useAuth();
+  const { isUser, user, fetched, isTester } = useAuth();
   const { hasFlowUpdates, hasLabUpdates } = useFlow();
   const { borisCommentedAt } = useUpdates();
   const { indicatorEnabled } = useNotifications();
@@ -86,6 +86,17 @@ const Header: FC<HeaderProps> = observer(() => {
               ЛАБ
             </Anchor>
 
+            {isTester && (
+              <Anchor
+                className={classNames(styles.item, styles.lab, {
+                  [styles.has_dot]: hasLabUpdates && !indicatorEnabled,
+                })}
+                href={URLS.ROOM}
+              >
+                РУМ
+              </Anchor>
+            )}
+
             <Anchor
               className={classNames(styles.item, styles.boris, {
                 [styles.has_dot]: hasBorisUpdates && !indicatorEnabled,

src/layouts/RoomLayout/index.tsx

@@ -0,0 +1,51 @@
+import React, { FC } from 'react';
+
+import { Container } from '~/containers/main/Container';
+import markdown from '~/styles/common/markdown.module.scss';
+
+import styles from './styles.module.scss';
+interface RoomLayoutProps {}
+
+const RoomLayout: FC<RoomLayoutProps> = () => (
+  <div className={styles.container}>
+    <div className={styles.room}>
+      <Container>
+        <div className={styles.info}>
+          <div className={markdown.wrapper}>
+            <h1>Рум</h1>
+
+            <p>
+              Пока ещё концепт, над которым я размышляю, ты видишь его, потому
+              что включил суперсилы в <a href="/boris">Борисе</a>.
+            </p>
+
+            <p>
+              Все идеи насчёт этого раздела можно посмотреть{' '}
+              <a
+                href="https://github.com/muerwre/vault-frontend/issues/158"
+                target="_blank"
+                rel="noreferrer"
+              >
+                на гитхабе
+              </a>
+              .
+            </p>
+
+            <p>
+              Здесь, скорее всего, будет возможность добавить несколько песен и
+              картинок для слайдшоу.
+            </p>
+
+            <p>
+              Если помните einsam.ru или раздел Nowhere на старой версии сайта,
+              то будет что-то такое.
+            </p>
+          </div>
+        </div>
+      </Container>
+    </div>
+    <div className={styles.items}></div>
+  </div>
+);
+
+export { RoomLayout };

src/layouts/RoomLayout/styles.module.scss

@@ -0,0 +1,22 @@
+@import 'src/styles/variables';
+
+.container {
+  height: 100vh;
+  width: 100%;
+  margin-top: -$header_height;
+}
+
+.room {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: url('/images/room.svg') 50% 50%;
+  background-size: cover;
+}
+
+.info {
+  max-width: 400px;
+  min-height: 40vh;
+}

src/pages/room/index.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+
+import { InferGetStaticPropsType } from 'next';
+import { RouteComponentProps } from 'react-router';
+
+import { RoomLayout } from '~/layouts/RoomLayout';
+
+import { getStaticProps } from '../node/[id]';
+
+type Props = RouteComponentProps<{ id: string }> &
+  InferGetStaticPropsType<typeof getStaticProps>;
+
+const RoomPage: FC<Props> = () => <RoomLayout />;
+
+export default RoomPage;