Skip to content

E
el3ab-Player
Commit 8c14559d authored by Mahmoud Aglan's avatar Mahmoud Aglan
Browse files
Options

revert: restore original flat board and simple pawn visuals 

Remove all 10 fancy visual enhancements (3D gradients, embossed borders,
glowing safe squares, specular pawns) — back to the clean flat style.
Keep 60fps render loop, smooth tweens, stacking, and mini dice.
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 4f6e3507
Hide whitespace changes
Inline Side-by-side
Showing with 46 additions and 182 deletions
public/js/modules/ludo/scenes/game.js
View file @ 8c14559d
...@@ -685,13 +685,6 @@ async function animateMove(el, move) { ...@@ -685,13 +685,6 @@ async function animateMove(el, move) {
afterMove(el, move); afterMove(el, move);
} }
function darkenColor(hex, amount) {
const num = parseInt(hex.replace('#', ''), 16);
const r = Math.max(0, ((num >> 16) & 0xFF) - amount);
const g = Math.max(0, ((num >> 8) & 0xFF) - amount);
const b = Math.max(0, (num & 0xFF) - amount);
return `rgb(${r},${g},${b})`;
}
function fireworkBurst(x, y, color) { function fireworkBurst(x, y, color) {
const lighten = (hex, pct) => { const lighten = (hex, pct) => {
...@@ -839,67 +832,32 @@ function drawStaticBoard() { ...@@ -839,67 +832,32 @@ function drawStaticBoard() {
const sctx = boardCanvas.getContext('2d'); const sctx = boardCanvas.getContext('2d');
sctx.clearRect(0, 0, boardSize, boardSize); sctx.clearRect(0, 0, boardSize, boardSize);
// === ENHANCEMENT 1: Rich board background with subtle texture === // Background
const bgGrad = sctx.createRadialGradient(boardSize/2, boardSize/2, 0, boardSize/2, boardSize/2, boardSize*0.7); sctx.fillStyle = '#FAFAFA';
bgGrad.addColorStop(0, '#FFFFF8');
bgGrad.addColorStop(1, '#F0EDE6');
sctx.fillStyle = bgGrad;
sctx.fillRect(0, 0, boardSize, boardSize); sctx.fillRect(0, 0, boardSize, boardSize);
// === ENHANCEMENT 10: Board border frame with emboss === // Home zones
sctx.save();
sctx.shadowColor = 'rgba(0,0,0,0.3)';
sctx.shadowBlur = 6;
sctx.shadowOffsetX = 0;
sctx.shadowOffsetY = 2;
sctx.strokeStyle = '#8B7355';
sctx.lineWidth = 3;
sctx.strokeRect(1.5, 1.5, boardSize-3, boardSize-3);
sctx.restore();
// Inner gold border
sctx.strokeStyle = '#D4A843';
sctx.lineWidth = 1.5;
sctx.strokeRect(4, 4, boardSize-8, boardSize-8);
// === ENHANCEMENT 6: Home zones with gradient fill ===
[[0,0,9],[1,0,0],[2,9,0],[3,9,9]].forEach(([p,c,r]) => { [[0,0,9],[1,0,0],[2,9,0],[3,9,9]].forEach(([p,c,r]) => {
const hx = c*cs, hy = r*cs, hw = 6*cs; sctx.fillStyle = COLORS[p];
const homeGrad = sctx.createLinearGradient(hx, hy, hx+hw, hy+hw); sctx.fillRect(c*cs, r*cs, 6*cs, 6*cs);
homeGrad.addColorStop(0, COLORS[p]); sctx.fillStyle = '#FAFAFA';
homeGrad.addColorStop(1, COLORS_LIGHT[p]);
sctx.fillStyle = homeGrad;
sctx.fillRect(hx, hy, hw, hw);
// Inner white area with subtle shadow
const ins = cs*0.85; const ins = cs*0.85;
sctx.save(); sctx.fillRect(c*cs+ins, r*cs+ins, 6*cs-ins*2, 6*cs-ins*2);
sctx.shadowColor = 'rgba(0,0,0,0.2)';
sctx.shadowBlur = 4;
sctx.shadowInset = true;
sctx.fillStyle = '#FEFEFA';
sctx.fillRect(hx+ins, hy+ins, hw-ins*2, hw-ins*2);
sctx.restore();
// Decorative inner border with rounded feel
sctx.strokeStyle = COLORS[p]; sctx.strokeStyle = COLORS[p];
sctx.lineWidth = 2.5; sctx.lineWidth = 2.5;
sctx.strokeRect(hx+ins+2, hy+ins+2, hw-ins*2-4, hw-ins*2-4); sctx.strokeRect(c*cs+ins+3, r*cs+ins+3, 6*cs-ins*2-6, 6*cs-ins*2-6);
// Corner dots decoration
const dotR = cs * 0.15;
sctx.fillStyle = COLORS[p];
[[hx+ins+8,hy+ins+8],[hx+hw-ins-8,hy+ins+8],[hx+ins+8,hy+hw-ins-8],[hx+hw-ins-8,hy+hw-ins-8]].forEach(([dx,dy]) => {
sctx.beginPath(); sctx.arc(dx, dy, dotR, 0, Math.PI*2); sctx.fill();
});
}); });
// Cross paths with subtle warmth // Cross paths
sctx.fillStyle = '#FDFCF9'; sctx.fillStyle = '#fff';
sctx.fillRect(6*cs,0,3*cs,6*cs); sctx.fillRect(6*cs,0,3*cs,6*cs);
sctx.fillRect(6*cs,9*cs,3*cs,6*cs); sctx.fillRect(6*cs,9*cs,3*cs,6*cs);
sctx.fillRect(0,6*cs,6*cs,3*cs); sctx.fillRect(0,6*cs,6*cs,3*cs);
sctx.fillRect(9*cs,6*cs,6*cs,3*cs); sctx.fillRect(9*cs,6*cs,6*cs,3*cs);
sctx.fillRect(6*cs,6*cs,3*cs,3*cs); sctx.fillRect(6*cs,6*cs,3*cs,3*cs);
// === ENHANCEMENT 5: Grid lines with depth === // Grid lines
sctx.strokeStyle = 'rgba(0,0,0,0.08)'; sctx.strokeStyle = '#ddd';
sctx.lineWidth = 0.5; sctx.lineWidth = 0.5;
for (let i = 0; i <= 15; i++) { for (let i = 0; i <= 15; i++) {
if (i >= 6 && i <= 9) { sctx.beginPath(); sctx.moveTo(i*cs,0); sctx.lineTo(i*cs,boardSize); sctx.stroke(); sctx.beginPath(); sctx.moveTo(0,i*cs); sctx.lineTo(boardSize,i*cs); sctx.stroke(); } if (i >= 6 && i <= 9) { sctx.beginPath(); sctx.moveTo(i*cs,0); sctx.lineTo(i*cs,boardSize); sctx.stroke(); sctx.beginPath(); sctx.moveTo(0,i*cs); sctx.lineTo(boardSize,i*cs); sctx.stroke(); }
...@@ -911,94 +869,28 @@ function drawStaticBoard() { ...@@ -911,94 +869,28 @@ function drawStaticBoard() {
sctx.beginPath(); sctx.moveTo((i+9)*cs,6*cs); sctx.lineTo((i+9)*cs,9*cs); sctx.stroke(); sctx.beginPath(); sctx.moveTo((i+9)*cs,6*cs); sctx.lineTo((i+9)*cs,9*cs); sctx.stroke();
} }
// === ENHANCEMENT 5: Home columns with gradient cells === // Home columns
for (let p = 0; p < 4; p++) { for (let p = 0; p < 4; p++) HOME_COLUMNS[p].forEach(([col,row]) => { sctx.fillStyle = COLORS_LIGHT[p]; sctx.fillRect(col*cs+1, row*cs+1, cs-2, cs-2); });
HOME_COLUMNS[p].forEach(([col,row], i) => {
const cellGrad = sctx.createLinearGradient(col*cs, row*cs, col*cs+cs, row*cs+cs); // Safe squares
cellGrad.addColorStop(0, COLORS_LIGHT[p]); SAFE_SQUARES.forEach(idx => { const [col,row] = SHARED_PATH[idx]; sctx.fillStyle = '#FFF9C4'; sctx.fillRect(col*cs+1,row*cs+1,cs-2,cs-2); sctx.fillStyle = '#F9A825'; sctx.font = `${cs*0.45}px sans-serif`; sctx.textAlign = 'center'; sctx.textBaseline = 'middle'; sctx.fillText('★', col*cs+cs/2, row*cs+cs/2); });
cellGrad.addColorStop(1, COLORS[p] + '40');
sctx.fillStyle = cellGrad; // Center triangles
sctx.fillRect(col*cs+1, row*cs+1, cs-2, cs-2); const cx = 7.5*cs, cy = 7.5*cs, hs = 1.5*cs;
// Arrow indicator toward center sctx.fillStyle = COLORS[0]; sctx.beginPath();
sctx.fillStyle = COLORS[p] + '60'; sctx.moveTo(cx-hs, cy+hs); sctx.lineTo(cx+hs, cy+hs); sctx.lineTo(cx, cy); sctx.closePath(); sctx.fill();
sctx.font = `${cs*0.35}px sans-serif`; sctx.fillStyle = COLORS[1]; sctx.beginPath();
sctx.textAlign = 'center'; sctx.moveTo(cx-hs, cy-hs); sctx.lineTo(cx-hs, cy+hs); sctx.lineTo(cx, cy); sctx.closePath(); sctx.fill();
sctx.textBaseline = 'middle'; sctx.fillStyle = COLORS[2]; sctx.beginPath();
const arrows = ['→','↓','←','↑']; sctx.moveTo(cx-hs, cy-hs); sctx.lineTo(cx+hs, cy-hs); sctx.lineTo(cx, cy); sctx.closePath(); sctx.fill();
sctx.fillText(arrows[p], col*cs+cs/2, row*cs+cs/2); sctx.fillStyle = COLORS[3]; sctx.beginPath();
}); sctx.moveTo(cx+hs, cy-hs); sctx.lineTo(cx+hs, cy+hs); sctx.lineTo(cx, cy); sctx.closePath(); sctx.fill();
} sctx.strokeStyle = '#fff'; sctx.lineWidth = 1.5;
sctx.strokeRect(cx-hs, cy-hs, hs*2, hs*2);
// === ENHANCEMENT 4: Safe squares with glow effect ===
SAFE_SQUARES.forEach(idx => { // Start position squares
const [col,row] = SHARED_PATH[idx];
// Glow background
const safeGrad = sctx.createRadialGradient(col*cs+cs/2, row*cs+cs/2, 0, col*cs+cs/2, row*cs+cs/2, cs*0.6);
safeGrad.addColorStop(0, '#FFF9C4');
safeGrad.addColorStop(1, '#FFF176');
sctx.fillStyle = safeGrad;
sctx.fillRect(col*cs+1, row*cs+1, cs-2, cs-2);
// Star with shadow
sctx.save();
sctx.shadowColor = '#F9A825';
sctx.shadowBlur = 4;
sctx.fillStyle = '#F57F17';
sctx.font = `bold ${cs*0.5}px sans-serif`;
sctx.textAlign = 'center';
sctx.textBaseline = 'middle';
sctx.fillText('★', col*cs+cs/2, row*cs+cs/2);
sctx.restore();
});
// === ENHANCEMENT 2: Center triangles with gradient glow ===
const ccx = 7.5*cs, ccy = 7.5*cs, hs = 1.5*cs;
// Draw each triangle with gradient
const triPoints = [
{ p: 0, pts: [[ccx-hs,ccy+hs],[ccx+hs,ccy+hs],[ccx,ccy]] },
{ p: 1, pts: [[ccx-hs,ccy-hs],[ccx-hs,ccy+hs],[ccx,ccy]] },
{ p: 2, pts: [[ccx-hs,ccy-hs],[ccx+hs,ccy-hs],[ccx,ccy]] },
{ p: 3, pts: [[ccx+hs,ccy-hs],[ccx+hs,ccy+hs],[ccx,ccy]] },
];
triPoints.forEach(({p, pts}) => {
const grad = sctx.createRadialGradient(ccx, ccy, 0, ccx, ccy, hs);
grad.addColorStop(0, '#fff');
grad.addColorStop(0.3, COLORS_LIGHT[p]);
grad.addColorStop(1, COLORS[p]);
sctx.fillStyle = grad;
sctx.beginPath();
sctx.moveTo(pts[0][0], pts[0][1]);
sctx.lineTo(pts[1][0], pts[1][1]);
sctx.lineTo(pts[2][0], pts[2][1]);
sctx.closePath();
sctx.fill();
});
// Center diamond highlight
sctx.save();
sctx.shadowColor = 'rgba(255,255,255,0.8)';
sctx.shadowBlur = 6;
sctx.fillStyle = 'rgba(255,255,255,0.6)';
sctx.beginPath();
sctx.arc(ccx, ccy, cs*0.3, 0, Math.PI*2);
sctx.fill();
sctx.restore();
// Outer border of center
sctx.strokeStyle = 'rgba(255,255,255,0.9)';
sctx.lineWidth = 2;
sctx.strokeRect(ccx-hs, ccy-hs, hs*2, hs*2);
// Start position colored squares with glow
const startColors = [[6,13,'#FFCDD2'],[1,6,'#C8E6C9'],[8,1,'#FFF9C4'],[13,8,'#BBDEFB']]; const startColors = [[6,13,'#FFCDD2'],[1,6,'#C8E6C9'],[8,1,'#FFF9C4'],[13,8,'#BBDEFB']];
startColors.forEach(([col,row,color]) => { startColors.forEach(([col,row,color]) => { sctx.fillStyle = color; sctx.fillRect(col*cs+1, row*cs+1, cs-2, cs-2); });
sctx.fillStyle = color;
sctx.fillRect(col*cs+1, row*cs+1, cs-2, cs-2);
// Arrow showing entry direction
sctx.fillStyle = 'rgba(0,0,0,0.2)';
sctx.font = `${cs*0.4}px sans-serif`;
sctx.textAlign = 'center';
sctx.textBaseline = 'middle';
sctx.fillText('▶', col*cs+cs/2, row*cs+cs/2);
});
} }
function drawPieces(cs) { function drawPieces(cs) {
...@@ -1042,52 +934,24 @@ function drawPieces(cs) { ...@@ -1042,52 +934,24 @@ function drawPieces(cs) {
const bounceY = piece._bounceOffset || 0; const bounceY = piece._bounceOffset || 0;
const drawY = oy + bounceY; const drawY = oy + bounceY;
// === ENHANCEMENT 7: Highlight glow ring for selectable === // Highlight ring
if (isHighlighted) { if (isHighlighted) {
ctx.save();
ctx.shadowColor = '#E4AC38';
ctx.shadowBlur = 8;
ctx.beginPath(); ctx.arc(ox, drawY, r + 3, 0, Math.PI*2); ctx.beginPath(); ctx.arc(ox, drawY, r + 3, 0, Math.PI*2);
ctx.strokeStyle = '#E4AC38'; ctx.lineWidth = 2.5; ctx.stroke(); ctx.strokeStyle = '#E4AC38'; ctx.lineWidth = 2.5; ctx.stroke();
ctx.restore();
ctx.beginPath(); ctx.arc(ox, drawY, r + 6, 0, Math.PI*2); ctx.beginPath(); ctx.arc(ox, drawY, r + 6, 0, Math.PI*2);
ctx.strokeStyle = 'rgba(228,172,56,0.25)'; ctx.lineWidth = 1.5; ctx.stroke(); ctx.strokeStyle = 'rgba(228,172,56,0.3)'; ctx.lineWidth = 1.5; ctx.stroke();
} }
// Shadow
// === ENHANCEMENT 3: 3D pawn with gradient body === ctx.beginPath(); ctx.arc(ox, oy + 2, r, 0, Math.PI*2); ctx.fillStyle = 'rgba(0,0,0,0.2)'; ctx.fill();
// Drop shadow // Body
ctx.save(); ctx.beginPath(); ctx.arc(ox, drawY - r*0.15, r*0.65, 0, Math.PI*2); ctx.fillStyle = COLORS[pIdx]; ctx.fill();
ctx.shadowColor = 'rgba(0,0,0,0.35)'; // Base
ctx.shadowBlur = 3; ctx.beginPath(); ctx.ellipse(ox, drawY + r*0.4, r*0.8, r*0.4, 0, 0, Math.PI*2); ctx.fillStyle = COLORS[pIdx]; ctx.fill();
ctx.shadowOffsetY = 2; // Border
ctx.beginPath(); ctx.ellipse(ox, oy + r*0.5, r*0.7, r*0.3, 0, 0, Math.PI*2); ctx.beginPath(); ctx.arc(ox, drawY - r*0.15, r*0.65, 0, Math.PI*2); ctx.strokeStyle = '#fff'; ctx.lineWidth = 1.5; ctx.stroke();
ctx.fillStyle = 'rgba(0,0,0,0.25)'; ctx.fill(); ctx.beginPath(); ctx.ellipse(ox, drawY + r*0.4, r*0.8, r*0.4, 0, 0, Math.PI*2); ctx.strokeStyle = '#fff'; ctx.lineWidth = 1; ctx.stroke();
ctx.restore(); // Highlight dot
ctx.beginPath(); ctx.arc(ox - r*0.2, drawY - r*0.35, r*0.18, 0, Math.PI*2); ctx.fillStyle = 'rgba(255,255,255,0.5)'; ctx.fill();
// Base (wider ellipse) with gradient
const baseGrad = ctx.createLinearGradient(ox-r, drawY+r*0.2, ox+r, drawY+r*0.6);
baseGrad.addColorStop(0, COLORS_LIGHT[pIdx]);
baseGrad.addColorStop(0.5, COLORS[pIdx]);
baseGrad.addColorStop(1, darkenColor(COLORS[pIdx], 40));
ctx.beginPath(); ctx.ellipse(ox, drawY + r*0.35, r*0.82, r*0.42, 0, 0, Math.PI*2);
ctx.fillStyle = baseGrad; ctx.fill();
ctx.strokeStyle = 'rgba(255,255,255,0.7)'; ctx.lineWidth = 1.2; ctx.stroke();
// Head (circle) with radial gradient for 3D
const headGrad = ctx.createRadialGradient(ox - r*0.15, drawY - r*0.3, 0, ox, drawY - r*0.1, r*0.7);
headGrad.addColorStop(0, COLORS_LIGHT[pIdx]);
headGrad.addColorStop(0.6, COLORS[pIdx]);
headGrad.addColorStop(1, darkenColor(COLORS[pIdx], 50));
ctx.beginPath(); ctx.arc(ox, drawY - r*0.1, r*0.6, 0, Math.PI*2);
ctx.fillStyle = headGrad; ctx.fill();
ctx.strokeStyle = 'rgba(255,255,255,0.8)'; ctx.lineWidth = 1.5; ctx.stroke();
// Shine highlight (top-left specular)
ctx.beginPath(); ctx.arc(ox - r*0.18, drawY - r*0.3, r*0.2, 0, Math.PI*2);
ctx.fillStyle = 'rgba(255,255,255,0.7)'; ctx.fill();
// Smaller secondary shine
ctx.beginPath(); ctx.arc(ox - r*0.05, drawY - r*0.45, r*0.08, 0, Math.PI*2);
ctx.fillStyle = 'rgba(255,255,255,0.5)'; ctx.fill();
}); });
}); });
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment