JS (+HTML) - how to save (leaderboard) data - for music jam!
h
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
Answered by TheDrone7 (547) [earned 5 cycles]
View Answer
vedprad1 (694)

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

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

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

vedprad1 (694)

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

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

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

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

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

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

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

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

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