version alpha
This commit is contained in:
parent
627ddd0520
commit
af533ab399
4 changed files with 1188 additions and 149 deletions
255
js/script.js
255
js/script.js
|
|
@ -3,7 +3,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
WATER_DEEP: { 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: { 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: { 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: { 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 },
|
||||
GRASSLAND: { sprite:{frame:4,animationSpeed:200 }, 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: { 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: { 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: { 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 },
|
||||
|
|
@ -11,8 +11,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
SNOWMOUNTAIN: { 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: { 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 }
|
||||
SWAMP: { acceptStructure:false, movements:['fly'],affinities:[('water',0.6),('earth',0.2),('dark',0.2)],name: 'Marais', winterColor: '#15521eff', fallColor: '#15521eff', summerColor: '#15521eff', autumnColor: '#15521eff',maxElevation:1,minElevation:1 }
|
||||
}
|
||||
|
||||
let grasslandSheet;
|
||||
let grasslandFrame = 0;
|
||||
let lastGrassFrameTime = 0;
|
||||
|
||||
const NAME_PREFIXES = ["Chêne", "Sombre", "Pierre", "Haut", "Val", "Mur", "Guet", "Clair"];
|
||||
const NAME_SUFFIXES = ["bourg", "fort", "ville", "mont", "port", "bois", "rivage", "gard"];
|
||||
|
||||
|
|
@ -72,8 +77,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
};
|
||||
|
||||
const ANIMAL_TYPES = {
|
||||
WOLF: { name: 'Loup', icon: '🐺', hp: 20, strength: 4, xp: 15, loot: { 'Cuir': 1, 'Os': 1 }, design: `<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>`},
|
||||
BOAR: { name: 'Sanglier', icon: '🐗', hp: 25, strength: 5, xp: 20, loot: { 'Cuir': 2 } },
|
||||
WOLF: { name: 'Loup', svgAsset: () => wolfsSVG, hp: 20, strength: 4, xp: 15, loot: { 'Cuir': 1, 'Os': 1 }, biomes: [Biome.FOREST, Biome.MOUNTAIN, Biome.SNOWLAND], spawnChance: 0.01 },
|
||||
BOAR: { name: 'Sanglier', svgAsset: () => boarSVG, hp: 25, strength: 5, xp: 20, loot: { 'Cuir': 2 }, biomes: [Biome.FOREST, Biome.GRASSLAND], spawnChance: 0.02 },
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -126,6 +131,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
let mRaw = (simplex.noise2D(this.position.x * scale * 1.5, this.position.y * scale * 1.5) + 1) / 2;
|
||||
if (eRaw < 0.25) this.biome = Biome.WATER_DEEP;
|
||||
else if (eRaw < 0.3) this.biome = Biome.WATER_SHALLOW;
|
||||
else if (eRaw < 0.32) this.biome = Biome.SWAMP;
|
||||
else if (eRaw < 0.35) this.biome = Biome.BEACH;
|
||||
else if (eRaw > 0.85) this.biome = Biome.SNOWMOUNTAIN;
|
||||
else if (eRaw > 0.75) this.biome = Biome.MOUNTAIN;
|
||||
|
|
@ -147,8 +153,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
if (currentTime.season == 'fall') { baseColor = this.biome.fallColor;}
|
||||
if (currentTime.season == 'autumn') { baseColor = this.biome.autumnColor;}
|
||||
const shadowColor = shadeColor(baseColor, -30);
|
||||
|
||||
// Right Face
|
||||
|
||||
// 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);
|
||||
|
|
@ -161,25 +167,26 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
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) {
|
||||
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);
|
||||
}
|
||||
if (this.biome === Biome.FOREST && forestSVG) {
|
||||
ctx.drawImage(forestSVG, -25, -25, 50, 50);
|
||||
} else if (this.biome === Biome.ENCHANTED_FOREST && mforestSVG) {
|
||||
ctx.drawImage(mforestSVG, -25, -25, 50, 50);
|
||||
} else if (this.biome === Biome.SWAMP && swampSVG) {
|
||||
ctx.drawImage(swampSVG, -25, -5, 50, 30);
|
||||
}
|
||||
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();
|
||||
}
|
||||
|
|
@ -290,7 +297,54 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
// Méthode de l'objet
|
||||
|
||||
}
|
||||
|
||||
class Animal {
|
||||
constructor(type, tile) {
|
||||
this.type = type;
|
||||
this.tile = tile; // The tile the animal is currently on
|
||||
this.lastMoveTime = 0;
|
||||
this.moveCooldown = 2000 + Math.random() * 3000; // Move every 2-5 seconds
|
||||
}
|
||||
|
||||
update(currentTime, gameMap) {
|
||||
if (currentTime - this.lastMoveTime > this.moveCooldown) {
|
||||
this.move(gameMap);
|
||||
this.lastMoveTime = currentTime;
|
||||
this.moveCooldown = 2000 + Math.random() * 3000;
|
||||
}
|
||||
}
|
||||
|
||||
move(gameMap) {
|
||||
const possibleMoves = [
|
||||
{ dx: 0, dy: -1 }, { dx: 0, dy: 1 }, { dx: -1, dy: 0 }, { dx: 1, dy: 0 },
|
||||
];
|
||||
|
||||
const move = possibleMoves[Math.floor(Math.random() * possibleMoves.length)];
|
||||
const newX = this.tile.position.x + move.dx;
|
||||
const newY = this.tile.position.y + move.dy;
|
||||
|
||||
if (newX >= 0 && newX < gameMap.size && newY >= 0 && newY < gameMap.size) {
|
||||
const targetTile = gameMap.tiles[newY][newX];
|
||||
if (targetTile.biome && (targetTile.biome.movements.includes('walk') || targetTile.biome.movements.includes('climb')) && this.type.biomes.includes(targetTile.biome)) {
|
||||
this.tile = targetTile;
|
||||
}
|
||||
}
|
||||
}
|
||||
setDesign(ctx) {
|
||||
const svgImage = this.type.svgAsset();
|
||||
if (!this.tile || !svgImage) return;
|
||||
|
||||
const screenPos = this.tile.position.cartToIso();
|
||||
const elevationHeight = this.tile.position.h * 8;
|
||||
|
||||
const size = this.type.size || { w: 40, h: 40 };
|
||||
const offset = this.type.offset || { x: -20, y: -35 };
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(screenPos.x, screenPos.y - elevationHeight);
|
||||
ctx.drawImage(svgImage, offset.x, offset.y, size.w, size.h);
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
class Creature {
|
||||
constructor(name,attributes,level,affinities,alignments,tile,species,race,hp,items) {
|
||||
this.name = name;
|
||||
|
|
@ -339,27 +393,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
this.creature=creature;
|
||||
this.equipments=equipments;
|
||||
this.color = '#E53E3E';
|
||||
this.playerImage = playerImage ;
|
||||
//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
|
||||
|
|
@ -371,8 +410,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
ctx.save();
|
||||
ctx.translate(screenPos.x, screenPos.y - elevationHeight);
|
||||
|
||||
if (this.playerImage && this.playerImage.complete) {
|
||||
ctx.drawImage(this.playerImage, -25, -50, 50, 60);
|
||||
if (playerSVG && playerSVG.complete) {
|
||||
ctx.drawImage(playerSVG, -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();
|
||||
}
|
||||
|
|
@ -496,11 +535,31 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
this.name = name;
|
||||
this.map = new Map(200)
|
||||
this.currentTime=new Time();
|
||||
this.animals = [];
|
||||
this.setAnimals();
|
||||
}
|
||||
// Méthode de l'objet
|
||||
save() {
|
||||
|
||||
}
|
||||
setAnimals() {
|
||||
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 {
|
||||
|
|
@ -531,11 +590,17 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
}
|
||||
// Méthode de l'objet
|
||||
loop(currentTime) {
|
||||
this.updateAnimals(currentTime);
|
||||
this.handleMovement(currentTime);
|
||||
this.camera.setCamera(this.player.position);
|
||||
this.setDesign();
|
||||
requestAnimationFrame(this.loop);
|
||||
}
|
||||
updateAnimals(currentTime) {
|
||||
this.world.animals.forEach(animal => {
|
||||
animal.update(currentTime, this.world.map);
|
||||
});
|
||||
}
|
||||
setInitial(){
|
||||
let spawnX, spawnY;
|
||||
do {
|
||||
|
|
@ -575,6 +640,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
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.currentTime);
|
||||
this.world.animals.forEach(animal => animal.setDesign(ctx));
|
||||
this.player.setDesign(ctx);
|
||||
this.world.currentTime.setDesign(ctx);
|
||||
ctx.fillRect(this.camera.x * -1, this.camera.y * -1, canvas.width, canvas.height);
|
||||
|
|
@ -607,7 +673,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
const TILE_WIDTH = 64;
|
||||
const TILE_HEIGHT = 32;
|
||||
const ELEVATION_STEP = TILE_HEIGHT / 4;
|
||||
let forestSVG, villageSVG, citySVG, playerSVG;
|
||||
let forestSVG, villageSVG, citySVG, boarSVG,wolfsSVG,swampSVG, playerSVG,mforestSVG;
|
||||
|
||||
function seededRandom(seed) {
|
||||
let s = seed;
|
||||
|
|
@ -616,35 +682,35 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
|
||||
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;
|
||||
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) {
|
||||
|
|
@ -657,31 +723,40 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
canvas.height = canvas.parentElement.clientHeight;
|
||||
|
||||
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();
|
||||
|
||||
// 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');
|
||||
const boarElement = document.getElementById('boar-svg');
|
||||
const wolfsElement = document.getElementById('wolf-pack-svg');
|
||||
const swampElement = document.getElementById('swamp-svg');
|
||||
const manaForestElement = document.getElementById('enchanted-forest-svg');
|
||||
//const cityElement = document.getElementById('swamp-svg');
|
||||
|
||||
[forestSVG, villageSVG, citySVG, boarSVG,wolfsSVG,swampSVG, playerSVG,mforestSVG] = await Promise.all([
|
||||
loadSvgAsImage(forestElement),
|
||||
loadSvgAsImage(villageElement),
|
||||
loadSvgAsImage(cityElement),
|
||||
loadSvgAsImage(boarElement),
|
||||
loadSvgAsImage(wolfsElement),
|
||||
loadSvgAsImage(swampElement),
|
||||
loadSvgAsImage(playerElement),
|
||||
loadSvgAsImage(manaForestElement)
|
||||
]);
|
||||
|
||||
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.";
|
||||
console.error("Failed to load SVG assets:", error);
|
||||
loadingScreen.innerHTML = "Error loading assets. Please refresh.";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
initializeGame();
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue