chap 3
This commit is contained in:
Didictateur
parent
75d7ec5d31
commit
b12734adf6
3 changed files with 231 additions and 4 deletions
|
|
@ -33,6 +33,7 @@ const texts = {
|
|||
Les vents et dragons quant à eux n'ont pas de numéro. On les appelle<br>
|
||||
les honneurs, et ne sont caractérisés que par leur nom.
|
||||
`,
|
||||
|
||||
chap2:`
|
||||
Les joueurs ne se contentent pas de regarder les tuiles. Ils<br>
|
||||
constituent une main composée de 13 tuiles.<br>
|
||||
|
|
@ -45,6 +46,25 @@ const texts = {
|
|||
d'une tuile de sa main, pour revenir à 13 tuiles. C'est à ce<br>
|
||||
moment que les autres joueurs peuvent réagir à la tuile<br>
|
||||
défaussée, en la récupérant pour compléter leur propre main.
|
||||
`
|
||||
`,
|
||||
|
||||
chap3: `
|
||||
Avec ces tuiles, les joueurs peuvent s'amuser à former des<br>
|
||||
combinaisons.<br>
|
||||
<br>
|
||||
En soit, c'en est même la mécanique principale. On en distingue<br>
|
||||
deux types:<br>
|
||||
- Les brelans : 3 tuiles identiques<br>
|
||||
- Les suites : 3 tuiles consécutives de la même famille<br>
|
||||
<br>
|
||||
Attention, on ne peux pas non plus faire n'importe quoi avec !<br>
|
||||
- Ces combinaisons nécessitent toujours 3 tuiles de la même famille<br>
|
||||
- Les vents et les dragons ne peuvent pas former de suite,<br>
|
||||
seulement des brelans<br>
|
||||
<br>
|
||||
Point vocabulaire ! Au riichi, nous utilisons les termes:<br>
|
||||
- Chii pour une suite<br>
|
||||
- Pon pour un brelan<br>
|
||||
`,
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@
|
|||
mascolteEl.addEventListener('click', () => {
|
||||
speechBubble.classList.toggle('visible');
|
||||
if (speechBubble.classList.contains('visible')) {
|
||||
mascolteEl.innerHTML = '<img class="explaining" src="../../img/tilineau/explaining.png" alt="Tilineau">';
|
||||
mascolteEl.innerHTML = '<img class="explaining" src="../../img/tilineau/speaking.png" alt="Tilineau">';
|
||||
} else {
|
||||
mascolteEl.innerHTML = '<img src="../../img/tilineau/speaking.png" alt="Tilineau">';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,11 +38,52 @@
|
|||
.speech-bubble.visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[id^="tiles-display"] {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#tiles-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: 60px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 20px;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="menu"></div>
|
||||
<h2>Combinaisons valides</h2>
|
||||
<div id="tiles-container">
|
||||
<div id="tiles-display"></div>
|
||||
<div id="tiles-display-2"></div>
|
||||
</div>
|
||||
<div id="tiles-container">
|
||||
<div id="tiles-display-3"></div>
|
||||
<div id="tiles-display-4"></div>
|
||||
</div>
|
||||
<h2>Combinaisons invalides</h2>
|
||||
<div id="tiles-container">
|
||||
<div id="tiles-display-5"></div>
|
||||
<div id="tiles-display-6"></div>
|
||||
</div>
|
||||
<div id="tiles-container">
|
||||
<div id="tiles-display-7"></div>
|
||||
<div id="tiles-display-8"></div>
|
||||
</div>
|
||||
<div id="tiles-display-9"></div>
|
||||
<div class="speech-bubble">
|
||||
<div class="speech-text" id="speech-text"></div>
|
||||
</div>
|
||||
|
|
@ -66,9 +107,175 @@
|
|||
mascolteEl.addEventListener('click', () => {
|
||||
speechBubble.classList.toggle('visible');
|
||||
mascolteEl.innerHTML = speechBubble.classList.contains('visible')
|
||||
? '<img class="explaining" src="../../img/tilineau/speaking.png" alt="Tilineau">'
|
||||
? '<img class="explaining" src="../../img/tilineau/explaining.png" alt="Tilineau">'
|
||||
: '<img src="../../img/tilineau/speaking.png" alt="Tilineau">';
|
||||
});
|
||||
|
||||
// Afficher les pons et les chiis
|
||||
fetch('http://localhost:5000/api/tiles')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
const tilesDisplay = document.getElementById('tiles-display');
|
||||
const tile = data.tiles[10];
|
||||
|
||||
if (tile) {
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.innerHTML = tile.svg;
|
||||
tilesDisplay.appendChild(tileDiv);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('Erreur:', error));
|
||||
|
||||
fetch('http://localhost:5000/api/tiles')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
const tilesDisplay2 = document.getElementById('tiles-display-2');
|
||||
const tile1 = data.tiles[11];
|
||||
const tile2 = data.tiles[12];
|
||||
const tile3 = data.tiles[13];
|
||||
|
||||
if (tile1 && tile2 && tile3) {
|
||||
const tiles = [tile1, tile2, tile3];
|
||||
tiles.forEach(tile => {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.innerHTML = tile.svg;
|
||||
tilesDisplay2.appendChild(tileDiv);
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('Erreur:', error));
|
||||
|
||||
fetch('http://localhost:5000/api/tiles')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
const tilesDisplay = document.getElementById('tiles-display-3');
|
||||
const tile = data.tiles[30];
|
||||
|
||||
if (tile) {
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.innerHTML = tile.svg;
|
||||
tilesDisplay.appendChild(tileDiv);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('Erreur:', error));
|
||||
|
||||
fetch('http://localhost:5000/api/tiles')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
const tilesDisplay = document.getElementById('tiles-display-4');
|
||||
const tile = data.tiles[32];
|
||||
|
||||
if (tile) {
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.innerHTML = tile.svg;
|
||||
tilesDisplay.appendChild(tileDiv);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('Erreur:', error));
|
||||
|
||||
fetch('http://localhost:5000/api/tiles')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
const tilesDisplay2 = document.getElementById('tiles-display-5');
|
||||
const tile1 = data.tiles[21];
|
||||
const tile2 = data.tiles[22];
|
||||
|
||||
if (tile1 && tile2) {
|
||||
const tiles = [tile1, tile2];
|
||||
tiles.forEach(tile => {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.innerHTML = tile.svg;
|
||||
tilesDisplay2.appendChild(tileDiv);
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('Erreur:', error));
|
||||
|
||||
fetch('http://localhost:5000/api/tiles')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
const tilesDisplay2 = document.getElementById('tiles-display-6');
|
||||
const tile1 = data.tiles[11];
|
||||
const tile2 = data.tiles[12];
|
||||
const tile3 = data.tiles[13];
|
||||
const tile4 = data.tiles[14];
|
||||
|
||||
if (tile1 && tile2) {
|
||||
const tiles = [tile1, tile2, tile3, tile4];
|
||||
tiles.forEach(tile => {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.innerHTML = tile.svg;
|
||||
tilesDisplay2.appendChild(tileDiv);
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('Erreur:', error));
|
||||
|
||||
fetch('http://localhost:5000/api/tiles')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
const tilesDisplay2 = document.getElementById('tiles-display-7');
|
||||
const tile1 = data.tiles[27];
|
||||
const tile2 = data.tiles[28];
|
||||
const tile3 = data.tiles[29];
|
||||
|
||||
if (tile1 && tile2 && tile3) {
|
||||
const tiles = [tile1, tile2, tile3];
|
||||
tiles.forEach(tile => {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.innerHTML = tile.svg;
|
||||
tilesDisplay2.appendChild(tileDiv);
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('Erreur:', error));
|
||||
|
||||
fetch('http://localhost:5000/api/tiles')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
const tilesDisplay2 = document.getElementById('tiles-display-8');
|
||||
const tile1 = data.tiles[31];
|
||||
const tile2 = data.tiles[32];
|
||||
const tile3 = data.tiles[33];
|
||||
|
||||
if (tile1 && tile2 && tile3) {
|
||||
const tiles = [tile1, tile2, tile3];
|
||||
tiles.forEach(tile => {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.innerHTML = tile.svg;
|
||||
tilesDisplay2.appendChild(tileDiv);
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('Erreur:', error));
|
||||
|
||||
fetch('http://localhost:5000/api/tiles')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
const tilesDisplay2 = document.getElementById('tiles-display-9');
|
||||
const tile1 = data.tiles[3];
|
||||
const tile2 = data.tiles[13];
|
||||
const tile3 = data.tiles[23];
|
||||
const tile4 = data.tiles[6];
|
||||
const tile5 = data.tiles[16];
|
||||
const tile6 = data.tiles[26];
|
||||
|
||||
if (tile1 && tile2 && tile3 && tile4 && tile5 && tile6) {
|
||||
const tiles = [tile1, tile2, tile3, tile4, tile5, tile6];
|
||||
tiles.forEach(tile => {
|
||||
const tileDiv = document.createElement('div');
|
||||
tileDiv.innerHTML = tile.svg;
|
||||
tilesDisplay2.appendChild(tileDiv);
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('Erreur:', error));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue