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

with svg design

Browse source
This commit is contained in:
vesta 2025-08-30 14:41:29 +02:00
parent 1489f28899
commit 627ddd0520
2 changed files with 225 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

96
html/main.html
View file

@ -32,7 +32,103 @@
</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>

171
js/script.js
View file

@ -12,7 +12,6 @@ document.addEventListener('DOMContentLoaded', () => {
DESERT: { 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: { 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: { 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"];
@ -115,6 +114,8 @@ document.addEventListener('DOMContentLoaded', () => {
this.setElevation();
this.setStructure();
//this.setDesign(ctx);
//this.forestSvg=null;
//this.setSvg();
}
// Méthode de l'objet
@ -134,47 +135,51 @@ document.addEventListener('DOMContentLoaded', () => {
else this.biome = Biome.GRASSLAND;
}
}
setDesign(ctx){
setDesign(ctx,currentTime){
if (!this.biome) return;
const screenPos = this.position.cartToIso();
const elevationHeight = this.position.h * 8;
let baseColor=null;
ctx.save();
ctx.translate(screenPos.x, screenPos.y - elevationHeight);
const baseColor = this.biome.summerColor;
if (currentTime.season == 'winter') { baseColor = this.biome.winterColor;}
if (currentTime.season == 'summer') { baseColor = this.biome.summerColor;}
if (currentTime.season == 'fall') { baseColor = this.biome.fallColor;}
if (currentTime.season == 'autumn') { baseColor = this.biome.autumnColor;}
const shadowColor = shadeColor(baseColor, -30);
// Right Face
ctx.fillStyle = shadowColor;
ctx.beginPath();
ctx.moveTo(0, 32); ctx.lineTo(32, 16); ctx.lineTo(32, 16 + elevationHeight); ctx.lineTo(0, 32 + elevationHeight);
ctx.closePath();
ctx.fill();
// Left Face
ctx.fillStyle = shadeColor(shadowColor, -10);
ctx.beginPath();
ctx.moveTo(0, 32); ctx.lineTo(-32, 16); ctx.lineTo(-32, 16 + elevationHeight); ctx.lineTo(0, 32 + elevationHeight);
ctx.closePath();
ctx.fill();
// Top Face
if (this.biome==Biome.FOREST && forestSVG.complete) {
ctx.drawImage(forestSVG, -20, -16, 40, 48);
} else { // Fallback to circle
ctx.fillStyle = this.shadowColor; ctx.beginPath(); ctx.arc(0, TILE_HEIGHT / 2 - 6, 8, 0, Math.PI * 2); ctx.fill();
}
ctx.fillStyle = baseColor;
ctx.beginPath();
ctx.moveTo(0, 0); ctx.lineTo(32, 16); ctx.lineTo(0, 32); ctx.lineTo(-32, 16);
ctx.closePath();
ctx.fill();
if (this.structure && this.structure.type === 'village') {
ctx.fillStyle = '#D4A373';
ctx.fillRect(-8, -12, 16, 12);
ctx.fillStyle = '#8B4513';
ctx.beginPath();
ctx.moveTo(0, -22); ctx.lineTo(-10, -12); ctx.lineTo(10, -12);
ctx.closePath();
ctx.fill();
} else if (this.structure && this.structure.type === 'city') {
ctx.fillStyle = '#C0C0C0';
ctx.fillRect(-10, -20, 20, 20);
ctx.fillStyle = '#808080';
ctx.beginPath();
ctx.moveTo(-10, -20); ctx.lineTo(-12, -22); ctx.lineTo(22, -22); ctx.lineTo(20, -20);
ctx.closePath();
ctx.fill();
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);
}
}
ctx.restore();
}
@ -330,14 +335,32 @@ document.addEventListener('DOMContentLoaded', () => {
}
class Player {
constructor(creature,equipments) {
constructor(creature,equipments,playerImage) {
this.creature=creature;
this.equipments=equipments;
this.color = '#E53E3E';
this.playerImage = playerImage ;
//this.setSvg();
}
get position() {
return this.creature.tile.position;
}
setSvg(){
const svgString = `<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="wolfFurGradient" 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="wolfShadowGradient" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#2D3748;" /><stop offset="100%" style="stop-color:#1A202C;" /></linearGradient></defs><g><path d="M 50 10 L 90 40 L 80 95 L 20 95 L 10 40 Z" fill="url(#wolfFurGradient)" /><path d="M 50 10 L 70 45 L 50 55 L 30 45 Z" fill="url(#wolfShadowGradient)" /><path d="M 20 95 Q 40 70 50 75 Q 60 70 80 95 L 75 98 L 25 98 Z" fill="#2D3748" /><path d="M 25 42 L 10 20 L 35 30 Z" fill="#4A5568" stroke="#1A202C" stroke-width="1"/><path d="M 75 42 L 90 20 L 65 30 Z" fill="#4A5568" stroke="#1A202C" stroke-width="1"/><path d="M 28 38 L 18 25 L 35 32 Z" fill="#2D3748"/><path d="M 72 38 L 82 25 L 65 32 Z" fill="#2D3748"/><path d="M 50 50 L 65 80 L 50 90 L 35 80 Z" fill="#4A5568" /><path d="M 50 85 L 55 95 L 45 95 Z" fill="black" /><path d="M 35 45 Q 40 42 45 45 Q 40 48 35 45 Z" fill="#FBBF24" /><path d="M 65 45 Q 60 42 55 45 Q 60 48 65 45 Z" fill="#FBBF24" /><circle cx="39" cy="45" r="1" fill="black" /><circle cx="61" cy="45" r="1" fill="black" /><path d="M 18 50 L 10 40 L 25 55 Z" fill="#4A5568" /><path d="M 82 50 L 90 40 L 75 55 Z" fill="#4A5568" /><path d="M 20 65 L 5 55 L 22 70 Z" fill="#4A5568" /><path d="M 80 65 L 95 55 L 78 70 Z" fill="#4A5568" /></g></svg>`;
const svgBase64 = "data:image/svg+xml;base64," + btoa(svgString);
this.playerImage = new Image();
this.playerImage.src = svgBase64;
this.playerImage.onload = () => {
console.log("Player SVG loaded");
loadingScreen.style.display = 'none';
};
this.playerImage.onerror = () => {
console.error("Failed to load player SVG");
loadingScreen.style.display = 'none';
};
}
setDesign(ctx) {
const tile = this.creature.tile
if(!tile) return;
@ -347,9 +370,12 @@ document.addEventListener('DOMContentLoaded', () => {
ctx.save();
ctx.translate(screenPos.x, screenPos.y - elevationHeight);
ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'; ctx.beginPath(); ctx.ellipse(0, TILE_HEIGHT / 2 + 2, 6, 3, 0, 0, Math.PI * 2); ctx.fill();
ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(0, TILE_HEIGHT / 2 - 6, 8, 0, Math.PI * 2); ctx.fill();
ctx.strokeStyle = shadeColor(this.color, -30); ctx.lineWidth = 2; ctx.stroke();
if (this.playerImage && this.playerImage.complete) {
ctx.drawImage(this.playerImage, -25, -50, 50, 60);
} else { // Fallback to circle
ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(0, TILE_HEIGHT / 2 - 6, 8, 0, Math.PI * 2); ctx.fill();
}
ctx.restore();
}
move(dx, dy, gameMap) {
@ -469,12 +495,6 @@ document.addEventListener('DOMContentLoaded', () => {
constructor(name) {
this.name = name;
this.map = new Map(200)
let spawnX, spawnY;
do {
spawnX = Math.floor(Math.random() * this.map.size);
spawnY = Math.floor(Math.random() * this.map.size);
} while (!this.map.tiles[spawnY][spawnX].biome || !this.map.tiles[spawnY][spawnX].biome.movements.includes('walk') );
this.player = new Player(new Creature('player',new Attributes(RACE.HUMAN),1,null,null,this.map.tiles[spawnY][spawnX],'human',RACE.HUMAN,10,null),null);
this.currentTime=new Time();
}
// Méthode de l'objet
@ -506,14 +526,24 @@ document.addEventListener('DOMContentLoaded', () => {
this.camera = new Camera(0,0, canvas);
this.setControls();
this.loop = this.loop.bind(this);
this.player=null;
this.setInitial();
}
// Méthode de l'objet
loop(currentTime) {
this.handleMovement(currentTime);
this.camera.setCamera(this.world.player.position);
this.camera.setCamera(this.player.position);
this.setDesign();
requestAnimationFrame(this.loop);
}
setInitial(){
let spawnX, spawnY;
do {
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],'human',RACE.HUMAN,10,null),);
}
setControls() {
document.addEventListener('keydown', e => {
const key = e.key.toLowerCase();
@ -544,8 +574,8 @@ document.addEventListener('DOMContentLoaded', () => {
ctx.save();
ctx.translate(this.camera.x, this.camera.y);
for (let y = 0; y < this.world.map.size; y++) for (let x = 0; x < this.world.map.size; x++) this.world.map.tiles[y][x].setDesign(ctx);
this.world.player.setDesign(ctx);
for (let y = 0; y < this.world.map.size; y++) for (let x = 0; x < this.world.map.size; x++) this.world.map.tiles[y][x].setDesign(ctx,this.world.currentTime);
this.player.setDesign(ctx);
this.world.currentTime.setDesign(ctx);
ctx.fillRect(this.camera.x * -1, this.camera.y * -1, canvas.width, canvas.height);
ctx.globalAlpha = 1.0;
@ -557,10 +587,10 @@ document.addEventListener('DOMContentLoaded', () => {
handleMovement(currentTime) {
if (currentTime - lastMoveTime < 150) return;
let moved = false;
if (controls.up) { this.world.player.move(0, -1,this.world.map); moved = true; }
if (controls.down) { this.world.player.move(0, 1,this.world.map); moved = true; }
if (controls.left) { this.world.player.move(-1, 0,this.world.map); moved = true; }
if (controls.right) { this.world.player.move(1, 0,this.world.map); moved = true; }
if (controls.up) { this.player.move(0, -1,this.world.map); moved = true; }
if (controls.down) { this.player.move(0, 1,this.world.map); moved = true; }
if (controls.left) { this.player.move(-1, 0,this.world.map); moved = true; }
if (controls.right) { this.player.move(1, 0,this.world.map); moved = true; }
if(moved) lastMoveTime = currentTime;
}
}
@ -577,28 +607,81 @@ document.addEventListener('DOMContentLoaded', () => {
const TILE_WIDTH = 64;
const TILE_HEIGHT = 32;
const ELEVATION_STEP = TILE_HEIGHT / 4;
let forestSVG, villageSVG, citySVG, playerSVG;
function seededRandom(seed) {
let s = seed;
return () => { s = (s * 9301 + 49297) % 233280; return s / 233280.0; };
}
function loadSvgAsImage(gElement) {
return new Promise((resolve, reject) => {
if (!gElement) {
return reject(new Error("SVG <g> element not found."));
}
const viewBox = gElement.getAttribute('viewBox') || '0 0 100 100';
// Create a new, standalone <svg> element in memory
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('viewBox', viewBox);
// Clone the content of the <g> element into the new <svg>
svg.innerHTML = gElement.innerHTML;
const serializer = new XMLSerializer();
const svgString = serializer.serializeToString(svg);
const svgBlob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
const url = URL.createObjectURL(svgBlob);
const img = new Image();
img.onload = () => {
URL.revokeObjectURL(url);
resolve(img);
};
img.onerror = (err) => {
URL.revokeObjectURL(url);
reject(new Error('Failed to load SVG as image: ' + err.type));
};
img.src = url;
});
}
function shadeColor(c, p) {
let R=parseInt(c.substring(1,3),16),G=parseInt(c.substring(3,5),16),B=parseInt(c.substring(5,7),16);R=parseInt(R*(100+p)/100);G=parseInt(G*(100+p)/100);B=parseInt(B*(100+p)/100);R=(R<255)?R:255;G=(G<255)?G:255;B=(B<255)?B:255;
return "#"+("0"+R.toString(16)).slice(-2)+("0"+G.toString(16)).slice(-2)+("0"+B.toString(16)).slice(-2);
}
function initializeGame() {
async function initializeGame() {
canvas.width = canvas.parentElement.clientWidth;
canvas.height = canvas.parentElement.clientHeight;
let session=new Session();
isGameReady = true;
loadingScreen.style.display = 'none';
session.loop();
try {
// Load SVG assets from HTML and convert them to Image objects
const forestElement = document.getElementById('forest-svg');
const villageElement = document.getElementById('village-svg');
const cityElement = document.getElementById('city-svg');
const playerElement = document.getElementById('player-svg');
[forestSVG, villageSVG, citySVG, playerSVG] = await Promise.all([
loadSvgAsImage(forestElement),
loadSvgAsImage(villageElement),
loadSvgAsImage(cityElement),
loadSvgAsImage(playerElement)
]);
console.log("All SVG assets loaded as images.");
let session = new Session();
loadingScreen.style.display = 'none';
session.loop();
} catch (error) {
console.error("Failed to load SVG assets:", error);
loadingScreen.innerHTML = "Error loading assets. Please refresh.";
}
}
initializeGame();
})