LLM Duel V1

Un jeu 1v1 où deux LLM s'affrontent en tour par tour sur une carte stratégique.

python3 -m http.server 0

📌 Table des Matières

Description
Fonctionnalités
Installation
Utilisation
Configuration
Architecture
Contribuer
Licence

📖 Description

LLM Duel est un jeu stratégique en tour par tour où deux intelligences artificielles (LLM) s'affrontent sur une carte 20x15. Chaque joueur connecte son propre modèle (Ollama local ou API externe) et contrôle des unités (ouvriers, guerriers) pour récolter des ressources, construire une armée et détruire la base ennemie.

Inspirations

WorldBox : Style visuel de gestion de carte
Starcraft : Stratégie en temps réel et gestion d'unités
Pokémon : Affrontement de "créatures" avec des règles claires

✨ Fonctionnalités (V1)

🗺️ Carte

Grille 20x15 avec différents types de tuiles (herbe, eau, montagne, sable)
Génération aléatoire de ressources (🌳 arbres, 💰 or, ⛏️ pierre)
Bases des joueurs positionnées aux coins opposés

🎮 Unités

Unité	Coût (⚡)	PV	Dégâts	Portée	Action Spéciale
Ouvrier	10	20	0	1	Récolte 1 énergie/tour
Guerrier	20	40	10	1	Attaque les unités adjacentes

🔄 Système de Tour par Tour

Chaque joueur reçoit l'état du jeu au début de son tour
Les ouvriers récoltent automatiquement les ressources
Chaque joueur peut effectuer une action par unité (déplacer, attaquer, ou créer)
Alternance automatique entre les joueurs

💬 Communication des IA

Messages internes (vert) : Stratégie expliquée au joueur propriétaire
Messages externes (rouge) : Communication avec l'adversaire
Messages système (gris) : Notifications du jeu
Limite de 50 tokens par message

🔌 Connexion des LLM

Ollama (recommandé) : Modèles locaux (llama3, mistral, etc.)
OpenAI API : GPT-3.5, GPT-4 (nécessite une clé API)
Validation stricte des réponses JSON
Fallback automatique en cas d'erreur

🚀 Installation

Prérequis

Frontend

Aucun! Fonctionne directement dans un navigateur moderne (Chrome, Firefox, Edge, Safari)

LLM Local (Ollama)

Installer Ollama sur votre machine

Télécharger un modèle :

ollama pull llama3
# ou
ollama pull mistral

LLM API (OpenAI)

Créer un compte sur OpenAI
Obtenir une clé API dans votre tableau de bord

Lancer le jeu

Méthode 1 : Ouvrir directement le fichier HTML

# Naviguer dans le dossier du projet
cd llm-duel

# Ouvrir index.html dans votre navigateur
# Sur Mac:
open index.html

# Sur Linux:
xdg-open index.html

# Sur Windows:
start index.html

Méthode 2 : Lancer un serveur local (recommandé pour le développement)

# Avec Python 3
python -m http.server 8000

# Avec Node.js (si installé)
npx serve

# Avec PHP
php -S localhost:8000

# Puis ouvrir http://localhost:8000 dans votre navigateur

🎮 Utilisation

Étapes pour jouer

Démarrer le jeu
- Cliquez sur le bouton "🎮 Démarrer Partie"
- La carte est générée avec les bases et ressources
Configurer les LLM
- Pour chaque joueur, sélectionnez le type de modèle :
  - Ollama (local) : Le jeu se connectera à votre instance Ollama locale
  - OpenAI API : Entrez votre clé API OpenAI
- Par défaut, le jeu utilise Ollama avec le modèle llama3
Jouer en mode simulation (sans LLM)
- Si aucun LLM n'est connecté, le jeu utilisera une IA simple de simulation
- Cliquez sur "➡️ Tour Suivant" pour avancer
- Les joueurs alternent automatiquement
Actions manuelles (pour test)
- Créer une unité : Utilisez les boutons "Créer Ouvrier" ou "Créer Guerrier"
- Déplacer une unité : Cliquez sur une unité, puis cliquez sur la case cible
- Passer son tour : Cliquez sur "➡️ Tour Suivant"

Commandes LLM

Les LLM doivent retourner un JSON valide avec la structure suivante :

{
  "action": {
    "type": "create|move|attack|pass",
    "unit": "worker|warrior",
    "unitId": "unit_1_1",
    "target": [x, y]
  },
  "message_interne": "Stratégie en anglais (max 50 tokens)",
  "message_externe": "Message pour l'adversaire (max 50 tokens)"
}

Exemple de partie

Tour 1 - Joueur 1:
- Action: Créer un ouvrier (10⚡)
- Message interne: "I need more energy to build warriors."
- Message externe: "You will regret underestimating me!"

Tour 1 - Joueur 2:
- Action: Créer un ouvrier (10⚡)
- Message interne: "Starting with resource gathering."
- Message externe: "We'll see about that!"

Tour 2 - Joueur 1:
- Récolte: Ouvrier sur 🌳 → +1⚡
- Action: Créer un guerrier (20⚡)
- Message interne: "Building military force."

... et ainsi de suite jusqu'à ce qu'une base soit détruite!

⚙️ Configuration

Fichiers de configuration

Fichier	Description
`config.js`	Constantes du jeu (taille carte, coûts, couleurs, etc.)
`prompts/system_prompt.txt`	Template de prompt envoyé aux LLM

Modifier les paramètres

Éditez config.js pour modifier :

const CONFIG = {
  MAP: {
    WIDTH: 20,
    HEIGHT: 15,
    // ...
  },
  PLAYERS: [
    { id: 1, color: '#FF5733', basePos: [2, 2], energy: 50, baseHP: 100 },
    { id: 2, color: '#3357FF', basePos: [17, 12], energy: 50, baseHP: 100 }
  ],
  UNITS: {
    worker: { cost: 10, hp: 20, damage: 0, move: 1, harvest: 1 },
    warrior: { cost: 20, hp: 40, damage: 10, move: 1, harvest: 0 }
  },
  // ...
};

Personnaliser le prompt LLM

Éditez prompts/system_prompt.txt pour adapter le comportement des LLM. Le prompt doit contenir les placeholders suivants :

{playerId} : ID du joueur (1 ou 2)
{baseX} et {baseY} : Position de la base
{gameState} : État actuel du jeu en JSON

🏗️ Architecture

llm-duel/
├── index.html              # Page principale (UI)
├── style.css               # Styles CSS
├── script.js               # Logique du jeu (frontend)
├── config.js               # Configuration
├── prompts/
│   └── system_prompt.txt   # Template de prompt pour les LLM
├── docs/
│   └── CREATE-REAL.md      # Documentation technique complète
├── PLAN.md                 # Plan de développement
└── README.md               # Ce fichier

Frontend (Vanilla JS)

Aucune dépendance : Fonctionne avec du HTML/CSS/JS pur
Compatibilité : Tous les navigateurs modernes
Responsive : Adapté aux écrans mobile et desktop

Backend (Optionnel)

Pour la V1, le backend n'est pas nécessaire. Les appels LLM sont faits directement depuis le frontend via fetch.

Pour une version plus sécurisée (V2+), un backend FastAPI peut être ajouté dans le dossier backend/.

📊 Règles du Jeu

Objectif

Détruire la base adverse (100 PV) en utilisant vos unités.

Déroulement d'un tour

Début du tour
- Récolte automatique : +1⚡ pour chaque ouvrier sur une ressource
- Génération d'énergie : +1⚡ par joueur par tour
- Le LLM reçoit l'état du jeu
Action du LLM
- Le LLM choisit une action (créer, déplacer, attaquer, passer)
- Le LLM génère un message interne (stratégie)
- Le LLM génère un message externe (communication)
Validation
- Le jeu vérifie que l'action est valide (ressources, position, etc.)
- Si invalide → action "pass" par défaut
Fin du tour
- Les PV sont mis à jour
- On passe au joueur suivant

Règles spécifiques

Énergie : Utilisée pour créer des unités
Déplacement : 1 case par tour (horizontal/vertical uniquement)
Attaque : Les guerriers infligent 10 dégâts aux unités adjacentes
Récolte : Les ouvriers récoltent 1⚡/tour sur une ressource
Victoire : La partie se termine quand une base atteint 0 PV
Limite : Maximum 200 tours (match nul)

Types de tuiles

Type	Symbole	Effet
Herbe	🟢	Normale
Eau	🔵	Bloque le passage
Montagne	⛰️	Bloque le passage
Sable	🟡	Normale

Ressources

Type	Symbole	Valeur
Arbre	🌳	1⚡/tour
Or	💰	1⚡/tour
Pierre	⛏️	Réservée V2

🔧 Dépannage

Ollama non détecté

Vérifiez qu'Ollama est installé et lancé :
```
ollama serve
```
Vérifiez que le serveur Ollama répond :
```
curl http://localhost:11434/api/tags
```
Assurez-vous que le modèle est téléchargé :
```
ollama pull llama3
```

Erreurs CORS

Si vous utilisez un serveur local et rencontrez des erreurs CORS avec Ollama :

Utilisez le protocole http:// au lieu de https://
Lancez Chrome avec les CORS désactivés (pour développement uniquement) :
```
google-chrome --disable-web-security --user-data-dir=/tmp/chrome-test
```

Réponses LLM invalides

Vérifiez que le prompt système est correctement chargé
Vérifiez que le LLM retourne bien un JSON valide
Activez la console du navigateur (F12) pour voir les erreurs

Jeu figé

Cliquez sur "🔄 Réinitialiser" pour recommencer
Actualisez la page

🛠️ Développement

Structure du code

index.html : Structure de la page
style.css : Styles et mise en page
script.js : Logique du jeu
config.js : Constantes et configuration

Fonctions principales (script.js)

Fonction	Description
`initGame()`	Initialise le jeu
`startGame()`	Démarre une nouvelle partie
`nextTurn()`	Passe au tour suivant
`createUnit(playerId, type)`	Crée une unité
`moveUnit(unitId, [x, y])`	Déplace une unité
`attackUnit(attackerId, targetId)`	Attaque une unité
`callPlayerLLM(playerId)`	Appelle le LLM du joueur
`applyLLMAction(playerId, action)`	Applique une action LLM

Ajouter une nouvelle unité

Ajoutez la configuration dans config.js
Ajoutez la logique dans script.js (création, déplacement, attaque)
Mettez à jour le prompt système

Tester avec différents LLM

Modifiez le config.js pour changer les modèles par défaut
Utilisez différents modèles Ollama : llama3, mistral, phi3
Comparez les performances!

🤝 Contribuer

Les contributions sont les bienvenues! Voici comment contribuer :

Fork le dépôt
Créez une branche (git checkout -b feature/ma-fonctionnalité)
Commit vos changements (git commit -m 'Ajout de X')
Push (git push origin feature/ma-fonctionnalité)
Ouvrez une Pull Request

Règles de contribution

Respectez les conventions de code existantes
Ajoutez des commentaires pour le code complexe
Testez vos modifications avant de committer
Mettez à jour la documentation si nécessaire

📜 Licence

Ce projet est sous licence MIT - libre d'utiliser, modifier et distribuer.

MIT License

Copyright (c) 2024 LLM Duel

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

📞 Contact

Pour toute question ou suggestion, veuillez créer une Issue sur le dépôt GitHub ou consulter la documentation dans docs/CREATE-REAL.md.

Amusez-vous bien avec LLM Duel! 🎮🤖

Name		Name	Last commit message	Last commit date
backend		backend
docs		docs
prompts		prompts
.gitignore		.gitignore
CREATE-REAL.md		CREATE-REAL.md
PLAN.md		PLAN.md
README.md		README.md
config.js		config.js
index.html		index.html
script.js		script.js
style.css		style.css

Latest commit

History

Folders and files

Repository files navigation