a fun interactive chatroom

Make sure you have nodejs / npm installed. If not I recommend installing it through nvm https://github.com/nvm-sh/nvm#install--update-script

If you are programming on windows I highly recommend installing wsl 2 for a superior development experience https://docs.microsoft.com/en-us/windows/wsl/install-win10

We're developing using typescript. I highly recommend trying to define your variables/functions like typescript enforces. As a last resort use any or //@ts-ignore

For more typescript info: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

the app consists of a client and server

In each directory client and server run npm install

In the client directory run npm start

In the server directory run npm run start:dev

add your panel type where panel types are declared in client/src/types.tsx

panel items are rendered in the PanelItem component in Panel.tsx. Add your component to the switch statement

determine what happens when someone clicks the panel item through App.tsx's onClickPanelItem, once again add to the switch statement.

BottomPanel.tsx renders its content based off the panel item types previously declared, add to the switch statement renderPanelContent like before.

The bottom panel's open state is determined by App.tsx, specifically through the state variable selectedPanelItem. It should be set in onClickPanelItem, mimic the emoji panel.

We're using socket.io to communicate between server and clients. Add your message handling to the switch statement in App.tsx's onMessageEvent. You can add any properties you need to the type IMessageEvent

Send a message to the backend using socket.emit like

socket.emit("event", {
    key: "sound"
});

Server-side, add to the switch statement handleEvent in router.ts. send a message to everyone except the original sender using socket.broadcast.emit.

For more info on socket.io check https://socket.io/docs/v3/emit-cheatsheet/index.html

First, get the latest code by pulling while on the master branch, git pull origin master

Make your commits on a new branch. Checkout your branch with a name related to what changes you are making, like:

git checkout -b add-vr-panel-item

git checkout -b fix-font-size

Check your branch / branches with git branch

Switch between existing branches with git checkout branch-name

Add and commit all changes recursively from current directory:

git add .

git commit -m "i made these changes"

When ready for code review, push to github

git push origin my-branch-name

Make sure to pull to merge the latest code before pushing to avoid merge conflicts

git pull origin master while on your branch