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,14 +186,8 @@
|
|||
}
|
||||
});
|
||||
|
||||
let allTiles = [];
|
||||
|
||||
// Récupérer les tuiles
|
||||
fetch('/api/tiles')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
allTiles = data.tiles;
|
||||
|
||||
// Générer les tuiles localement
|
||||
const allTiles = Tile.generateAll();
|
||||
const tilesDisplay = document.getElementById('tiles-display');
|
||||
|
||||
// Man
|
||||
|
|
@ -207,7 +202,7 @@
|
|||
for (let i = 0; i < 9; i++) {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.className = 'tile-item';
|
||||
tileDiv.innerHTML = allTiles[i].svg;
|
||||
tileDiv.innerHTML = allTiles[i].getSVG();
|
||||
manGrid.appendChild(tileDiv);
|
||||
}
|
||||
tilesDisplay.appendChild(section);
|
||||
|
|
@ -224,7 +219,7 @@
|
|||
for (let i = 9; i < 18; i++) {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.className = 'tile-item';
|
||||
tileDiv.innerHTML = allTiles[i].svg;
|
||||
tileDiv.innerHTML = allTiles[i].getSVG();
|
||||
pinGrid.appendChild(tileDiv);
|
||||
}
|
||||
tilesDisplay.appendChild(section);
|
||||
|
|
@ -241,7 +236,7 @@
|
|||
for (let i = 18; i < 27; i++) {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.className = 'tile-item';
|
||||
tileDiv.innerHTML = allTiles[i].svg;
|
||||
tileDiv.innerHTML = allTiles[i].getSVG();
|
||||
souGrid.appendChild(tileDiv);
|
||||
}
|
||||
tilesDisplay.appendChild(section);
|
||||
|
|
@ -262,11 +257,10 @@
|
|||
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;
|
||||
tileDiv.innerHTML = allTiles[i].getSVG();
|
||||
windGrid.appendChild(tileDiv);
|
||||
}
|
||||
tilesDisplay.appendChild(section);
|
||||
|
|
@ -290,11 +284,10 @@
|
|||
for (let i = 31; i < 34; i++) {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.className = 'tile-item';
|
||||
tileDiv.innerHTML = allTiles[i].svg;
|
||||
tileDiv.innerHTML = allTiles[i].getSVG();
|
||||
dragonGrid.appendChild(tileDiv);
|
||||
}
|
||||
tilesDisplay.appendChild(section);
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue