Skip to content

Commit

Permalink
15.12.2024 | Anpassung Pingpong & Erste Schritte neues Spiel
Browse files Browse the repository at this point in the history
  • Loading branch information
@ubodigat
ubodigat committed Dec 15, 2024
1 parent 55b49e4 commit c4c9d45
Show file tree
Hide file tree
Showing 4 changed files with 421 additions and 2 deletions.
107 changes: 107 additions & 0 deletions games/leitstelle/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="de">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="verify-v1" content="unique-string">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="website, lernapp, rechner, uhr, snake, description, beschreibung, u, bodigat, u:bodigat, ubodigat">
<meta name="author" content="U:Bodigat">
<meta name="publisher" content="U:Bodigat">
<meta name="copyright" content="U:Bodigat">
<meta name="description" content="Dieser Text befindet sich noch in arbeit.">
<meta property="og:site_name" content="U:Bodigat.com">
<meta property="og:url" content="https://ubodigat.com">
<meta property="og:title" content="Leitstellenspiel | ubodigat.com">
<meta property="og:type" content="website">
<meta property="og:description" content="Dieser Text befindet sich noch in arbeit.">
<meta property="og:image" content="https://cdn.discordapp.com/attachments/1068905447848943697/1161784440004022363/ubodigat_logo_breit_transparent_neutral.png?ex=65398f13&is=65271a13&hm=8bd1f6d65ee3d677dc79e1b8e6d58d7a292f9f88fa9816c01d0535a6d482cd9a&">
<meta property="og:image:secure_url" content="https://cdn.discordapp.com/attachments/1068905447848943697/1161784440004022363/ubodigat_logo_breit_transparent_neutral.png?ex=65398f13&is=65271a13&hm=8bd1f6d65ee3d677dc79e1b8e6d58d7a292f9f88fa9816c01d0535a6d482cd9a&">
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://ubodigat.com">
<meta property="twitter:title" content="Leitstellenspiel | ubodigat.com">
<meta property="twitter:description" content="Dieser Text befindet sich noch in arbeit.">
<meta property="twitter:image" content="https://cdn.discordapp.com/attachments/1068905447848943697/1161784440004022363/ubodigat_logo_breit_transparent_neutral.png?ex=65398f13&is=65271a13&hm=8bd1f6d65ee3d677dc79e1b8e6d58d7a292f9f88fa9816c01d0535a6d482cd9a&">
<title>Leitstellenspiel | ubodigat.com</title>
<link rel="icon" href="/bilder/Wartungsarbeitenprofilbild.png" type="image/x-icon">
<link rel="apple-touch-icon" href="https://ubodigat.com/bilder/Wartungsarbeitenprofilbild.png" />
<link rel="stylesheet" href="/games/leitstelle/style.css">
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
<script src="/games/leitstelle/script.js"></script>
<script src="/script.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-BE1B5EZY35"></script>
<script>
window.dataLayer = window.dataLayer || [];

function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'G-BE1B5EZY35');
</script>
<!-- Google Tag Manager -->
<script>
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-WTDQC48');
</script>
<!-- End Google Tag Manager -->
</head>

<body id="leitstellenhintergrund">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WTDQC48"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<nav>
<header>
<p> <a id="überschriftlink" href="https://ubodigat.com">U:Bodigat.com</a> | Leitstellenspiel</p>
<div id="headerinput">
<a href="https://ubodigat.com/datenschutz" target="_blank"> <button class="button">Datenschutz</button></a>
<a href="/games/gamemenü"> <button class="button">Zum Gamemenü</button></a>
</div>
</header>
</nav>

<main>
<section id="map">
<h2 style="color: white;">Karte</h2>
<div id="mapContainer"></div>
</section>

<section id="statusMonitor">
<h2 style="color: white;">Statusmonitor</h2>
<div id="wachen">
<h3 style="color: white;">Wachen</h3>
<ul id="wachenListe"></ul>
</div>
</section>

<section id="einsatzGenerator">
<h2 style="color: white;">Einsatzgenerator</h2>
<button class="button" id="einsatzErstellen">Einsatz generieren</button>
<div id="einsatzDetails" style="margin-top: 1rem; color: white;"></div>
</section>
</main>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

</body>

</html>
58 changes: 58 additions & 0 deletions games/leitstelle/script.js
View file
Original file line number Diff line number Diff line change
@@ -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(`
<div style="color: white;">
<strong>${wache.name}</strong><br>
${wache.fahrzeuge.join('<br>')}
</div>
`);

const li = document.createElement('li');
li.innerHTML = `<div style="color: white;"><strong>${wache.name}</strong></div>`;
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: <strong>${randomEinsatz}</strong>`;

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(`
<div style="color: white;">
<strong>${randomEinsatz}</strong><br>
<button onclick="alert('Fahrzeug zuweisen!')">Fahrzeug zuweisen</button>
</div>
`).openPopup();
});
});
Loading

0 comments on commit c4c9d45

Please sign in to comment.