vesta/defiance
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

version alpha

Browse source
This commit is contained in:
vesta 2025-09-02 19:51:56 +02:00
parent 627ddd0520
commit af533ab399
4 changed files with 1188 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

161
html/main.html
View file

@ -32,79 +32,122 @@
</style>
</head>
<body class="bg-gray-900 text-white flex h-screen">
<svg width="0" height="0" style="position:absolute; display: none;">
<svg width="0" height="0" style="position:absolute; display: none;">
<defs>
<!-- Asset Forêt -->
<!-- Asset Forêt --> <!-- Asset Forêt Dense -->
<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 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>
<linearGradient id="treeLeavesDark" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#2F855A;"/><stop offset="100%" style="stop-color:#276749;"/></linearGradient>
</defs>
<rect x="55" y="65" width="8" height="20" fill="url(#treeTrunkDark)"/>
<path d="M 59 35 L 85 70 L 33 70 Z" fill="url(#treeLeavesDark)"/>
<rect x="20" y="70" width="10" height="25" fill="url(#treeTrunkDark)"/>
<path d="M 25 25 L 60 75 L -10 75 Z" fill="url(#treeLeavesDark)"/>
<rect x="40" y="75" width="5" height="15" fill="url(#treeTrunkDark)" opacity="0.8"/>
<path d="M 42.5 50 L 60 80 L 25 80 Z" fill="url(#treeLeavesDark)" opacity="0.8"/>
</g>
<!-- Asset Forêt Enchantée -->
<g id="enchanted-forest-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="enchantedTrunk" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#5B21B6;"/><stop offset="100%" style="stop-color:#4C1D95;"/></linearGradient>
<linearGradient id="enchantedLeaves" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#A78BFA;"/><stop offset="100%" style="stop-color:#7C3AED;"/></linearGradient>
<radialGradient id="glowEffect"><stop offset="0%" stop-color="#FDE047" stop-opacity="0.8"/><stop offset="100%" stop-color="#FDE047" stop-opacity="0"/></radialGradient>
</defs>
<circle cx="25" cy="85" r="10" fill="url(#glowEffect)"/>
<circle cx="75" cy="80" r="12" fill="url(#glowEffect)"/>
<rect x="46" y="50" width="8" height="45" fill="url(#enchantedTrunk)"/>
<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>
<linearGradient id="deadWood" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#718096;"/><stop offset="100%" style="stop-color:#4A5568;"/></linearGradient>
</defs>
<path d="M 0 80 Q 50 70, 100 80 L 100 100 L 0 100 Z" fill="url(#swampWater)"/>
<path d="M 20 90 L 22 40 L 25 90 L 27 50 L 29 90" stroke="url(#deadWood)" stroke-width="2" fill="none"/>
<path d="M 70 95 L 68 30 L 72 35 L 75 95 L 73 40" stroke="url(#deadWood)" stroke-width="3" fill="none"/>
</g>
<!-- Asset Horde de Loups -->
<g id="wolf-pack-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="wolfFurGrey" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#A0AEC0;"/><stop offset="100%" style="stop-color:#718096;"/></linearGradient>
</defs>
<!-- Loup 1 (leader) -->
<path d="M 50 25 L 70 45 L 65 75 L 35 75 L 30 45 Z" fill="url(#wolfFurGrey)"/>
<path d="M 40 47 L 30 30 L 45 40 Z" fill="#A0AEC0" stroke="#2D3748" stroke-width="1"/>
<path d="M 60 47 L 70 30 L 55 40 Z" fill="#A0AEC0" stroke="#2D3748" stroke-width="1"/>
<!-- Loup 2 (gauche) -->
<path d="M 25 45 L 40 60 L 35 85 L 10 85 L 5 60 Z" fill="url(#wolfFurGrey)" opacity="0.9"/>
<!-- Loup 3 (droite) -->
<path d="M 75 45 L 95 60 L 90 85 L 65 85 L 60 60 Z" fill="url(#wolfFurGrey)" opacity="0.9"/>
</g>
<!-- Asset Sanglier -->
<!-- Asset Sanglier (détaillé v2) -->
<g id="boar-svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="boarFurDark" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#593C2A;"/>
<stop offset="100%" style="stop-color:#3D2A1F;"/>
</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 id="boarTusk" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#F7FAFC;"/>
<stop offset="100%" style="stop-color:#E2E8F0;"/>
</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)"/>
<!-- Pattes arrières -->
<rect x="25" y="70" width="10" height="20" fill="url(#boarFurDark)" transform="rotate(-10 30 80)"/>
<rect x="40" y="72" width="10" height="20" fill="url(#boarFurDark)" transform="rotate(-5 45 82)"/>
<!-- Corps -->
<path d="M 20 60 C 10 40, 40 25, 60 30 L 80 35 C 95 40, 95 60, 80 75 L 30 85 C 15 80, 25 75, 20 60 Z" fill="url(#boarFurDark)"/>
<!-- Pattes avants -->
<rect x="70" y="68" width="12" height="22" fill="url(#boarFurDark)" transform="rotate(10 76 79)"/>
<rect x="80" y="65" width="12" height="22" fill="url(#boarFurDark)" transform="rotate(5 86 76)"/>
<!-- Tête -->
<path d="M 78 33 C 85 28, 95 30, 100 38 L 95 55 L 82 50 Z" fill="url(#boarFurDark)"/>
<!-- Oreille -->
<path d="M 75 32 C 70 25, 80 25, 80 32 Z" fill="#3D2A1F"/>
<!-- Défenses -->
<path d="M 98 52 C 102 47, 97 42, 95 44" fill="url(#boarTusk)" stroke="#A0AEC0" stroke-width="0.5"/>
<!-- Oeil -->
<circle cx="88" cy="42" r="2" fill="#1A202C"/>
<!-- Queue -->
<path d="M 20 65 Q 15 70, 18 75" stroke="#3D2A1F" stroke-width="3" fill="none" stroke-linecap="round"/>
</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>
<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 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"/>
<!-- 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="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>
<!-- 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>
<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="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>
<!-- Asset Joueur (Loup) -->
<g id="player-svg" viewBox="0 0 100 100">
<defs>
@ -126,7 +169,7 @@
<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 -->
@ -142,7 +185,7 @@
</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>
@ -154,7 +197,7 @@
</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">
@ -164,11 +207,11 @@
<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>
<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>
@ -200,7 +243,7 @@
</div>
</div>
</div>
<script src="../js/script.js"></script>
</body>
<script src="../js/scriptalpha.js"></script>
</body>
</html>