update

build/assets/menu/team_release.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#84858D"><path d="M3 14c0 1.3.84 2.4 2 2.82V20H3v2h6v-2H7v-3.18C8.16 16.4 9 15.3 9 14V6H3zm2-6h2v3H5zm0 5h2v1c0 .55-.45 1-1 1s-1-.45-1-1zm15.64-4.46-.96-.32c-.41-.14-.68-.52-.68-.95V3c0-.55-.45-1-1-1h-3c-.55 0-1 .45-1 1v4.28c0 .43-.27.81-.68.95l-.96.32c-.81.28-1.36 1.04-1.36 1.9V20c0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2v-9.56c0-.86-.55-1.62-1.36-1.9M16 4h1v1h-1zm4 16h-7v-2h7zm0-4h-7v-2h7zm0-4h-7v-1.56l.95-.32C15.18 9.72 16 8.57 16 7.28V7h1v.28c0 1.29.82 2.44 2.05 2.85l.95.31z"></path></svg>

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",

public/assets/menu/team_release.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#84858D"><path d="M3 14c0 1.3.84 2.4 2 2.82V20H3v2h6v-2H7v-3.18C8.16 16.4 9 15.3 9 14V6H3zm2-6h2v3H5zm0 5h2v1c0 .55-.45 1-1 1s-1-.45-1-1zm15.64-4.46-.96-.32c-.41-.14-.68-.52-.68-.95V3c0-.55-.45-1-1-1h-3c-.55 0-1 .45-1 1v4.28c0 .43-.27.81-.68.95l-.96.32c-.81.28-1.36 1.04-1.36 1.9V20c0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2v-9.56c0-.86-.55-1.62-1.36-1.9M16 4h1v1h-1zm4 16h-7v-2h7zm0-4h-7v-2h7zm0-4h-7v-1.56l.95-.32C15.18 9.72 16 8.57 16 7.28V7h1v.28c0 1.29.82 2.44 2.05 2.85l.95.31z"></path></svg>

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,7 +73,7 @@ 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}
@@ -78,7 +81,7 @@ function Question({
         <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/helpers/example.ts

@@ -1,71 +0,0 @@
-export default {
-  title: 'Сотрудники отдела',
-  icon: './assets/games/wheel.jpg',
-  description: 'Текст с каким то описанием на три предложения, которые интригуют и манят пройти этот унылый квиз с небольшим количеством графики.',
-  questions: [
-    {
-      title: 'Сколь директорий создал Anatoliy?',
-      answers: [
-        {
-          title: '17',
-          icon: './assets/games/wheel.jpg',
-          score: 0,
-        },
-        {
-          title: '23',
-          icon: './assets/games/wheel.jpg',
-          score: 1,
-        },
-        {
-          title: '29',
-          icon: './assets/games/wheel.jpg',
-          score: 0,
-        },
-      ],
-    },
-    {
-      title: 'Albert коммитит чаще Marrie?',
-      answers: [
-        {
-          title: 'Да',
-          icon: './assets/games/wheel.jpg',
-          score: 0,
-        },
-        {
-          title: 'Нет',
-          icon: './assets/games/wheel.jpg',
-          score: 1,
-        },
-      ],
-    },
-    {
-      title: 'Самое длинное commit message оставил:',
-      answers: [
-        {
-          title: 'Kolya Elow',
-          icon: './assets/games/wheel.jpg',
-          score: 0,
-        },
-        {
-          title: 'Subrine Titan',
-          icon: './assets/games/wheel.jpg',
-          score: 0,
-        },
-        {
-          title: 'Grebenshikov Muz TV',
-          icon: './assets/games/wheel.jpg',
-          score: 1,
-        },
-      ],
-    },
-  ],
-  results: [
-    {
-      title: 'Поздравляем, пытка окончена',
-      icon: './assets/games/wheel.jpg',
-      description: 'Вы протестировали этот квиз и готовы написать на него отзыв длинной два или три предложения.',
-      'min': 0,
-      'max': 60,
-    },
-  ],
-};

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(): React.ReactElement | null {
-}
+  const questions = getQuizQuestions();
-
-function Quiz({}: IQuizProps): React.ReactElement | null {
   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,7 +11,6 @@ function Info({
   title,
   duration,
 }: IInfoProps): React.ReactElement | null {
-  console.log(title);
   return (
     <div
       className={style.races_track_info}
@@ -19,7 +18,7 @@ function Info({
         animationDelay: `${duration + 1}s`,
       }}
     >
-      4
+      {title}
     </div>
   );
 }

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

@@ -12,6 +12,7 @@ const DURATION = {
 
 interface ITrackProps {
   title: string;
+  position: string;
   speed: number;
   type?: string;
   canStart?: boolean;
@@ -19,6 +20,7 @@ interface ITrackProps {
 
 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 order = tracksAuth.map((statistic: any) => statistic.taskInDay);
-  const max = Math.max(...value);
+  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,6 +4,7 @@ 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';
@@ -11,6 +12,7 @@ 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"

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

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { IPaginationRequest } from 'ts/interfaces/Pagination';
 import ISort from 'ts/interfaces/Sort';
 import dataGripStore from 'ts/store/DataGrip';
+import fullScreen from 'ts/store/FullScreen';
 
 import DataLoader from 'ts/components/DataLoader';
 import Pagination from 'ts/components/DataLoader/components/Pagination';
@@ -28,7 +29,9 @@ const Department = observer(({
 
   return (
     <>
-      <DepartmentCharts/>
+      {!fullScreen.isOpen && (
+        <DepartmentCharts/>
+      )}
       <Title title="page.team.department.title"/>
       <DataLoader
         to="response"

src/ts/pages/Team/styles/quiz.module.scss

@@ -1,9 +1,21 @@
 @import 'src/styles/variables';
 
-.quiz {
+.team_building_full_screen {
-  &_achievements {
+  &_open,
-    margin: 12px 0 24px 0;
+  &_close {
-    column-count: 3;
+    position: absolute;
-    white-space: normal;
+    top: 84px;
+    right: 32px;
+    z-index: 1;
+
+    display: inline-block;
+    width: var(--space-xxl);
+    height: var(--space-xxl);
+
+    cursor: pointer;
+  }
+
+  &_open {
+    top: 32px;
   }
 }

src/ts/translations/ru/navigation.ts

@@ -33,6 +33,7 @@ export default `
 § sidebar.team.department: Отделы
 § sidebar.team.country: Местоположение
 § sidebar.team.settings: Настройки
+§ sidebar.team.building: Мини игры
 § sidebar.person.total: Общая информация
 § sidebar.person.money: Стоимость работы
 § sidebar.person.speed: Скорость

src/ts/translations/ru/pages.ts

@@ -239,6 +239,9 @@ export default `
 § page.team.department.tasks: задач
 § page.team.department.totalDays: Дней работы
 § page.team.department.totalAuthors: Количество сотрудников
+§ page.team.building.races.title: Скорость закрытия задач
+§ page.team.building.races.go: Поехали!
+§ page.team.building.swimmingPool.title: Максимальная длинна подписи коммита
 § page.person.print.photo.title: Фотография
 § page.person.print.photo.description: место для фотографии
 § page.person.total.title: Основные характеристики