buttons

diff --git a/src/App.scss b/src/App.scss
index ccc9037ed5175f43f7eb8a5e68a61ada3c4bb89a..836d62436dda9a9babf2327459e3d877cb412948 100644 (file)
--- a/src/App.scss
+++ b/src/App.scss
@@ -54,7 +54,7 @@
   }
 
   .Game-frame {
-    margin: 40px 100px;
+    margin: 40px 30px;
     border: solid 6px;
     height: 70vh;
     display: flex;

diff --git a/src/Game.js b/src/Game.js
index ea5801a6da6ff32893de5ffb81cc35025cd152d9..1c8a8bfa36ca1a1e11a5ff003e1765ac0619e3db 100644 (file)
--- a/src/Game.js
+++ b/src/Game.js
@@ -225,34 +225,62 @@ export class Game extends Component {
                 )}
 
                 {!this.state.isFinished && (
-
-              <div className="Game-controls">
-                <div className="Get-button">
-                  <Button onClick={this.askTip} size="medium" disabled={this.state.inProcess || !this.state.hasMoreTips}>
-                    Осмотреться
-                  </Button>
-                </div>
-                <div className="Get-button">
-                  <Button onClick={this.moveWest} size="medium" disabled={this.state.inProcess}>
-                    Пройти к западу
-                  </Button>
-                </div>
-                <div className="Get-button">
-                  <Button onClick={this.moveNorth} size="medium" disabled={this.state.inProcess}>
-                    Пройти к северу
-                  </Button>
-                </div>
-                <div className="Get-button">
-                  <Button onClick={this.moveSouth} size="medium" disabled={this.state.inProcess}>
-                    Пройти к югу
-                  </Button>
-                </div>
-                <div className="Get-button">
-                  <Button onClick={this.moveEast} size="medium" disabled={this.state.inProcess}>
-                    Пройти к востоку
-                  </Button>
-                </div>
-              </div>
+                  <div>
+                    <div className="Game-controls">
+                      <div className="Get-button" style={{
+                        width: '50%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                      }}>
+                        <Button onClick={this.askTip} size="large" disabled={this.state.inProcess || !this.state.hasMoreTips}>
+                          Осмотреться
+                        </Button>
+                      </div>
+                      <div style={{
+                        width: '50%',
+                        display: 'flex',
+                        flexDirection: 'column'
+                      }}>
+                        <div className="Game-controls" style={{
+                          display: 'flex',
+                          justifyContent: 'center'
+                        }}>
+                          <div className="Get-button">
+                            <Button onClick={this.moveNorth} disabled={this.state.inProcess}>
+                              Пройти к северу
+                            </Button>
+                          </div>
+                        </div>
+                        <div className="Game-controls" style={{
+                          display: 'flex',
+                          justifyContent: 'space-around',
+                          flexWrap: 'wrap'
+                        }}>
+                          <div className="Get-button">
+                            <Button onClick={this.moveWest} disabled={this.state.inProcess}>
+                              Пройти к западу
+                            </Button>
+                          </div>
+                          <div className="Get-button">
+                            <Button onClick={this.moveEast} disabled={this.state.inProcess}>
+                              Пройти к востоку
+                            </Button>
+                          </div>
+                        </div>
+                        <div className="Game-controls" style={{
+                          display: 'flex',
+                          justifyContent: 'center'
+                        }}>
+                          <div className="Get-button">
+                            <Button onClick={this.moveSouth} disabled={this.state.inProcess}>
+                              Пройти к югу
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
 
                 )}