64 lines
1.9 KiB
JavaScript
64 lines
1.9 KiB
JavaScript
/**
|
|
* Hand Display Object
|
|
* Affiche une main de Riichi avec options de position et orientation
|
|
*/
|
|
|
|
class Hand {
|
|
constructor(options = {}) {
|
|
this.label = options.label || 'Main';
|
|
this.position = options.position || 'left-label'; // 'left-label' or 'top-label'
|
|
this.tilt = options.tilt || 'none'; // 'none', 'left' (90deg), 'right' (-90deg), 'upside-down' (180deg)
|
|
this.containerId = options.containerId || 'tiles-display';
|
|
this.apiUrl = options.apiUrl || '/api/random_hand';
|
|
}
|
|
|
|
/**
|
|
* Récupère une main aléatoire et l'affiche
|
|
*/
|
|
async render() {
|
|
try {
|
|
const response = await fetch(this.apiUrl);
|
|
const data = await response.json();
|
|
this.displayHand(data.hand);
|
|
} catch (error) {
|
|
console.error('Erreur lors de la récupération de la main:', error);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Affiche la main dans le DOM
|
|
* @param {Array} tiles - Tableau des tuiles à afficher
|
|
*/
|
|
displayHand(tiles) {
|
|
const container = document.getElementById(this.containerId);
|
|
|
|
// Créer la section de la main
|
|
const handDiv = document.createElement('div');
|
|
const classNames = `hand-display ${this.position}`;
|
|
if (this.tilt !== 'none') {
|
|
handDiv.className = `${classNames} tilt-${this.tilt}`;
|
|
} else {
|
|
handDiv.className = classNames;
|
|
}
|
|
|
|
// Créer le label
|
|
const label = document.createElement('div');
|
|
label.className = 'hand-label';
|
|
label.textContent = this.label;
|
|
handDiv.appendChild(label);
|
|
|
|
// Créer la grille de tuiles
|
|
const handTiles = document.createElement('div');
|
|
handTiles.className = 'hand-tiles';
|
|
|
|
tiles.forEach(tile => {
|
|
const tileDiv = document.createElement('div');
|
|
tileDiv.className = 'hand-tile-item';
|
|
tileDiv.innerHTML = tile.svg;
|
|
handTiles.appendChild(tileDiv);
|
|
});
|
|
|
|
handDiv.appendChild(handTiles);
|
|
container.appendChild(handDiv);
|
|
}
|
|
}
|