Adminator
cf0afc5c02
editor.html + js/editor.js aus der Quelle uebernommen. save_map.php schreibt js/maps-custom.json (mit Auto-Backups) - jetzt abgesichert: nur eingeloggte Lehrpersonen duerfen speichern. Das Spiel laedt die Overrides beim Start (applyMapOverrides). Thomas fixt damit Routen- Punkte und Bauplaetze; die Datei wird danach ins Repo uebernommen. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
76 lines
3.4 KiB
HTML
76 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Karten-Editor – Tourismusregion</title>
|
||
<style>
|
||
:root { --green:#4f7f5e; --beige:#ede6d6; --orange:#e8892b; --ink:#2f3e46; }
|
||
* { box-sizing: border-box; }
|
||
html, body { margin:0; height:100%; overflow:hidden;
|
||
font-family:-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); }
|
||
#cv { position:fixed; inset:0; width:100%; height:100%; background:#e7dcc4; touch-action:none; }
|
||
#panel { position:fixed; top:10px; left:10px; width:265px; background:rgba(253,251,244,.95);
|
||
border-radius:14px; box-shadow:0 6px 20px rgba(47,62,70,.2); padding:12px 14px; z-index:10; }
|
||
h1 { font-size:15px; margin:0 0 8px; }
|
||
label { display:block; font-size:11px; color:#6b7a70; margin:8px 0 2px; text-transform:uppercase; letter-spacing:.03em; }
|
||
select, button { width:100%; padding:8px; border-radius:9px; border:1.5px solid #d9cfb4;
|
||
background:#fff; font-size:13px; font-family:inherit; margin-bottom:2px; }
|
||
button { cursor:pointer; }
|
||
button.primary { background:var(--orange); color:#fff; border:none; font-weight:700; }
|
||
button.mini { width:49%; display:inline-block; }
|
||
.mode { display:flex; gap:6px; }
|
||
.mode button { flex:1; }
|
||
.mode button.active { background:var(--green); color:#fff; border-color:var(--green); }
|
||
#hint { font-size:11px; line-height:1.45; color:#6b7a70; margin-top:8px; }
|
||
#status { font-size:12px; margin-top:6px; min-height:16px; font-weight:600; }
|
||
#out { width:100%; height:70px; font-size:10px; margin-top:6px; display:none; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<canvas id="cv"></canvas>
|
||
<div id="panel">
|
||
<h1>🛠️ Karten-Editor</h1>
|
||
<label>Karte</label>
|
||
<select id="mapSel"></select>
|
||
<label>Modus</label>
|
||
<div class="mode">
|
||
<button id="modePath" class="active">📍 Pfad</button>
|
||
<button id="modeSlot">🏗️ Bauslots</button>
|
||
</div>
|
||
<div id="pathTools">
|
||
<label>Route</label>
|
||
<select id="routeSel"></select>
|
||
</div>
|
||
<div id="slotTools" style="display:none">
|
||
<label>Zone für neue Slots</label>
|
||
<select id="zoneSel">
|
||
<option value="standard">Standard (alle Gebäude)</option>
|
||
<option value="road">Straße (Parkplatz/Bus)</option>
|
||
<option value="lake">Seeufer (Badesteg)</option>
|
||
<option value="hang">Hang (Skilift)</option>
|
||
<option value="berg">Berg (Almhütte/Aussicht)</option>
|
||
</select>
|
||
</div>
|
||
<label>Aktionen</label>
|
||
<button id="undoBtn" class="mini">↩︎ Rückgängig</button>
|
||
<button id="clearBtn" class="mini">🗑 Route leeren</button>
|
||
<button id="resetBtn" class="mini">♻︎ Original laden</button>
|
||
<button id="saveBtn" class="primary">💾 Speichern (ins Spiel)</button>
|
||
<div id="status"></div>
|
||
<textarea id="out" readonly></textarea>
|
||
<div id="hint">
|
||
<b>Klick</b> = Punkt/Slot setzen · <b>Ziehen</b> = verschieben ·
|
||
<b>Doppelklick</b> = löschen · <b>Rechte Maus/2 Finger</b> = Karte schieben ·
|
||
<b>Mausrad</b> = Zoom.<br>
|
||
Die orange Linie ist die geglättete Kurve, auf der die Figuren laufen.
|
||
Speichern schreibt <code>js/maps-custom.json</code> – das Spiel lädt sie
|
||
beim nächsten Start automatisch.<br>
|
||
<b>Jede Änderung wird sofort lokal im Browser gesichert</b> und beim Öffnen
|
||
wiederhergestellt – deine Arbeit geht nicht verloren.
|
||
</div>
|
||
</div>
|
||
<script type="module" src="js/editor.js"></script>
|
||
</body>
|
||
</html>
|