Add marker and polylines. Decrease max score

diff --git a/app.py b/app.py
index 2e67f914e9c42b4f527e8a265aea30e8dcfdd1a1..7f38e92264a99a6f385a9ec53a355da8c6441731 100644 (file)
--- 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 5ddf95ea92c76a3dadf2b6d37f253c0369e67d8b..df7f4dac2841f68627aefe3fa18539a33f8f77c2 100644 (file)
--- 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(
         'Игра закончена.',
-        `Ð\9dеплоÑ\85аÑ\8f попÑ\8bÑ\82ка! Ð\92Ñ\8b оказалиÑ\81Ñ\8c по адÑ\80еÑ\81Ñ\83: ${json.data.address}, а пÑ\80омаÑ\85нÑ\83лиÑ\81Ñ\8c на ${Math.round(json.data.distance)} меÑ\82Ñ\80ов.`,
+        `Ð\9dеплоÑ\85аÑ\8f попÑ\8bÑ\82ка! Ð\92Ñ\8b оказалиÑ\81Ñ\8c по адÑ\80еÑ\81Ñ\83: ${json.data.address}, пÑ\80омаÑ\85нÑ\83лиÑ\81Ñ\8c на ${Math.round(json.data.distance)} меÑ\82Ñ\80ов и заÑ\80абоÑ\82али ${Math.round(json.data.score)} оÑ\87ков.`,
         () => {
           window.location = '/';
         }

diff --git a/src/createMap.js b/src/createMap.js
index 068a557d79e2887422cfc369246cef38070172a1..dac78e47b17d6a87b30d1d066b9f6470a7acaa54 100644 (file)
--- 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 (file)
index 0000000..1ff4659
Binary files /dev/null and b/src/img/true-place-icon.png differ