Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 10252b0

Browse files
author
Ruurd Bijlsma
committed
highscores implemented
1 parent 2c25767 commit 10252b0

File tree

10 files changed

+431
-11
lines changed

10 files changed

+431
-11
lines changed

‎Game.js‎

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
class Game {
2-
constructor(map, element, rules = {roundCount: 5, distribution: distribution.weighted}) {
2+
constructor(map, element, rules = {
3+
roundCount: 5,
4+
moveLimit: -1,
5+
panAllowed: true,
6+
timeLimit: -1,
7+
zoomAllowed: true
8+
}) {
39
this.element = element;
410
this.svElement = new StreetviewElement(element.querySelector('.streetview'), element.querySelector('.return-home'));
511

@@ -8,6 +14,8 @@ class Game {
814
this.movesElement = element.querySelector('.moves-left');
915
this.roundElement = element.querySelector('.round');
1016

17+
this.scores = new Scores();
18+
1119
this.googleMap = new google.maps.Map(element.querySelector('.map-element'), {
1220
zoom: 0,
1321
center: {lat: 0, lng: 0},
@@ -41,6 +49,24 @@ class Game {
4149
});
4250
}
4351

52+
async uploadScore(e) {
53+
if (e) e.preventDefault();
54+
55+
let username = this.element.querySelector('.username-input').value;
56+
if (this.latestScore) {
57+
this.latestScore.user = username;
58+
this.scores.addLocal(this.latestScore);
59+
await this.scores.addGlobal(this.latestScore);
60+
}
61+
62+
location.href = '../highscore/#' + this.map.name;
63+
}
64+
65+
async logHighScores() {
66+
let scores = await this.scores.getGlobalHighScores(this.map.name, this.rules);
67+
console.log(scores);
68+
}
69+
4470
setRules(e) {
4571
console.log('set rules called', this.ready);
4672
if (e) e.preventDefault();
@@ -56,6 +82,7 @@ class Game {
5682
let rules = {roundCount: +roundCount, timeLimit: +timeLimit, moveLimit: +moveLimit};
5783
rules.panAllowed = restrictions.includes('pan');
5884
rules.zoomAllowed = restrictions.includes('zoom');
85+
console.log(rules);
5986
this.rules = rules;
6087

6188
setTimeout(() => this.applyRules(), 300);
@@ -137,10 +164,10 @@ class Game {
137164
};
138165
let onDown = () => {
139166
resizerDown = true;
140-
}
167+
};
141168
let onUp = () => {
142169
resizerDown = false;
143-
}
170+
};
144171

145172
resizeElement.addEventListener('mousedown', () => onDown());
146173
document.addEventListener('mousemove', e => onMove(e.pageX, e.pageY));
@@ -192,7 +219,6 @@ class Game {
192219
showOverview(guess, actual) {
193220
this.attachMap('.overview-map');
194221

195-
196222
let distance = this.measureDistance(guess, actual);
197223
let niceDistance = this.formatDistance(distance);
198224
let score = this.map.scoreCalculation(distance);
@@ -250,6 +276,13 @@ class Game {
250276
let locations = this.previousGuesses.map(result => result.guess).concat(this.previousGuesses.map(result => result.actual));
251277
this.fitMap(locations);
252278

279+
this.latestScore = {
280+
totalScore,
281+
map: this.map.name,
282+
rules: this.rules,
283+
date: +new Date()
284+
};
285+
253286
setTimeout(() => {
254287
overviewElement.querySelector('.score-progress').style.width = (totalScore / maxScore * 100) + '%';
255288
for (let result of this.previousGuesses)

‎GeoMap.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
class GeoMap {
2-
constructor(polygon, minimumDistanceForPoints) {
2+
constructor(polygon, minimumDistanceForPoints, name) {
33
console.log(minimumDistanceForPoints);
44
this.minimumDistanceForPoints = minimumDistanceForPoints;
55
this.maxScore = 5000;
6+
this.name = name;
67

78
this.polygon = polygon;
89
}

‎MapManager.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ class MapManager {
3131

3232
let minimumDistanceForPoints = Math.sqrt(area) * 2;
3333

34-
return new GeoMap(poly, minimumDistanceForPoints)
34+
return new GeoMap(poly, minimumDistanceForPoints, key);
3535
}
3636

3737
kmlsToPolygon(...kmls) {

‎Scores.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
class Scores {
2+
constructor(key = 'scores') {
3+
this.key = key;
4+
this.localScores = [];
5+
6+
if (localStorage.getItem(key) === null) {
7+
this.saveLocal(this.localScores);
8+
}
9+
else {
10+
this.localScores = this.updateLocal();
11+
}
12+
13+
this.db = firebase.firestore();
14+
}
15+
16+
async getGlobalHighScores(map, rules, n = 10) {
17+
let records = await this.db
18+
.collection('scores')
19+
.where('map', '==', map)
20+
// .where('rules', '==', rules)
21+
.orderBy('totalScore', 'desc')
22+
.limit(n)
23+
.get();
24+
25+
let results = [];
26+
records.forEach(record => {
27+
results.push(record.data());
28+
});
29+
return results;
30+
}
31+
32+
getLocalHighScores(map, rules, n = 10) {
33+
return this.localScores
34+
// .filter(score => this.equals(score, rules))
35+
.filter(score => score.map === map)
36+
.sort((a, b) => b.totalScore - a.totalScore)
37+
.slice(0, n);
38+
}
39+
40+
equals(objectA, objectB) {
41+
for (let key in objectA) {
42+
if (objectB.hasOwnProperty(key) && objectA[key] !== objectB[key])
43+
return false
44+
}
45+
return true;
46+
}
47+
48+
saveLocal(object = this.value) {
49+
localStorage[this.key] = JSON.stringify(object);
50+
}
51+
52+
addLocal(score) {
53+
this.localScores.push(score);
54+
this.saveLocal();
55+
}
56+
57+
addGlobal(score) {
58+
this.db.collection('scores').add(score);
59+
}
60+
61+
getLocalScores() {
62+
return this.localScores;
63+
}
64+
65+
updateLocal() {
66+
return JSON.parse(localStorage[this.key]);
67+
}
68+
}

‎highscore/index.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<html lang='nl'>
2+
3+
<head>
4+
<!-- Global site tag (gtag.js) - Google Analytics -->
5+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-35913371-9"></script>
6+
<script>
7+
window.dataLayer = window.dataLayer || [];
8+
9+
function gtag() {
10+
dataLayer.push(arguments);
11+
}
12+
13+
gtag('js', new Date());
14+
15+
gtag('config', 'UA-35913371-9');
16+
</script>
17+
<meta charset='utf-8'/>
18+
<title>Location Estimatr</title>
19+
<meta name='theme-color' content='#6e45e2'>
20+
<meta name='mobile-web-app-capable' content='yes'>
21+
<meta name="viewport" content="width=device-width, initial-scale=1">
22+
<link rel='icon' sizes='192x192' href='../img/favicon.png'>
23+
<link rel='shortcut icon' type='image/png' href='../img/favicon.png'>
24+
<!--<link rel="icon" href="../img/favicon.ico" type="image/x-icon"/>-->
25+
<!--<link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon"/>-->
26+
<!-- Favicon moet 192x192 zijn -->
27+
<link href="https://fonts.googleapis.com/css?family=Montserrat|Roboto" rel="stylesheet">
28+
<link rel='stylesheet' href='main.css'>
29+
<script src='script.js' type='text/javascript'></script>
30+
<script src='../Scores.js' type='text/javascript'></script>
31+
</head>
32+
33+
<body>
34+
35+
<div class="content">
36+
<h2>Global high scores</h2>
37+
<ol class="global-high-score score-list">Loading...</ol>
38+
<h2>Local high scores</h2>
39+
<ol class="local-high-score score-list">Loading...</ol>
40+
</div>
41+
42+
<script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
43+
<script src="https://www.gstatic.com/firebasejs/4.12.0/firebase-firestore.js"></script>
44+
<script>
45+
// Initialize Firebase
46+
var config = {
47+
apiKey: "AIzaSyAgHtAPmTMr99y5rISmvYnfwLVdfmH8Zew",
48+
authDomain: "guessthegeo.firebaseapp.com",
49+
projectId: 'guessthegeo',
50+
databaseURL: "https://guessthegeo.firebaseio.com",
51+
};
52+
firebase.initializeApp(config);
53+
</script>
54+
</body>
55+
56+
</html>

0 commit comments

Comments
 (0)