Skip to content

Commit e9b2671

Browse files
swkeepswkeep
committed
release: v2
1 parent 364dbc0 commit e9b2671

59 files changed

Lines changed: 4963 additions & 3476 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/images/dev_mode.jpg‎

-523 KB
Binary file not shown.

‎.github/images/interaction-menu-v2.jpg‎

112 KB
Loading

‎.github/images/loading.jpg‎

-374 KB
Binary file not shown.

‎README.md‎

Lines changed: 49 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,61 @@
11
# Interaction Menu
22

3+
<center>
4+
<img src=".github/images/interaction-menu-v2.jpg" />
5+
</center>
6+
37
<center>
48

5-
![](https://img.shields.io/github/v/release/swkeep/interaction-menu?logo=github)
6-
![](https://img.shields.io/github/downloads/swkeep/interaction-menu/total?logo=github)
7-
![](https://img.shields.io/github/downloads/swkeep/interaction-menu/latest/total?logo=github)
9+
![](https://img.shields.io/github/v/release/swkeep/interaction-menu?logo=github&style=for-the-badge)
10+
![](https://img.shields.io/github/downloads/swkeep/interaction-menu/total?logo=github&style=for-the-badge)
11+
![](https://img.shields.io/github/downloads/swkeep/interaction-menu/latest/total?logo=github&style=for-the-badge)
12+
![](https://img.shields.io/github/stars/swkeep/interaction-menu?logo=github&style=for-the-badge)
13+
![Discord](https://img.shields.io/discord/988158464276693012?logo=discord&style=for-the-badge)
814

915
</center>
1016

11-
A standalone DUI-based interaction menu for FiveM, designed to enhance player interactions with the environment on your server.
1217

13-
This menu isn't designed to replace target scripts (though you could, but it would take quite a bit of effort on your end). Instead, it's meant to work alongside them, adding an extra layer of interactions to players. That said, keep in mind that the script uses sprites and DUI, which can be more resource-intensive compared to NUI-based scripts (nothing to worry about if you have some experience with scripting).
18+
Interaction menu is a modular, raycast, zone and entitiy based interaction system for FiveM. It leverages sprites and DUI to render rich, in-game menus, allowing players to interact with entities, world positions, zones, vehicles, and more. Menus are tracked in a centralized container structure and automatically cleaned up via a dedicated garbage collector.
19+
20+
## Features
21+
22+
The script offer a wide range of features, including:
23+
24+
* A dedicated `HTML template engine` for creating custom options
25+
* Dedicated media components, picture, music, and video players
26+
* Multiple triggers for events, commands, exports and more
27+
* A variety of pre-made beautiful themes
28+
* Full customization of existing themes and the ability to add new ones with ease
29+
* Bridges for compatibility with target scripts like `ox_target` and `qb-target`
30+
* `3D Menus` to maintain player immersion in the game world
31+
* User Friendly Syntax, clear, straightforward, and easy to pick up
32+
33+
…and many more features waiting to be discovered and brought to life with your creativity!
1434

1535
## Preview
1636

1737
<center>
18-
<table>
19-
<tr>
20-
<td align="center">
21-
<img src=".github/images/preview_1.jpg" />
22-
</td>
23-
<td align="center">
24-
<img src=".github/images/preview_2.jpg" />
25-
</td>
26-
<td align="center">
27-
<img src=".github/images/preview_3.jpg" />
28-
</td>
29-
</tr>
30-
</table>
31-
</center>
3238

33-
<center>
34-
<table>
35-
<tr>
36-
<td align="center">
37-
<img src=".github/images/preview_4.jpg" />
38-
</td>
39-
<td align="center">
40-
<img src=".github/images/preview_5.jpg" />
41-
</td>
42-
</tr>
43-
</table>
39+
<table>
40+
<tr>
41+
<td align="center">
42+
<img src=".github/images/preview_1.jpg" alt="Preview 1" />
43+
</td>
44+
<td align="center">
45+
<img src=".github/images/preview_2.jpg" alt="Preview 2" />
46+
</td>
47+
<td align="center">
48+
<img src=".github/images/preview_4.jpg" alt="Preview 4" />
49+
</td>
50+
<td align="center">
51+
<img src=".github/images/preview_5.jpg" alt="Preview 5" />
52+
</td>
53+
<td align="center">
54+
<img src=".github/images/preview_3.jpg" alt="Preview 3" />
55+
</td>
56+
</tr>
57+
</table>
58+
4459
</center>
4560

4661
**[Watch on YouTube](https://www.youtube.com/watch?v=7ylxnj4HC5A)**
@@ -51,7 +66,8 @@ This menu isn't designed to replace target scripts (though you could, but it wou
5166

5267
## Documentation
5368

54-
**[Click Here](https://swkeep.com)**
69+
Documentation is still a work in progress.
70+
In the meantime, check out the examples in [`/lua/examples`](./lua/examples) for guidance.
5571

5672
## Developer Tools and Examples
5773

@@ -63,10 +79,6 @@ To explore these examples live within your server:
6379

6480
**Important:** Remember to disable developer mode when you're done testing for optimal performance.
6581

66-
<center>
67-
<img src=".github/images/dev_mode.jpg" alt="Developer Mode Example"/>
68-
</center>
69-
7082
<!-- CONTRIBUTING -->
7183
## Contributing
7284

@@ -82,6 +94,6 @@ Don't forget to give the project a star! Thanks again!
8294
See `LICENSE` for more information.
8395

8496
<!-- CONTACT -->
85-
## Contact
97+
## Contact & Support
8698

87-
Swkeep - [@Discord](https://discord.gg/ccMArCwrPV)
99+
For questions, support, or community discussions, join **Swkeep** on [Discord](https://discord.gg/ccMArCwrPV)

‎interactionDUI/core.client.lua‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,10 @@ local function send(event, data)
150150
SendDuiMessage(DUI.scaleform.duiObject, json.encode({ action = event, data = data }))
151151
end
152152

153+
local function send_nui(event, data)
154+
SendNUIMessage({ action = event, data = data })
155+
end
156+
153157
local function setPosition(position)
154158
if DUI.scaleform.position == position then return end
155159
DUI.scaleform.position = vec3(position.x, position.y, position.z)
@@ -260,6 +264,7 @@ function DUI:Create()
260264
scaleform.set3d = set3d
261265
scaleform.setScale = setScale
262266
scaleform.send = send
267+
scaleform.send_nui = send_nui
263268
scaleform.setStatus = setStatus
264269
scaleform.attach = attach
265270
scaleform.dettach = dettach

‎interactionDUI/dui_source/src/App.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { FocusTracker, FocusTrackerT, InteractionMenu } from './types/types';
44
import { subscribe, dev_run } from './util';
55
import ActionPromptIndicator from './views/ActionPromptIndicator.vue';
66
import MenuContentRenderer from './views/MenuContentRenderer.vue';
7+
import eye from './views/Eye.vue';
78
import DevTools from './components/DevTools.vue';
89
910
// Reactive
@@ -48,8 +49,11 @@ subscribe('interactionMenu:menu:show', show_menu);
4849
<template>
4950
<div class="interact-container" :data-theme="currentTheme" :data-dev="isDevVisible" :data-dark="isDarkMode">
5051
<DevTools :theme="currentTheme" v-if="isDevVisible" />
52+
<eye></eye>
5153

52-
<ActionPromptIndicator :focus-tracker="focusTracker" @set-visible="setVisible" />
53-
<MenuContentRenderer :focus-tracker="focusTracker" @set-visible="setVisible" />
54+
<div class="menu-wrapper">
55+
<ActionPromptIndicator :focus-tracker="focusTracker" @set-visible="setVisible" />
56+
<MenuContentRenderer :focus-tracker="focusTracker" @set-visible="setVisible" />
57+
</div>
5458
</div>
5559
</template>

‎interactionDUI/dui_source/src/style.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,13 @@ body {
2727
display: none;
2828
}
2929

30+
.menu-wrapper {
31+
display: flex;
32+
gap: 16px;
33+
width: 100%;
34+
justify-content: center;
35+
}
36+
3037
.interact-container {
3138
width: 100%;
3239
align-items: center;

‎interactionDUI/dui_source/src/views/Eye.vue‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<div
3+
id="eye"
4+
:style="{
5+
display: isVisible ? 'block' : 'none',
6+
}"
7+
>
8+
<!-- show first svg -->
9+
<svg
10+
v-if="!isToggled"
11+
id="eyeSvg"
12+
fill="rgba(0, 0, 0, 1)"
13+
height="34px"
14+
width="34px"
15+
version="1.1"
16+
xmlns="http://www.w3.org/2000/svg"
17+
viewBox="0 0 485 485"
18+
@click="toggle"
19+
>
20+
<path
21+
d="M399.776,157.643l-84.02-84.02c-13.278-13.278-34.805-13.278-48.083,0c-13.278,13.278-13.278,34.805,0,48.083l67.882,67.882
22+
l-7.071,7.071L141.783,9.958c-13.278-13.278-34.805-13.278-48.083,0c-13.278,13.278-13.278,34.805,0,48.083L201.988,166.33
23+
l-7.071,7.071l-49.093-49.093c-13.278-13.278-34.805-13.278-48.083,0c-13.278,13.278-13.278,34.805,0,48.083l49.093,49.093
24+
l-7.071,7.071l-25.658-25.658c-13.278-13.278-34.805-13.278-48.083,0c-13.278,13.278-13.278,34.806,0,48.083l25.658,25.658
25+
l-7.071,7.071c-13.278-13.278-34.805-13.278-48.083,0s-13.278,34.806,0,48.083l94.55,94.55c51.077,51.077,134.185,51.077,185.262,0
26+
l83.439-83.438C450.853,291.828,450.853,208.719,399.776,157.643z"
27+
/>
28+
</svg>
29+
30+
<!-- show second svg -->
31+
<svg
32+
v-else
33+
id="eyeSvg2"
34+
xmlns="http://www.w3.org/2000/svg"
35+
height="34px"
36+
width="34px"
37+
viewBox="0 0 300.000000 300.000000"
38+
preserveAspectRatio="xMidYMid meet"
39+
@click="toggle"
40+
>
41+
<g transform="translate(0.000000,300.000000) scale(0.050000,-0.050000)" fill="#000000" stroke="none">
42+
<path
43+
d="M3128 5805 c-215 -77 -448 -328 -448 -484 0 -53 -18 -52 -99 8 -377 278 -1001 35 -1075 -419 -13 -80 -10 -79 -116 -41 -549 198 -1098 -403 -860 -941 28 -62 50 -115 50 -117 0 -3 -38 -16 -85 -29 -329 -95 -528 -429 -472 -792 30 -194 79 -267 385 -573 l287 -287 10 -400 c19 -726 242 -1145 745 -1404 311 -160 271 -156 1430 -156 1118 0 1114 0 1400 116 404 163 1220 934 1460 1379 368 682 327 1497 -106 2145 -147 221 -1821 1881 -1970 1954 -162 80 -379 97 -536 41z m386 -306 c63 -24 1683 -1629 1815 -1799 432 -557 475 -1322 108 -1949 -63 -108 -187 -245 -535 -592 -705 -704 -662 -689 -2012 -689 -935 0 -964 1 -1101 44 -333 105 -595 362 -721 709 -28 78 -73 554 -54 576 4 5 92 -78 196 -185 238 -242 380 -275 420 -96 19 90 13 98 -650 760 -584 584 -619 624 -648 725 -73 255 109 497 373 497 147 0 191 -28 446 -282 264 -263 334 -300 424 -225 124 102 108 129 -332 575 -416 420 -463 484 -463 632 0 281 281 475 536 369 47 -20 221 -177 475 -430 433 -431 462 -449 571 -362 108 88 75 155 -226 459 -359 362 -413 491 -295 701 179 318 424 280 841 -130 313 -308 358 -333 456 -252 86 72 76 146 -35 274 -313 357 -22 832 411 670z"
44+
/>
45+
</g>
46+
</svg>
47+
</div>
48+
</template>
49+
50+
<script setup>
51+
import { ref } from 'vue';
52+
import { subscribe, dev_run } from '../util';
53+
54+
const isToggled = ref(false);
55+
const isVisible = ref(false);
56+
57+
subscribe('interactionMenu:eye:toggle', (value) => {
58+
isToggled.value = value;
59+
});
60+
subscribe('interactionMenu:eye:visible', (value) => {
61+
isVisible.value = value;
62+
});
63+
</script>
64+
65+
<style lang="scss">
66+
#eye {
67+
position: absolute;
68+
top: 50%;
69+
left: 50%;
70+
transform: translate(-50%, -50%);
71+
display: none;
72+
}
73+
74+
#eyeSvg {
75+
stroke: rgb(255, 255, 255);
76+
stroke-width: 25px;
77+
fill: none;
78+
}
79+
80+
#eyeSvg2 {
81+
filter: invert(1);
82+
}
83+
</style>

‎interactionDUI/fxmanifest.lua‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,6 @@ files {
2727
"dui/*.*",
2828
}
2929

30+
ui_page "dui/index.html"
31+
3032
lua54 'yes'

‎interactionMenu/config.shared.lua‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,21 @@ Config = {}
1313
Config.devMode = false
1414
Config.debugPoly = false
1515

16+
Config.provide = {
17+
ox_target = false,
18+
ox_target_test = false,
19+
qb_target = false,
20+
qb_target_test = false
21+
}
22+
23+
Config.indicator = {
24+
enabled = true,
25+
eye_enabled = false,
26+
27+
outline_enabled = false,
28+
outline_color = { 255, 255, 255, 255 },
29+
}
30+
1631
Config.interactionAudio = {
1732
mouseWheel = {
1833
audioName = 'NAV_UP_DOWN',
@@ -25,28 +40,14 @@ Config.interactionAudio = {
2540
}
2641

2742
Config.intervals = {
28-
detection = 500
29-
}
30-
31-
Config.features = {
32-
positionCorrection = true,
33-
timeBasedTheme = true,
34-
drawIndicator = {
35-
active = true
36-
}
43+
detection = 400
3744
}
3845

3946
Config.icons = {
40-
'stove',
41-
'stove2',
4247
'glowingball',
43-
'box',
44-
'wrench',
45-
'vending'
4648
}
4749

48-
Config.triggerZoneScript = 'PolyZone' -- ox_lib/PolyZone
49-
Config.screenBoundaryShape = 'none' -- circle/rectangle/none
50+
Config.screenBoundaryShape = 'none' -- circle/rectangle/none
5051
Config.controls = {
5152
-- Note: Player have to to reset their key bindings to default for changes to take effect.
5253

0 commit comments

Comments
 (0)