replace vehiclemenu

ReallifeGamemode.Client/Gui/vehiclemenu/main.ts

@@ -56,13 +56,9 @@ export default function vehicleMenu(globalData: IGlobalData) {
             globalData.InMenu = false;
             mp.gui.chat.show(true);
             mp.gui.cursor.show(false, false);
-            mp.game.graphics.stopScreenEffect("FocusIn");
-            mp.game.graphics.startScreenEffect("FocusOut", 0, false);
             return;
         } else {
-            mp.game.graphics.stopScreenEffect("FocusOut");
+            menuBrowser = mp.browsers.new("package://assets/html/interaction/index.html");
-            mp.game.graphics.startScreenEffect("FocusIn", 0, false);
-            menuBrowser = mp.browsers.new("package://assets/html/vehiclemenu/index.html");
             mp.gui.chat.show(false);
             globalData.InMenu = true;
             mp.gui.cursor.show(true, true);

ReallifeGamemode.Client/assets/css/interaction/style.css

@@ -0,0 +1,109 @@
+html {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+}
+
+html, body {
+  height: 100vh;
+  width: 100vw;
+}
+
+body {
+  margin: 0;
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+}
+
+main {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: absolute;
+  bottom: 15vh;
+}
+
+.vehicle-menu {
+  background-color: rgba(0, 0, 0, 0.5);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: .5em;
+  border-radius: 3px;
+  color: white;
+}
+
+.vehicle-menu__item {
+  width: 8em;
+  padding: .5em;
+  border-radius: 3px;
+}
+
+.vehicle-menu__item:not(:last-child) {
+  margin-right: .5em;
+}
+
+.vehicle-menu__item:hover {
+  background-color: rgba(0, 0, 0, 0.125);
+}
+
+.vehicle-menu__icon {
+  max-width: 3em;
+  height: auto;
+  -ms-flex-item-align: center;
+      -ms-grid-row-align: center;
+      align-self: center;
+}
+
+.vehicle-menu__text {
+  text-align: center;
+  margin-top: .5em;
+}
+
+.flex--column {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+/*# sourceMappingURL=style.css.map */

ReallifeGamemode.Client/assets/css/interaction/style.css.map

@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "AAAA,AAAA,IAAI,CAAC;EAAE,UAAU,EAAE,UAAU;CAAI;;AACjC,AAAA,CAAC,EAAE,CAAC,AAAA,OAAO,EAAE,CAAC,AAAA,MAAM,CAAC;EAAE,UAAU,EAAE,OAAO;CAAI;;AAE9C,AAAA,IAAI,EAAE,IAAI,CAAC;EACT,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,KAAK;CACb;;AAED,AAAA,IAAI,CAAC;EACH,MAAM,EAAE,CAAC;EACT,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,GAAG;EACnB,eAAe,EAAE,MAAM;EAEvB,WAAW,EAAE,oIAAoI;CAClJ;;AAED,AAAA,IAAI,CAAC;EACH,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,GAAG;EACnB,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,IAAI;CACb;;AAED,AAAA,aAAa,CAAC;EACZ,gBAAgB,EAAO,kBAAK;EAC5B,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EAEV,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,GAAG;EACnB,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,OAAO,EAAE,IAAI;EAEb,aAAa,EAAE,GAAG;EAClB,KAAK,EAAE,KAAK;CAsBb;;AApBE,AAAD,mBAAO,CAAC;EACN,KAAK,EAAE,GAAG;EACV,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,GAAG;CAInB;;AAPA,AAKC,mBALK,AAKJ,IAAK,CAAA,WAAW,EAAE;EAAE,YAAY,EAAE,IAAI;CAAI;;AAL5C,AAMC,mBANK,AAMJ,MAAM,CAAC;EAAE,gBAAgB,EAAO,oBAAK;CAAW;;AAGlD,AAAD,mBAAO,CAAC;EACN,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;EAEZ,UAAU,EAAE,MAAM;CACnB;;AAEA,AAAD,mBAAO,CAAC;EACN,UAAU,EAAE,MAAM;EAClB,UAAU,EAAE,IAAI;CACjB;;AAGH,AAAA,aAAa,CAAC;EACZ,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;CACvB",
+    "sources": [
+        "style.scss"
+    ],
+    "names": [],
+    "file": "style.css"
+}

ReallifeGamemode.Client/assets/css/interaction/style.scss

@@ -0,0 +1,68 @@
+html { box-sizing: border-box; }
+*, *:before, *:after { box-sizing: inherit; }
+
+html, body {
+  height: 100vh;
+  width: 100vw;
+}
+
+body {
+  margin: 0;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+}
+
+main {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  bottom: 15vh;
+}
+
+.vehicle-menu {
+  background-color: rgba(black, .5);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: .5em;
+
+  border-radius: 3px;
+  color: white;
+
+  &__item {
+    width: 8em;
+    padding: .5em;
+    border-radius: 3px;
+
+    &:not(:last-child) { margin-right: .5em; }
+    &:hover { background-color: rgba(black, .125); }
+  }
+
+  &__icon {
+    max-width: 3em;
+    height: auto;
+
+    align-self: center;
+  }
+
+  &__text {
+    text-align: center;
+    margin-top: .5em;
+  }
+}
+
+.flex--column {
+  display: flex;
+  flex-direction: column;
+}

ReallifeGamemode.Client/assets/html/interaction/index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <link rel="stylesheet" href="../../css/interaction/style.css">
+  <title>Fahrzeugmenu</title>
+</head>
+
+<body>
+  <main>
+    <ul class="vehicle-menu">
+      <li class="vehicle-menu__item" tabindex="8">
+        <div class="flex--column">
+          <img class="vehicle-menu__icon" src="../../img/interaction/engine.png"></img>
+          <span class="vehicle-menu__text">Motor<br>an-/ausschalten</span>
+        </div>
+      </li>
+      <li class="vehicle-menu__item" tabindex="5">
+        <div class="flex--column">
+          <img class="vehicle-menu__icon" src="../../img/interaction/key.png"></img>
+          <span class="vehicle-menu__text">Fahrzeug<br>auf-/abschließen</span>
+        </div>
+      </li>
+      <li class="vehicle-menu__item" tabindex="7">
+        <div class="flex--column">
+          <img class="vehicle-menu__icon" src="../../img/interaction/parking.png"></img>
+          <span class="vehicle-menu__text">Fahrzeug<br>parken</span>
+        </div>
+      </li>
+    <!--
+      <li class="vehicle-menu__item" tabindex="6">
+        <div class="flex--column">
+          <img class="vehicle-menu__icon" src="../../img/interaction/gas-station.png"></img>
+          <span class="vehicle-menu__text">Fahrzeug<br>tanken</span>
+        </div>
+      </li>
+    -->
+      <li class="vehicle-menu__item" tabindex="3">
+        <div class="flex--column">
+          <img class="vehicle-menu__icon" src="../../img/interaction/car-door.png"></img>
+          <span class="vehicle-menu__text">Türen<br>öffnen/schließen</span>
+        </div>
+      </li>
+    </ul>
+  </main>
+
+  <script src="../../js/jquery-3.3.1.min.js"></script>
+  <script src="../../js/interaction/main.js"></script>
+</body>
+</html>

ReallifeGamemode.Client/assets/img/interaction/credits.txt

@@ -0,0 +1 @@
+https://icons8.com/icons/material-outlined

ReallifeGamemode.Client/assets/js/interaction/main.js

@@ -0,0 +1,8 @@
+$(document).ready(function () {
+  $("li.vehicle-menu__item").click(function () {
+    var action = parseInt($(this).attr("tabindex"));
+
+    //console.log(action);
+    mp.trigger('doAction', action);
+  });
+});