From 627ddd05208a1bf4134379a8bacd586139c9a219 Mon Sep 17 00:00:00 2001
From: vesta <den.lemaire@gmail.com>
Date: Sat, 30 Aug 2025 14:41:29 +0200
Subject: [PATCH] with svg design

---
 html/main.html |  96 +++++++++++++++++++++++++++
 js/script.js   | 175 ++++++++++++++++++++++++++++++++++++-------------
 2 files changed, 225 insertions(+), 46 deletions(-)
diff --git a/html/main.html b/html/main.html
index 47c27a4..1a31d67 100644
--- a/html/main.html
+++ b/html/main.html
@@ -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>
diff --git a/js/script.js b/js/script.js
index 7056cb3..e253dd2 100644
--- a/js/script.js
+++ b/js/script.js
@@ -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();
 })
\ No newline at end of file
