Spaces:
Running
Running
<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> |