Added vehicle interaction menu

This commit is contained in:
hydrant
2018-12-23 21:32:45 +01:00
parent 2191e1e201
commit bffb44387b
16 changed files with 724 additions and 30 deletions

View File

@@ -0,0 +1,38 @@
let menuBrowser = null;
mp.events.add('ToggleVehicleMenu', () => {
if (menuBrowser !== null) {
menuBrowser.destroy();
menuBrowser = null;
mp.gui.chat.show(true);
mp.gui.cursor.show(false, false);
mp.game.graphics.stopScreenEffect("FocusIn");
mp.game.graphics.startScreenEffect("FocusOut", 0, false);
return;
}
mp.game.graphics.stopScreenEffect("FocusOut");
mp.game.graphics.startScreenEffect("FocusIn", 0, false);
menuBrowser = mp.browsers.new("package://Gui/vehiclemenu/web/index.html");
mp.gui.chat.show(false);
mp.gui.cursor.show(true, true);
});
mp.events.add('doAction', (action) => {
mp.events.call('ToggleVehicleMenu');
switch (action) {
case 8: // Motor
mp.events.callRemote("VehicleMenu_ToggleEngine");
break;
case 5:
mp.events.callRemote("VehicleMenu_LockCar");
break;
case 3:
showDoorsMenu();
break;
}
});
function showDoorsMenu() {
}

View File

@@ -0,0 +1,443 @@
@font-face {
font-family: 'OSL';
src: url('../font/OpenSans-Bold.ttf') format('truetype');
}
*:focus {
outline: none;
}
body {
font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size:14px;
font-style:normal;
font-variant:normal;
font-weight:400;
line-height:3;
}
span.arrow {
display:none!important;
}
* {
box-sizing:Border-box;
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
color:#000!important;
font-family:OSL;
}
.circular-menu-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width:none;
width:auto;
}
.circular-menu {
width:600px;
height:600px;
position:relative;
overflow:hidden;
border-radius:50%;
z-index:1;
list-style:none;
box-shadow:0 0 15px #333;
}
.center-section {
width: 360px;
height: 360px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -180px;
margin-left: -180px;
border-radius: 50%;
text-align: center;
background-color: white;
box-shadow: inset 0 0 15px #333;
display: none;
z-index: 2;
cursor: default;
padding: 55px;
}
.circular-menu li:hover ~ .center-section.section-intro,.touch .circular-menu li:focus ~ .center-section.section-intro {
display:none;
}
.touch .circular-menu li:focus {
outline:0;
}
.circular-menu li div.label {
position:absolute;
width:180px;
height:180px;
z-index:2;
}
.circular-menu li div.label p {
text-align:center;
max-width:145.8px;
color:#000;
font-size: 12px;
margin: 65px 20px 7px;
line-height: 1;
}
.circular-menu li span.arrow {
position:absolute;
width:30px;
height:30px;
display:block;
transition:all 300ms ease-out;
z-index:2;
}
.circular-menu li .bg {
width:350px;
height:300px;
position:absolute;
transform-origin:0 300px;
margin-top:-300px;
left:50%;
top:50%;
transition: background 300ms ease-out;
}
.circular-menu li {
position:absolute;
text-decoration:none;
top:50%;
left:50%;
display:none;
}
.circular-menu li:nth-child(1) .bg {
transform:rotate(-70deg) skew(-50deg);
background:rgba(255,255,255,0.6);
}
.circular-menu li:nth-child(1) span.arrow {
transform:rotate(-45deg);
background:rgba(255,255,255,0.6);
margin:-225px 0 0 -15px;
}
.circular-menu li:nth-child(1) div.label {
margin:-330px 0 0 -90px;
}
.circular-menu li:nth-child(2) .bg {
transform:rotate(-30deg) skew(-50deg);
background:rgba(255,255,255,0.6);
}
.circular-menu li:nth-child(2) span.arrow {
transform:rotate(-5deg);
background:rgba(255,255,255,0.6);
margin:-175.869333055px 0 0 119.9853980342px;
}
.circular-menu li:nth-child(2) div.label {
margin:-273.8506663486px 0 0 64.2690263248px;
}
.circular-menu li:nth-child(3) .bg {
transform:rotate(10deg) skew(-50deg);
background:rgba(255,255,255,0.6);
}
.circular-menu li:nth-child(3) span.arrow {
transform:rotate(35deg);
background:rgba(255,255,255,0.6);
margin:-51.4661173101px 0 0 191.8096281326px;
}
.circular-menu li:nth-child(3) div.label {
margin:-131.6755626401px 0 0 146.3538607229px;
}
.circular-menu li:nth-child(4) .bg {
transform:rotate(50deg) skew(-50deg);
background:rgba(255,255,255,0.6);
}
.circular-menu li:nth-child(4) span.arrow {
transform:rotate(75deg);
background:rgba(255,255,255,0.6);
margin:90px 0 0 166.8653347947px;
}
.circular-menu li:nth-child(4) div.label {
margin:30px 0 0 117.8460969083px;
}
.circular-menu li:nth-child(5) .bg {
transform:rotate(90deg) skew(-50deg);
background:rgba(255,255,255,0.6);
}
.circular-menu li:nth-child(5) span.arrow {
transform:rotate(115deg);
background:rgba(255,255,255,0.6);
margin:182.335450365px 0 0 56.8242300984px;
}
.circular-menu li:nth-child(5) div.label {
margin:135.5262289886px 0 0 -7.9151656019px;
}
.circular-menu li:nth-child(6) .bg {
transform:rotate(130deg) skew(-50deg);
background:rgba(255,255,255,0.6);
}
.circular-menu li:nth-child(6) span.arrow {
transform:rotate(155deg);
background:rgba(255,255,255,0.6);
margin:182.335450365px 0 0 -86.8242300984px;
}
.circular-menu li:nth-child(6) div.label {
margin:135.5262289886px 0 0 -172.0848343982px;
}
.circular-menu li:nth-child(7) .bg {
transform:rotate(170deg) skew(-50deg);
background:rgba(255,255,255,0.6);
}
.circular-menu li:nth-child(7) span.arrow {
transform:rotate(195deg);
background:rgba(255,255,255,0.6);
margin:90px 0 0 -196.8653347945px;
}
.circular-menu li:nth-child(7) div.label {
margin:30px 0 0 -297.846096908px;
}
.circular-menu li:nth-child(8) .bg {
transform:rotate(210deg) skew(-50deg);
background:rgba(255,255,255,0.6);
}
.circular-menu li:nth-child(8) span.arrow {
transform:rotate(235deg);
background:rgba(255,255,255,0.6);
margin:-51.4661173026px 0 0 -221.8096280805px;
}
.circular-menu li:nth-child(8) div.label {
margin:-131.6755626315px 0 0 -326.3538606634px;
}
.circular-menu li:nth-child(9) .bg {
transform:rotate(250deg) skew(-50deg);
background:rgba(255,255,255,0.6);
}
.circular-menu li:nth-child(9) span.arrow {
transform:rotate(275deg);
background:rgba(255,255,255,0.6);
margin:-175.8693324509px 0 0 -149.985394581px;
}
.circular-menu li:nth-child(9) div.label {
margin:-273.8506656582px 0 0 -244.2690223782px;
}
.m {
margin-left:58px;
margin-top: -8px;
}
.m1 {
margin-left:2.4vw;
margin-top:-.6vw;
}
.m2 {
margin-left:60px;
margin-top: -7px;
}
.m4 {
margin-left:68px;
margin-top: -6px;
transform: rotate(-0deg);
width: 70px;
}
.m5 {
margin-left:53px;
margin-top: -6px;
transform: rotate(1deg);
}
.m6 {
transform:scaleX(-1);
margin-top:-5px;
margin-bottom:20px;
margin-left:54px;
max-width:none;
width:60px;
}
.middletext {
z-index:20000;
text-align:center;
color:#000!important;
position:absolute;
top:13vw;
left:48vw;
font-size:13px;
}
.information {
background:rgba(255,255,255,0.6);
border-radius:2px;
max-width:none;
width: 41vw;
box-shadow:0 0 15px #333;
position: absolute;
top: 630px;
left: 30vw;
margin-top: 1vw;
display: none;
}
.information-title {
text-align:center;
}
.information-text {
height:174px;
margin: 1px 40px 35px;
}
.center-section.section-intro,.circular-menu li:nth-child(1):hover div.center-section.section-1,.touch .circular-menu li:nth-child(1):focus div.center-section.section-1,.circular-menu li:nth-child(2):hover div.center-section.section-2,.touch .circular-menu li:nth-child(2):focus div.center-section.section-2,.circular-menu li:nth-child(3):hover div.center-section.section-3,.touch .circular-menu li:nth-child(3):focus div.center-section.section-3,.circular-menu li:nth-child(4):hover div.center-section.section-4,.touch .circular-menu li:nth-child(4):focus div.center-section.section-4,.circular-menu li:nth-child(5):hover div.center-section.section-5,.touch .circular-menu li:nth-child(5):focus div.center-section.section-5,.circular-menu li:nth-child(6):hover div.center-section.section-6,.touch .circular-menu li:nth-child(6):focus div.center-section.section-6,.circular-menu li:nth-child(7):hover div.center-section.section-7,.touch .circular-menu li:nth-child(7):focus div.center-section.section-7,.circular-menu li:nth-child(8):hover div.center-section.section-8,.touch .circular-menu li:nth-child(8):focus div.center-section.section-8,.circular-menu li:nth-child(9):hover div.center-section.section-9,.touch .circular-menu li:nth-child(9):focus div.center-section.section-9 {
display:block;
}
.circular-menu li:nth-child(1),.circular-menu li:nth-child(2),.circular-menu li:nth-child(3),.circular-menu li:nth-child(4),.circular-menu li:nth-child(5),.circular-menu li:nth-child(6),.circular-menu li:nth-child(7),.circular-menu li:nth-child(8),.circular-menu li:nth-child(9) {
display:block;
cursor:pointer;
}
.circular-menu li:nth-child(1):hover .bg,.touch .circular-menu li:nth-child(1):focus .bg,.circular-menu li:nth-child(2):hover .bg,.touch .circular-menu li:nth-child(2):focus .bg,.circular-menu li:nth-child(3):hover .bg,.touch .circular-menu li:nth-child(3):focus .bg,.circular-menu li:nth-child(4):hover .bg,.touch .circular-menu li:nth-child(4):focus .bg,.circular-menu li:nth-child(5):hover .bg,.touch .circular-menu li:nth-child(5):focus .bg,.circular-menu li:nth-child(6):hover .bg,.touch .circular-menu li:nth-child(6):focus .bg,.circular-menu li:nth-child(7):hover .bg,.touch .circular-menu li:nth-child(7):focus .bg,.circular-menu li:nth-child(8):hover .bg,.touch .circular-menu li:nth-child(8):focus .bg,.circular-menu li:nth-child(9):hover .bg,.touch .circular-menu li:nth-child(9):focus .bg {
background:rgba(255,255,255,0.9);
}
img {
width:60px;
}
.options {
background:rgba(255,255,255,0.6);
border-radius:2px;
max-width:none;
width:auto;
box-shadow:0 0 15px #333;
margin: 20px 16vw 20px 65vw;
position: relative;
z-index: 200;
top: 3vw;
padding-bottom: 0vw;
height: 17vw;
left: 9vw;
}
.options {
text-align:center;
}
.options-buttons {
padding-top: 0.2vw;
padding-bottom: 0.2vw;
background: #81ff9d;
border: 1px solid rgba(0, 0, 0, 0.2);
margin-left: 3vw;
margin-right: 3vw;
border-radius: 20px 0px;
cursor: pointer;
font-size: 1vw;
transition: 0.1s;
box-shadow: 0 0 5px #333;
}
.options-buttons:hover {
background: #b2ffc3;
}
.price {
height: 1vw;
padding: 2vw;
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(0, 0, 0, 0.3);
margin-left: 2vw;
margin-right: 2vw;
margin-top: 2vw;
/*box-shadow: 0 0 5px #333;*/
}
input:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i] {
padding: 0px 0px;
}
input {
-webkit-appearance: textfield;
background-color: #cccccc;
cursor: text;
padding: 1px;
border-width: 0px;
border-style: inset;
border-color: initial;
border-image: initial;
}
input, textarea, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 13.3333px Arial;
width: 280px;
margin-left: 171px;
height: 41px;
position: relative;
top: -30px;
font-size: 21px;
z-index: 10000000;
}
.price-text {
position: relative;
top: -2.6vw;
z-index: 2000000;
font-size: 1vw;
}
.number-dollar {
position: relative;
font-size: 2vw;
top: -8vw;
left: 5vw;
font-family: 'OSL';
}

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 697 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View File

@@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="circular-menu-container">
<div class="center-section section-intro">
</div>
<ul class="circular-menu">
<li class="" tabindex="1">
<div class="center-section section-1">
</div>
<span class="arrow"></span>
<div class="bg"></div>
<div class="label">
<p>Schließen</p>
<img class="m" src="img/exit.png">
</div>
</li>
<li class="" tabindex="2">
<div class="center-section section-2">
</div>
<span class="arrow"></span>
<div class="bg"></div>
<div class="label">
<!--<p>Geld Geben</p>
<img class="m4" src="img/i9.png">-->
</div>
</li>
<li class="" tabindex="3">
<div class="center-section section-3">
</div>
<span class="arrow"></span>
<div class="bg"></div>
<div class="label">
<p>Türen öffnen / schließen</p>
<img class="m6" src="img/door.png">
</div>
</li>
<li class="" tabindex="4">
<div class="center-section section-4">
</div>
<span class="arrow"></span>
<div class="bg"></div>
<div class="label">
<!--<p>Lizenzen zeigen</p>
<img class="m6" src="img/i11.png">-->
</div>
</li>
<li class="" tabindex="5">
<div class="center-section section-5">
</div>
<span class="arrow"></span>
<div class="bg"></div>
<div class="label">
<p>Auf -/ Abschließen</p>
<img class="m" src="img/lock.png">
</div>
</li>
<li class="" tabindex="6">
<div class="center-section section-6">
</div>
<span class="arrow"></span>
<div class="bg"></div>
<div class="label">
<p>Tanken</p>
<img class="m2" src="img/fill.png">
</div>
</li>
<li class="" tabindex="7">
<div class="center-section section-7">
</div>
<span class="arrow"></span>
<div class="bg"></div>
<div class="label">
<!--<p>Personalausweis ansehen</p>
<img class="m" src="img/i10.png">-->
</div>
</li>
<li class="" tabindex="8">
<div class="center-section section-8">
</div>
<span class="arrow"></span>
<div class="bg"></div>
<div class="label">
<p>Motor betätigen</p>
<img class="m" src="img/power.png">
</div>
</li>
<li class="" tabindex="9">
<div class="center-section section-9">
</div>
<span class="arrow"></span>
<div class="bg"></div>
<div class="label">
<!--<p>Durchsuchen</p>
<img class="m5" src="img/i14.png">-->
</div>
</li>
</ul>
</div>
<script src="package://Dependencies/jquery-3.3.1.min.js"></script>
<!--<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>-->
<script>
$(document).ready(function () {
$("ul li").click(function () {
var action = parseInt($(this).attr("tabindex"));
console.log(action);
mp.trigger('doAction', action);
});
});
</script>
</body>
</html>

View File

@@ -36,17 +36,25 @@ mp.events.add('render', () => {
direction = global.gameplayCam.getDirection(); direction = global.gameplayCam.getDirection();
coords = global.gameplayCam.getCoord(); coords = global.gameplayCam.getCoord();
coords.x = coords.x.toFixed(2);
coords.y = coords.y.toFixed(2);
coords.z = coords.z.toFixed(2);
direction.x = direction.x.toFixed(2);
direction.y = direction.y.toFixed(2);
direction.z = direction.z.toFixed(2);
mp.game.graphics.drawText(`Coords: ${JSON.stringify(coords)}`, [0.5, 0.005], { mp.game.graphics.drawText(`Coords: ${JSON.stringify(coords)}`, [0.5, 0.005], {
font: 0, font: 0,
color: [255, 255, 255, 185], color: [255, 255, 255, 185],
scale: [0.3, 0.3], scale: [0.3, 0.3],
outline: true, outline: true
}); });
mp.game.graphics.drawText(`pointAtCoord: ${JSON.stringify(pointingAt(fly.point_distance).position)}`, [0.5, 0.025], { mp.game.graphics.drawText(`pointAtCoord: ${JSON.stringify(pointingAt(fly.point_distance).position)}`, [0.5, 0.025], {
font: 0, font: 0,
color: [255, 255, 255, 185], color: [255, 255, 255, 185],
scale: [0.3, 0.3], scale: [0.3, 0.3],
outline: true, outline: true
}); });
if (controls.isControlJustPressed(0, controlsIds.F5)) { if (controls.isControlJustPressed(0, controlsIds.F5)) {

View File

@@ -24,6 +24,7 @@ require('./Gui/infobox.js');
require('./Gui/nametags.js'); require('./Gui/nametags.js');
require('./Gui/playerlist.js'); require('./Gui/playerlist.js');
require('./Gui/Inventory/inventory.js'); require('./Gui/Inventory/inventory.js');
require('./Gui/vehiclemenu/main.js');
require('./Login/main.js'); require('./Login/main.js');

View File

@@ -23,7 +23,7 @@ namespace reallife_gamemode.Model
protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
{ {
base.OnConfiguring(optionsBuilder); base.OnConfiguring(optionsBuilder);
optionsBuilder.UseMySql("Host=localhost;Port=3306;Database=gtav-devdb;Username=gtav-dev;Password=Test123"); optionsBuilder.UseMySql("Host=localhost;Port=3306;Database=gtav-devdb;Username=gtav-dev;Password=fnweT2QpW9v50v4nX2B6_FllpWI8L1y!l?toFFdDylRsfwHVd8eWDHDY63rmA8Y0gu8K7k8hYx1O76VK");
} }
protected override void OnModelCreating(ModelBuilder modelBuilder) protected override void OnModelCreating(ModelBuilder modelBuilder)

View File

@@ -200,37 +200,27 @@ namespace reallife_gamemode.Server.Events
public void KeyPressN(Client player) public void KeyPressN(Client player)
{ {
if (!player.IsLoggedIn()) return; if (!player.IsLoggedIn()) return;
if (player.IsInVehicle && player.VehicleSeat == -1)
{
Vehicle v = player.Vehicle;
bool state = VehicleStreaming.GetEngineState(v);
ServerVehicle sV = v.GetServerVehicle();
if (sV != null)
{
if (sV is ShopVehicle)
{
VehicleStreaming.SetEngineState(v, false);
return;
}
else if(sV is FactionVehicle fV)
{
if(fV.FactionId != player.GetUser().FactionId && !state)
{
return;
}
}
}
VehicleStreaming.SetEngineState(v, !state);
}
} }
[RemoteEvent("keyPress:X")] [RemoteEvent("keyPress:X")]
public void KeyPressX(Client player) public void KeyPressX(Client player)
{ {
if (!player.IsLoggedIn()) return; if (!player.IsLoggedIn()) return;
if (player.IsInVehicle) if (player.IsInVehicle && player.VehicleSeat == -1)
{ {
player.Seatbelt = !player.Seatbelt; ServerVehicle veh = player.Vehicle.GetServerVehicle();
if(veh != null)
{
if(veh is FactionVehicle fV && fV.FactionId != player.GetUser()?.FactionId && (!player.GetUser()?.IsAdmin(AdminLevel.ADMIN3) ?? false))
{
return;
}
else if(veh is ShopVehicle)
{
return;
}
}
player.TriggerEvent("ToggleVehicleMenu");
} }
} }
} }

View File

@@ -0,0 +1,92 @@
using GTANetworkAPI;
using reallife_gamemode.Server.Entities;
using reallife_gamemode.Server.Extensions;
using reallife_gamemode.Server.Util;
using System;
using System.Collections.Generic;
using System.Text;
namespace reallife_gamemode.Server.Events
{
public class VehicleMenu : Script
{
[RemoteEvent("VehicleMenu_ToggleEngine")]
public void VehicleMenuToggleEngineEvent(Client player)
{
if (player.IsInVehicle && player.VehicleSeat == -1)
{
Vehicle v = player.Vehicle;
User u = player.GetUser();
if (u == null) return;
if (NAPI.Entity.GetEntityVelocity(v).Length() > 1)
{
player.SendNotification("~r~Der Motor kann nur im Stand betätigt werden.", true);
return;
}
bool state = VehicleStreaming.GetEngineState(v);
ServerVehicle sV = v.GetServerVehicle();
if (sV != null)
{
if (sV is ShopVehicle)
{
VehicleStreaming.SetEngineState(v, false);
return;
}
else if (sV is FactionVehicle fV)
{
if (fV.FactionId != u.FactionId && !state)
{
return;
}
}
}
VehicleStreaming.SetEngineState(v, !state);
}
}
[RemoteEvent("VehicleMenu_LockCar")]
public void VehicleMenuLockCarEvent(Client player)
{
if (player.IsInVehicle && player.VehicleSeat == -1)
{
Vehicle v = player.Vehicle;
User u = player.GetUser();
if (u == null) return;
bool state = VehicleStreaming.GetLockState(v);
ServerVehicle sV = v.GetServerVehicle();
if (sV != null)
{
if (sV is ShopVehicle)
{
VehicleStreaming.SetEngineState(v, false);
return;
}
else if (sV is FactionVehicle fV)
{
if (fV.FactionId != u.FactionId)
{
return;
}
}
else if(sV is UserVehicle uV)
{
if(uV.UserId != u.Id && !u.IsAdmin(AdminLevel.ADMIN3))
{
return;
}
}
}
VehicleStreaming.SetLockStatus(v, !state);
string msg = "Fahrzeug ";
msg += !state ? "~r~abgeschlossen" : "~g~abgeschlossen";
player.SendNotification(msg);
}
}
}
}

View File

@@ -4,6 +4,8 @@ using System;
using System.Collections.Generic; using System.Collections.Generic;
using System.Text; using System.Text;
using reallife_gamemode.Model; using reallife_gamemode.Model;
using reallife_gamemode.Server.Util;
using reallife_gamemode.Server.Extensions;
namespace reallife_gamemode.Server.Managers namespace reallife_gamemode.Server.Managers
{ {
@@ -60,7 +62,9 @@ namespace reallife_gamemode.Server.Managers
"zr3803", "zr3803",
"flashgt", "flashgt",
"gb200", "gb200",
"dominator3" "dominator3",
"schwartzerc",
"schwartzerc2"
}; };
private static Dictionary<int, NetHandle> _serverVehicles = new Dictionary<int, NetHandle>(); private static Dictionary<int, NetHandle> _serverVehicles = new Dictionary<int, NetHandle>();

View File

@@ -256,8 +256,6 @@ namespace reallife_gamemode.Server.Util
} }
} }
NAPI.Util.ConsoleOutput("new data for handle " + veh.Handle.Value);
return default(VehicleSyncData); //null return default(VehicleSyncData); //null
} }