In Memory of KiXSTAr, a pillar of the Rainbow Six Siege Community.

R6CC: Rainbow Six Siege Callout Companion

About R6CC

R6CC is dedicated to the memory of KiXSTAr, a pivotal figure in the Rainbow Six Siege Community. Thank you for every thing you have done for Siege and the esports community, your legacy will never die. This project serves as a tribute to his contributions and aims to enhance the gameplay experience for players of Rainbow Six Siege. By providing an intuitive platform for viewing and editing map callouts, R6CC helps players strategize and communicate more effectively during matches.

How It Works

R6CC allows users to interact with Rainbow Six Siege maps in two main ways:

• Viewer Mode: Users can view detailed maps, complete with callouts, allowing for better strategic planning and team communication. The viewer mode is optimized for performance, ensuring that map details are presented clearly and load efficiently.

• Editor Mode: Users can edit or add new callouts to maps, customizing their strategic planning tools. This mode offers features like grid snapping and polygon transformations for precise callout placements.

Core Features

• Interactive map viewing with detailed callouts
• Custom callout editing and creation
• Undo and redo functionality for callout adjustments
• Grid snapping for precise callout placement
• Responsive design that adapts to screen size changes

What It Uses

R6CC is built using a robust stack of technologies and libraries:

• Frontend:

  • React for UI components
  • Redux for state management, integrated with React Redux
  • Ant Design and Semantic UI for UI elements and styling
  • Konva for canvas-based rendering
  • Firebase for backend services, including authentication and database storage
  • Immutable.js to ensure Redux state immutability

• Development Tools:

  • TypeScript for type-safe code development
  • ESLint and Prettier for code linting and formatting
  • Webpack for module bundling
  • Jest for unit testing

Screenshots

Maps Page

Editor

Viewer

Installation and Setup

1. Clone the repository to your local machine.
2. Install the dependencies with npm install.
3. Set up a Firebase project and configure the .env file with your Firebase project details.
4. Start the development server with npm start.