diff --git a/ReallifeGamemode.Client/Gui/vehiclemenu/main.ts b/ReallifeGamemode.Client/Gui/vehiclemenu/main.ts index 12d0e72d..ef6aceec 100644 --- a/ReallifeGamemode.Client/Gui/vehiclemenu/main.ts +++ b/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"); - mp.game.graphics.startScreenEffect("FocusIn", 0, false); - menuBrowser = mp.browsers.new("package://assets/html/vehiclemenu/index.html"); + menuBrowser = mp.browsers.new("package://assets/html/interaction/index.html"); mp.gui.chat.show(false); globalData.InMenu = true; mp.gui.cursor.show(true, true); diff --git a/ReallifeGamemode.Client/assets/css/interaction/style.css b/ReallifeGamemode.Client/assets/css/interaction/style.css new file mode 100644 index 00000000..b86bbf1f --- /dev/null +++ b/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 */ \ No newline at end of file diff --git a/ReallifeGamemode.Client/assets/css/interaction/style.css.map b/ReallifeGamemode.Client/assets/css/interaction/style.css.map new file mode 100644 index 00000000..3d23dda6 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/ReallifeGamemode.Client/assets/css/interaction/style.scss b/ReallifeGamemode.Client/assets/css/interaction/style.scss new file mode 100644 index 00000000..591604ae --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/ReallifeGamemode.Client/assets/html/interaction/index.html b/ReallifeGamemode.Client/assets/html/interaction/index.html new file mode 100644 index 00000000..c95f86a5 --- /dev/null +++ b/ReallifeGamemode.Client/assets/html/interaction/index.html @@ -0,0 +1,53 @@ + + + + + + + + + Fahrzeugmenu + + + +
+ +
+ + + + + \ No newline at end of file diff --git a/ReallifeGamemode.Client/assets/img/interaction/car-door.png b/ReallifeGamemode.Client/assets/img/interaction/car-door.png new file mode 100644 index 00000000..bc34e362 Binary files /dev/null and b/ReallifeGamemode.Client/assets/img/interaction/car-door.png differ diff --git a/ReallifeGamemode.Client/assets/img/interaction/credits.txt b/ReallifeGamemode.Client/assets/img/interaction/credits.txt new file mode 100644 index 00000000..7904fa4d --- /dev/null +++ b/ReallifeGamemode.Client/assets/img/interaction/credits.txt @@ -0,0 +1 @@ +https://icons8.com/icons/material-outlined \ No newline at end of file diff --git a/ReallifeGamemode.Client/assets/img/interaction/engine.png b/ReallifeGamemode.Client/assets/img/interaction/engine.png new file mode 100644 index 00000000..0f444384 Binary files /dev/null and b/ReallifeGamemode.Client/assets/img/interaction/engine.png differ diff --git a/ReallifeGamemode.Client/assets/img/interaction/gas-station.png b/ReallifeGamemode.Client/assets/img/interaction/gas-station.png new file mode 100644 index 00000000..15bd3cc0 Binary files /dev/null and b/ReallifeGamemode.Client/assets/img/interaction/gas-station.png differ diff --git a/ReallifeGamemode.Client/assets/img/interaction/key.png b/ReallifeGamemode.Client/assets/img/interaction/key.png new file mode 100644 index 00000000..f7e2ec31 Binary files /dev/null and b/ReallifeGamemode.Client/assets/img/interaction/key.png differ diff --git a/ReallifeGamemode.Client/assets/img/interaction/parking.png b/ReallifeGamemode.Client/assets/img/interaction/parking.png new file mode 100644 index 00000000..bdc5645a Binary files /dev/null and b/ReallifeGamemode.Client/assets/img/interaction/parking.png differ diff --git a/ReallifeGamemode.Client/assets/js/interaction/main.js b/ReallifeGamemode.Client/assets/js/interaction/main.js new file mode 100644 index 00000000..27ee6027 --- /dev/null +++ b/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); + }); +}); \ No newline at end of file