Вопрос Интеграция React в RageMP на стороне клиента

[ilhmjv]

Кто может помочь?
Создал сервер, добавил в packages index.js:

mp.events.add("playerJoin", (player) => {

    player.call("join", [player]);

});

Потом обработчик события в client_packages:

const client = "http://localhost:3000"

const uiVisibleChange = (toggle) => {

    mp.game.ui.displayRadar(toggle);

    mp.game.ui.displayHud(toggle);

    mp.gui.chat.show(toggle);

    setTimeout(() => {

        mp.gui.cursor.show(!toggle, !toggle);

    }, 500);

}

mp.events.add("join", () => {

    const camera = mp.cameras.new(

        'registerCamera',

        new mp.Vector3(1500.452, 1000.763, 500.758),

        new mp.Vector3(-8.885, 0, 300.716), 60

    );

    camera.setActive(true);

    mp.game.cam.renderScriptCams(true, false, 0, false, false);

    uiVisibleChange(false);

    mp.browsers.new([ICODE]${client}[/ICODE]);

});

создал проект на React с помощью npx create-react-app client --template typescript(react-router-dom, styled-components как доп. зависимости) в основной папке сервера:

в итоге "name mp is not defined", почему именно в React части приложения mp is not defined? Никаких зависимостей от ragemp для реакт которые можно скачать с интернета не нашёл. кроме rage-mp, хотя и то только для разработки самой основы сервера...
Вот общая директория проекта:

 

[ready to massacre]

    <script>
      var mp = typeof mp !== 'undefined' ? mp : {
        trigger: () => {},
        events: { add: () => {}, call: () => {}, remove: () => {}, reset: () => {} },
        joaat: () => {},
        game: { joaat: () => {} }
      }
    </script>

вставь куда нибудь в index.html
и лучше юзать ивент "playerReady" вместо "playerJoin"

 

[ilhmjv]

    <script>
      var mp = typeof mp !== 'undefined' ? mp : {
        trigger: () => {},
        events: { add: () => {}, call: () => {}, remove: () => {}, reset: () => {} },
        joaat: () => {},
        game: { joaat: () => {} }
      }
    </script>

вставь куда нибудь в index.html
и лучше юзать ивент "playerReady" вместо "playerJoin"

уже давно стоит

И сам App.tsx файл:

 

[ilhmjv]

похоже придется отказаться от typescript... надеюсь я об этом не пожелаю, ведь только так оно и работает

 

[ilhmjv]

нет это нихрена не помогло, только теперь и без TS. Ошибка пропала при входе на сервер, но работает ли это...

 

[ready to massacre]

поменяй ивент с playerJoin на playerReady

 

[ilhmjv]

поменяй ивент с playerJoin на playerReady

поменял, это ни на что не влияет, на сколько я понимаю это просто устаревший ивент он мне в этом дерьме никак ведь не поможет

 

[ilhmjv]

<script>
var mp = typeof mp !== 'undefined' ? mp : {
trigger: () => {},
events: { add: () => {}, call: () => {}, remove: () => {}, reset: () => {} },
joaat: () => {},
game: { joaat: () => {} }
}
</script>

эта фигня просто уберает проблему ошибку но никак не решает её. Ты просто добавляешь пустую переменную в глобальный обьект window которая все время и остается пустой... Оно должно как то что то подгружать, но реакт даже после добавления package.json, globals: { "mp": true } все ещё не видит.

 

[ready to massacre]

поменял, это ни на что не влияет, на сколько я понимаю это просто устаревший ивент он мне в этом дерьме никак ведь не поможет

почитай описание ивента playerJoin и playerReady

 

[ready to massacre]

вот гайд как использовать react

https://rage.mp/forums/topic/10436-guide-how-to-use-react-redux-and-typescript-as-ui-cef/

 

[ilhmjv]

почитай описание ивента playerJoin и playerReady

чел какое отношение это имеет на данный момент? И c помощью playerJoin и с помощью playerReady один и тот же результат с не работающим клиентом, даже по названию и аналогии с другими библиотеками и API что я работал можно интуитивно понять что playerJoin это когда происходит соединение с сервером и человек входит а playerReady это когда человек полностью загрулися и готов к манипуляциям, но сути это на данный момент не имеет факт остается фактом что долбанный mp не хочет находится в реакт. Я уже не знаю че с этим делать, проектый планируется огромный, писать все это на ванильном HTML/CSS/JS это значит просто сдохнуть... Если у тебя уже готовый какой то проект который я мог себе запулить и прст посмотреть как работает на самом деле подключение React?

 

[ilhmjv]

вот гайд как использовать react

https://rage.mp/forums/topic/10436-guide-how-to-use-react-redux-and-typescript-as-ui-cef/

чел просто показал как использовать в этом и суть, я год на реакте проработал, я прекрасно понимаю как он работает. Я не понимаю как добавить в окружение разработки mp, которая существует в client_packages, но в файлах что глубже нет....

 

[ready to massacre]

похоже придется отказаться от typescript... надеюсь я об этом не пожелаю
это просто устаревший ивент он мне в этом дерьме никак ведь не поможет
чел какое отношение это имеет на данный момент?
чел просто показал как использовать в этом и суть

едрить ты токсичный, я тебе помогаю а ты чел, чел, дерьмо, фигня -- научись общаться для начала прежде чем помощи просить

Я не понимаю как добавить в окружение разработки mp
я год на реакте проработал

))

$ yarn add -D @ragempcommunity/types-cef

// tsconfig.json
{
  "compilerOptions": {
    "typeRoots": ["node_modules/@types", "node_modules/@ragempcommunity"],
  },
}

 

[ilhmjv]

едрить ты токсичный, я тебе помогаю а ты чел, чел, дерьмо, фигня -- научись общаться для начала прежде чем помощи просить

))

$ yarn add -D @ragempcommunity/types-cef

// tsconfig.json
{
  "compilerOptions": {
    "typeRoots": ["node_modules/@types", "node_modules/@ragempcommunity"],
  },
}

1. "чел" для тебя оскорбительно? Не знаю, может у нас разные представления об этом слове но я ничего в этом такого не вижу.
2. Дерьмо, фигня опять же не к тебе адресовано ведь.
3. Я не правильно выразился, я не не знаю как добавить в окружение, а что добавить в окружение, на npm я ничего кроме ragemp не нашёл.. Спасибо. Попробую.

 

[Mitsuba]

Если я правильно понял ты хочешь подключить к проекту реакт, и у тебя что то не так (Не сталкивался с реактом ни разу). Если я все таки правильно тебя понял то тебе нужно просто в корне с сервером через npm установить реакт, и как бы уже дальше работать с ним. Все должно прекрасно работать. Если я не о том подумал, поправь меня, может быть я смогу помочь тебе с твоей проблемой.
Кстати на счет ивента "playerReady", чел выше правильно подметил, лучше юзать его вместо "playerJoin", во избежание ошибок)

 

[ilhmjv]

Если я правильно понял ты хочешь подключить к проекту реакт, и у тебя что то не так (Не сталкивался с реактом ни разу). Если я все таки правильно тебя понял то тебе нужно просто в корне с сервером через npm установить реакт, и как бы уже дальше работать с ним. Все должно прекрасно работать. Если я не о том подумал, поправь меня, может быть я смогу помочь тебе с твоей проблемой.
Кстати на счет ивента "playerReady", чел выше правильно подметил, лучше юзать его вместо "playerJoin", во избежание ошибок)

Привет. Да. В самом корне создаю проект client(соответственно создается папка клиент и там внутри уже все). Но ничего не работает, щас попробую то что написал тот чувак но хз. Отпишу.

 

[Mitsuba]

Привет. Да. В самом корне создаю проект client(соответственно создается папка клиент и там внутри уже все). Но ничего не работает, щас попробую то что написал тот чувак но хз. Отпишу.

Да в теории должно все работать, можно так сильно не запариваться, и просто брать работать в ванильных папках, тогда уж точно ошибок не должно быть

 

[ilhmjv]

Да в теории должно все работать, можно так сильно не запариваться, и просто брать работать в ванильных папках, тогда уж точно ошибок не должно быть

Да только из за этого при каждом запуске сервер начинает качать всю папку, а node_modules весит не мало... учитывая то что перезапускать сервак приходится очень часто.

 

[Mitsuba]

Да только из за этого при каждом запуске сервер начинает качать всю папку, а node_modules весит не мало... учитывая то что перезапускать сервак приходится очень часто.

Да вроде быстро запускается сервер) Не знаю в чем у тебя проблема... даже редага грузится секунд 5-10 (не вижу проблем в перезагрузки сервера)

 

[Wartime]

Логично, что typescript не знает ни про какой объект mp. Этот язык дает тебе возможность использовать строгую типизацию, этим нужно пользоваться. Чтобы ts знал, что объект mp все же есть, тебе нужно добавить новый интерфейс для этого объекта и объявить его в .d.ts файле. Например, интерфейс может выглядеть следующим образом:

interface MP {
  trigger: (eventName: string, ...props: any) => void;
}

declare const mp: MP;

Потом, файл .d.ts нужно добавить в tsconfig, чтобы typescript узнал о существовании этого объекта. Такая реализация будет работать в rage, но если ты запустишь проект локально и попробуешь вызвать mp.trigger, то получишь ошибку, так как в обычном браузере никакого объекта mp нет. Поэтому, в идеале, ты также должен добавить проверку на наличие объекта mp в window.