From 0fe878f354a1949e5e246ce02ce95dc6d0953210 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 21 Apr 2026 07:27:47 +0000
Subject: [PATCH 1/2] feat: larger board (50vw), sample query, slide-down SQL
blocks, move sounds
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- CSS: --board-sz variable (clamp 320px, 50vw, 760px); player bars/controls
follow the same size; responsive breakpoints updated in-place
- Animation: fadeSlideIn now slides DOWN (translateY -8px → 0)
- SQL ordering: new blocks are prepended so each submitted query pushes
older content downward; game-init SQL is appended at the end (atEnd=true)
so it stays at the bottom ('at the end') after scrolling
- Undo now removes firstChild (most-recent prepended block)
- Auto-scroll scrolls to scrollTop=0 to reveal latest block at top
- Sounds: Web Audio API playSound('move'|'capture'|'check') with AudioContext
singleton; called in executeMove()
- Sample query: textarea pre-filled on game start; ⚑ Sample button added
- HTML: ⚑ Sample button wired in sql-input-actions
Agent-Logs-Url: https://github.com/Devn913/SQL_Chess/sessions/d99e2bd3-f90d-47a3-9be1-466c214ff74b
Co-authored-by: Devn913 <56478595+Devn913@users.noreply.github.com>
---
css/style.css | 33 +++++++----------
index.html | 1 +
js/app.js | 98 +++++++++++++++++++++++++++++++++++++++++++++------
3 files changed, 101 insertions(+), 31 deletions(-)
diff --git a/css/style.css b/css/style.css
index 14e0f10..807f114 100644
--- a/css/style.css
+++ b/css/style.css
@@ -10,6 +10,9 @@
--bg-elevated: #21262d;
--bg-border: #30363d;
+ /* Board size: at least 50 % of viewport width, capped at 760 px */
+ --board-sz: clamp(320px, 50vw, 760px);
+
--text-primary: #e6edf3;
--text-secondary: #8b949e;
--text-muted: #484f58;
@@ -169,7 +172,7 @@ a { color: var(--accent-blue); }
align-items: center;
gap: .6rem;
width: 100%;
- max-width: 480px;
+ max-width: var(--board-sz);
padding: .4rem .6rem;
background: var(--bg-surface);
border: 1px solid var(--bg-border);
@@ -261,9 +264,8 @@ a { color: var(--accent-blue); }
border-radius: 3px;
overflow: hidden;
box-shadow: var(--shadow-lg);
- /* Size is set dynamically in JS but default here */
- width: min(57vw, 460px);
- height: min(57vw, 460px);
+ width: var(--board-sz);
+ height: var(--board-sz);
}
/* Individual squares */
@@ -308,7 +310,7 @@ a { color: var(--accent-blue); }
/* Pieces */
.piece {
- font-size: calc(min(57vw, 460px) / 10);
+ font-size: calc(var(--board-sz) / 10);
line-height: 1;
pointer-events: none;
display: flex;
@@ -327,7 +329,7 @@ a { color: var(--accent-blue); }
align-items: center;
gap: .5rem;
width: 100%;
- max-width: 480px;
+ max-width: var(--board-sz);
}
.game-status-text {
@@ -340,7 +342,7 @@ a { color: var(--accent-blue); }
/* ── Move History ───────────────────────────────────────────── */
.move-history-box {
width: 100%;
- max-width: 480px;
+ max-width: var(--board-sz);
background: var(--bg-surface);
border: 1px solid var(--bg-border);
border-radius: var(--radius);
@@ -472,7 +474,7 @@ a { color: var(--accent-blue); }
animation: fadeSlideIn .2s ease;
}
@keyframes fadeSlideIn {
- from { opacity: 0; transform: translateY(6px); }
+ from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
@@ -837,14 +839,7 @@ input:checked + .slider::before { transform: translateX(18px); }
border-top: none;
}
- .board-grid {
- width: min(90vw, 420px);
- height: min(90vw, 420px);
- }
-
- .piece {
- font-size: calc(min(90vw, 420px) / 10);
- }
+ :root { --board-sz: min(90vw, 420px); }
}
@media (max-width: 480px) {
@@ -853,11 +848,7 @@ input:checked + .slider::before { transform: translateX(18px); }
.chess-panel { padding: .5rem; }
.header-controls { gap: .3rem; }
- .board-grid {
- width: min(92vw, 360px);
- height: min(92vw, 360px);
- }
- .piece { font-size: calc(min(92vw, 360px) / 10); }
+ :root { --board-sz: min(92vw, 360px); }
#btnToggleSQL #sqlToggleLabel { display: none; }
}
diff --git a/index.html b/index.html
index 2f32340..9e44779 100644
--- a/index.html
+++ b/index.html
@@ -112,6 +112,7 @@
placeholder="UPDATE chess_piece
SET position = 'e4'
WHERE position = 'e2';
-- or shorthand: e2 e4">
+
diff --git a/js/app.js b/js/app.js
index 53b4efb..ef178fd 100644
--- a/js/app.js
+++ b/js/app.js
@@ -68,6 +68,53 @@ function showToast(msg, duration = 2500) {
el._timer = setTimeout(() => el.classList.add('hidden'), duration);
}
+/* ─── Audio ───────────────────────────────────────────────────── */
+let _audioCtx = null;
+
+function getAudioCtx() {
+ if (!_audioCtx) {
+ _audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+ }
+ if (_audioCtx.state === 'suspended') { _audioCtx.resume(); }
+ return _audioCtx;
+}
+
+function playSound(type) {
+ try {
+ const ctx = getAudioCtx();
+ const o = ctx.createOscillator();
+ const g = ctx.createGain();
+ o.connect(g);
+ g.connect(ctx.destination);
+ if (type === 'capture') {
+ o.type = 'sawtooth';
+ o.frequency.setValueAtTime(520, ctx.currentTime);
+ o.frequency.exponentialRampToValueAtTime(180, ctx.currentTime + 0.18);
+ g.gain.setValueAtTime(0.35, ctx.currentTime);
+ g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.18);
+ o.start(ctx.currentTime);
+ o.stop(ctx.currentTime + 0.18);
+ } else if (type === 'check') {
+ o.type = 'square';
+ o.frequency.setValueAtTime(880, ctx.currentTime);
+ o.frequency.setValueAtTime(660, ctx.currentTime + 0.08);
+ g.gain.setValueAtTime(0.2, ctx.currentTime);
+ g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.25);
+ o.start(ctx.currentTime);
+ o.stop(ctx.currentTime + 0.25);
+ } else {
+ // normal move
+ o.type = 'sine';
+ o.frequency.setValueAtTime(900, ctx.currentTime);
+ o.frequency.exponentialRampToValueAtTime(650, ctx.currentTime + 0.09);
+ g.gain.setValueAtTime(0.22, ctx.currentTime);
+ g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.1);
+ o.start(ctx.currentTime);
+ o.stop(ctx.currentTime + 0.1);
+ }
+ } catch (e) { /* ignore — AudioContext may be unavailable */ }
+}
+
/* ─── Board Rendering ─────────────────────────────────────────── */
function buildBoard() {
const board = document.getElementById('board');
@@ -420,6 +467,13 @@ function executeMove(from, to, promotion) {
state.validMoves = [];
state.moveCount++;
+ // Play move sound
+ if (moveResult.captured) {
+ playSound('capture');
+ } else {
+ playSound('move');
+ }
+
// Clear SQL input template after a successful board-click move
const sqlMoveInput = document.getElementById('sqlMoveInput');
if (sqlMoveInput && state.sqlInputHasTemplate) {
@@ -438,6 +492,7 @@ function executeMove(from, to, promotion) {
const endSQL = SQLGen.gameEnd(state.chess, state.gameId);
appendSQL(endSQL, 'Game Over', null);
} else if (state.chess.in_check()) {
+ playSound('check');
const checkSQL = SQLGen.check(state.chess.turn(), state.gameId);
appendSQL(checkSQL, '⚠ Check', null);
}
@@ -732,7 +787,7 @@ function highlightSQL(code) {
.replace(kwRegex, '$1');
}
-function appendSQL(code, label, moveNum) {
+function appendSQL(code, label, moveNum, atEnd) {
const placeholder = document.getElementById('sqlPlaceholder');
if (placeholder) placeholder.remove();
@@ -766,12 +821,22 @@ function appendSQL(code, label, moveNum) {
block.appendChild(labelEl);
block.appendChild(codeEl);
- content.appendChild(block);
+
+ // New blocks slide in at the TOP so each submitted query moves content DOWN;
+ // only the initial game-setup block is appended at the end.
+ if (atEnd) {
+ content.appendChild(block);
+ } else {
+ content.prepend(block);
+ }
state.sqlBlocks.push({ code, label, moveNum });
if (document.getElementById('chkAutoScroll').checked) {
- content.scrollTop = content.scrollHeight;
+ // Scroll to top to reveal the freshly-prepended block
+ if (!atEnd) {
+ content.scrollTop = 0;
+ }
}
}
@@ -796,9 +861,13 @@ function startGame(whiteName, blackName, showSQL, existingPGN) {
document.getElementById('whitePlayerName').textContent = state.whitePlayer;
document.getElementById('blackPlayerName').textContent = state.blackPlayer;
- // Clear SQL input
+ // Clear SQL input and pre-fill with sample query
const sqlMoveInput = document.getElementById('sqlMoveInput');
- if (sqlMoveInput) sqlMoveInput.value = '';
+ if (sqlMoveInput) {
+ sqlMoveInput.value =
+ `-- Sample: move the e-pawn two squares forward\nUPDATE chess_piece\nSET position = 'e4'\nWHERE position = 'e2';`;
+ }
+ state.sqlInputHasTemplate = false;
clearSQLRunError();
// SQL panel visibility
@@ -828,9 +897,9 @@ function startGame(whiteName, blackName, showSQL, existingPGN) {
`Each chess move is translated into
real SQL statements in real time.
`;
sqlContent.appendChild(placeholder);
- // Emit game-start SQL
+ // Emit game-start SQL (placed at the end so move SQL slides in above it)
const initSQL = SQLGen.gameStart(state.gameId, state.whitePlayer, state.blackPlayer);
- appendSQL(initSQL, 'Game Initialized', null);
+ appendSQL(initSQL, 'Game Initialized', null, true);
}
// Load from PGN if provided (invite link)
@@ -955,10 +1024,10 @@ function init() {
if (undone.color === 'w') state.capturedByWhite.pop();
else state.capturedByBlack.pop();
}
- // Remove last SQL block from UI
+ // Remove most-recent SQL block from UI (prepended = first child, no id)
const content = document.getElementById('sqlContent');
- if (content.lastChild && !content.lastChild.id) {
- content.removeChild(content.lastChild);
+ if (content.firstChild && !content.firstChild.id) {
+ content.removeChild(content.firstChild);
state.sqlBlocks.pop();
}
state.selectedSquare = null;
@@ -1021,6 +1090,15 @@ function init() {
// SQL Move Input
document.getElementById('btnRunSQL').addEventListener('click', runSQLMove);
+ document.getElementById('btnSampleSQL').addEventListener('click', () => {
+ const input = document.getElementById('sqlMoveInput');
+ if (input) {
+ input.value =
+ `-- Sample: move the e-pawn two squares forward\nUPDATE chess_piece\nSET position = 'e4'\nWHERE position = 'e2';`;
+ }
+ state.sqlInputHasTemplate = false;
+ clearSQLRunError();
+ });
document.getElementById('btnClearInput').addEventListener('click', () => {
const input = document.getElementById('sqlMoveInput');
if (input) input.value = '';
From 11f0010a6efb8f0fa575bf9a3b4bf197d9dd3263 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 21 Apr 2026 07:30:01 +0000
Subject: [PATCH 2/2] fix: extract SAMPLE_SQL_QUERY constant, correct
sqlInputHasTemplate flags, add auto-scroll for atEnd blocks
Agent-Logs-Url: https://github.com/Devn913/SQL_Chess/sessions/d99e2bd3-f90d-47a3-9be1-466c214ff74b
Co-authored-by: Devn913 <56478595+Devn913@users.noreply.github.com>
---
js/app.js | 20 ++++++++++++--------
1 file changed, 12 insertions(+), 8 deletions(-)
diff --git a/js/app.js b/js/app.js
index ef178fd..4ede065 100644
--- a/js/app.js
+++ b/js/app.js
@@ -16,6 +16,9 @@
'use strict';
/* ─── Configuration ──────────────────────────────────────────── */
+const SAMPLE_SQL_QUERY =
+ `-- Sample: move the e-pawn two squares forward\nUPDATE chess_piece\nSET position = 'e4'\nWHERE position = 'e2';`;
+
const PIECE_UNICODE = {
wK: '♔', wQ: '♕', wR: '♖', wB: '♗', wN: '♘', wP: '♙',
bK: '♚', bQ: '♛', bR: '♜', bB: '♝', bN: '♞', bP: '♟',
@@ -833,8 +836,11 @@ function appendSQL(code, label, moveNum, atEnd) {
state.sqlBlocks.push({ code, label, moveNum });
if (document.getElementById('chkAutoScroll').checked) {
- // Scroll to top to reveal the freshly-prepended block
- if (!atEnd) {
+ if (atEnd) {
+ // Game-init block appended at bottom — scroll down to show it
+ content.scrollTop = content.scrollHeight;
+ } else {
+ // Move blocks prepended at top — scroll up to reveal the new block
content.scrollTop = 0;
}
}
@@ -864,10 +870,9 @@ function startGame(whiteName, blackName, showSQL, existingPGN) {
// Clear SQL input and pre-fill with sample query
const sqlMoveInput = document.getElementById('sqlMoveInput');
if (sqlMoveInput) {
- sqlMoveInput.value =
- `-- Sample: move the e-pawn two squares forward\nUPDATE chess_piece\nSET position = 'e4'\nWHERE position = 'e2';`;
+ sqlMoveInput.value = SAMPLE_SQL_QUERY;
}
- state.sqlInputHasTemplate = false;
+ state.sqlInputHasTemplate = true;
clearSQLRunError();
// SQL panel visibility
@@ -1093,10 +1098,9 @@ function init() {
document.getElementById('btnSampleSQL').addEventListener('click', () => {
const input = document.getElementById('sqlMoveInput');
if (input) {
- input.value =
- `-- Sample: move the e-pawn two squares forward\nUPDATE chess_piece\nSET position = 'e4'\nWHERE position = 'e2';`;
+ input.value = SAMPLE_SQL_QUERY;
}
- state.sqlInputHasTemplate = false;
+ state.sqlInputHasTemplate = true;
clearSQLRunError();
});
document.getElementById('btnClearInput').addEventListener('click', () => {