[TASK]: Refactor Multiplayer & Typing Logic

[Ragudos]

Task Summary

Since we have multiplayer, it will be better if we reuse the logic for:

• Typing
• Errors in Typing
• Row Line Tracker
• Progress Tracker

Also, it will be nice if we can clean up the code a bit. By separating the logic from the component that renders stuff, it will be nice. Use useReducer as well for a component that uses a lot of state. Usage of proper practices in React (to avoid unnecessary recalculation of stuff) with useMemo useCallback and memo.

In Multiplayer, refactor the websocket server to be clear about the responsibilites of each function as much as possible. Separate a layer for memory (storing temporary data for matching userIDs, etc.).

Also, for result page, to avoid the bug of typing in the resultID or something after finishing will cause an increase in CPM (If I'm remembering the bug properly), we can change the result page to not take any of those and instead only base from the sessionStorage (which is convenient for both logged in users and anonymous users). Of course, user data will still be saved if a user is logged in.

Make the multiplayer functional, for now, I think rooms will be preferable. It's not neccesary to add database calls yet, we can incorporate that after making sure that the structure for the multiplayer is sturdy.

Remove the topten from the results page and instead put it in the leaderboard (can be a feature), and remove history since it's not displaying anything.

All this is for a PR that I will be doing.