Global leaderboard for flappy bird like HTML5 game

[ChaosSymmetry]

Question:
I need a global leaderboard for a flappy bird game. I have already tried repl db and writing to a text file with php, but neither worked. Can anyone help?


Repl link: https://replit.com/@ChaosSymmetry/BlockyBird?v=1

[MattDESTROYER]

What you have tried should work, however you must ensure that the Repl is hosted for either method to be persistent (and you have hosted your Repl).

Here’s an example with Replit’s official library @replit/database (this quickly gets a bit complex because it’s asynchronous, it could technically be synchronous within an async function, but asynchronous is probably better practice):

const Client = require("@replit/database");
const db = new Client();

function addScore(name, score) {
	db.set(name, score);
}

function getScores() {
	return new Promise(function(res, rej) {
		const scores = [];
		db.list()
			.then(function(keys) {
				const promises = [];
				for (let i = 0; i < keys.length; i++) {
					promises.push(
						db.get(keys[i])
							.then(function(value) {
								scores.push([keys[i], value]);
							})
					);
				}
				Promise.all(promises)
					.then(function() {
						res(scores.sort((a, b) => a[1] > b[1] ? -1 : 1));
					})
					// better safe than sorry
					.catch(function(err) {
						console.error("An unexpected error occurred:", err);
					});
			});
	});
}

// inside an async function
const scores = await getScores();
// scores is an array, with each element being an array
// where the first element is the name and the second
// element is the actual score

Gonna advertise my library for using the Replit DB here (since it is genuinely better in my opinion):

const db = require("ez-repldb");

function setScore(name, score) {
	db.set(name, score);
}

async function getScores() {
	const scores = db.getAll();
	const result = [];
	for (const name in scores) {
		result.push([name, scores[name]]);
	}
	return result.sort((a, b) => a[1] > b[1] ? -1 : 1));
}

// inside an async function
const scores = await getScores();
// scores is an array, with each element being an array
// where the first element is the name and the second
// element is the actual score

[ChaosSymmetry]

assuming this is server side js, how would i connect this to the client side? when the game ends i want to stick the score in the database, and i also want to have a link that goes to a leaderboard page. and when the user is playing, right under the score i want to display the #1 high score.

[UMARismyname]

template engines can be a convenient way of connecting front and backend

Using template engines with Express

[MattDESTROYER]

I notice you’re using Socket.IO in your Repl, you would use that (it’s faster than requests to an API, which is a valid alternative since this probably doesn’t really need to be real-time).

Using Socket.IO:

Server:

io.on("connection", function(socket) {
	socket.on("register score", function(data) {
		setScore(data.name, data.score);
	});
	socket.on("refresh leaderboard", async function() {
		socket.emit("leaderboard", await getScores());
	});
});

Client:

socket.on("connection", function() {
	socket.emit("refresh leaderboard");
});

socket.on("leaderboard", function(scores) {
	// do something with scores
});

// whatever ends the game
socket.emit("register score", score);

[ChaosSymmetry]

when the game ends, you are only providing a score variable, it looks like that may be a js object with name and score properties, if not, how would i pass name to that socket.emit.

[MattDESTROYER]

Whoops yep that’s an inconsistancy between examples on my part.

@MattDESTROYER

// whatever ends the game
socket.emit("register score", score);

Should be more like:

socket.emit("register score", {
	"name": name,
	"score": score
});