diff --git a/webclient/README.md b/webclient/README.md index 436ab4fad..f747efe2c 100644 --- a/webclient/README.md +++ b/webclient/README.md @@ -1,8 +1,53 @@ ## Application Architecture + ![Application Architecture](architecture.png?raw=true "Application Architecture") This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). +## Local Development with Docker + +To develop and test the webclient against a local Servatrice server: + +### Prerequisites + +- Docker and Docker Compose +- Node.js and npm + +### Setup Servatrice Server + +1. Navigate to the Cockatrice root directory +2. Start the Servatrice server with Docker: + ```bash + docker compose up -d + ``` +3. The server will be available at `ws://localhost:4748` +4. Set authentication to disabled in `servatrice/docker/servatrice-docker.ini` + ``` + [authentication] + method=none + ``` + +### Setup Webclient + +1. Navigate to the `webclient` directory +2. Install dependencies: + ```bash + npm install + ``` +3. Start the development server: + ```bash + npm start + ``` +4. Open [http://localhost:3000](http://localhost:3000) +5. The "Local Server" option should be available in the server list +6. Use any username to connect (no password required) + +### Troubleshooting + +- Ensure Docker container exposes port 4748: `docker ps` should show `0.0.0.0:4748->4748/tcp` +- Check Servatrice logs: `docker compose logs servatrice` +- Verify WebSocket connection in browser developer tools (Network tab) + ## Available Scripts In the project directory, you can run: @@ -48,26 +93,25 @@ To learn React, check out the [React documentation](https://reactjs.org/). ## To-Do List -1) RefreshGuard modal - - there is no browser support for displaying custom output to window.onbeforeunload - - we should also display a custom modal explaining why they shouldnt refresh or navigate from the site - - ideally, the custom popup can be synced with the alert, so when the alert is closed, the modal closes too +1. ✔️ RefreshGuard modal -2) Disable AutoScrollToBottom when the user has scrolled up - - when the user scrolls back to bottom, it should renable - - renable after a period of inactivity (3 minutes?) +2. Disable AutoScrollToBottom when the user has scrolled up -3) Figure out how to type components w/ RouteComponentProps - - Component> +- when the user scrolls back to bottom, it should renable +- renable after a period of inactivity (3 minutes?) -4) clear input onSubmit +3. Figure out how to type components w/ RouteComponentProps -5) figure out how to reflect server status changes in the ui +- Component> -6) Account page +4. clear input onSubmit -7) Register/Reset Password forms +5. figure out how to reflect server status changes in the ui -8) Message User +6. Account page -9) Main Nav scheme +7. Register/Reset Password forms + +8. Message User + +9. Main Nav scheme