Added glow effect on Mastermind pegs

This commit is contained in:
Brian Fertig 2026-05-31 20:28:40 -06:00
parent aa9a3a0f6c
commit df976b572a
1 changed files with 21 additions and 5 deletions

View File

@ -317,9 +317,19 @@ export default class MastermindGame extends Phaser.Scene {
makePeg(x, y, colorIndex, radius) {
const color = CODE_COLORS[colorIndex] ?? 0x888888;
const peg = this.add.circle(x, y, radius, color);
peg.setStrokeStyle(2, 0xffffff, 0.65);
return peg;
const container = this.add.container(x, y);
const g1 = this.add.circle(0, 0, radius * 2.4, color, 0.08);
g1.setBlendMode(Phaser.BlendModes.ADD);
const g2 = this.add.circle(0, 0, radius * 1.6, color, 0.22);
g2.setBlendMode(Phaser.BlendModes.ADD);
const circle = this.add.circle(0, 0, radius, color);
circle.setStrokeStyle(2, 0xffffff, 0.65);
container.add([g1, g2, circle]);
container._mainCircle = circle;
container._glowCircles = [g1, g2];
return container;
}
makeEmptySlot(x, y, radius = PEG_R) {
@ -448,7 +458,8 @@ export default class MastermindGame extends Phaser.Scene {
const x = startX + i * gap;
if (this.draft[i] != null) {
const peg = this.makePeg(x, draftY, this.draft[i], PEG_R + 3);
peg.setInteractive({ useHandCursor: true });
peg.setInteractive(new Phaser.Geom.Circle(0, 0, PEG_R + 3), Phaser.Geom.Circle.Contains);
peg.input.cursor = 'pointer';
peg.on('pointerdown', () => this.removeDraftAt(i));
this.composeLayer.add(peg);
} else {
@ -462,6 +473,9 @@ export default class MastermindGame extends Phaser.Scene {
const sx0 = pcx - totalW / 2 + sw / 2;
for (let c = 0; c < this.config.colors; c++) {
const x = sx0 + c * (sw + sgap);
const chipGlow = this.add.circle(x, palY, sw * 0.75, CODE_COLORS[c], 0.18);
chipGlow.setBlendMode(Phaser.BlendModes.ADD);
this.composeLayer.add(chipGlow);
const chip = this.add.circle(x, palY, sw / 2, CODE_COLORS[c]);
chip.setStrokeStyle(3, 0xffffff, 0.6);
chip.setInteractive({ useHandCursor: true });
@ -630,7 +644,9 @@ export default class MastermindGame extends Phaser.Scene {
ticks++;
pegsObjs.forEach((p, c) => {
const ci = ticks >= maxTicks ? finalGuess[c] : Math.floor(Math.random() * this.config.colors);
p.setFillStyle(CODE_COLORS[ci] ?? 0x888888);
const col = CODE_COLORS[ci] ?? 0x888888;
p._mainCircle.setFillStyle(col);
p._glowCircles.forEach(g => g.setFillStyle(col));
});
if (ticks >= maxTicks) {
ev.remove();