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

fix: Hex Wars - visualViewport für korrekte Mobile-Höhe

Browse Source
This commit is contained in:
Dicken
2026-06-26 17:33:13 +02:00
parent 85a72258f5
commit c9de0867e5
1 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -215,13 +215,26 @@ function GameBoard({ game, myId, onMove, toast }) {
else banner = { text: isDominance ? 'Dominanzniederlage 💀' : 'Du hast verloren.', color:OPP_COLOR }; else banner = { text: isDominance ? 'Dominanzniederlage 💀' : 'Du hast verloren.', color:OPP_COLOR };
} }
const vw = Math.min(window.innerWidth, 600); const [cellSize, setCellSize] = useState(14);
// Overhead: h2-Header(36) + Scoreboard(56) + MineAlert(0-52) + Banner(0-48) + Status(32) + Legende(28) + Puffer(32) = ~260px worst case
const availH = window.innerHeight - 260; useEffect(() => {
const byWidth = Math.floor((vw - 32) / GRID); const calc = () => {
const byHeight = Math.floor(availH / GRID); const vw = Math.min(window.innerWidth, 600);
const cellSize = Math.max(10, Math.min(byWidth, byHeight)); const vh = window.visualViewport?.height ?? window.innerHeight;
const gridPx = cellSize * GRID + 19 + 6; // gap(19) + padding(6) // Overhead: Header(36) + Scoreboard(50) + Status(30) + Legende(26) + margins(28) = ~170px
const availH = vh - 170;
const byW = Math.floor((vw - 32) / GRID);
const byH = Math.floor(availH / GRID);
setCellSize(Math.max(10, Math.min(byW, byH)));
};
calc();
window.visualViewport?.addEventListener('resize', calc);
window.addEventListener('resize', calc);
return () => {
window.visualViewport?.removeEventListener('resize', calc);
window.removeEventListener('resize', calc);
};
}, []);
// Zell-Rendering // Zell-Rendering
const renderCell = (r, c) => { const renderCell = (r, c) => {
@@ -494,17 +507,17 @@ export default function HexWars({ toast }) {
return ( return (
<div style={{ maxWidth:600, margin:'0 auto' }}> <div style={{ maxWidth:600, margin:'0 auto' }}>
<div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:8, flexWrap:'wrap' }}> <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8 }}>
{activeId && ( {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>
)} )}
<h2 style={{ margin:0, fontSize:15, fontFamily:'monospace', color:'rgba(255,255,255,0.55)', letterSpacing:2, fontWeight:400 }}> <h2 style={{ margin:0, fontSize:13, fontFamily:'monospace', color:'rgba(255,255,255,0.55)', letterSpacing:2, fontWeight:400, flexShrink:0 }}>
⬡ HEX WARS ⬡ HEX WARS
</h2> </h2>
<div style={{ flex:1 }} /> <div style={{ flex:1 }} />
<button onClick={() => setShowHelp(true)} style={S.btn('#ffe66d', true)}>? Regeln</button> <button onClick={() => setShowHelp(true)} style={S.btn('#ffe66d', true)}>? Regeln</button>
{activeId && game?.status === 'active' && ( {activeId && game?.status === 'active' && (
<button onClick={handleResign} style={S.btn('#ff6b9d', true)}>⚑ Aufgeben</button> <button onClick={handleResign} style={S.btn('#ff6b9d', true)}>⚑</button>
)} )}
</div> </div>