Cella

Oggi vediamo la classe della cella, l'ultimo oggetto base prima di andare (nel prossimo post) a parlare dell'oggetto che orchestrerá il tutto

La cella é la mattonella del campo di battaglia, come detto giá graficamente cercheró di migliorarla, al momento saranno solo colori.

Non perdiamo tempo e andiamo ad analizzare un pochetto di codice.

import Pos from '../utils/pos';
import { C_BLACK, C_WHITE, C_SIZE } from "../utils/consts";

export default class Cella {

  tipo: number = 0;
  public pos: Pos | undefined;
  public stepped: boolean = false;
  public occupied: boolean = false;
  public deploy: boolean = false;
  public square: Phaser.GameObjects.Rectangle;
  public sqraction: Phaser.GameObjects.Rectangle;

Iniziamo con i membri.
Come prevedibile per semplificare al momento li ho messi tutti public per facilitare l'accesso (al momento tipo lo uso solo internamente quindi non serviva fuori).

Velocemente analizziamo le cose ovvie, pos é la posizione della cella, occupied per capire se é occupata o no, deploy se usabile per il posizionamento e due rettangoli uno per la grafica base e l'altro per gestire le interazioni con il mouse.

Costruttore

constructor(
    type: number,
    place: Pos,
    scene: Phaser.Scene,
  ) {
    this.tipo = type;
    this.pos = place;

    this.square = scene.add.rectangle(place.x * C_SIZE, place.y * C_SIZE, C_SIZE, C_SIZE, (type % 2 == 0) ? C_BLACK : C_WHITE);
    this.square.setOrigin(0, 0);

    this.sqraction = scene.add.rectangle(place.x * C_SIZE, place.y * C_SIZE, C_SIZE, C_SIZE, (type % 2 == 0) ? C_BLACK : C_WHITE);
    this.sqraction.setOrigin(0, 0);
    this.sqraction.setFillStyle(0xffffff, 0);
  }

Partiamo dai parametri, i primi due che ovviamente vengono salvati per poter essere usati pure successivamente come il tipo e la pos per calcolare il colore, perché la scacchiera sara' format a da celle di due colori (al momemnto) e la sua posizione.

Il terzo parametro é la scena su cui andare a disegnare i due quadrati, uno per dare un aspetto grafico mentre l'altro viene utlizzato per rendere visibile le celle attive, le quali gestiranno questi eventi.

Metodi

Al momento ho trovato utile solo 5 metodi; iniziamo dal primo, getPos per prendere la posizione della cella.

getPos(): Pos {return new Pos(this.square.x, this.square.y);}

I successivi vanno a coppia

  seleziona() {
   this.sqraction.setFillStyle(0xffffff, 0.6);
  }

  deseleziona() {
    this.sqraction.setFillStyle(0xffffff, 0);
  }

Questi due sevono per rendere visivamente il segno che la cella é stata selezionata o deselezionata, andando ad agire sul quadrato delle azioni.
In questo caso i due metodi servono a restituire all'utente la selezione o no della cella.

setDeploy() {
  this.deploy = true;
  this.sqraction.setFillStyle(0xe3ff30, 0.6);
}

unsetDeploy() {
  this.deploy = false;
  this.sqraction.setFillStyle(0xffffff, 0);
}

Idem in questi due metodi, cambia solo il colore che il quadrato per gestire gli eventi va a prendere, per ridare all'utente l'effetto visivo.
Questi due colorano la cella quando questa sará usata nella fase di deploy.

Nel prossimo post andiamo a concludere questa parte iniziale, andando a orchestrare il tutto per una prima verione funzionante del progetto, attendiamo ancora una settimana per avere la spiegazione della scena di Test.

Pubblicato 21 Dec 2023