added leaderboard (closes #29)

src/js/popup.js

@@ -17,6 +17,7 @@ const objToDom=obj => {
 		return ul;
 	} else {
 		let table=document.createElement('table');
+		table.classList.add('dual');
 		Object
 			.keys(obj)
 			.forEach(key => {
@@ -34,6 +35,7 @@ class Popup {
 		this.content=content.map(objToDom);
 		this.buttons={...buttons};
 		this.large=large;
+		this.animation=true;
 	}
 
 	addContent(cnt) {
@@ -53,6 +55,25 @@ class Popup {
 		hn.innerText=cnt;
 		this.content.push(hn);
 	}
+	addTable(data, heading=Object.keys(data)) {
+		let table=document.createElement('table');
+		table.classList.add('table');
+		let thead=table.appendChild(document.createElement('thead'));
+		let headingRow=thead.appendChild(document.createElement('tr'));
+		heading.forEach(key => {
+			let th=headingRow.appendChild(document.createElement('th'));
+			th.innerText=key;
+		});
+		let tbody=table.appendChild(document.createElement('tbody'));
+		data.forEach(row => {
+			let tr=tbody.appendChild(document.createElement('tr'));
+			heading.forEach(key => {
+				let td=tr.appendChild(document.createElement('td'));
+				td.innerText=row[key];
+			});
+		});
+		this.content.push(table);
+	}
 
 	async display(parent=document.body) {
 		let outer=document.createElement('div');
@@ -60,6 +81,7 @@ class Popup {
 		let popup=outer.appendChild(document.createElement('div'));
 		popup.classList.add('content');
 		if(this.large) popup.classList.add('large');
+		if(this.animation) outer.classList.add('animation');
 
 		let title=popup.appendChild(document.createElement('h1'));
 		title.innerText=this.title;