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

fix: Hex Wars - undefined-Bug, Diagonale, Topliste, move_count

Browse Source
This commit is contained in:
Dicken
2026-06-25 23:50:25 +02:00
parent 26764c5ab2
commit c90490b64b
2 changed files with 168 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,10 +2,9 @@ import { useState, useEffect, useCallback } from 'react';
import { api, S } from '../lib.js';
const GRID = 20;
const MY_COLOR = '#4ecdc4';
const OPP_COLOR = '#ff6b9d';
const MY_COLOR = '#4ecdc4';
const OPP_COLOR = '#ff6b9d';
// User-ID aus JWT lesen (kein API-Call nötig)
function getMyId() {
try {
const token = localStorage.getItem('sk_token');
@@ -17,43 +16,26 @@ function getMyId() {
// ── 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.75)', 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>
<span style={{ color:'#fff', fontFamily:'Space Mono,monospace', fontSize:15, fontWeight:700 }}>⬡ Wie funktioniert's?</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 direkt an dein Gebiet grenzt — oben, unten, links oder rechts.
</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!
Blockieren ist genauso wichtig wie Expandieren.
</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 — nur Felder neben deinem Gebiet.</em>
<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>
<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>
<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>
</div>
</div>
</div>
@@ -67,9 +49,7 @@ function NewGameModal({ onClose, onCreated, toast }) {
const [oppId, setOppId] = useState('');
const [loading, setLoading] = useState(false);
useEffect(() => {
api('/tools/gebietseroberung/users').then(setUsers).catch(() => {});
}, []);
useEffect(() => { api('/tools/gebietseroberung/users').then(setUsers).catch(() => {}); }, []);
const create = async () => {
if (!oppId) return;
@@ -84,15 +64,10 @@ 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.75)', 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>
<span style={{ color:'#fff', fontFamily:'Space Mono,monospace', fontSize:14, fontWeight:700 }}>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>
@@ -111,8 +86,44 @@ 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>;
const medals = ['🥇','🥈','🥉'];
return (
<div style={{ marginTop:24 }}>
<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>
: rows.map((r, i) => (
<div key={r.username} style={{
display:'flex', alignItems:'center', gap:10,
padding:'8px 12px', marginBottom:6,
background:'rgba(255,255,255,0.03)',
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={{ 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:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:10 }}>Siege</span>
</div>
))
}
</div>
);
}
// ── Spielfeld ─────────────────────────────────────────────────────────────────
function GameBoard({ game, myId, onMove, toast }) {
function GameBoard({ game, myId, onMove }) {
const [hover, setHover] = useState(null);
const [moving, setMoving] = useState(false);
@@ -123,13 +134,13 @@ function GameBoard({ game, myId, onMove, toast }) {
const oppColor = game.owner_id === myId ? OPP_COLOR : MY_COLOR;
const oppName = game.owner_id === myId ? game.opp_name : game.owner_name;
const isAdj = (r, c) => [[-1,0],[1,0],[0,-1],[0,1]].some(([dr,dc]) => {
// 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 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 canClick = (r, c) => isMyTurn && game.status === 'active' && grid[r][c] === 0 && isAdj(r, c);
const handleClick = async (r, c) => {
if (!canClick(r, c) || moving) return;
@@ -143,18 +154,16 @@ function GameBoard({ game, myId, onMove, toast }) {
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 };
}
// Zellgröße: passt sich ans Viewport an, nie horizontales Scrollen
const vw = Math.min(window.innerWidth, 600);
const cellSize = Math.floor((vw - 48) / GRID); // 48px = padding + gap
const vw = Math.min(window.innerWidth, 520);
const cellSize = Math.floor((vw - 40) / GRID);
return (
<div>
{/* Scoreboard */}
<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>
@@ -169,7 +178,6 @@ function GameBoard({ game, myId, onMove, toast }) {
</div>
</div>
{/* Banner */}
{banner && (
<div style={{
background:`${banner.color}22`, border:`1px solid ${banner.color}55`,
@@ -179,19 +187,12 @@ function GameBoard({ game, myId, onMove, toast }) {
}}>{banner.text}</div>
)}
{/* Zug-Hinweis */}
{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={{ 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>
)}
{/* Grid — immer passend ohne Scrollen */}
<div style={{
display:'grid',
gridTemplateColumns:`repeat(${GRID}, ${cellSize}px)`,
@@ -205,10 +206,10 @@ function GameBoard({ game, myId, onMove, toast }) {
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 === myId) bg = `${myColor}55`;
if (cell === opponent) bg = `${oppColor}55`;
if (clic && !hov) bg = `${myColor}22`;
if (hov) bg = `${myColor}66`;
if (clic && !hov) bg = `${myColor}22`;
if (hov) bg = `${myColor}66`;
return (
<div
key={key}
@@ -234,7 +235,8 @@ function GameBoard({ game, myId, onMove, toast }) {
// ── Spielliste ────────────────────────────────────────────────────────────────
function GameList({ games, myId, onSelect, onNew }) {
const active = games.filter(g => g.status === 'active');
const finished = games.filter(g => g.status === 'finished');
// 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;
@@ -244,9 +246,9 @@ function GameList({ games, myId, onSelect, onNew }) {
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 };
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={{
@@ -287,10 +289,11 @@ function GameList({ games, myId, onSelect, onNew }) {
{finished.map(g => <GameRow key={g.id} g={g} />)}
</>}
{games.length === 0 && (
<div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:13, textAlign:'center', paddingTop:40 }}>
<div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:13, textAlign:'center', paddingTop:30 }}>
Noch keine Spiele — starte eines!
</div>
)}
<Leaderboard />
</div>
);
}
@@ -304,7 +307,6 @@ export default function HexWars({ toast }) {
const [showHelp, setShowHelp] = useState(false);
const [loading, setLoading] = useState(true);
// User-ID direkt aus JWT — kein API-Call
const myId = getMyId();
const loadGames = useCallback(async () => {
@@ -317,7 +319,6 @@ export default function HexWars({ toast }) {
useEffect(() => { loadGames(); }, [loadGames]);
// Aktives Spiel laden
useEffect(() => {
if (!activeId) { setGame(null); return; }
api(`/tools/gebietseroberung/${activeId}`).then(setGame).catch(() => {});
@@ -352,19 +353,14 @@ export default function HexWars({ toast }) {
};
if (loading) return (
<div style={{ color:'rgba(255,255,255,0.4)', fontFamily:'monospace', padding:40, textAlign:'center' }}>
Lade…
</div>
<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' }}>
{/* Header */}
<div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:16 }}>
{activeId && (
<button onClick={() => { setActiveId(null); setGame(null); }} style={S.btn('#666666', true)}>
← Zurück
</button>
<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>
<button onClick={() => setShowHelp(true)} style={S.btn('#ffe66d', true)}>? Regeln</button>
@@ -376,7 +372,7 @@ export default function HexWars({ toast }) {
{!activeId
? <GameList games={games} myId={myId} onSelect={setActiveId} onNew={() => setShowNew(true)} />
: game && myId
? <GameBoard game={game} myId={myId} onMove={handleMove} toast={toast} />
? <GameBoard game={game} myId={myId} onMove={handleMove} />
: <div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', textAlign:'center', paddingTop:40 }}>Lade Spiel…</div>
}