110 lines
3.8 KiB
JavaScript
110 lines
3.8 KiB
JavaScript
// frontend/js/tile.js
|
|
// Traduction de tile.py en JavaScript
|
|
|
|
// Enum JS pour familles et valeurs
|
|
const Family = {
|
|
MAN: 'man', PIN: 'pin', SOU: 'sou', WIND: 'wind', DRAGON: 'dragon'
|
|
};
|
|
const Wind = { EAST: 1, SOUTH: 2, WEST: 3, NORTH: 4 };
|
|
const Dragon = { RED: 1, GREEN: 2, WHITE: 3 };
|
|
|
|
class Tile {
|
|
constructor(family, value, id) {
|
|
this.family = family;
|
|
this.value = value;
|
|
this.id = id;
|
|
this.hidden = false;
|
|
this.img = null;
|
|
this.img_back = "Back.svg";
|
|
this.img_front = "Front.svg";
|
|
this.img_shadow = "Gray.svg";
|
|
if (family === Family.MAN) {
|
|
if (value >= 1 && value <= 9) this.img_symbol = `Man${value}.svg`;
|
|
else throw new Error(`Invalid value: ${value}`);
|
|
} else if (family === Family.PIN) {
|
|
if (value >= 1 && value <= 9) this.img_symbol = `Pin${value}.svg`;
|
|
else throw new Error(`Invalid value: ${value}`);
|
|
} else if (family === Family.SOU) {
|
|
if (value >= 1 && value <= 9) this.img_symbol = `Sou${value}.svg`;
|
|
else throw new Error(`Invalid value: ${value}`);
|
|
} else if (family === Family.WIND) {
|
|
if (value === Wind.EAST) this.img_symbol = "Ton.svg";
|
|
else if (value === Wind.SOUTH) this.img_symbol = "Nan.svg";
|
|
else if (value === Wind.WEST) this.img_symbol = "Shaa.svg";
|
|
else if (value === Wind.NORTH) this.img_symbol = "Pei.svg";
|
|
else throw new Error(`Invalid value: ${value}`);
|
|
} else if (family === Family.DRAGON) {
|
|
if (value === Dragon.RED) this.img_symbol = "Chun.svg";
|
|
else if (value === Dragon.GREEN) this.img_symbol = "Hatsu.svg";
|
|
else if (value === Dragon.WHITE) this.img_symbol = "Haku.svg";
|
|
else throw new Error(`Invalid value: ${value}`);
|
|
} else {
|
|
throw new Error(`Invalid family: ${family}`);
|
|
}
|
|
}
|
|
|
|
getSVG() {
|
|
if (!this.img) {
|
|
const ratio = 400 / 300;
|
|
const width = 60;
|
|
const height = ratio * width;
|
|
// Utilise <image> pour chaque couche SVG
|
|
const shadow = `<image href="/img/Regular/${this.img_shadow}" x="10" y="10" height="410" width="310"/>`;
|
|
const front = `<image href="/img/Regular/${this.img_front}" x="0" y="0" height="410" width="310"/>`;
|
|
const symbol = `<image href="/img/Regular/${this.img_symbol}" x="12" y="20" height="370" width="285"/>`;
|
|
this.img = `<svg class="tile tile-${this.id}" data-tile-id="${this.id}" viewBox="0 0 310 410" height="${height}" width="${width}">${shadow}${front}${symbol}</svg>`;
|
|
}
|
|
return this.img;
|
|
}
|
|
|
|
equals(other) {
|
|
return this.value === other.value && this.family === other.family;
|
|
}
|
|
|
|
lessThan(other) {
|
|
const order = [Family.MAN, Family.PIN, Family.SOU, Family.WIND, Family.DRAGON];
|
|
const famA = order.indexOf(this.family);
|
|
const famB = order.indexOf(other.family);
|
|
if (famA !== famB) {
|
|
return famA < famB;
|
|
}
|
|
if (typeof this.value === 'object' && 'value' in this.value) {
|
|
return this.value.value < other.value.value;
|
|
}
|
|
return this.value < other.value;
|
|
}
|
|
|
|
static generateAll() {
|
|
const tiles = [];
|
|
let id = 0;
|
|
for (let _ = 0; _ < 4; _++) {
|
|
// man
|
|
for (let i = 1; i <= 9; i++) {
|
|
tiles.push(new Tile(Family.MAN, i, id++));
|
|
}
|
|
// pin
|
|
for (let i = 1; i <= 9; i++) {
|
|
tiles.push(new Tile(Family.PIN, i, id++));
|
|
}
|
|
// sou
|
|
for (let i = 1; i <= 9; i++) {
|
|
tiles.push(new Tile(Family.SOU, i, id++));
|
|
}
|
|
// wind
|
|
for (let wind of [Wind.EAST, Wind.SOUTH, Wind.WEST, Wind.NORTH]) {
|
|
tiles.push(new Tile(Family.WIND, wind, id++));
|
|
}
|
|
// dragon
|
|
for (let dragon of [Dragon.RED, Dragon.GREEN, Dragon.WHITE]) {
|
|
tiles.push(new Tile(Family.DRAGON, dragon, id++));
|
|
}
|
|
}
|
|
return tiles;
|
|
}
|
|
}
|
|
|
|
// Expose dans le scope global pour compatibilité avec les scripts HTML classiques
|
|
window.Tile = Tile;
|
|
window.Family = Family;
|
|
window.Wind = Wind;
|
|
window.Dragon = Dragon;
|