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

fix: Hex Wars - Grid passt aufs Handy, weniger Overhead

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

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

@@ -216,11 +216,12 @@ function GameBoard({ game, myId, onMove, toast }) {
} }
const vw = Math.min(window.innerWidth, 600); const vw = Math.min(window.innerWidth, 600);
// Verfügbare Höhe: Viewport minus Header (~48px) minus Scoreboard (~72px) minus Status (~40px) minus Legende (~24px) minus Puffer (20px) // 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 - 204; const availH = window.innerHeight - 260;
const byWidth = Math.floor((vw - 32) / GRID); const byWidth = Math.floor((vw - 32) / GRID);
const byHeight = Math.floor(availH / GRID); const byHeight = Math.floor(availH / GRID);
const cellSize = Math.max(10, Math.min(byWidth, byHeight)); const cellSize = Math.max(10, Math.min(byWidth, byHeight));
const gridPx = cellSize * GRID + 19 + 6; // gap(19) + padding(6)
// Zell-Rendering // Zell-Rendering
const renderCell = (r, c) => { const renderCell = (r, c) => {
@@ -278,15 +279,15 @@ function GameBoard({ game, myId, onMove, toast }) {
return ( return (
<div> <div>
{/* Scoreboard */} {/* Scoreboard */}
<div style={{ display:'flex', gap:8, alignItems:'center', marginBottom:8 }}> <div style={{ display:'flex', gap:8, alignItems:'center', marginBottom:6 }}>
<div style={{ ...S.card, padding:'6px 10px', flex:1 }}> <div style={{ ...S.card, padding:'5px 8px', flex:1 }}>
<div style={{ color:myColor, fontFamily:'monospace', fontSize:9, letterSpacing:1, marginBottom:2 }}>DU</div> <div style={{ color:myColor, fontFamily:'monospace', fontSize:9, letterSpacing:1, marginBottom:2 }}>DU</div>
<div style={{ color:'#fff', fontFamily:'Space Mono,monospace', fontSize:18, fontWeight:700, lineHeight:1 }}>{myScore} <span style={{ fontSize:10, color:'rgba(255,255,255,0.3)' }}>Pkt</span></div> <div style={{ color:'#fff', fontFamily:'Space Mono,monospace', fontSize:16, fontWeight:700, lineHeight:1 }}>{myScore} <span style={{ fontSize:9, color:'rgba(255,255,255,0.3)' }}>Pkt</span></div>
</div> </div>
<div style={{ textAlign:'center', color:'rgba(255,255,255,0.2)', fontFamily:'monospace', fontSize:9 }}>🌫️{fogCount}</div> <div style={{ textAlign:'center', color:'rgba(255,255,255,0.2)', fontFamily:'monospace', fontSize:9 }}>🌫️{fogCount}</div>
<div style={{ ...S.card, padding:'6px 10px', flex:1, textAlign:'right' }}> <div style={{ ...S.card, padding:'5px 8px', flex:1, textAlign:'right' }}>
<div style={{ color:oppColor, fontFamily:'monospace', fontSize:9, letterSpacing:1, marginBottom:2 }}>{oppName?.toUpperCase()}</div> <div style={{ color:oppColor, fontFamily:'monospace', fontSize:9, letterSpacing:1, marginBottom:2 }}>{oppName?.toUpperCase()}</div>
<div style={{ color:'#fff', fontFamily:'Space Mono,monospace', fontSize:18, fontWeight:700, lineHeight:1 }}><span style={{ fontSize:10, color:'rgba(255,255,255,0.3)' }}>Pkt </span>{oppScore}</div> <div style={{ color:'#fff', fontFamily:'Space Mono,monospace', fontSize:16, fontWeight:700, lineHeight:1 }}><span style={{ fontSize:9, color:'rgba(255,255,255,0.3)' }}>Pkt </span>{oppScore}</div>
</div> </div>
</div> </div>
@@ -343,7 +344,7 @@ function GameBoard({ game, myId, onMove, toast }) {
)} )}
{/* Legende */} {/* Legende */}
<div style={{ display:'flex', gap:8, marginBottom:6, flexWrap:'wrap' }}> <div style={{ display:'flex', gap:6, marginBottom:4, flexWrap:'wrap' }}>
{[['⭐','Gold +3','#ffe66d'],['💣','Mine −3','#ff6b9d'],['🪨','Felsen','rgba(255,255,255,0.35)'],['🌫️','Nebel','rgba(255,255,255,0.25)']].map(([icon,label,color]) => ( {[['⭐','Gold +3','#ffe66d'],['💣','Mine −3','#ff6b9d'],['🪨','Felsen','rgba(255,255,255,0.35)'],['🌫️','Nebel','rgba(255,255,255,0.25)']].map(([icon,label,color]) => (
<div key={label} style={{ display:'flex', alignItems:'center', gap:4 }}> <div key={label} style={{ display:'flex', alignItems:'center', gap:4 }}>
<span style={{ fontSize:12 }}>{icon}</span> <span style={{ fontSize:12 }}>{icon}</span>
@@ -353,8 +354,8 @@ function GameBoard({ game, myId, onMove, toast }) {
</div> </div>
{/* Grid */} {/* Grid */}
<div style={{ overflowX:'auto', overflowY:'auto', WebkitOverflowScrolling:'touch', touchAction:'pinch-zoom', maxHeight:'62vh', borderRadius:8 }}> <div style={{ overflowX:'auto', overflowY:'auto', WebkitOverflowScrolling:'touch', touchAction:'pinch-zoom', borderRadius:8, width:'fit-content' }}>
<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' }}> <div style={{ display:'grid', gridTemplateColumns:`repeat(${GRID}, ${cellSize}px)`, gridTemplateRows:`repeat(${GRID}, ${cellSize}px)`, gap:1, background:'rgba(255,255,255,0.04)', borderRadius:8, padding:3 }}>
{grid.map((row, r) => row.map((_, c) => renderCell(r, c)))} {grid.map((row, r) => row.map((_, c) => renderCell(r, c)))}
</div> </div>
</div> </div>
@@ -493,7 +494,7 @@ 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:12, flexWrap:'wrap' }}> <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:8, flexWrap:'wrap' }}>
{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>
)} )}