chap 1
This commit is contained in:
Didictateur
parent
d526332658
commit
d41b6349d1
2 changed files with 205 additions and 105 deletions
107
frontend/js/tile.js
Normal file
107
frontend/js/tile.js
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
// 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) {
|
||||
if (this.family !== other.family) {
|
||||
return this.family < other.family;
|
||||
}
|
||||
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;
|
||||
|
|
@ -161,6 +161,7 @@
|
|||
<div id="mascotte"></div>
|
||||
|
||||
<script src="/frontend/js/fr/texts.js"></script>
|
||||
<script src="/frontend/js/tile.js"></script>
|
||||
<script>
|
||||
// Charger le menu
|
||||
fetch('/components/menu.html')
|
||||
|
|
@ -185,116 +186,108 @@
|
|||
}
|
||||
});
|
||||
|
||||
let allTiles = [];
|
||||
// Générer les tuiles localement
|
||||
const allTiles = Tile.generateAll();
|
||||
const tilesDisplay = document.getElementById('tiles-display');
|
||||
|
||||
// Récupérer les tuiles
|
||||
fetch('/api/tiles')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
allTiles = data.tiles;
|
||||
|
||||
const tilesDisplay = document.getElementById('tiles-display');
|
||||
|
||||
// Man
|
||||
let section = document.createElement('div');
|
||||
section.className = 'tiles-family';
|
||||
const manTitle = document.createElement('h3');
|
||||
manTitle.textContent = 'Caractères';
|
||||
const manGrid = document.createElement('div');
|
||||
manGrid.className = 'tiles-grid';
|
||||
section.appendChild(manTitle);
|
||||
section.appendChild(manGrid);
|
||||
for (let i = 0; i < 9; i++) {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.className = 'tile-item';
|
||||
tileDiv.innerHTML = allTiles[i].svg;
|
||||
manGrid.appendChild(tileDiv);
|
||||
}
|
||||
tilesDisplay.appendChild(section);
|
||||
|
||||
// Pin
|
||||
section = document.createElement('div');
|
||||
section.className = 'tiles-family';
|
||||
const pinTitle = document.createElement('h3');
|
||||
pinTitle.textContent = 'Ronds';
|
||||
const pinGrid = document.createElement('div');
|
||||
pinGrid.className = 'tiles-grid';
|
||||
section.appendChild(pinTitle);
|
||||
section.appendChild(pinGrid);
|
||||
for (let i = 9; i < 18; i++) {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.className = 'tile-item';
|
||||
tileDiv.innerHTML = allTiles[i].svg;
|
||||
pinGrid.appendChild(tileDiv);
|
||||
}
|
||||
tilesDisplay.appendChild(section);
|
||||
|
||||
// Sou
|
||||
section = document.createElement('div');
|
||||
section.className = 'tiles-family';
|
||||
const souTitle = document.createElement('h3');
|
||||
souTitle.textContent = 'Bambous';
|
||||
const souGrid = document.createElement('div');
|
||||
souGrid.className = 'tiles-grid';
|
||||
section.appendChild(souTitle);
|
||||
section.appendChild(souGrid);
|
||||
for (let i = 18; i < 27; i++) {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.className = 'tile-item';
|
||||
tileDiv.innerHTML = allTiles[i].svg;
|
||||
souGrid.appendChild(tileDiv);
|
||||
}
|
||||
tilesDisplay.appendChild(section);
|
||||
// Man
|
||||
let section = document.createElement('div');
|
||||
section.className = 'tiles-family';
|
||||
const manTitle = document.createElement('h3');
|
||||
manTitle.textContent = 'Caractères';
|
||||
const manGrid = document.createElement('div');
|
||||
manGrid.className = 'tiles-grid';
|
||||
section.appendChild(manTitle);
|
||||
section.appendChild(manGrid);
|
||||
for (let i = 0; i < 9; i++) {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.className = 'tile-item';
|
||||
tileDiv.innerHTML = allTiles[i].getSVG();
|
||||
manGrid.appendChild(tileDiv);
|
||||
}
|
||||
tilesDisplay.appendChild(section);
|
||||
|
||||
// Ligne des noms de vents
|
||||
const windNamesDiv = document.createElement('div');
|
||||
windNamesDiv.className = 'wind-names';
|
||||
windNamesDiv.innerHTML = '<div>Est</div><div>Sud</div><div>Ouest</div><div>Nord</div>';
|
||||
tilesDisplay.appendChild(windNamesDiv);
|
||||
// Pin
|
||||
section = document.createElement('div');
|
||||
section.className = 'tiles-family';
|
||||
const pinTitle = document.createElement('h3');
|
||||
pinTitle.textContent = 'Ronds';
|
||||
const pinGrid = document.createElement('div');
|
||||
pinGrid.className = 'tiles-grid';
|
||||
section.appendChild(pinTitle);
|
||||
section.appendChild(pinGrid);
|
||||
for (let i = 9; i < 18; i++) {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.className = 'tile-item';
|
||||
tileDiv.innerHTML = allTiles[i].getSVG();
|
||||
pinGrid.appendChild(tileDiv);
|
||||
}
|
||||
tilesDisplay.appendChild(section);
|
||||
|
||||
// Vents
|
||||
section = document.createElement('div');
|
||||
section.className = 'tiles-family';
|
||||
const windTitle = document.createElement('h3');
|
||||
windTitle.textContent = 'Vents';
|
||||
const windGrid = document.createElement('div');
|
||||
windGrid.className = 'tiles-grid';
|
||||
windGrid.style.gridTemplateColumns = 'repeat(4, minmax(0, 1fr))';
|
||||
section.appendChild(windTitle);
|
||||
section.appendChild(windGrid);
|
||||
const windNames = ['Est', 'Sud', 'Ouest', 'Nord'];
|
||||
for (let i = 27; i < 31; i++) {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.className = 'tile-item';
|
||||
tileDiv.innerHTML = allTiles[i].svg;
|
||||
windGrid.appendChild(tileDiv);
|
||||
}
|
||||
tilesDisplay.appendChild(section);
|
||||
// Sou
|
||||
section = document.createElement('div');
|
||||
section.className = 'tiles-family';
|
||||
const souTitle = document.createElement('h3');
|
||||
souTitle.textContent = 'Bambous';
|
||||
const souGrid = document.createElement('div');
|
||||
souGrid.className = 'tiles-grid';
|
||||
section.appendChild(souTitle);
|
||||
section.appendChild(souGrid);
|
||||
for (let i = 18; i < 27; i++) {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.className = 'tile-item';
|
||||
tileDiv.innerHTML = allTiles[i].getSVG();
|
||||
souGrid.appendChild(tileDiv);
|
||||
}
|
||||
tilesDisplay.appendChild(section);
|
||||
|
||||
// Ligne des noms de dragons
|
||||
const dragonNamesDiv = document.createElement('div');
|
||||
dragonNamesDiv.className = 'dragon-names';
|
||||
dragonNamesDiv.innerHTML = '<div>Blanc</div><div>Vert</div><div>Rouge</div>';
|
||||
tilesDisplay.appendChild(dragonNamesDiv);
|
||||
// Ligne des noms de vents
|
||||
const windNamesDiv = document.createElement('div');
|
||||
windNamesDiv.className = 'wind-names';
|
||||
windNamesDiv.innerHTML = '<div>Est</div><div>Sud</div><div>Ouest</div><div>Nord</div>';
|
||||
tilesDisplay.appendChild(windNamesDiv);
|
||||
|
||||
// Dragons
|
||||
section = document.createElement('div');
|
||||
section.className = 'tiles-family';
|
||||
const dragonTitle = document.createElement('h3');
|
||||
dragonTitle.textContent = 'Dragons';
|
||||
const dragonGrid = document.createElement('div');
|
||||
dragonGrid.className = 'tiles-grid';
|
||||
dragonGrid.style.gridTemplateColumns = 'repeat(3, minmax(0, 1fr))';
|
||||
section.appendChild(dragonTitle);
|
||||
section.appendChild(dragonGrid);
|
||||
for (let i = 31; i < 34; i++) {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.className = 'tile-item';
|
||||
tileDiv.innerHTML = allTiles[i].svg;
|
||||
dragonGrid.appendChild(tileDiv);
|
||||
}
|
||||
tilesDisplay.appendChild(section);
|
||||
});
|
||||
// Vents
|
||||
section = document.createElement('div');
|
||||
section.className = 'tiles-family';
|
||||
const windTitle = document.createElement('h3');
|
||||
windTitle.textContent = 'Vents';
|
||||
const windGrid = document.createElement('div');
|
||||
windGrid.className = 'tiles-grid';
|
||||
windGrid.style.gridTemplateColumns = 'repeat(4, minmax(0, 1fr))';
|
||||
section.appendChild(windTitle);
|
||||
section.appendChild(windGrid);
|
||||
for (let i = 27; i < 31; i++) {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.className = 'tile-item';
|
||||
tileDiv.innerHTML = allTiles[i].getSVG();
|
||||
windGrid.appendChild(tileDiv);
|
||||
}
|
||||
tilesDisplay.appendChild(section);
|
||||
|
||||
// Ligne des noms de dragons
|
||||
const dragonNamesDiv = document.createElement('div');
|
||||
dragonNamesDiv.className = 'dragon-names';
|
||||
dragonNamesDiv.innerHTML = '<div>Blanc</div><div>Vert</div><div>Rouge</div>';
|
||||
tilesDisplay.appendChild(dragonNamesDiv);
|
||||
|
||||
// Dragons
|
||||
section = document.createElement('div');
|
||||
section.className = 'tiles-family';
|
||||
const dragonTitle = document.createElement('h3');
|
||||
dragonTitle.textContent = 'Dragons';
|
||||
const dragonGrid = document.createElement('div');
|
||||
dragonGrid.className = 'tiles-grid';
|
||||
dragonGrid.style.gridTemplateColumns = 'repeat(3, minmax(0, 1fr))';
|
||||
section.appendChild(dragonTitle);
|
||||
section.appendChild(dragonGrid);
|
||||
for (let i = 31; i < 34; i++) {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.className = 'tile-item';
|
||||
tileDiv.innerHTML = allTiles[i].getSVG();
|
||||
dragonGrid.appendChild(tileDiv);
|
||||
}
|
||||
tilesDisplay.appendChild(section);
|
||||
|
||||
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue