From 530e2f6ba620db30f78228f52cf5761484958f57 Mon Sep 17 00:00:00 2001 From: Luke Date: Fri, 7 May 2021 20:00:26 +0200 Subject: [PATCH] replace vehiclemenu --- .../Gui/vehiclemenu/main.ts | 6 +- .../assets/css/interaction/style.css | 109 ++++++++++++++++++ .../assets/css/interaction/style.css.map | 9 ++ .../assets/css/interaction/style.scss | 68 +++++++++++ .../assets/html/interaction/index.html | 53 +++++++++ .../assets/img/interaction/car-door.png | Bin 0 -> 490 bytes .../assets/img/interaction/credits.txt | 1 + .../assets/img/interaction/engine.png | Bin 0 -> 508 bytes .../assets/img/interaction/gas-station.png | Bin 0 -> 446 bytes .../assets/img/interaction/key.png | Bin 0 -> 782 bytes .../assets/img/interaction/parking.png | Bin 0 -> 524 bytes .../assets/js/interaction/main.js | 8 ++ 12 files changed, 249 insertions(+), 5 deletions(-) create mode 100644 ReallifeGamemode.Client/assets/css/interaction/style.css create mode 100644 ReallifeGamemode.Client/assets/css/interaction/style.css.map create mode 100644 ReallifeGamemode.Client/assets/css/interaction/style.scss create mode 100644 ReallifeGamemode.Client/assets/html/interaction/index.html create mode 100644 ReallifeGamemode.Client/assets/img/interaction/car-door.png create mode 100644 ReallifeGamemode.Client/assets/img/interaction/credits.txt create mode 100644 ReallifeGamemode.Client/assets/img/interaction/engine.png create mode 100644 ReallifeGamemode.Client/assets/img/interaction/gas-station.png create mode 100644 ReallifeGamemode.Client/assets/img/interaction/key.png create mode 100644 ReallifeGamemode.Client/assets/img/interaction/parking.png create mode 100644 ReallifeGamemode.Client/assets/js/interaction/main.js 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 0000000000000000000000000000000000000000..bc34e36254cfdcf4e286acd659a831ae320c9035 GIT binary patch literal 490 zcmVf@g z1e$;;LcRgCJ*7u+6I*^4_>3gqXD^og4*nmPakz^i-%#YgfHPp$v-Yx8w;js6-(VYf zx0-Z-{Xq5W_8SwTZol}JBHslL1NMj$0N4cH6#1hd4SxHC4*+a1yj6CA;{eWfudo4t z^%3$Xft>Ar;Q|0_KueK74d`t53=;rYRpbHA13TM&Ypwx?&Ktm@h}?_Fd<;oPy2hCL zUju5&YZp=t`LWPupd})6CAeth&VUwxcs|bL2AIjKV2p`>F8=|jiAcxg9&HUw6)8a3 z(^b07*qoM6N<$f}mN^9smFU literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..0f444384742b849d4e37c17060c323a0cad161db GIT binary patch literal 508 zcmV&VYSZV1am`BjkPAq%? zEq#t)6@(=E0HR(I;j_34m}7Tu*WJq*-LJg6nfd>l9cD!$k^fB+Iw62he3B$inl^lj z{RX0ex(Pl5I*PO5de(KUeFvg}NF?${0Q$g`a7=;js>Ba~c|h?CCS|p~w;^yKBDW&4 z>6=SMabv^sM)%qSRf`V-um{X6TRsN{iX1(MdP}&zS0%I^Or7`!Fs{siYk-DN;7}uI zX!WORG%x}B8Zm7kt42ADP77N}1 z^1;>c0knhZ32lIHgR9}ZB))b7_XhD}z&O;k8z_n2cl_RJ)2_;Zad62t_LXlvlYk;G zz$swd3;DMx=E2H-T$S zz7f#z7M~aDTAEOH1I1Mu=%79_C?!!Q_zZ3NkYwj00&F$fo=UO1u(35H+{&Wr#v02L~n z7=Z~$Z>{ujAfbuLj~zR^4c8}#rQZOd<7_;&DH1hY$vHRVeJJed*89qYgweNl(O-ow{L5}6RkdVzQj=zV}MVS z;ur%ggh7bt4zX!nj2$o{1qe+F5SkPqG$}x6q6`4cl%c$>Ho5?X`8#F!qpjZfKHwV7 z`^CN01Y=$)HF%}t7i4r>NMR*}IFnLt1}g;UKn^?sS6wS#68sF<-Y;U`LcOE_q4~4_ o0{!>-#q>=4`wpZ4i9{kS-&9XDbw>{=5C8xG07*qoM6N<$f)8E5@&Et; literal 0 HcmV?d00001 diff --git a/ReallifeGamemode.Client/assets/img/interaction/key.png b/ReallifeGamemode.Client/assets/img/interaction/key.png new file mode 100644 index 0000000000000000000000000000000000000000..f7e2ec3175849abc96f430ac35990e114749971b GIT binary patch literal 782 zcmV+p1M&QcP)eo}K~!jg?U=i36+sk-e{&%L-v}1wVYEn$RvN9;DA-uo_y`C_>_nom zRzdtTgn&drJB36|(9R+zF%k_H8Xu^o4^YuWM1%3O*c)8W-R#}X-Ayd!g9~@(%$fO} zbB39nl{_Ag$K&xV94<*GphePtNxLMimb6AvLDFYQuO$sj>UYi!<)m|N00)6_lJg8` z2NESFPvL8U!4$$RgFwSViEjlyR3Ltak3j1}i2o5GW(v3l90rT zSOI*=MRkaRf)h5(P3PRJaONfTOKOQJ;ucALK-ElxbMC98%P~HgP>{6KwDp?jPimq!c=9wv5y%0ErKOg2lN@+@I2`K2N4`LVU`((Nn@`I+3JmLV!i_? zB=N~xR3#K7y)$k0)Eqa@UB%^7FR9Deo@6O55x`wjm3CwAv}KE-!}xAY;R{ew?Q;DK zk_L>A-BvG38cUFiQAypV?PLPK$^bT-pr$B2$ZCLxF^L$Z^dPGx`VBSH3e0qRYTE5t zAfO630SpoBOq0d`9fS_BQ2*Yv;wuT@K!oi~+G>U-Jr^<86@}vQjqnwBx%zmZ34jchC084?zKqGLJ z;MVpl!tX86TxQPf0w@l+o#;xWF=k-T1oW^-lINAdMRm0Qm=FFaZWlt9*@W4@%)$k0UKc#6W*qUwT0S(XrOL7eI=5#4U7UqG)@i!`ha)f4Y&r*fgLkD_oeG9=m$mT z|G};#=LuI-KePc!I+m2Xg`3s)c8q3-tO0kx2QUFF@Vl=pn%Slg{mcYqRv;rjBIz+T z?WC-Juv5s)?tqQdpPGDz2AeDZiN1L%?r3z;HZK^TIDb= z;JVC>182ZM6%`fW8JID%>#Shz3YggyFa_+=*iNBIfPEarM