Skip to content
Sign upLog in

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

Profile icon
ThomasS1

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
Profile icon
TheDrone7

You can use the jsonstore API directly instead of using my library by using the fetch method. You can learn more about it [here] (https://developers.google.com/web/updates/2015/03/introduction-to-fetch)! And to learn about the jsonstore API, you can go here.

Profile icon
ThomasS1

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

image

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

Profile icon
JustARatherRidi

@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!

Profile icon
JustARatherRidi

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

Profile icon
TheDrone7

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

Profile icon
ThomasS1

@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!

Profile icon
TheDrone7

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

Profile icon
ThomasS1

@TheDrone7
Sure, will do :)

Profile icon
JustARatherRidi

@ThomasS1
Glad i could help! Cheers ^^