This content originally appeared on DEV Community and was authored by Muedgar
Introduction
I want to explain how I built, this program, but before I begin I want to give credit to the javascript game logic where I followed a tutorial from freecodecamp youtube channel. Other than that I came up with the rest.
The Leaderboard table is visible only after you win at least once, but in this program winning only takes choosing three colors.
More on understanding simon game: Simon Wiki
I deployed the live program here: Live program
The User Interface: I built it using html and css
I stacked a div on top of 4 other divs, the four divs are the colors, and the white div in the picture has position absolute, top and left properties that places it in center.
I used border-bottom-right-radius, border-bottom-left-radius,
border-top-right-radius, border-top-left-radius to create curves on these four divs.
I added table css later, it is actually the last thing I did because I wanted to focus on the simon game itself more.
Game Logic:
I followed a youtube tutorial from freecodecamp to understand how to implement simon game logic using javascript, later I copied the javascript code from the tutorial and pasted it in my project, and I changed the query selectors to match my html elements's query selectors. After that I run the app in the browser and it was working.
The back end: Overall program logic
This is where I implemented the overall program logic, I used node.js and express.js to serve the static files that I had prepared containing the game, after this, the game was running again, but it was being served from the express server.
At this point, I installed all the modules I was going to need for the next part, which are mongoose and socket.io.
I created a folder called 'src' and in it I created to files, 'createupdateread.js','user.js' then inside the later file I created a schema to store {name, points}, then inside the former file I wrote all necessary crud operations I was going to need to deal with user file.
I checked if the files are working as a expected by setting up routes, then postman accessed the endpoints that helped me to verify that all functions are working correctly.
At this point, I wanted to keep user {name, points} after they win the game which is 40 points per win.
I integrated the backend, frontend. It was working well.
I wanted to display the list of {name,points} in table, but because I wanted all users connected to program to see changes instantly, this is where I decided to implement socket.io.
After updating the table in one user interface I programmed the game to broadcast a message 'updateYourTable' to all connected users. On receiving this message I added a call to 'updateTable' function.
After all this I run the app in the browser multiple tabs, I was working.
Finally I deployed the program to heroku.
This content originally appeared on DEV Community and was authored by Muedgar
Muedgar | Sciencx (2022-07-10T17:55:45+00:00) Simon game with socket.io leaderboard table. Retrieved from https://www.scien.cx/2022/07/10/simon-game-with-socket-io-leaderboard-table/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.