254 lines
9.0 KiB
HTML
254 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Jeu Pokémon</title>
|
|
<link rel="stylesheet" href="../static/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<img src="../pinguin.gif" alt="Mascotte animée" class="header-gif" />
|
|
<h1>Jeu Pokémon</h1>
|
|
<nav>
|
|
<ul class="menu">
|
|
<li><a href="./index.html">Accueil </a></li>
|
|
<li><a href="./pokemon.html">Jeu Pokémon</a></li>
|
|
<li><a href="./partenaires.html">Partenaires</a></li>
|
|
<li><a href="./qcm.html">QCM</a></li>
|
|
<li><a href="./outils.html">Outils et OS</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<div class="leaderboard">
|
|
<h2>Classement des joueurs</h2>
|
|
<div id="leaderboardDiv">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="battle">
|
|
<h2>Combat Pokémon-like (simple)</h2>
|
|
|
|
<div class="row">
|
|
<div id = "scoreDiv">Score: 0</div>
|
|
|
|
<div class="monster" id="enemy">
|
|
<div class="enemy-img-container">
|
|
<img id="enemyImg" src="ennemi.png" alt="Ennemi">
|
|
</div>
|
|
<span id="ennemyName">Ennemi</span><br>
|
|
<span id="enemyHp">HP: 30</span>
|
|
<span id="enemyInfo" class="tooltip" data-tooltip="">?</span>
|
|
</div>
|
|
|
|
<div class="monster" id="player">Joueur<br><span id="playerHp">HP: 30</span></div>
|
|
</div>
|
|
|
|
<div id="attacksDiv"></div>
|
|
<button id="runBtn">Fuir</button>
|
|
|
|
<div id="log">Un ennemi sauvage apparaît !</div>
|
|
</div>
|
|
|
|
<script>
|
|
const outils_list = {{ data|tojson }};
|
|
//récupérer le leaderbord
|
|
let leaderboardDiv = document.getElementById("leaderboardDiv");
|
|
let leaderboardData = [];
|
|
|
|
fetch("/api/leaderboard") // [{name: "Player1", score: 5}, ...]
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
leaderboardData = data["leaderboard"];
|
|
leaderboardData.sort((a, b) => b.score - a.score); // trier par score décroissant
|
|
leaderboardDiv.innerHTML = "";
|
|
leaderboardData.forEach((entry, index) => {
|
|
const entryDiv = document.createElement("div");
|
|
entryDiv.textContent = `${index + 1}. ${entry.name} - ${entry.score} ennemis vaincus`;
|
|
leaderboardDiv.appendChild(entryDiv);
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
function getAgainstNames(itemName) {
|
|
const item = outils_list.find(i => i.open_source_name === itemName);
|
|
return item ? item.against_name : null;
|
|
}
|
|
|
|
let playerHp = 30;
|
|
let enemyHp = 30;
|
|
let score = 0;
|
|
const max = outils_list.length;
|
|
let playerInv = [];
|
|
|
|
const log = document.getElementById("log");
|
|
const ennemyName = document.getElementById("ennemyName");
|
|
const playerHpBox = document.getElementById("playerHp");
|
|
const enemyHpBox = document.getElementById("enemyHp");
|
|
|
|
addRandomItemToInventory();
|
|
addRandomItemToInventory();
|
|
|
|
function addRandomItemToInventory() { // Add a NEW random item to player's inventory.
|
|
let nbItems = playerInv.length;
|
|
if(nbItems < max)
|
|
{
|
|
let newItem;
|
|
let found = false;
|
|
while(!found){
|
|
let randIndex = Math.floor(Math.random()*max);
|
|
newItem = outils_list[randIndex];
|
|
found = true;
|
|
for(let i=0; i<nbItems; i++){
|
|
if(playerInv[i].name == newItem.open_source_name){
|
|
found = false; // already have this item
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
playerInv.push({name: newItem.open_source_name});
|
|
addLog(`Vous avez obtenu un nouvel outil open source : **${newItem.open_source_name}** !`);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function updateUI() {
|
|
playerHpBox.textContent = "HP: " + Math.max(0, playerHp);
|
|
enemyHpBox.textContent = "HP: " + Math.max(0, enemyHp);
|
|
document.getElementById("scoreDiv").textContent = "Score: " + score;
|
|
}
|
|
|
|
function addLog(text) {
|
|
log.textContent = log.textContent + '\n' + text;
|
|
}
|
|
|
|
const attacksDiv = document.getElementById("attacksDiv");
|
|
|
|
function setCombat(){
|
|
enemyHp = 30;
|
|
updateUI();
|
|
ennemyNumber = Math.floor(Math.random()*max);
|
|
//il faut que l'ennemi soit dans le against d'un des items du joueur
|
|
let found = false;
|
|
while(!found){
|
|
ennemyNumber = Math.floor(Math.random()*max);
|
|
for(let i=0; i<playerInv.length; i++){
|
|
if(getAgainstNames(playerInv[i].name) == outils_list[ennemyNumber].against_name){
|
|
found = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
ennemyName.textContent = outils_list[ennemyNumber].against_name;
|
|
document.getElementById("enemyInfo").setAttribute("data-tooltip", outils_list[ennemyNumber].description_against);
|
|
document.getElementById("enemyImg").src = outils_list[ennemyNumber].icon_against_link;
|
|
|
|
createAttackButtons();
|
|
}
|
|
|
|
function playerAttack(index) {
|
|
const atk = playerInv[index];
|
|
|
|
if(getAgainstNames(atk.name) == ennemyName.textContent){
|
|
var dmg = enemyHp; // instant win
|
|
addLog(`Vous utilisez **${atk.name}** et infligez ${dmg} dégâts !\nC'est super efficace !`);
|
|
} else {
|
|
var dmg = Math.floor(Math.random() * 5) + 2; // 2-6
|
|
addLog(`Vous utilisez **${atk.name}** et infligez ${dmg} dégâts !\nMais ce n'est pas très efficace...`);
|
|
playerHp -= 5; // dommage punitif
|
|
addLog(`Le fait d'avoir utilisé ${atk.name} contre ${ennemyName.textContent} vous blesse de 5 dégâts en retour !`);
|
|
}
|
|
|
|
enemyHp -= dmg;
|
|
updateUI();
|
|
|
|
if (enemyHp <= 0) {
|
|
addLog(`${ennemyName.textContent} est vaincu !`);
|
|
addRandomItemToInventory();
|
|
score += 1;
|
|
setCombat();
|
|
addLog("Un nouvel ennemi sauvage apparaît !\n");
|
|
return;
|
|
}
|
|
|
|
// Riposte
|
|
setTimeout(() => {
|
|
const edmg = Math.floor(Math.random() * 6) + 3;
|
|
playerHp -= edmg;
|
|
|
|
addLog(
|
|
`Vous utilisez ${atk.name} et infligez ${dmg} dégâts !\n` +
|
|
`${ennemyName.textContent} riposte et inflige ${edmg} dégâts !`
|
|
);
|
|
|
|
updateUI();
|
|
|
|
if (playerHp <= 0) {
|
|
addLog("Vous êtes K.O.");
|
|
addLog(`Score final : ${score} ennemis vaincus.`);
|
|
attacksDiv.innerHTML = ""; // Remove attack buttons
|
|
fetch("/api/leaderboard", {
|
|
method: "POST",
|
|
headers: {"Content-Type": "application/json"},
|
|
body: JSON.stringify({name: prompt("Entrez votre nom"), score: score})
|
|
});
|
|
}
|
|
}, 500);
|
|
}
|
|
|
|
|
|
function createAttackButtons() {
|
|
attacksDiv.innerHTML = "";
|
|
|
|
playerInv.forEach((atk, index) => {
|
|
const btn = document.createElement("button");
|
|
btn.onclick = () => playerAttack(index);
|
|
|
|
const data = outils_list.find(x => x.open_source_name === atk.name);
|
|
|
|
// Conteneur icône
|
|
const iconContainer = document.createElement("div");
|
|
iconContainer.className = "attack-icon-container";
|
|
|
|
const iconImg = document.createElement("img");
|
|
iconImg.src = data.icon_op_link;
|
|
iconImg.alt = data.open_source_name;
|
|
iconContainer.appendChild(iconImg);
|
|
btn.appendChild(iconContainer); // mettre l'icône avant le texte
|
|
|
|
// Texte du bouton
|
|
const textNode = document.createTextNode(atk.name + " "); // espace avant le "?"
|
|
btn.appendChild(textNode);
|
|
|
|
// Tooltip
|
|
const info = document.createElement("span");
|
|
info.className = "tooltip";
|
|
info.setAttribute("data-tooltip", data ? data.description_op : "Aucune description");
|
|
info.textContent = "?";
|
|
btn.appendChild(info);
|
|
|
|
attacksDiv.appendChild(btn);
|
|
});
|
|
}
|
|
|
|
document.getElementById("runBtn").onclick = () => {
|
|
addLog("Vous avez fui le combat !");
|
|
fetch("/api/leaderboard", {
|
|
method: "POST",
|
|
headers: {"Content-Type": "application/json"},
|
|
body: JSON.stringify({name: prompt("Entrez votre nom"), score: score})
|
|
});
|
|
attacksDiv.innerHTML = ""; // Remove attack buttons
|
|
};
|
|
|
|
setCombat();
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|