[TASK]: Refactor Multiplayer & Typing Logic

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.

Start by locating the multiplayer typing components, websocket server, result page, leaderboard, and history implementation described in the issue. Map the existing typing, progress, room, and sessionStorage flows before deciding on boundaries. Done means multiplayer works with rooms, shared logic is separated from rendering, result CPM cannot be changed after completion, and the requested results-page cleanup is complete.