oelna/highscore.html

## highscore.html
<!DOCTYPE html>
<html>
<head>
	<title>Highscore Demo</title>
</head>
<body>
	<script type="module">
		import highscore from './highscore.js'

		let points = new highscore('points', 14, 'desc'); /* keep up to 14 scores, under the storage name 'points', sorted in descending order */

		/* save a random entry */
		let randomName = Math.random().toString(36).substring(2, 15);
		let randomScore = Math.floor(Math.random()*100)*2;
		points.save(test, randomScore);

		/* load an array of 8 highscores, objects containing a 'name' and 'score' property */
		let scoreBoard = points.load(8);
		console.log(scoreBoard);

		/* return a HTML `ul` list element with a class named 'xxx', containing the 6 highest scores */
		let scoresListElement = points.list(6, 'xxx');
		document.querySelector('body').appendChild(scoresListElement);
	</script>
</body>
</html>

## highscore.js
class highscore {

	constructor (title, limit=10, direction='desc') {
		this.store = window.localStorage;
		this.title = (title) ? title : 'highscores';
		this.limit = limit;
		this.direction = (direction.toLowerCase() === 'desc') ? 'desc' : 'asc';

		let content = this.store.getItem(this.title);
		this.scores = [];
		if (content) {
			this.scores = JSON.parse(content);
		}
	}

	save (name, score) {
		let entry = {
			'name': name,
			'score': score
		}
		this.scores.push(entry);
		this.scores = this.sort(this.scores, this.direction);
		if (this.scores.length > this.limit) {
			this.scores = this.scores.slice(0, this.limit);
		}

		this.store.setItem(this.title, JSON.stringify(this.scores));
	}

	load (amount) {
		if (amount && amount > 0) {
			return this.scores.slice(0, amount);
		}

		return this.scores;
	}

	list (amount, className='') {
		let array = this.scores;
		if (amount && amount > 0) {
			array = array.slice(0, amount);
		}

		const list = document.createElement('ul');
		if (className.length > 0) {
			list.classList.add(className);
		}

		for (var i = 0; i < array.length; i++) {
			const listItem = document.createElement('li');

			const nameSpan = document.createElement('span');
			nameSpan.classList.add('name');
			nameSpan.textContent = array[i].name;

			const scoreSpan = document.createElement('span');
			scoreSpan.classList.add('score');
			scoreSpan.textContent = array[i].score;

			listItem.appendChild(nameSpan);
			listItem.appendChild(scoreSpan);

			list.appendChild(listItem);
		}

		return list;
	}

	sort (array, direction='desc') {
		let sortedArray = array.sort(function (a, b) {
			if ( a.score < b.score ) {
				return -1;
			}
			if ( a.score > b.score ) {
				return 1;
			}
			return 0;
		});

		return (direction === 'asc') ? sortedArray : sortedArray.reverse();
	}
}

export default highscore;
	<!DOCTYPE html>
	<html>
	<head>
	<title>Highscore Demo</title>
	</head>
	<body>
	<script type="module">
	import highscore from './highscore.js'

	let points = new highscore('points', 14, 'desc'); /* keep up to 14 scores, under the storage name 'points', sorted in descending order */

	/* save a random entry */
	let randomName = Math.random().toString(36).substring(2, 15);
	let randomScore = Math.floor(Math.random()100)2;
	points.save(test, randomScore);

	/* load an array of 8 highscores, objects containing a 'name' and 'score' property */
	let scoreBoard = points.load(8);
	console.log(scoreBoard);

	/* return a HTML `ul` list element with a class named 'xxx', containing the 6 highest scores */
	let scoresListElement = points.list(6, 'xxx');
	document.querySelector('body').appendChild(scoresListElement);
	</script>
	</body>
	</html>
	class highscore {

	constructor (title, limit=10, direction='desc') {
	this.store = window.localStorage;
	this.title = (title) ? title : 'highscores';
	this.limit = limit;
	this.direction = (direction.toLowerCase() === 'desc') ? 'desc' : 'asc';

	let content = this.store.getItem(this.title);
	this.scores = [];
	if (content) {
	this.scores = JSON.parse(content);
	}
	}

	save (name, score) {
	let entry = {
	'name': name,
	'score': score
	}
	this.scores.push(entry);
	this.scores = this.sort(this.scores, this.direction);
	if (this.scores.length > this.limit) {
	this.scores = this.scores.slice(0, this.limit);
	}

	this.store.setItem(this.title, JSON.stringify(this.scores));
	}

	load (amount) {
	if (amount && amount > 0) {
	return this.scores.slice(0, amount);
	}

	return this.scores;
	}

	list (amount, className='') {
	let array = this.scores;
	if (amount && amount > 0) {
	array = array.slice(0, amount);
	}

	const list = document.createElement('ul');
	if (className.length > 0) {
	list.classList.add(className);
	}

	for (var i = 0; i < array.length; i++) {
	const listItem = document.createElement('li');

	const nameSpan = document.createElement('span');
	nameSpan.classList.add('name');
	nameSpan.textContent = array[i].name;

	const scoreSpan = document.createElement('span');
	scoreSpan.classList.add('score');
	scoreSpan.textContent = array[i].score;

	listItem.appendChild(nameSpan);
	listItem.appendChild(scoreSpan);

	list.appendChild(listItem);
	}

	return list;
	}

	sort (array, direction='desc') {
	let sortedArray = array.sort(function (a, b) {
	if ( a.score < b.score ) {
	return -1;
	}
	if ( a.score > b.score ) {
	return 1;
	}
	return 0;
	});

	return (direction === 'asc') ? sortedArray : sortedArray.reverse();
	}
	}

	export default highscore;