feat: images folder, copyFiles, gitignore additions, docs for all of …

…the things

.gitignore

@@ -13,6 +13,13 @@ resources/images/*.jpeg
 resources/images/*.svg
 resources/images/*.bmp
 resources/images/*.webp
+webview/public/sounds/*.ogg
+webview/public/images/*.png
+webview/public/images/*.jpg
+webview/public/images/*.jpeg
+webview/public/images/*.svg
+webview/public/images/*.bmp
+webview/public/images/*.webp
 altv-crash-handler.exe
 altv-server.exe
 libnode.dll

docs/plugins/create.md

@@ -5,10 +5,11 @@ If you wish to create plugins then you need to understand the basic structure of
 1. Create a folder inside `src/plugins` and name it something unique
 2. Create these additional folders under the new folder you created
     1. `client`
-    2. `server`
-    3. `sounds`
-    4. `translate`
-    5. `webview`
+    2. `images`
+    3. `server`
+    4. `sounds`
+    5. `translate`
+    6. `webview`
 
 ## client
 
@@ -44,11 +45,37 @@ const { t } = useTranslate('en');
 alt.log(t('example.hello-from-server'));
 ```
 
+## images
+
+Images are any images with the following extensions: `jpg, jpeg, png, bmp, svg, webp`.
+
+Additionally, the images are loaded as an `asset-pack` and copied to the `webview/public/images` folder as well.
+
+Image paths are absolute so if you put an image in the `images` folder then your `html` path will be `/images/myplugin-myimage.png`.
+
+If you need the image for rmlui then your path will be `http://assets/images/myplugin-myimage.png`.
+
+```jsx
+<img src="/images/myplugin-myimage.png" />
+
+// OR
+
+<img src="http://assets/images/myplugin-myimage.png" />
+```
+
+!!!
+Image names need to be unique for your individual plugin, otherwise they will override each other.
+!!!
+
 ## sounds
 
 Sounds are custom `.ogg` files that can be played as an asset using the `Rebar.player.useAudio` function.
 
-Here's a simple example of playing a sound called `test.ogg` which is in the `sounds folder`.
+Additionally, the images are loaded as an `asset-pack` and copied to the `webview/public/sounds` folder as well.
+
+Here's a simple example of playing a sound called `myplugin-test.ogg` which is in the `sounds folder`.
+
+### Server Sound
 
 ```ts
 import * as alt from 'alt-server';
@@ -57,10 +84,34 @@ import { useRebar } from '@Server/index.js';
 const Rebar = useRebar();
 
 alt.on('playerConnect', async (player) => {
-    Rebar.player.useAudio(player).playSound('http://assets/sounds/test.ogg');
+    Rebar.player.useAudio(player).playSound('http://assets/sounds/myplugin-test.ogg');
+
+    // Alternatively
+    Rebar.player.useAudio(player).playSound('/sounds/myplugin-test.ogg');
 });
 ```
 
+### Webview Sound
+
+```tsx
+<script lang="ts" setup>
+import { useAudio } from '../../../../webview/composables/useAudio';
+
+const audio = useAudio();
+
+function playSound() {
+    audio.play('/sounds/myplugin-test.ogg');
+}
+</script>
+
+<template>
+    <div>
+        <button @click="playSound">Click Me!</button>
+    </div>
+</template>
+
+```
+
 ## translate
 
 Translations can be used on `client-side`, `server-side`, or `webview` as long as you import the translation file.
@@ -135,7 +186,7 @@ const Rebar = useRebar();
 const vehicleDocument = getOrCreateVehicleDocument(); // Your own implementation
 
 const vehicle = alt.Vehicle(alt.hash(vehicleDocument.model), 0, 0, 0, 0, 0, 0);
-const boundVehicle = Rebar.document.vehicle.useVehicleBinder(vehicle).bind(vehicleDocument)
+const boundVehicle = Rebar.document.vehicle.useVehicleBinder(vehicle).bind(vehicleDocument);
 
 vehicleWrapper.getField('mileage'); // You will see type hint there, that you're able to use 'mileage' and 'plateNumber'.
 vehicleWrapper.set('mileage', 1000); // Also here

docs/plugins/what-is-a-plugin.md

@@ -22,6 +22,9 @@ Plugins can be found in the `src/plugins` directory, and each plugin should have
     └───your-plugin
         ├───client
         │   └───index.ts
+        ├───images
+        │   ├───somelogo.png
+        │   └───bg.jpg
         ├───server
         │   └───index.ts
         ├───sounds

package.json

@@ -20,7 +20,7 @@
         "transpile:verbose": "sucrase ./src -d ./resources/core --transforms typescript",
         "[-] Webview": "",
         "webview:build": "node ./scripts/webview.js && pnpm -C webview run build",
-        "webview:dev": "node ./scripts/webview.js && pnpm -C webview run dev"
+        "webview:dev": "pnpm build:copyFiles && node ./scripts/webview.js && pnpm -C webview run dev"
     },
     "devDependencies": {
         "@altv/types-client": "^16.2.2",

resources/images/resource.toml

@@ -0,0 +1,4 @@
+type = 'asset-pack'
+client-files = [ 
+    '*'
+]

scripts/copyFiles.js

@@ -3,9 +3,13 @@ import glob from 'fast-glob';
 
 const filesToCopy = {
     'src/plugins/**/sounds/**/*.ogg': {
-        destination: 'resources',
+        destination: ['resources', 'webview/public'],
         keyword: 'sounds',
     },
+    'src/plugins/**/images/**/*.+(jpg|jpeg|png|bmp|svg|webp)': {
+        destination: ['resources', 'webview/public'],
+        keyword: 'images',
+    },
 };
 
 function copyFiles() {
@@ -25,8 +29,15 @@ function copyFiles() {
                 continue;
             }
 
-            const finalPath = destination + '/' + splitPath.join('/');
-            fs.copyFileSync(file, finalPath);
+            if (Array.isArray(destination)) {
+                for (let dest of destination) {
+                    const finalPath = dest + '/' + splitPath.join('/');
+                    fs.copyFileSync(file, finalPath);
+                }
+            } else {
+                const finalPath = destination + '/' + splitPath.join('/');
+                fs.copyFileSync(file, finalPath);
+            }
         }
     }
 }

server.toml

@@ -13,6 +13,7 @@ description = 'alt:V Sample Server'
 modules = [ 'js-module' ]
 resources = [
     # All resources and mods should always be loaded before core
+    'images',
     'sounds',
     'rmlui',
     'webview',