gen-scenario / index.html
ZoroaStrella's picture
Add 3 files
dd62091 verified
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maître du Jeu - Outil de Scénario</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.scene-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.marker {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
margin-right: 8px;
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<header class="mb-10 text-center">
<h1 class="text-4xl font-bold text-indigo-800 mb-2">
<i class="fas fa-dragon mr-3"></i> Outil de Scénario RPG
</h1>
<p class="text-lg text-gray-600">Affinez votre aventure pour captiver vos joueurs</p>
</header>
<!-- Main Dashboard -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Scenario Editor -->
<div class="lg:col-span-2 bg-white rounded-xl shadow-lg p-6 fade-in">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-semibold text-gray-800">
<i class="fas fa-scroll mr-2 text-amber-600"></i> Éditeur de Scénario
</h2>
<button id="saveBtn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition">
<i class="fas fa-save mr-2"></i> Enregistrer
</button>
</div>
<div class="mb-6">
<label class="block text-gray-700 mb-2 font-medium">Titre du Scénario</label>
<input type="text" id="scenarioTitle" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="L'Énigme du Pharaon Oublié">
</div>
<div class="mb-6">
<label class="block text-gray-700 mb-2 font-medium">Style de Jeu</label>
<div class="grid grid-cols-3 gap-3">
<button class="style-btn px-4 py-2 border rounded-lg hover:bg-gray-50" data-style="action">
<i class="fas fa-fist-raised mr-2 text-red-500"></i> Action
</button>
<button class="style-btn px-4 py-2 border rounded-lg hover:bg-gray-50" data-style="mystere">
<i class="fas fa-search mr-2 text-blue-500"></i> Mystère
</button>
<button class="style-btn px-4 py-2 border rounded-lg hover:bg-gray-50" data-style="drame">
<i class="fas fa-theater-masks mr-2 text-purple-500"></i> Drame
</button>
</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 mb-2 font-medium">Description</label>
<textarea id="scenarioDesc" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Décrivez l'ambiance générale, les enjeux principaux..."></textarea>
</div>
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
<label class="block text-gray-700 font-medium">Scènes</label>
<button id="addSceneBtn" class="text-indigo-600 hover:text-indigo-800">
<i class="fas fa-plus-circle mr-1"></i> Ajouter une scène
</button>
</div>
<div id="scenesContainer" class="space-y-4">
<!-- Scenes will be added here dynamically -->
</div>
</div>
</div>
<!-- Player Preferences & Tools -->
<div class="space-y-6">
<!-- Player Preferences -->
<div class="bg-white rounded-xl shadow-lg p-6 fade-in">
<h2 class="text-xl font-semibold text-gray-800 mb-4">
<i class="fas fa-users mr-2 text-blue-500"></i> Préférences des Joueurs
</h2>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Style préféré</label>
<div class="flex items-center space-x-4">
<div class="flex items-center">
<input type="radio" id="prefCombat" name="playerPref" class="mr-2" checked>
<label for="prefCombat">Combat</label>
</div>
<div class="flex items-center">
<input type="radio" id="prefRoleplay" name="playerPref" class="mr-2">
<label for="prefRoleplay">Roleplay</label>
</div>
<div class="flex items-center">
<input type="radio" id="prefPuzzle" name="playerPref" class="mr-2">
<label for="prefPuzzle">Énigmes</label>
</div>
</div>
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Niveau d'immersion</label>
<input type="range" min="1" max="5" value="3" class="w-full">
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>Léger</span>
<span>Moyen</span>
<span>Profond</span>
</div>
</div>
<div>
<label class="block text-gray-700 mb-2">Notes spéciales</label>
<textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg" rows="3" placeholder="Allergies, limites, attentes..."></textarea>
</div>
</div>
<!-- Scenario Analysis -->
<div class="bg-white rounded-xl shadow-lg p-6 fade-in">
<h2 class="text-xl font-semibold text-gray-800 mb-4">
<i class="fas fa-chart-pie mr-2 text-green-500"></i> Analyse du Scénario
</h2>
<div class="space-y-3">
<div class="flex items-center">
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-balance-scale text-indigo-600"></i>
</div>
<div class="flex-1">
<div class="flex justify-between">
<span class="text-sm font-medium">Équilibre</span>
<span class="text-xs text-gray-500">60%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-1.5">
<div class="bg-indigo-600 h-1.5 rounded-full" style="width: 60%"></div>
</div>
</div>
</div>
<div class="flex items-center">
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-running text-blue-600"></i>
</div>
<div class="flex-1">
<div class="flex justify-between">
<span class="text-sm font-medium">Rythme</span>
<span class="text-xs text-gray-500">45%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-1.5">
<div class="bg-blue-600 h-1.5 rounded-full" style="width: 45%"></div>
</div>
</div>
</div>
<div class="flex items-center">
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-heart text-purple-600"></i>
</div>
<div class="flex-1">
<div class="flex justify-between">
<span class="text-sm font-medium">Engagement</span>
<span class="text-xs text-gray-500">75%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-1.5">
<div class="bg-purple-600 h-1.5 rounded-full" style="width: 75%"></div>
</div>
</div>
</div>
</div>
<button id="analyzeBtn" class="mt-4 w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg transition">
<i class="fas fa-magic mr-2"></i> Optimiser automatiquement
</button>
</div>
</div>
</div>
</div>
<!-- Scene Template (Hidden) -->
<template id="sceneTemplate">
<div class="scene-card bg-gray-50 border border-gray-200 rounded-lg p-4 transition duration-300">
<div class="flex justify-between items-start mb-3">
<div>
<span class="marker bg-indigo-500"></span>
<input type="text" class="scene-title font-medium bg-transparent border-b border-dashed border-gray-300 focus:border-indigo-500 focus:outline-none" placeholder="Titre de la scène">
</div>
<div class="flex space-x-2">
<button class="scene-move-up text-gray-400 hover:text-indigo-600">
<i class="fas fa-arrow-up"></i>
</button>
<button class="scene-move-down text-gray-400 hover:text-indigo-600">
<i class="fas fa-arrow-down"></i>
</button>
<button class="scene-delete text-gray-400 hover:text-red-600">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<textarea class="scene-desc w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500" rows="3" placeholder="Description, objectifs, PNJs impliqués..."></textarea>
<div class="mt-3 flex items-center text-sm">
<div class="mr-4">
<label class="inline-flex items-center">
<input type="checkbox" class="scene-important rounded text-indigo-600">
<span class="ml-2">Scène clé</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input type="checkbox" class="scene-combat rounded text-red-600">
<span class="ml-2">Combat</span>
</label>
</div>
</div>
</div>
</template>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize scenario data
let scenarioData = {
title: "",
description: "",
style: "",
scenes: []
};
// Style selection
const styleButtons = document.querySelectorAll('.style-btn');
styleButtons.forEach(button => {
button.addEventListener('click', function() {
styleButtons.forEach(btn => btn.classList.remove('bg-indigo-100', 'border-indigo-300'));
this.classList.add('bg-indigo-100', 'border-indigo-300');
scenarioData.style = this.dataset.style;
});
});
// Add new scene
const addSceneBtn = document.getElementById('addSceneBtn');
const scenesContainer = document.getElementById('scenesContainer');
const sceneTemplate = document.getElementById('sceneTemplate');
addSceneBtn.addEventListener('click', function() {
const sceneClone = sceneTemplate.content.cloneNode(true);
const sceneElement = sceneClone.querySelector('.scene-card');
// Generate unique ID for the scene
const sceneId = Date.now();
sceneElement.dataset.id = sceneId;
// Add to DOM
scenesContainer.appendChild(sceneClone);
// Add to data model
scenarioData.scenes.push({
id: sceneId,
title: "",
description: "",
isImportant: false,
hasCombat: false
});
// Focus on the new scene title
sceneElement.querySelector('.scene-title').focus();
// Add event listeners to the new scene
setupSceneEvents(sceneElement);
});
// Setup scene event listeners
function setupSceneEvents(sceneElement) {
const sceneId = sceneElement.dataset.id;
const sceneIndex = scenarioData.scenes.findIndex(s => s.id == sceneId);
// Title change
sceneElement.querySelector('.scene-title').addEventListener('input', function() {
scenarioData.scenes[sceneIndex].title = this.value;
});
// Description change
sceneElement.querySelector('.scene-desc').addEventListener('input', function() {
scenarioData.scenes[sceneIndex].description = this.value;
});
// Important toggle
sceneElement.querySelector('.scene-important').addEventListener('change', function() {
scenarioData.scenes[sceneIndex].isImportant = this.checked;
updateSceneMarker(sceneElement, this.checked);
});
// Combat toggle
sceneElement.querySelector('.scene-combat').addEventListener('change', function() {
scenarioData.scenes[sceneIndex].hasCombat = this.checked;
});
// Delete button
sceneElement.querySelector('.scene-delete').addEventListener('click', function() {
if (confirm("Supprimer cette scène ?")) {
sceneElement.remove();
scenarioData.scenes.splice(sceneIndex, 1);
}
});
// Move up
sceneElement.querySelector('.scene-move-up').addEventListener('click', function() {
if (sceneIndex > 0) {
swapScenes(sceneIndex, sceneIndex - 1);
}
});
// Move down
sceneElement.querySelector('.scene-move-down').addEventListener('click', function() {
if (sceneIndex < scenarioData.scenes.length - 1) {
swapScenes(sceneIndex, sceneIndex + 1);
}
});
}
// Update scene marker color based on importance
function updateSceneMarker(sceneElement, isImportant) {
const marker = sceneElement.querySelector('.marker');
marker.className = 'marker';
marker.classList.add(isImportant ? 'bg-red-500' : 'bg-indigo-500');
}
// Swap scenes in both DOM and data model
function swapScenes(indexA, indexB) {
// Swap in data model
[scenarioData.scenes[indexA], scenarioData.scenes[indexB]] =
[scenarioData.scenes[indexB], scenarioData.scenes[indexA]];
// Swap in DOM
const sceneElements = scenesContainer.querySelectorAll('.scene-card');
if (indexA < sceneElements.length && indexB < sceneElements.length) {
scenesContainer.insertBefore(sceneElements[indexA], sceneElements[indexB].nextSibling);
}
}
// Save scenario
document.getElementById('saveBtn').addEventListener('click', function() {
scenarioData.title = document.getElementById('scenarioTitle').value;
scenarioData.description = document.getElementById('scenarioDesc').value;
// Collect all scene data from DOM
const sceneElements = scenesContainer.querySelectorAll('.scene-card');
sceneElements.forEach((sceneElement, index) => {
const sceneId = sceneElement.dataset.id;
const sceneIndex = scenarioData.scenes.findIndex(s => s.id == sceneId);
if (sceneIndex !== -1) {
scenarioData.scenes[sceneIndex].title = sceneElement.querySelector('.scene-title').value;
scenarioData.scenes[sceneIndex].description = sceneElement.querySelector('.scene-desc').value;
scenarioData.scenes[sceneIndex].isImportant = sceneElement.querySelector('.scene-important').checked;
scenarioData.scenes[sceneIndex].hasCombat = sceneElement.querySelector('.scene-combat').checked;
}
});
// In a real app, you would save to a database or localStorage
console.log("Scénario enregistré :", scenarioData);
// Show success message
const btn = this;
const originalText = btn.innerHTML;
btn.innerHTML = '<i class="fas fa-check mr-2"></i> Enregistré !';
btn.classList.remove('bg-green-600');
btn.classList.add('bg-green-500');
setTimeout(() => {
btn.innerHTML = originalText;
btn.classList.remove('bg-green-500');
btn.classList.add('bg-green-600');
}, 2000);
});
// Analyze scenario
document.getElementById('analyzeBtn').addEventListener('click', function() {
// In a real app, this would analyze the scenario structure
alert("Analyse en cours... Cette fonctionnalité analyserait l'équilibre entre combats, dialogues et énigmes, et suggérerait des ajustements.");
});
// Initialize with a default scene
addSceneBtn.click();
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ZoroaStrella/gen-scenario" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>