✨ implement unified tile system (Issue #14)

- Tree seedlings: plant tree_seed on grass via farming tool; two-stage
  growth (sprout → sapling → young tree, ~1 min/stage); matures into
  a harvestable FOREST resource tile
- Tile recovery: Nisse chops start a 5-min DARK_GRASS→GRASS timer;
  terrain canvas updated live via WorldSystem.refreshTerrainTile()
- New TreeSeedlingSystem manages sprites, growth ticking, maturation
- BootScene generates seedling_0/1/2 textures procedurally
- FarmingSystem adds tree_seed to tool cycle (F key)
- Stockpile panel shows tree_seed (default: 5); panel height adjusted
- StateManager v5: treeSeedlings + tileRecovery in WorldState
- WorldSystem uses CanvasTexture for live single-pixel updates

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/systems/FarmingSystem.ts

@@ -5,15 +5,16 @@ import type { CropKind, CropState, ItemId } from '../types'
 import { stateManager } from '../StateManager'
 import type { LocalAdapter } from '../NetworkAdapter'
 
-export type FarmingTool = 'none' | 'hoe' | 'wheat_seed' | 'carrot_seed' | 'water'
+export type FarmingTool = 'none' | 'hoe' | 'wheat_seed' | 'carrot_seed' | 'tree_seed' | 'water'
 
-const TOOL_CYCLE: FarmingTool[] = ['none', 'hoe', 'wheat_seed', 'carrot_seed', 'water']
+const TOOL_CYCLE: FarmingTool[] = ['none', 'hoe', 'wheat_seed', 'carrot_seed', 'tree_seed', 'water']
 
 const TOOL_LABELS: Record<FarmingTool, string> = {
   none:        '— None',
   hoe:         '⛏  Hoe  (till grass)',
   wheat_seed:  '🌾 Wheat Seeds',
   carrot_seed: '🥕 Carrot Seeds',
+  tree_seed:   '🌲 Tree Seeds (plant on grass)',
   water:       '💧 Watering Can',
 }
 
@@ -30,6 +31,14 @@ export class FarmingSystem {
   onToolChange?: (tool: FarmingTool, label: string) => void
   /** Emitted for toast notifications */
   onMessage?: (msg: string) => void
+  /**
+   * Called when the player uses the tree_seed tool on a tile.
+   * @param tileX - Target tile column
+   * @param tileY - Target tile row
+   * @param underlyingTile - The tile type at that position
+   * @returns true if planting succeeded, false if validation failed
+   */
+  onPlantTreeSeed?: (tileX: number, tileY: number, underlyingTile: TileType) => boolean
 
   constructor(scene: Phaser.Scene, adapter: LocalAdapter) {
     this.scene = scene
@@ -87,9 +96,27 @@ export class FarmingSystem {
     const state = stateManager.getState()
     const tile = state.world.tiles[tileY * 512 + tileX] as TileType
 
-    if (this.currentTool === 'hoe')         this.tillSoil(tileX, tileY, tile)
-    else if (this.currentTool === 'water')  this.waterTile(tileX, tileY, tile)
-    else                                    this.plantCrop(tileX, tileY, tile, this.currentTool.replace('_seed', '') as CropKind)
+    if (this.currentTool === 'hoe')            this.tillSoil(tileX, tileY, tile)
+    else if (this.currentTool === 'water')     this.waterTile(tileX, tileY, tile)
+    else if (this.currentTool === 'tree_seed') this.plantTreeSeed(tileX, tileY, tile)
+    else                                       this.plantCrop(tileX, tileY, tile, this.currentTool.replace('_seed', '') as CropKind)
+  }
+
+  /**
+   * Delegates tree-seedling planting to the registered callback (TreeSeedlingSystem).
+   * Only works on GRASS or DARK_GRASS tiles. Shows a toast on success or failure.
+   * @param tileX - Target tile column
+   * @param tileY - Target tile row
+   * @param tile  - Current tile type at that position
+   */
+  private plantTreeSeed(tileX: number, tileY: number, tile: TileType): void {
+    if (tile !== TileType.GRASS && tile !== TileType.DARK_GRASS) {
+      this.onMessage?.('Plant tree seeds on grass!')
+      return
+    }
+    const ok = this.onPlantTreeSeed?.(tileX, tileY, tile)
+    if (ok === false) this.onMessage?.('No tree seeds, or tile is occupied!')
+    else if (ok)      this.onMessage?.('Tree seed planted! 🌱 (~2 min to grow)')
   }
 
   private tillSoil(tileX: number, tileY: number, tile: TileType): void {

src/systems/ResourceSystem.ts

@@ -76,6 +76,16 @@ export class ResourceSystem {
     this.removeSprite(id)
   }
 
+  /**
+   * Spawns a sprite for a resource that was created at runtime
+   * (e.g. a tree grown from a seedling). The resource must already be
+   * present in the game state when this is called.
+   * @param node - The resource node to render
+   */
+  public spawnResourcePublic(node: ResourceNodeState): void {
+    this.spawnSprite(node)
+  }
+
   /** Called when WorldSystem changes a tile (e.g. after tree removed) */
   syncTileChange(tileX: number, tileY: number, worldSystem: { setTile: (x: number, y: number, type: TileType) => void }): void {
     const state = stateManager.getState()

src/systems/TreeSeedlingSystem.ts

@@ -0,0 +1,131 @@
+import Phaser from 'phaser'
+import { TILE_SIZE, TREE_SEEDLING_STAGE_MS } from '../config'
+import { TileType, PLANTABLE_TILES } from '../types'
+import type { TreeSeedlingState } from '../types'
+import { stateManager } from '../StateManager'
+import type { LocalAdapter } from '../NetworkAdapter'
+import type { WorldSystem } from './WorldSystem'
+
+export class TreeSeedlingSystem {
+  private scene: Phaser.Scene
+  private adapter: LocalAdapter
+  private worldSystem: WorldSystem
+  private sprites = new Map<string, Phaser.GameObjects.Image>()
+
+  /**
+   * @param scene       - The Phaser scene this system belongs to
+   * @param adapter     - Network adapter for dispatching state actions
+   * @param worldSystem - Used to refresh the terrain canvas when a seedling matures
+   */
+  constructor(scene: Phaser.Scene, adapter: LocalAdapter, worldSystem: WorldSystem) {
+    this.scene = scene
+    this.adapter = adapter
+    this.worldSystem = worldSystem
+  }
+
+  /** Spawns sprites for all seedlings that exist in the saved state. */
+  create(): void {
+    const state = stateManager.getState()
+    for (const s of Object.values(state.world.treeSeedlings)) {
+      this.spawnSprite(s)
+    }
+  }
+
+  /**
+   * Ticks all seedling growth timers and handles stage changes.
+   * Stage 0→1: updates the sprite to the sapling texture.
+   * Stage 1→2: removes the seedling, spawns a tree resource, and updates the terrain canvas.
+   * @param delta - Frame delta in milliseconds
+   */
+  update(delta: number): void {
+    const advanced = stateManager.tickSeedlings(delta)
+    for (const id of advanced) {
+      const state = stateManager.getState()
+      const seedling = state.world.treeSeedlings[id]
+      if (!seedling) continue
+
+      if (seedling.stage === 2) {
+        // Fully mature: become a FOREST tile and a real tree resource
+        const { tileX, tileY } = seedling
+        this.removeSprite(id)
+        this.adapter.send({ type: 'REMOVE_TREE_SEEDLING', seedlingId: id })
+        this.adapter.send({ type: 'CHANGE_TILE', tileX, tileY, tile: TileType.FOREST })
+        this.worldSystem.refreshTerrainTile(tileX, tileY, TileType.FOREST)
+
+        const resourceId = `tree_grown_${tileX}_${tileY}_${Date.now()}`
+        this.adapter.send({
+          type: 'SPAWN_RESOURCE',
+          resource: { id: resourceId, tileX, tileY, kind: 'tree', hp: 3 },
+        })
+      } else {
+        // Stage 0→1: update sprite to sapling
+        const sprite = this.sprites.get(id)
+        if (sprite) sprite.setTexture(`seedling_${seedling.stage}`)
+      }
+    }
+  }
+
+  /**
+   * Attempts to plant a tree seedling on a grass tile.
+   * Validates that the stockpile has at least one tree_seed, the tile type is
+   * plantable (GRASS or DARK_GRASS), and no other object occupies the tile.
+   * @param tileX          - Target tile column
+   * @param tileY          - Target tile row
+   * @param underlyingTile - The current tile type (stored on the seedling for later restoration)
+   * @returns true if the seedling was planted, false if validation failed
+   */
+  plantSeedling(tileX: number, tileY: number, underlyingTile: TileType): boolean {
+    const state = stateManager.getState()
+
+    if ((state.world.stockpile.tree_seed ?? 0) <= 0) return false
+    if (!PLANTABLE_TILES.has(underlyingTile)) return false
+
+    const occupied =
+      Object.values(state.world.resources).some(r => r.tileX === tileX && r.tileY === tileY) ||
+      Object.values(state.world.buildings).some(b => b.tileX === tileX && b.tileY === tileY) ||
+      Object.values(state.world.crops).some(c => c.tileX === tileX && c.tileY === tileY) ||
+      Object.values(state.world.treeSeedlings).some(s => s.tileX === tileX && s.tileY === tileY)
+
+    if (occupied) return false
+
+    const id = `seedling_${tileX}_${tileY}_${Date.now()}`
+    const seedling: TreeSeedlingState = {
+      id, tileX, tileY,
+      stage: 0,
+      stageTimerMs: TREE_SEEDLING_STAGE_MS,
+      underlyingTile,
+    }
+
+    this.adapter.send({ type: 'PLANT_TREE_SEED', seedling })
+    this.spawnSprite(seedling)
+    return true
+  }
+
+  /**
+   * Creates and registers the sprite for a seedling.
+   * @param s - Seedling state to render
+   */
+  private spawnSprite(s: TreeSeedlingState): void {
+    const x = (s.tileX + 0.5) * TILE_SIZE
+    const y = (s.tileY + 0.5) * TILE_SIZE
+    const key = `seedling_${Math.min(s.stage, 2)}`
+    const sprite = this.scene.add.image(x, y, key)
+      .setOrigin(0.5, 0.85)
+      .setDepth(5)
+    this.sprites.set(s.id, sprite)
+  }
+
+  /**
+   * Destroys the sprite for a seedling and removes it from the registry.
+   * @param id - Seedling ID
+   */
+  private removeSprite(id: string): void {
+    const s = this.sprites.get(id)
+    if (s) { s.destroy(); this.sprites.delete(id) }
+  }
+
+  /** Destroys all seedling sprites and clears the registry. */
+  destroy(): void {
+    for (const id of [...this.sprites.keys()]) this.removeSprite(id)
+  }
+}

src/systems/VillagerSystem.ts

@@ -276,6 +276,8 @@ export class VillagerSystem {
         this.adapter.send({ type: 'VILLAGER_HARVEST_RESOURCE', villagerId: v.id, resourceId: job.targetId })
         // Clear the FOREST tile so the area becomes passable for future pathfinding
         this.adapter.send({ type: 'CHANGE_TILE', tileX: res.tileX, tileY: res.tileY, tile: TileType.DARK_GRASS })
+        // Start recovery timer so DARK_GRASS reverts to GRASS after 5 minutes
+        this.adapter.send({ type: 'TILE_RECOVERY_START', tileX: res.tileX, tileY: res.tileY })
         this.resourceSystem.removeResource(job.targetId)
         this.addLog(v.id, '✓ Chopped tree (+2 wood)')
       }

src/systems/WorldSystem.ts

@@ -21,6 +21,7 @@ export class WorldSystem {
   private tileset!: Phaser.Tilemaps.Tileset
   private bgImage!: Phaser.GameObjects.Image
   private builtLayer!: Phaser.Tilemaps.TilemapLayer
+  private bgCanvasTexture!: Phaser.Textures.CanvasTexture
 
   /** @param scene - The Phaser scene this system belongs to */
   constructor(scene: Phaser.Scene) {
@@ -35,10 +36,8 @@ export class WorldSystem {
     const state = stateManager.getState()
 
     // --- Canvas background (1px per tile, scaled up, LINEAR filtered) ---
-    const canvas = document.createElement('canvas')
-    canvas.width = WORLD_TILES
-    canvas.height = WORLD_TILES
-    const ctx = canvas.getContext('2d')!
+    const canvasTexture = this.scene.textures.createCanvas('terrain_bg', WORLD_TILES, WORLD_TILES) as Phaser.Textures.CanvasTexture
+    const ctx = canvasTexture.context
 
     for (let y = 0; y < WORLD_TILES; y++) {
       for (let x = 0; x < WORLD_TILES; x++) {
@@ -48,12 +47,14 @@ export class WorldSystem {
       }
     }
 
-    this.scene.textures.addCanvas('terrain_bg', canvas)
+    canvasTexture.refresh()
+    this.bgCanvasTexture = canvasTexture
+
     this.bgImage = this.scene.add.image(0, 0, 'terrain_bg')
       .setOrigin(0, 0)
       .setScale(TILE_SIZE)
       .setDepth(0)
-    this.scene.textures.get('terrain_bg').setFilter(Phaser.Textures.FilterMode.LINEAR)
+    canvasTexture.setFilter(Phaser.Textures.FilterMode.LINEAR)
 
     // --- Built tile layer (sparse — only FLOOR, WALL, TILLED_SOIL, WATERED_SOIL) ---
     this.map = this.scene.make.tilemap({
@@ -157,6 +158,21 @@ export class WorldSystem {
     return state.world.tiles[tileY * WORLD_TILES + tileX] as TileType
   }
 
+  /**
+   * Updates a single tile's pixel on the background canvas and refreshes the GPU texture.
+   * Used when a natural tile changes at runtime (e.g. DARK_GRASS → GRASS after recovery,
+   * or GRASS → FOREST when a seedling matures).
+   * @param tileX - Tile column
+   * @param tileY - Tile row
+   * @param type  - New tile type to reflect visually
+   */
+  refreshTerrainTile(tileX: number, tileY: number, type: TileType): void {
+    const color = BIOME_COLORS[type] ?? '#0a2210'
+    this.bgCanvasTexture.context.fillStyle = color
+    this.bgCanvasTexture.context.fillRect(tileX, tileY, 1, 1)
+    this.bgCanvasTexture.refresh()
+  }
+
   /** Destroys the tilemap and background image. */
   destroy(): void {
     this.map.destroy()