diff --git a/frontend/js/tile.js b/frontend/js/tile.js
new file mode 100644
index 0000000..6a4a7b3
--- /dev/null
+++ b/frontend/js/tile.js
@@ -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;
diff --git a/frontend/pages/riichi/chap1.html b/frontend/pages/riichi/chap1.html
index 701cc3a..eb71c2e 100644
--- a/frontend/pages/riichi/chap1.html
+++ b/frontend/pages/riichi/chap1.html
@@ -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>