Ask coding questions

← Back to all posts
JS (+HTML) - how to save (leaderboard) data - for music jam!
ThomasS1 (56)

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.

Answered by TheDrone7 (643) [earned 5 cycles]
View Answer
Commentshotnewtop
TheDrone7 (643)

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 (56)

@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 (643)

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

ThomasS1 (56)

@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 (643)

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

vedprad1 (815)

Well, you can't store data permanently on an HTML, CSS, JS repl, because that by itself is client side: Whatever is saved on that page only appears on that page, not on other pages, or on other computers.

It is easier to do this in Node.js, whicch is server side. It is actually very easy, and you don't even have to use jsonstore.io if you don't want to!

If this answers your question, please check the checkmark on the left side of this message. Thanks and Good Luck!

ThomasS1 (56)

@vedprad1 Thanks, that's really helpful! But I don't know how to use node.js on an HTML/CSS/JS repl... is it possible? Thanks again for replying so quickly!

EthanJustice (62)

@ThomasS1 Look into using Express in combination with Node.js

vedprad1 (815)

@ThomasS1 : You have to use a node.js repl. If you don't know node.js, I would recommend this tutorial:
https://www.w3schools.com/nodejs/default.asp

ThomasS1 (56)

@vedprad1 Thanks; I've read through and understood the 'Node.js Tutorial' bit, and I've now moved onto the 'Node.js MySQL' section, which I think is what I need for a database? I've tried running this code and, whatever user and password I give, I get an ECONNREFUSED error! Any ideas? Thanks so much for all the help so far!

vedprad1 (815)

@ThomasS1 : I don't think you can use mySQL in Node.js on repl.it. You should use alasql instead, like this:

const alasql = require('alasql');

alasql('CREATE DATABASE mydb');

Also, you need to start a server to save the values.

ThomasS1 (56)

@vedprad1 Hi, I've been reading through the alasql documentation and testing out various things - it's amazing! But I'm a bit confused as to how to set up a server, and get/save data from/to it...?

vedprad1 (815)

@ThomasS1 : The Express module is the easiest way to learn how to set up a server. I think this article could help you: https://www.tutorialsteacher.com/nodejs/expressjs-web-application

ThomasS1 (56)

@EthanJustice Sorry I didn't reply to your comment sooner; I was going to try express next, but it seems it is part of the same solution that @vedprad1 was suggesting. Thanks :) Going to look into it now.

vedprad1 (815)

@ThomasS1 : I would reccomend having the app show your game when it gets '/', and when your game finishes, it should submit a hidden form to show and put in the score.

TheDrone7 (643)

@ThomasS1 you can simply create an express repl instead of a node.js repl and create a new folder called public and then put your HTML js css code inside it for making it easier.

ThomasS1 (56)

@TheDrone7 Thanks that's much simpler. I've set up the database and created a few functions to add/get rows from it, but I'm now having trouble calling those functions from public/script.js. The code is here.
At the moment I'm getting this error...

...when I load the page (that's the Safari console btw). Any ideas? Thanks

EDIT: now given up on this :( moved onto @TheDrone7 's separate reply, see below...

CaptainAnon (52)

You could use google firebase cloud functions combined with the firebase firestore.
https://firebase.google.com

katyadee (1157)

Hey! Do you feel like @vedprad1 answered your question? Happy to amplify this on social :)

ThomasS1 (56)

@katyadee Wow thanks, that would be great, but perhaps wait until I know if the alasql thing works. I've been kinda busy but I'll do some more testing tomorrow (UK time). I'll reply again if it doesn't. Thanks! :D