206 lines
No EOL
13 KiB
HTML
206 lines
No EOL
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<title>defiance v0.12.1</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; overflow: hidden; }
|
|
canvas { display: block; background-color: #1a202c; cursor: pointer; }
|
|
::-webkit-scrollbar { width: 8px; }
|
|
::-webkit-scrollbar-track { background: #2d3748; }
|
|
::-webkit-scrollbar-thumb { background: #4a5568; border-radius: 4px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #718096; }
|
|
.control-btn {
|
|
background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.4);
|
|
color: white; font-size: 1.5rem; font-weight: bold; display: flex;
|
|
align-items: center; justify-content: center; user-select: none;
|
|
-webkit-user-select: none; -webkit-tap-highlight-color: transparent;
|
|
}
|
|
.control-btn:active { background-color: rgba(255, 255, 255, 0.5); }
|
|
.equip-btn, .menu-btn {
|
|
background-color: #3182ce; color: white; padding: 2px 6px; border-radius: 4px;
|
|
font-size: 0.75rem; cursor: pointer; margin-left: 8px; border: none;
|
|
}
|
|
.equip-btn:hover, .menu-btn:hover { background-color: #2b6cb0; }
|
|
.menu-btn { padding: 8px 12px; font-size: 1rem; width: 100%; text-align: left; }
|
|
.menu-btn:disabled { background-color: #4a5568; cursor: not-allowed; }
|
|
@media (min-width: 1024px) { #mobile-controls, #info-toggle-btn { display: none; } }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-900 text-white flex h-screen">
|
|
<svg width="0" height="0" style="position:absolute; display: none;">
|
|
<defs>
|
|
<!-- Asset Forêt -->
|
|
<g id="forest-svg" viewBox="0 0 100 100">
|
|
<defs>
|
|
<linearGradient id="treeTrunk" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#8B4513;" />
|
|
<stop offset="100%" style="stop-color:#A0522D;" />
|
|
</linearGradient>
|
|
<linearGradient id="treeLeaves" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#2F855A;" />
|
|
<stop offset="100%" style="stop-color:#38A169;" />
|
|
</linearGradient>
|
|
</defs>
|
|
<!-- Arrière plan -->
|
|
<polygon points="50,60 65,85 35,85" fill="url(#treeTrunk)" />
|
|
<path d="M 50 20 L 80 65 L 20 65 Z" fill="url(#treeLeaves)"/>
|
|
<!-- Premier plan -->
|
|
<polygon points="30,70 40,90 20,90" fill="url(#treeTrunk)" />
|
|
<path d="M 30 40 L 55 75 L 5 75 Z" fill="url(#treeLeaves)"/>
|
|
<polygon points="70,70 80,90 60,90" fill="url(#treeTrunk)" />
|
|
<path d="M 70 40 L 95 75 L 45 75 Z" fill="url(#treeLeaves)"/>
|
|
</g>
|
|
|
|
<!-- Asset Ville -->
|
|
<g id="city-svg" viewBox="0 0 100 100">
|
|
<defs>
|
|
<linearGradient id="stoneGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#A9A9A9;" />
|
|
<stop offset="100%" style="stop-color:#696969;" />
|
|
</linearGradient>
|
|
<linearGradient id="stoneShadowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#808080;" />
|
|
<stop offset="100%" style="stop-color:#4A5568;" />
|
|
</linearGradient>
|
|
</defs>
|
|
<!-- Muraille -->
|
|
<path d="M 10 95 L 15 70 L 85 70 L 90 95 Z" fill="url(#stoneShadowGradient)" stroke="#1A202C" stroke-width="2" />
|
|
<!-- Crénaux muraille -->
|
|
<path d="M 15 70 L 15 65 L 25 65 L 25 70 L 35 70 L 35 65 L 45 65 L 45 70 L 55 70 L 55 65 L 65 65 L 65 70 L 75 70 L 75 65 L 85 65 L 85 70 Z" fill="url(#stoneShadowGradient)" stroke="#1A202C" stroke-width="1.5"/>
|
|
<!-- Tour gauche -->
|
|
<rect x="20" y="30" width="20" height="40" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>
|
|
<rect x="18" y="25" width="24" height="5" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>
|
|
<!-- Tour droite -->
|
|
<rect x="60" y="30" width="20" height="40" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>
|
|
<rect x="58" y="25" width="24" height="5" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>
|
|
<!-- Donjon central -->
|
|
<rect x="40" y="15" width="20" height="55" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="2"/>
|
|
<path d="M 38 15 L 38 10 L 43 10 L 43 15 L 48 15 L 48 10 L 53 10 L 53 15 L 58 15 L 58 10 L 63 10 L 63 15 Z" fill="url(#stoneGradient)" stroke="#1A202C" stroke-width="1.5"/>
|
|
</g>
|
|
|
|
<!-- Asset Village -->
|
|
<g id="village-svg" viewBox="0 0 100 100">
|
|
<defs>
|
|
<linearGradient id="woodGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#A0522D;" />
|
|
<stop offset="100%" style="stop-color:#8B4513;" />
|
|
</linearGradient>
|
|
<linearGradient id="thatchGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#D4A373;" />
|
|
<stop offset="100%" style="stop-color:#A0522D;" />
|
|
</linearGradient>
|
|
</defs>
|
|
<!-- Maison principale -->
|
|
<rect x="20" y="50" width="60" height="45" fill="url(#woodGradient)" stroke="#1A202C" stroke-width="2"/>
|
|
<polygon points="15,50 85,50 50,20" fill="url(#thatchGradient)" stroke="#1A202C" stroke-width="2"/>
|
|
<!-- Petite maison derrière -->
|
|
<rect x="65" y="60" width="25" height="35" fill="#8B4513" stroke="#1A202C" stroke-width="1.5"/>
|
|
<polygon points="62,60 93,60 77.5,40" fill="#A0522D" stroke="#1A202C" stroke-width="1.5"/>
|
|
<!-- Fenêtre -->
|
|
<rect x="45" y="65" width="10" height="10" fill="#2D3748"/>
|
|
</g>
|
|
|
|
<!-- Asset Joueur (Loup) -->
|
|
<g id="player-svg" viewBox="0 0 100 100">
|
|
<defs>
|
|
<linearGradient id="wolfFurGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#A0AEC0;" />
|
|
<stop offset="100%" style="stop-color:#718096;" />
|
|
</linearGradient>
|
|
<linearGradient id="wolfShadowGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#4A5568;" />
|
|
<stop offset="100%" style="stop-color:#2D3748;" />
|
|
</linearGradient>
|
|
</defs>
|
|
<path d="M 50 20 L 90 50 L 80 95 L 20 95 L 10 50 Z" fill="url(#wolfFurGradient)" />
|
|
<path d="M 50 20 L 70 55 L 50 65 L 30 55 Z" fill="url(#wolfShadowGradient)" />
|
|
<path d="M 25 52 L 10 30 L 35 40 Z" fill="#A0AEC0" stroke="#2D3748" stroke-width="1.5"/>
|
|
<path d="M 75 52 L 90 30 L 65 40 Z" fill="#A0AEC0" stroke="#2D3748" stroke-width="1.5"/>
|
|
<path d="M 35 55 Q 40 52 45 55 Q 40 58 35 55 Z" fill="#FBBF24" />
|
|
<path d="M 65 55 Q 60 52 55 55 Q 60 58 65 55 Z" fill="#FBBF24" />
|
|
<circle cx="39" cy="55" r="1.5" fill="black" />
|
|
<circle cx="61" cy="55" r="1.5" fill="black" />
|
|
</g>
|
|
|
|
</defs>
|
|
</svg>
|
|
<!-- Panneau d'information Desktop -->
|
|
<div id="desktop-panel" class="w-1/4 max-w-sm p-6 bg-gray-800 shadow-lg overflow-y-auto flex-col hidden md:flex">
|
|
<h1 class="text-2xl font-bold mb-4 text-cyan-400">defiance v0.12.1</h1>
|
|
<p class="text-sm text-gray-400 mb-6">ZQSD/Flèches: Bouger | E: Interagir | C: Camper</p>
|
|
|
|
<div class="space-y-4">
|
|
<h2 class="text-xl font-semibold border-b-2 border-gray-700 pb-2">Feuille de Personnage</h2>
|
|
<div id="player-info-desktop" class="bg-gray-700 p-4 rounded-lg text-sm space-y-3"></div>
|
|
<h2 class="text-xl font-semibold border-b-2 border-gray-700 pb-2 mt-4">Infos de la Tuile</h2>
|
|
<div id="tile-info-desktop" class="bg-gray-700 p-4 rounded-lg text-sm"></div>
|
|
</div>
|
|
<div class="mt-auto pt-6 text-center text-xs text-gray-500"><p>Généré par Gemini</p></div>
|
|
</div>
|
|
|
|
<!-- Zone du jeu -->
|
|
<div class="flex-1 relative">
|
|
<canvas id="gameCanvas"></canvas>
|
|
<div id="loading" class="absolute inset-0 bg-black bg-opacity-75 flex items-center justify-center text-2xl z-50">Le monde prend vie...</div>
|
|
<!-- UI Temps et Saison -->
|
|
<div id="time-ui" class="absolute top-4 left-4 bg-black/50 p-2 rounded-lg text-sm font-semibold z-20">
|
|
<div id="time-display">Jour 1, 06:00</div>
|
|
<div id="season-display">Printemps</div>
|
|
</div>
|
|
<!-- Bouton d'info Mobile -->
|
|
<button id="info-toggle-btn" class="control-btn absolute top-5 right-5 w-16 h-16 rounded-full text-3xl z-20">🎒</button>
|
|
|
|
<!-- Panneau d'info Mobile (Overlay) -->
|
|
<div id="mobile-info-panel" class="absolute inset-0 bg-black/75 p-4 flex-col items-center justify-center z-30 hidden">
|
|
<div class="w-full max-w-md max-h-full bg-gray-800 rounded-lg shadow-lg overflow-y-auto p-6 space-y-4">
|
|
<h2 class="text-xl font-semibold border-b-2 border-gray-700 pb-2">Feuille de Personnage</h2>
|
|
<div id="player-info-mobile" class="bg-gray-700 p-4 rounded-lg text-sm space-y-3"></div>
|
|
<h2 class="text-xl font-semibold border-b-2 border-gray-700 pb-2 mt-4">Infos de la Tuile</h2>
|
|
<div id="tile-info-mobile" class="bg-gray-700 p-4 rounded-lg text-sm"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contrôles Mobiles -->
|
|
<div id="mobile-controls" class="absolute bottom-20 right-5 flex items-end gap-4 z-20">
|
|
<button id="btn-camp" class="control-btn rounded-full w-20 h-20 text-3xl">⛺</button>
|
|
<button id="btn-action" class="control-btn rounded-full w-20 h-20 text-3xl">✋</button>
|
|
<div class="grid grid-cols-3 grid-rows-3 w-36 h-36 gap-1">
|
|
<div></div><button id="btn-up" class="control-btn rounded-t-lg">▲</button><div></div>
|
|
<button id="btn-left" class="control-btn rounded-l-lg">◀</button><div></div><button id="btn-right" class="control-btn rounded-r-lg">▶</button>
|
|
<div></div><button id="btn-down" class="control-btn rounded-b-lg">▼</button><div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Écran de Combat -->
|
|
<div id="combat-screen" class="absolute inset-0 bg-black/80 flex-col items-center justify-center z-40 hidden">
|
|
<div class="text-center text-4xl mb-8 text-red-500 font-bold">COMBAT !</div>
|
|
<div class="flex justify-around w-full max-w-4xl">
|
|
<div class="text-center w-1/3">
|
|
<div class="text-8xl">🦸</div>
|
|
<h3 class="text-2xl font-bold text-cyan-400">Héros</h3>
|
|
<div class="w-full bg-gray-700 rounded-full h-6 mt-2 border-2 border-gray-600"><div id="combat-player-hp-bar" class="bg-green-500 h-full rounded-full text-center text-white font-bold transition-all duration-500"></div></div>
|
|
<div id="combat-player-hp-text" class="mt-1"></div>
|
|
</div>
|
|
<div class="text-4xl font-bold self-center">VS</div>
|
|
<div class="text-center w-1/3">
|
|
<div id="combat-opponent-icon" class="text-8xl"></div>
|
|
<h3 id="combat-opponent-name" class="text-2xl font-bold text-red-400"></h3>
|
|
<div class="w-full bg-gray-700 rounded-full h-6 mt-2 border-2 border-gray-600"><div id="combat-opponent-hp-bar" class="bg-red-500 h-full rounded-full text-center text-white font-bold transition-all duration-500"></div></div>
|
|
<div id="combat-opponent-hp-text" class="mt-1"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-12 flex flex-col items-center">
|
|
<button id="attack-btn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-4 px-8 rounded-lg text-2xl shadow-lg">⚔️ Attaquer</button>
|
|
<div id="combat-log" class="mt-4 h-24 text-center text-gray-300"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="../js/script.js"></script>
|
|
</body>
|
|
|
|
</html> |