add Theorieteil drivingschool - html pop up

ReallifeGamemode.Client/Gui/drivingschool.ts

@@ -0,0 +1,39 @@
+/**
+ * @overview Life of German Reallife - Gui Introduction
+ * @author CroniX kopiert von MichaPlays
+ * @copyright (c) 2008 - 2021 Life of German
+ */
+
+export default function Introduction(globalData: IGlobalData): void {
+
+    var DrivingSchoolBrowser: BrowserMp = null;
+
+    mp.events.add("showDrivingSchool", () => {
+        if (DrivingSchoolBrowser !== null) {
+            DrivingSchoolBrowser.destroy();
+            DrivingSchoolBrowser = null;
+            globalData.InInput = false;
+            mp.gui.cursor.show(false, false);
+            mp.gui.chat.activate(true);
+        }
+        else if (!globalData.InInput) {
+            globalData.InInput = true;
+            DrivingSchoolBrowser = mp.browsers.new('package://assets/html/School/DrivingSchool.html');
+            mp.gui.chat.activate(false);
+            mp.gui.cursor.show(true, true);
+        }
+    });
+
+    mp.events.add("removeDrivingSchool", () => {
+        if (DrivingSchoolBrowser == null) {
+            return;
+        }
+        else if (globalData.InInput) {
+            DrivingSchoolBrowser.destroy();
+            DrivingSchoolBrowser = null;
+            globalData.InInput = false;
+            mp.gui.cursor.show(false, false);
+            mp.gui.chat.activate(true);
+        }
+    });
+}

ReallifeGamemode.Client/assets/css/School/style.css

@@ -0,0 +1,116 @@
+html {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    user-select: none;
+}
+
+*, *::before, *::after {
+    -webkit-box-sizing: inherit;
+    box-sizing: inherit;
+}
+
+body {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    height: 100vh;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    margin: 0 auto;
+    padding: 1em .5em;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    font-weight: 400;
+    color: #FFF;
+}
+
+main {
+    height: auto;
+    position: relative;
+    min-width: 50ch;
+    max-width: 35vw;
+    padding: 1em;
+    border-radius: .25em;
+    font-size: 1em;
+    line-height: 1.25;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+    main a#close {
+        position: absolute;
+        right: 1em;
+        top: 1em;
+        height: 1em;
+        width: 1em;
+        opacity: 0.25;
+    }
+
+        main a#close:hover {
+            opacity: 1;
+        }
+
+        main a#close:before, main a#close:after {
+            content: ' ';
+            position: absolute;
+            left: .5em;
+            height: 1em;
+            width: 2px;
+            background-color: #FFF;
+            border-radius: 1px;
+        }
+
+        main a#close:before {
+            -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+        }
+
+        main a#close:after {
+            -webkit-transform: rotate(-45deg);
+            transform: rotate(-45deg);
+        }
+
+    main h1, main p {
+        margin: 0;
+    }
+
+    main h1 {
+        font-size: 1.5em;
+        line-height: 1;
+        margin-bottom: .125em;
+        padding-right: 1em;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    main p {
+        margin-bottom: 1em;
+        line-height: 1.125;
+    }
+
+    main .form {
+        margin-top: .25em;
+    }
+
+        main .form input {
+            width: 100%;
+            padding: .5em;
+            font-family: "Roboto Mono";
+            font-weight: 500;
+            font-size: 1em;
+            border: none;
+            border-radius: 5px;
+            background-color: rgba(0, 0, 0, 0.125);
+            color: inherit;
+        }
+
+            main .form input:focus {
+                outline-width: 0;
+            }

ReallifeGamemode.Client/assets/html/School/DrivingSchool.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Eingabe | Life of German</title>
+
+    <link rel="stylesheet" href="package://assets/css/Introduction/style.css" />
+    <link rel="stylesheet" href="../../font/font-awesome/css/fontawesome.min.css">
+    <link rel="stylesheet" href="../../font/font-awesome/css/regular.min.css">
+    <link rel="stylesheet" href="../../font/roboto-mono/include_500.css">
+</head>
+
+<body>
+    <main>
+        <div class="input-main">
+            <h1>Fahrschule - Theorieteil</h1>
+        </div>
+        <div id="content" class="form" role="form">
+            Herzlich Willkommen bei der Fahrschule!<br /> <br />
+            Bevor du die praktische Prüfung startest, wird dir nachfolgend die Theorie gezeigt:<br /> <br />
+            <br />
+            • Die maxime Geschwindigkeit innerorts beträgt 100 km/h <br />
+            • Die maximale Geschwindigkeit außerorts beträgt 150 km/h <br />
+            • Den Blinker links setzt du mit der Taste NUM4<br />
+            • Den Blinker rechts setzt du mit der Taste NUM6<br />
+            • Warnblinklicht setzt du mit der Taste NUM5<br />
+            • Beschädigungen am Fahrzeug werden nicht geduldet<br />
+            • Fahre stets mit Rücksicht und achte auf deine Umgebung!<br />
+            <br /> <br />
+            Viel Erfolg bei der Prüfung!
+        </div>
+        <a target="_blank" id="close"></a>
+    </main> 
+    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
+    <script src="package://assets/js/School/application.js"></script>
+</body>
+</html>

ReallifeGamemode.Client/assets/js/School/application.js

@@ -0,0 +1,7 @@
+
+let close = document.getElementById('close');
+
+close.onclick = function closeWindow() {
+    mp.trigger('removeDrivingSchool');
+    console.log('Fenster geschlossen!');
+}

ReallifeGamemode.Client/index.ts

@@ -246,6 +246,9 @@ ahelp(globalData);
 import userhelp from './Gui/userhelp';
 userhelp(globalData);
 
+import drivingschool from './Gui/drivingschool';
+drivingschool(globalData);
+
 require('./Gui/policedepartment');
 
 interface VehicleData {

ReallifeGamemode.Server/DrivingSchool/DrivingSchool.cs

@@ -132,6 +132,7 @@ namespace ReallifeGamemode.Server.DrivingSchool
       }
 
       client.SetData("ActiveSchool", 0);
+      client.TriggerEvent("showDrivingSchool");
       client.TriggerEvent("renderTextOnScreen", "Sie haben die Führerscheinprüfung gestartet. Steigen Sie in eines der Fahrschulautos ein.");
       client.TriggerEvent("waitPlayerEntersVehicle");
     }
@@ -277,6 +278,7 @@ namespace ReallifeGamemode.Server.DrivingSchool
       }
 
       client.SetData("ActiveSchool", 2);
+      client.TriggerEvent("showDrivingSchool");
       client.TriggerEvent("renderTextOnScreen", "Sie haben die Führerscheinprüfung gestartet. Steigen Sie auf eines der Fahrschulmotorräder ein.");
       client.TriggerEvent("waitPlayerEntersVehicle");
     }