616 lines
22 KiB
HTML
616 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Auto-Verwaltung</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
background: #111;
|
|
color: #eee;
|
|
font-family: Arial, sans-serif;
|
|
padding: 20px;
|
|
}
|
|
h1 { margin-top: 0; }
|
|
a.back { color: #6fbf73; text-decoration: none; font-size: 14px; }
|
|
a.back:hover { text-decoration: underline; }
|
|
|
|
.panel {
|
|
background: #1a1a1a;
|
|
border: 1px solid #333;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 10px;
|
|
}
|
|
th, td {
|
|
text-align: left;
|
|
padding: 8px;
|
|
border-bottom: 1px solid #333;
|
|
font-size: 14px;
|
|
}
|
|
th { color: #aaa; font-weight: normal; }
|
|
|
|
input {
|
|
background: #222;
|
|
border: 1px solid #444;
|
|
color: #eee;
|
|
padding: 6px 8px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
button {
|
|
background: #2c7a3d;
|
|
border: none;
|
|
color: white;
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
button.danger { background: #a83232; }
|
|
button:hover { opacity: 0.85; }
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 10px;
|
|
margin-top: 12px;
|
|
}
|
|
.form-grid label {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: #999;
|
|
margin-bottom: 4px;
|
|
}
|
|
.form-grid input { width: 100%; box-sizing: border-box; }
|
|
|
|
.color-swatch {
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 3px;
|
|
border: 1px solid #555;
|
|
vertical-align: middle;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.msg {
|
|
font-size: 13px;
|
|
color: #6fbf73;
|
|
min-height: 18px;
|
|
}
|
|
|
|
.car-preview {
|
|
display: inline-block;
|
|
border: 1px solid #444;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<a class="back" href="/index.html">← zurück zur Startseite</a> · <a class="back" href="/admin.html">Item/Shop-Verwaltung</a>
|
|
<h1>🚗 Auto-Verwaltung</h1>
|
|
|
|
<div class="panel">
|
|
<div class="msg" id="carMsg"></div>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>Model</th>
|
|
<th>Größe</th>
|
|
<th>Farbe</th>
|
|
<th>Max. Speed</th>
|
|
<th>Accel</th>
|
|
<th>Brake</th>
|
|
<th>Friction</th>
|
|
<th>Turn Speed</th>
|
|
<th>Tank</th>
|
|
<th>Verbrauch</th>
|
|
<th>Anhänger</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="carsTableBody"></tbody>
|
|
</table>
|
|
|
|
<h3>Modell hinzufügen / bearbeiten</h3>
|
|
<div class="form-grid">
|
|
<div>
|
|
<label>Model-Name</label>
|
|
<input id="cfgModel" placeholder="z.B. sedan">
|
|
</div>
|
|
<div>
|
|
<label>Breite</label>
|
|
<input id="cfgWidth" type="number" value="40">
|
|
</div>
|
|
<div>
|
|
<label>Höhe</label>
|
|
<input id="cfgHeight" type="number" value="22">
|
|
</div>
|
|
<div>
|
|
<label>Farbe</label>
|
|
<input id="cfgColor" type="color" value="#c0392b">
|
|
</div>
|
|
<div>
|
|
<label>Max. Speed</label>
|
|
<input id="cfgMaxSpeed" type="number" step="0.1" value="6">
|
|
</div>
|
|
<div>
|
|
<label>Beschleunigung</label>
|
|
<input id="cfgAccel" type="number" step="0.01" value="0.15">
|
|
</div>
|
|
<div>
|
|
<label>Bremskraft</label>
|
|
<input id="cfgBrake" type="number" step="0.01" value="0.3">
|
|
</div>
|
|
<div>
|
|
<label>Reibung</label>
|
|
<input id="cfgFriction" type="number" step="0.01" value="0.05">
|
|
</div>
|
|
<div>
|
|
<label>Lenkgeschwindigkeit</label>
|
|
<input id="cfgTurnSpeed" type="number" step="0.001" value="0.045">
|
|
</div>
|
|
<div>
|
|
<label>Tankgröße (Liter)</label>
|
|
<input id="cfgTankSize" type="number" step="1" value="50">
|
|
</div>
|
|
<div>
|
|
<label>Verbrauch (L/Tick)</label>
|
|
<input id="cfgConsumption" type="number" step="0.001" value="0.02">
|
|
</div>
|
|
<div>
|
|
<label style="display:flex; align-items:center; gap:6px; cursor:pointer;">
|
|
<input id="cfgIsTrailerModel" type="checkbox" style="width:auto;">
|
|
Als Anhänger im Shop verkaufen
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label>Anhänger-Preis (falls oben angehakt)</label>
|
|
<input id="cfgTrailerPrice" type="number" step="1" value="800">
|
|
</div>
|
|
<div style="display:flex; align-items:flex-end;">
|
|
<button onclick="saveCarConfig()">Speichern</button>
|
|
</div>
|
|
</div>
|
|
<div style="color:#888; font-size:12px; margin-top:8px;">
|
|
Tipp: gleichen Model-Namen erneut speichern = Modell wird aktualisiert (wirkt sich live auf alle
|
|
Autos dieses Modells im Spiel aus).
|
|
</div>
|
|
|
|
<h3>Karosserie bemalen (optional)</h3>
|
|
<p style="color:#888; font-size:12px; margin-top:0;">
|
|
Statt der reinen Flächenfarbe kannst du hier ein Pixel-Muster malen (z.B. Streifen, Muster, Logo).
|
|
Das Raster passt sich automatisch an die oben eingestellte Breite/Höhe an. "Vorne" ist rechts
|
|
(Pfeilspitze-Seite). Ohne gemalte Textur wird einfach die Flächenfarbe genutzt.
|
|
</p>
|
|
<div style="display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap;">
|
|
<div>
|
|
<canvas id="carPixelCanvas" width="400" height="300" style="border:1px solid #444; cursor:crosshair; image-rendering:pixelated; background:#c0392b;"></canvas>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px; min-width:180px;">
|
|
<label style="font-size:12px; color:#999;">Malfarbe</label>
|
|
<input id="carPixelColor" type="color" value="#ffffff" style="width:60px; height:36px; padding:2px; cursor:pointer;">
|
|
|
|
<div style="display:flex; gap:4px; flex-wrap:wrap; margin-top:4px;">
|
|
<button onclick="carPresetStripe()" style="font-size:11px;">Streifen mittig</button>
|
|
<button onclick="carPresetBorder()" style="font-size:11px;">Rand</button>
|
|
</div>
|
|
|
|
<button onclick="rebuildCarPixelGrid()" style="background:#555; margin-top:8px;">Raster an Breite/Höhe anpassen</button>
|
|
<button onclick="clearCarPixelCanvas()" style="background:#a83232;">Löschen (Grundfarbe)</button>
|
|
<button onclick="saveCarTexture()" style="background:#2c7a3d;">Textur speichern</button>
|
|
<button onclick="removeCarTexture()" style="background:#555;">Textur entfernen</button>
|
|
<div class="msg" id="carTextureMsg"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// -------------------------------------------------------------
|
|
// ZUGRIFFSSCHUTZ: nur eingeloggte Admins dürfen diese Seite nutzen
|
|
// -------------------------------------------------------------
|
|
const token = localStorage.getItem("token");
|
|
// Voll-Admin ODER passende Gruppen-Berechtigung reicht jetzt aus - der
|
|
// Server prüft das bei jedem Aufruf ohnehin final ab (siehe requireAdmin);
|
|
// hier reicht ein simpler Login-Check, authFetch() fängt fehlende Rechte
|
|
// beim ersten echten API-Aufruf sauber ab (Meldung + Weiterleitung)
|
|
let isAdmin = localStorage.getItem("isAdmin") === "true";
|
|
|
|
if (!token) {
|
|
alert("Bitte zuerst einloggen.");
|
|
location.href = "/index.html";
|
|
}
|
|
|
|
async function authFetch(url, options = {}) {
|
|
options.headers = { ...(options.headers || {}), "Authorization": "Bearer " + token };
|
|
const res = await fetch(url, options);
|
|
if (res.status === 401 || res.status === 403) {
|
|
alert("Sitzung abgelaufen oder kein Admin-Zugriff. Bitte erneut einloggen.");
|
|
location.href = "/index.html";
|
|
throw new Error("Nicht autorisiert");
|
|
}
|
|
return res;
|
|
}
|
|
|
|
let allCarConfigs = [];
|
|
|
|
async function loadCarConfigs() {
|
|
const res = await authFetch("/api/admin/car_configs");
|
|
const data = await res.json();
|
|
allCarConfigs = data.configs || [];
|
|
renderCarsTable();
|
|
}
|
|
|
|
function renderCarsTable() {
|
|
const body = document.getElementById("carsTableBody");
|
|
body.innerHTML = "";
|
|
|
|
allCarConfigs.forEach(cfg => {
|
|
const tr = document.createElement("tr");
|
|
|
|
const previewWidth = Math.min(cfg.width, 60);
|
|
const previewHeight = Math.min(cfg.height, 40);
|
|
|
|
tr.innerHTML = `
|
|
<td>
|
|
<div class="car-preview" style="width:${previewWidth}px; height:${previewHeight}px; background:${cfg.color};"></div>
|
|
</td>
|
|
<td>${cfg.model}</td>
|
|
<td>${cfg.width} x ${cfg.height}</td>
|
|
<td><span class="color-swatch" style="background:${cfg.color};"></span>${cfg.color}</td>
|
|
<td>${cfg.max_speed}</td>
|
|
<td>${cfg.accel}</td>
|
|
<td>${cfg.brake}</td>
|
|
<td>${cfg.friction}</td>
|
|
<td>${cfg.turn_speed}</td>
|
|
<td>${cfg.tank_size ?? 50}L</td>
|
|
<td>${cfg.consumption ?? 0.02}</td>
|
|
<td>${cfg.is_trailer_model ? `🚛 ${cfg.trailer_price}$` : "-"}</td>
|
|
<td>
|
|
<button onclick="editCarConfig('${cfg.model}')">Bearbeiten</button>
|
|
<button class="danger" onclick="deleteCarConfig('${cfg.model}')">Löschen</button>
|
|
</td>
|
|
`;
|
|
body.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
function editCarConfig(model) {
|
|
const cfg = allCarConfigs.find(c => c.model === model);
|
|
if (!cfg) return;
|
|
|
|
document.getElementById("cfgModel").value = cfg.model;
|
|
document.getElementById("cfgWidth").value = cfg.width;
|
|
document.getElementById("cfgHeight").value = cfg.height;
|
|
document.getElementById("cfgColor").value = cfg.color;
|
|
document.getElementById("cfgMaxSpeed").value = cfg.max_speed;
|
|
document.getElementById("cfgAccel").value = cfg.accel;
|
|
document.getElementById("cfgBrake").value = cfg.brake;
|
|
document.getElementById("cfgFriction").value = cfg.friction;
|
|
document.getElementById("cfgTurnSpeed").value = cfg.turn_speed;
|
|
document.getElementById("cfgTankSize").value = cfg.tank_size ?? 50;
|
|
document.getElementById("cfgConsumption").value = cfg.consumption ?? 0.02;
|
|
document.getElementById("cfgIsTrailerModel").checked = !!cfg.is_trailer_model;
|
|
document.getElementById("cfgTrailerPrice").value = cfg.trailer_price ?? 800;
|
|
|
|
rebuildCarPixelGrid();
|
|
if (cfg.image_data) {
|
|
loadCarTextureIntoGrid(cfg.image_data);
|
|
}
|
|
}
|
|
|
|
async function saveCarConfig() {
|
|
const model = document.getElementById("cfgModel").value.trim();
|
|
if (!model) {
|
|
showMsg("Model-Name ist Pflicht.", true);
|
|
return;
|
|
}
|
|
|
|
const payload = {
|
|
model,
|
|
width: Number(document.getElementById("cfgWidth").value) || 40,
|
|
height: Number(document.getElementById("cfgHeight").value) || 22,
|
|
color: document.getElementById("cfgColor").value,
|
|
maxSpeed: Number(document.getElementById("cfgMaxSpeed").value) || 6,
|
|
accel: Number(document.getElementById("cfgAccel").value) || 0.15,
|
|
brake: Number(document.getElementById("cfgBrake").value) || 0.3,
|
|
friction: Number(document.getElementById("cfgFriction").value) || 0.05,
|
|
turnSpeed: Number(document.getElementById("cfgTurnSpeed").value) || 0.045,
|
|
tankSize: Number(document.getElementById("cfgTankSize").value) || 50,
|
|
consumption: Number(document.getElementById("cfgConsumption").value) || 0.02,
|
|
isTrailerModel: document.getElementById("cfgIsTrailerModel").checked,
|
|
trailerPrice: Number(document.getElementById("cfgTrailerPrice").value) || null,
|
|
imageData: exportCarGridAsDataUrl()
|
|
};
|
|
|
|
const res = await authFetch("/api/admin/car_configs", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (data.ok) {
|
|
showMsg("Modell gespeichert.");
|
|
resetForm();
|
|
await loadCarConfigs();
|
|
} else {
|
|
showMsg("Fehler: " + (data.error || "unbekannt"), true);
|
|
}
|
|
}
|
|
|
|
async function deleteCarConfig(model) {
|
|
if (!confirm(`Modell "${model}" wirklich löschen?`)) return;
|
|
|
|
const res = await authFetch("/api/admin/car_configs/" + encodeURIComponent(model), { method: "DELETE" });
|
|
const data = await res.json();
|
|
|
|
if (data.ok) {
|
|
showMsg("Modell gelöscht.");
|
|
await loadCarConfigs();
|
|
} else {
|
|
showMsg("Fehler beim Löschen (evtl. noch Autos dieses Modells im Umlauf).", true);
|
|
}
|
|
}
|
|
|
|
function resetForm() {
|
|
document.getElementById("cfgModel").value = "";
|
|
document.getElementById("cfgWidth").value = 40;
|
|
document.getElementById("cfgHeight").value = 22;
|
|
document.getElementById("cfgColor").value = "#c0392b";
|
|
document.getElementById("cfgMaxSpeed").value = 6;
|
|
document.getElementById("cfgAccel").value = 0.15;
|
|
document.getElementById("cfgBrake").value = 0.3;
|
|
document.getElementById("cfgFriction").value = 0.05;
|
|
document.getElementById("cfgTurnSpeed").value = 0.045;
|
|
document.getElementById("cfgTankSize").value = 50;
|
|
document.getElementById("cfgConsumption").value = 0.02;
|
|
}
|
|
|
|
function showMsg(text, isError) {
|
|
const el = document.getElementById("carMsg");
|
|
el.style.color = isError ? "#e06c6c" : "#6fbf73";
|
|
el.textContent = text;
|
|
setTimeout(() => { el.textContent = ""; }, 4000);
|
|
}
|
|
|
|
// -------------------------------------------------------------
|
|
// PIXEL-EDITOR FÜR AUTO-TEXTUREN
|
|
// -------------------------------------------------------------
|
|
const carCanvas = document.getElementById("carPixelCanvas");
|
|
const carCtx = carCanvas.getContext("2d");
|
|
const CAR_DISPLAY_MAX = 380; // maximale Anzeigegröße im Editor
|
|
|
|
let carGridW = 40;
|
|
let carGridH = 22;
|
|
let carPixelGrid = [];
|
|
let carCellPxX = 8;
|
|
let carCellPxY = 8;
|
|
let carIsPainting = false;
|
|
|
|
function fillCarGridWithColor(color) {
|
|
carPixelGrid = [];
|
|
for (let y = 0; y < carGridH; y++) {
|
|
const row = [];
|
|
for (let x = 0; x < carGridW; x++) row.push(color);
|
|
carPixelGrid.push(row);
|
|
}
|
|
}
|
|
|
|
function rebuildCarPixelGrid() {
|
|
carGridW = Math.max(4, Math.min(200, parseInt(document.getElementById("cfgWidth").value) || 40));
|
|
carGridH = Math.max(4, Math.min(200, parseInt(document.getElementById("cfgHeight").value) || 22));
|
|
|
|
// Anzeige so skalieren, dass sie ins Canvas passt, Seitenverhältnis bleibt 1 Pixel = 1 "Auto-Pixel"
|
|
const scale = Math.min(CAR_DISPLAY_MAX / carGridW, CAR_DISPLAY_MAX / carGridH, 12);
|
|
carCellPxX = scale;
|
|
carCellPxY = scale;
|
|
|
|
carCanvas.width = carGridW * carCellPxX;
|
|
carCanvas.height = carGridH * carCellPxY;
|
|
|
|
fillCarGridWithColor(document.getElementById("cfgColor").value);
|
|
redrawCarPixelCanvas();
|
|
}
|
|
rebuildCarPixelGrid();
|
|
|
|
function redrawCarPixelCanvas() {
|
|
for (let y = 0; y < carGridH; y++) {
|
|
for (let x = 0; x < carGridW; x++) {
|
|
carCtx.fillStyle = carPixelGrid[y][x];
|
|
carCtx.fillRect(x * carCellPxX, y * carCellPxY, carCellPxX, carCellPxY);
|
|
}
|
|
}
|
|
// Pfeil zur Erinnerung, wo "vorne" ist (rechts)
|
|
carCtx.fillStyle = "rgba(255,255,255,0.5)";
|
|
carCtx.beginPath();
|
|
carCtx.moveTo(carCanvas.width - 2, carCanvas.height / 2 - 8);
|
|
carCtx.lineTo(carCanvas.width + 10, carCanvas.height / 2);
|
|
carCtx.lineTo(carCanvas.width - 2, carCanvas.height / 2 + 8);
|
|
carCtx.closePath();
|
|
carCtx.fill();
|
|
}
|
|
|
|
function loadCarTextureIntoGrid(dataUrl) {
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
const off = document.createElement("canvas");
|
|
off.width = carGridW;
|
|
off.height = carGridH;
|
|
const offCtx = off.getContext("2d");
|
|
offCtx.drawImage(img, 0, 0, carGridW, carGridH);
|
|
const data = offCtx.getImageData(0, 0, carGridW, carGridH).data;
|
|
|
|
for (let y = 0; y < carGridH; y++) {
|
|
for (let x = 0; x < carGridW; x++) {
|
|
const i = (y * carGridW + x) * 4;
|
|
carPixelGrid[y][x] = `rgb(${data[i]},${data[i + 1]},${data[i + 2]})`;
|
|
}
|
|
}
|
|
redrawCarPixelCanvas();
|
|
};
|
|
img.src = dataUrl;
|
|
}
|
|
|
|
function carPaintAt(clientX, clientY) {
|
|
const rect = carCanvas.getBoundingClientRect();
|
|
const x = Math.floor((clientX - rect.left) / (rect.width / carGridW));
|
|
const y = Math.floor((clientY - rect.top) / (rect.height / carGridH));
|
|
if (x < 0 || y < 0 || x >= carGridW || y >= carGridH) return;
|
|
|
|
carPixelGrid[y][x] = document.getElementById("carPixelColor").value;
|
|
redrawCarPixelCanvas();
|
|
}
|
|
|
|
carCanvas.addEventListener("mousedown", e => { carIsPainting = true; carPaintAt(e.clientX, e.clientY); });
|
|
carCanvas.addEventListener("mousemove", e => { if (carIsPainting) carPaintAt(e.clientX, e.clientY); });
|
|
window.addEventListener("mouseup", () => { carIsPainting = false; });
|
|
|
|
function clearCarPixelCanvas() {
|
|
fillCarGridWithColor(document.getElementById("cfgColor").value);
|
|
redrawCarPixelCanvas();
|
|
}
|
|
|
|
document.getElementById("cfgColor").addEventListener("input", e => {
|
|
carCanvas.style.background = e.target.value;
|
|
});
|
|
|
|
document.getElementById("cfgWidth").addEventListener("change", rebuildCarPixelGrid);
|
|
document.getElementById("cfgHeight").addEventListener("change", rebuildCarPixelGrid);
|
|
|
|
function carPresetStripe() {
|
|
const color = document.getElementById("carPixelColor").value;
|
|
const midStart = Math.floor(carGridH / 2) - 1;
|
|
for (let x = 0; x < carGridW; x++) {
|
|
carPixelGrid[midStart][x] = color;
|
|
if (midStart + 1 < carGridH) carPixelGrid[midStart + 1][x] = color;
|
|
}
|
|
redrawCarPixelCanvas();
|
|
}
|
|
|
|
function carPresetBorder() {
|
|
const color = document.getElementById("carPixelColor").value;
|
|
for (let x = 0; x < carGridW; x++) {
|
|
carPixelGrid[0][x] = color;
|
|
carPixelGrid[carGridH - 1][x] = color;
|
|
}
|
|
for (let y = 0; y < carGridH; y++) {
|
|
carPixelGrid[y][0] = color;
|
|
carPixelGrid[y][carGridW - 1] = color;
|
|
}
|
|
redrawCarPixelCanvas();
|
|
}
|
|
|
|
function exportCarGridAsDataUrl() {
|
|
const off = document.createElement("canvas");
|
|
off.width = carGridW;
|
|
off.height = carGridH;
|
|
const offCtx = off.getContext("2d");
|
|
for (let y = 0; y < carGridH; y++) {
|
|
for (let x = 0; x < carGridW; x++) {
|
|
offCtx.fillStyle = carPixelGrid[y][x];
|
|
offCtx.fillRect(x, y, 1, 1);
|
|
}
|
|
}
|
|
return off.toDataURL("image/png");
|
|
}
|
|
|
|
async function saveCarTexture() {
|
|
const model = document.getElementById("cfgModel").value.trim();
|
|
if (!model) {
|
|
showCarTextureMsg("Erst oben einen Model-Namen eintragen.", true);
|
|
return;
|
|
}
|
|
|
|
// restliche Fahrzeugwerte mitschicken, damit "Textur speichern" alleine funktioniert
|
|
const payload = {
|
|
model,
|
|
width: Number(document.getElementById("cfgWidth").value),
|
|
height: Number(document.getElementById("cfgHeight").value),
|
|
color: document.getElementById("cfgColor").value,
|
|
maxSpeed: Number(document.getElementById("cfgMaxSpeed").value),
|
|
accel: Number(document.getElementById("cfgAccel").value),
|
|
brake: Number(document.getElementById("cfgBrake").value),
|
|
friction: Number(document.getElementById("cfgFriction").value),
|
|
turnSpeed: Number(document.getElementById("cfgTurnSpeed").value),
|
|
tankSize: Number(document.getElementById("cfgTankSize").value),
|
|
consumption: Number(document.getElementById("cfgConsumption").value),
|
|
imageData: exportCarGridAsDataUrl()
|
|
};
|
|
|
|
const res = await authFetch("/api/admin/car_configs", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (data.ok) {
|
|
showCarTextureMsg("Textur gespeichert.");
|
|
await loadCarConfigs();
|
|
} else {
|
|
showCarTextureMsg("Fehler: " + (data.error || "unbekannt"), true);
|
|
}
|
|
}
|
|
|
|
async function removeCarTexture() {
|
|
const model = document.getElementById("cfgModel").value.trim();
|
|
if (!model) {
|
|
showCarTextureMsg("Erst oben einen Model-Namen eintragen.", true);
|
|
return;
|
|
}
|
|
|
|
const payload = {
|
|
model,
|
|
width: Number(document.getElementById("cfgWidth").value),
|
|
height: Number(document.getElementById("cfgHeight").value),
|
|
color: document.getElementById("cfgColor").value,
|
|
maxSpeed: Number(document.getElementById("cfgMaxSpeed").value),
|
|
accel: Number(document.getElementById("cfgAccel").value),
|
|
brake: Number(document.getElementById("cfgBrake").value),
|
|
friction: Number(document.getElementById("cfgFriction").value),
|
|
turnSpeed: Number(document.getElementById("cfgTurnSpeed").value),
|
|
tankSize: Number(document.getElementById("cfgTankSize").value),
|
|
consumption: Number(document.getElementById("cfgConsumption").value),
|
|
imageData: null
|
|
};
|
|
|
|
const res = await authFetch("/api/admin/car_configs", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (data.ok) {
|
|
showCarTextureMsg("Textur entfernt - nutzt jetzt wieder die Flächenfarbe.");
|
|
clearCarPixelCanvas();
|
|
await loadCarConfigs();
|
|
} else {
|
|
showCarTextureMsg("Fehler: " + (data.error || "unbekannt"), true);
|
|
}
|
|
}
|
|
|
|
function showCarTextureMsg(text, isError) {
|
|
const el = document.getElementById("carTextureMsg");
|
|
el.style.color = isError ? "#e06c6c" : "#6fbf73";
|
|
el.textContent = text;
|
|
setTimeout(() => { el.textContent = ""; }, 4000);
|
|
}
|
|
|
|
loadCarConfigs();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |