From f4aeb18ad70fd5dcbc38fcba25aa10c057d19b96 Mon Sep 17 00:00:00 2001
From: zharkovstas <zharkovstas@skbkontur.ru>
Date: Sun, 19 May 2019 09:48:09 +0500
Subject: [PATCH] Add marker and polylines. Decrease max score

---
 app.py                      |   2 +-
 src/Game.js                 |  20 ++++++++++++++++++--
 src/createMap.js            |   2 +-
 src/img/true-place-icon.png | Bin 0 -> 1839 bytes
 4 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 src/img/true-place-icon.png

diff --git a/app.py b/app.py
index 2e67f91..7f38e92 100644
--- a/app.py
+++ b/app.py
@@ -215,7 +215,7 @@ def enable_cors(fn):
 def count_score(game):
     dist = distance(game.current_coordinates, game.answer_coordinates)
 
-    return 100_000_000 / (1 + dist)
+    return 100_000 / (1 + dist)
 
 
 @get('/api/games')
diff --git a/src/Game.js b/src/Game.js
index 5ddf95e..df7f4da 100644
--- a/src/Game.js
+++ b/src/Game.js
@@ -3,10 +3,12 @@ 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';
 import { Notification } from './Notification';
 import Button from '@skbkontur/react-ui/Button';
+import * as L from 'leaflet';
 
 export class Game extends Component {
   constructor(props) {
@@ -104,11 +106,25 @@ export class Game extends Component {
     });
   };
 
-  onMapClick = (e) => {
+  onMapClick = (e, map) => {
     this.gameController.tryFinish(`${e.latlng.lat}/${e.latlng.lng}`).then(json => {
+
+      var greenIcon = L.icon({
+        iconUrl: truePlaceIcon,
+
+        iconSize:     [25, 41],
+        iconAnchor:   [13, 41]
+      });
+
+
+      L.marker([e.latlng.lat, e.latlng.lng]).addTo(map);
+      L.polyline([[e.latlng.lat, e.latlng.lng], [json.data.right_coordinates[0], json.data.right_coordinates[1]]], {color: 'green'}).addTo(map);
+      L.polyline(json.data.route, {color: 'red'}).addTo(map);
+      L.marker([json.data.right_coordinates[0], json.data.right_coordinates[1]], {icon: greenIcon}).addTo(map);
+
       this.notification.show(
         'Игра закончена.',
-        `Неплохая попытка! Вы оказались по адресу: ${json.data.address}, а промахнулись на ${Math.round(json.data.distance)} метров.`,
+        `Неплохая попытка! Вы оказались по адресу: ${json.data.address}, промахнулись на ${Math.round(json.data.distance)} метров и заработали ${Math.round(json.data.score)} очков.`,
         () => {
           window.location = '/';
         }
diff --git a/src/createMap.js b/src/createMap.js
index 068a557..dac78e4 100644
--- a/src/createMap.js
+++ b/src/createMap.js
@@ -13,7 +13,7 @@ export function createMap(elementId, onMapClick) {
 
   const map = new L.Map(elementId);
 
-  map.on('click', onMapClick);
+  map.on('click', (e) => {onMapClick(e, map)});
 
   const service = new L.tileLayer(
     'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
diff --git a/src/img/true-place-icon.png b/src/img/true-place-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ff465944faa829593ffe71170ac21a56fcf16f2
GIT binary patch
literal 1839
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

literal 0
HcmV?d00001

-- 
2.50.1