update

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

@@ -55,3 +55,16 @@
   }
 }
 
+@media (max-width: 900px) {
+  .billboard {
+    &_box {
+      width: 300px;
+      height: 120px;
+    }
+    &_title {
+      font-size: var(--font-m);
+      height: 70px;
+      padding: var(--space-s);
+    }
+  }
+}

src/ts/components/Description/index.tsx

@@ -21,7 +21,7 @@ function getTextWithLink(text: string, className?: string) {
           target="_blank"
           rel="noreferrer"
           className={className || ''}
-          to={link}
+          to={link || ''}
         >
           {title}
         </Link>
@@ -84,14 +84,15 @@ function Description({ text, style, className }: IDescriptionProps) {
     ? (text || '').trim().split(/\n+/gm)
     : text;
 
-  const items = paragraphs.map((paragraph) => {
+  const items = paragraphs.map((paragraph, index: number) => {
     const prefix = paragraph.substring(0, 2);
     const mainText = paragraph.substring(2);
+    const key = `${mainText}${index}`;
 
     if (prefix === '- ') {
       return (
         <List
-          key={mainText}
+          key={key}
           text={mainText}
           style={style}
           className={className}
@@ -102,7 +103,7 @@ function Description({ text, style, className }: IDescriptionProps) {
     if (prefix === '# ') {
       return (
         <Title
-          key={mainText}
+          key={key}
           text={mainText}
           style={style}
           className={className}
@@ -112,7 +113,7 @@ function Description({ text, style, className }: IDescriptionProps) {
 
     return (
       <SimpleText
-        key={mainText}
+        key={key}
         text={paragraph}
         style={style}
         className={className}

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

@@ -32,3 +32,9 @@
     color: var(--color-white);
   }
 }
+
+@media (max-width: 900px) {
+  .game_banner {
+    height: 200px;
+  }
+}

src/ts/components/ModalWindow/store/Confirm.ts

@@ -1,5 +1,7 @@
 import { makeObservable, observable, action } from 'mobx';
 
+import { t } from 'ts/helpers/Localization';
+
 export interface IConfirmStore {
   title: string;
   yes: string;
@@ -36,9 +38,9 @@ class ConfirmStore implements IConfirmStore {
   }
 
   open(options?: any) {
-    this.title = options?.title || options || 'Вы уверены что хотите удалить?';
+    this.title = options?.title || options || t('common.confirm.title');
-    this.yes = options?.yes || 'Да, уверен';
+    this.yes = options?.yes || t('common.confirm.yes');
-    this.no = options?.no || 'Отмена';
+    this.no = options?.no || t('common.confirm.no');
     this.isOpen = true;
     return new Promise((response: any, reject: any) => {
       this.successCallback = response;

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

@@ -1,11 +1,8 @@
 @import 'src/styles/variables';
 
 .quiz_answer {
-  --temp-width: 160px;
-  --temp-small: calc(var(--temp-width) - 32px);
-
   position: relative;
-  width: var(--temp-width);
+  width: 160px;
   padding-bottom: var(--space-m);
 
   cursor: pointer;
@@ -26,7 +23,7 @@
   }
 
   &_small {
-    width: var(--temp-small);
+    width: 128px;
   }
 
   &_icon {
@@ -105,7 +102,7 @@
   padding: var(--space-s) var(--space-l);
 
   & .quiz_answer {
-    width: var(--temp-small);
+    width: 128px;
 
     animation-delay: 1s;
     animation-duration: 2s;
@@ -119,7 +116,6 @@
   }
 }
 
-
 @keyframes quiz_answer {
   from {
     top: 0;
@@ -133,3 +129,21 @@
     opacity: 0.3;
   }
 }
+
+@media (max-width: 900px) {
+  .quiz_answer {
+    width: 100px;
+    &_small {
+      width: 68px;
+    }
+    &_text {
+      font-size: var(--font-s);
+    }
+  }
+  .quiz_answer_wrapper_small .quiz_answer {
+    width: 68px;
+  }
+  .quiz_answer_wrapper + .quiz_answer_wrapper {
+    margin-left: var(--space-l);
+  }
+}

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

@@ -153,3 +153,16 @@
     background-position: -200px 0;
   }
 }
+
+@media (max-width: 900px) {
+  .quiz {
+    &_title,
+    &_description {
+      width: 100%;
+      padding: var(--space-l) var(--space-xs);
+    }
+    &_title {
+      font-size: var(--font-m);
+    }
+  }
+}

src/ts/components/Races/index.tsx

@@ -58,8 +58,10 @@ function Races({
           backgroundImage: 'url(./assets/games/races/greenTop.png)',
         }}
       />
-      <div className={style.races}>
+      <div className={`${style.races} scroll_x`}>
-        {lines}
+        <div style={{ minWidth: '900px' }}>
+          {lines}
+        </div>
       </div>
       <div
         className={style.races_green}

src/ts/components/Races/styles/index.module.scss

@@ -28,10 +28,6 @@
     background-repeat: repeat-x;
     background-size: auto 100%;
     background-position: top left;
-
-    &:first-child {
-      // border-top: var(--space-xxs) dashed var(--color-border);
-    }
   }
 
   &_button {
@@ -39,3 +35,8 @@
   }
 }
 
+@media (max-width: 900px) {
+  .races_track {
+    height: 70px;
+  }
+}

src/ts/components/Races/styles/info.module.scss

@@ -25,7 +25,6 @@
   animation-fill-mode: both;
 }
 
-
 @keyframes races_track_info {
   from {
     opacity: 0;
@@ -34,3 +33,9 @@
     opacity: 1;
   }
 }
+
+@media (max-width: 900px) {
+  .races_track_info {
+    margin: 0 12%;
+  }
+}

src/ts/components/ShowSymbol/styles/index.module.scss

@@ -17,7 +17,16 @@
     --temp-width: 20px;
     --temp-height: 30px;
   }
+}
 
+@media (max-width: 900px) {
+  .show_symbol {
+    --temp-width: 24.5px;
+    --temp-height: 33px;
+  }
+}
+
+.show_symbol {
   font-size: var(--temp-font);
   position: relative;
 

src/ts/components/SwimmingPool/index.tsx

@@ -38,7 +38,11 @@ function SwimmingPool({
           backgroundImage: 'url(./assets/games/swimmingPool/block2.png)',
         }}
       />
-      {lines}
+      <div className="scroll_x">
+        <div style={{ minWidth: '900px' }}>
+          {lines}
+        </div>
+      </div>
       <div
         className={style.swimming_pool_bottom_border}
         style={{

src/ts/components/SwimmingPool/styles/track.module.scss

@@ -53,3 +53,18 @@
 .swimming_pool_track + .swimming_pool_track .swimming_pool_track_line {
   border-top: 4px dashed red;
 }
+
+@media (max-width: 900px) {
+  .swimming_pool_track {
+    height: 70px;
+
+    &_value {
+      width: 71px;
+      line-height: 64px;
+    }
+
+    &_line {
+      width: calc(100% - 384px);
+    }
+  }
+}

src/ts/pages/PageWrapper/components/footer/index.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import localization from 'ts/helpers/Localization';
 import dataGripStore from 'ts/store/DataGrip';
+import viewNameStore, { ViewNameEnum } from 'ts/store/ViewName';
 import confirm from 'ts/components/ModalWindow/store/Confirm';
 
 import Button from './Button';
@@ -47,8 +48,9 @@ function getMenu(navigate: Function): any[] {
         confirm.open({
           title: 'Вы уверены что хотите выйти?',
         }).then(() => {
-          dataGripStore.asyncSetCommits([]);
+          dataGripStore.exit();
           navigate('/');
+          viewNameStore.toggle(ViewNameEnum.WELCOME);
         });
       },
     },

src/ts/pages/PageWrapper/index.tsx

@@ -20,10 +20,18 @@ interface IPageWrapper {
 function MobileView({
   children,
 }: IPageWrapper) {
+  const { type, page } = useParams<any>();
+  const padding = type === 'team' && page === 'building'
+    ? { padding: 0 }
+    : {};
+
   return (
     <>
       <div className={style.page_wrapper}>
-        <div className={style.page_wrapper_main_mobile}>
+        <div
+          className={style.page_wrapper_main_mobile}
+          style={padding}
+        >
           {children}
         </div>
         <HeaderWithTab/>

src/ts/store/DataGrip.ts

@@ -41,6 +41,7 @@ class DataGripStore {
       processingDataAnalysis: action,
       depersonalized: action,
       updateStatistic: action,
+      exit: action,
     });
   }
 
@@ -147,6 +148,13 @@ class DataGripStore {
     this.fileGrip = fileGrip;
     this.hash = Math.random();
   }
+
+  exit() {
+    dataGrip.clear();
+    fileGrip.clear();
+    this.commits = [];
+    this.#updateRender();
+  }
 }
 
 const dataGripStore = new DataGripStore();

src/ts/translations/ru/common.ts

@@ -26,4 +26,8 @@ export default `
 § common.notifications.save: Изменения сохранены
 § common.notifications.setting: Настройки сохранены
 § common.fileLoader.notification: Ошибка загрузки файла $1
+§ common.confirm.title: Вы уверены что хотите удалить?
+§ common.confirm.yes: Да, уверен
+§ common.confirm.no: Отмена
+§ common.confirm.abc: abc
 `;