update

package.json

@@ -23,7 +23,6 @@
   },
   "scripts": {
     "dev": "set PORT=3006 && react-app-rewired start",
-    "build": "react-app-rewired build",
     "build:website": "react-app-rewired build && cd scripts && node add-analytics.js",
     "build:local": "react-app-rewired build && cd scripts && node remove-hash.js && node add-local.js",
     "build:docker": "react-app-rewired build",

src/ts/components/GameBanner/index.module.scss

@@ -23,6 +23,7 @@
     width: 100%;
     padding: var(--space-xxl) var(--space-xxl) 0;
 
+    text-align: center;
     background-color: rgba(0, 0, 0, 0.7);
   }
 

src/ts/components/Quiz/components/Question.tsx

@@ -30,6 +30,9 @@ function Question({
   const [disabled, setDisabled] = useState<boolean>(false);
   const [mode, setMode] = useState<string[]>([]);
   const formattedAnswers = question.answers || [];
+  const hideClassName = disabled
+    ? stylePage.quiz_question_hide
+    : '';
 
   useEffect(() => {
     setMode([]);
@@ -41,7 +44,7 @@ function Question({
 
   const answers = formattedAnswers.map((item: IAnswer, index: number) => (
     <Answer
-      key={`${item.id || ''}|${item.title}`}
+      key={`${item.id || ''}|${item.title}|${index}`}
       mode={mode[index]}
       answer={item}
       onClick={() => {
@@ -70,15 +73,15 @@ function Question({
     <div className={stylePage.quiz_question}>
       <div className={stylePage.quiz_question_body}>
         <div
-          className={style.quiz_title}
+          className={`${style.quiz_title} ${hideClassName}`}
           style={{ backgroundImage: 'url(./assets/games/quize/cloud_big.png)' }}
         >
           {question.title}
         </div>
         <div className={style.quiz_question_answer}>
           {answers}
         </div>
-        <div className={style.quiz_footer}>
+        <div className={`${style.quiz_footer} ${hideClassName}`}>
           <UiKitButton
             disabled={disabled}
             onClick={() => {

src/ts/components/Quiz/index.tsx

@@ -1,16 +1,13 @@
 import React from 'react';
 
-import IQuiz from './interfaces/Quiz';
 import QuizPage from './components/index';
-import example from './helpers/example';
+import getQuizQuestions from './helpers/getQuestions';
 
-interface IQuizProps {
-}
-
-function Quiz({}: IQuizProps): React.ReactElement | null {
+function Quiz(): React.ReactElement | null {
+  const questions = getQuizQuestions();
   return (
     <QuizPage
-      quiz={example as IQuiz}
+      quiz={questions}
       onEnd={() => {
       }}
     />

src/ts/components/Quiz/styles/answer.module.scss

@@ -123,8 +123,13 @@
 @keyframes quiz_answer {
   from {
     top: 0;
+    opacity: 1;
+  }
+  30% {
+    opacity: 0.3;
   }
   to {
     top: 800px;
+    opacity: 0.3;
   }
 }

src/ts/components/Quiz/styles/question.module.scss

@@ -16,4 +16,20 @@
     display: block;
     text-align: center;
   }
+
+  &_hide {
+    animation-duration: 0.5s;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+    animation-name: quiz_question_hide;
+  }
+}
+
+@keyframes quiz_question_hide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }

src/ts/components/Races/components/Info.tsx

@@ -11,15 +11,14 @@ function Info({
   title,
   duration,
 }: IInfoProps): React.ReactElement | null {
-  console.log(title);
   return (
     <div
       className={style.races_track_info}
       style={{
         animationDelay: `${duration + 1}s`,
       }}
     >
-      4
+      {title}
     </div>
   );
 }

src/ts/components/Races/components/Track.tsx

@@ -12,13 +12,15 @@ const DURATION = {
 
 interface ITrackProps {
   title: string;
+  position: string;
   speed: number;
   type?: string;
   canStart?: boolean;
 }
 
 function Track({
   title,
+  position,
   speed,
   type,
   canStart,
@@ -35,7 +37,7 @@ function Track({
     >
       {canStart && (
         <Info
-          title={title}
+          title={position}
           duration={duration}
         />
       )}

src/ts/components/Races/index.tsx

@@ -31,6 +31,7 @@ function Races({
       <Track
         key={track.title}
         title={track.title}
+        position={track.position}
         speed={track.speed}
         canStart={showAnimation}
       />
@@ -47,7 +48,7 @@ function Races({
               setShowAnimation(true);
             }}
           >
-            {t('uiKit.races.go')}
+            {t('page.team.building.races.go')}
           </UiKitButton>
         )}
       </GameBanner>

src/ts/helpers/DataGrip/components/release.ts

@@ -67,7 +67,7 @@ export default class DataGripByRelease {
   }
 
   #addRelease(branch: string, commit: ISystemCommit) {
-    const index = branch.lastIndexOf('release');
+    const index = (branch || '').lastIndexOf('release');
     if (index === -1) return false;
 
     const title = branch

src/ts/pages/PageWrapper/helpers/menu.ts

@@ -109,7 +109,7 @@ export const TEAM = [
     id: 'release',
     link: '/team/release',
     title: 'sidebar.team.release',
-    icon: './assets/menu/team_release.svg',
+    icon: './assets/menu/release.svg',
   },
   {
     id: 'tasks',
@@ -142,6 +142,12 @@ export const TEAM = [
     title: 'sidebar.team.words',
     icon: './assets/menu/team_words.svg',
   },
+  {
+    id: 'building',
+    link: '/team/building',
+    title: 'sidebar.team.building',
+    icon: './assets/menu/building.svg',
+  },
 ];
 
 export const PERSON = [

src/ts/pages/PageWrapper/index.tsx

@@ -45,7 +45,10 @@ const DesktopView = observer(({ children }: IPageWrapper): React.ReactElement =>
   if (fullScreen.isOpen) {
     return (
       <>
-        <div className={style.page_wrapper_main_fullscreen}>
+        <div
+          className={style.page_wrapper_main_fullscreen}
+          style={padding}
+        >
           {children}
         </div>
         <Recommendations/>

src/ts/pages/Team/components/Building.tsx

@@ -3,31 +3,60 @@ import { observer } from 'mobx-react-lite';
 
 import dataGripStore from 'ts/store/DataGrip';
 
-import Title from 'ts/components/Title';
 import Races from 'ts/components/Races';
 
 import SwimmingPool from 'ts/components/SwimmingPool';
 import Quiz from 'ts/components/Quiz';
+import BillBoard from 'ts/components/BillBoard';
+import isMobile from 'ts/helpers/isMobile';
+import fullScreen from 'ts/store/FullScreen';
+
+import style from '../styles/quiz.module.scss';
 
 const TeamBuilding = observer((): React.ReactElement => {
   const tracksAuth = dataGripStore.dataGrip.author.statistic
     .filter((item: any) => !item.isStaff);
-  const value = tracksAuth.map((statistic: any) => statistic.taskInDay);
-  const max = Math.max(...value);
+  const order = tracksAuth.map((statistic: any) => statistic.taskInDay);
+  order.sort((a:number, b:number) => b - a);
   const tracks = tracksAuth.map((statistic: any) => ({
     title: statistic.author,
-    speed: statistic.taskInDay / max,
+    position: order.indexOf(statistic.taskInDay) + 1,
+    speed: statistic.taskInDay / order[0],
   }));
 
   const maxMessageLength = [...tracksAuth]
     .sort((a: any, b: any) => b.maxMessageLength - a.maxMessageLength)
     .map((item: any) => ({ title: item.author, value: item.maxMessageLength }));
 
+  const className = fullScreen.isOpen
+    ? style.team_building_full_screen_open
+    : style.team_building_full_screen_close;
+
   return (
     <>
-      <Quiz />
+      {!isMobile && (
+        <img
+          src={fullScreen.isOpen
+            ? './assets/icons/CloseFullscreen.svg'
+            : './assets/icons/OpenFullscreen.svg'}
+          className={className}
+          onClick={() => {
+            fullScreen.toggle();
+          }}
+        />
+      )}
+      {Math.random() > 1 && (
+        <Quiz />
+      )}
+      <BillBoard
+        title="page.team.building.races.title"
+        type="cloud"
+      />
       <Races tracks={tracks} />
-      <Title title="Максимальная длинна подписи коммита"/>
+      <BillBoard
+        title="page.team.building.swimmingPool.title"
+        type="green"
+      />
       <SwimmingPool tracks={maxMessageLength}/>
     </>
   );

src/ts/pages/Team/components/Company/index.tsx

@@ -4,13 +4,15 @@ import { observer } from 'mobx-react-lite';
 import ISort from 'ts/interfaces/Sort';
 import { IPaginationRequest } from 'ts/interfaces/Pagination';
 import dataGripStore from 'ts/store/DataGrip';
+import fullScreen from 'ts/store/FullScreen';
 
 import ICommonPageProps from 'ts/components/Page/interfaces/CommonPageProps';
 import DataLoader from 'ts/components/DataLoader';
 import Pagination from 'ts/components/DataLoader/components/Pagination';
 import getFakeLoader from 'ts/components/DataLoader/helpers/formatter';
 import NothingFound from 'ts/components/NothingFound';
 import Title from 'ts/components/Title';
+
 import Companies from './components/Companies';
 import CompanyCharts from './components/Charts';
 
@@ -25,7 +27,9 @@ const Company = observer(({
 
   return (
     <>
-      <CompanyCharts />
+      {!fullScreen.isOpen && (
+        <CompanyCharts />
+      )}
       <Title title="page.team.company.title"/>
       <DataLoader
         to="response"