LeaderBoard Feature

[SaeedNMosleh]

Hi Riley,

I thought about adding the leaderboard feature. I think we need to change the logic of the game and current features to have the leaderboard.

Please correct me if I'm wrong, here is my understanding of the current logic :

• User can select different time periods (15, 30, 60 seconds).
• User will try to complete a code block within the selected time period
• In case of success/failure: win/loss counters will be incremented
• Score can be reset by user

These features make a nice game plan with a consistent user experience.
I'm not sure how we can calculate the high score for the leaderboard. Do you have any idea?

I think we may need to change the game plan to be capable of supporting the leaderboard in a consistent way. We may consider proposing new code blocks within a specific time and calculate the final score based on correct keystrokes and if the score is in the top 10 , ask the user to enter a name to register the score.

There would be some challenges in implementation but first It would be great if we clear the game plan. could you please comment and share your ideas?
It would be a strategic decision for you as repository owner since we may need to remove some of the existing features. if you prefer we can switch to work on other items while keeping existing features.

[rbrickmn]

Hello Saeed, I hope you are having a great holiday season. Your understanding of the current logic is correct! I think that the high score could easily be calculated by a current amount of wins in a row, but that is a more simple idea. Another idea would be to have a score that adds up with each win. The points added to your current score would be based on a multiplier. The multiplier is tied to the timer you have set (1x points for 60 seconds, 1.2x for 30, 2x for 15 seconds, etc). These multiplier values can be altered of course, that was just an example value. If the user resets their score in settings, they will also reset their overall score to 0, removing their place on the leaderboard. These are just a few starter ideas on how we could go about this.

[SaeedNMosleh]

Thanks. I hope you had a nice holiday, too. As you said, the score can be calculated in multiple ways. We can implement it using the proposed simple idea and change the calculation later. Or any other change that can enhance the engagement of players.

I think the feature in the simple way can be summarized like this :

• Trigger to check the score: a failure
• Score: Amount of wins in a row
• Check if the score is in the high 10 (or any other number) scores in the list
• If Yes: inform the user and ask for a name to register the name.

It seems for storing the scores, there are a couple of options :

• Using a service like Google Firebase (Backend as Service)
• Deploy a tiny API in express.js in Vercel and store the data in a JSON file
• Deploy an API and use a DB like Mongo DB.

The last option is overcomplicated for such an application! Personally, I like the second option as there would not be any dependency on an external service like Firebsae.

If you agree, I can work on a tiny API with two endpoints for loading and saving the list. I can share the express.js code with you and it can be deployed separately in Vercel. Then we can call the API for save/load the list.

[rbrickmn]

I like this idea! I'm on board with it. Let's see where it goes!

[SaeedNMosleh]

The APIs (in a very simple form) are ready. I thought to break down the required tasks and update here about the progress.
The APIs are created by Express.js and deployed in Vercel. Vercel is a serverless platform, so the only option for now is to keep the list in an array.
The important point is that this method is not stable at all, and after the server restart and re-deployment, all data will be lost! But it looks like a good starting point.

Back-end address is : https://syntaxsprint-backend.vercel.app/
End points :

1. /getleaderboard -> Get the list
2. /saveleaderboard -> Save the list

The code is very simple and you can check it here: https://github.com/SaeedNMosleh/syntaxsprint-backend
This tutorial from vercel is quite straight forward on how to deploy an Express.js based app on vercel : https://vercel.com/guides/using-express-with-vercel
I suggest you clone the backend repo and try to deploy it in Vercel. It's better to have a single owner for back end and front-end.
I tested the API endpoints by this code :
https://gist.github.com/SaeedNMosleh/fa7d2c43df3273c1e7486610ce6f3ac1

Feel free to comment if something is not clear or improvement is needed.

I propose the below path for the first release of the Leader Board Feature :

• Create a React Component for the feature using the API
• Adding an encoding mechanism to make the APIs more secure for example by JWT https://www.npmjs.com/package/jsonwebtoken
• Adding a DB (like MongoDB) and storing information in a stable way.

I will keep working on these items and hopefully submit the PR for the Leaderboard component soon :)

[SaeedNMosleh]

I finally submitted my PR for the leaderboard feature. I understand if you reject the PR since it's not a good solution but I wanted to keep my promise :)

Few notes :

• Back end technically can be merged with the front end in the current repo but it's beyond my experience and skills. I have not done it before.
• I could not find any other options other than services like Firebase or cloud-based databases like MongoDB to save the data in a stable manner.
• I have a little experience with MongoDB, it has multiple steps but it's quite straightforward. I tried to avoid it because it's
  a bit excessive for a tiny file but it seems there is no other option.

If you agree I can work on adding MongoDB and complete the backend.

[rbrickmn]

Hi Saeed! I'm so sorry about these late replies, life's been busy but nonetheless development continues! I'm super grateful for your contributions and I love your leaderboard feature so far :) the work is excellent! I agree on MongoDB. I've never used it myself since I'm a frontend guy 😆

[SaeedNMosleh]

Hi Riley,
No problem at all, I really appreciate your kind words!
I'm currently working on a MongoDB-based solution to ensure stable and secure communication with our tiny DB.
Hopefully, I’ll be able to submit the PR soon—probably next weekend. After that, we can discuss the next feature. :)

[SaeedNMosleh]

Hi Riley,

Sorry for late update. I finally added mongoDB to the backend and now the leader board feature is working consistently without losing any data.
You can check the details in code: https://github.com/SaeedNMosleh/syntaxsprint-backend
I used Mongoose to manage the connection.
Please check if there is any issue from the frontend side or not. Then we can close this issue :)