From 98c2707cb0d16f6e887c3d666760db8dba7c96e6 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sun, 11 Oct 2020 12:06:44 +0200 Subject: [PATCH] Full rewrite, faster, better listing and less code. - Only list the highscore and send to PersonalHighscorePage on click. - List numbers are not sequential position in list, but the persons place in the highscore, allows shared place ranking. - Filter is a computed value that uses the filterInput, reduces overhead. - Stripped unused styling. --- src/components/HighscorePage.vue | 291 ++++++++++++------------------- 1 file changed, 107 insertions(+), 184 deletions(-) diff --git a/src/components/HighscorePage.vue b/src/components/HighscorePage.vue index cf8e2c8..afba5bc 100644 --- a/src/components/HighscorePage.vue +++ b/src/components/HighscorePage.vue @@ -1,56 +1,24 @@ @@ -65,10 +33,8 @@ export default { components: { Wine }, data() { return { - highscoreResponse: [], highscore: [], - highscoreFilter: '', - selectedWinner: null + filterInput: '' } }, async mounted() { @@ -79,171 +45,128 @@ export default { response = response.filter( person => person.name != null && person.name != "" ); - this.highscoreResponse = response - this.highscore = this.highscoreResponse; + this.highscore = this.generateScoreBoard(response); }, - watch: { - highscoreFilter(val) { + computed: { + filteredResults() { + let highscore = this.highscore; + let val = this.filterInput; + if (val.length) { - val = val.toLowerCase(); - this.highscore = this.highscoreResponse.filter(person => person.name.toLowerCase().includes(val)) - } else { - this.highscore = this.highscoreResponse + const nameIncludesString = (person) => person.name.toLowerCase().includes(val); + highscore = highscore.filter(nameIncludesString) } + + return highscore } }, methods: { - humanReadableDate: humanReadableDate, - daysAgo: daysAgo, + generateScoreBoard(highscore=this.highscore) { + let place = 0; + let highestWinCount = -1; + + return highscore.map(win => { + const wins = win.wins.length + if (wins != highestWinCount) { + place += 1 + highestWinCount = wins + } + + const placeString = place.toString().padStart(2, "0"); + win.rank = placeString; + return win + }) + }, resetFilter() { - this.highscore = this.highscoreResponse; - this.highscoreFilter = ''; + this.filterInput = ''; document.getElementsByTagName('input')[0].focus(); }, selectWinner(winner) { - if (this.selectedWinner != null && this.selectedWinner["name"] == winner["name"]) { - this.selectedWinner = null; - } else { - let newestFirst = winner.wins.sort((a, b) => a.date < b.date); - winner.wins = newestFirst; - this.selectedWinner = { ...winner }; - } + const path = "/highscore/" + encodeURIComponent(winner.name) + this.$router.push(path); }, - getRotation: function() { - let num = Math.floor(Math.random() * 12.5); - let neg = Math.floor(Math.random() * 2); - return neg == 0 ? -num : num; - } + humanReadableDate: humanReadableDate, + daysAgo: daysAgo } };