### Install Rebar-altv Dependencies

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-03-project-setup.md

Installs all necessary npm packages and alt:V server binaries for Rebar. This command also compiles the code once.

```bash
pnpm install
```

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

### Start Local Documentation Server

Source: https://github.com/stuyk/rebar-altv/blob/main/README.md

Starts a local server to view the Rebar documentation. This command assumes Retype is installed globally and the docs are in the './docs' directory.

```sh
retype start ./docs
```

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

### Start Rebar Server (Windows)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Starts the Rebar server on Windows using pnpm.

```javascript
pnpm start

```

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

### Start Rebar Server (Linux)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Starts the Rebar server on Linux using pnpm.

```javascript
pnpm start:linux

```

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

### Run Rebar-altv Development Server

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-03-project-setup.md

Starts the Rebar-altv development server. This mode ensures the server automatically reloads and reconnects your game when source code is modified.

```bash
pnpm dev
```

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

### Run Rebar-altv Production Server

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-03-project-setup.md

Starts the Rebar-altv server in production mode. This is typically used for deploying the server after development is complete.

```bash
pnpm start
```

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

### Start Rebar in Development Mode (Windows)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Starts the Rebar server in development mode on Windows using pnpm.

```javascript
pnpm dev

```

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

### Start Rebar in Development Mode (Linux)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Starts the Rebar server in development mode on Linux using pnpm.

```javascript
pnpm dev:linux

```

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

### Install Retype for Local Documentation

Source: https://github.com/stuyk/rebar-altv/blob/main/README.md

Installs the Retype application globally to allow for local documentation serving. This is a prerequisite for running the documentation locally.

```sh
pnpm install retypeapp --global
```

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

### Run Rebar AltV Server

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-05-your-first-plugin.md

Command to start the Rebar AltV development server.

```bash
pnpm dev

```

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

### Install Dependencies (Windows)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Installs project dependencies using pnpm for Windows.

```javascript
pnpm install

```

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

### Implement Server-Side Keybind

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/general/code-examples.md

Explains how to create server-side keybinds in Rebar, allowing for callbacks when a specific key is pressed. This example teleports the player when 'K' is pressed.

```typescript
import * as alt from 'alt-server';
import { useRebar } from '@Server/index.js';

const Rebar = useRebar();
const Keybinder = Rebar.useKeybinder();

const K_KEY = 75;

Keybinder.on(K_KEY, (player) => {
    player.pos = new alt.Vector3({
        x: 912,
        y: -199,
        z: 73,
    });
});
```

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

### Install Dependencies (Linux)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Installs project dependencies using pnpm for Linux.

```javascript
pnpm install

```

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

### Example Registration Output

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-10-authentication.md

This bash output shows an example of the data structure logged to the server console after a successful user registration in an AltV server using Rebar. It includes the generated MongoDB document ID, username, and the hashed password.

```bash
{
  _id: '6670a71daafac905d549f376',
  username: 'hello',
  password: 'c1wXtKqGCzUxXgOjmfrQt0tOQN5AjYSLer4/jwMeICM=$dWF2Wc7wL1VgnSTo1RcMAmcH7Oa5nidQ9SctqXb+51BZLa6wcKBgTwmztir61yDPVWPmH+OCC72Jsv9nip2UNPJF/kPrbNOohhl3VVjYg5ovGZ3Evw4Qyr8IJABvrjiSZ65hict60EBci0tY+VWmijg3jbKXsCshxWpq7V7n3L4zmXni1kp+YSwGN5IJtIBn3LuOrbEKrkDN+cIoKvlyISU0CvZGze0wxsTjlEqQKUye151qIHTW/+fkafQZPEwsuTcbgdtv5A35z37VjtT46PVgAHJAJ8Rp2joSxn2+2LkzVd8l4YtpI3f3tRNcq/ziWnd6zTONHsadu4nF4QQMIYZfWsHQkynfP1fFgJJCP5dlPAggR5VDkQTNmug34FB5X1+9i86Tpf1P/87OXlzrVITRfFYs8SCsmFKOnYailvgtyZ899sAuXl85ZIUdd0xoI397ewZRKZmcRIv647TywhxhnyCOudOSIBm7tUHmeHx+xMTKQEuT98JX04oYb69KekMmu83ZwE6O4OKtxc71tU/ojblXuMSZRSigTAPKEolDxaaf5zW5DFnHeNeGV+Esn2WPwvEAur6zeWnIZeeUZYRfHIZKQMJRkaY6TQH1qlkqGJoCDgQePSG4b6bU1cvaI9qf7J57uSHMF4rgVO71hhxWFPXRNrU7vVSk6WS1y8A='
}
```

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

### Get Async API and Hook Events

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebarClient/api/api.md

This example shows how to asynchronously retrieve an API (like 'auth-api') in Rebar AltV and then hook into its events, such as `onLogin`. It utilizes `useClientApi().getAsync()` and demonstrates logging a message when the player is ready.

```javascript
import * as alt from 'alt-client';
import { useClientApi } from '@Client/api/index.js';

const api = useClientApi();

async function init() {
    // Wait for isReady and Get the API
    const authApi = await api.getAsync('auth-api');

    // Hook in your events
    authApi.onLogin((player) => {
        alt.log('Player Ready!');
    });
}

init();
```

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

### Show Screen Mission Text

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/general/code-examples.md

Demonstrates how to display text in the bottom center of the screen, commonly used for mission-related information. This example shows how to display a website URL.

```typescript
import * as alt from 'alt-server';
import { useRebar } from '@Server/index.js';

const Rebar = useRebar();

alt.on('playerConnect', (player) => {
    const rPlayer = Rebar.usePlayer(player);
    rPlayer.notify.showMissionText('Visit our website at https://rebarv.com');
});
```

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

### Download Binaries (Windows)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Downloads necessary binaries for Rebar on Windows using pnpm.

```javascript
pnpm binaries

```

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

### Install VSCode Extensions for Rebar

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-04-opening-source.md

This snippet lists the necessary VSCode extension IDs to install for Rebar development. These extensions help with MongoDB integration, code formatting, TypeScript error display, Vue development, and Tailwind CSS support.

```bash
mongodb.mongodb-vscode
esbenp.prettier-vscode
YoavBls.pretty-ts-errors
Vue.volar
bradlc.vscode-tailwindcss
```

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

### Nested Menus Example (TypeScript)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebarClient/menus/native-menu.md

Provides an example of creating nested menus, where one menu can open another. It demonstrates how to manage the previous menu's state and provide a callback to return to it.

```typescript
function openMain() {
    const menu = useNativeMenu({
        header: 'main Menu',
        noExit: false,
        options: [
            {
                text: 'Menu 1',
                type: 'invoke',
                value: '',
                callback: () => {
                    openOne(menu);
                },
            },
            {
                text: 'Menu 2',
                type: 'invoke',
                value: '',
                callback: () => {
                    openTwo(menu);
                },
            },
        ],
    });

    menu.open();
}

function openOne(prevMenu: ReturnType<typeof useNativeMenu>) {
    prevMenu.destroy();

    const menu = useNativeMenu({
        header: 'Menu One',
        backCallback: openMain,
        options: [
            {
                text: 'Invoke Event',
                type: 'invoke',
                value: '',
                callback: (value) => {
                    alt.log(value);
                },
            },
        ],
    });

    menu.open();
}

function openTwo(prevMenu: ReturnType<typeof useNativeMenu>) {
    prevMenu.destroy();

    const menu = useNativeMenu({
        header: 'Menu Two',
        backCallback: openMain,
        options: [
            {
                text: 'Invoke Event',
                type: 'invoke',
                value: '',
                callback: (value) => {
                    alt.log(value);
                },
            },
        ],
    });

    menu.open();
}

openMain();
```

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

### Download Binaries (Linux)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Downloads necessary binaries for Rebar on Linux using pnpm.

```javascript
pnpm binaries

```

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

### Keybind Example - FiveM vs Rebar

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/index.md

Demonstrates how to register a keybind in both FiveM (Lua) and Rebar (TypeScript). The FiveM example uses a Citizen.CreateThread loop to check for key presses, while Rebar utilizes a more direct Keybinder.on method.

```Lua
Citizen.CreateThread(function()
    while true do
        Citizen.Wait(0)

        if IsControlJustPressed(1, 51) then
            print("E key was pressed!")
        end
    end
end)
```

```TypeScript
Keybinder.on(75, (player) => {
    console.log('Pressed k');
});
```

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

### Modify Server Configuration Settings

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/general/code-examples.md

Illustrates how to alter Rebar's server configuration settings by creating a plugin. This example shows how to disable various default behaviors like pistol whip, vehicle auto-start/stop, and UI elements.

```typescript
import { useRebar } from '@Server/index.js';

const Rebar = useRebar();
const ServerConfig = Rebar.useServerConfig();

ServerConfig.set('disablePistolWhip', true);
ServerConfig.set('disableVehicleEngineAutoStart', true);
ServerConfig.set('disableVehicleEngineAutoStop', true);
ServerConfig.set('disableVehicleSeatSwap', true);
ServerConfig.set('hideAreaName', true);
ServerConfig.set('hideHealthArmour', true);
ServerConfig.set('hideMinimapInPage', true);
ServerConfig.set('hideMinimapInVehicle', true);
ServerConfig.set('hideMinimapOnFoot', true);
ServerConfig.set('hideStreetName', true);
ServerConfig.set('hideVehicleClass', true);
ServerConfig.set('hideVehicleName', true);
```

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

### Verify Git Installation

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-02-dependencies.md

This command checks if Git is installed on your system by displaying its version. It's a crucial step for version control operations within the project.

```bash
git version
```

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

### Example: Ban Endpoint with Hono

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebar/useHono.md

A complete example demonstrating the creation of a `/ban` API endpoint using Hono and Rebar. It includes input validation, localOnly middleware, player data retrieval, and banning logic.

```typescript
import { HttpBindings } from "@hono/node-server";
import { useRebar } from "@Server/index.js";
import { Account } from "@Shared/types/account.js";
import { Hono } from "hono";

const Rebar = useRebar();
const hono = Rebar.useHono();
const app = new Hono<{ Bindings: HttpBindings }>();

app.get('/ban', hono.middlewares.localOnly, (c) => {
    let { reason, _id } = c.req.query();

    if (!_id) {
        c.status(400);
        return c.json({ data: 'ID was not provided' });
    }

    if (!reason) {
        reason = 'No Reason Given';
    }

    const onlinePlayer = Rebar.get.usePlayerGetter().byAccount(_id);
    if (!onlinePlayer) {
        const document = Rebar.document.virtual.useVirtual<Account>(_id, Rebar.database.CollectionNames.Accounts);
        if (!document.get()) {
            c.status(400);
            return c.json({ data: `Account does not exist on the server` });
        } else {
            document.setBulk({
                banned: true,
                reason,
            });
        }
    } else {
        const rPlayer = Rebar.usePlayer(onlinePlayer);
        rPlayer.account.setBanned(reason);
    }
    c.status(200);
    return c.json({ data: `Banned ${_id} with reason '${reason}'` });
})

hono.addRouter('/api/v1', app);
```

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

### Manual Upgrade Steps

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Manual steps to upgrade Rebar by copying files and running pnpm commands.

```javascript
pnpm upgrade
pnpm install

```

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

### Get Client-Side API (With Arguments)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebarClient/api/api.md

This snippet illustrates how to get and use a client-side API that was registered with arguments in Rebar AltV. It shows fetching the API using `useClientApi().get()` and then invoking it with the necessary arguments.

```javascript
import { useClientApi } from '@Client/api/index.js';

const useMyCoolAPI = useClientApi().get('my-cool-api');

function someFunction(somePlayer: alt.Player) {
    useMyCoolAPI(somePlayer).logPlayerName();
}
```

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

### Clone Rebar Repository

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Clones the Rebar repository from GitHub to your local machine using Git.

```bash
git clone https://github.com/Stuyk/rebar-altv/

```

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

### Run Development Server (Bash)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-10-authentication.md

Starts a local development server for the Rebar project. This allows for in-browser development and previewing changes without needing to rebuild in-game.

```bash
pnpm webview:dev
```

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

### Rebar Project Structure Example

Source: https://github.com/stuyk/rebar-altv/blob/main/README.md

Illustrates the typical folder structure for a Rebar project, including client, server, shared, and plugin directories. It also shows the structure for a sample plugin with client, server, translate, and webview components.

```text
├───main
│   ├───client
│   ├───server
│   ├───shared
│   └───translate
└───plugins
    └───your-plugin
        ├───client
        │   └───index.ts
        ├───server
        │   └───index.ts
        ├───translate
        │   └───index.ts
        └───webview
            └───MyCustomPage.vue
```

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

### Create Index Files for Plugin

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-05-your-first-plugin.md

Creates the main entry point files (index.ts) for both the server and client components of the plugin.

```bash
echo > src/plugins/my-first-plugin/server/index.ts

```

```bash
echo > src/plugins/my-first-plugin/client/index.ts

```

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

### Start Rebar in Hot Reload Mode (Windows)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Starts the Rebar server in development mode with hot reloading enabled on Windows using pnpm.

```javascript
pnpm dev:hot

```

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

### Clone Rebar-altv Repository

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-03-project-setup.md

This command downloads the Rebar-altv source code from GitHub to your local machine. Ensure you are in the desired directory before executing.

```bash
git clone https://github.com/Stuyk/rebar-altv/
```

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

### Draggable Component Example Page (Vue/TypeScript)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/info/webview/components/draggable.md

An example Vue.js page showcasing two draggable divs. It includes the necessary script setup for handling drag and click events and logging their status to the console.

```vue
<script lang="ts" setup>
    import Draggable from '../../../../webview/src/components/Draggable.vue';

    function handleDrag(from_id: string, to_id: string) {
        console.log(`drag: `, from_id, to_id);
    }

    function handleClick(id: string) {
        console.log('left-click: ', id);
    }

    function handleDoubleClick(id: string) {
        console.log('dbl-click: ', id);
    }

    function handleMiddleClick(id: string) {
        console.log('middle-click: ', id);
    }

    function handleRightClick(id: string) {
        console.log('right-click: ', id);
    }
</script>

<template>
    <div class="flex flex-row gap-2">
        <Draggable
            @onDrag="handleDrag"
            @onLeftClick="handleClick"
            @onDblClick="handleDoubleClick"
            @onMiddleClick="handleMiddleClick"
            @onRightClick="handleRightClick"
        >
            <div class="size-32 bg-red-500" id="item-a">Item A</div>
        </Draggable>
        <Draggable
            @onDrag="handleDrag"
            @onLeftClick="handleClick"
            @onDblClick="handleDoubleClick"
            @onMiddleClick="handleMiddleClick"
            @onRightClick="handleRightClick"
        >
            <div class="size-32 bg-red-500" id="item-b">Item B</div>
        </Draggable>
    </div>
</template>
```

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

### Create Plugin Directories

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-05-your-first-plugin.md

Creates the necessary folders for a new Rebar plugin, including separate directories for server and client-side code.

```bash
mkdir src/plugins/my-first-plugin

```

```bash
mkdir src/plugins/my-first-plugin/server

```

```bash
mkdir src/plugins/my-first-plugin/client

```

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

### Get Missing Number in Sequence

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/shared/utility.md

Finds a missing number within a given sequence of numbers, starting from a specified base.

```typescript
// Result should be 2
const numberResult = Utility.math.getMissingNumber([0, 1, 3], 0);
```

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

### Get Multiple Documents by Filter from Rebar Database

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebar/useDatabase.md

Fetches multiple documents from a collection that match a given filter criteria. It returns an array of documents and provides an example of accessing the first result.

```typescript
async function test() {
    const results = await getMany<{ name: string }>({ name: 'Stuyk' }, 'Person');
    if (results.length <= 0) {
        console.warn('Could not find the data!');
        return;
    }

    const user = results[0];
    console.warn(`Found ${user.name}`);
}
```

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

### Client-Side Plugin Initialization

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-05-your-first-plugin.md

Sets up the initial client-side code for a Rebar plugin, including importing necessary modules and logging a message.

```typescript
import * as alt from 'alt-client';

alt.log('Hello from client!');

```

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

### Retrieve Account Data

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebar/document/document-account.md

Illustrates how to retrieve the bound account data for a player using the `useAccount` hook and its `get` method. The retrieved data can then be accessed, for example, to log the player's email.

```typescript
const account = Rebar.document.account.useAccount(player);
const data = account.get();
console.log(data.email);
```

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

### Teleport Player to Waypoint (TypeScript)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/general/code-examples.md

Registers a chat command '/tpwp' that teleports the player to their current waypoint. It uses Rebar's player and messenger modules to get the waypoint position and apply it to the player.

```TypeScript
import * as alt from 'alt-server';
import { useRebar } from '@Server/index.js';

const Rebar = useRebar();
const Messenger = Rebar.messenger.useMessenger();

Messenger.commands.register({
    name: '/tpwp',
    desc: 'teleport to a given waypoint',
    callback: async (player: alt.Player) => {
        const pos = await Rebar.player.useWaypoint(player).get();
        if (!pos) {
            return;
        }

        player.pos = pos.add(0, 0, 1);
    },
});
```

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

### Plugin Structure Example

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/info/plugins/what-is-a-plugin.md

Illustrates a comprehensive plugin structure for Rebar AltV, including client, server, shared, and resource files like fonts, images, RMLUI, sounds, and webview components.

```tree
├───main
│   ├───client
│   ├───server
│   ├───shared
│   └───translate
└───plugins
    └───your-plugin
        ├───dependencies.json (alt: package.json)
        ├───client
        │   └───index.ts
        ├───fonts
        │   ├───arial.otf
        │   └───inter.ttf
        ├───images
        │   ├───somelogo.png
        │   └───bg.jpg
        ├───rmlui
        │   └───index.html (yes this actually html)
        │   └───font.ttf
        ├───server
        │   └───index.ts
        ├───sounds
        │   ├───alert_a.ogg
        │   └───alert_b.ogg
        ├───translate
        │   └───index.ts
        └───webview
            └───MyCustomPage.vue
```

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

### Server-Side Plugin Initialization

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-05-your-first-plugin.md

Sets up the initial server-side code for a Rebar plugin, including importing necessary modules and logging a message.

```typescript
import * as alt from 'alt-server';
import { useRebar } from '@Server/index.js';

alt.log('Hello from server!');

```

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

### Import Rebar Server API

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/general/code-examples.md

Demonstrates two ways to import the Rebar framework on the server-side for AltV. This is the initial step to access Rebar's functionalities.

```typescript
import { useRebar } from '@Server/index.js';

const Rebar = useRebar();
```

```javascript
import * as alt from 'alt-server';

const Rebar = alt.getMeta('Rebar');
```

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

### Install libatomic (Linux)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Installs the libatomic library on Ubuntu 22.04+ using apt-get.

```bash
sudo apt-get update
sudo apt-get install libatomic1

```

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

### Server-Side Plugin Initialization (TypeScript)

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/info/plugins/your-first-plugin.md

Initializes a server-side plugin for Rebar AltV. It imports necessary modules from 'alt-server' and '@Server/index.js', logs a message to the server console, and sets up the Rebar instance.

```typescript
import * as alt from 'alt-server';
import { useRebar } from '@Server/index.js';

const Rebar = useRebar();

alt.log('Hello from Server!');
```

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

### Upgrade Rebar

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Upgrades an existing Rebar installation to the latest version using pnpm.

```javascript
pnpm rebar:upgrade

```

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

### Vue Component Example

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/info/plugins/what-is-a-plugin.md

An example of a Vue component that could be part of a shared UI plugin.

```vue
<template>
  <button><slot></slot></button>
</template>

<script setup>
// Component logic here
</script>

<style scoped>
button {
  /* Button styles */
}
</style>
```

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

### Install pnpm Globally

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-02-dependencies.md

This command installs the pnpm package manager globally using npm. It's a prerequisite for managing project dependencies.

```powershell
npm install -g pnpm
```

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

### Create Interaction Points with Visuals

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/general/code-examples.md

Details how to set up interaction points that players can activate by pressing 'E'. This includes creating local and global markers, text labels, and blips for visual cues.

```typescript
import * as alt from 'alt-server';
import { useRebar } from '@Server/index.js';
import { MarkerType } from '@Shared/types/marker.js';

const Rebar = useRebar();

const posRef = new alt.Vector3({
    x: 912.6202392578125,
    y: -198.6721649169922,
    z: 71.22137451171875,
});

const interaction = Rebar.controllers.useInteraction(
    new alt.ColshapeCylinder(posRef.x, posRef.y, posRef.z, 3, 3),
    'player',
);

interaction.onEnter((player) => {
    const rPlayer = Rebar.usePlayer(player);
    rPlayer.notify.showNotification('Entered the point!');
});

interaction.onLeave((player) => {
    const rPlayer = Rebar.usePlayer(player);
    rPlayer.notify.showNotification('Left the point!');
});

interaction.on((player) => {
    const rPlayer = Rebar.usePlayer(player);
    rPlayer.notify.showNotification('Pressed E on the Point!');
});

Rebar.controllers.useMarkerGlobal({
    pos: posRef,
    color: new alt.RGBA(0, 255, 0, 75),
    scale: new alt.Vector3(3, 3, 1),
    type: MarkerType.CYLINDER,
});

Rebar.controllers.useTextLabelGlobal({
    pos: posRef.add(0, 0, 1),
    text: 'Press E to do something!',
});

Rebar.controllers.useBlipGlobal({
    color: 6,
    pos: posRef,
    shortRange: true,
    sprite: 128,
    text: 'Interaction Point',
});
```

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

### Verify Node.js Installation

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-02-dependencies.md

This command verifies the installation of Node.js by displaying its npm version. Node.js is essential for running JavaScript-based server-side applications.

```bash
npm --version
```

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

### Navigate to Rebar-altv Directory

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-03-project-setup.md

Changes the current directory in the terminal to the cloned 'rebar-altv' folder, allowing you to execute commands within the project.

```bash
cd rebar-altv
```

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

### Set PowerShell Execution Policy

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/install.md

Sets the PowerShell execution policy to unrestricted, which may be necessary for installing pnpm on Windows.

```powershell
set-executionpolicy unrestricted
```

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

### Verify pnpm Installation

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-02-dependencies.md

This command checks if pnpm, a performant Node.js package manager, is installed. It's used for managing project dependencies efficiently.

```bash
pnpm --version
```

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

### Get Character Document

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebar/document/document-character.md

Retrieve the entire character document bound to a player using the `get` method from `useCharacter`. This returns the complete character data object.

```typescript
function someFunction(player: alt.Player) {
    const character = Rebar.document.character.useCharacter(player);
    const document = character.get();
}
```

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

### Create Vue Template for Authentication

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-10-authentication.md

This Vue.js template defines a basic 'Hello World' component for the authentication page. It imports necessary Vue composables like 'ref', 'watch', and 'useEvents'.

```vue
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useEvents } from '../../../../webview/composables/useEvents';

const Events = useEvents();
</script>

<template>
    <div>Hello World!</div>
</template>
```

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

### Finish Player Loading Process

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/rebar/chapter-10-authentication.md

This TypeScript function, `finish`, is responsible for completing the player's loading process after authentication and character selection. It reverses initial setup steps like freezing the player and camera, resets player properties (visibility, dimension, model), spawns the player at a specific location, and hides the webview using Rebar utilities.

```typescript
function finish(player: alt.Player) {
    player.frozen = false;
    player.visible = true;
    player.dimension = 0;
    player.model = 'mp_m_freemode_01';
    player.spawn(
        new alt.Vector3({
            x: -864.1437377929688,
            y: -172.6201934814453,
            z: 37.799232482910156,
        }),
    );

    const rPlayer = Rebar.usePlayer(player);
    rPlayer.world.freezeCamera(false);
    rPlayer.world.clearScreenBlur(200);
    rPlayer.world.enableControls();
    rPlayer.webview.hide('Authentication');
}
```

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

### Get World Information with useWorldGetter

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/useRebar/get.md

Provides utilities for querying information about the in-game world. This includes checking if an entity is in water or if a specific position is clear of obstructions.

```typescript
import { useRebar } from '@Server/index.js';
const Rebar = useRebar();

const getter = Rebar.get.useWorldGetter();
```

```typescript
// Check if an entity is in ocean water
const isInWater = getter.isInOceanWater(somePlayerOrVehicle);

// Check if a position is completely clear
const isClear = await getter.positionIsClear(new alt.Vector3(0, 0, 0), 'all');
```

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

### Show Screen Shard Effect

Source: https://github.com/stuyk/rebar-altv/blob/main/docs/tutorials/general/code-examples.md

Provides an example of displaying a full-screen effect similar to 'Mission Failed' in GTA:V. This function allows customization of the title and duration.

```typescript
import * as alt from 'alt-server';
import { useRebar } from '@Server/index.js';

const Rebar = useRebar();

alt.on('playerConnect', (player) => {
    const rPlayer = Rebar.usePlayer(player);
    rPlayer.notify.showShard({
        title: 'Welcome to the Server',
        duration: 2000,
    });
});
```