phase 11 part1

src/utils/TextureGenerator.js

@@ -320,12 +320,102 @@ class TextureGenerator {
 
     static createGravestoneSprite(scene, key = 'gravestone') {
         if (scene.textures.exists(key)) return;
-        const canvas = scene.textures.createCanvas(key, 32, 32);
+        const canvas = scene.textures.createCanvas(key, 48, 64);
         const ctx = canvas.getContext();
-        ctx.clearRect(0, 0, 32, 32);
-        ctx.fillStyle = '#808080';
-        ctx.fillRect(8, 8, 16, 24);
-        ctx.beginPath(); ctx.arc(16, 8, 8, Math.PI, 0); ctx.fill();
+
+        // Clear with transparency
+        ctx.clearRect(0, 0, 48, 64);
+
+        // Stone base (darker gray)
+        ctx.fillStyle = '#4A4A4A';
+        ctx.fillRect(14, 52, 20, 8); // Base platform
+
+        // Main gravestone body (gray stone)
+        ctx.fillStyle = '#707070';
+        ctx.fillRect(16, 24, 16, 28); // Tall rectangle
+
+        // Rounded top
+        ctx.beginPath();
+        ctx.arc(24, 24, 8, Math.PI, 0, false);
+        ctx.fill();
+
+        // Moss/weathering effect (dark green patches)
+        ctx.fillStyle = '#2D5016';
+        ctx.fillRect(17, 30, 3, 4);
+        ctx.fillRect(28, 35, 2, 3);
+        ctx.fillRect(19, 45, 4, 3);
+
+        // Cracks (dark lines)
+        ctx.fillStyle = '#3A3A3A';
+        ctx.fillRect(20, 28, 1, 10); // Vertical crack
+        ctx.fillRect(27, 32, 1, 8);
+
+        // Cross/RIP symbol (lighter gray)
+        ctx.fillStyle = '#909090';
+        // Vertical bar
+        ctx.fillRect(23, 32, 2, 8);
+        // Horizontal bar
+        ctx.fillRect(21, 34, 6, 2);
+
+        // Shadow (semi-transparent black)
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
+        ctx.ellipse(24, 60, 10, 3, 0, 0, Math.PI * 2);
+        ctx.fill();
+
+        canvas.refresh();
+    }
+
+    static createFenceSprite(scene, key = 'fence_full') {
+        if (scene.textures.exists(key)) return;
+        const canvas = scene.textures.createCanvas(key, 48, 48);
+        const ctx = canvas.getContext();
+
+        // Clear with transparency
+        ctx.clearRect(0, 0, 48, 48);
+
+        // Wood color (brown)
+        const woodDark = '#6B4423';
+        const woodLight = '#8B5A3C';
+
+        // Vertical posts (3 posts)
+        for (let i = 0; i < 3; i++) {
+            const x = 8 + i * 16;
+
+            // Main post
+            ctx.fillStyle = woodLight;
+            ctx.fillRect(x, 8, 6, 32);
+
+            // Dark side (shading)
+            ctx.fillStyle = woodDark;
+            ctx.fillRect(x + 5, 8, 1, 32);
+
+            // Top point (fence picket style)
+            ctx.fillStyle = woodLight;
+            ctx.beginPath();
+            ctx.moveTo(x, 8);
+            ctx.lineTo(x + 3, 4);
+            ctx.lineTo(x + 6, 8);
+            ctx.fill();
+        }
+
+        // Horizontal planks (2 planks)
+        ctx.fillStyle = woodLight;
+        ctx.fillRect(4, 16, 40, 4); // Top plank
+        ctx.fillRect(4, 28, 40, 4); // Bottom plank
+
+        // Plank shading
+        ctx.fillStyle = woodDark;
+        ctx.fillRect(4, 19, 40, 1); // Top plank shadow
+        ctx.fillRect(4, 31, 40, 1); // Bottom plank shadow
+
+        // Wood grain (subtle lines)
+        ctx.fillStyle = 'rgba(107, 68, 35, 0.3)';
+        for (let i = 0; i < 3; i++) {
+            const x = 8 + i * 16;
+            ctx.fillRect(x + 1, 10, 1, 25);
+            ctx.fillRect(x + 3, 12, 1, 20);
+        }
+
         canvas.refresh();
     }
 
@@ -646,6 +736,7 @@ class TextureGenerator {
         TextureGenerator.createCornSprites(this.scene); // Added Corn
 
         TextureGenerator.createGravestoneSprite(this.scene);
+        TextureGenerator.createFenceSprite(this.scene); // Procedural fence with transparency
         TextureGenerator.createToolSprites(this.scene);
         TextureGenerator.createItemSprites(this.scene);
         TextureGenerator.createScooterSprite(this.scene, 'scooter', false);
@@ -661,6 +752,8 @@ class TextureGenerator {
         TextureGenerator.createMushroomSprite(this.scene, 'mushroom_brown', '#8B4513', '#FFE4C4');
         TextureGenerator.createFallenLogSprite(this.scene, 'fallen_log');
         TextureGenerator.createPuddleSprite(this.scene, 'puddle');
+        TextureGenerator.createFurnaceSprite(this.scene, 'furnace');
+        TextureGenerator.createMintSprite(this.scene, 'mint');
     }
 
     static createPathStoneSprite(scene, key = 'path_stone') {
@@ -967,6 +1060,29 @@ class TextureGenerator {
         }
     }
 
+    static createFurnaceSprite(scene, key = 'furnace') {
+        if (scene.textures.exists(key)) return;
+        const graphics = scene.make.graphics({ x: 0, y: 0, add: false });
+        // Furnace block (gray)
+        graphics.fillStyle(0x555555, 1);
+        graphics.fillRect(8, 14, 16, 18);
+        graphics.fillStyle(0x333333, 1);
+        graphics.fillRect(12, 22, 8, 6); // Hole
+        graphics.fillStyle(0xffaa00, 1);
+        graphics.fillRect(14, 24, 4, 3); // Embers
+        graphics.generateTexture(key, 32, 32);
+    }
+
+    static createMintSprite(scene, key = 'mint') {
+        if (scene.textures.exists(key)) return;
+        const graphics = scene.make.graphics({ x: 0, y: 0, add: false });
+        graphics.fillStyle(0x777799, 1); // Steel blue
+        graphics.fillRect(6, 12, 20, 20);
+        graphics.fillStyle(0xffd700, 1); // Gold coin icon
+        graphics.fillCircle(16, 18, 5);
+        graphics.generateTexture(key, 32, 32);
+    }
+
     constructor(scene) {
         this.scene = scene;
     }