sortedcord/chess-repertoire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Play move sounds

Browse Source
This commit is contained in:
Aditya Gupta
2026-06-10 13:36:24 +05:30
parent b12edd7d88
commit 06a7f6ea9a
3 changed files with 32 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/routes/+page.svelte
View File

@@ -566,6 +566,18 @@
}
}
function playSound(san) {
if (typeof Audio === 'undefined') return;
try {
const isCapture = san.includes('x');
const src = isCapture ? '/sounds/capture.mp3' : '/sounds/move.mp3';
const audio = new Audio(src);
audio.play().catch(e => console.log('Audio play blocked or failed:', e));
} catch (e) {
console.error('Audio play error:', e);
}
}
function doMove(fr,fc,tr,tc) {
let san = moveToSAN(board, fr, fc, tr, tc);
let piece = board[fr][fc];
@@ -584,9 +596,11 @@
turn = turn==='w'?'b':'w';
selected = null;
highlights = [];
playSound(san);
}
function playMoveByHistory(san) {
function playMoveByHistory(san, mute = true) {
for (let r=0;r<8;r++) for(let c=0;c<8;c++) {
let p = board[r][c];
if (!p || p[0]!==turn) continue;
@@ -606,6 +620,10 @@
board = board; // trigger Svelte 5 reactivity
lastMove=[r,c,tr,tc];
turn=turn==='w'?'b':'w';
if (!mute) {
playSound(san);
}
return;
}
}
@@ -1763,21 +1781,27 @@
<div class="flex flex-col gap-4">
<div class="flex items-center justify-between border-b border-[#2a2e31]/60 pb-2">
<div class="flex items-center gap-2">
<i class="ti ti-git-branch text-sky-400"></i>
<span class="text-xs font-bold uppercase tracking-wider text-[#78828a] font-outfit">You need to prepare for these moves</span>
<i class="ti ti-git-branch text-sky-400 text-base"></i>
<span class="text-base font-bold uppercase tracking-wider text-[#78828a] font-outfit">
{#if turn !== currentRepertoireObj.side}
You need to prepare for these moves
{:else}
Choose your next move
{/if}
</span>
</div>
</div>
<div class="w-full grid gap-y-1" style="grid-template-columns: max-content minmax(0px, 1fr) max-content 70px; gap-x: 16px;">
<div class="w-full grid gap-y-1" style="grid-template-columns: max-content minmax(0px, 1fr) max-content 70px; gap-x: 28px;">
<!-- Table Header -->
<div class="grid w-full pb-2 border-b border-[#2a2e31]/60" style="grid-column: 1/-1; grid-template-columns: subgrid;">
<div class="text-xs font-semibold text-[#78828a] uppercase tracking-wider text-start" style="grid-column: 1/span 2;">
<div class="text-[10px] font-semibold text-[#78828a] uppercase tracking-wider text-start" style="grid-column: 1/span 2;">
Opponent's Move / Continuation
</div>
<div class="text-xs font-semibold text-[#78828a] uppercase tracking-wider text-end" style="grid-column: 3/span 1;">
<div class="text-[10px] font-semibold text-[#78828a] uppercase tracking-wider text-end" style="grid-column: 3/span 1;">
Expected
</div>
<div class="text-xs font-semibold text-[#78828a] uppercase tracking-wider text-center" style="grid-column: 4/span 1;">
<div class="text-[10px] font-semibold text-[#78828a] uppercase tracking-wider text-center" style="grid-column: 4/span 1;">
Win %
</div>
</div>
@@ -1807,7 +1831,7 @@
class="relative z-1 text-left w-full cursor-pointer grid items-center"
style="grid-column: 1/span 2; grid-template-columns: subgrid; display: grid;"
onclick={() => {
playMoveByHistory(b.move);
playMoveByHistory(b.move, false);
history.push(b.move);
history = history;
}}