оформление

README.md

@@ -8,4 +8,11 @@
 - хостинг https://localhost:7115/api/v1
 - CORS должен принимать любые домены
 
+### Дополнительные материалы
+
+- Отключить блокировку взаимодействия с локальными ресурсами в Chrome:
+  chrome://flags/#block-insecure-private-network-requests - установить disable
+- Почитать про CORS:
+  https://habr.com/ru/company/macloud/blog/553826/
+
 ## Удачи!

src/components/App/App.css

@@ -27,15 +27,15 @@ h1 {
   display: flex;
 }
 
-.witch-row.state2 {
+.state2 {
   border: 1px solid darkred;
 }
 
-.witch-row.state0 {
+.state0 {
   border: 0;
 }
 
-.witch-row.state1 {
+.state1 {
   border: 1px solid darkgreen;
 }
 

src/components/GamePage/GamePage.tsx

@@ -31,11 +31,22 @@ const GamePage: React.FC<GameProps> = (props) => {
         }, 300);
       });
   };
+
+  const clickAtMockMode = (checked: boolean) => {
+    apiStore.tryToSetMockMode(checked);
+  }
+
   return (
     <header className="App-header">
       <div className='game'>
-        <div>Score: {apiStore.currentGame?.score}</div>
-        <div className={`witch-row state${state}`}>
+        <div className="small"><h2>Правила игры</h2>Угадываем, какая из ведьм настоящая. За каждый промах теряем 1 балл.
+          За угадывание получаем столько баллов, сколько вариантов в задании
+        </div>
+        <div className="small">Базовая реализация (по умолчанию) использует эмуляцию сервера, но можно подключить свой
+          сервер для обслуживания игры!
+        </div>
+        <div className={`state${state}`}>Баллы: {apiStore.currentGame?.score}</div>
+        <div className="witch-row">
           {
             _.map(apiStore.currentGame?.witches, (item: Witch, index: number) => {
               const left = item.position * 100;
@@ -48,7 +59,7 @@ const GamePage: React.FC<GameProps> = (props) => {
             })
           }
         </div>
-        <div className="small">Version: {apiStore.version}</div>
+        <div className="small">Версия: {apiStore.version}</div>
       </div>
       <h1 onClick={() => onExitGame()}> Стоп игра! </h1>
       <div>
@@ -58,7 +69,7 @@ const GamePage: React.FC<GameProps> = (props) => {
           id='hasServer'
           checked={!apiStore.mockMode}
           value='1'
-          onChange={(e) => apiStore.tryToSetMockMode(e.target.checked)}
+          onChange={(e) => clickAtMockMode(e.target.checked)}
         />
       </div>
       <div className="small">Свой сервис:

src/store/apiStore/apiStore.ts

@@ -137,17 +137,20 @@ class ApiStore {
   tryToSetMockMode(flagEnabled: boolean) {
     if (!flagEnabled) {
       this.setMockMode(true);
+      this.setGameStage(EGameStage.Start);
       return;
     }
     service.getVersion()
       .then((version) => {
         if (!version) {
           this.setMockMode(true);
+          this.setGameStage(EGameStage.Start);
           return;
         }
         this.setVersion(version);
         if (version) {
           this.setMockMode(false);
+          this.setGameStage(EGameStage.Start);
         }
       })
       .catch((error) => {