Adminator
cfdfa4bb28
- Justier-Editor (editor.html): jedes Gebaeude in allen Stufen, 1x1 und Mega-2x2, Oeko an/aus - Sprite-Breite, Boden-Anker und Solarpanel- Position (dx/dy/s pro Sprite-Key) live auf echten Tiles tunen. Werte wirken sofort via localStorage-Override, Export-JSON zum Einbacken. - Bikepark umgebaut aufs Rodelbahn-Prinzip: 1x1-Station, Flowtrail- Strecke 5 Felder talwaerts mit Schwuengen, Platz wird SCHON BEIM BAU geprueft und reserviert (tile.bikeTrail blockiert Bebauung), fahrende Raeder mit Kurvenneigung (mehr Biker je Ausbaustufe), Ziel-Bogen. - Animationen: Spielplatz (Schaukel + Rutscher), Hochseilgarten (Zipline-Gleiter), Aussichtsplattform (Foto-Blitz), Fahrradverleih (drehendes Werkstatt-Rad), Gasthaus (Kamin-Dampf). - Ambiente: Wolkenschatten ziehen uebers Tal; Schafe auf Almen und Kuehe auf Talwiesen (grasen, deterministische Herdenplaetze, nicht im Winter). - Baumenue-Karten: oben Titel+Info links / Preis rechts, darunter zweispaltig Icon und Beschreibung. - Solar-Position pro Gebaeudetyp justierbar (SOLAR_POS). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
84 lines
3.9 KiB
HTML
84 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||
<title>Tourismustal – Sprite-Editor</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<style>
|
||
#edPanel {
|
||
position: fixed; top: 10px; left: 10px; z-index: 90;
|
||
width: min(340px, 92vw); max-height: calc(100dvh - 20px); overflow-y: auto;
|
||
padding: 14px 16px; font-size: 14px;
|
||
}
|
||
#edPanel h2 { margin: 0 0 10px; font-size: 16px; }
|
||
#edPanel label { display: block; font-weight: 700; font-size: 12px; margin: 10px 0 3px; color: #4a4f52; }
|
||
#edPanel select, #edPanel textarea { width: 100%; font-size: 14px; padding: 6px; border-radius: 8px; border: 1px solid #ccc; }
|
||
#edPanel textarea { height: 110px; font-family: monospace; font-size: 11px; }
|
||
.ed-row { display: flex; align-items: center; gap: 8px; }
|
||
.ed-row input[type=range] { flex: 1; }
|
||
.ed-row .val { width: 44px; text-align: right; font-family: monospace; font-size: 12px; }
|
||
.ed-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
|
||
.ed-btns button { flex: 1; padding: 8px 6px; border-radius: 8px; border: 1px solid #bbb; background: #f4f1e6; cursor: pointer; font-size: 13px; }
|
||
.ed-btns button.primary { background: #e8892b; color: #fff; border-color: #d07a20; font-weight: 700; }
|
||
.ed-lvl { display: flex; gap: 4px; }
|
||
.ed-lvl button { flex: 1; padding: 6px 0; border-radius: 8px; border: 1px solid #bbb; background: #fff; cursor: pointer; }
|
||
.ed-lvl button.active { background: #e8892b; color: #fff; border-color: #d07a20; font-weight: 700; }
|
||
.ed-check { display: flex; gap: 14px; margin-top: 8px; font-size: 13px; }
|
||
.ed-hint { font-size: 11px; color: #8a8a8a; margin-top: 4px; line-height: 1.4; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<canvas id="map"></canvas>
|
||
|
||
<div id="edPanel" class="panel">
|
||
<h2>🛠️ Sprite-Editor</h2>
|
||
|
||
<label>Gebäude</label>
|
||
<select id="edType"></select>
|
||
|
||
<label>Ausbaustufe</label>
|
||
<div class="ed-lvl" id="edLevels">
|
||
<button data-lvl="1" class="active">I</button>
|
||
<button data-lvl="2">II</button>
|
||
<button data-lvl="3">III</button>
|
||
<button data-lvl="4">IV</button>
|
||
</div>
|
||
|
||
<div class="ed-check">
|
||
<label style="margin:0;font-weight:400"><input type="checkbox" id="edMega"> 🏛️ Mega (2×2)</label>
|
||
<label style="margin:0;font-weight:400"><input type="checkbox" id="edEco" checked> 🌱 Öko (Solar)</label>
|
||
</div>
|
||
|
||
<label>Sprite-Breite <span style="color:#8a8a8a">(w)</span></label>
|
||
<div class="ed-row"><input type="range" id="edW" min="30" max="180" step="1"><span class="val" id="edWv"></span></div>
|
||
|
||
<label>Boden-Anker <span style="color:#8a8a8a">(bottom · größer = tiefer)</span></label>
|
||
<div class="ed-row"><input type="range" id="edB" min="-20" max="60" step="1"><span class="val" id="edBv"></span></div>
|
||
|
||
<label>☀️ Solar: horizontal (dx)</label>
|
||
<div class="ed-row"><input type="range" id="edSX" min="-60" max="60" step="1"><span class="val" id="edSXv"></span></div>
|
||
|
||
<label>☀️ Solar: vertikal (dy)</label>
|
||
<div class="ed-row"><input type="range" id="edSY" min="-80" max="20" step="1"><span class="val" id="edSYv"></span></div>
|
||
|
||
<label>☀️ Solar: Größe (s)</label>
|
||
<div class="ed-row"><input type="range" id="edSS" min="0.4" max="3" step="0.05"><span class="val" id="edSSv"></span></div>
|
||
|
||
<div class="ed-btns">
|
||
<button id="edReset">↩︎ Typ zurücksetzen</button>
|
||
<button id="edCopy" class="primary">📋 Export kopieren</button>
|
||
</div>
|
||
|
||
<label>Export (an Atlas schicken → wird fest eingebaut)</label>
|
||
<textarea id="edOut" readonly></textarea>
|
||
<div class="ed-hint">Werte wirken sofort – auch im echten Spiel auf DIESEM Gerät
|
||
(localStorage). Endgültig werden sie erst, wenn Atlas den Export in den Code übernimmt.
|
||
Karte: ziehen/zoomen wie im Spiel.</div>
|
||
</div>
|
||
|
||
<script type="module" src="js/editor-tune.js"></script>
|
||
</body>
|
||
</html>
|