Просмотр кода страницы Clientside JS Snippets

= Client-side Javascript - Helpful Code Snippets/Examples =
=== These should not be limited to one existing function. If they are, simply propose the edit on the function as an example ===
{{ClientsideJsFunction}}
{{JSContainer|
==Syntax==
'''Rotate Recentangle'''
The rotate rectangle allows you to get the Vehicle size and rotate it to get the correct X and Y from the Game.

<pre>
rotateRect(angle, ox, oy, x, y, w, h) {
        const xAx = Math.cos(angle);  // x axis x
        const xAy = Math.sin(angle);  // x axis y
        x -= ox;  // move rectangle onto origin
        y -= oy;
        return [[ // return array holding the resulting points
            x * xAx - y * xAy + ox,   // Get the top left rotated position
            x * xAy + y * xAx + oy,   // and move it back to the origin
        ], [
            (x + w) * xAx - y * xAy + ox,   // Get the top right rotated position
            (x + w) * xAy + y * xAx + oy,
        ], [
            (x + w) * xAx - (y + h) * xAy + ox,   // Get the bottom right rotated position
            (x + w) * xAy + (y + h) * xAx + oy,
        ], [
            x * xAx - (y + h) * xAy + ox,   // Get the bottom left rotated position
            x * xAy + (y + h) * xAx + oy,
        ]
        ];
    }</pre>

'''Get Vehicle Layout (Sizings and Location in Game)'''
This function allows you to get the full layout of the vehicle such as front, rear, roof. 
<pre>vehicleLayout(Vehicle) {
        const sizeofVehicle = mp.game.gameplay.getModelDimensions(Vehicle.model);
        const vehicleRotation = Vehicle.getRotation(2);
        const Xwidth = (0 - sizeofVehicle.min.x) + (sizeofVehicle.max.x);
        const Ywidth = (0 - sizeofVehicle.min.y) + (sizeofVehicle.max.y);
        const degree = (vehicleRotation.z + 180) * Math.PI / 180;
        const newDegrees = this.rotateRect(degree, Vehicle.position.x, Vehicle.position.y, Vehicle.position.x - sizeofVehicle.max.x, Vehicle.position.y - sizeofVehicle.max.y, Xwidth, Ywidth);
        const frontX = newDegrees[0][0] + ((newDegrees[1][0] - newDegrees[0][0]) / 2);
        const frontY = newDegrees[0][1] + ((newDegrees[1][1] - newDegrees[0][1]) / 2);
        const bottomX = newDegrees[2][0] + ((newDegrees[3][0] - newDegrees[2][0]) / 2);
        const bottomY = newDegrees[2][1] + ((newDegrees[3][1] - newDegrees[2][1]) / 2);
        return {
            front: {x: frontX, y: frontY},
            back: {x: bottomX, y: bottomY},
            center: {x: Vehicle.position.x, y: Vehicle.position.y},
            size: {
                lengthX: Xwidth,
                lengthY: Ywidth,
                min: {x: sizeofVehicle.min.x, y: sizeofVehicle.min.y},
                max: {x: sizeofVehicle.max.x, y: sizeofVehicle.max.y},
                z: sizeofVehicle.min.z
            }
        };
    }
</pre>


'''Perform async loop in CEF'''
This function will allow you to process large arrays that you have and want to process them inside your html file which using normal ones will block your UI and crash your client
<pre>
/**
 * @description perform an async loop in CEF for large arrays to prevent UI block and client crash
 * @param array Array you want to do loop on
 * @param callback callback containing (item, index, array)
 * @param end will be called when the async loop is finished
 */
const asyncLoop = (array, callback, end) => {
  // Index which is going to be proccessed
  var index = 0;
  function doLoop() {

      // Check if it's the end of the array
      if (index < array.length) 
      {
          callback(array[index], index, array);
          ++index;
          // Do async wait for 1 ms
          setTimeout(doLoop, 1);
      }
      else
      {
        // calls when the loop is finished
        end()
      }
  }    
  doLoop();    
}
</pre>


'''Disable AFK Cam'''
<pre>
mp.events.add('render', () => {
    mp.game.invoke("0xF4F2C0D4EE209E20"); //Invalidate Camera 0xF4F2C0D4EE209E20
})
</pre>


'''Bind and manage player crouch to ctrl button'''
<pre>
var CommonActions_Crouched = false;
mp.keys.bind(0xA2, true, () => {

    if(CommonActions_Crouched)
    {
        ResetPlayerCrouch();
        CommonActions_Crouched = false;
    }
    else
    {
        SetPlayerCrouch();
        CommonActions_Crouched = true;
    }

    
})


function SetPlayerCrouch() {
    if (!mp.game.streaming.hasClipSetLoaded('move_ped_crouched')) 
    {
        mp.game.streaming.requestClipSet('move_ped_crouched');
        while(!mp.game.streaming.hasClipSetLoaded('move_ped_crouched')) mp.game.wait(0);
    }

    mp.players.local.setMovementClipset('move_ped_crouched', 0.3);
}

function ResetPlayerCrouch()
{
    mp.players.local.resetMovementClipset(0.3);
}
</pre>



'''Custom Wait function'''
useful when you are using shared data and you start using it on player join where the data might not have been synced yet (wait for it to become defined)
usable in async function use with await
<pre>
const GameWait = (variable) => {
    
    return new Promise((resolve, reject) => {
        var interval = setInterval(() => {
            if(variable != undefined)
            {
                clearInterval(interval);
                resolve(variable)
            }
        }, 10);
    })
}
</pre>


'''Disable street names/car classname etc'''
Must be called inside render
<pre>
mp.game.ui.hideHudComponentThisFrame(6); // car name
mp.game.ui.hideHudComponentThisFrame(8); // car class
mp.game.ui.hideHudComponentThisFrame(7); // area name 
mp.game.ui.hideHudComponentThisFrame(9); // street name
</pre>
}}