turns-00057.parquet:36567
216dd5ed92ae1da89f869d2fdegenerate_repetitionAbsentFinal dense release
USER
Je voudrais adapter un jeu de cartes de deckbuilding en html/css/javascript. C'est un jeu solo. Le thème est "les doutes travaux d'Hercules". Au début d'une manche, un travail est choisi au hasard. La carte est affichée en haut à gauche de l'écran avec les informations suivantes : - valeur d'attaque dans un disque rouge - valeur de défense dans un disque bleu - nombre de points de vie dans un un disque vert. Les images sont dans un dossier ./images/travaux/ il faudrait une liste des douze travaux avec pour chacun : le nom, l'attaque, La Défense, le nombre de points de vie, un bonus normal (face A), un bonus amélioré (face B).
ASSISTANT
Bien sûr ! Je vais vous donner un exemple de structure de données pour les travaux d'Hercules, ainsi qu'un code HTML, CSS et JavaScript de base qui affichera un des travaux au hasard au début de chaque manche.
### 1. Structure de Données
D'abord, créons un tableau en JavaScript avec les informations nécessaires pour chaque tâche :
```javascript
const travaux = [
{
nom: "Némée",
attaque: 5,
defense: 3,
pointsDeVie: 10,
bonusNormal: "Force accrue",
bonusAmeliore: "Force surhumaine",
image: "./images/travaux/nemee.png"
},
{
nom: "Lhydre de Lerne",
attaque: 4,
defense: 5,
pointsDeVie: 15,
bonusNormal: "Régénération",
bonusAmeliore: "Régénération rapide",
image: "./images/travaux/lhydre.png"
},
{
nom: "Le Sanglier d'Érymanthe",
attaque: 3,
defense: 4,
pointsDeVie: 12,
bonusNormal: "Énergie",
bonusAmeliore: "Énergie explosive",
image: "./images/travaux/sanglier.png"
},
{
nom: "La Biche de Cérynie",
attaque: 2,
defense: 2,
pointsDeVie: 8,
bonusNormal: "Vitesse",
bonusAmeliore: "Vitesse aiguisée",
image: "./images/travaux/biche.png"
},
{
nom: "Les Oiseaux du lac Stymphale",
attaque: 6,
defense: 2,
pointsDeVie: 9,
bonusNormal: "Précision",
bonusAmeliore: "Précision mortelle",
image: "./images/travaux/oiseaux.png"
},
{
nom: "Le Taureau de Crète",
attaque: 7,
defense: 6,
pointsDeVie: 20,
bonusNormal: "Force",
bonusAmeliore: "Force écrasante",
image: "./images/travaux/taureau.png"
},
{
nom: "Les Chevaux de Diomède",
attaque: 5,
defense: 5,
pointsDeVie: 14,
bonusNormal: "Endurance",
bonusAmeliore: "Endurance durable",
image: "./images/travaux/chevaux.png"
},
{
nom: "La Ceinture de Hypsipyle",
attaque: 4,
defense: 3,
pointsDeVie: 11,
bonusNormal: "Charme",
bonusAmeliore: "Charme irrésistible",
image: "./images/travaux/ceinture.png"
},
{
nom: "Les Geryon",
attaque: 8,
defense: 7,
pointsDeVie: 25,
bonusNormal: "Puissance",
bonusAmeliore: "Puissance céleste",
image: "./images/travaux/geryon.png"
},
{
nom: "Les Pommes d'Or des Hespérides",
attaque: 3,
defense: 4,
pointsDeVie: 10,
bonusNormal: "Élément de surprise",
bonusAmeliore: "Élément de surprise ultime",
image: "./images/travaux/pommes.png"
},
{
nom: "Cerbère",
attaque: 9,
defense: 8,
pointsDeVie: 30,
bonusNormal: "Cri terrifiant",
bonusAmeliore: "Cri dévastateur",
image: "./images/travaux/cerbere.png"
},
{
nom: "Le Lion de Némée",
attaque: 6,
defense: 5,
pointsDeVie: 18,
bonusNormal: "Fureur",
bonusAmeliore: "Fureur amplifiée",
image: "./images/travaux/lion.png"
},
];
```
### 2. HTML de base
Voici un code HTML simple pour afficher les informations :
```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Les Doutes Travaux d'Hercules</title>
</head>
<body>
<div class="container">
<div id="travail" class="travail">
<img id="travail-image" src="" alt="" />
<h2 id="travail-nom"></h2>
<div class="stats">
<div class="stat disque rouge" id="travail-attaque"></div>
<div class="stat disque bleu" id="travail-defense"></div>
<div class="stat disque vert" id="travail-pv"></div>
</div>
<p id="travail-bonus-normal"></p>
<p id="travail-bonus-ameliore"></p>
</div>
<button onclick="choisirTravail()">Choisir un travail</button>
</div>
<script src="script.js"></script>
</body>
</html>
```
### 3. CSS
Voici quelques styles de base pour rendre l'affichage plus attrayant :
```css
body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
}
.travail {
border: 1px solid #ccc;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.stats {
display: flex;
justify-content: space-around;
margin: 20px 0;
}
.stat {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
color: white;
font-weight: bold;
}
.roge {
background-color: red;
}
.bleu {
background-color: blue;
}
.vert {
background-color: green;
}
```
### 4. JavaScript
Voici le code JavaScript pour choisir un travail aléatoire :
```javascript
function choisirTravail() {
const index = Math.floor(Math.random() * travaux.length);
const travail = travaux[index];
document.getElementById('travail-image').src = travail.image;
document.getElementById('travail-nom').textContent = travail.nom;
document.getElementById('travail-attaque').textContent = travail.attaque;
document.getElementById('travail-defense').textContent = travail.defense;
document.getElementById('travail-pv').textContent = travail.pointsDeVie;
document.getElementById('travail-bonus-normal').textContent = "Bonus Normal: " + travail.bonusNormal;
document.getElementById('travail-bonus-ameliore').textContent = "Bonus Amélioré: " + travail.bonusAmeliore;
}
```
### Utilisation
1. Créez les dossiers appropriés (par exemple, `./images/travaux/`) et ajoutez les images des travaux d'Hercules avec les noms correspondants.
2. Créez trois fichiers : `index.html`, `styles.css`, et `script.js`, et collez-y le code fourni.
3. Ouvrez `index.html` dans votre navigateur pour être en mesure de jouer au jeu.
Cela vous donnera une base solide pour développer votre jeu de deckbuilding en HTML/CSS/JavaScript. Vous pouvez bien sûr l'améliorer en ajoutant des fonctionnalités comme un suivi des tours, un système de score ou plus d’interactions.