Dicken/dickendock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: Hex Wars - Zoom, Zug-Bestätigung, Design-Fix, Admin-Löschen

Browse Source
This commit is contained in:
Dicken
2026-06-26 11:30:16 +02:00
parent c90490b64b
commit ada2625813
2 changed files with 254 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
backend/src/tools/gebietseroberung/routes.js
View File

@@ -251,3 +251,13 @@ router.post('/:id/resign', authenticate, (req, res) => {
});
module.exports = router;
// ── Spiel löschen (nur Admin, nur beendete/aufgegebene) ───────────────────────
router.delete('/:id', authenticate, (req, res) => {
if (req.user?.role !== 'admin') return res.status(403).json({ error: 'Kein Zugriff' });
const game = db.prepare('SELECT * FROM geo_games WHERE id=?').get(req.params.id);
if (!game) return res.status(404).json({ error: 'Nicht gefunden' });
if (game.status !== 'finished') return res.status(400).json({ error: 'Nur beendete Spiele können gelöscht werden' });
db.prepare('DELETE FROM geo_games WHERE id=?').run(req.params.id);
res.json({ ok: true });
});

397
frontend/src/tools/gebietseroberung.jsx
View File

@@ -1,9 +1,10 @@
import { useState, useEffect, useCallback } from 'react';
import { useState, useEffect, useCallback, useRef } from 'react';
import { api, S } from '../lib.js';
const GRID = 20;
const GRID = 20;
const MY_COLOR = '#4ecdc4';
const OPP_COLOR = '#ff6b9d';
const DIRS8 = [[-1,-1],[-1,0],[-1,1],[0,-1],[0,1],[1,-1],[1,0],[1,1]];
function getMyId() {
try {
@@ -12,30 +13,39 @@ function getMyId() {
return JSON.parse(atob(token.split('.')[1])).id || null;
} catch { return null; }
}
function getMyRole() {
try {
const token = localStorage.getItem('sk_token');
if (!token) return null;
return JSON.parse(atob(token.split('.')[1])).role || null;
} catch { return null; }
}
// ── Spielerklärung ────────────────────────────────────────────────────────────
function HelpModal({ onClose }) {
return (
<div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.75)', display:'flex', alignItems:'center', justifyContent:'center', zIndex:1000, padding:20 }}>
<div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.8)', display:'flex', alignItems:'center', justifyContent:'center', zIndex:1000, padding:20 }}>
<div style={{ ...S.card, maxWidth:440, width:'100%' }}>
<div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16 }}>
<span style={{ color:'#fff', fontFamily:'Space Mono,monospace', fontSize:15, fontWeight:700 }}>⬡ Wie funktioniert's?</span>
<div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:18 }}>
<span style={{ color:'#fff', fontFamily:'Space Mono,monospace', fontSize:14, fontWeight:700, letterSpacing:1 }}>⬡ SPIELREGELN</span>
<button onClick={onClose} style={S.btn('#ff6b9d', true)}>✕ Schließen</button>
</div>
<div style={{ color:'rgba(255,255,255,0.75)', fontSize:13, lineHeight:1.8, fontFamily:'monospace' }}>
<p style={{ marginTop:0 }}><strong style={{ color:MY_COLOR }}>Dein Ziel:</strong> Am Ende mehr Felder als dein Gegner besitzen.</p>
<p><strong style={{ color:'#fff' }}>So geht's:</strong><br/>
Jeder Spieler startet in einer Ecke des 20×20 Rasters. Abwechselnd wählst du eine
<strong style={{ color:'rgba(255,255,255,0.9)' }}> neutrale (graue) Zelle</strong>,
die an dein Gebiet grenzt — auch diagonal.</p>
<div style={{ color:'rgba(255,255,255,0.7)', fontSize:13, lineHeight:1.9, fontFamily:'monospace' }}>
<p style={{ marginTop:0 }}><strong style={{ color:MY_COLOR }}>Ziel:</strong> Am Ende mehr Felder als dein Gegner besitzen.</p>
<p><strong style={{ color:'#fff' }}>Ablauf:</strong><br/>
Beide starten in einer Ecke. Abwechselnd wählst du eine
<strong style={{ color:'rgba(255,255,255,0.9)' }}> graue Zelle</strong> die an dein Gebiet grenzt
(auch diagonal). Bestätige deinen Zug bevor er gespeichert wird.
</p>
<p><strong style={{ color:'#fff' }}>Taktik:</strong><br/>
Breite dich aus — aber mauere deinen Gegner
<strong style={{ color:OPP_COLOR }}> ein</strong>, bevor er dich einsperrt!</p>
Expand schnell — aber <strong style={{ color:OPP_COLOR }}>mauere deinen Gegner ein</strong> bevor er dich einsperrt!
</p>
<p><strong style={{ color:'#fff' }}>Ende:</strong><br/>
Wenn niemand mehr expandieren kann, gewinnt wer mehr Felder hat.
Du kriegst eine <strong>Pushover-Benachrichtigung</strong> wenn du dran bist.</p>
<div style={{ background:'rgba(255,255,255,0.04)', borderRadius:8, padding:'10px 14px', marginTop:8, border:'1px solid rgba(255,255,255,0.08)' }}>
💡 <em>Leuchtende Felder sind anklickbar — alle 8 Richtungen (inkl. Diagonal).</em>
Wenn niemand mehr ziehen kann, gewinnt wer mehr Felder hat.
Du bekommst eine <strong>Pushover-Benachrichtigung</strong> wenn du dran bist.
</p>
<div style={{ background:'rgba(255,255,255,0.04)', borderRadius:8, padding:'10px 14px', border:'1px solid rgba(255,255,255,0.08)', marginTop:4 }}>
📱 <em>Auf dem Handy: Pinch zum Zoomen, dann Zug antippen und bestätigen.</em>
</div>
</div>
</div>
@@ -64,14 +74,14 @@ function NewGameModal({ onClose, onCreated, toast }) {
};
return (
<div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.75)', display:'flex', alignItems:'center', justifyContent:'center', zIndex:1000, padding:20 }}>
<div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.8)', display:'flex', alignItems:'center', justifyContent:'center', zIndex:1000, padding:20 }}>
<div style={{ ...S.card, maxWidth:360, width:'100%' }}>
<div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16 }}>
<span style={{ color:'#fff', fontFamily:'Space Mono,monospace', fontSize:14, fontWeight:700 }}>Neues Spiel</span>
<div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:18 }}>
<span style={{ color:'#fff', fontFamily:'Space Mono,monospace', fontSize:13, fontWeight:700, letterSpacing:1 }}>NEUES SPIEL</span>
<button onClick={onClose} style={S.btn('#666666', true)}>✕</button>
</div>
<label style={{ ...S.head, display:'block', marginBottom:6 }}>GEGNER WÄHLEN</label>
<select value={oppId} onChange={e => setOppId(e.target.value)} style={{ ...S.inp, marginBottom:16 }}>
<div style={{ ...S.head, marginBottom:6 }}>GEGNER WÄHLEN</div>
<select value={oppId} onChange={e => setOppId(e.target.value)} style={{ ...S.inp, marginBottom:18 }}>
<option value=''>-- Benutzer wählen --</option>
{users.map(u => <option key={u.id} value={u.id}>{u.username}</option>)}
</select>
@@ -89,31 +99,26 @@ function NewGameModal({ onClose, onCreated, toast }) {
// ── Topliste ──────────────────────────────────────────────────────────────────
function Leaderboard() {
const [rows, setRows] = useState(null);
useEffect(() => {
api('/tools/gebietseroberung/leaderboard').then(setRows).catch(() => setRows([]));
}, []);
if (rows === null) return <div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:12, padding:'20px 0', textAlign:'center' }}>Lade…</div>;
useEffect(() => { api('/tools/gebietseroberung/leaderboard').then(setRows).catch(() => setRows([])); }, []);
if (rows === null) return null;
const medals = ['🥇','🥈','🥉'];
return (
<div style={{ marginTop:24 }}>
<div style={{ marginTop:28 }}>
<div style={{ ...S.head, marginBottom:10 }}>TOPLISTE — SIEGE</div>
{rows.length === 0
? <div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:12, textAlign:'center', padding:'12px 0' }}>Noch keine abgeschlossenen Spiele.</div>
? <div style={{ color:'rgba(255,255,255,0.25)', fontFamily:'monospace', fontSize:12, textAlign:'center', padding:'16px 0' }}>
Noch keine abgeschlossenen Spiele.
</div>
: rows.map((r, i) => (
<div key={r.username} style={{
display:'flex', alignItems:'center', gap:10,
padding:'8px 12px', marginBottom:6,
display:'flex', alignItems:'center', gap:12,
padding:'10px 14px', marginBottom:6,
background:'rgba(255,255,255,0.03)',
border:'1px solid rgba(255,255,255,0.07)',
borderRadius:8,
border:'1px solid rgba(255,255,255,0.07)', borderRadius:8,
}}>
<span style={{ fontSize:16, width:24, textAlign:'center' }}>{medals[i] || `${i+1}.`}</span>
<span style={{ fontSize:16, width:24, textAlign:'center', flexShrink:0 }}>{medals[i] || `${i+1}.`}</span>
<span style={{ flex:1, color:'#fff', fontFamily:'monospace', fontSize:13 }}>{r.username}</span>
<span style={{ color:MY_COLOR, fontFamily:'Space Mono,monospace', fontSize:15, fontWeight:700 }}>{r.wins}</span>
<span style={{ color:MY_COLOR, fontFamily:'Space Mono,monospace', fontSize:16, fontWeight:700 }}>{r.wins}</span>
<span style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:10 }}>Siege</span>
</div>
))
@@ -122,10 +127,11 @@ function Leaderboard() {
);
}
// ── Spielfeld ─────────────────────────────────────────────────────────────────
function GameBoard({ game, myId, onMove }) {
const [hover, setHover] = useState(null);
const [moving, setMoving] = useState(false);
// ── Spielfeld mit Zoom + Zug-Bestätigung ──────────────────────────────────────
function GameBoard({ game, myId, onMove, toast }) {
const [pending, setPending] = useState(null); // { row, col } — gewählter aber noch nicht bestätigter Zug
const [moving, setMoving] = useState(false);
const containerRef = useRef(null);
const grid = JSON.parse(game.grid);
const isMyTurn = game.current_turn === myId;
@@ -134,18 +140,28 @@ function GameBoard({ game, myId, onMove }) {
const oppColor = game.owner_id === myId ? OPP_COLOR : MY_COLOR;
const oppName = game.owner_id === myId ? game.opp_name : game.owner_name;
// Diagonal erlaubt: alle 8 Richtungen
const isAdj = (r, c) => [[-1,-1],[-1,0],[-1,1],[0,-1],[0,1],[1,-1],[1,0],[1,1]].some(([dr,dc]) => {
const isAdj = (r, c) => DIRS8.some(([dr,dc]) => {
const nr = r+dr, nc = c+dc;
return nr>=0 && nr<GRID && nc>=0 && nc<GRID && grid[nr][nc] === myId;
});
const canClick = (r, c) => isMyTurn && game.status === 'active' && grid[r][c] === 0 && isAdj(r, c);
const handleClick = async (r, c) => {
const handleCellClick = (r, c) => {
if (!canClick(r, c) || moving) return;
// Gleiche Zelle nochmal → Abwählen
if (pending?.row === r && pending?.col === c) { setPending(null); return; }
setPending({ row: r, col: c });
};
const confirmMove = async () => {
if (!pending || moving) return;
setMoving(true);
try { await onMove(r, c); } finally { setMoving(false); }
try {
await onMove(pending.row, pending.col);
setPending(null);
} catch(e) {
toast?.(e.message || 'Fehler', 'error');
} finally { setMoving(false); }
};
const myCount = grid.flat().filter(v => v === myId).length;
@@ -154,152 +170,209 @@ function GameBoard({ game, myId, onMove }) {
let banner = null;
if (game.status === 'finished') {
if (!game.winner_id) banner = { text:'Unentschieden! 🤝', color:'#ffe66d' };
else if (game.winner_id === myId) banner = { text:'Du hast gewonnen! 🎉', color:MY_COLOR };
else banner = { text:'Du hast verloren.', color:OPP_COLOR };
if (!game.winner_id) banner = { text:'Unentschieden! 🤝', color:'#ffe66d' };
else if (game.winner_id === myId) banner = { text:'Du hast gewonnen! 🎉', color:MY_COLOR };
else banner = { text:'Du hast verloren.', color:OPP_COLOR };
}
const vw = Math.min(window.innerWidth, 520);
const cellSize = Math.floor((vw - 40) / GRID);
// Zellgröße: Grid passt ins Viewport, aber per CSS transform zoom möglich
const vw = Math.min(window.innerWidth, 600);
const cellSize = Math.max(14, Math.floor((vw - 32) / GRID));
return (
<div>
<div style={{ display:'flex', gap:8, alignItems:'center', marginBottom:10 }}>
<div style={{ ...S.card, padding:'8px 12px', flex:1 }}>
<div style={{ color:myColor, fontFamily:'monospace', fontSize:10, marginBottom:2 }}>DU</div>
<div style={{ color:'#fff', fontFamily:'Space Mono,monospace', fontSize:22, fontWeight:700 }}>{myCount}</div>
{/* Scoreboard */}
<div style={{ display:'flex', gap:10, alignItems:'stretch', marginBottom:14 }}>
<div style={{ ...S.card, padding:'10px 14px', flex:1 }}>
<div style={{ color:myColor, fontFamily:'monospace', fontSize:10, letterSpacing:1, marginBottom:4 }}>DU</div>
<div style={{ color:'#fff', fontFamily:'Space Mono,monospace', fontSize:24, fontWeight:700, lineHeight:1 }}>{myCount}</div>
<div style={{ color:'rgba(255,255,255,0.25)', fontFamily:'monospace', fontSize:10, marginTop:2 }}>Felder</div>
</div>
<div style={{ textAlign:'center', color:'rgba(255,255,255,0.35)', fontFamily:'monospace', fontSize:10, lineHeight:1.5 }}>
{neutral}<br/>frei
<div style={{ display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:2, padding:'0 4px' }}>
<div style={{ color:'rgba(255,255,255,0.5)', fontFamily:'monospace', fontSize:13, fontWeight:700 }}>vs</div>
<div style={{ color:'rgba(255,255,255,0.25)', fontFamily:'monospace', fontSize:10 }}>{neutral} frei</div>
</div>
<div style={{ ...S.card, padding:'8px 12px', flex:1, textAlign:'right' }}>
<div style={{ color:oppColor, fontFamily:'monospace', fontSize:10, marginBottom:2 }}>{oppName}</div>
<div style={{ color:'#fff', fontFamily:'Space Mono,monospace', fontSize:22, fontWeight:700 }}>{oppCount}</div>
<div style={{ ...S.card, padding:'10px 14px', flex:1, textAlign:'right' }}>
<div style={{ color:oppColor, fontFamily:'monospace', fontSize:10, letterSpacing:1, marginBottom:4 }}>{oppName?.toUpperCase()}</div>
<div style={{ color:'#fff', fontFamily:'Space Mono,monospace', fontSize:24, fontWeight:700, lineHeight:1 }}>{oppCount}</div>
<div style={{ color:'rgba(255,255,255,0.25)', fontFamily:'monospace', fontSize:10, marginTop:2 }}>Felder</div>
</div>
</div>
{/* Gewinner-Banner */}
{banner && (
<div style={{
background:`${banner.color}22`, border:`1px solid ${banner.color}55`,
borderRadius:8, padding:'10px 14px', marginBottom:10,
color:banner.color, fontFamily:'Space Mono,monospace', fontSize:14,
textAlign:'center', fontWeight:700,
background:`${banner.color}18`, border:`1px solid ${banner.color}44`,
borderRadius:10, padding:'12px 16px', marginBottom:14,
color:banner.color, fontFamily:'Space Mono,monospace', fontSize:15,
textAlign:'center', fontWeight:700, letterSpacing:1,
}}>{banner.text}</div>
)}
{/* Zug-Status + Bestätigungs-Bar */}
{game.status === 'active' && (
<div style={{ color: isMyTurn ? myColor : 'rgba(255,255,255,0.35)', fontFamily:'monospace', fontSize:11, marginBottom:8, textAlign:'center' }}>
{isMyTurn ? (moving ? 'Zug wird gespeichert…' : '▶ Dein Zug') : `⏳ ${oppName} ist dran…`}
<div style={{ marginBottom:10 }}>
{!isMyTurn && (
<div style={{ color:'rgba(255,255,255,0.35)', fontFamily:'monospace', fontSize:12, textAlign:'center', padding:'8px 0' }}>
⏳ {oppName} ist dran…
</div>
)}
{isMyTurn && !pending && (
<div style={{ color:myColor, fontFamily:'monospace', fontSize:12, textAlign:'center', padding:'8px 0' }}>
▶ Wähle ein Feld
</div>
)}
{isMyTurn && pending && (
<div style={{
display:'flex', alignItems:'center', gap:10,
background:`${myColor}12`, border:`1px solid ${myColor}44`,
borderRadius:8, padding:'10px 14px',
}}>
<span style={{ color:myColor, fontFamily:'monospace', fontSize:12, flex:1 }}>
✦ Zeile {pending.row + 1}, Spalte {pending.col + 1} — Zug bestätigen?
</span>
<button onClick={() => setPending(null)} style={S.btn('#666666', true)}>✕</button>
<button onClick={confirmMove} disabled={moving} style={S.btn(MY_COLOR, true)}>
{moving ? '…' : '✓ Ja'}
</button>
</div>
)}
</div>
)}
<div style={{
display:'grid',
gridTemplateColumns:`repeat(${GRID}, ${cellSize}px)`,
gap:1,
background:'rgba(255,255,255,0.04)',
borderRadius:8,
padding:3,
}}>
{grid.map((row, r) => row.map((cell, c) => {
const key = `${r}-${c}`;
const clic = canClick(r, c);
const hov = hover === key && clic;
let bg = 'rgba(255,255,255,0.05)';
if (cell === myId) bg = `${myColor}55`;
if (cell === opponent) bg = `${oppColor}55`;
if (clic && !hov) bg = `${myColor}22`;
if (hov) bg = `${myColor}66`;
return (
<div
key={key}
onClick={() => handleClick(r, c)}
onMouseEnter={() => setHover(key)}
onMouseLeave={() => setHover(null)}
style={{
width:cellSize, height:cellSize,
background:bg, borderRadius:1,
cursor: clic ? 'pointer' : 'default',
transition:'background 0.08s',
border: clic ? `1px solid ${myColor}55` : '1px solid transparent',
boxSizing:'border-box',
}}
/>
);
}))}
{/* Grid — overflow:auto + touch-action:pinch-zoom für Handy-Zoom */}
<div
ref={containerRef}
style={{
overflowX:'auto', overflowY:'auto',
WebkitOverflowScrolling:'touch',
touchAction:'pinch-zoom',
maxHeight:'60vh',
borderRadius:8,
}}
>
<div style={{
display:'grid',
gridTemplateColumns:`repeat(${GRID}, ${cellSize}px)`,
gap:1,
background:'rgba(255,255,255,0.04)',
borderRadius:8,
padding:3,
width:'fit-content',
}}>
{grid.map((row, r) => row.map((cell, c) => {
const clic = canClick(r, c);
const isPending = pending?.row === r && pending?.col === c;
let bg = 'rgba(255,255,255,0.05)';
if (cell === myId) bg = `${myColor}55`;
if (cell === opponent) bg = `${oppColor}55`;
if (clic) bg = `${myColor}20`;
if (isPending) bg = myColor;
return (
<div
key={`${r}-${c}`}
onClick={() => handleCellClick(r, c)}
style={{
width:cellSize, height:cellSize,
background:bg,
borderRadius:1,
cursor: clic ? 'pointer' : 'default',
transition:'background 0.08s',
border: isPending ? `2px solid ${myColor}` : clic ? `1px solid ${myColor}44` : '1px solid transparent',
boxSizing:'border-box',
}}
/>
);
}))}
</div>
</div>
<div style={{ color:'rgba(255,255,255,0.2)', fontFamily:'monospace', fontSize:10, textAlign:'center', marginTop:6 }}>
📱 Pinch zum Zoomen
</div>
</div>
);
}
// ── Spielliste ────────────────────────────────────────────────────────────────
function GameList({ games, myId, onSelect, onNew }) {
function GameList({ games, myId, isAdmin, onSelect, onNew, onDelete, toast }) {
const active = games.filter(g => g.status === 'active');
// Beendet: nur Spiele mit mind. 2 Zügen (mind. 1 pro Spieler)
const finished = games.filter(g => g.status === 'finished' && (g.move_count || 0) >= 2);
const GameRow = ({ g }) => {
const isMyTurn = g.status === 'active' && g.current_turn === myId;
const opp = g.owner_id === myId ? g.opp_name : g.owner_name;
const grid = JSON.parse(g.grid);
const myCount = grid.flat().filter(v => v === myId).length;
const oppCount = grid.flat().filter(v => v !== myId && v !== 0).length;
let result = null;
if (g.status === 'finished') {
if (!g.winner_id) result = { label:'Unentschieden', color:'#ffe66d' };
else if (g.winner_id === myId) result = { label:'Gewonnen 🎉', color:MY_COLOR };
else result = { label:'Verloren', color:OPP_COLOR };
}
return (
<button onClick={() => onSelect(g.id)} style={{
...S.card, width:'100%', textAlign:'left', cursor:'pointer',
padding:'12px 14px', marginBottom:8, display:'flex', alignItems:'center', gap:12,
border: isMyTurn ? '1px solid rgba(78,205,196,0.4)' : '1px solid rgba(255,255,255,0.07)',
}}>
<div style={{ flex:1 }}>
<div style={{ color:'#fff', fontFamily:'monospace', fontSize:13, marginBottom:3 }}>
{isMyTurn && <span style={{ color:MY_COLOR, marginRight:6 }}>▶</span>}
vs <strong>{opp}</strong>
</div>
<div style={{ color:'rgba(255,255,255,0.4)', fontSize:11, fontFamily:'monospace' }}>
{myCount} : {oppCount} Felder
</div>
</div>
{result
? <span style={{ color:result.color, fontSize:11, fontFamily:'monospace' }}>{result.label}</span>
: <span style={{ color: isMyTurn ? MY_COLOR : 'rgba(255,255,255,0.3)', fontSize:11, fontFamily:'monospace' }}>
{isMyTurn ? 'Du bist dran' : 'Gegner dran'}
</span>
}
</button>
);
};
// Sub-Komponente AUSSERHALB von GameList definiert (weiter unten als top-level)
return (
<div>
<button onClick={onNew} style={{ ...S.btn('#4ecdc4'), marginBottom:20, width:'100%' }}>
<button onClick={onNew} style={{ ...S.btn('#4ecdc4'), width:'100%', marginBottom:20, padding:'10px 14px', fontSize:13 }}>
+ Neues Spiel starten
</button>
{active.length > 0 && <>
<div style={{ ...S.head, marginBottom:8 }}>LAUFEND ({active.length})</div>
{active.map(g => <GameRow key={g.id} g={g} />)}
<div style={{ ...S.head, marginBottom:10 }}>LAUFENDE SPIELE ({active.length})</div>
{active.map(g => <GameRow key={g.id} g={g} myId={myId} isAdmin={isAdmin} onSelect={onSelect} onDelete={onDelete} />)}
</>}
{finished.length > 0 && <>
<div style={{ ...S.head, marginTop:16, marginBottom:8 }}>BEENDET</div>
{finished.map(g => <GameRow key={g.id} g={g} />)}
<div style={{ ...S.head, marginTop:20, marginBottom:10 }}>BEENDETE SPIELE</div>
{finished.map(g => <GameRow key={g.id} g={g} myId={myId} isAdmin={isAdmin} onSelect={onSelect} onDelete={onDelete} finished />)}
</>}
{games.length === 0 && (
<div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:13, textAlign:'center', paddingTop:30 }}>
<div style={{ color:'rgba(255,255,255,0.25)', fontFamily:'monospace', fontSize:13, textAlign:'center', paddingTop:40 }}>
Noch keine Spiele — starte eines!
</div>
)}
<Leaderboard />
</div>
);
}
// ── Spielzeile (top-level, nicht innerhalb GameList) ──────────────────────────
function GameRow({ g, myId, isAdmin, onSelect, onDelete, finished }) {
const isMyTurn = g.status === 'active' && g.current_turn === myId;
const opp = g.owner_id === myId ? g.opp_name : g.owner_name;
const grid = JSON.parse(g.grid);
const myCount = grid.flat().filter(v => v === myId).length;
const oppCount = grid.flat().filter(v => v !== myId && v !== 0).length;
let result = null;
if (g.status === 'finished') {
if (!g.winner_id) result = { label:'Unentschieden', color:'#ffe66d' };
else if (g.winner_id === myId) result = { label:'Gewonnen 🎉', color:MY_COLOR };
else result = { label:'Verloren', color:OPP_COLOR };
}
return (
<div style={{
...S.card, marginBottom:8, display:'flex', alignItems:'center', gap:10,
border: isMyTurn ? '1px solid rgba(78,205,196,0.35)' : '1px solid rgba(255,255,255,0.07)',
padding:'12px 14px',
}}>
<button onClick={() => onSelect(g.id)} style={{ flex:1, background:'none', border:'none', cursor:'pointer', textAlign:'left', padding:0 }}>
<div style={{ color:'#fff', fontFamily:'monospace', fontSize:13, marginBottom:4 }}>
{isMyTurn && <span style={{ color:MY_COLOR, marginRight:6 }}>▶</span>}
vs <strong>{opp}</strong>
</div>
<div style={{ color:'rgba(255,255,255,0.35)', fontSize:11, fontFamily:'monospace' }}>
{myCount} : {oppCount} Felder · {g.move_count || 0} Züge
</div>
</button>
{result
? <span style={{ color:result.color, fontSize:11, fontFamily:'monospace', flexShrink:0 }}>{result.label}</span>
: <span style={{ color: isMyTurn ? MY_COLOR : 'rgba(255,255,255,0.3)', fontSize:11, fontFamily:'monospace', flexShrink:0 }}>
{isMyTurn ? 'Du bist dran' : 'Gegner dran'}
</span>
}
{isAdmin && finished && (
<button
onClick={e => { e.stopPropagation(); onDelete(g.id); }}
style={{ ...S.btn('#ff6b9d', true), flexShrink:0, padding:'4px 8px' }}
title="Spiel löschen (Admin)"
>🗑</button>
)}
</div>
);
}
// ── Hauptkomponente ───────────────────────────────────────────────────────────
export default function HexWars({ toast }) {
export default function HexWars({ toast, mobile }) {
const [games, setGames] = useState([]);
const [activeId, setActiveId] = useState(null);
const [game, setGame] = useState(null);
@@ -307,7 +380,8 @@ export default function HexWars({ toast }) {
const [showHelp, setShowHelp] = useState(false);
const [loading, setLoading] = useState(true);
const myId = getMyId();
const myId = getMyId();
const isAdmin = getMyRole() === 'admin';
const loadGames = useCallback(async () => {
try {
@@ -352,17 +426,30 @@ export default function HexWars({ toast }) {
toast('Du hast aufgegeben.');
};
const handleDelete = async (id) => {
if (!window.confirm('Spiel wirklich löschen?')) return;
try {
await api(`/tools/gebietseroberung/${id}`, { method: 'DELETE' });
setGames(prev => prev.filter(g => g.id !== id));
toast('Spiel gelöscht.');
} catch(e) { toast?.(e.message || 'Fehler', 'error'); }
};
if (loading) return (
<div style={{ color:'rgba(255,255,255,0.4)', fontFamily:'monospace', padding:40, textAlign:'center' }}>Lade…</div>
);
return (
<div style={{ maxWidth:520, margin:'0 auto', padding:'0 4px' }}>
<div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:16 }}>
<div style={{ maxWidth:600, margin:'0 auto' }}>
{/* Header — gleicher Stil wie Kanban/Whiteboard */}
<div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:24, flexWrap:'wrap' }}>
{activeId && (
<button onClick={() => { setActiveId(null); setGame(null); }} style={S.btn('#666666', true)}>← Zurück</button>
)}
<span style={{ ...S.head, margin:0, flex:1, fontSize:12 }}>⬡ HEX WARS</span>
<h2 style={{ margin:0, fontSize:15, fontFamily:'monospace', color:'rgba(255,255,255,0.55)', letterSpacing:2, fontWeight:400 }}>
⬡ HEX WARS
</h2>
<div style={{ flex:1 }} />
<button onClick={() => setShowHelp(true)} style={S.btn('#ffe66d', true)}>? Regeln</button>
{activeId && game?.status === 'active' && (
<button onClick={handleResign} style={S.btn('#ff6b9d', true)}>⚑ Aufgeben</button>
@@ -370,9 +457,13 @@ export default function HexWars({ toast }) {
</div>
{!activeId
? <GameList games={games} myId={myId} onSelect={setActiveId} onNew={() => setShowNew(true)} />
? <GameList
games={games} myId={myId} isAdmin={isAdmin}
onSelect={setActiveId} onNew={() => setShowNew(true)}
onDelete={handleDelete} toast={toast}
/>
: game && myId
? <GameBoard game={game} myId={myId} onMove={handleMove} />
? <GameBoard game={game} myId={myId} onMove={handleMove} toast={toast} />
: <div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', textAlign:'center', paddingTop:40 }}>Lade Spiel…</div>
}