diff --git a/games/leitstelle/index.html b/games/leitstelle/index.html new file mode 100644 index 0000000..32504fe --- /dev/null +++ b/games/leitstelle/index.html @@ -0,0 +1,107 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + Leitstellenspiel | ubodigat.com + + + + + + + + + + + + + + + + + + + + + +
+
+

Karte

+
+
+ +
+

Statusmonitor

+
+

Wachen

+
    +
    +
    + +
    +

    Einsatzgenerator

    + +
    +
    +
    + + + + + \ No newline at end of file diff --git a/games/leitstelle/script.js b/games/leitstelle/script.js new file mode 100644 index 0000000..9a3393b --- /dev/null +++ b/games/leitstelle/script.js @@ -0,0 +1,58 @@ +let aktuelleEinsatzMarker; + +document.addEventListener('DOMContentLoaded', () => { + const einsatzErstellenButton = document.getElementById('einsatzErstellen'); + const einsatzDetails = document.getElementById('einsatzDetails'); + const wachenListe = document.getElementById('wachenListe'); + + const map = L.map('mapContainer').setView([52.520008, 13.404954], 13); + + L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); + + const wachen = [ + { name: 'Feuerwache 1', coords: [52.520008, 13.404954], fahrzeuge: ['Löschfahrzeug 1', 'Drehleiter 1'] }, + { name: 'Rettungswache 2', coords: [52.530008, 13.414954], fahrzeuge: ['Rettungswagen 1', 'Notarztwagen 1'] }, + { name: 'Polizeiwache 3', coords: [52.540008, 13.424954], fahrzeuge: ['Streifenwagen 1', 'Transporter 1'] } + ]; + + wachen.forEach(wache => { + const marker = L.marker(wache.coords).addTo(map); + marker.bindPopup(` +
    + ${wache.name}
    + ${wache.fahrzeuge.join('
    ')} +
    + `); + + const li = document.createElement('li'); + li.innerHTML = `
    ${wache.name}
    `; + const fahrzeugeUl = document.createElement('ul'); + wache.fahrzeuge.forEach(fahrzeug => { + const fahrzeugLi = document.createElement('li'); + fahrzeugLi.textContent = fahrzeug; + fahrzeugLi.classList.add('fahrzeug'); + fahrzeugLi.style.cursor = 'pointer'; + fahrzeugLi.addEventListener('click', () => alert(`Fahrzeug ${fahrzeug} zugewiesen!`)); + fahrzeugeUl.appendChild(fahrzeugLi); + }); + li.appendChild(fahrzeugeUl); + wachenListe.appendChild(li); + }); + + einsatzErstellenButton.addEventListener('click', () => { + const einsaetze = ['Wohnungsbrand', 'Verkehrsunfall', 'Herzinfarkt', 'Einbruchdiebstahl', 'Baum auf Straße']; + const randomEinsatz = einsaetze[Math.floor(Math.random() * einsaetze.length)]; + einsatzDetails.innerHTML = `Ein neuer Einsatz wurde generiert: ${randomEinsatz}`; + + const coords = [52.530008 + Math.random() * 0.01, 13.414954 + Math.random() * 0.01]; + if (aktuelleEinsatzMarker) aktuelleEinsatzMarker.remove(); + aktuelleEinsatzMarker = L.marker(coords).addTo(map); + + aktuelleEinsatzMarker.bindPopup(` +
    + ${randomEinsatz}
    + +
    + `).openPopup(); + }); +}); \ No newline at end of file diff --git a/games/leitstelle/style.css b/games/leitstelle/style.css new file mode 100644 index 0000000..7a6dc6a --- /dev/null +++ b/games/leitstelle/style.css @@ -0,0 +1,254 @@ +@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900'); +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + min-height: 100vh; + user-select: none; + background-color: #26282b; +} + +body::-webkit-scrollbar { + width: 12px; +} + +body::-webkit-scrollbar-track { + background: #26282b; +} + +body::-webkit-scrollbar-thumb { + background-color: #ffffff; + border-radius: 20px; + border: 4px solid #26282b; +} + +header { + background-color: #003a1e; + color: #fff; + text-align: start; + padding: 16px 100px; + font-size: 24px; + position: fixed; + left: 0; + right: 0; + top: 0; + opacity: 0.8; +} + +header:hover { + opacity: 1; +} + +header p { + position: start; + text-align: start; +} + +#headerinput { + margin-top: -40px; + display: flex; + justify-content: end; + align-items: flex-end; + text-align: end; +} + +#headerinput a button { + cursor: pointer; +} + +#überschriftlink { + text-decoration: none; + color: #fff; +} + +.button { + transition: 0.5s; + background-color: #012f6b; + color: #fff; + text-decoration: none; + border: unset; + padding: 12px; + border-radius: 7px; + min-width: 160px; + font-weight: 600; + margin-left: 10px; + box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%); +} + +.button:hover { + transition: 0.5s; + background-color: #006eff; + color: #003a1e; + font-weight: 800; +} + +.button a { + transition: 0.5s; + color: #fff; + text-decoration: none; +} + +#leitstellenhintergrund { + background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/bilder); + background-size: cover; + background-attachment: fixed; + background-position: center; +} + + +/*Responsive header*/ + +@media (max-width: 960px) { + #headerinput a { + margin-top: 50px; + } +} + +@media (max-width: 680px) { + #headerinput a { + margin-top: 50px; + } +} + +@media (max-width: 600px) { + #headerinput a { + margin-left: 40px; + margin-right: -40px; + } +} + +@media (max-width: 560px) { + #headerinput a { + margin-left: 65px; + margin-right: -65px; + } +} + +@media (max-width: 540px) { + header p a { + margin-left: -70px; + } + #headerinput { + display: flex; + margin-top: -85px; + margin-bottom: 0px; + } + #headerinput a button { + font-size: 10px; + margin-top: 40px; + margin-left: 900px; + padding: 10px; + min-width: 100px; + font-weight: 600; + margin-left: 5px; + } +} + +@media (max-width: 400px) { + nav header div { + margin-bottom: 10px; + } + header p a { + margin-left: -70px; + } + #headerinput { + display: flex; + margin-top: -80px; + margin-bottom: 0px; + } + #headerinput a button { + font-size: 10px; + margin-top: 40px; + margin-left: 900px; + padding: 10px; + min-width: 100px; + font-weight: 600; + margin-left: 5px; + } +} + +@media (max-width: 350px) { + nav header div { + margin-bottom: 10px; + } + header p a { + margin-left: -70px; + } + #headerinput { + display: flex; + margin-top: -80px; + margin-bottom: 0px; + } + #headerinput a { + margin-left: 80px; + margin-right: -80px; + } + #headerinput a button { + font-size: 10px; + margin-top: 40px; + margin-left: 900px; + padding: 10px; + min-width: 100px; + font-weight: 600; + margin-left: 5px; + } +} + + +/* Ab hier kein Grundcss code mehr*/ + +main { + flex: 1; + display: flex; + flex-wrap: wrap; + gap: 1rem; + padding: 1rem; +} + +section { + background: rgba(30, 30, 30, 0.9); + border: 1px solid #555; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); + padding: 1.2rem; + flex: 1 1 calc(50% - 1rem); + color: white; +} + +#mapContainer { + height: 600px; + width: 100%; + border-radius: 10px; +} + +ul { + list-style: none; + padding: 0; + margin: 0; +} + +ul li { + margin: 0.5rem 0; + padding: 0.8rem; + background-color: #555; + border-radius: 8px; + color: white; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); +} + +#einsatzDetails { + padding: 1rem; + background-color: #333; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); + color: white; + margin: 1rem 0; +} \ No newline at end of file diff --git a/games/pingpong/script.js b/games/pingpong/script.js index 29adffb..6e08307 100644 --- a/games/pingpong/script.js +++ b/games/pingpong/script.js @@ -40,8 +40,8 @@ document.addEventListener("keyup", function(event) { } }); -var initialBallSpeedX = 2; // Ursprünglicher Wert für die Geschwindigkeit des Balls in der X-Richtung -var initialBallSpeedY = 2; // Ursprünglicher Wert für die Geschwindigkeit des Balls in der Y-Richtung +var initialBallSpeedX = 7; // Ursprünglicher Wert für die Geschwindigkeit des Balls in der X-Richtung +var initialBallSpeedY = 7; // Ursprünglicher Wert für die Geschwindigkeit des Balls in der Y-Richtung var ballSpeedX = initialBallSpeedX; // Aktueller Wert für die Geschwindigkeit des Balls in der X-Richtung var ballSpeedY = initialBallSpeedY; // Aktueller Wert für die Geschwindigkeit des Balls in der Y-Richtung