brianfertig/fertig-classic-games
brianfertig
/
fertig-classic-games
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: refine card back rendering and update SkipBo layout coordinates 

- Clip diagonal stripes in Phase10 and SkipBo card backs to prevent overflow.
- Adjust slot coordinates for stock, discards, hand, and labels in SkipBo.
- Add background rectangle to SkipBo stock count badge.
- Apply consistent code formatting (spacing) across SkipBoGame.
This commit is contained in:
Brian Fertig 2026-05-17 11:12:55 -06:00
parent 639b37c354
commit a397302942
2 changed files with 46 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/src/games/phase10/Phase10Game.js
View File

@ -476,9 +476,12 @@ export default class Phase10Game extends Phaser.Scene {
g.strokeRoundedRect(x, y, CARD_W, CARD_H, CARD_R); g.strokeRoundedRect(x, y, CARD_W, CARD_H, CARD_R);
g.lineStyle(2, WILD_STRIPE, 0.5); g.lineStyle(2, WILD_STRIPE, 0.5);
for (let s = -CARD_H; s < CARD_W; s += 14) { for (let s = -CARD_H; s < CARD_W; s += 14) {
const t0 = Math.max(0, -s / CARD_H);
const t1 = Math.min(1, (CARD_W - s) / CARD_H);
if (t0 >= t1) continue;
g.beginPath(); g.beginPath();
g.moveTo(x + s, y + CARD_H); g.moveTo(x + s + t0 * CARD_H, y + CARD_H * (1 - t0));
g.lineTo(x + s + CARD_H, y); g.lineTo(x + s + t1 * CARD_H, y + CARD_H * (1 - t1));
g.strokePath(); g.strokePath();
} }
container.add(g); container.add(g);

23
public/src/games/skipbo/SkipBoGame.js
View File

@ -69,11 +69,11 @@ function slotLayout(slot) {
rotation: 0, rotation: 0,
stock: { x: 460, y: 950 }, stock: { x: 460, y: 950 },
discards: [{ x: 630, y: 950 }, { x: 750, y: 950 }, { x: 870, y: 950 }, { x: 990, y: 950 }], discards: [{ x: 630, y: 950 }, { x: 750, y: 950 }, { x: 870, y: 950 }, { x: 990, y: 950 }],
handStart:{ x: 1110, y: 950 }, handStart: { x: 1110, y: 975 },
handAxis: 'x', handAxis: 'x',
portrait: { x: 320, y: 950, r: 60 }, portrait: { x: 320, y: 950, r: 60 },
nameLabel: { x: 320, y: 1030 }, nameLabel: { x: 320, y: 1030 },
stockCntPos: { x: 460, y: 880 }, stockCntPos: { x: 460, y: 855 },
rotateCards: 0, rotateCards: 0,
outlineRotation: 0, outlineRotation: 0,
}; };
@ -86,7 +86,7 @@ function slotLayout(slot) {
handAxis: 'x', handAxis: 'x',
portrait: { x: 420, y: 130, r: 60 }, portrait: { x: 420, y: 130, r: 60 },
nameLabel: { x: 420, y: 210 }, nameLabel: { x: 420, y: 210 },
stockCntPos: { x: 560, y: 60 }, stockCntPos: { x: 560, y: 225 },
rotateCards: 180, rotateCards: 180,
outlineRotation: 0, outlineRotation: 0,
}; };
@ -99,7 +99,7 @@ function slotLayout(slot) {
handAxis: 'y-up', // hand fans upward toward 920..520 handAxis: 'y-up', // hand fans upward toward 920..520
portrait: { x: 100, y: 130, r: 56 }, portrait: { x: 100, y: 130, r: 56 },
nameLabel: { x: 100, y: 50 }, nameLabel: { x: 100, y: 50 },
stockCntPos:{ x: 180, y: 260 }, stockCntPos: { x: 205, y: 260 },
rotateCards: 90, rotateCards: 90,
outlineRotation: 90, outlineRotation: 90,
}; };
@ -112,7 +112,7 @@ function slotLayout(slot) {
handAxis: 'y-up', handAxis: 'y-up',
portrait: { x: 1820, y: 130, r: 56 }, portrait: { x: 1820, y: 130, r: 56 },
nameLabel: { x: 1820, y: 50 }, nameLabel: { x: 1820, y: 50 },
stockCntPos:{ x: 1740,y: 260 }, stockCntPos: { x: 1715, y: 260 },
rotateCards: 270, rotateCards: 270,
outlineRotation: 90, outlineRotation: 90,
}; };
@ -203,9 +203,11 @@ export default class SkipBoGame extends Phaser.Scene {
const sRect = this.add.rectangle(layout.stock.x, layout.stock.y, CARD_W + 6, CARD_H + 6, 0x000000, 0.35) const sRect = this.add.rectangle(layout.stock.x, layout.stock.y, CARD_W + 6, CARD_H + 6, 0x000000, 0.35)
.setStrokeStyle(2, COLORS.muted).setAngle(layout.outlineRotation).setDepth(D.pile); .setStrokeStyle(2, COLORS.muted).setAngle(layout.outlineRotation).setDepth(D.pile);
// Stock count badge // Stock count badge
this.add.rectangle(layout.stockCntPos.x, layout.stockCntPos.y, 52, 34, 0x000000, 0.55)
.setDepth(D.ui);
const sCnt = this.add.text(layout.stockCntPos.x, layout.stockCntPos.y, '0', { const sCnt = this.add.text(layout.stockCntPos.x, layout.stockCntPos.y, '0', {
fontFamily: '"Julius Sans One"', fontSize: '26px', color: COLORS.accentHex, fontStyle: 'bold', fontFamily: '"Julius Sans One"', fontSize: '26px', color: COLORS.accentHex, fontStyle: 'bold',
}).setOrigin(0.5).setDepth(D.ui); }).setOrigin(0.5).setDepth(D.ui + 1);
this.stockPileObjs[seat] = { rect: sRect, count: sCnt, x: layout.stock.x, y: layout.stock.y }; this.stockPileObjs[seat] = { rect: sRect, count: sCnt, x: layout.stock.x, y: layout.stock.y };
if (seat === 0) { if (seat === 0) {
@ -344,12 +346,15 @@ export default class SkipBoGame extends Phaser.Scene {
g.fillRoundedRect(x, y, CARD_W, CARD_H, CARD_R); g.fillRoundedRect(x, y, CARD_W, CARD_H, CARD_R);
g.lineStyle(3, WILD_STRIPE, 1); g.lineStyle(3, WILD_STRIPE, 1);
g.strokeRoundedRect(x, y, CARD_W, CARD_H, CARD_R); g.strokeRoundedRect(x, y, CARD_W, CARD_H, CARD_R);
// Diagonal stripes // Diagonal stripes — clipped to card bounds
g.lineStyle(2, WILD_STRIPE, 0.5); g.lineStyle(2, WILD_STRIPE, 0.5);
for (let s = -CARD_H; s < CARD_W; s += 14) { for (let s = -CARD_H; s < CARD_W; s += 14) {
const t0 = Math.max(0, -s / CARD_H);
const t1 = Math.min(1, (CARD_W - s) / CARD_H);
if (t0 >= t1) continue;
g.beginPath(); g.beginPath();
g.moveTo(x + s, y + CARD_H); g.moveTo(x + s + t0 * CARD_H, y + CARD_H * (1 - t0));
g.lineTo(x + s + CARD_H, y); g.lineTo(x + s + t1 * CARD_H, y + CARD_H * (1 - t1));
g.strokePath(); g.strokePath();
} }
container.add(g); container.add(g);