небольшие правки

package.json

@@ -15,6 +15,7 @@
     "lodash": "^4.17.21",
     "mobx": "^6.3.13",
     "mobx-observer": "^0.1.1",
+    "mobx-react": "^7.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",

src/components/App/App.css

@@ -2,6 +2,34 @@
   text-align: center;
 }
 
+.error {
+  color: red;
+  font-weight: bold;
+}
+.game {
+  width: 100%;
+  max-width: 500px;
+}
+h1 {
+  color: gold;
+}
+
+.witch-row {
+  display: flex;
+}
+
+.witch {
+  width: 100px;
+}
+.witch img {
+  width: 100px;
+}
+.witch:hover {
+  opacity: 0.5;
+  animation: App-logo-spin infinite 10s linear;
+}
+
+
 .App-logo {
   height: 50vmin;
   pointer-events: none;

src/components/App/App.tsx

@@ -2,6 +2,7 @@ import './App.css';
 import IntroPage from '../IntroPage/IntroPage';
 import GamePage from '../GamePage/GamePage';
 import apiStore, { EGameStage } from '../../store/apiStore/apiStore';
+import { observer } from 'mobx-react';
 
 type AppProps = {
   onEnterGame?: () => void,

src/components/GamePage/GamePage.tsx

@@ -21,13 +21,13 @@ const GamePage: React.FC<GameProps> = (props) => {
     <header className="App-header">
       <div className='game'>
         <div>Score: {apiStore.currentGame?.score}</div>
-        <div>Score: {apiStore.currentGame?.score}</div>
-        <div>
+        <div>Version: {apiStore.version}</div>
+        <div className="witch-row">
           {
             _.map(apiStore.currentGame?.witches, (item: Witch, index: number) => {
               const left = item.position * 100;
               return (
-                <div key={index} style={{position: 'absolute', left}}>
+                <div key={index} className='witch' style={{ left }}>
                   <img src={witch} alt={`witch-${index}`} onClick={() => clickAtWitch(item.guid)}/>
                 </div>
               )
@@ -38,7 +38,13 @@ const GamePage: React.FC<GameProps> = (props) => {
       <h1 onClick={() => onExitGame()}> Стоп игра! </h1>
       <div>
         <label htmlFor='hasServer'>У меня, кажется, есть свой сервер!</label>
-        <input type='checkbox' id='hasServer' checked={!apiStore.mockMode}/> </div>
+        <input
+          type='checkbox'
+          id='hasServer'
+          checked={!apiStore.mockMode}
+          value='1'
+          onChange={(e) => apiStore.tryToSetMockMode(e.target.checked) }
+        /> </div>
     </header>
   );
 }

src/components/IntroPage/IntroPage.tsx

@@ -1,6 +1,7 @@
 // @ts-ignore
 import witch from '../../resources/witch.svg';
 import './IntroPage.css';
+import apiStore from '../../store/apiStore/apiStore';
 
 type IntroProps = {
     onEnterGame: () => void,
@@ -12,6 +13,7 @@ const IntroPage: React.FC<IntroProps> = (props) => {
         <header className="App-header">
             <img src={witch} className="App-logo" alt="logo" />
             <h1 onClick={() => onEnterGame()}> Начать играть! </h1>
+          {apiStore.errorState && <h4 className="error">{apiStore.errorState}</h4>}
         </header>
     );
 }

src/store/apiStore/apiStore.ts

@@ -126,6 +126,29 @@ class ApiStore {
         });
     }
   }
+
+  tryToSetMockMode(flagEnabled: boolean) {
+    if (!flagEnabled) {
+      this.setMockMode(true);
+      return;
+    }
+    service.getVersion()
+      .then((version) => {
+      if (!version) {
+        this.setMockMode(true);
+        return;
+      }
+      this.setVersion(version);
+      if (version) {
+        this.setMockMode(false);
+      }
+    })
+      .catch((error) => {
+        this.setMockMode(true);
+        this.setErrorState(error.message);
+        this.setGameStage(EGameStage.Start);
+      })
+  }
 }
 
 export default new ApiStore();

src/store/tool.ts

@@ -30,7 +30,7 @@ const tool = {
       })
       .catch((err) => {
         console.warn(err);
-        return undefined;
+        throw err;
       });
   },
   //endregion

yarn.lock

@@ -5843,6 +5843,18 @@ mobx-observer@^0.1.1:
   resolved "https://registry.yarnpkg.com/mobx-observer/-/mobx-observer-0.1.1.tgz#cb46de1c26a8f4f067db126da9ef6d3e2b803510"
   integrity sha1-y0beHCao9PBn2xJtqe9tPiuANRA=
 
+mobx-react-lite@^3.2.0:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-3.2.3.tgz#83d2b32ebf4383cd0dc0d397acbf53a8e9c66765"
+  integrity sha512-7exWp1FV0M9dP08H9PIeHlJqDw4IdkQVRMfLYaZFMmlbzSS6ZU6p/kx392KN+rVf81hH3IQYewvRGQ70oiwmbw==
+
+mobx-react@^7.2.1:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-7.2.1.tgz#e9d4c04dc63d05e1139ce773f5fee7a5b4cb7c78"
+  integrity sha512-LZS99KFLn75VWDXPdRJhILzVQ7qLcRjQbzkK+wVs0Qg4kWw5hOI2USp7tmu+9zP9KYsVBmKyx2k/8cTTBfsymw==
+  dependencies:
+    mobx-react-lite "^3.2.0"
+
 mobx@^6.3.13:
   version "6.3.13"
   resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.3.13.tgz#93e56a57ee72369f850cf3d6398fd36ee8ef062e"