From 2e1c95d6a2ec6579573a22f8117d8f4bd0854995 Mon Sep 17 00:00:00 2001
From: "a.soldatof" <a.soldatof@gmail.com>
Date: Sun, 19 May 2019 10:35:20 +0300
Subject: [PATCH] buttons

---
 src/App.scss |  2 +-
 src/Game.js  | 84 ++++++++++++++++++++++++++++++++++------------------
 2 files changed, 57 insertions(+), 29 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index ccc9037..836d624 100644
--- 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 ea5801a..1c8a8bf 100644
--- 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>
 
                 )}
 
-- 
2.50.1