Disable/Enable random Bonus on Scrabble GridTile - html

Question

am trying to add a new feature to a Scrabble project on Angular.
The feature is to swicth the places of the bonus case randomly , when user activate this feature.
my problem is that it's always activated , tried usin boolean or number always same problem .
can someone tell me what am i doing wrong please.
doc.html
<button (click)="activeRandomBonus()" class="btn btn-default form-control increaseBtn">Activer BONUS</button>
component.ts
#Component({
selector: 'app-param-game',
templateUrl: './param-game.component.html',
styleUrls: ['./param-game.component.scss'],
})
export class ParamGameComponent {
timeMax: number = 240;
timeMin: number = 0;
gridTile: GridTile;
console: Console;
textShow: boolean;
constructor(
public paramGameService: ParamGameService,
private dialogRef: MatDialogRef<ParamGameComponent>,
public dialog: MatDialog
) { }
// activeRandomBonus(): void {
// this.gridTile.randomButton();
// }
}
grid-tile.ts
export class GridTile {
arrayOps: ArrayOperations = new ArrayOperations();
paramGameService: ParamGameService = new ParamGameService();
letter: string;
bonusName: string;
// **test: number;**
isJoker: boolean = false;
multiplier: defaults.Multipliers = defaults.Multipliers.NoMultiplier;
pos: Vec2 = {
x: 0,
y: 0,
};
gridContext: CanvasRenderingContext2D;
constructor(context: CanvasRenderingContext2D, x: number, y: number) {
this.letter = '';
this.gridContext = context;
this.pos.x = x;
this.pos.y = y;
if (this.arrayOps.containsCoordinates(this.pos, defaults.MULTIPLIER_3W)) {
this.multiplier = 5;
} else if (this.arrayOps.containsCoordinates(this.pos, defaults.MULTIPLIER_2W)) {
this.multiplier = 4;
} else if (this.arrayOps.containsCoordinates(this.pos, defaults.MULTIPLIER_3L)) {
this.multiplier = 3;
} else if (this.arrayOps.containsCoordinates(this.pos, defaults.MULTIPLIER_2L)) {
this.multiplier = 2;
} else if (this.arrayOps.containsCoordinates(this.pos, defaults.STARTING_TILE)) {
this.multiplier = 0;
}
}
idOfTile(word1: string, word2: string) {
this.gridContext.fillText(
word1,
this.pos.x * defaults.TILE_SIZE + defaults.TILE_SIZE / 2 - defaults.TEN,
this.pos.y * defaults.TILE_SIZE + defaults.TILE_SIZE / 2,
);
this.gridContext.fillText(
word2,
this.pos.x * defaults.TILE_SIZE + defaults.TILE_SIZE / 2 - defaults.EIGHT,
this.pos.y * defaults.TILE_SIZE + defaults.TILE_SIZE / 2 + defaults.TWELVE,
);
}
randBonusName(x = Math.floor(Math.random() * 5)) {
if (x === 1 || x === 3) return (this.bonusName = 'Triple');
else return (this.bonusName = 'Double');
}
randomButton(): void {
this.test = +1;
// window.location.reload();
}
drawTile() {
// draw empty tile
this.gridContext.strokeRect(
this.pos.x * defaults.TILE_SIZE,
this.pos.y * defaults.TILE_SIZE,
defaults.PLAY_AREA_DEFAULT_WIDTH / defaults.TILES_NUMBER,
defaults.PLAY_AREA_DEFAULT_HEIGHT / defaults.TILES_NUMBER,
);
// Background style depends on multiplier
this.gridContext.fillStyle = 'white';
switch (this.multiplier) {
case defaults.Multipliers.ThreeW: {
this.gridContext.fillStyle = 'red';
break;
}
case defaults.Multipliers.TwoW: {
this.gridContext.fillStyle = 'pink';
break;
}
case defaults.Multipliers.ThreeL: {
this.gridContext.fillStyle = 'blue';
break;
}
case defaults.Multipliers.TwoL: {
this.gridContext.fillStyle = 'cyan';
break;
}
case defaults.Multipliers.Center: {
this.gridContext.fillStyle = 'green';
break;
}
case defaults.Multipliers.NoMultiplier: {
this.gridContext.fillStyle = 'white';
break;
}
// No default
}
this.gridContext.fillRect(
this.pos.x * defaults.TILE_SIZE + this.gridContext.lineWidth - 1,
this.pos.y * defaults.TILE_SIZE + this.gridContext.lineWidth - 1,
defaults.PLAY_AREA_DEFAULT_WIDTH / defaults.TILES_NUMBER - this.gridContext.lineWidth,
defaults.PLAY_AREA_DEFAULT_HEIGHT / defaults.TILES_NUMBER - this.gridContext.lineWidth,
);
this.gridContext.fillStyle = 'black';
this.gridContext.font = '10px Roboto';
switch (this.multiplier) {
case defaults.Multipliers.ThreeW: {
if (this.test <= 0) this.idOfTile('Mot', 'Triple');
//desactive random bonus
else this.idOfTile('Mot', this.randBonusName()); //active random bonus
break;
}
case defaults.Multipliers.TwoW: {
if (this.test <= 0) {
this.idOfTile('Mot', 'Double');
} else this.idOfTile('Mot', this.randBonusName());
break;
}
case defaults.Multipliers.ThreeL: {
if (this.test === 0) {
this.idOfTile('Lettre', 'Triple');
} else this.idOfTile('Lettre', this.randBonusName());
break;
}
case defaults.Multipliers.TwoL: {
if (this.test === 0) {
this.idOfTile('Lettre', 'Double');
} else this.idOfTile('Lettre', this.randBonusName());
break;
}
case defaults.Multipliers.Center: {
this.gridContext.fillText(
'Start',
this.pos.x * defaults.TILE_SIZE + defaults.TILE_SIZE / 2 - defaults.TEN,
this.pos.y * defaults.TILE_SIZE + defaults.TILE_SIZE / 2 + defaults.EIGHT,
);
break;
}
case defaults.Multipliers.NoMultiplier: {
// do nothing
break;
}
// No default
}
}
drawLetter(letter: string, isJoker: boolean) {
if (!this.gridContext) {
this.letter = letter;
return;
}
this.gridContext.fillStyle = 'peru';
this.gridContext.fillRect(
this.pos.x * defaults.TILE_SIZE + this.gridContext.lineWidth,
this.pos.y * defaults.TILE_SIZE + this.gridContext.lineWidth,
defaults.PLAY_AREA_DEFAULT_WIDTH / defaults.TILES_NUMBER - this.gridContext.lineWidth - 2,
defaults.PLAY_AREA_DEFAULT_HEIGHT / defaults.TILES_NUMBER - this.gridContext.lineWidth - 2,
);
// draw letter
this.gridContext.fillStyle = 'black';
this.gridContext.font = '25px Arial';
this.gridContext.fillText(
letter,
this.pos.x * defaults.TILE_SIZE + defaults.TILE_SIZE / 2 - defaults.TEN,
this.pos.y * defaults.TILE_SIZE + defaults.TILE_SIZE / 2 + defaults.EIGHT,
);
const scoreString = isJoker ? '0' : (defaults.LETTER_VALUES.get(letter) ?? 1)?.toString();
this.isJoker = isJoker;
// draw letter score
this.gridContext.font = '15px Arial';
// TODO: take2 digit scores into account
this.gridContext.fillText(
scoreString,
this.pos.x * defaults.TILE_SIZE + defaults.TILE_SIZE - defaults.TWELVE,
this.pos.y * defaults.TILE_SIZE + defaults.TILE_SIZE - defaults.FOUR,
);
this.letter = letter; // saving the letter
}
get tileLetter(): string {
return this.letter;
}
}

Answer 1

it looks like you are only setting the random feature to on, but when you click the button it doesnt check the current stat. You can do this fairly easily with boolean values by setting them to the opposite of what the currently are.
active = false;
randomButton(): void {
this.active = !this.active;
}
not sure how your code works but you may also need to trigger the class to refresh the logic.
active = false;
randomButton(): void {
this.active = !this.active;
this.drawTile();
}