document.addEventListener('DOMContentLoaded', () => { const Biome = { 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 }, 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 }, SNOWLAND: { 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: { 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 } } const NAME_PREFIXES = ["Chêne", "Sombre", "Pierre", "Haut", "Val", "Mur", "Guet", "Clair"]; const NAME_SUFFIXES = ["bourg", "fort", "ville", "mont", "port", "bois", "rivage", "gard"]; 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 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} } 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'] }, 'Bois': { name: 'Bois', itemType: 'craftMaterial', icon: '🌲',biome:['FOREST'],occurence:0.9}, 'stone': { name: 'Pierre', itemType: 'craftMaterial', icon: '🗿',biome:['MOUNTAIN'],occurence:0.4}, 'Herbes': { name: 'Herbes', itemType: 'craftMaterial', icon: '🌿',biome:['GRASSLAND'],occurence:0.4}, 'Cristaux Magiques': { name: ' enchantMaterial',icon: '💎',biome:['MOUNTAIN','ENCHANTED_FOREST'],occurence:0.005}, 'Fer': { name: 'Fer', itemType: 'craftMaterial', icon: '🔩',biome:['MOUNTAIN'],occurence:0.001}, 'Mushroom': { name: 'Champignons', itemType: 'craftMaterial', icon: '🍄',biome:['FOREST'],occurence:0.01}, 'gold': { name: 'Champignons', itemType: 'mercantMaterial', icon: '💰',biome:['MOUNTAIN','RIVER'],occurence:0.001} }; const StructureType = { TOWN: { name: 'Ville', population:15, icon: '🗡️', occurence:0.001,design: ` `}, VILLAGE: { name: 'Village', population:5, icon: '🗡️',occurence:0.005, design: ` `}, FARM: { name: 'Ferme', population:5, icon: '🗡️',occurence:0.010 }, CAMP:{ name: 'Campement', population:2, icon: '⛺',occurence:0.002 }, }; const MONSTER_TYPES = { GOBLIN: { name: 'Gobelin', icon: '👺', hp: 30, strength: 3, xp: 25, loot: { 'Or': 5 } }, ORC: { name: 'Orc', icon: '👹', hp: 60, strength: 6, xp: 50, loot: { 'Or': 15, 'Fer': 1 } }, }; const ANIMAL_TYPES = { WOLF: { name: 'Loup', icon: '🐺', hp: 20, strength: 4, xp: 15, loot: { 'Cuir': 1, 'Os': 1 }, design: ``}, BOAR: { name: 'Sanglier', icon: '🐗', hp: 25, strength: 5, xp: 20, loot: { 'Cuir': 2 } }, }; class Position{ constructor(x,y,h=0) { this.x = x; this.y = y; this.h = h; } setPosition(x, y, h=0) { this.x = x; this.y = y; this.h = h; } getPosition() { return { x: this.x, y: this.y, h: this.h }; } cartToIso() { return { x: (this.x - this.y) * 32, y: (this.x + this.y) * 16 } } // Méthode de l'objet } class Tile { constructor(x, y) { this.position = new Position(x, y); this.biome = null; this.structure = null; this.setBiome(); this.setElevation(); this.setStructure(); //this.setDesign(ctx); //this.forestSvg=null; //this.setSvg(); } // Méthode de l'objet setBiome() { let scale = 0.05; let eRaw = (simplex.noise2D(this.position.x * scale, this.position.y * scale) + 1) / 2; let tRaw = (simplex.noise2D(this.position.x * scale * 0.8, this.position.y * scale * 0.8) + 1) / 2; 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.35) this.biome = Biome.BEACH; else if (eRaw > 0.85) this.biome = Biome.SNOWMOUNTAIN; else if (eRaw > 0.75) this.biome = Biome.MOUNTAIN; else { if (tRaw < 0.3) this.biome = Biome.DESERT; else if (tRaw > 0.6) this.biome = (mRaw > 0.7) ? Biome.ENCHANTED_FOREST : Biome.FOREST; else this.biome = Biome.GRASSLAND; } } 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); 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) { 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(); } setExplored(explored) { this.explored=explored; } setElevation(){ if (!this.biome) { console.error("Impossible de définir l'élévation car le biome n'est pas défini pour la tuile", this.position); return; } this.position.h = Math.floor(Math.random() * (this.biome.maxElevation - this.biome.minElevation+ 1) + this.biome.minElevation); } setStructure(){ if (!this.biome) { console.error("Impossible de définir une structure car le biome n'est pas défini pour la tuile", this.position); return; } var rand = seededRandom(this.position.x * 13 + this.position.y * 59); var structureChance = rand(); if (structureChance < 0.005 && this.biome.acceptStructure) { this.structure = { type: 'city', name: NAME_PREFIXES[Math.floor(rand() * NAME_PREFIXES.length)] + NAME_SUFFIXES[Math.floor(rand() * NAME_SUFFIXES.length)], population: StructureType.TOWN.population + Math.floor(rand() * 150), buildings: ['Remparts', 'Place Forte (Château)', 'Grand Marché', 'Forge', 'Alchimiste', 'Enchanteur', 'Écurie', 'Ferme', 'Ferme', 'Ferme', 'Ferme', 'Ferme', 'Lieu de Culte', 'Nombreuses Maisons'] }; } else if (structureChance < 0.02 && this.biome.acceptStructure) { this.structure = { type: 'village', name: NAME_PREFIXES[Math.floor(rand() * NAME_PREFIXES.length)] + NAME_SUFFIXES[Math.floor(rand() * NAME_SUFFIXES.length)], population: StructureType.VILLAGE.population + Math.floor(rand() * 20), buildings: ['Maison du Chef', 'Marchand', 'Lieu de Culte', 'Ferme', 'Ferme', 'Plusieurs Maisons'] }; } if ( this.biome.acceptStructure && Math.random() < 0.2) { this.structure={type:'farm', name: 'farm', population: 2, buildings: []} // npcs.push({ x: nx, y: ny, homeX: loc.x, homeY: loc.y, workX: nx, workY: ny, type: 'farmer', icon: '🧑‍🌾' }); } } } class Map { constructor(size) { this.size = size; this.tiles = null this.initializeMap(); } initializeMap(){ console.time('Map Generation'); this.tiles = Array(this.size).fill(null).map((_, y) => Array(this.size).fill(null).map((_, x) => new Tile(x, y))); console.timeEnd('Map Generation'); } } class Time { constructor() { this.year = 812; this.month = 1; this.day = 13; this.season = 'winter'; this.hour = 12; this.daylight = true; this.minute=2 } tick(){ this.minute=(this.minute+1) % 60 if (this.minute==1) this.hour=(this.hour+1) % 24 if (this.hour==1) this.day=(this.day+1) % 30 if (this.day==1) {this.month=(this.month+1) % 12;} if (this.month==1) {this.year=(this.year+1); } if (this.month==6 && this.day==21) {this.season='summer'; } if (this.month==9 && this.day==21) {this.season='autumn'; } if (this.month==12 && this.day==21) {this.season='winter'; } if (this.month==3 && this.day==21) {this.season='fall'; } } wait(nbrHour){ for (let i = 0; i < nbrHour; i++) { this.tick(); } } setDesign(){ let overlayColor = 'rgba(0,0,0,0)'; let opacity = 0; if (this.hour > 20 || this.hour < 6) { // Nuit (20h -> 6h) overlayColor = '#000033'; opacity = 0.5; } else if (this.hour > 18) { // Soir (18h -> 20h) overlayColor = '#FF8C00'; opacity = 0.3 * ( ((this.hour/24) - 0.75) / 0.08 ); } else if (this.hour < 8) { // Matin (6h -> 8h) overlayColor = '#FFD700'; opacity = 0.3 * ( (0.33 - (this.hour/24) ) / 0.08 ); } ctx.fillStyle = overlayColor; ctx.globalAlpha = opacity; document.getElementById('time-display').textContent = `Jour ${this.day}, ${this.hour}:${this.minute}`; document.getElementById('season-display').textContent = this.season; } // Méthode de l'objet } class Attributes { constructor(race) { this.strength = race.strength; this.vitality = race.vitality; this.dexterity = race.dexterity; this.intelligence = race.intelligence; this.wisdom = race.wisdom; this.luck = race.luck; } // Méthode de l'objet } class Creature { constructor(name,attributes,level,affinities,alignments,tile,species,race,hp,items) { this.name = name; this.attributes = attributes; this.level = level; this.affinities = affinities; this.name = name; this.alignments = alignments; this.species = species; this.race = race; this.tile=tile; this.items=items; this.hp=hp; } fight(){ } // Méthode de l'objet } class Npc { constructor(name, creature, settlement, equipments) { this.creature = creature; this.settlement = settlement; this.equipments = equipments; } talk() { } steal() { } trade() { } // Méthode de l'objet } class Player { 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 = ``; 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; const screenPos = tile.position.cartToIso(); const elevationHeight = tile.position.h * 8; ctx.save(); ctx.translate(screenPos.x, screenPos.y - elevationHeight); 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) { 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]; if (targetTile.biome && targetTile.biome.movements.includes('walk')) { this.creature.tile = targetTile; } } } rename(name) { this.name = name; } equipItem(item,slot) { equipment.equip(item,slot); updateAttribute(); } } class Settlement { constructor(level, affinities, name, alignments, position, structures) { this.level = level; this.affinities = affinities; this.name = name; this.alignments = alignments; this.structures = structures; } // Méthode de l'objet } class Resource { constructor(resourceType, position) { this.resourceType = resourceType; this.position = position; } collect(tile){ } collect(creature){ // check if creature can collect // transfer resulting items creature.items[]=this.resourceType.item //end object } // Méthode de l'objet } class Equipment { constructor(item,slot) { this.item = item; this.slot = slot; } // Méthode de l'objet equip(slot) { //replace current equipment //check if compatible //check if equipable this.slot = slot; } unequip() { this.slot = null; } } class Soul { constructor(name,description) { this.name = name; this.description = description; } // Méthode de l'objet invoke() { // } } class Item { constructor(name,duration,itemType) { this.name = name; if (!Object.values(ItemType).includes(itemType)) { throw new Error('Item type invalide !'); } this.itemType = itemType; if (duration){ this.duration = itemType.duration } else { this.duration = duration } } // Méthode de l'objet throw() { // delete after x Tick } destroy() { } use(){ if (this.duration >1) { this.duration = this.duration-1 } else { this.destroy(); } } } class World { constructor(name) { this.name = name; this.map = new Map(200) this.currentTime=new Time(); } // Méthode de l'objet save() { } } class Camera { constructor(x=0,y=0,canvas) { this.x=x; this.y=y; this.canvas = canvas; } // Méthode de l'objet setCamera(position) { var target = position.cartToIso(); var perspective = position.h * ELEVATION_STEP; this.x = this.canvas.width / 2 - target.x; this.y = this.canvas.height / 2 - (target.y - perspective); } } class Session { constructor() { this.world = new World('Defiance'); 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.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(); if (key.startsWith('arrow')) { controls[key.replace('arrow', '')] = true; } else if (['w', 'z'].includes(key)) { controls.up = true; } else if (['s'].includes(key)) { controls.down = true; } else if (['a', 'q'].includes(key)) { controls.left = true; } else if (['d'].includes(key)) { controls.right = true; } }); document.addEventListener('keyup', e => { const key = e.key.toLowerCase(); if (key.startsWith('arrow')) { controls[key.replace('arrow', '')] = false; } else if (['w', 'z'].includes(key)) { controls.up = false; } else if (['s'].includes(key)) { controls.down = false; } else if (['a', 'q'].includes(key)) { controls.left = false; } else if (['d'].includes(key)) { controls.right = false; } }); const controlMap = { 'btn-up': 'up', 'btn-down': 'down', 'btn-left': 'left', 'btn-right': 'right' }; for (const [id, dir] of Object.entries(controlMap)) { const btn = document.getElementById(id); btn.addEventListener('touchstart', e => { e.preventDefault(); controls[dir] = true; }, { passive: false }); btn.addEventListener('touchend', e => { e.preventDefault(); controls[dir] = false; }); } } setDesign(){ ctx.clearRect(0, 0, canvas.width, canvas.height); 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.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; //drawFloatingTexts(); ctx.restore(); this.world.currentTime.tick(); } handleMovement(currentTime) { if (currentTime - lastMoveTime < 150) return; let moved = false; 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; } } const controls = { up: false, down: false, left: false, right: false }; const simplex = new SimplexNoise(); let lastMoveTime = 0; let isGameReady = false; const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const loadingScreen = document.getElementById('loading'); 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 element not found.")); } const viewBox = gElement.getAttribute('viewBox') || '0 0 100 100'; // Create a new, standalone 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 element into the new 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); } async function initializeGame() { canvas.width = canvas.parentElement.clientWidth; 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(); } catch (error) { console.error("Failed to load SVG assets:", error); loadingScreen.innerHTML = "Error loading assets. Please refresh."; } } initializeGame(); })