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 @@
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;
}