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>
|
<div id="mascotte"></div>
|
||||||
|
|
||||||
<script src="/frontend/js/fr/texts.js"></script>
|
<script src="/frontend/js/fr/texts.js"></script>
|
||||||
|
<script src="/frontend/js/tile.js"></script>
|
||||||
<script>
|
<script>
|
||||||
// Charger le menu
|
// Charger le menu
|
||||||
fetch('/components/menu.html')
|
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
|
// Man
|
||||||
fetch('/api/tiles')
|
let section = document.createElement('div');
|
||||||
.then(r => r.json())
|
section.className = 'tiles-family';
|
||||||
.then(data => {
|
const manTitle = document.createElement('h3');
|
||||||
allTiles = data.tiles;
|
manTitle.textContent = 'Caractères';
|
||||||
|
const manGrid = document.createElement('div');
|
||||||
const tilesDisplay = document.getElementById('tiles-display');
|
manGrid.className = 'tiles-grid';
|
||||||
|
section.appendChild(manTitle);
|
||||||
// Man
|
section.appendChild(manGrid);
|
||||||
let section = document.createElement('div');
|
for (let i = 0; i < 9; i++) {
|
||||||
section.className = 'tiles-family';
|
const tileDiv = document.createElement('div');
|
||||||
const manTitle = document.createElement('h3');
|
tileDiv.className = 'tile-item';
|
||||||
manTitle.textContent = 'Caractères';
|
tileDiv.innerHTML = allTiles[i].getSVG();
|
||||||
const manGrid = document.createElement('div');
|
manGrid.appendChild(tileDiv);
|
||||||
manGrid.className = 'tiles-grid';
|
}
|
||||||
section.appendChild(manTitle);
|
tilesDisplay.appendChild(section);
|
||||||
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);
|
|
||||||
|
|
||||||
// Ligne des noms de vents
|
// Pin
|
||||||
const windNamesDiv = document.createElement('div');
|
section = document.createElement('div');
|
||||||
windNamesDiv.className = 'wind-names';
|
section.className = 'tiles-family';
|
||||||
windNamesDiv.innerHTML = '<div>Est</div><div>Sud</div><div>Ouest</div><div>Nord</div>';
|
const pinTitle = document.createElement('h3');
|
||||||
tilesDisplay.appendChild(windNamesDiv);
|
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
|
// Sou
|
||||||
section = document.createElement('div');
|
section = document.createElement('div');
|
||||||
section.className = 'tiles-family';
|
section.className = 'tiles-family';
|
||||||
const windTitle = document.createElement('h3');
|
const souTitle = document.createElement('h3');
|
||||||
windTitle.textContent = 'Vents';
|
souTitle.textContent = 'Bambous';
|
||||||
const windGrid = document.createElement('div');
|
const souGrid = document.createElement('div');
|
||||||
windGrid.className = 'tiles-grid';
|
souGrid.className = 'tiles-grid';
|
||||||
windGrid.style.gridTemplateColumns = 'repeat(4, minmax(0, 1fr))';
|
section.appendChild(souTitle);
|
||||||
section.appendChild(windTitle);
|
section.appendChild(souGrid);
|
||||||
section.appendChild(windGrid);
|
for (let i = 18; i < 27; i++) {
|
||||||
const windNames = ['Est', 'Sud', 'Ouest', 'Nord'];
|
const tileDiv = document.createElement('div');
|
||||||
for (let i = 27; i < 31; i++) {
|
tileDiv.className = 'tile-item';
|
||||||
const tileDiv = document.createElement('div');
|
tileDiv.innerHTML = allTiles[i].getSVG();
|
||||||
tileDiv.className = 'tile-item';
|
souGrid.appendChild(tileDiv);
|
||||||
tileDiv.innerHTML = allTiles[i].svg;
|
}
|
||||||
windGrid.appendChild(tileDiv);
|
tilesDisplay.appendChild(section);
|
||||||
}
|
|
||||||
tilesDisplay.appendChild(section);
|
|
||||||
|
|
||||||
// Ligne des noms de dragons
|
// Ligne des noms de vents
|
||||||
const dragonNamesDiv = document.createElement('div');
|
const windNamesDiv = document.createElement('div');
|
||||||
dragonNamesDiv.className = 'dragon-names';
|
windNamesDiv.className = 'wind-names';
|
||||||
dragonNamesDiv.innerHTML = '<div>Blanc</div><div>Vert</div><div>Rouge</div>';
|
windNamesDiv.innerHTML = '<div>Est</div><div>Sud</div><div>Ouest</div><div>Nord</div>';
|
||||||
tilesDisplay.appendChild(dragonNamesDiv);
|
tilesDisplay.appendChild(windNamesDiv);
|
||||||
|
|
||||||
// Dragons
|
// Vents
|
||||||
section = document.createElement('div');
|
section = document.createElement('div');
|
||||||
section.className = 'tiles-family';
|
section.className = 'tiles-family';
|
||||||
const dragonTitle = document.createElement('h3');
|
const windTitle = document.createElement('h3');
|
||||||
dragonTitle.textContent = 'Dragons';
|
windTitle.textContent = 'Vents';
|
||||||
const dragonGrid = document.createElement('div');
|
const windGrid = document.createElement('div');
|
||||||
dragonGrid.className = 'tiles-grid';
|
windGrid.className = 'tiles-grid';
|
||||||
dragonGrid.style.gridTemplateColumns = 'repeat(3, minmax(0, 1fr))';
|
windGrid.style.gridTemplateColumns = 'repeat(4, minmax(0, 1fr))';
|
||||||
section.appendChild(dragonTitle);
|
section.appendChild(windTitle);
|
||||||
section.appendChild(dragonGrid);
|
section.appendChild(windGrid);
|
||||||
for (let i = 31; i < 34; i++) {
|
for (let i = 27; i < 31; i++) {
|
||||||
const tileDiv = document.createElement('div');
|
const tileDiv = document.createElement('div');
|
||||||
tileDiv.className = 'tile-item';
|
tileDiv.className = 'tile-item';
|
||||||
tileDiv.innerHTML = allTiles[i].svg;
|
tileDiv.innerHTML = allTiles[i].getSVG();
|
||||||
dragonGrid.appendChild(tileDiv);
|
windGrid.appendChild(tileDiv);
|
||||||
}
|
}
|
||||||
tilesDisplay.appendChild(section);
|
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>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue