CEF UI Map Spawn Selection Interface | React + Typescript

[Alexalsaud]

Map Spawn Selection Interface | React + Typescript​

---

Installing and running the project:

1. Installing the project from GitHub.

There are several options for installing the project.

• Install via GitHub Desktop. To do this, you will need
  • You must be registered for see links
    or
    You must be registered for see links
    to GitHub
  • You must be registered for see links
  • Copy repository link
  • Open GitHub Desktop
  • Log in via browser
  • Add a repository via clone by link
• Installation through the console of your IDE or Windows terminal.
  • Go to the directory you need (in which the project will be)
  • Open the terminal
  • Write the command: git clone
    You must be registered for see links
• Installation using a zip archive
  • Go to
    You must be registered for see links
  • Click on "
    You must be registered for see links
    "
  • And click
    You must be registered for see links
    (when you go to it, the file will start downloading)

Each of the methods is good in its own way, but this topic is not for that. You can read more about Git in the documentation or on YouTube videos.

2. Install project dependencies.

For the project to work, you must have

You must be registered for see links

installed To install dependencies, go to the root of the project, open the terminal (or go to the root through the IDE) and write the command: npm install.

3. Launch of the project.

To start the project, go to the root of the project, open the terminal (or go to the root through the IDE) and write the command: npm start.

4. Project build.

To build the project, go to the root of the project, open the terminal (or go to the root through the IDE) and write the command: npm run build.

When finished, at the root, you will have a build folder with a index.html file and folders. We can use these files to import into our project.

Detailed description of the project structure:

1. Installing additional spawn

points To set an additional point, we go to src/configs/SpawnPoints.json. By opening the file, we can find an array with the spawn points on the map.

To add a new point, create and add another object of the view:

{
    "trigger": "trigger",
    "name": "Trigger",
    "position": { "x": 0, "y": 0 }
  }

---

"trigger" - is responsible for the name of the element that will be sent by the trigger, when you click "spawn in the selected place"
"name" - is responsible for displaying the name on the map, in the
"position" interface - has another object, with X and Y elements. The X is for the left side of the X axis, and the Y is for the top side of the Y axis.

---

---

export type ISpawns = 'ballas' | 'gov' | 'army' | 'sheriff' | 'airport' | 'house' | 'last:position'; // Update Points To src/config/SpawnPoints.json

---

Here we enter the specified trigger that we created when adding the point. All triggers must be separated by the "|" character.

2. Event and trigger

management The project has 1 main rage event and 1 main rage trigger.

Event

Event is located at: src/Spawn.tsx.

The event is responsible for receiving and parsing data received through the client, from the server. Takes this form:

---

// ISpawns = 'ballas' | 'gov' | 'army' | 'sheriff' | 'airport' | 'house' | 'last:position'; - триггеры точек

{
  house: boolean
  lastPosition: boolean
  organization?: ISpawns
}

---

Let's analyze each element of the object.

1. House - is responsible for whether the character has a house. If there is no house - accordingly, the display of the spawn point near the house will not be. Accepts true or false

2. lastPosition - responds to giving the character the opportunity to spawn at the last exit location. Accepts true or false

3. organization - responsible for displaying the spawn point on the map by trigger. Conventionally, we added the vagos trigger to the points and set it on the map by coordinates. To display this particular available point, we need to send a trigger for this point to the organization to indicate that the character has a spawn available there. Accepts undefined or trigger name.

The entire event accepts a JSON.stringify() string sent via browser.call(EVENT:NAME, data).

The name of the event is written manually - in the place of 'EVENT:NAME'

Trigger

, the Trigger is located in the path: src/rage/triggers.ts.

The rage trigger sends data about the spawn information (spawn point trigger). At the moment, by clicking "Spawn at the selected point" with the selected point, you will automatically receive a trigger, which is specified in the config.

For the house and spawn location, the triggers are sent: "house" and "lastosition".

On the client side, we handle this accordingly:

---

const positions = {
    ballas: new mp.Vector3(0, 0, 0);
}

mp.events.add("EVENT:NAME", (spawn: 'ballas' | 'gov' | 'army' | 'sheriff' | 'airport' | 'house' | 'last:position') => {
    switch (spawn) {
        case 'ballas':
            player.position = ballas;
            break;
    }
})

---

This is an example script that can be processed.

The name of the trigger is written manually - in the place of 'EVENT:NAME'

---

You must be registered for see links