pushkarsingh019 / career-crowding-simulation

A real-time simulation that helps exposes how imitation and prestige affect our choices.

Career Crowding

A real-time simulation which uses the idea of mimetic theory to explain how prestige and imitation influence our career choices.

Playing the Game

To play this game, you can head to simulation.stoicpushkar.com and either conduct the game or play it.

While this game is primarily made for careers, you can also customise it based on your domain. For more information, read How to customise the simulation.

Tech Stack and Usage

This app is bundled together with create-react-app with the nodejs backend. I have also used technologoes like socketio to make the app real-time.

Here's how to run this app on your local system in three steps.

• Clone the frontend and the backend.
• install the dependencies.
• run npm start.

Clone the repositories

git clone https://github.com/pushkarsingh019/simulation-frontend.git and git clone https://github.com/pushkarsingh019/simulation-backend.git

Install the dependencies

On both the folders, run npm install

run start command

For the client folder, run npm start and for the backend folder node app.js

Features

In this simulation, you can wither conduct the game or play it.

Conductors can create a new room, share the room link, start and stop a round and also end the simulation. The Players will recieve the game link after which they can play the game real-time with other players in the room. After each round they can check the stats on their last performance and optimise to win the game.

Please Enjoy, ~ Pushkar Singh

career-crowding-simulation's Issues

Issues with the Chart branch

There are some issues in the chart branch.

• First, the chart page is continuously being re-rendered.
• Second, there are some bugs in the choosing of the options thing.

Issue 1

The chart page is being re-rendered again and again

We are using a useEffect hook in the chartScreen component to get the number of rounds of which we can display the charts. This is causing to re-render the chart page again and again.

**The problem can be solved by : ** we need to add some infrastructure changes, as to how the data is fetched and the number of rounds is displayed.

Issue 2

Bugs in the socket

There are some bugs when choosing the options, it sometime goes to -1 and sometimes makes no changes only. Need to figure out what exactly is happening here.

Issue with multiple socket-io rooms

With the current infrastructure, messages are only displayed to the connected clients in that room and also the data is stored separately, but one issue that we have not been able to solve is managing the round status.

Even if one admin, starts the round, the round starts for all the connected clients. This has to be a socket-io issue and we would need to look into this.

Insufficient resources

There is a big related to websockets which says that insufficient resources and it is resolved when I refresh the page.

So right look like some client state bug, does not come always, but it sometimes happens.

Debrief for everyone

Someone the debrief for everyone works in development, but not in production.

The issue is that whenever the simulation is ended, everyone should be directed onto the end screen, which currently does not happen.

add videos as embed

Right now the videos are as files in the folder, we need to have them as embeds

Debref for everyobe

When the simulation ends only the admins see the end screen, everyone should see it.

Vercel env variables not working

Even if I add the environment variables, they are not woking and currently the app is not in production, so we have to fix this

The app is not mobile responsive

We need to make the ui mobile responsive.

Ending simulation should not clear all data

storeData and storeAdminData does not work as intended.

The Issue

I am using two variables, storeData and storeAdminData which is used to either store the playerData or the adminData in the global state.

The working is simple, when you enter the GameExplanation screen, you get to see a customised screen based on your role. So if you are an admin, you get to see a form to create a game. If you are a player you get to see a form to play the game.

The issue is, when you submit this form, the expected behaviour is that the data is passed through the props to the global state. To check is this is happening, I have added a console.log onto the main reducer which prints the updated userData or adminData.

The expectation is that the latest data should be printed, but the last data is being printed, so when I submit the form twice, then only I can see the data just entered.

Admins can see admin on their navbar

Loading state for choice changes

When people change their choices, there sometimes can be a lag, which is really confusing, maybe we can add a loading state which shows that the data is being loaded right now.