beauty

diff --git a/src/App.scss b/src/App.scss
index 9d1ec05a5a3cbc1ce1756bb5853542c58203a8ac..ccc9037ed5175f43f7eb8a5e68a61ada3c4bb89a 100644 (file)
--- a/src/App.scss
+++ b/src/App.scss
@@ -56,17 +56,19 @@
   .Game-frame {
     margin: 40px 100px;
     border: solid 6px;
-    min-height: 60vh;
+    height: 70vh;
     display: flex;
   }
 
   .Game-tips {
     width: 50%;
     text-align: left;
-    padding-left: 30px;
-    padding-right: 10px;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-bottom: 10px;
     display: flex;
     flex-direction: column;
+    justify-content: space-between;
   }
 
   .Game-map {
@@ -79,12 +81,11 @@
   }
 
   .Get-button {
-    width: 50%;
-    text-align: center;
   }
 
   .Game-tips-list {
     height: 100%;
+    overflow-y: scroll;
   }
 
   .Game-map {
@@ -93,10 +94,11 @@
 
   .Game-controls {
     display: flex;
+    justify-content: space-between;
   }
 
   #map {
-    min-height: 60vh;
+    min-height: 70vh;
   }
 
   .varlamov-on {

diff --git a/src/Game.js b/src/Game.js
index 9d5302aa7e303eceda4b9cb4965d00e7c4958bdf..ea5801a6da6ff32893de5ffb81cc35025cd152d9 100644 (file)
--- a/src/Game.js
+++ b/src/Game.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 
 import { AppLayout } from './AppLayout';
 import logo from './img/cat.png';
-import varlamov from './img/varlamov.png';
 import truePlaceIcon from './img/true-place-icon.png';
 import { createMap } from './createMap';
 import { GameController } from './GameController';
@@ -11,6 +10,8 @@ import Button from '@skbkontur/react-ui/Button';
 import * as L from 'leaflet';
 
 export class Game extends Component {
+  tipsListRef = React.createRef();
+
   constructor(props) {
     super(props);
     this.notification = new Notification();
@@ -40,6 +41,10 @@ export class Game extends Component {
     });
   }
 
+  componentDidUpdate() {
+    this.tipsListRef.current.scrollTop = 10000;
+  }
+
   askTip = () => {
     this.setState({
         inProcess: true
@@ -203,7 +208,7 @@ export class Game extends Component {
             <div className="Game-tips">
               <h2 className="Game-tips-header">What you see:</h2>
               {this.state.tips.length > 0 && (
-                <ul className="Game-tips-list">
+                <ul className="Game-tips-list" ref={this.tipsListRef}>
                   {this.state.tips.map((tip, i) => <li key={tip + i}>{tip}</li>)}
                 </ul>
               )}

diff --git a/src/GameController.js b/src/GameController.js
index 35cb7e0f60cb7e0ac129759697b09b7389ae31c7..85ca4f64932afe6a4e310fe27bb43c5031e57585 100644 (file)
--- a/src/GameController.js
+++ b/src/GameController.js
@@ -8,6 +8,12 @@ export class GameController {
   }
 
   createGame(city) {
+    // this.minLat = '56.807556';
+    // this.maxLat = '56.847826';
+    // this.minLon = '60.570744';
+    // this.maxLon = '60.657791';
+    // this._tips = Array.from({ length: 10 }, () => 'Подсказка');
+    // return Promise.resolve();
     return api.post('/games', {city: city}).then(json => {
       this.gameId = json.data.game_id;
       this.minLat = json.data.min_lat;
@@ -18,6 +24,8 @@ export class GameController {
   }
 
   loadTips() {
+    // this._tips = this._tips.concat(Array.from({ length: 2 }, () => 'Подсказка'));
+    // return Promise.resolve();
     return api.get(`/games/${this.gameId}/tips`).then(json => {
       this._tips = json.data.tips;
       this._hasMoreTips = json.data.hasMore;
@@ -83,6 +91,8 @@ export class GameController {
   }
 
   getMoreTips() {
+    // this._tips = this._tips.concat(Array.from({ length: 2 }, () => 'Подсказка'));
+    // return Promise.resolve();
     return api.post(`/games/${this.gameId}/ask-tip`).then(json => {
       if(deepEq(json.data.tips, this.tips())) {
         this.notification.show('Ничего нового, пора идти дальше!');

diff --git a/src/createMap.js b/src/createMap.js
index 5d8ca593630cf1c24013c2ab018bd6618170d3f0..28b367f61b9b94ad82f0215e79622db86e0d0790 100644 (file)
--- a/src/createMap.js
+++ b/src/createMap.js
@@ -1,10 +1,5 @@
 import * as L from 'leaflet';
 
-const ekb = {
-  NE: ['56.929128', '60.730923'],
-  SW: ['56.768982', '60.491112']
-};
-
 export function createMap(elementId, onMapClick, boundaries) {
   const neLat = boundaries[0][0];
   const neLng = boundaries[0][1];

diff --git a/src/index.js b/src/index.js
index 52e8c2aae385033ad0d2c3704d86cc1e5f85fbb6..aa0ea0ef278f83186f89846c2bf7920512535f3b 100644 (file)
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import './index.css';
 import * as serviceWorker from './serviceWorker';
 import { router } from './router';