### Install Dependencies using Batch Script

Source: https://github.com/clauadv/cs2_webradar/blob/main/readme.md

This command installs the necessary project dependencies using npm. It assumes Node.js and npm are installed on the system. This is the initial step before starting the web application.

```batch
install.bat
```

--------------------------------

### Start Web Application using Batch Script

Source: https://github.com/clauadv/cs2_webradar/blob/main/readme.md

This command starts the web application server. It is typically run after all dependencies have been installed. Access the web app via localhost on the specified port.

```batch
start.bat
```

--------------------------------

### C++ Memory Reader Initialization and WebSocket Connection

Source: https://context7.com/clauadv/cs2_webradar/llms.txt

Handles the initialization sequence for the C++ usermode application, including game version validation, configuration loading, and setting up essential subsystems like exception handling and memory pattern scanning. It establishes a WebSocket client connection to the relay server and enters a loop to read and send game data periodically.

```cpp
// usermode/src/dllmain.cpp - Main initialization sequence
bool main()
{
    // Validate game version compatibility
    if (!utils::is_updated())
        return {};

    // Load configuration (localhost/public IP settings)
    config_data_t config_data = {};
    if (!cfg::setup(config_data))
        return {};

    // Initialize exception handler
    if (!exc::setup())
        return {};

    // Initialize memory pattern scanner
    if (!m_memory->setup())
        return {};

    // Initialize game interfaces (entity system, global vars)
    if (!i::setup())
        return {};

    // Initialize schema system for entity field offsets
    if (!schema::setup())
        return {};

    // Initialize Winsock for WebSocket client
    WSADATA wsa_data = {};
    if (WSAStartup(MAKEWORD(2, 2), &wsa_data) != 0)
        return {};

    // Determine IP address (auto-detect or use config)
    const auto ipv4_address = utils::get_ipv4_address(config_data);
    const auto formatted_address = std::format("ws://{}:22006/cs2_webradar", ipv4_address);

    // Connect to WebSocket server
    static auto web_socket = easywsclient::WebSocket::from_url(formatted_address);
    if (!web_socket) {
        LOG_ERROR("failed to connect to the web socket ('%s')", formatted_address.c_str());
        return {};
    }

    // Main game loop - read and send data every 100ms
    auto start = std::chrono::system_clock::now();
    for (;;)
    {
        const auto now = std::chrono::system_clock::now();
        if (now - start >= std::chrono::milliseconds(100)) {
            start = now;

            sdk::update();  // Update local player reference
            f::run();       // Collect all game data

            web_socket->send(f::m_data.dump());  // Send JSON to server
        }

        web_socket->poll();
        std::this_thread::sleep_for(std::chrono::milliseconds(1));
    }

    return true;
}
```

--------------------------------

### Build Solution in Visual Studio

Source: https://github.com/clauadv/cs2_webradar/blob/main/readme.md

This instruction details how to build the 'usermode' project using Visual Studio IDE. Building the solution compiles the C++ code necessary for the radar cheat to function.

```csharp
Build Solution
Ctrl + Shift + B
```

--------------------------------

### C++ Configuration Structure for Network Settings

Source: https://context7.com/clauadv/cs2_webradar/llms.txt

This C++ header defines a structure for configuration data, specifically managing network settings like localhost usage and IP addresses. It utilizes the nlohmann/json library for serialization and deserialization, enabling easy configuration management.

```cpp
// usermode/src/utils/config.hpp - Configuration structure
struct config_data_t
{
    bool m_use_localhost;
    std::string m_local_ip;
    std::string m_public_ip;

    NLOHMANN_DEFINE_TYPE_INTRUSIVE(config_data_t, m_use_localhost, m_local_ip, m_public_ip)
};

namespace cfg
{
    bool setup(config_data_t& config_data);
}

```

--------------------------------

### Configure Localhost Usage in JSON

Source: https://github.com/clauadv/cs2_webradar/blob/main/readme.md

This configuration setting in `config.json` determines whether the application runs strictly on localhost. Setting `m_use_localhost` to `false` enables external access, which is required for sharing the radar.

```json
"m_use_localhost": false
```

--------------------------------

### React App: WebSocket Connection and State Management

Source: https://context7.com/clauadv/cs2_webradar/llms.txt

The main React application component establishes a WebSocket connection to receive game data. It manages application state, including player information, map data, and bomb status, updating the UI in real-time. It handles fetching map-specific configuration and background images.

```jsx
// webapp/src/app.jsx - Main React application
import { useEffect, useState } from "react";
import PlayerCard from "./components/PlayerCard";
import Radar from "./components/Radar";

const CONNECTION_TIMEOUT = 5000;
const USE_LOCALHOST = 0;
const PUBLIC_IP = "your ip goes here".trim();
const PORT = 22006;

const App = () => {
  const [averageLatency, setAverageLatency] = useState(0);
  const [playerArray, setPlayerArray] = useState([]);
  const [mapData, setMapData] = useState();
  const [localTeam, setLocalTeam] = useState();
  const [bombData, setBombData] = useState();
  const [settings, setSettings] = useState(loadSettings());

  useEffect(() => {
    const fetchData = async () => {
      let webSocket = null;
      let webSocketURL = null;

      const EFFECTIVE_IP = USE_LOCALHOST ? "localhost" : PUBLIC_IP;
      webSocketURL = `ws://${EFFECTIVE_IP}:${PORT}/cs2_webradar`;
      webSocket = new WebSocket(webSocketURL);

      webSocket.onopen = async () => {
        console.info("connected to the web socket");
      };

      webSocket.onmessage = async (event) => {
        setAverageLatency(getLatency());

        const parsedData = JSON.parse(await event.data.text());
        setPlayerArray(parsedData.m_players);
        setLocalTeam(parsedData.m_local_team);
        setBombData(parsedData.m_bomb);

        const map = parsedData.m_map;
        if (map !== "invalid") {
          setMapData({
            ...(await (await fetch(`data/${map}/data.json`)).json()),
            name: map,
          });
          document.body.style.backgroundImage = `url(./data/${map}/background.png)`
        }
      };

      webSocket.onerror = async (error) => {
        console.error(error);
      };
    };

    fetchData();
  }, []);

  return (
    <div className="w-screen h-screen flex flex-col">
      <div className="flex items-center justify-evenly">
        <ul id="terrorist" className="flex flex-col">
          {playerArray
            .filter((player) => player.m_team == 2)
            .map((player) => (
              <PlayerCard key={player.m_idx} playerData={player} />
            ))}
        </ul>

        {playerArray.length > 0 && mapData && (
          <Radar
            playerArray={playerArray}
            radarImage={`./data/${mapData.name}/radar.png`}
            mapData={mapData}
            localTeam={localTeam}
            bombData={bombData}
            settings={settings}
          />
        )}

        <ul id="counterTerrorist" className="flex flex-col">
          {playerArray
            .filter((player) => player.m_team == 3)
            .map((player) => (
              <PlayerCard key={player.m_idx} playerData={player} />
            ))}
        </ul>
      </div>
    </div>
  );
};

export default App;

```

--------------------------------

### Parse Player Weapons in C++

Source: https://context7.com/clauadv/cs2_webradar/llms.txt

Parses a player's weapon inventory, categorizing weapons into primary, secondary, melee, and utility. It accesses weapon data through player pawn services and iterates through owned weapons. Dependencies include game-specific entity structures and data accessors.

```cpp
void f::players::get_weapons(c_cs_player_pawn* player_pawn)
{
    const auto weapon_services = player_pawn->m_pWeaponServices();
    if (!weapon_services)
        return;

    const auto my_weapons = weapon_services->m_hMyWeapons();
    if (!my_weapons.m_size)
        return;

    std::set<std::string> utilities_set{};
    std::set<std::string> melee_set{};

    for (size_t idx{ 0 }; idx < my_weapons.m_size; idx++)
    {
        const auto weapon = my_weapons.m_elements->get(idx);
        if (!weapon)
            continue;

        const auto weapon_data = weapon->m_WeaponData();
        if (!weapon_data)
            continue;

        auto weapon_name = weapon_data->m_szName();
        if (weapon_name.empty())
            continue;

        weapon_name.erase(weapon_name.begin(), weapon_name.begin() + 7);  // Remove "weapon_" prefix

        const auto weapon_type = weapon_data->m_WeaponType();
        switch (weapon_type)
        {
            case e_weapon_type::submachinegun:
            case e_weapon_type::rifle:
            case e_weapon_type::shotgun:
            case e_weapon_type::sniper_rifle:
            case e_weapon_type::machinegun:
                m_player_data["m_weapons"]["m_primary"] = weapon_name;
                break;

            case e_weapon_type::pistol:
                m_player_data["m_weapons"]["m_secondary"] = weapon_name;
                break;

            case e_weapon_type::knife:
            case e_weapon_type::taser:
                melee_set.insert(weapon_name);
                break;

            case e_weapon_type::grenade:
                utilities_set.insert(weapon_name);
                break;
        }
    }

    m_player_data["m_weapons"]["m_melee"] = std::vector<std::string>(melee_set.begin(), melee_set.end());
    m_player_data["m_weapons"]["m_utilities"] = std::vector<std::string>(utilities_set.begin(), utilities_set.end());
}
```

--------------------------------

### WebSocket Server for Real-time Data Relay

Source: https://context7.com/clauadv/cs2_webradar/llms.txt

Implements a WebSocket server using Node.js to relay game data from the C++ memory reader to multiple browser clients. It listens on a specified port and broadcasts incoming messages to all connected clients. This component is crucial for enabling real-time updates on the web interface.

```javascript
import { WebSocketServer } from "ws";
import http from "http";

const port = 22006;
const server = http.createServer();
const web_socket_server = new WebSocketServer({
    server: server,
    path: "/cs2_webradar"
});

web_socket_server.on("connection", (web_socket, request) => {
    const client_address = request.socket.remoteAddress.replace("::ffff:", "");
    console.info(`${client_address} connected`);

    web_socket.on("message", (message) => {
        // Broadcast to all connected clients
        web_socket_server.clients.forEach((client) => {
            client.send(message);
        });
    });

    web_socket.on("close", () => {
        console.info(`${client_address} disconnected`);
    });
});

server.listen(port);
console.info(`listening on port '${port}'`);
```

--------------------------------

### JSON Map Configuration for Coordinate Transformation

Source: https://context7.com/clauadv/cs2_webradar/llms.txt

Map-specific JSON files define essential data for rendering player positions accurately on the radar. These files contain coordinate offsets (x, y) and scale factors that are used to transform game coordinates into screen coordinates, accounting for map-specific layouts.

```json
// webapp/public/data/de_dust2/data.json - Map configuration
{
    "x": -2476,
    "y": 3239,
    "scale": 4.4
}

```

--------------------------------

### Extract Player and Bomb Info - C++

Source: https://context7.com/clauadv/cs2_webradar/llms.txt

Iterates through game entities to extract player and bomb information. It identifies 'CCSPlayerController' for player data and 'C_C4'/'C_PlantedC4' for bomb data. Dependencies include 'nlohmann::json' for data structuring and 'fnv1a' for hashing class names. Outputs are stored in a JSON object.

```cpp
// usermode/src/features/features.cpp - Entity enumeration
void f::get_player_info()
{
    m_data["m_players"] = nlohmann::json::array();

    const auto highest_idx = 1024;
    for (int32_t idx = 0; idx < highest_idx; idx++)
    {
        const auto entity = i::m_game_entity_system->get(idx);
        if (!entity)
            continue;

        const auto entity_handle = entity->get_ref_e_handle();
        if (!entity_handle.is_valid())
            continue;

        const auto class_name = entity->get_schema_class_name();
        if (class_name.empty())
            continue;

        const auto hashed_class_name = fnv1a::hash(class_name);

        // Handle player entities
        if (hashed_class_name == fnv1a::hash("CCSPlayerController"))
        {
            const auto player = i::m_game_entity_system->get<c_cs_player_controller*>(entity_handle);
            if (!player)
                continue;

            const auto player_pawn = player->get_player_pawn();
            if (!player_pawn)
                continue;

            if (!f::players::get_data(idx, player, player_pawn))
                continue;

            f::players::get_weapons(player_pawn);
            f::players::get_active_weapon(player_pawn);

            m_data["m_players"].push_back(m_player_data);
        }
        // Handle bomb entities
        else if (hashed_class_name == fnv1a::hash("C_C4"))
        {
            const auto bomb = entity;
            f::bomb::get_carried_bomb(bomb);
        }
        else if (hashed_class_name == fnv1a::hash("C_PlantedC4"))
        {
            const auto planted_c4 = reinterpret_cast<c_planted_c4*>(entity);
            f::bomb::get_planted_bomb(planted_c4);
        }
    }
}

```

--------------------------------

### Configuration: Enable Remote Access in C++

Source: https://github.com/clauadv/cs2_webradar/blob/main/readme-CN.md

Modifies the C++ source code to disable localhost access, enabling remote sharing of the radar. This involves changing a preprocessor define statement.

```cpp
#define USE_LOCALHOST 0
```

--------------------------------

### Collect Player State Data - C++

Source: https://context7.com/clauadv/cs2_webradar/llms.txt

Collects comprehensive player state data, including position, health, team, weapons, and equipment. It uses pointers to 'c_cs_player_controller' and 'c_cs_player_pawn' to access player attributes. The function returns a boolean indicating success and populates a data structure with player information.

```cpp
// usermode/src/features/players/players.cpp - Player data extraction
bool f::players::get_data(int32_t idx, c_cs_player_controller* player, c_cs_player_pawn* player_pawn)
{
    const auto health = player_pawn->m_iHealth();
    const auto is_dead = health <= 0;
    const auto vec_origin = player->get_vec_origin();
    const auto team = player->m_iTeamNum();

    m_player_data["m_idx"] = idx;
    m_player_data["m_name"] = player->m_sSanitizedPlayerName();
    m_player_data["m_color"] = player->get_color();
    m_player_data["m_team"] = team;
    m_player_data["m_health"] = health;
    m_player_data["m_is_dead"] = is_dead;
    m_player_data["m_model_name"] = player_pawn->get_model_name();
    m_player_data["m_steam_id"] = std::to_string(player->m_steamID());
    m_player_data["m_money"] = player->m_pInGameMoneyServices()->m_iAccount();
    m_player_data["m_armor"] = player_pawn->m_ArmorValue();
    m_player_data["m_position"]["x"] = vec_origin.m_x;
    m_player_data["m_position"]["y"] = vec_origin.m_y;
    m_player_data["m_eye_angle"] = player_pawn->m_angEyeAngles().m_y;
    m_player_data["m_has_helmet"] = player_pawn->m_pItemServices()->m_bHasHelmet();
    m_player_data["m_has_defuser"] = player_pawn->m_pItemServices()->m_bHasDefuser();
    m_player_data["m_weapons"] = nlohmann::json{};

    if (team == e_team::t && !is_dead)
        m_player_data["m_has_bomb"] = m_bomb_idx == (player->m_hPawn().get_entry_idx() & 0xffff);

    return true;
}

```

--------------------------------

### Track Bomb State in C++

Source: https://context7.com/clauadv/cs2_webradar/llms.txt

Tracks the state of C4 bombs, including carried and planted bombs. For carried bombs, it records the owner's index. For planted bombs, it captures position, detonation timer, defuse status, and defuse timer. Requires access to game state and entity data.

```cpp
void f::bomb::get_carried_bomb(c_base_entity* bomb)
{
    m_bomb_idx = reinterpret_cast<uintptr_t>(bomb->m_hOwnerEntity()) & 0xffff;

    const auto scene_origin = bomb->get_scene_origin();
    if (scene_origin.is_zero())
        return;

    m_data["m_bomb"]["x"] = scene_origin.m_x;
    m_data["m_bomb"]["y"] = scene_origin.m_y;
}

void f::bomb::get_planted_bomb(c_planted_c4* planted_c4)
{
    if (!planted_c4->m_bBombTicking())
        return;

    const auto curtime = i::m_global_vars->m_curtime();

    const auto blow_time = (planted_c4->m_flC4Blow() - curtime);
    if (blow_time <= 0.f)
        return;

    const auto vec_origin = planted_c4->m_pGameSceneNode()->m_vecAbsOrigin();
    if (vec_origin.is_zero())
        return;

    const auto is_defused = planted_c4->m_bBombDefused();
    const auto is_defusing = planted_c4->m_bBeingDefused();
    const auto defuse_time = (planted_c4->m_flDefuseCountDown() - curtime);

    m_data["m_bomb"]["x"] = vec_origin.m_x;
    m_data["m_bomb"]["y"] = vec_origin.m_y;
    m_data["m_bomb"]["m_blow_time"] = blow_time;
    m_data["m_bomb"]["m_is_defused"] = is_defused;
    m_data["m_bomb"]["m_is_defusing"] = is_defusing;
    m_data["m_bomb"]["m_defuse_time"] = defuse_time;
}
```

--------------------------------

### Configuration: Enable Remote Access in JavaScript

Source: https://github.com/clauadv/cs2_webradar/blob/main/readme-CN.md

Modifies the JavaScript (React) code to disable localhost access, enabling remote sharing of the radar. This involves changing a constant declaration.

```javascript
const USE_LOCALHOST = 0;
```

--------------------------------

### Set Public IP Address in JavaScript

Source: https://github.com/clauadv/cs2_webradar/blob/main/readme.md

This JavaScript variable in `App.jsx` should be updated with the actual public IP address of the machine hosting the radar. This allows friends to connect to the radar application over the internet.

```javascript
const PUBLIC_IP = "your ip";
```

--------------------------------

### Configuration: Set Public IP in JavaScript

Source: https://github.com/clauadv/cs2_webradar/blob/main/readme-CN.md

Sets the public IP address in the React frontend code. This is necessary when sharing the radar with others, allowing them to connect to your server using your public IP.

```javascript
const PUBLIC_IP = "your ip goes here";
```

--------------------------------

### React Radar Component: Coordinate Transformation and Rendering

Source: https://context7.com/clauadv/cs2_webradar/llms.txt

The Radar component is responsible for transforming game coordinates into screen coordinates for accurate display on the map. It iterates through player data and bomb information, rendering their positions using child components. It relies on map data and settings for accurate scaling and positioning.

```jsx
// webapp/src/components/radar.jsx - Radar rendering
import Player from "./player";
import Bomb from "./bomb";

const Radar = ({ playerArray, radarImage, mapData, localTeam, averageLatency, bombData, settings }) => {
  const radarImageRef = useRef();

  return (
    <div id="radar" className="relative overflow-hidden origin-center">
      <img ref={radarImageRef} className="w-full h-auto" src={radarImage} />

      {playerArray.map((player) => (
        <Player
          key={player.m_idx}
          playerData={player}
          mapData={mapData}
          radarImage={radarImageRef.current}
          localTeam={localTeam}
          averageLatency={averageLatency}
          settings={settings}
        />
      ))}

      {bombData && (
        <Bomb
          bombData={bombData}
          mapData={mapData}
          radarImage={radarImageRef.current}
          localTeam={localTeam}
          averageLatency={averageLatency}
          settings={settings}
        />
      )}
    </div>
  );
};

export default Radar;

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.