skill
Chess — Multiplayer Chess
UnreviewedPlay chess in the Gallia Viewer — vs a bot or multiplayer with room codes and a public lobby.
<!DOCTYPE html>
<html lang="en">
<head><script>(function(){var n=0;function show(p,m){var el=document.createElement('div');el.style.cssText='position:fixed;left:0;right:0;background:#e04040;color:#fff;padding:6px 12px;z-index:'+(99999-n)+';font:13px/1.4 monospace;white-space:pre-wrap;border-bottom:1px solid #b02020;top:'+n*30+'px';el.textContent=p+m;document.body.appendChild(el);n++}window.onerror=function(msg,src,line){show('ERROR '+(src||'').split('/').pop()+':'+line+' \u2014 ',msg)};window.addEventListener('unhandledrejection',function(e){show('REJECT \u2014 ',e.reason&&e.reason.message||e.reason||'unknown')})})()</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chess — Checkmate</title>
<style>
:root {
--bg: #0d1117; --bg-surface: #161b22; --bg-elevated: #1c2128;
--border: #30363d; --text: #e6edf3; --text-secondary: #8b949e; --text-muted: #484f58;
--accent: #00b8b0; --accent-muted: rgba(0,184,176,0.12);
--sq-light: #2a3a4a; --sq-dark: #1a2636;
--sq-check: rgba(248,81,73,0.45);
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'SF Mono', 'Cascadia Code', Consolas, monospace;
--radius-md: 6px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: var(--font); height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.game-container { display: flex; gap: 16px; align-items: flex-start; position: relative; }
.board-area { display: flex; flex-direction: column; gap: 8px; position: relative; }
.player-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--bg-surface); border-radius: var(--radius-md); border: 1px solid var(--border); font-size: 13px; }
.player-name { font-weight: 600; color: var(--text); }
.player-color { width: 10px; height: 10px; border-radius: 50%; }
.board { display: grid; grid-template-columns: repeat(8, 48px); grid-template-rows: repeat(8, 48px); border: 2px solid var(--border); border-radius: 4px; overflow: hidden; }
.sq { display: flex; align-items: center; justify-content: center; font-size: 32px; line-height: 1; position: relative; }
.sq-l { background: var(--sq-light); }
.sq-d { background: var(--sq-dark); }
.sq-check { background: var(--sq-check) !important; }
.wp { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3)); }
.bp { filter: brightness(0.7) drop-shadow(0 1px 1px rgba(0,0,0,0.3)); }
.overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(13,17,23,0.85); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; border-radius: 4px; z-index: 10; }
.overlay-title { font-size: 28px; font-weight: 700; color: #3fb950; }
.overlay-sub { font-size: 14px; color: var(--text-secondary); }
.overlay-btn { padding: 10px 24px; background: var(--accent-muted); border: 1px solid rgba(0,184,176,0.3); border-radius: var(--radius-md); color: var(--accent); font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--font); }
.side-panel { width: 160px; display: flex; flex-direction: column; gap: 8px; }
.moves-panel { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; max-height: 340px; overflow-y: auto; }
.moves-title { font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 8px; }
.move-row { display: flex; gap: 8px; font-size: 12px; font-family: var(--font-mono); padding: 2px 0; }
.move-num { color: var(--text-muted); width: 20px; }
.move-w { color: var(--text); }
.move-b { color: var(--text-secondary); }
.move-hl { color: #3fb950; font-weight: 700; }
.demo-note { position: fixed; bottom: 8px; right: 12px; font-size: 11px; color: var(--text-secondary); opacity: 0.6; }
</style>
</head>
<body>
<div class="game-container">
<div class="board-area">
<div class="player-bar">
<div class="player-color" style="background:#1a1a1a;border:1px solid #555"></div>
<span class="player-name">Bot</span>
</div>
<div style="position:relative">
<div class="board" id="board"></div>
<div class="overlay">
<div class="overlay-title">Checkmate!</div>
<div class="overlay-sub">Einstein wins with white</div>
<button class="overlay-btn">Rematch</button>
</div>
</div>
<div class="player-bar">
<div class="player-color" style="background:#e8e8e8;border:1px solid #ccc"></div>
<span class="player-name">Einstein</span>
<span style="margin-left:auto;font-size:11px;color:#3fb950;font-weight:600">Winner!</span>
</div>
</div>
<div class="side-panel">
<div class="moves-panel">
<div class="moves-title">Moves</div>
<div class="move-row"><span class="move-num">1.</span><span class="move-w">e4</span><span class="move-b">e5</span></div>
<div class="move-row"><span class="move-num">2.</span><span class="move-w">Bc4</span><span class="move-b">Nc6</span></div>
<div class="move-row"><span class="move-num">3.</span><span class="move-w">Qh5</span><span class="move-b">Nf6</span></div>
<div class="move-row"><span class="move-num">4.</span><span class="move-w move-hl">Qxf7#</span></div>
</div>
</div>
</div>
<div class="demo-note">Demo — simulated data</div>
<script>
// Scholar's mate final position
const pos = [
['r','','b','q','k','b','','r'],
['p','p','p','p','','Q','p','p'],
['','','n','','','n','',''],
['','','','','p','','',''],
['','','B','','P','','',''],
['','','','','','','',''],
['P','P','P','P','','P','P','P'],
['R','N','B','','K','','N','R']
];
const pieces = {
'K':'♔','Q':'♕','R':'♖','B':'♗','N':'♘','P':'♙',
'k':'♚','q':'♛','r':'♜','b':'♝','n':'♞','p':'♟'
};
const board = document.getElementById('board');
for(let r=0;r<8;r++){
for(let c=0;c<8;c++){
const sq = document.createElement('div');
const isLight = (r+c)%2===0;
sq.className = 'sq ' + (isLight?'sq-l':'sq-d');
// Highlight king in check
if(r===0&&c===4) sq.classList.add('sq-check');
const p = pos[r][c];
if(p) {
const cls = p===p.toUpperCase()?'wp':'bp';
sq.innerHTML = '<span class="'+cls+'">'+(pieces[p]||'')+'</span>';
}
board.appendChild(sq);
}
}
</script>
</body>
</html>