175 lines
5.4 KiB
HTML
175 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Mahjong</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #007730;
|
|
}
|
|
.menu {
|
|
display: flex;
|
|
justify-content: center;
|
|
background-color: #4CAF50;
|
|
padding: 0px 0;
|
|
font-size: 26px;
|
|
}
|
|
.menu-item {
|
|
position: relative;
|
|
list-style: none;
|
|
}
|
|
.menu-item > a {
|
|
color: white;
|
|
text-decoration: none;
|
|
padding: 10px 20px;
|
|
display: block;
|
|
}
|
|
.menu-item > a:hover {
|
|
background-color: #45a049;
|
|
}
|
|
.dropdown {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translateX(-40%);
|
|
background-color: white;
|
|
box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1);
|
|
min-width: 200px;
|
|
white-space: nowrap;
|
|
font-size: 20px;
|
|
}
|
|
.dropdown a {
|
|
color: black;
|
|
text-decoration: none;
|
|
padding: 10px 10px;
|
|
display: block;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
.dropdown a:hover {
|
|
background-color: #ddd;
|
|
}
|
|
.menu-item:hover .dropdown {
|
|
display: block;
|
|
}
|
|
.container {
|
|
display: flex;
|
|
justify-content: space-betwenne;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="menu">
|
|
<ul class="menu-item">
|
|
<a href="https://github.com/Didictateur/Riichi">Github</a>
|
|
</ul>
|
|
<ul class="menu-item">
|
|
<a href="#" onclick="loadScript('dp0.js')">Introduction</a>
|
|
</ul>
|
|
<ul class="menu-item">
|
|
<a href="#">Riichi Mahjong</a>
|
|
<div class="dropdown">
|
|
<a href="#" onclick="loadScript('dp1.js')">Chap 1: Présentation des tuiles</a>
|
|
<a href="#" onclick="loadScript('dp2.js')">Chap 2: La main</a>
|
|
<a href="#" onclick="loadScript('dp3.js')">Chap 3: Les groupes</a>
|
|
<a href="#" onclick="loadScript('dp4.js')">Chap 4: Avoir une main valide en jeu</a>
|
|
<a href="#" onclick="loadScript('dp5.js')">Chap 5: Annoncer la victoire</a>
|
|
<a href="#" onclick="loadScript('dp6.js')">Chap 6: Le vent du joueur</a>
|
|
<a href="#" onclick="loadScript('dp7.js')">Chap 7: Les yakus</a>
|
|
<a href="#" onclick="loadScript('dp8.js')">Chap 8: Le riichi</a>
|
|
<a href="#" onclick="loadScript('dp9.js')">Chap 9: Le furiten</a>
|
|
<a href="#" onclick="loadScript('dp10.js')">Chap 10: Première partie complète</a>
|
|
<a href="#" onclick="loadScript('dp11.js')">Chap 11: Score: les Hans</a>
|
|
<a href="#" onclick="loadScript('dp12.js')">Chap 12: Score: les doras</a>
|
|
<a href="#" onclick="loadScript('dp13.js')">Chap 13: Score: les Fus</a>
|
|
<a href="#" onclick="loadScript('dp14.js')">Chap 14: Score: le calcul des points</a>
|
|
<a href="#" onclick="loadScript('dp15.js')">Chap 15: Partie avec les scores</a>
|
|
</div>
|
|
</ul>
|
|
<ul class="menu-item">
|
|
<a href="#">Partie réelle</a>
|
|
<div class="dropdown">
|
|
<a href="#" onclick="loadScript('')">Chap 1: Placement des joueurs</a>
|
|
<a href="#" onclick="loadScript('')">Chap 2: Construction des murs</a>
|
|
<a href="#" onclick="loadScript('')">Chap 3: Désigner la pioche</a>
|
|
<a href="#" onclick="loadScript('')">Chap 4: Le mur mort</a>
|
|
</ul>
|
|
<ul class="menu-item">
|
|
<a href="#" onclick="loadScript('')">Riichi à trois</a>
|
|
</ul>
|
|
<ul class="menu-item">
|
|
<a href="#">Yaku trainer</a>
|
|
<div class="dropdown">
|
|
<a href="#" onclick="loadScript('')">Yaku 1</a>
|
|
</div>
|
|
</ul>
|
|
<ul class="menu-item">
|
|
<a href="#">MCR</a>
|
|
<div class="dropdown">
|
|
<a href="#" onclick="loadScript('')">Chap 1:</a>
|
|
<a href="#" onclick="loadScript('')">Chap 2:</a>
|
|
</div>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
<div id="canvasContainer"></div>
|
|
<div id="anotherCanvasContainer"></div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentScript = null;
|
|
|
|
function loadText(scriptName) {
|
|
if (window.cleanup) {
|
|
window.cleanup();
|
|
}
|
|
|
|
const container = document.getElementById("anotherCanvasContainer");
|
|
container.innerHTML = `<canvas id="myTextCanvas" width="1000" height="1000"></canvas>`;
|
|
|
|
const timestamp = new Date().getTime();
|
|
|
|
currentScript = document.createElement("script");
|
|
currentScript.type = "module";
|
|
currentScript.src = `build/${scriptName}?t=${timestamp}`;
|
|
|
|
document.body.appendChild(currentScript);
|
|
}
|
|
|
|
function loadScript(scriptName, txt = true) {
|
|
if (window.cleanup) {
|
|
window.cleanup();
|
|
}
|
|
|
|
const container = document.getElementById("canvasContainer");
|
|
container.innerHTML = `<canvas id="myCanvas" width="1000" height="1000"></canvas>`;
|
|
|
|
const timestamp = new Date().getTime();
|
|
|
|
currentScript = document.createElement("script");
|
|
currentScript.type = "module";
|
|
currentScript.src = `build/${scriptName}?t=${timestamp}`;
|
|
|
|
document.body.appendChild(currentScript);
|
|
|
|
if (txt) {
|
|
const number = scriptName.substring(2, scriptName.length - 3);
|
|
loadText("txt" + number + ".js");
|
|
}
|
|
}
|
|
|
|
//tests
|
|
loadScript('test.js', false);
|
|
|
|
//script initial
|
|
loadScript('dp0.js');
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|