Ticket to Ride — Real‑time Multiplayer (TypeScript + React)

A portfolio-ready, real‑time multiplayer implementation inspired by Ticket to Ride. It features a TypeScript backend with Socket.IO for live gameplay and chat, and a React client that renders a dynamic, canvas-like board using Paper.js. Players can join rooms, chat, and play rounds with trains, tracks, cities, and game routines orchestrated on the server.

Disclaimer: Ticket to Ride is a trademark of Days of Wonder/Asmodee. This project is a fan-made, non-commercial portfolio piece intended for learning and demonstration.

---

Highlights

• Real‑time gameplay: Socket.IO powers low-latency events (rooms, turns, actions).
• Clear game model: Cities, tracks, lines, trains, deposits, and routines.
• Lobby + chat: Create/join rooms, live chat, room lifecycle.
• Rich visuals: Paper.js rendering, responsive canvas, and custom UI components.
• Separation of concerns: Game logic on backend; UI/graphics on client.
• Modern stack: TypeScript (server), React (client), Redux (example), Styled Components.

---

Tech Stack

• Backend: Node.js, Express, Socket.IO v2, TypeScript, ts-node-dev, uuid
• Client: React 16, React Router 5, Redux, Styled Components, Paper.js, socket.io-client v2
• Tooling: react-scripts 3.x, Testing Library for client tests

---

Repository Structure

backend/
  package.json
  tsconfig.json
  src/
    Logic/
      LogicMain.ts
      Chat/
        ChatManager.ts
        Message.ts
      Components/
        MapRelated/
          City.ts
          GameMap.ts
          GameMapInterfaces.ts
          Line.ts
          Track.ts
        TrainRelated/
          Deposit.ts
          Train.ts
      Costants/
        Constants.ts
      Enums/
        ColorSchemes.ts
        PaperPrefixes.ts
        Comunications/
          GameAction.ts
        Statuses/
          GameRoutineStatus.ts
          GameStatuses.ts
          MessageStatus.ts
          RoomStatuses.ts
          UsersStatuses.ts
      Game/
        Game.ts
        GameInerfaces.ts
        GameRoutine.md
        GameRoutine.ts
        GamesManager.ts
      PaperLink/
        PaperElement.ts
        SendFormat.json
      UserManagement/
        Room.ts
        User.ts
      Utils/
        Utilities.ts
    Server/
      ChatResponder.ts
      ChatServer.ts
      LogicServerBridge.ts
      server.ts
      SocketEvents.ts
      SocketInterfaces.ts
      types.ts

client/
  package.json
  public/
    index.html
  src/
    Graphics/ (Paper.js drawing + groups/objects)
    Logic/ (math + geometry helpers)
    Pages/ (Landing, Room, Game, Chat, End, Error)
    Redux/ (sample counter store)
    SocketHandler/ (Socket.IO client wiring)
    UI/ (components, contexts, command panel, visualizers)

---

Key Concepts

• Game domain:
  • City, Track, Line define the map schema and route claimables.
  • Train, Deposit manage player resources and movements.
  • Game, GamesManager, GameRoutine orchestrate game lifecycle, turns, and server-side invariants.
• Communication:
  • Socket.IO bridges client <-> server. See backend/src/Server/SocketEvents.ts and SocketInterfaces.ts.
  • Chat flow is handled under Logic/Chat and Server/Chat* modules.
• Rendering:
  • Paper.js powers vector-like drawing: cities, tracks, trains, overlays.
  • UI pages layer on top: lobby, in-game panels, visualizers.

---

Getting Started

Prerequisites

• Node.js 16.x LTS recommended (older dependencies; CRA uses --openssl-legacy-provider)
• npm 8+ (or yarn, if preferred)

1) Install and run the backend

cd backend
npm install
npm run dev

• Dev server compiles and runs src/Server/server.ts with live reload.
• The server logs the port it listens on at startup.

2) Install and run the client

Open a new terminal:

cd client
npm install
npm start

• Starts CRA dev server with NODE_OPTIONS=--openssl-legacy-provider.
• Open the printed local URL (usually http://localhost:3000).
• Ensure the backend is running and reachable from the client (same machine in dev).

---

Scripts Reference

Backend (/backend/package.json)

• npm run dev — Start server with ts-node-dev (hot reload).
• npm run dev-no-sync — Start server without file watching.
• npm run logic — Run LogicMain.ts for logic-only development.
• npm run prod — Compile TypeScript then run Node.js from dist/.

Client (/client/package.json)

• npm start — Start the React dev server.
• npm build — Production build.
• npm test — Run client tests (watch mode).
• npm run eject — Eject CRA (irreversible).

---

Development Notes

• Node version: The client scripts inject NODE_OPTIONS=--openssl-legacy-provider for OpenSSL compatibility with newer Node. If you see OpenSSL-related build errors, prefer Node 16.
• Socket.IO v2: Both server and client use v2.x. If upgrading to v4, plan for protocol changes.
• CORS: If accessing the backend from a different origin, adjust CORS in backend/src/Server/server.ts.
• Ports & URLs: The client typically connects to the same host/port or a configured endpoint in the Socket handler. Update as needed in client/src/SocketHandler/SocketHandler.js.

---

What to Explore

• backend/src/Game/GameRoutine.ts — Turn logic and state transitions.
• backend/src/Game/GamesManager.ts — Room/match lifecycle management.
• backend/src/Components/MapRelated/* — Map graph entities.
• client/src/Graphics/* — Paper.js drawing, object groups.
• client/src/Pages/GamePage/* — Game UI, command panels, train visualizers.
• client/src/SocketHandler/SocketHandler.js — Client-side Socket.IO wiring.

---

Roadmap Ideas

• Migrate Socket.IO to v4 and React to 18+.
• TypeScript on the client; shared types via a common package.
• Persistence (e.g., Postgres) and reconnect/resume support.
• Spectator mode and replays.
• A11y and mobile gestures improvements.

---

Screenshots / Demo

• Add gameplay screenshots and a short demo GIF here.
• Optional: link to a deployed demo (client) and any documentation posts.

---

License

• Backend package.json declares MIT. If publishing, include a root LICENSE file for clarity.

---

Maintainer

• Built and maintained by VicDem (portfolio project).