diff --git a/app.js b/app.js index ae73105..50ff6e6 100644 --- a/app.js +++ b/app.js @@ -114,6 +114,7 @@ function updateBoard() { if (board) { board.position(chess.fen(), true); board.orientation(orientation); + board.resize(); highlightLastMove(); } else { board = Chessboard('board', { @@ -198,6 +199,8 @@ function updatePlayerInfo() { // Round info const roundInfo = `Runde ${currentGame.round} – ${currentGame.event || 'Turnier'}`; document.getElementById('round-info').textContent = roundInfo; + const mobileRound = document.getElementById('round-info-mobile'); + if (mobileRound) mobileRound.textContent = roundInfo; // Result info const resultEl = document.getElementById('result-info'); @@ -317,7 +320,8 @@ function generatePGN(game) { function updatePGNDisplay() { if (!currentGame) return; - document.getElementById('pgn-text').textContent = generatePGN(currentGame); + const text = generatePGN(currentGame); + document.querySelectorAll('.pgn-text').forEach(el => el.textContent = text); } /** @@ -573,23 +577,24 @@ document.getElementById('refresh-btn').addEventListener('click', () => { /** * PGN in Zwischenablage kopieren */ -document.getElementById('copy-pgn-btn').addEventListener('click', async () => { - const text = document.getElementById('pgn-text').textContent; - if (!text) return; - try { - await navigator.clipboard.writeText(text); - const btn = document.getElementById('copy-pgn-btn'); - btn.textContent = 'βœ…'; - setTimeout(() => { btn.textContent = 'πŸ“‹'; }, 1500); - } catch { - // Fallback - const ta = document.createElement('textarea'); - ta.value = text; - document.body.appendChild(ta); - ta.select(); - document.execCommand('copy'); - document.body.removeChild(ta); - } +document.querySelectorAll('.copy-pgn-btn').forEach(btn => { + btn.addEventListener('click', async () => { + const panel = btn.closest('[class*="pgn-panel"]'); + const text = panel.querySelector('.pgn-text').textContent; + if (!text) return; + try { + await navigator.clipboard.writeText(text); + btn.textContent = 'βœ…'; + setTimeout(() => { btn.textContent = 'πŸ“‹'; }, 1500); + } catch { + const ta = document.createElement('textarea'); + ta.value = text; + document.body.appendChild(ta); + ta.select(); + document.execCommand('copy'); + document.body.removeChild(ta); + } + }); }); /** @@ -607,6 +612,20 @@ document.addEventListener('keydown', (e) => { } }); +/** + * Board-Resize bei Fenster- und Container-Γ„nderungen + */ +window.addEventListener('resize', () => { + if (board) board.resize(); +}); + +if (window.ResizeObserver) { + const ro = new ResizeObserver(() => { + if (board) board.resize(); + }); + ro.observe(document.getElementById('board')); +} + /** * Init */ diff --git a/index.html b/index.html index bab365f..606378e 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,7 @@
+

⬛
@@ -38,12 +39,12 @@
--:--:--
-
+
PGN - +
-

+                    

                 
@@ -61,6 +62,13 @@

Alle Partien von Lara

+
+
+ PGN + +
+

+                

Turniertabelle ODJM D 2026

diff --git a/style.css b/style.css index 27e49e1..7d3eba7 100644 --- a/style.css +++ b/style.css @@ -133,11 +133,20 @@ header h1 { #board [data-square].last-move-highlight { box-shadow: inset 0 0 3px 3px rgba(255, 200, 0, 0.7); } -#pgn-panel { +#pgn-panel, +#pgn-panel-mobile { width: 100%; max-width: 500px; +} +#pgn-panel-mobile { + display: none; +} +.pgn-panel--desktop, +.pgn-panel--mobile { background: rgba(0, 0, 0, 0.3); border-radius: 12px; +} +.pgn-panel--desktop { padding: 12px 16px; } .pgn-header { @@ -149,7 +158,7 @@ header h1 { font-weight: bold; font-size: 0.9rem; } -#copy-pgn-btn { +.copy-pgn-btn { background: rgba(255, 255, 255, 0.1); border: none; color: #ccc; @@ -160,10 +169,10 @@ header h1 { font-size: 1rem; transition: background 0.2s; } -#copy-pgn-btn:hover { +.copy-pgn-btn:hover { background: rgba(255, 255, 255, 0.2); } -#pgn-text { +.pgn-text { font-family: 'Courier New', monospace; font-size: 0.78rem; line-height: 1.5; @@ -198,14 +207,16 @@ header h1 { } #moves-panel, #all-games-panel, -#standings-panel { +#standings-panel, +#pgn-panel-mobile { background: rgba(0, 0, 0, 0.3); border-radius: 12px; padding: 16px; } #moves-panel h3, #all-games-panel h3, -#standings-panel h3 { +#standings-panel h3, +#pgn-panel-mobile h3 { margin-bottom: 12px; color: #e94560; font-size: 1rem; @@ -377,17 +388,77 @@ header h1 { background: #e94560; border-radius: 3px; } +.round-info-mobile { + display: none; +} /* Responsive */ @media (max-width: 900px) { #main-content { flex-direction: column; align-items: center; + padding: 12px; } #info-section { flex: none; width: 100%; max-width: 500px; } + html, + body { + overflow-x: hidden; + } + #board-section { + width: 100%; + align-items: stretch; + } + #board, + .player-info { + max-width: 100%; + width: 100%; + } + #board { + overflow: hidden; + } + #board > div { + max-width: 100%; + box-sizing: border-box; + } + .round-info-mobile { + display: block; + width: 100%; + max-width: 500px; + font-size: 1.3rem; + color: #e94560; + margin: 0 auto; + } + #round-info { + display: none; + } + #result-info { + display: none; + } + .pgn-panel--desktop { + display: none; + } + #pgn-panel-mobile { + display: block; + } + .player-info { + padding: 8px 12px; + } + .player-avatar { + width: 36px; + height: 36px; + font-size: 1.4rem; + } + .player-name { + font-size: 0.95rem; + } + .player-clock { + font-size: 1.1rem; + min-width: 80px; + padding: 4px 8px; + } header h1 { font-size: 1.2rem; } diff --git a/style.less b/style.less index 6895b30..1d5b539 100644 --- a/style.less +++ b/style.less @@ -85,14 +85,14 @@ header { } /* Board Section */ -#board-section { - flex: 1; - min-width: 0; - display: flex; - flex-direction: column; - align-items: center; - gap: 12px; -} + #board-section { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + } .player-info { display: flex; @@ -163,11 +163,22 @@ header { } } -#pgn-panel { +#pgn-panel, #pgn-panel-mobile { width: 100%; max-width: 500px; +} + +#pgn-panel-mobile { + display: none; +} + +.pgn-panel--desktop, +.pgn-panel--mobile { background: @bg-dark; border-radius: 12px; +} + +.pgn-panel--desktop { padding: 12px 16px; } @@ -181,7 +192,7 @@ header { font-size: 0.9rem; } -#copy-pgn-btn { +.copy-pgn-btn { background: rgba(255, 255, 255, 0.1); border: none; color: #ccc; @@ -197,7 +208,7 @@ header { } } -#pgn-text { +.pgn-text { font-family: @font-mono; font-size: 0.78rem; line-height: 1.5; @@ -234,7 +245,7 @@ header { border-radius: 8px; } -#moves-panel, #all-games-panel, #standings-panel { +#moves-panel, #all-games-panel, #standings-panel, #pgn-panel-mobile { background: @bg-dark; border-radius: 12px; padding: 16px; @@ -440,11 +451,16 @@ header { border-radius: 3px; } +.round-info-mobile { + display: none; +} + /* Responsive */ @media (max-width: 900px) { #main-content { flex-direction: column; align-items: center; + padding: 12px; } #info-section { @@ -453,6 +469,75 @@ header { max-width: 500px; } + html, body { + overflow-x: hidden; + } + + #board-section { + width: 100%; + align-items: stretch; + } + + #board, + .player-info { + max-width: 100%; + width: 100%; + } + + #board { + overflow: hidden; + } + + #board > div { + max-width: 100%; + box-sizing: border-box; + } + + .round-info-mobile { + display: block; + width: 100%; + max-width: 500px; + font-size: 1.3rem; + color: @primary; + margin: 0 auto; + } + + #round-info { + display: none; + } + + #result-info { + display: none; + } + + .pgn-panel--desktop { + display: none; + } + + #pgn-panel-mobile { + display: block; + } + + .player-info { + padding: 8px 12px; + } + + .player-avatar { + width: 36px; + height: 36px; + font-size: 1.4rem; + } + + .player-name { + font-size: 0.95rem; + } + + .player-clock { + font-size: 1.1rem; + min-width: 80px; + padding: 4px 8px; + } + header h1 { font-size: 1.2rem; }