JS (+HTML) - how to save (leaderboard) data - for music jam!
ThomasS1 (48)

Hi everyone,

I'm making a game for the repl.it music jam, called Name That Tune. The code is here. I've made the game itself (although I need to add lots more tunes!), but I'm now looking for a way to have a leaderboard. I've made the leaderboard HTML itself (index.html lines 67-121) and the JS functions to put the data into the table (script.js lines 190-254), but I need a way to save the data itself.

I've tried various different approaches:

Using jsonstore.io

Jsonstore is a brilliant online data storage website, but as far as I can tell you need node.js to be able to interact with it. See TheDrone7's post about his node.js jsonstore extension. I don't know how to/if you can use node.js with an HTML/CSS/JS repl. I even tried using python, but calling the functions from JS proved an absolute pain. As I expected.

Other ways?

Are there ways to save data which can be changed in JS without using external things like jsonstore? I looked into json files and other stuff, but as you can probably tell, I'm a bit out of my depth. I'm a beginner with JS and thought the music jam would be a fun way to learn some more!

Thanks in advance for any help!

EDIT:

The music jam has now closed. I haven't yet found a solution to the leaderboard problem, but I've entered my game anyway without one. My entry is here. I dunno if you can upvote now the jam is closed (subtle hint :P), but maybe you want to check it out. Thanks to @vedprad1, @EthanJustice and @TheDrone7 for all their help so far; I'm not giving up yet don't worry - although the competition's over, I'll still do updates once the results are announced.

You are viewing a single comment. View All
TheDrone7 (560)

You can use the jsonstore API directly instead of using my library by using the fetch method. You can learn more about it here! And to learn about the jsonstore API, you can go here.

ThomasS1 (48)

@TheDrone7 I'm trying this out and all seems to be going well except...

From here, my old non-express/node repl which I've gone back to. script.js, lines 279-291

... I'm getting that error! Any ideas? It seems to me that jsonstore doesn't accept requests from replit :( Please reply quickly if you can, the competition closes tonight! Thanks

JustARatherRidi (191)

@ThomasS1 Using jsonstore from the client is how I'd do it as well, I think it might be the simplest way to go about this.

To solve the problem, try changing this line

body: {leaderboard: leaderboard}

to this

body: JSON.stringify({leaderboard: leaderboard})

Here's a demo repl you can compare your code with.

Hope this helped!

JustARatherRidi (191)

@ThomasS1 Sorry I couldn't reply on time :/

TheDrone7 (560)

@ThomasS1 I'm sorry as well, for some reason, I wasn't checking repl talk in the past few days.

ThomasS1 (48)

@JustARatherRidi @TheDrone7 don't worry, I've only been entering for fun really and the leaderboard doesn't really add much to the game itself. Also, @JustARatherRidi's suggestion worked :D so I should now be able to get the leaderboard up and running, even if not for the game jam. Thanks! Also, does anyone know if I can tick multiple replies as the answer? It's been a joint effort if you know what I mean. Thanks again for all your help!

TheDrone7 (560)

@ThomasS1 well, you can't exactly tick multiple answers, just tick the one that helped the most and upvote the other helpful ones.

JustARatherRidi (191)

@ThomasS1 Glad i could help! Cheers ^^