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

Compare commits

base: vesta:3bcf836c63b411de16d9281f96c80865a391a8c3
Branches Tags
vesta:master
..
compare: vesta:469b94c2c6a2b62fc307bf65f12e94ff03b69ec5
Branches Tags
vesta:master

No commits in common. "3bcf836c63b411de16d9281f96c80865a391a8c3" and "469b94c2c6a2b62fc307bf65f12e94ff03b69ec5" have entirely different histories.
3bcf836c63 ... 469b94c2c6

3 changed files with 858 additions and 1668 deletions
Download patch file Download diff file Expand all files Collapse all files

176
html/main.html
View file

@ -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>

1211
js/script.js
View file

File diff suppressed because it is too large Load diff

505
js/scriptalpha.js
View file

@ -1,73 +1,49 @@
document.addEventListener('DOMContentLoaded', () => {
const Biome = {
WATER_DEEP: { sprite:null, design: {frames: 8,duration: 200, drawer: drawDeepWaterFrame}, acceptStructure:false, movements:['swim'], affinities:[('water',0.8),('dark',0.2)], name: 'Eau Profonde', winterColor: '#3D5A80', fallColor: '#3D5A80', summerColor: '#3D5A80', autumnColor: '#3D5A80',maxElevation:0,minElevation:0 },
WATER_SHALLOW: { sprite:null, design: {frames: 6,duration: 150, drawer: drawWaterFrame}, acceptStructure:false,movements:['swim','ride','navigate','fly'], affinities:[('water',0.8),('life',0.2)],name: 'Eau Peu Profonde', winterColor: '#97aabdff', fallColor: '#5A8AB8', summerColor: '#5A8AB8', autumnColor: '#5A8AB8',maxElevation:1,minElevation:1 },
BEACH: { sprite:null, design: {frames: 4,duration: 200, drawer: drawBeachFrame}, acceptStructure:true, movements:['walk','ride','fly'],affinities:[('sand',0.8),('water',0.2)],name: 'Sable', winterColor: '#E9D9A1', fallColor: '#E9D9A1', summerColor: '#E9D9A1', autumnColor: '#E9D9A1',maxElevation:2 ,minElevation:2 },
GRASSLAND: {sprite:null, design: { frames: 4,duration: 200, drawer: drawGrasslandFrame}, acceptStructure:true, movements:['walk','ride','fly'],affinities:[('life',0.6),('earth',0.2)],name: 'Plaine', winterColor: '#ecf1e3ff', fallColor: '#98C159', summerColor: '#a5a450ff', autumnColor: '#455e21ff',maxElevation:3,minElevation:2 },
WATER_DEEP: { sprite: null, acceptStructure:false, movements:['swim'], affinities:[('water',0.8),('dark',0.2)], name: 'Eau Profonde', winterColor: '#3D5A80', fallColor: '#3D5A80', summerColor: '#3D5A80', autumnColor: '#3D5A80',maxElevation:0,minElevation:0 },
WATER_SHALLOW: { sprite: null, acceptStructure:false,movements:['swim','ride','navigate','fly'], affinities:[('water',0.8),('life',0.2)],name: 'Eau Peu Profonde', winterColor: '#97aabdff', fallColor: '#5A8AB8', summerColor: '#5A8AB8', autumnColor: '#5A8AB8',maxElevation:1,minElevation:1 },
BEACH: { sprite: null, acceptStructure:true, movements:['walk','ride','fly'],affinities:[('sand',0.8),('water',0.2)],name: 'Sable', winterColor: '#E9D9A1', fallColor: '#E9D9A1', summerColor: '#E9D9A1', autumnColor: '#E9D9A1',maxElevation:2 ,minElevation:2 },
GRASSLAND: { sprite: null, acceptStructure:true, movements:['walk','ride','fly'],affinities:[('life',0.6),('earth',0.2)],name: 'Plaine', winterColor: '#ecf1e3ff', fallColor: '#98C159', summerColor: '#a5a450ff', autumnColor: '#455e21ff',maxElevation:3,minElevation:2 },
FOREST: { sprite: null, acceptStructure:true,movements:['walk','ride','fly'],affinities:[('wood',0.6),('earth',0.4)], name: 'Forêt', winterColor: '#92ac83ff', fallColor: '#21a32cff', summerColor: '#6A994E', autumnColor: '#b88a28ff',maxElevation:3,minElevation:2 },
ENCHANTED_FOREST: { sprite: null, acceptStructure:true,movements:['walk','ride','fly'],affinities:[('wood',0.8),('dark',0.2),('life',0.2)], name: 'Forêt Enchantée', winterColor: '#7B6094', fallColor: '#7B6094', summerColor: '#7B6094', autumnColor: '#7B6094',maxElevation:3,minElevation:2 },
MOUNTAIN: { sprite:null, design: { frames: 1,duration: 9999, drawer: drawMountainFrame}, acceptStructure:false, movements:['climb','fly'],affinities:[('rock',0.6),('wind',0.4)],name: 'Montagne', winterColor: '#F7F7F7', fallColor: '#A9A9A9', summerColor: '#A9A9A9', autumnColor: '#A9A9A9',maxElevation:5,minElevation:3 },
MOUNTAIN: { sprite: null, acceptStructure:false, movements:['climb','fly'],affinities:[('rock',0.6),('wind',0.4)],name: 'Montagne', winterColor: '#F7F7F7', fallColor: '#A9A9A9', summerColor: '#A9A9A9', autumnColor: '#A9A9A9',maxElevation:5,minElevation:3 },
SNOWLAND: { sprite: null, acceptStructure:true,movements:['walk','ride','fly'], affinities:[('ice',0.8),('earth',0.2)],name: 'Toundra', winterColor: '#F7F7F7', fallColor: '#F7F7F7', summerColor: '#F7F7F7', autumnColor: '#F7F7F7',maxElevation:2,minElevation:2 },
SNOWMOUNTAIN: { sprite: null, acceptStructure:false, movements:['climb','fly'],affinities:[('ice',0.4),('rock',0.4),('wind',0.2)],name: 'Mont enneigé', winterColor: '#F7F7F7', fallColor: '#F7F7F7', summerColor: '#F7F7F7', autumnColor: '#F7F7F7',maxElevation:8,minElevation:4 },
DESERT: { sprite: null, acceptStructure:true,movements:['walk','ride','fly'],affinities:[('sand',0.8),('life',0.1),('fire',0.1)], name: 'Désert', winterColor: '#D4A373', fallColor: '#D4A373', summerColor: '#D4A373', autumnColor: '#D4A373',maxElevation:2,minElevation:2 },
RIVER: { sprite: null, acceptStructure:false,movements:['navigate','swim','fly'],affinities:[('water',0.6),('earth',0.2),('life',0.2)],name: 'Rivière', winterColor: '#97aabdff', fallColor: '#5A8AB8', summerColor: '#5A8AB8', autumnColor: '#5A8AB8',maxElevation:2,minElevation:2 },
SWAMP: { sprite:null, design: { frames: 4,duration: 300, drawer: drawSwampFrame}, acceptStructure:false, movements:['fly'],affinities:[('water',0.6),('earth',0.2),('dark',0.2)],name: 'Marais', winterColor: '#0b2e10ff', fallColor: '#0b2e10ff', summerColor: '#0b2e10ff', autumnColor: '#0b2e10ff',maxElevation:1,minElevation:1 }
SWAMP: { sprite: null, acceptStructure:false, movements:['fly'],affinities:[('water',0.6),('earth',0.2),('dark',0.2)],name: 'Marais', winterColor: '#0b2e10ff', fallColor: '#0b2e10ff', summerColor: '#0b2e10ff', autumnColor: '#0b2e10ff',maxElevation:1,minElevation:1 }
}
const NAME_PREFIXES = ["Chêne", "Sombre", "Pierre", "Haut", "Val", "Mur", "Guet", "Clair"];
const NAME_SUFFIXES = ["bourg", "fort", "ville", "mont", "port", "bois", "rivage", "gard"];
const JOB = {
VILLAGER: {
name: "Habitant",
dialogues: [
"Bien le bonjour, étranger.",
"J'espère que la récolte sera bonne cette année.",
"Faites attention aux loups dans la forêt.",
"Le forgeron a de nouvelles marchandises, je crois."
]
}, FARMER: {
name: "Fermier",
dialogues: [
"Le temps est parfait pour les cultures.",
"Ces sangliers n'arrêtent pas de saccager mes champs !",
"Une bonne terre, c'est tout ce qui compte."
]
},
BANDIT: {
name: "Bandit",
dialogues: [
"Qu'est-ce que tu regardes ?",
"Dégage d'ici avant que je me fâche.",
"Ta bourse ou la vie !"
]
}
};
const Affinities = ['water','fire','sand','rock','dark','life','ice','wood','wind','metal','time','space','lava','light','spirit'];
const RACE = {
HUMAN: {strength:1,vitality:1,dexterity:1,intelligence:1,wisdom:1,luck:1}
};
const SLOT = ['head','body','leg','foot','right-hand','left-hand','two-hands','finger1','finger2','neck','purse','backpack','belt1','belt2'];
const Slot = ['head','body','leg','foot','right-hand','left-hand','two-hands','finger1','finger2','neck','purse','backpack','belt1','belt2'];
const ITEM_TYPE = {
const ItemType = {
lightWeapon:{slot:['right-hand','left-hand','backpack'],soul:true,enchant:true},
heavyWeapon:{slot:['two-hands','backpack'],soul:true,enchant:true},
heavyArmor:{slot:['body','backpack'],soul:true,enchant:true},
lightArmor:{slot:['body','backpack'],soul:true,enchant:true},
shield:{slot:['right-hand','left-hand','backpack'],soul:true,enchant:true},
shoes:{slot:['foot','backpack'],soul:true,enchant:true},
pant:{slot:['leg','backpack'],soul:true,enchant:true},
helmet:{slot:['leg','backpack'],soul:true,enchant:true},
potion:{slot:['heal','backpack'],soul:false,enchant:false},
throwable:{slot:['belt','backpack'],soul:true,enchant:true},
craftMaterial:{slot:['backpack'],soul:false,enchant:false},
ring:{slot:['finger1','finger2','backpack'],soul:true,enchant:true},
amulet:{slot:['neck','backpack'],soul:true,enchant:true},
currency:{slot:['purse'],soul:true,enchant:true},
enchantMaterial:{slot:['backpack'],soul:false,enchant:false},
mercantMaterial:{slot:['backpack'],soul:false,enchant:false}
heavyWeapon:{slot:('two-hands','backpack'),soul:true,enchant:true},
heavyArmor:{slot:('body','backpack'),soul:true,enchant:true},
lightArmor:{slot:('body','backpack'),soul:true,enchant:true},
shield:{slot:('right-hand','left-hand','backpack'),soul:true,enchant:true},
shoes:{slot:('foot','backpack'),soul:true,enchant:true},
pant:{slot:('leg','backpack'),soul:true,enchant:true},
helmet:{slot:('leg','backpack'),soul:true,enchant:true},
potion:{slot:('heal','backpack'),soul:false,enchant:false},
throwable:{slot:('belt','backpack'),soul:true,enchant:true},
craftMaterial:{slot:('backpack'),soul:false,enchant:false},
ring:{slot:('finger1','finger2','backpack'),soul:true,enchant:true},
amulet:{slot:('neck','backpack'),soul:true,enchant:true},
currency:{slot:('purse'),soul:true,enchant:true},
enchantMaterial:{slot:('backpack'),soul:false,enchant:false},
mercantMaterial:{slot:('backpack'),soul:false,enchant:false}
}
const ITEMS = {
const Items = {
'Épée en Bois': { name: 'Épée en Bois', itemType: 'lightWeapon', stats: { strength: 2 }, icon: '🗡️' ,enchantments:[] },
'Armure de Cuir': { name: 'Armure de Cuir', itemType: 'lightArmor', stats: { vitality: 2 }, icon: '🧥',enchantments:[] },
'Claymore': { name: 'Claymore', itemType: 'lightArmor', stats: { vitality: 2 }, icon: '🧥',enchantments:['primal'] },
@ -81,20 +57,11 @@ document.addEventListener('DOMContentLoaded', () => {
};
const STRUCTURE_TYPE = {
CASTLE: { name: 'Chateau', population: 15, spawnChance: 0.01, size: { w: 48, h: 48 }, offset: { x: -24, y: -28 } , svgAsset: () => citySVG },
HOUSE: { name: 'Maison', population: 5, spawnChance: 0.02, size: { w: 30, h: 30 }, offset: { x: -20, y: -16 } , svgAsset: () => houseSVG},
FARM: { name: 'Ferme', population: 5, spawnChance: 0.10, size: { w: 30, h: 30 }, offset: { x: -20, y: -16 }, svgAsset: () => farmSVG },
CAMP: { name: 'Campement', population: 2, spawnChance: 0.05, size: { w: 30, h: 30 }, offset: { x: -20, y: -20 } , svgAsset: () => campSVG },
MARKET: { name: 'Marché', population: 2, spawnChance: 0.05, size: { w: 30, h: 30 }, offset: { x: -20, y: -20 } , svgAsset: () => marketSVG },
CULT: { name: 'Lieu de culte', population: 2, spawnChance: 0.05, size: { w: 30, h: 30 }, offset: { x: -20, y: -20 } , svgAsset: () => cultSVG },
MINE: { name: 'Mine', population: 2, spawnChance: 0.05, size: { w: 30, h: 30 }, offset: { x: -20, y: -20 } , svgAsset: () => mineSVG }
};
const SETTLEMENT_TYPE = {
HUMAN_TOWN: { name: 'Ville', population: 100, spawnChance: 0.01, size: 10, structureType:[(STRUCTURE_TYPE.CASTLE,1),(STRUCTURE_TYPE.HOUSE,5),(STRUCTURE_TYPE.MARKET,2),(STRUCTURE_TYPE.CULT,2)] },
HUMAN_VILLAGE: { name: 'Village', population: 50, spawnChance: 0.02, size: 3, structureType:[(STRUCTURE_TYPE.CASTLE,1),(STRUCTURE_TYPE.HOUSE,5)]},
DEMON_CAMP: { name: 'Demon camp', population: 5, spawnChance: 0.10, size: 3, structureType:[(STRUCTURE_TYPE.CULT,1),(STRUCTURE_TYPE.HOUSE,10)] },
ORC_BASE: { name: 'Orc base', population: 2, spawnChance: 0.05, size: 5, structureType:[(STRUCTURE_TYPE.CASTLE,1),(STRUCTURE_TYPE.HOUSE,5)] }
const StructureType = {
TOWN: { name: 'Ville', population:15, icon: '🗡️', occurence:0.001 },
VILLAGE: { name: 'Village', population:5, icon: '🗡️',occurence:0.005 },
FARM: { name: 'Ferme', population:5, icon: '🗡️',occurence:0.010 },
CAMP:{ name: 'Campement', population:2, icon: '⛺',occurence:0.002 },
};
const MONSTER_TYPES = {
@ -103,9 +70,8 @@ document.addEventListener('DOMContentLoaded', () => {
};
const ANIMAL_TYPES = {
WOLF: { name: 'Loup', movement: 'walk', svgAsset: () => wolfPackSVG, hp: 20, strength: 4, xp: 15, loot: { 'Cuir': 1, 'Os': 1 }, biomes: [Biome.FOREST, Biome.MOUNTAIN, Biome.SNOWLAND], spawnChance: 0.01, size: { w: 40, h: 40 }, offset: { x: -20, y: -35 } },
BOAR: { name: 'Sanglier', movement: 'walk', svgAsset: () => boarSVG, hp: 25, strength: 5, xp: 20, loot: { 'Cuir': 2 }, biomes: [Biome.FOREST, Biome.GRASSLAND], spawnChance: 0.02, size: { w: 30, h: 30 }, offset: { x: -15, y: -28 } },
BIRD: { name: 'Aigle', movement: 'fly', svgAsset: () => birdSVG, hp: 10, strength: 1, xp: 5, loot: { 'Plume': 1 }, biomes: [Biome.FOREST, Biome.GRASSLAND, Biome.MOUNTAIN, Biome.BEACH], spawnChance: 0.03, size: { w: 15, h: 12 }, offset: { x: -22, y: -45 }, flightHeight: 40 },
WOLF: { name: 'Loup', svgAsset: () => wolfPackSVG, hp: 20, strength: 4, xp: 15, loot: { 'Cuir': 1, 'Os': 1 }, biomes: [Biome.FOREST, Biome.MOUNTAIN, Biome.SNOWLAND], spawnChance: 0.01, size: { w: 40, h: 40 }, offset: { x: -20, y: -35 } },
BOAR: { name: 'Sanglier', svgAsset: () => boarSVG, hp: 25, strength: 5, xp: 20, loot: { 'Cuir': 2 }, biomes: [Biome.FOREST, Biome.GRASSLAND], spawnChance: 0.02, size: { w: 30, h: 30 }, offset: { x: -15, y: -28 } },
};
// --- Global Asset Variables ---
@ -113,16 +79,14 @@ document.addEventListener('DOMContentLoaded', () => {
class Sprite {
constructor(biome) {
this.biome = biome;
this.sheet = null;
this.frameWidth = TILE_WIDTH;
this.frameHeight = TILE_HEIGHT;
this.frameCount = this.biome.design.frames;
this.animationSpeed = this.biome.design.duration;
constructor(sheet, frameWidth, frameHeight, frameCount, animationSpeed) {
this.sheet = sheet;
this.frameWidth = frameWidth;
this.frameHeight = frameHeight;
this.frameCount = frameCount;
this.animationSpeed = animationSpeed;
this.currentFrame = 0;
this.lastFrameTime = 0;
this.setSheet(this.biome.design.drawer);
}
update(currentTime) {
@ -142,116 +106,8 @@ document.addEventListener('DOMContentLoaded', () => {
dx, dy, this.frameWidth, this.frameHeight
);
}
setSheet(drawer) {
const sheetCanvas = document.createElement('canvas');
sheetCanvas.width = this.frameWidth;
sheetCanvas.height = this.frameHeight * this.frameCount;
const sheetCtx = sheetCanvas.getContext('2d');
sheetCtx.imageSmoothingEnabled = false;
for (let frame = 0; frame < this.frameCount; frame++) {
sheetCtx.save();
sheetCtx.translate(0, frame * this.frameHeight);
drawer(sheetCtx,frame,this.frameWidth,this.frameHeight);
sheetCtx.restore();
}
this.sheet= sheetCanvas;
}
}
class structure {
constructor(position) {
this.position = position;
this.type = null;
this.name = null;
this.population=null;
this.setType();
this.setName();
//this.setPopulation();
}
setName() {
var rand = seededRandom(this.position.x * 13 + this.position.y * 59);
const NAME_SUFFIXES = ["bourg", "fort", "ville", "mont", "port", "bois", "rivage", "gard"];
this.name= this.type.name+ NAME_SUFFIXES[Math.floor(rand() * NAME_SUFFIXES.length)]
}
setDesign(ctx) {
const svgImage = this.type.svgAsset();
if (!svgImage) return;
const size = this.type.size || { w: 40, h: 40 };
const offset = this.type.offset || { x: -20, y: -35 };
ctx.drawImage(svgImage, offset.x, offset.y, size.w, size.h);
}
setType() {
const types = Object.values(STRUCTURE_TYPE);
const weightedTypes = [];
// Remplir le tableau pondéré en fonction des occurrences
types.forEach(type => {
const weight = Math.floor(type.spawnChance * 100);
for (let i = 0; i < weight; i++) {
weightedTypes.push(type);
}
});
// Sélectionner un type aléatoire dans le tableau pondéré
this.type = weightedTypes[Math.floor(Math.random() * weightedTypes.length)];
}
setPopulation() {
for (let i = 0; i < this.type.population; i++) {
//new NPC
}
}
// Méthode de l'objet
}
class Settlement {
constructor() {
this.tiles = [];
this.structures = [];
this.name = null;
this.population=null;
this.setType();
this.setName();
//this.setPopulation();
}
setName() {
var rand = seededRandom(this.position.x * 13 + this.position.y * 59);
const NAME_SUFFIXES = ["bourg", "fort", "ville", "mont", "port", "bois", "rivage", "gard"];
this.name= this.type.name+ NAME_SUFFIXES[Math.floor(rand() * NAME_SUFFIXES.length)]
}
setType() {
const types = Object.values(SETTLEMENT_TYPE);
const weightedTypes = [];
// Remplir le tableau pondéré en fonction des occurrences
types.forEach(type => {
const weight = Math.floor(type.spawnChance * 100);
for (let i = 0; i < weight; i++) {
weightedTypes.push(type);
}
});
// Sélectionner un type aléatoire dans le tableau pondéré
this.type = weightedTypes[Math.floor(Math.random() * weightedTypes.length)];
}
setPopulation() {
for (let i = 0; i < this.type.population; i++) {
//new NPC
}
}
// Méthode de l'objet
}
class Position{
constructor(x,y,h=0) {
this.x = x;
@ -329,12 +185,10 @@ document.addEventListener('DOMContentLoaded', () => {
this.position = new Position(x, y);
this.biome = null;
this.structure = null;
this.animal = null;
this.visibility = 0; // 0: Unseen, 1: Seen, 2: Visible
this.setBiome();
this.setElevation();
this.setStructure();
this.setEntity();
}
setBiome() {
@ -401,8 +255,12 @@ document.addEventListener('DOMContentLoaded', () => {
ctx.drawImage(swampSVG, -25, -5, 50, 30);
}
if (this.structure ) {
this.structure.setDesign(ctx);
if (this.structure) {
if (this.structure.type === 'village' && villageSVG) {
ctx.drawImage(villageSVG, -20, -16, 40, 40);
} else if (this.structure.type === 'city' && citySVG) {
ctx.drawImage(citySVG, -24, -28, 48, 48);
}
}
}
@ -424,35 +282,13 @@ document.addEventListener('DOMContentLoaded', () => {
}
setStructure(){
if (!this.biome || !this.biome.acceptStructure) return;
var rand = seededRandom(this.position.x * 13 + this.position.y * 59);
var structureChance = rand();
if (structureChance < 0.01 && this.biome.acceptStructure) {
this.structure=new structure(this.position);
}
}
setEntity(){
// a changer!
if(this.structure) {
const structureType = this.structure.type;
let job = JOB.VILLAGER;
if(structureType === STRUCTURE_TYPE.FARM) job = JOB.FARMER;
if(structureType === STRUCTURE_TYPE.CAMP) job = JOB.BANDIT;
for(let i = 0; i < structureType.population; i++) {
this.npc.push(new Npc(job,new Creature(job.name,null,1,null,null,this.position,'HUMAN',null,10,null),this,null ));
}
}
else {
if (this.biome) {
for (const key in ANIMAL_TYPES) {
const animalType = ANIMAL_TYPES[key];
if (animalType.biomes.includes(this.biome) && Math.random() < animalType.spawnChance) {
if( this.biome.movements.includes(animalType.movement)) {
this.animal.push(new Animal(animalType, this.position));
}
}
}
}
if (structureChance < 0.005) {
this.structure = { type: 'city', name: NAME_PREFIXES[Math.floor(rand() * NAME_PREFIXES.length)] + NAME_SUFFIXES[Math.floor(rand() * NAME_SUFFIXES.length)] };
} else if (structureChance < 0.02) {
this.structure = { type: 'village', name: NAME_PREFIXES[Math.floor(rand() * NAME_PREFIXES.length)] + NAME_SUFFIXES[Math.floor(rand() * NAME_SUFFIXES.length)] };
}
}
}
@ -526,7 +362,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
class Creature {
constructor(name,attributes,level,affinities,alignments,position,species,race,hp,items) {
constructor(name,attributes,level,affinities,alignments,tile,species,race,hp,items) {
this.name = name;
this.attributes = attributes;
this.level = level;
@ -535,88 +371,16 @@ document.addEventListener('DOMContentLoaded', () => {
this.alignments = alignments;
this.species = species;
this.race = race;
this.position=position;
this.tile=tile;
this.items=items;
this.hp=hp;
}
}
class Npc {
constructor(job,creature,settlement,equipments) {
this.job = job;
this.tile = creature.tile;
constructor(name, creature, settlement, equipments) {
this.creature = creature;
this.settlement = settlement;
this.lastMoveTime = 0;
this.moveCooldown = 3000 + Math.random() * 4000;
//f (!this.settlement){this.setSettlement()}
//if (!this.equipments){this.setEquipments()}
}
setEquipments() {
var i=0;
const items = Object.values(ITEMS);
const weightedTypes = [];
var compatibleItem=null;
for (const slot in SLOT) {
var slotChance = rand();
if (slotChance < 0.005) {
// Remplir le tableau pondéré en fonction des occurrences
items.forEach(item => {
if (ITEM_TYPE[item.itemType].slot.includes(slot)){
const weight = Math.floor(item.spawnChance * 100);
for (let i = 0; i < weight; i++) {
weightedTypes.push(item);
}
}
});
// Sélectionner un type aléatoire dans le tableau pondéré
compatibleItem = weightedTypes[Math.floor(Math.random() * weightedTypes.length)];
this.equipments[i]=new equipment(slot,compatibleItem);
}
};
}
update(currentTime, gameMap) {
if (currentTime - this.lastMoveTime > this.moveCooldown) {
this.move(gameMap);
this.lastMoveTime = currentTime;
}
}
move(gameMap) {
const wanderRadius = 3;
const possibleMoves = [];
for (let y = -wanderRadius; y <= wanderRadius; y++) {
for (let x = -wanderRadius; x <= wanderRadius; x++) {
const newX = this.settlement.position.x + x;
const newY = this.settlement.position.y + y;
if (newX >= 0 && newX < gameMap.size && newY >= 0 && newY < gameMap.size) {
const targetTile = gameMap.tiles[newY][newX];
if(targetTile.biome.movements.includes('walk') && !targetTile.structure) {
possibleMoves.push(targetTile);
}
}
}
}
if(possibleMoves.length > 0) {
this.tile = possibleMoves[Math.floor(Math.random() * possibleMoves.length)];
}
}
setDesign(ctx) {
if (!this.tile || this.tile.visibility !== 2) return;
const screenPos = this.tile.position.cartToIso();
const elevationHeight = this.tile.position.h * ELEVATION_STEP;
ctx.save();
ctx.translate(screenPos.x, screenPos.y - elevationHeight);
ctx.drawImage(npcSVG, -25, -50, 50, 60);
ctx.restore();
}
interact() {
const dialogue = this.type.dialogues[Math.floor(Math.random() * this.type.dialogues.length)];
return { name: this.job.name, text: dialogue };
this.equipments = equipments;
}
}
@ -625,13 +389,16 @@ document.addEventListener('DOMContentLoaded', () => {
this.creature=creature;
this.equipments=equipments;
}
get position() {
return this.creature.tile.position;
}
setDesign(ctx) {
const position = this.creature.position
if(!position) return;
const tile = this.creature.tile
if(!tile) return;
const screenPos = position.cartToIso();
const elevationHeight = position.h * ELEVATION_STEP;
const screenPos = tile.position.cartToIso();
const elevationHeight = tile.position.h * ELEVATION_STEP;
ctx.save();
ctx.translate(screenPos.x, screenPos.y - elevationHeight);
@ -644,12 +411,12 @@ document.addEventListener('DOMContentLoaded', () => {
ctx.restore();
}
move(dx, dy, gameMap) {
const newX = this.creature.position.x + dx;
const newY = this.creature.position.y + dy;
const newX = this.position.x + dx;
const newY = this.position.y + dy;
if (newX >= 0 && newX < gameMap.size && newY >= 0 && newY < gameMap.size) {
const targetTile = gameMap.tiles[newY][newX].position;
const targetTile = gameMap.tiles[newY][newX];
if (targetTile.biome && targetTile.biome.movements.includes('walk')) {
this.creature.position = targetTile;
this.creature.tile = targetTile;
}
}
}
@ -661,9 +428,27 @@ document.addEventListener('DOMContentLoaded', () => {
this.map = new Map(200);
this.currentTime=new Time();
this.animals = [];
this.npcs = [];
this.spawnAnimals();
}
spawnAnimals() {
console.time('Animal Spawning');
for (let y = 0; y < this.map.size; y++) {
for (let x = 0; x < this.map.size; x++) {
const tile = this.map.tiles[y][x];
if (tile.biome && tile.biome.movements.includes('walk')) {
for (const key in ANIMAL_TYPES) {
const animalType = ANIMAL_TYPES[key];
if (animalType.biomes.includes(tile.biome) && Math.random() < animalType.spawnChance) {
this.animals.push(new Animal(animalType, tile));
}
}
}
}
}
console.log(`Spawned ${this.animals.length} animals.`);
console.timeEnd('Animal Spawning');
}
}
class Camera {
constructor(x=0,y=0,canvas) {
@ -697,11 +482,12 @@ document.addEventListener('DOMContentLoaded', () => {
update(currentTime) {
this.handleMovement(currentTime);
this.updateVisibility();
// a changer!
this.world.animals.forEach(animal => animal.update(currentTime, this.world.map));
this.world.npcs.forEach(npc => npc.update(currentTime, this.world.map));
this.camera.setCamera(this.player.creature.position);
this.world.animals.forEach(animal => {
animal.update(currentTime, this.world.map);
});
this.camera.setCamera(this.player.position);
// Update all biome sprites
for (const key in Biome) {
@ -715,8 +501,8 @@ document.addEventListener('DOMContentLoaded', () => {
updateVisibility() {
const map = this.world.map;
const px = this.player.creature.position.x;
const py = this.player.creature.position.y;
const px = this.player.position.x;
const py = this.player.position.y;
const radius = VISION_RADIUS;
const radiusSq = radius * radius;
@ -748,7 +534,7 @@ document.addEventListener('DOMContentLoaded', () => {
spawnX = Math.floor(Math.random() * this.world.map.size);
spawnY = Math.floor(Math.random() * this.world.map.size);
} while (!this.world.map.tiles[spawnY][spawnX].biome || !this.world.map.tiles[spawnY][spawnX].biome.movements.includes('walk') );
this.player = new Player(new Creature('player',new Attributes(RACE.HUMAN),1,null,null,this.world.map.tiles[spawnY][spawnX].position,'human',RACE.HUMAN,10,null),);
this.player = new Player(new Creature('player',new Attributes(RACE.HUMAN),1,null,null,this.world.map.tiles[spawnY][spawnX],'human',RACE.HUMAN,10,null),);
this.updateVisibility();
}
setControls() {
@ -793,7 +579,6 @@ document.addEventListener('DOMContentLoaded', () => {
}
this.world.animals.forEach(animal => animal.setDesign(ctx));
this.world.npcs.forEach(npc => npc.setDesign(ctx));
this.player.setDesign(ctx);
ctx.restore();
@ -834,41 +619,6 @@ document.addEventListener('DOMContentLoaded', () => {
if (controls.right) { this.player.move(1, 0,this.world.map); moved = true; }
if(moved) lastMoveTime = currentTime;
}
handleInteraction() {
if (!controls.interact) return;
controls.interact = false; // Consume the action
const px = this.player.creature.position.x;
const py = this.player.creature.position.y;
let targetNpc = null;
for (const npc of this.world.npcs) {
const dx = Math.abs(npc.tile.position.x - px);
const dy = Math.abs(npc.tile.position.y - py);
if (dx <= 1 && dy <= 1) { // Check adjacent tiles
targetNpc = npc;
break;
}
}
if(targetNpc) {
const dialogueData = targetNpc.interact();
this.showDialogue(dialogueData.name, dialogueData.text);
}
}
showDialogue(name, text) {
const dialogueBox = document.getElementById('dialogue-box');
document.getElementById('dialogue-name').textContent = name;
document.getElementById('dialogue-text').textContent = text;
dialogueBox.classList.remove('hidden');
this.isDialogueActive = true;
}
hideDialogue() {
document.getElementById('dialogue-box').classList.add('hidden');
this.isDialogueActive = false;
}
}
@ -894,6 +644,22 @@ document.addEventListener('DOMContentLoaded', () => {
return "#"+("0"+R.toString(16)).slice(-2)+("0"+G.toString(16)).slice(-2)+("0"+B.toString(16)).slice(-2);
}
function createAnimatedSheet(width, height, frameCount, drawFrameFn) {
const sheetCanvas = document.createElement('canvas');
sheetCanvas.width = width;
sheetCanvas.height = height * frameCount;
const sheetCtx = sheetCanvas.getContext('2d');
sheetCtx.imageSmoothingEnabled = false;
for (let frame = 0; frame < frameCount; frame++) {
sheetCtx.save();
sheetCtx.translate(0, frame * height);
drawFrameFn(sheetCtx, frame, width, height);
sheetCtx.restore();
}
return sheetCanvas;
}
function drawGrasslandFrame(ctx, frame, width, height) {
const PIXEL_SCALE = 2;
const colors = ['#6A994E', '#588142', '#A5A450'];
@ -983,47 +749,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
function drawSwampFrame(ctx, frame, width, height) {
const colors = ['#526044', '#36402D', '#6A994E'];
ctx.fillStyle = colors[1];
ctx.beginPath();
ctx.moveTo(width / 2, 0); ctx.lineTo(width, height / 2); ctx.lineTo(width / 2, height); ctx.lineTo(0, height / 2);
ctx.closePath();
ctx.fill();
for (let i = 0; i < 3; i++) {
ctx.strokeStyle = colors[0];
ctx.lineWidth = 1;
ctx.beginPath();
const startY = (height / 4) * (i + 1);
const offset = (frame * 0.05) + i * 2.5;
ctx.moveTo(0, startY + Math.sin(offset) * 1);
for (let x = 0; x < width; x++) {
const y = startY + Math.sin(x * 0.1 + offset) * 1;
if (Math.abs(x - width / 2) / (width / 2) + Math.abs(y - height / 2) / (height / 2) < 1) {
ctx.lineTo(x, y);
}
}
ctx.stroke();
}
}
function drawBeachFrame(ctx, frame, width, height) {
const colors = ['#E9D9A1', '#D4C092', '#FFFFFF'];
ctx.fillStyle = colors[0];
ctx.beginPath();
ctx.moveTo(width / 2, 0); ctx.lineTo(width, height / 2); ctx.lineTo(width / 2, height); ctx.lineTo(0, height / 2);
ctx.closePath();
ctx.fill();
for (let i = 0; i < 10; i++) {
const x = Math.random() * width;
const y = Math.random() * height;
if (Math.abs(x - width / 2) / (width / 2) + Math.abs(y - height / 2) / (height / 2) > 0.9) continue;
ctx.fillStyle = colors[2];
ctx.fillRect(x, y, 1, 1);
}
}
function loadSvgAsImage(gElement) {
return new Promise((resolve, reject) => {
if (!gElement) return reject(new Error("SVG <g> element not found."));
@ -1048,18 +774,19 @@ document.addEventListener('DOMContentLoaded', () => {
canvas.height = canvas.parentElement.clientHeight;
try {
for (const key in Biome) {
if (Biome[key].design) { Biome[key].sprite = new Sprite(Biome[key]);}
}
Biome.GRASSLAND.sprite = new Sprite(createAnimatedSheet(TILE_WIDTH, TILE_HEIGHT, 4, drawGrasslandFrame), TILE_WIDTH, TILE_HEIGHT, 4, 200);
Biome.WATER_SHALLOW.sprite = new Sprite(createAnimatedSheet(TILE_WIDTH, TILE_HEIGHT, 6, drawWaterFrame), TILE_WIDTH, TILE_HEIGHT, 6, 150);
Biome.WATER_DEEP.sprite = new Sprite(createAnimatedSheet(TILE_WIDTH, TILE_HEIGHT, 8, drawDeepWaterFrame), TILE_WIDTH, TILE_HEIGHT, 8, 250);
Biome.MOUNTAIN.sprite = new Sprite(createAnimatedSheet(TILE_WIDTH, TILE_HEIGHT, 1, drawMountainFrame), TILE_WIDTH, TILE_HEIGHT, 1, 9999);
const assetIds = ['forest-svg', 'village-svg', 'city-svg', 'player-svg', 'enchanted-forest-svg', 'swamp-svg', 'wolf-pack-svg', 'boar-svg', 'bird-svg', 'farm-svg', 'camp-svg', 'npc-svg','house-svg','cult-svg','market-svg','mine-svg'];
const assetIds = ['forest-svg', 'village-svg', 'city-svg', 'player-svg', 'enchanted-forest-svg', 'swamp-svg', 'wolf-pack-svg', 'boar-svg'];
const assetElements = assetIds.map(id => document.getElementById(id));
[forestSVG, villageSVG, citySVG, playerSVG, enchantedForestSVG, swampSVG, wolfPackSVG, boarSVG, birdSVG, farmSVG, campSVG, npcSVG,houseSVG,cultSVG,marketSVG,mineSVG] = await Promise.all(
[forestSVG, villageSVG, citySVG, playerSVG, enchantedForestSVG, swampSVG, wolfPackSVG, boarSVG] = await Promise.all(
assetElements.map(el => loadSvgAsImage(el))
);
console.log("All assets loaded.");
let session = new Session();