281 lines
No EOL
8.4 KiB
HTML
281 lines
No EOL
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Tuto Riichi</title>
|
|
<link rel="stylesheet" href="../../frontend/css/style.css">
|
|
<link rel="stylesheet" href="../../frontend/css/speech-bubble.css">
|
|
<link rel="stylesheet" href="../../frontend/css/hand.css">
|
|
<style>
|
|
#menu {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
#mascotte {
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 160px;
|
|
z-index: 999;
|
|
transform: scaleX(-1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
#mascotte img {
|
|
width: 250px;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.speech-bubble {
|
|
position: fixed;
|
|
bottom: 320px;
|
|
right: 170px;
|
|
z-index: 998;
|
|
display: none;
|
|
}
|
|
|
|
.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>
|
|
<div id="mascotte"></div>
|
|
|
|
<script src="../../frontend/js/fr/texts.js"></script>
|
|
<script src="../../frontend/js/hand.js"></script>
|
|
<script>
|
|
// Charger le menu
|
|
fetch('../../components/menu.html')
|
|
.then(r => r.text())
|
|
.then(html => document.getElementById('menu').innerHTML = html);
|
|
|
|
// Afficher la mascotte et le texte
|
|
const mascolteEl = document.getElementById('mascotte');
|
|
mascolteEl.innerHTML = '<img src="../../img/tilineau/speaking.png" alt="Tilineau">';
|
|
document.getElementById('speech-text').innerHTML = texts.riichi.chap3;
|
|
|
|
// Toggle bulle de dialogue au clic sur la mascotte
|
|
const speechBubble = document.querySelector('.speech-bubble');
|
|
mascolteEl.addEventListener('click', () => {
|
|
speechBubble.classList.toggle('visible');
|
|
mascolteEl.innerHTML = speechBubble.classList.contains('visible')
|
|
? '<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> |