timo/bordervillegame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Erster Commit

Browse Source
This commit is contained in:
timo
2026-08-22 08:40:29 +02:00
commit 875477d425
1961 changed files with 930336 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin_cars.html
+616
View File
@@ -0,0 +1,616 @@
<!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">&larr; 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>