Compare commits
No commits in common. "3bcf836c63b411de16d9281f96c80865a391a8c3" and "469b94c2c6a2b62fc307bf65f12e94ff03b69ec5" have entirely different histories.
3bcf836c63
...
469b94c2c6
3 changed files with 858 additions and 1668 deletions
176
html/main.html
176
html/main.html
|
|
@ -9,7 +9,7 @@
|
|||
<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: #000000; cursor: pointer; }
|
||||
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; }
|
||||
|
|
@ -21,50 +21,20 @@
|
|||
-webkit-user-select: none; -webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.control-btn:active { background-color: rgba(255, 255, 255, 0.5); }
|
||||
.quest-choice-btn {
|
||||
background-color: #3182ce; color: white; padding: 8px; border-radius: 4px;
|
||||
font-size: 0.9rem; cursor: pointer; border: none; text-align: left;
|
||||
}
|
||||
.quest-choice-btn:hover { background-color: #2b6cb0; }
|
||||
#dialogue-box {
|
||||
bottom: 10%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80%;
|
||||
max-width: 600px;
|
||||
.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>
|
||||
<g id="player-svg" viewBox="0 0 100 100">
|
||||
<rect x="40" y="30" width="20" height="15" fill="#FBBF24"/>
|
||||
<rect x="40" y="45" width="20" height="30" fill="#E53E3E"/>
|
||||
<rect x="40" y="75" width="20" height="15" fill="#4A5568"/>
|
||||
<circle cx="50" cy="20" r="10" fill="#FBBF24"/>
|
||||
</g>
|
||||
<g id="npc-svg" viewBox="0 0 100 100">
|
||||
<rect x="40" y="45" width="20" height="30" fill="#3182ce"/>
|
||||
<rect x="40" y="75" width="20" height="15" fill="#4A5568"/>
|
||||
<circle cx="50" cy="30" r="10" fill="#F2D5B5"/>
|
||||
</g>
|
||||
<g id="village-svg" viewBox="0 0 100 100">
|
||||
<rect x="20" y="50" width="60" height="45" fill="#A0522D" stroke="#1A202C" stroke-width="2"/>
|
||||
<polygon points="15,50 85,50 50,20" fill="#D4A373" stroke="#1A202C" stroke-width="2"/>
|
||||
<rect x="45" y="65" width="10" height="10" fill="#2D3748"/>
|
||||
</g>
|
||||
<g id="city-svg" viewBox="0 0 100 100">
|
||||
<path d="M 10 95 L 15 70 L 85 70 L 90 95 Z" fill="#696969" stroke="#1A202C" stroke-width="2" />
|
||||
<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="#696969" stroke="#1A202C" stroke-width="1.5"/>
|
||||
<rect x="20" y="30" width="20" height="40" fill="#A9A9A9" stroke="#1A202C" stroke-width="2"/>
|
||||
<rect x="18" y="25" width="24" height="5" fill="#A9A9A9" stroke="#1A202C" stroke-width="2"/>
|
||||
<rect x="60" y="30" width="20" height="40" fill="#A9A9A9" stroke="#1A202C" stroke-width="2"/>
|
||||
<rect x="58" y="25" width="24" height="5" fill="#A9A9A9" stroke="#1A202C" stroke-width="2"/>
|
||||
<rect x="40" y="15" width="20" height="55" fill="#A9A9A9" 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="#A9A9A9" stroke="#1A202C" stroke-width="1.5"/>
|
||||
</g>
|
||||
<!-- Asset Forêt --> <!-- Asset Forêt Dense -->
|
||||
<g id="forest-svg" viewBox="0 0 100 100">
|
||||
<defs>
|
||||
<linearGradient id="treeTrunkDark" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#5F432A;"/><stop offset="100%" style="stop-color:#4A2E1A;"/></linearGradient>
|
||||
|
|
@ -91,6 +61,8 @@
|
|||
<path d="M 50 10 C 20 50, 80 50, 50 10 Z" fill="url(#enchantedLeaves)" transform="rotate(-15 50 50)"/>
|
||||
<path d="M 50 15 L 85 65 L 15 65 Z" fill="url(#enchantedLeaves)"/>
|
||||
</g>
|
||||
|
||||
<!-- Asset Marais -->
|
||||
<g id="swamp-svg" viewBox="0 0 100 100">
|
||||
<defs>
|
||||
<linearGradient id="swampWater" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#4A5568;"/><stop offset="100%" style="stop-color:#2D3748;"/></linearGradient>
|
||||
|
|
@ -148,83 +120,68 @@
|
|||
<!-- Queue -->
|
||||
<path d="M 20 65 Q 15 70, 18 75" stroke="#3D2A1F" stroke-width="3" fill="none" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g id="bird-svg" viewBox="0 0 100 100" fill="#3A3A3A">
|
||||
<path d="M50 2C27.9 2 10 20.3 10 42.9c0 6.4 1.5 12.4 4.1 17.8L2 85l23-12.1c5.2 2.1 11 3.2 17.1 3.2 22.1 0 40-18.3 40-40.9S72.1 2 50 2zm18.4 46.5c-1.3 2.5-4.4 4.2-7.8 4.2-3.5 0-6.6-1.7-7.8-4.2-0.6-1.1-1.8-1.4-2.8-0.8-1.1 0.6-1.4 1.8-0.8 2.8 2.2 4.1 6.7 6.8 11.5 6.8s9.3-2.7 11.5-6.8c0.6-1.1 0.3-2.4-0.8-2.8-1.1-0.6-2.3-0.2-2.8 0.8zM31.6 48.5c-1.3 2.5-4.4 4.2-7.8 4.2-3.5 0-6.6-1.7-7.8-4.2-0.6-1.1-1.8-1.4-2.8-0.8-1.1 0.6-1.4 1.8-0.8 2.8 2.2 4.1 6.7 6.8 11.5 6.8s9.3-2.7 11.5-6.8c0.6-1.1 0.3-2.4-0.8-2.8-1-0.6-2.3-0.2-2.8 0.8z"/>
|
||||
<path d="M 85.5,35.1 C 81.2,29.3 75.3,24.8 68.4,22.1 L 68.4,22.1 C 66.1,21.1 63.6,20.5 61,20.5 C 58.4,20.5 55.9,21.1 53.6,22.1 L 53.6,22.1 C 46.7,24.8 40.8,29.3 36.5,35.1 C 35.6,36.2 35.8,37.8 36.9,38.7 C 37.3,39.1 37.9,39.3 38.4,39.3 C 39.1,39.3 39.9,38.9 40.4,38.2 C 44.1,33.2 49.3,29.3 55.3,27 L 55.3,27 C 57.1,26.5 59,26.2 61,26.2 C 63,26.2 64.9,26.5 66.7,27 L 66.7,27 C 72.7,29.3 77.9,33.2 81.6,38.2 C 82.1,38.9 82.9,39.3 83.6,39.3 C 84.1,39.3 84.7,39.1 85.1,38.7 C 86.2,37.8 86.4,36.2 85.5,35.1 Z"/>
|
||||
|
||||
<!-- 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>
|
||||
<path d="M 10 95 L 15 70 L 85 70 L 90 95 Z" fill="url(#stoneShadowGradient)" stroke="#1A202C" stroke-width="2"/>
|
||||
<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"/>
|
||||
<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"/>
|
||||
<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"/>
|
||||
<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>
|
||||
<g id="farm-svg" viewBox="0 0 100 100">
|
||||
<rect x="25" y="40" width="50" height="40" fill="#A0522D" stroke="#1A202C" stroke-width="2"/>
|
||||
<polygon points="20,40 80,40 50,20" fill="#D4A373" stroke="#1A202C" stroke-width="2"/>
|
||||
<rect x="40" y="55" width="20" height="25" fill="#8B4513" stroke="#1A202C" stroke-width="1.5"/>
|
||||
<rect x="10" y="70" width="5" height="15" fill="#6B4F2E"/>
|
||||
<rect x="20" y="70" width="5" height="15" fill="#6B4F2E"/>
|
||||
<rect x="75" y="70" width="5" height="15" fill="#6B4F2E"/>
|
||||
<rect x="85" y="70" width="5" height="15" fill="#6B4F2E"/>
|
||||
<line x1="10" y1="75" x2="25" y2="75" stroke="#6B4F2E" stroke-width="3"/>
|
||||
<line x1="75" y1="75" x2="90" y2="75" stroke="#6B4F2E" stroke-width="3"/>
|
||||
|
||||
<!-- 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>
|
||||
<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"/>
|
||||
<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"/>
|
||||
<rect x="45" y="65" width="10" height="10" fill="#2D3748"/>
|
||||
</g>
|
||||
<g id="camp-svg" viewBox="0 0 100 100">
|
||||
<polygon points="20,80 50,30 80,80" fill="#D4A373" stroke="#1A202C" stroke-width="2"/>
|
||||
<polygon points="25,80 50,35 75,80" fill="#BFB08A" />
|
||||
<circle cx="65" cy="75" r="10" fill="#696969"/>
|
||||
<path d="M 62 72 L 65 68 L 68 72 Z" fill="#FF4500" />
|
||||
<path d="M 60 78 L 63 74 L 66 78 Z" fill="#FFA500" />
|
||||
<path d="M 68 78 L 71 74 L 74 78 Z" fill="#FFD700" />
|
||||
</g>
|
||||
<g id="house-svg" viewBox="0 0 100 100">
|
||||
<path d="M 15 80 L 15 50 L 50 20 L 85 50 L 85 80 Z" fill="#D2B48C"/>
|
||||
<path d="M 20 75 L 20 55 L 50 30 L 80 55 L 80 75 Z" fill="#8B4513"/>
|
||||
<rect x="25" y="60" width="15" height="15" fill="#F0E68C"/>
|
||||
<rect x="60" y="60" width="15" height="15" fill="#F0E68C"/>
|
||||
<line x1="15" y1="50" x2="85" y2="50" stroke="#5C3317" stroke-width="3"/>
|
||||
<line x1="50" y1="20" x2="50" y2="80" stroke="#5C3317" stroke-width="3"/>
|
||||
</g>
|
||||
<g id="cult-svg" viewBox="0 0 100 100">
|
||||
<path d="M 20 80 L 20 40 L 50 10 L 80 40 L 80 80 Z" fill="#C0C0C0"/>
|
||||
<path d="M 25 75 L 25 45 L 50 20 L 75 45 L 75 75 Z" fill="#A9A9A9"/>
|
||||
<rect x="45" y="5" width="10" height="20" fill="#C0C0C0"/>
|
||||
<rect x="40" y="10" width="20" height="5" fill="#C0C0C0"/>
|
||||
<rect x="42" y="50" width="16" height="25" fill="#654321"/>
|
||||
</g>
|
||||
<g id="market-svg" viewBox="0 0 100 100">
|
||||
<rect x="15" y="70" width="70" height="10" fill="#8B4513"/>
|
||||
<rect x="20" y="40" width="10" height="30" fill="#A0522D"/>
|
||||
<rect x="70" y="40" width="10" height="30" fill="#A0522D"/>
|
||||
<polygon points="10,40 90,40 80,25 20,25" fill="#CD5C5C"/>
|
||||
<path d="M10 40 C 30 45, 70 45, 90 40" fill="none" stroke="#A52A2A" stroke-width="2"/>
|
||||
<rect x="25" y="60" width="15" height="10" fill="#DEB887"/>
|
||||
<rect x="60" y="60" width="15" height="10" fill="#DEB887"/>
|
||||
</g>
|
||||
<g id="mine-svg" viewBox="0 0 100 100">
|
||||
<path d="M 20 80 A 30 30 0 0 1 80 80 Z" fill="#000000"/>
|
||||
<path d="M 25 80 A 25 25 0 0 1 75 80 Z" fill="#2F4F4F"/>
|
||||
<path d="M 15 85 L 15 40 L 25 40 L 25 85 Z" fill="#8B4513"/>
|
||||
<path d="M 85 85 L 85 40 L 75 40 L 75 85 Z" fill="#8B4513"/>
|
||||
<path d="M 15 40 L 85 40 L 80 30 L 20 30 Z" fill="#A0522D"/>
|
||||
|
||||
|
||||
<!-- 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</p>
|
||||
<p class="text-sm text-gray-400 mb-6">ZQSD/Flèches: Bouger | E: Interagir | C: Camper</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<h2 class="text-xl font-semibold border-b-2 border-gray-700 pb-2">Paramètres IA</h2>
|
||||
<div class="bg-gray-700 p-4 rounded-lg text-sm space-y-2">
|
||||
<label for="apiKeyInputDesktop" class="font-semibold">Clé API Gemini</label>
|
||||
<input type="password" id="apiKeyInputDesktop" placeholder="Entrez votre clé API" class="w-full bg-gray-800 rounded p-2 text-white placeholder-gray-500">
|
||||
<p class="text-xs text-gray-400">Obtenez une clé sur Google AI Studio pour générer des quêtes infinies.</p>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<h2 class="text-xl font-semibold border-b-2 border-gray-700 pb-2 mt-4">Journal de Quêtes</h2>
|
||||
<div id="quest-log-desktop" class="bg-gray-700 p-4 rounded-lg text-sm space-y-2"></div>
|
||||
</div>
|
||||
<div class="mt-auto pt-6 text-center text-xs text-gray-500"><p>Généré par Gemini</p></div>
|
||||
</div>
|
||||
|
|
@ -244,19 +201,10 @@
|
|||
<!-- 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">
|
||||
<div class="space-y-2">
|
||||
<h2 class="text-xl font-semibold border-b-2 border-gray-700 pb-2">Paramètres IA</h2>
|
||||
<div class="bg-gray-700 p-4 rounded-lg text-sm space-y-2">
|
||||
<label for="apiKeyInputMobile" class="font-semibold">Clé API Gemini</label>
|
||||
<input type="password" id="apiKeyInputMobile" placeholder="Entrez votre clé API" class="w-full bg-gray-800 rounded p-2 text-white placeholder-gray-500">
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<h2 class="text-xl font-semibold border-b-2 border-gray-700 pb-2 mt-4">Journal de Quêtes</h2>
|
||||
<div id="quest-log-mobile" class="bg-gray-700 p-4 rounded-lg text-sm space-y-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -271,14 +219,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Boîte de dialogue -->
|
||||
<div id="dialogue-box" class="absolute bg-black/70 p-4 rounded-lg border border-gray-600 shadow-lg z-30 hidden">
|
||||
<h3 id="dialogue-name" class="text-lg font-bold text-cyan-400 mb-2"></h3>
|
||||
<p id="dialogue-text" class="text-gray-200 mb-4"></p>
|
||||
<div id="dialogue-choices" class="space-y-2"></div>
|
||||
<button id="dialogue-close" class="mt-4 bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-md text-sm w-full">Fermer</button>
|
||||
</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>
|
||||
|
|
|
|||
1375
js/script.js
1375
js/script.js
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue