`befc931`

lost track, updates

Authored by mfwolffe <wolffemf@dukes.jmu.edu> 3 months ago

SHA: befc9316cdf80fec49409e4a1c729f0a355b5e6c
Parents: 3fef8d6
Tree: 8b133bc

15 changed files

Status	File	+	-
A	`src/renderers/three/buildingPlacement.js`	338	0
A	`src/renderers/three/buildings.js`	484	0
M	`src/renderers/three/duck.js`	151	12
A	`src/renderers/three/gameState.js`	51	0
M	`src/renderers/three/index.js`	362	8
M	`src/renderers/three/koi.js`	261	32
M	`src/renderers/three/narwhal.js`	302	20
M	`src/renderers/three/octopus.js`	323	18
M	`src/renderers/three/pond.js`	209	3
A	`src/renderers/three/shop/dialogScripts.js`	270	0
A	`src/renderers/three/shop/dialogUI.js`	298	0
A	`src/renderers/three/shop/inventory.js`	152	0
A	`src/renderers/three/shop/items.js`	307	0
A	`src/renderers/three/shop/shopUI.js`	524	0
M	`src/renderers/three/sounds.js`	239	0

src/renderers/three/buildingPlacement.jsadded

++// Building placement system for dougk
++// Handles ghost preview, snap zones, and building instantiation
++
++import * as THREE from 'three'
++import { createBuilding, createGhostBuilding } from './buildings.js'
++import inventory from './shop/inventory.js'
++import { playPlaceBuilding } from './sounds.js'
++
++// Placement states
++const STATE = {
++  INACTIVE: 'inactive',
++  SELECTING: 'selecting'
++}
++
++export class PlacementManager {
++  constructor(scene, pond, camera, gradientMap) {
++    this.scene = scene
++    this.pond = pond
++    this.camera = camera
++    this.gradientMap = gradientMap
++
++    this.state = STATE.INACTIVE
++    this.currentBuildingType = null
++    this.ghostMesh = null
++    this.hoveredZone = null
++    this.placedBuildings = new THREE.Group()
++
++    this.raycaster = new THREE.Raycaster()
++    this.mouse = new THREE.Vector2()
++
++    // Invisible ground plane for raycasting (so ghost is always visible)
++    this.groundPlane = new THREE.Mesh(
++      new THREE.PlaneGeometry(50, 50),
++      new THREE.MeshBasicMaterial({ visible: false })
++    )
++    this.groundPlane.rotation.x = -Math.PI / 2
++    this.groundPlane.position.y = 0
++    scene.add(this.groundPlane)
++
++    // Building forbidden radius (for creature emergence)
++    this.buildingRadius = {
++      dock_wooden: 0.8,
++      fishing_hut: 0.9,
++      lighthouse: 0.5,
++      reeds: 0.4,
++      fence: 0.3,
++      onion_house: 0.6
++    }
++
++    scene.add(this.placedBuildings)
++
++    // Callbacks
++    this.onPlacementComplete = null
++    this.onPlacementCancel = null
++  }
++
++  // Start placement mode for a building type
++  startPlacement(buildingType, callbacks = {}) {
++    if (this.state !== STATE.INACTIVE) {
++      this.cancelPlacement()
++    }
++
++    this.currentBuildingType = buildingType
++    this.onPlacementComplete = callbacks.onComplete
++    this.onPlacementCancel = callbacks.onCancel
++
++    // Create ghost mesh (starts as invalid/red, visible immediately)
++    this.ghostMesh = createGhostBuilding(buildingType, this.gradientMap, false)
++    this.ghostMesh.visible = true
++    this.ghostMesh.position.set(0, 0, 0) // Will be updated on mouse move
++    this.scene.add(this.ghostMesh)
++
++    this.state = STATE.SELECTING
++    this.hoveredZone = null
++
++    return true
++  }
++
++  // Cancel current placement
++  cancelPlacement() {
++    if (this.ghostMesh) {
++      this.scene.remove(this.ghostMesh)
++      this.ghostMesh.traverse((child) => {
++        if (child.isMesh) {
++          child.geometry?.dispose()
++          child.material?.dispose()
++        }
++      })
++      this.ghostMesh = null
++    }
++
++    this.state = STATE.INACTIVE
++    this.currentBuildingType = null
++    this.hoveredZone = null
++
++    if (this.onPlacementCancel) {
++      this.onPlacementCancel()
++    }
++  }
++
++  // Update mouse position and ghost preview
++  onMouseMove(event, containerWidth, containerHeight) {
++    if (this.state !== STATE.SELECTING) return
++    if (!this.ghostMesh) return
++
++    // Update mouse coordinates
++    this.mouse.x = (event.clientX / containerWidth) * 2 - 1
++    this.mouse.y = -(event.clientY / containerHeight) * 2 + 1
++
++    // Raycast to invisible ground plane (always hits)
++    this.raycaster.setFromCamera(this.mouse, this.camera)
++    const intersects = this.raycaster.intersectObject(this.groundPlane)
++
++    if (intersects.length > 0) {
++      const point = intersects[0].point
++
++      // Find nearest valid zone
++      const nearestZone = this.pond.findNearestZone(
++        point.x,
++        point.z,
++        this.currentBuildingType
++      )
++
++      if (nearestZone) {
++        // Snap to zone - show green
++        this.hoveredZone = nearestZone
++        this.ghostMesh.position.set(nearestZone.x, 0, nearestZone.z)
++        this.ghostMesh.rotation.y = nearestZone.angle
++        this.updateGhostColor(true)
++      } else {
++        // No valid zone - follow cursor, show red
++        this.hoveredZone = null
++        this.ghostMesh.position.set(point.x, 0, point.z)
++        this.ghostMesh.rotation.y = 0
++        this.updateGhostColor(false)
++      }
++
++      // Always visible during placement
++      this.ghostMesh.visible = true
++    }
++  }
++
++  // Update ghost mesh color based on validity
++  updateGhostColor(isValid) {
++    const color = isValid ? 0x44ff44 : 0xff4444
++    this.ghostMesh.traverse((child) => {
++      if (child.isMesh && child.material) {
++        child.material.color.setHex(color)
++      }
++    })
++  }
++
++  // Handle click during placement
++  onClick(event, containerWidth, containerHeight) {
++    if (this.state !== STATE.SELECTING) return false
++
++    // Update position one more time
++    this.onMouseMove(event, containerWidth, containerHeight)
++
++    if (this.hoveredZone) {
++      // Valid zone - confirm placement
++      this.confirmPlacement(this.hoveredZone)
++      return true
++    }
++
++    return false
++  }
++
++  // Confirm and place the building
++  confirmPlacement(zone) {
++    // Create the real building
++    const building = createBuilding(this.currentBuildingType, this.gradientMap)
++    building.position.set(zone.x, 0, zone.z)
++    building.rotation.y = zone.angle
++    building.userData.buildingType = this.currentBuildingType
++    building.userData.zoneId = zone.id
++
++    this.placedBuildings.add(building)
++
++    // Play placement sound
++    playPlaceBuilding()
++
++    // Mark zone as occupied
++    this.pond.occupyZone(zone.id)
++
++    // Add forbidden zone for creature emergence
++    const forbiddenRadius = this.buildingRadius[this.currentBuildingType] || 0.5
++    this.pond.addForbiddenZone(zone.x, zone.z, forbiddenRadius)
++
++    // Save to inventory
++    inventory.placeBuilding(this.currentBuildingType, zone.id)
++
++    // Clean up ghost
++    if (this.ghostMesh) {
++      this.scene.remove(this.ghostMesh)
++      this.ghostMesh.traverse((child) => {
++        if (child.isMesh) {
++          child.geometry?.dispose()
++          child.material?.dispose()
++        }
++      })
++      this.ghostMesh = null
++    }
++
++    // Reset state
++    const buildingType = this.currentBuildingType
++    this.state = STATE.INACTIVE
++    this.currentBuildingType = null
++    this.hoveredZone = null
++
++    // Callback
++    if (this.onPlacementComplete) {
++      this.onPlacementComplete(buildingType, zone)
++    }
++
++    return building
++  }
++
++  // Load saved buildings from inventory
++  loadSavedBuildings() {
++    const savedBuildings = inventory.getPlacedBuildings()
++
++    for (const { type, zoneId } of savedBuildings) {
++      const zone = this.pond.getZone(zoneId)
++      if (zone && !zone.occupied) {
++        // Create and place building
++        const building = createBuilding(type, this.gradientMap)
++        building.position.set(zone.x, 0, zone.z)
++        building.rotation.y = zone.angle
++        building.userData.buildingType = type
++        building.userData.zoneId = zone.id
++
++        this.placedBuildings.add(building)
++
++        // Mark zone as occupied
++        this.pond.occupyZone(zone.id)
++
++        // Add forbidden zone
++        const forbiddenRadius = this.buildingRadius[type] || 0.5
++        this.pond.addForbiddenZone(zone.x, zone.z, forbiddenRadius)
++      }
++    }
++  }
++
++  // Check if currently placing
++  isPlacing() {
++    return this.state === STATE.SELECTING
++  }
++
++  // Get the placed buildings group for outline pass
++  getPlacedBuildingsGroup() {
++    return this.placedBuildings
++  }
++
++  // Remove a placed building (for future use)
++  removeBuilding(zoneId) {
++    const building = this.placedBuildings.children.find(
++      b => b.userData.zoneId === zoneId
++    )
++
++    if (building) {
++      this.placedBuildings.remove(building)
++      building.traverse((child) => {
++        if (child.isMesh) {
++          child.geometry?.dispose()
++          child.material?.dispose()
++        }
++      })
++
++      // Free up the zone
++      const zone = this.pond.getZone(zoneId)
++      if (zone) {
++        zone.occupied = false
++      }
++
++      // Remove from inventory
++      inventory.removeBuilding(zoneId)
++
++      return true
++    }
++
++    return false
++  }
++
++  // Update building animations
++  update(delta, elapsed) {
++    for (const building of this.placedBuildings.children) {
++      // Lighthouse beam rotation
++      if (building.userData.buildingType === 'lighthouse') {
++        building.traverse((child) => {
++          if (child.userData.isLightBeam) {
++            child.rotation.y = elapsed * 0.8 // Slow rotation
++          }
++        })
++      }
++
++      // Reeds swaying
++      if (building.userData.buildingType === 'reeds') {
++        building.traverse((child) => {
++          if (child.userData.isReed) {
++            const phase = child.userData.phase
++            const baseX = child.userData.baseRotX
++            const baseZ = child.userData.baseRotZ
++            // Gentle swaying motion
++            child.rotation.x = baseX + Math.sin(elapsed * 1.5 + phase) * 0.15
++            child.rotation.z = baseZ + Math.cos(elapsed * 1.2 + phase) * 0.1
++          }
++        })
++      }
++    }
++  }
++
++  // Dispose of all resources
++  dispose() {
++    this.cancelPlacement()
++
++    // Clean up placed buildings
++    while (this.placedBuildings.children.length > 0) {
++      const building = this.placedBuildings.children[0]
++      this.placedBuildings.remove(building)
++      building.traverse((child) => {
++        if (child.isMesh) {
++          child.geometry?.dispose()
++          child.material?.dispose()
++        }
++      })
++    }
++
++    this.scene.remove(this.placedBuildings)
++
++    // Clean up ground plane
++    if (this.groundPlane) {
++      this.scene.remove(this.groundPlane)
++      this.groundPlane.geometry?.dispose()
++      this.groundPlane.material?.dispose()
++    }
++  }
++}

src/renderers/three/buildings.jsadded

++// Building mesh factories for dougk
++// Creates 3D meshes for placeable buildings
++
++import * as THREE from 'three'
++
++// Create a wooden dock
++export function createDock(gradientMap) {
++  const group = new THREE.Group()
++
++  const woodMaterial = new THREE.MeshToonMaterial({
++    color: 0x8b6914,
++    gradientMap
++  })
++
++  const darkWoodMaterial = new THREE.MeshToonMaterial({
++    color: 0x5c4a1a,
++    gradientMap
++  })
++
++  // Main platform
++  const platformGeom = new THREE.BoxGeometry(1.2, 0.08, 0.6)
++  const platform = new THREE.Mesh(platformGeom, woodMaterial)
++  platform.position.y = 0.04
++  group.add(platform)
++
++  // Planks (detail lines)
++  for (let i = 0; i < 5; i++) {
++    const plankGeom = new THREE.BoxGeometry(0.02, 0.09, 0.58)
++    const plank = new THREE.Mesh(plankGeom, darkWoodMaterial)
++    plank.position.set(-0.5 + i * 0.25, 0.045, 0)
++    group.add(plank)
++  }
++
++  // Support posts
++  const postGeom = new THREE.CylinderGeometry(0.04, 0.05, 0.4, 6)
++  const postPositions = [
++    { x: -0.5, z: 0.25 },
++    { x: -0.5, z: -0.25 },
++    { x: 0.5, z: 0.25 },
++    { x: 0.5, z: -0.25 }
++  ]
++
++  for (const pos of postPositions) {
++    const post = new THREE.Mesh(postGeom, darkWoodMaterial)
++    post.position.set(pos.x, -0.15, pos.z)
++    group.add(post)
++  }
++
++  return group
++}
++
++// Create a fishing hut
++export function createFishingHut(gradientMap) {
++  const group = new THREE.Group()
++
++  const woodMaterial = new THREE.MeshToonMaterial({
++    color: 0x9b7653,
++    gradientMap
++  })
++
++  const roofMaterial = new THREE.MeshToonMaterial({
++    color: 0x654321,
++    gradientMap
++  })
++
++  const windowMaterial = new THREE.MeshBasicMaterial({
++    color: 0x87ceeb,
++    transparent: true,
++    opacity: 0.6
++  })
++
++  // Base/floor
++  const baseGeom = new THREE.BoxGeometry(0.9, 0.06, 0.7)
++  const base = new THREE.Mesh(baseGeom, woodMaterial)
++  base.position.y = 0.03
++  group.add(base)
++
++  // Walls
++  const wallGeom = new THREE.BoxGeometry(0.85, 0.5, 0.65)
++  const walls = new THREE.Mesh(wallGeom, woodMaterial)
++  walls.position.y = 0.31
++  group.add(walls)
++
++  // Roof
++  const roofGeom = new THREE.ConeGeometry(0.55, 0.35, 4)
++  const roof = new THREE.Mesh(roofGeom, roofMaterial)
++  roof.position.y = 0.73
++  roof.rotation.y = Math.PI / 4
++  group.add(roof)
++
++  // Window
++  const windowGeom = new THREE.PlaneGeometry(0.15, 0.15)
++  const window1 = new THREE.Mesh(windowGeom, windowMaterial)
++  window1.position.set(0.43, 0.35, 0)
++  window1.rotation.y = Math.PI / 2
++  group.add(window1)
++
++  // Door frame
++  const doorGeom = new THREE.BoxGeometry(0.02, 0.35, 0.2)
++  const door = new THREE.Mesh(doorGeom, roofMaterial)
++  door.position.set(0.43, 0.24, 0)
++  group.add(door)
++
++  return group
++}
++
++// Create a mini lighthouse
++export function createLighthouse(gradientMap) {
++  const group = new THREE.Group()
++
++  const whiteMaterial = new THREE.MeshToonMaterial({
++    color: 0xf5f5f5,
++    gradientMap
++  })
++
++  const redMaterial = new THREE.MeshToonMaterial({
++    color: 0xcc3333,
++    gradientMap
++  })
++
++  const glassMaterial = new THREE.MeshBasicMaterial({
++    color: 0xffffaa,
++    transparent: true,
++    opacity: 0.8
++  })
++
++  // Base
++  const baseGeom = new THREE.CylinderGeometry(0.25, 0.3, 0.15, 8)
++  const base = new THREE.Mesh(baseGeom, whiteMaterial)
++  base.position.y = 0.075
++  group.add(base)
++
++  // Tower - alternating stripes
++  const stripeHeight = 0.2
++  for (let i = 0; i < 4; i++) {
++    const stripeGeom = new THREE.CylinderGeometry(
++      0.18 - i * 0.02,
++      0.2 - i * 0.02,
++      stripeHeight,
++      8
++    )
++    const stripe = new THREE.Mesh(stripeGeom, i % 2 === 0 ? whiteMaterial : redMaterial)
++    stripe.position.y = 0.25 + i * stripeHeight
++    group.add(stripe)
++  }
++
++  // Lamp housing
++  const housingGeom = new THREE.CylinderGeometry(0.12, 0.1, 0.15, 8)
++  const housing = new THREE.Mesh(housingGeom, redMaterial)
++  housing.position.y = 1.02
++  group.add(housing)
++
++  // Glass/light
++  const glassGeom = new THREE.SphereGeometry(0.08, 8, 6)
++  const glass = new THREE.Mesh(glassGeom, glassMaterial)
++  glass.position.y = 1.0
++  group.add(glass)
++
++  // Light beam (animated)
++  const beamGroup = new THREE.Group()
++  beamGroup.position.y = 1.0
++
++  const beamMaterial = new THREE.MeshBasicMaterial({
++    color: 0xffffaa,
++    transparent: true,
++    opacity: 0.3,
++    side: THREE.DoubleSide
++  })
++
++  // Create a cone-shaped beam - tip at lamp, wide end extending outward
++  const beamGeom = new THREE.ConeGeometry(0.8, 2.5, 8, 1, true)
++  beamGeom.rotateX(-Math.PI / 2) // Tip toward -Z, base toward +Z
++  beamGeom.translate(0, 0, 1.25) // Move so tip is at origin (lamp), base extends outward
++  const beam = new THREE.Mesh(beamGeom, beamMaterial)
++  beamGroup.add(beam)
++
++  // Mark for animation
++  beamGroup.userData.isLightBeam = true
++  group.add(beamGroup)
++
++  // Roof cap
++  const capGeom = new THREE.ConeGeometry(0.14, 0.12, 8)
++  const cap = new THREE.Mesh(capGeom, redMaterial)
++  cap.position.y = 1.15
++  group.add(cap)
++
++  // Mark group as lighthouse for animation
++  group.userData.isLighthouse = true
++
++  return group
++}
++
++// Create reed cluster
++export function createReeds(gradientMap) {
++  const group = new THREE.Group()
++
++  const reedMaterial = new THREE.MeshToonMaterial({
++    color: 0x4a7c3f,
++    gradientMap
++  })
++
++  const tipMaterial = new THREE.MeshToonMaterial({
++    color: 0x8b7355,
++    gradientMap
++  })
++
++  // Create 5-7 reeds
++  const reedCount = 5 + Math.floor(Math.random() * 3)
++  const reeds = []
++
++  for (let i = 0; i < reedCount; i++) {
++    const height = 0.4 + Math.random() * 0.3
++    const angle = (i / reedCount) * Math.PI * 2 + Math.random() * 0.5
++    const dist = Math.random() * 0.15
++
++    // Reed group (stalk + tip together for swaying)
++    const reedGroup = new THREE.Group()
++    reedGroup.position.set(
++      Math.cos(angle) * dist,
++      0,
++      Math.sin(angle) * dist
++    )
++
++    // Reed stalk
++    const stalkGeom = new THREE.CylinderGeometry(0.015, 0.02, height, 4)
++    const stalk = new THREE.Mesh(stalkGeom, reedMaterial)
++    stalk.position.y = height / 2 - 0.1
++    reedGroup.add(stalk)
++
++    // Cattail tip
++    const tipGeom = new THREE.CylinderGeometry(0.03, 0.025, 0.1, 6)
++    const tip = new THREE.Mesh(tipGeom, tipMaterial)
++    tip.position.y = height - 0.05
++    reedGroup.add(tip)
++
++    // Mark for animation with random phase
++    reedGroup.userData.isReed = true
++    reedGroup.userData.phase = Math.random() * Math.PI * 2
++    reedGroup.userData.baseRotX = (Math.random() - 0.5) * 0.2
++    reedGroup.userData.baseRotZ = (Math.random() - 0.5) * 0.2
++
++    reeds.push(reedGroup)
++    group.add(reedGroup)
++  }
++
++  // Mark group as reeds cluster for animation
++  group.userData.isReeds = true
++  group.userData.reedChildren = reeds
++
++  return group
++}
++
++// Create fence segment
++export function createFence(gradientMap) {
++  const group = new THREE.Group()
++
++  const woodMaterial = new THREE.MeshToonMaterial({
++    color: 0xa0826d,
++    gradientMap
++  })
++
++  // Two posts
++  const postGeom = new THREE.BoxGeometry(0.06, 0.4, 0.06)
++
++  const post1 = new THREE.Mesh(postGeom, woodMaterial)
++  post1.position.set(-0.25, 0.15, 0)
++  group.add(post1)
++
++  const post2 = new THREE.Mesh(postGeom, woodMaterial)
++  post2.position.set(0.25, 0.15, 0)
++  group.add(post2)
++
++  // Pointed tops
++  const pointGeom = new THREE.ConeGeometry(0.04, 0.08, 4)
++
++  const point1 = new THREE.Mesh(pointGeom, woodMaterial)
++  point1.position.set(-0.25, 0.39, 0)
++  group.add(point1)
++
++  const point2 = new THREE.Mesh(pointGeom, woodMaterial)
++  point2.position.set(0.25, 0.39, 0)
++  group.add(point2)
++
++  // Cross beams
++  const beamGeom = new THREE.BoxGeometry(0.5, 0.04, 0.03)
++
++  const beam1 = new THREE.Mesh(beamGeom, woodMaterial)
++  beam1.position.set(0, 0.25, 0)
++  group.add(beam1)
++
++  const beam2 = new THREE.Mesh(beamGeom, woodMaterial)
++  beam2.position.set(0, 0.1, 0)
++  group.add(beam2)
++
++  return group
++}
++
++// Create a giant onion house
++export function createOnionHouse(gradientMap) {
++  const group = new THREE.Group()
++
++  // Onion colors - layered purples and whites
++  const outerSkinMaterial = new THREE.MeshToonMaterial({
++    color: 0x8b668b, // Dusty purple outer skin
++    gradientMap
++  })
++
++  const innerSkinMaterial = new THREE.MeshToonMaterial({
++    color: 0xdda0dd, // Lighter purple inner layer peeking through
++    gradientMap
++  })
++
++  const rootMaterial = new THREE.MeshToonMaterial({
++    color: 0xd2b48c, // Tan roots
++    gradientMap
++  })
++
++  const doorMaterial = new THREE.MeshToonMaterial({
++    color: 0x4a3728, // Dark wood door
++    gradientMap
++  })
++
++  const chimneyMaterial = new THREE.MeshToonMaterial({
++    color: 0x8b7355, // Stone chimney
++    gradientMap
++  })
++
++  // Main onion body - bulbous bottom
++  const bulbGeom = new THREE.SphereGeometry(0.5, 10, 8)
++  bulbGeom.scale(1, 0.85, 1)
++  const bulb = new THREE.Mesh(bulbGeom, outerSkinMaterial)
++  bulb.position.y = 0.4
++  group.add(bulb)
++
++  // Onion top/neck tapering up
++  const neckGeom = new THREE.CylinderGeometry(0.15, 0.35, 0.4, 8)
++  const neck = new THREE.Mesh(neckGeom, outerSkinMaterial)
++  neck.position.y = 0.95
++  group.add(neck)
++
++  // Dried top sprout/tip
++  const tipGeom = new THREE.ConeGeometry(0.08, 0.25, 6)
++  const tip = new THREE.Mesh(tipGeom, rootMaterial)
++  tip.position.y = 1.27
++  tip.rotation.z = 0.15 // Slight lean for whimsy
++  group.add(tip)
++
++  // Peeling skin detail (decorative flaps)
++  const peelGeom = new THREE.PlaneGeometry(0.2, 0.35)
++  const peel1 = new THREE.Mesh(peelGeom, innerSkinMaterial)
++  peel1.position.set(0.45, 0.5, 0.15)
++  peel1.rotation.y = -0.4
++  peel1.rotation.z = 0.3
++  group.add(peel1)
++
++  const peel2 = new THREE.Mesh(peelGeom, innerSkinMaterial)
++  peel2.position.set(-0.35, 0.6, 0.3)
++  peel2.rotation.y = 0.6
++  peel2.rotation.z = -0.2
++  group.add(peel2)
++
++  // Root tendrils at the bottom
++  for (let i = 0; i < 5; i++) {
++    const angle = (i / 5) * Math.PI * 2 + Math.random() * 0.3
++    const rootGeom = new THREE.CylinderGeometry(0.02, 0.01, 0.15 + Math.random() * 0.1, 4)
++    const root = new THREE.Mesh(rootGeom, rootMaterial)
++    root.position.set(
++      Math.cos(angle) * 0.15,
++      -0.02,
++      Math.sin(angle) * 0.15
++    )
++    root.rotation.x = (Math.random() - 0.5) * 0.4
++    root.rotation.z = (Math.random() - 0.5) * 0.4
++    group.add(root)
++  }
++
++  // Door - cute rounded top
++  const doorGroup = new THREE.Group()
++
++  // Door frame (arch)
++  const doorFrameGeom = new THREE.BoxGeometry(0.22, 0.35, 0.05)
++  const doorFrame = new THREE.Mesh(doorFrameGeom, doorMaterial)
++  doorFrame.position.y = 0.175
++  doorGroup.add(doorFrame)
++
++  // Door arch top
++  const archGeom = new THREE.SphereGeometry(0.11, 8, 4, 0, Math.PI * 2, 0, Math.PI / 2)
++  const arch = new THREE.Mesh(archGeom, doorMaterial)
++  arch.position.y = 0.35
++  arch.rotation.x = Math.PI
++  doorGroup.add(arch)
++
++  // Door knob
++  const knobGeom = new THREE.SphereGeometry(0.02, 6, 4)
++  const knobMaterial = new THREE.MeshToonMaterial({ color: 0xffd700, gradientMap })
++  const knob = new THREE.Mesh(knobGeom, knobMaterial)
++  knob.position.set(0.07, 0.2, 0.03)
++  doorGroup.add(knob)
++
++  doorGroup.position.set(0.48, 0.02, 0)
++  doorGroup.rotation.y = Math.PI / 2
++  group.add(doorGroup)
++
++  // Chimney - whimsically placed on the side/top
++  const chimneyGroup = new THREE.Group()
++
++  const chimneyBaseGeom = new THREE.CylinderGeometry(0.06, 0.07, 0.3, 6)
++  const chimneyBase = new THREE.Mesh(chimneyBaseGeom, chimneyMaterial)
++  chimneyBase.position.y = 0.15
++  chimneyGroup.add(chimneyBase)
++
++  // Chimney cap
++  const capGeom = new THREE.CylinderGeometry(0.08, 0.06, 0.04, 6)
++  const cap = new THREE.Mesh(capGeom, chimneyMaterial)
++  cap.position.y = 0.32
++  chimneyGroup.add(cap)
++
++  // Position chimney at a jaunty angle on the onion
++  chimneyGroup.position.set(-0.25, 0.75, 0.2)
++  chimneyGroup.rotation.z = 0.3 // Tilted for whimsy
++  chimneyGroup.rotation.x = -0.15
++  group.add(chimneyGroup)
++
++  // Little window
++  const windowGeom = new THREE.CircleGeometry(0.08, 8)
++  const windowMaterial = new THREE.MeshBasicMaterial({
++    color: 0xffffcc,
++    transparent: true,
++    opacity: 0.7
++  })
++  const windowMesh = new THREE.Mesh(windowGeom, windowMaterial)
++  windowMesh.position.set(0.1, 0.55, 0.49)
++  group.add(windowMesh)
++
++  // Window frame
++  const windowFrameGeom = new THREE.TorusGeometry(0.08, 0.012, 4, 12)
++  const windowFrame = new THREE.Mesh(windowFrameGeom, doorMaterial)
++  windowFrame.position.set(0.1, 0.55, 0.485)
++  group.add(windowFrame)
++
++  return group
++}
++
++// Factory function to create building by type
++export function createBuilding(type, gradientMap) {
++  switch (type) {
++    case 'dock_wooden':
++      return createDock(gradientMap)
++    case 'fishing_hut':
++      return createFishingHut(gradientMap)
++    case 'lighthouse':
++      return createLighthouse(gradientMap)
++    case 'reeds':
++      return createReeds(gradientMap)
++    case 'fence':
++      return createFence(gradientMap)
++    case 'onion_house':
++      return createOnionHouse(gradientMap)
++    default:
++      console.warn('Unknown building type:', type)
++      return new THREE.Group()
++  }
++}
++
++// Create ghost (preview) version of a building
++export function createGhostBuilding(type, gradientMap, isValid) {
++  const building = createBuilding(type, gradientMap)
++
++  // Make all materials transparent and tinted
++  const color = isValid ? 0x44ff44 : 0xff4444
++  const opacity = 0.5
++
++  building.traverse((child) => {
++    if (child.isMesh) {
++      child.material = new THREE.MeshBasicMaterial({
++        color,
++        transparent: true,
++        opacity
++      })
++    }
++  })
++
++  return building
++}

src/renderers/three/duck.jsmodified

  export function createDoug(scene, gradientMap) {
    const group = new THREE.Group()
--  // Color palette - vibrant Wind Waker yellows
++  // Store gradientMap for accessory creation
--  const bodyColor = 0xffdc50 // Warm yellow
++  const storedGradientMap = gradientMap
--  const bodyHighlight = 0xfff0a0 // Light yellow
++
--  const beakColor = 0xff9020 // Bright orange
++  // Default colors - vibrant Wind Waker yellows
--  const eyeWhite = 0xffffff
++  const defaultColors = {
--  const eyePupil = 0x191410
++    body: 0xffdc50,
++    highlight: 0xfff0a0,
++    beak: 0xff9020
++  }
--  // Toon materials
++  // Toon materials (stored for outfit swapping)
    const bodyMaterial = new THREE.MeshToonMaterial({
--    color: bodyColor,
++    color: defaultColors.body,
      gradientMap: gradientMap
    })
    const highlightMaterial = new THREE.MeshToonMaterial({
--    color: bodyHighlight,
++    color: defaultColors.highlight,
      gradientMap: gradientMap
    })
    const beakMaterial = new THREE.MeshToonMaterial({
--    color: beakColor,
++    color: defaultColors.beak,
      gradientMap: gradientMap
    })
++  // Accessory tracking
++  const accessories = {
++    head: null,
++    face: null
++  }
++
++  // Mount points for accessories
++  const mountPoints = {
++    head: new THREE.Vector3(0.38, 0.98, 0),
++    face: new THREE.Vector3(0.72, 0.78, 0)
++  }
++
++  const eyeWhite = 0xffffff
++  const eyePupil = 0x191410
++
    const eyeWhiteMaterial = new THREE.MeshToonMaterial({
      color: eyeWhite,
      gradientMap: gradientMap
+     )
+   }
--  function update(delta, elapsed, breadBits, pond) {
++  function update(delta, elapsed, breadBits, pond, options = {}) {
++    const { paused = false, focusTarget = null } = options
++
++    // When paused (during dialog), stop movement but keep animations
++    if (paused) {
++      state.isMoving = false
++
++      // If there's a focus target, slowly turn to face it
++      if (focusTarget) {
++        const dx = focusTarget.x - state.position.x
++        const dz = focusTarget.z - state.position.z
++        const targetAngle = Math.atan2(dx, dz)
++        state.rotation = lerpAngle(state.rotation, targetAngle, delta * 2)
++      }
++
++      // Apply position (no movement, just stay in place)
++      group.position.x = state.position.x
++      group.position.z = state.position.z
++
++      // Gentle bobbing
++      const bobAmount = Math.sin(elapsed * 2)
++      group.position.y = bobAmount * 0.03
++
++      // Rotation
++      group.rotation.y = state.rotation - Math.PI / 2
++
++      // Subtle idle animations
++      leftWing.rotation.z = Math.sin(elapsed * 2) * 0.05
++      rightWing.rotation.z = -Math.sin(elapsed * 2) * 0.05
++      head.position.y = 0.7 + Math.sin(elapsed * 1.5) * 0.02
++
++      // Occasional idle ripple
++      state.rippleTimer += delta
++      if (state.rippleTimer > 2 && bobAmount < -0.9) {
++        state.rippleTimer = 0
++        pond.addRipple(state.position.x, state.position.z)
++      }
++
++      return
++    }
++
      // Find closest bread
      let closestBread = null
      let closestDist = Infinity
+     }
+   }
++  // Apply an outfit to Doug
++  function applyOutfit(outfit) {
++    if (!outfit) return
++
++    switch (outfit.type) {
++      case 'color_body':
++        if (outfit.colors) {
++          if (outfit.colors.body) bodyMaterial.color.setHex(outfit.colors.body)
++          if (outfit.colors.highlight) highlightMaterial.color.setHex(outfit.colors.highlight)
++        }
++        break
++
++      case 'color_accent':
++        if (outfit.colors && outfit.colors.beak) {
++          beakMaterial.color.setHex(outfit.colors.beak)
++        }
++        break
++
++      case 'accessory_head':
++        // Remove existing head accessory
++        if (accessories.head) {
++          group.remove(accessories.head)
++          accessories.head = null
++        }
++        // Add new accessory
++        if (outfit.meshFactory) {
++          accessories.head = outfit.meshFactory(storedGradientMap)
++          accessories.head.position.copy(mountPoints.head)
++          group.add(accessories.head)
++        }
++        break
++
++      case 'accessory_face':
++        // Remove existing face accessory
++        if (accessories.face) {
++          group.remove(accessories.face)
++          accessories.face = null
++        }
++        // Add new accessory
++        if (outfit.meshFactory) {
++          accessories.face = outfit.meshFactory(storedGradientMap)
++          accessories.face.position.copy(mountPoints.face)
++          accessories.face.rotation.y = -Math.PI / 2 // Face forward
++          group.add(accessories.face)
++        }
++        break
++    }
++  }
++
++  // Remove an outfit from Doug
++  function removeOutfit(outfit) {
++    if (!outfit) return
++
++    switch (outfit.type) {
++      case 'color_body':
++        bodyMaterial.color.setHex(defaultColors.body)
++        highlightMaterial.color.setHex(defaultColors.highlight)
++        break
++
++      case 'color_accent':
++        beakMaterial.color.setHex(defaultColors.beak)
++        break
++
++      case 'accessory_head':
++        if (accessories.head) {
++          group.remove(accessories.head)
++          accessories.head = null
++        }
++        break
++
++      case 'accessory_face':
++        if (accessories.face) {
++          group.remove(accessories.face)
++          accessories.face = null
++        }
++        break
++    }
++  }
++
    return {
      group,
      update,
--    getPosition: () => state.position.clone()
++    getPosition: () => state.position.clone(),
++    applyOutfit,
++    removeOutfit
+   }
+ }

src/renderers/three/gameState.jsadded

++// Game state singleton for dougk gamification
++// Tracks currency (captured koi) and other persistent state
++
++const STORAGE_KEY = 'dougk-koi'
++
++const gameState = {
++  capturedKoi: parseInt(localStorage.getItem(STORAGE_KEY) || '0'),
++
++  addKoi(n = 1) {
++    this.capturedKoi += n
++    this.save()
++    this.notifyListeners()
++  },
++
++  spendKoi(n) {
++    if (this.capturedKoi >= n) {
++      this.capturedKoi -= n
++      this.save()
++      this.notifyListeners()
++      return true
++    }
++    return false
++  },
++
++  getKoi() {
++    return this.capturedKoi
++  },
++
++  save() {
++    localStorage.setItem(STORAGE_KEY, this.capturedKoi.toString())
++  },
++
++  // Listener system for UI updates
++  listeners: [],
++
++  addListener(callback) {
++    this.listeners.push(callback)
++  },
++
++  removeListener(callback) {
++    this.listeners = this.listeners.filter(l => l !== callback)
++  },
++
++  notifyListeners() {
++    for (const listener of this.listeners) {
++      listener(this.capturedKoi)
++    }
++  }
++}
++
++export default gameState

src/renderers/three/index.jsmodified

  import { createDonny } from './narwhal.js'
  import { createKoiSchool } from './koi.js'
  import { createOllie } from './octopus.js'
++import { PlacementManager } from './buildingPlacement.js'
  import { unlockAudio } from './sounds.js'
++import gameState from './gameState.js'
++import { openShop, closeShop, isShopOpen } from './shop/shopUI.js'
++import { showDialog, closeDialog, isDialogOpen } from './shop/dialogUI.js'
++import { getDialogForCharacter, getReturnDialog } from './shop/dialogScripts.js'
++import inventory from './shop/inventory.js'
++import { getItem, CHARACTERS } from './shop/items.js'
  let scene, camera, renderer, composer, outlinePass
--let doug, pond, breadManager, donny, koiSchool, ollie
++let doug, pond, breadManager, donny, koiSchool, ollie, placementManager
  let clock
  let animationId = null
++let koiCounterEl = null
++
++// Capture state
++let captureState = {
++  isHolding: false,
++  targetKoi: null,
++  clickPos: null  // Where bread would spawn if not capturing
++}
++
++// Auto-capture state (when Doug hovers over koi)
++let autoCapture = {
++  targetKoi: null,
++  hoverTime: 0,
++  CAPTURE_DELAY: 0.5 // seconds Doug must be over koi to auto-capture
++}
++
++// Camera zoom state for dialog focus effect
++const cameraZoom = {
++  defaultFrustum: 12,
++  dialogFrustum: 8, // Zoomed in during dialog
++  currentFrustum: 12,
++  targetFrustum: 12
++}
++
++function createKoiCounter(container) {
++  const counter = document.createElement('div')
++  counter.id = 'koi-counter'
++  counter.style.cssText = `
++    position: fixed;
++    top: 16px;
++    left: 16px;
++    background: rgba(0, 0, 0, 0.6);
++    color: #ffd700;
++    padding: 8px 16px;
++    border-radius: 8px;
++    font-family: 'Courier New', monospace;
++    font-size: 18px;
++    font-weight: bold;
++    z-index: 1000;
++    pointer-events: none;
++    display: flex;
++    align-items: center;
++    gap: 8px;
++  `
++  counter.innerHTML = `<span style="font-size: 24px;">🐟</span> <span id="koi-count">${gameState.getKoi()}</span>`
++  container.appendChild(counter)
++
++  // Listen for game state changes
++  gameState.addListener((count) => {
++    const countEl = document.getElementById('koi-count')
++    if (countEl) countEl.textContent = count
++  })
++
++  return counter
++}
  function createToonGradient() {
    const canvas = document.createElement('canvas')
    donny = createDonny(scene, toonGradient)
    koiSchool = createKoiSchool(scene, toonGradient, pond.radius)
    ollie = createOllie(scene, toonGradient)
++  placementManager = new PlacementManager(scene, pond, camera, toonGradient)
    // Post-processing
    composer = new EffectComposer(renderer)
    outlinePass.edgeThickness = 1.5
    outlinePass.visibleEdgeColor.set(0x191410)
    outlinePass.hiddenEdgeColor.set(0x191410)
--  outlinePass.selectedObjects = [doug.group, pond.group, donny.group, koiSchool.group, ollie.group]
++  outlinePass.selectedObjects = [doug.group, pond.group, donny.group, koiSchool.group, ollie.group, placementManager.getPlacedBuildingsGroup()]
    composer.addPass(outlinePass)
    composer.addPass(new OutputPass())
    // Unlock audio on first touch (for mobile)
    renderer.domElement.addEventListener('touchstart', unlockAudio, { once: true })
--  renderer.domElement.addEventListener('click', (event) => {
++  // Mouse move - handle placement preview
--    // Unlock audio on first interaction (required for mobile)
++  renderer.domElement.addEventListener('pointermove', (event) => {
++    if (placementManager.isPlacing()) {
++      placementManager.onMouseMove(event, window.innerWidth, window.innerHeight)
++    }
++  })
++
++  // Helper to handle tap-to-shop for a creature
++  const handleCreatureTap = (creature, characterName) => {
++    if (!creature.isTappable()) return false
++    if (isDialogOpen() || isShopOpen()) return false
++
++    // Show return dialog, then open shop
++    const dialogLines = getReturnDialog(characterName)
++    showDialog(characterName, dialogLines, container, () => {
++      openShop(characterName, container, {
++        onClose: () => {
++          creature.dismissShop()
++        },
++        onPurchase: (item, action) => {
++          if (item.character) {
++            handleOutfitChange(item, action)
++          }
++          if (action === 'place' && item.buildingType) {
++            placementManager.startPlacement(item.buildingType, {
++              onComplete: () => {},
++              onCancel: () => {}
++            })
++          }
++        }
++      })
++    })
++
++    // Transition creature to shop mode if surfaced
++    creature.triggerShopFromTap(pond, doug)
++    return true
++  }
++
++  // Pointer down - handle placement, capture, or bread spawn
++  renderer.domElement.addEventListener('pointerdown', (event) => {
      unlockAudio()
++    // If placing a building, try to place it
++    if (placementManager.isPlacing()) {
++      if (placementManager.onClick(event, window.innerWidth, window.innerHeight)) {
++        // Building placed successfully
++        return
++      }
++      // Clicked in invalid spot - cancel placement
++      placementManager.cancelPlacement()
++      return
++    }
++
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
      raycaster.setFromCamera(mouse, camera)
++
++    // Check if clicked on Donny or Ollie (tap to reopen shop)
++    if (donny.isTappable()) {
++      const donnyIntersects = raycaster.intersectObject(donny.group, true)
++      if (donnyIntersects.length > 0) {
++        if (handleCreatureTap(donny, 'donny')) return
++      }
++    }
++    if (ollie.isTappable()) {
++      const ollieIntersects = raycaster.intersectObject(ollie.group, true)
++      if (ollieIntersects.length > 0) {
++        if (handleCreatureTap(ollie, 'ollie')) return
++      }
++    }
++
      const intersects = raycaster.intersectObject(pond.water)
      if (intersects.length > 0) {
        const point = intersects[0].point
--      breadManager.spawnBread(point.x, point.z)
++      captureState.clickPos = { x: point.x, z: point.z }
--      pond.addRipple(point.x, point.z)
++      captureState.isHolding = true
--      koiSchool.triggerPanic(point.x, point.z)
++
++      // Check if Doug is over a koi
++      const dougPos = doug.getPosition()
++      const koiUnderDoug = koiSchool.getKoiUnderPosition(dougPos.x, dougPos.z, 0.4)
++
++      if (koiUnderDoug) {
++        // Start capturing
++        koiSchool.startCapture(koiUnderDoug)
++        captureState.targetKoi = koiUnderDoug
++      }
++    }
++  })
++
++  // Pointer up - complete capture or spawn bread
++  renderer.domElement.addEventListener('pointerup', () => {
++    if (!captureState.isHolding) return
++
++    if (captureState.targetKoi) {
++      // If still capturing (not completed), cancel it
++      if (captureState.targetKoi.state.beingCaptured) {
++        koiSchool.cancelCapture(captureState.targetKoi)
++      }
++    } else if (captureState.clickPos) {
++      // No capture was started - spawn bread
++      breadManager.spawnBread(captureState.clickPos.x, captureState.clickPos.z)
++      pond.addRipple(captureState.clickPos.x, captureState.clickPos.z)
++      koiSchool.triggerPanic(captureState.clickPos.x, captureState.clickPos.z)
        outlinePass.selectedObjects = [doug.group, pond.group, ...breadManager.getMeshes()]
+     }
++
++    // Reset capture state
++    captureState.isHolding = false
++    captureState.targetKoi = null
++    captureState.clickPos = null
    })
++  // Create koi counter UI
++  koiCounterEl = createKoiCounter(container)
++
++  // Helper to get character object by name
++  const getCharacter = (charName) => {
++    switch (charName) {
++      case 'doug': return doug
++      case 'donny': return donny
++      case 'ollie': return ollie
++      default: return null
++    }
++  }
++
++  // Handle outfit equip/unequip
++  const handleOutfitChange = (item, action) => {
++    const character = getCharacter(item.character)
++    if (!character) return
++
++    if (action === 'equip') {
++      character.applyOutfit(item)
++    } else if (action === 'unequip') {
++      character.removeOutfit(item)
++    }
++  }
++
++  // Set up shop callbacks
++  const handleShopReady = (shopkeeper) => {
++    // Get dialog lines for this character
++    const dialogLines = getDialogForCharacter(shopkeeper)
++
++    // Show dialog first, then open shop when complete
++    showDialog(shopkeeper, dialogLines, container, () => {
++      // Dialog complete - now open the shop
++      openShop(shopkeeper, container, {
++        onClose: () => {
++          // Dismiss the appropriate shopkeeper
++          if (shopkeeper === 'donny') {
++            donny.dismissShop()
++          } else if (shopkeeper === 'ollie') {
++            ollie.dismissShop()
++          }
++        },
++        onPurchase: (item, action) => {
++          // Handle outfit equip/unequip
++          if (item.character) {
++            handleOutfitChange(item, action)
++          }
++          // Handle building placement
++          if (action === 'place' && item.buildingType) {
++            placementManager.startPlacement(item.buildingType, {
++              onComplete: (buildingType, zone) => {
++                // Building placed successfully
++              },
++              onCancel: () => {
++                // Placement cancelled
++              }
++            })
++          }
++        }
++      })
++    })
++  }
++
++  donny.setShopReadyCallback(handleShopReady)
++  ollie.setShopReadyCallback(handleShopReady)
++
++  // Load saved equipped outfits
++  const loadEquippedOutfits = () => {
++    for (const charName of Object.values(CHARACTERS)) {
++      const equipped = inventory.getEquipped(charName)
++      const character = getCharacter(charName)
++      if (character) {
++        for (const itemId of equipped) {
++          const item = getItem(itemId)
++          if (item) {
++            character.applyOutfit(item)
++          }
++        }
++      }
++    }
++  }
++  loadEquippedOutfits()
++
++  // Load saved placed buildings
++  placementManager.loadSavedBuildings()
++
    // Resize handler
    window.addEventListener('resize', onResize)
    const delta = clock.getDelta()
    const elapsed = clock.getElapsedTime()
--  doug.update(delta, elapsed, breadManager.getActiveBits(), pond)
++  // Check if in dialog/shop mode for camera zoom and movement pause
++  const inConversation = isDialogOpen() || isShopOpen()
++
++  // Animate camera zoom
++  cameraZoom.targetFrustum = inConversation ? cameraZoom.dialogFrustum : cameraZoom.defaultFrustum
++  if (Math.abs(cameraZoom.currentFrustum - cameraZoom.targetFrustum) > 0.01) {
++    cameraZoom.currentFrustum += (cameraZoom.targetFrustum - cameraZoom.currentFrustum) * delta * 3
++    const aspect = window.innerWidth / window.innerHeight
++    camera.left = -cameraZoom.currentFrustum * aspect / 2
++    camera.right = cameraZoom.currentFrustum * aspect / 2
++    camera.top = cameraZoom.currentFrustum / 2
++    camera.bottom = -cameraZoom.currentFrustum / 2
++    camera.updateProjectionMatrix()
++  }
++
++  // Get active bread positions for koi attraction
++  const activeBread = breadManager.getActiveBits()
++  const breadPositions = activeBread.map(b => ({ x: b.position.x, z: b.position.z }))
++
++  // Update koi attraction to bread
++  koiSchool.attractToBread(breadPositions)
++
++  // Handle capture in progress (manual click-hold)
++  if (captureState.isHolding && captureState.targetKoi) {
++    const completed = koiSchool.updateCapture(captureState.targetKoi, delta)
++    if (completed) {
++      // Capture completed
++      captureState.targetKoi = null
++      captureState.isHolding = false
++      captureState.clickPos = null
++    }
++  }
++
++  // Auto-capture: when Doug hovers over a koi for a moment
++  if (!captureState.isHolding) {
++    const dougPos = doug.getPosition()
++    const koiUnderDoug = koiSchool.getKoiUnderPosition(dougPos.x, dougPos.z, 0.5)
++
++    if (koiUnderDoug) {
++      if (autoCapture.targetKoi === koiUnderDoug) {
++        // Same koi - accumulate hover time
++        autoCapture.hoverTime += delta
++        if (autoCapture.hoverTime >= autoCapture.CAPTURE_DELAY) {
++          // Start and immediately complete capture
++          koiSchool.startCapture(koiUnderDoug)
++          // Fast-forward capture to completion
++          while (!koiSchool.updateCapture(koiUnderDoug, 0.2)) {}
++          autoCapture.targetKoi = null
++          autoCapture.hoverTime = 0
++        }
++      } else {
++        // New koi - reset timer
++        autoCapture.targetKoi = koiUnderDoug
++        autoCapture.hoverTime = 0
++      }
++    } else {
++      // No koi under Doug - reset
++      autoCapture.targetKoi = null
++      autoCapture.hoverTime = 0
++    }
++  }
++
++  // Determine focus target for Doug during conversation
++  let focusTarget = null
++  if (inConversation) {
++    // Focus on whoever is in shop mode
++    if (donny.isInShopMode()) {
++      focusTarget = { x: donny.group.position.x, z: donny.group.position.z }
++    } else if (ollie.isInShopMode()) {
++      focusTarget = { x: ollie.group.position.x, z: ollie.group.position.z }
++    }
++  }
++
++  doug.update(delta, elapsed, activeBread, pond, {
++    paused: inConversation,
++    focusTarget: focusTarget
++  })
    breadManager.update(delta, elapsed)
    pond.update(delta, elapsed)
    donny.update(delta, elapsed, pond, doug)
    koiSchool.update(delta, elapsed)
    ollie.update(delta, elapsed, pond, doug)
++  placementManager.update(delta, elapsed)
++
++  // Try to trigger shop if player has enough koi
++  // Only try if no dialog/shop is currently open and no creature is in shop mode
++  if (!isDialogOpen() && !isShopOpen() && !donny.isInShopMode() && !ollie.isInShopMode()) {
++    const koiCount = gameState.getKoi()
++    // Try Donny first (lower threshold), then Ollie
++    if (!donny.tryTriggerShop(koiCount, pond, doug)) {
++      ollie.tryTriggerShop(koiCount, pond, doug)
++    }
++  }
    composer.render()
+ }
    window.removeEventListener('resize', onResize)
++  // Close dialog and shop if open
++  if (isDialogOpen()) {
++    closeDialog()
++  }
++  if (isShopOpen()) {
++    closeShop()
++  }
++
    if (renderer) {
      renderer.domElement.remove()
      renderer.dispose()
      composer.dispose()
+   }
++  if (koiCounterEl) {
++    koiCounterEl.remove()
++    koiCounterEl = null
++  }
++
++  // Reset capture state
++  captureState.isHolding = false
++  captureState.targetKoi = null
++  captureState.clickPos = null
++
++  if (placementManager) {
++    placementManager.dispose()
++  }
++
    scene = null
    camera = null
    renderer = null
    koiSchool = null
    ollie = null
    breadManager = null
++  placementManager = null
+ }
  export const name = '3D'

src/renderers/three/koi.jsmodified

--// Koi fish - natural swimmers that react to bread
++// Koi fish - natural swimmers that are attracted to bread and can be captured
  import * as THREE from 'three'
++import gameState from './gameState.js'
++import { playCapture } from './sounds.js'
  export function createKoiSchool(scene, gradientMap, pondRadius) {
    const group = new THREE.Group()
    const kois = []
    const koiCount = 5
++  // Sparkle particles for capture effect
++  const sparkles = []
++  const sparkleMaterial = new THREE.MeshBasicMaterial({
++    color: 0xffd700,
++    transparent: true
++  })
++
++  function createCaptureSparkles(x, y, z) {
++    const particleCount = 12
++    for (let i = 0; i < particleCount; i++) {
++      const angle = (i / particleCount) * Math.PI * 2
++      const upAngle = Math.random() * Math.PI * 0.5
++
++      const sparkleGeom = new THREE.OctahedronGeometry(0.06)
++      const sparkle = new THREE.Mesh(sparkleGeom, sparkleMaterial.clone())
++      sparkle.position.set(x, y + 0.1, z)
++
++      // Random velocity outward and upward
++      const speed = 1.5 + Math.random() * 1
++      sparkle.userData = {
++        vx: Math.cos(angle) * Math.cos(upAngle) * speed,
++        vy: Math.sin(upAngle) * speed + 1,
++        vz: Math.sin(angle) * Math.cos(upAngle) * speed,
++        age: 0,
++        maxAge: 0.6 + Math.random() * 0.3,
++        rotSpeed: (Math.random() - 0.5) * 10
++      }
++
++      group.add(sparkle)
++      sparkles.push(sparkle)
++    }
++  }
++
++  function updateSparkles(delta) {
++    for (let i = sparkles.length - 1; i >= 0; i--) {
++      const sparkle = sparkles[i]
++      const d = sparkle.userData
++
++      d.age += delta
++      const progress = d.age / d.maxAge
++
++      // Move
++      sparkle.position.x += d.vx * delta
++      sparkle.position.y += d.vy * delta
++      sparkle.position.z += d.vz * delta
++
++      // Gravity
++      d.vy -= 4 * delta
++
++      // Spin
++      sparkle.rotation.x += d.rotSpeed * delta
++      sparkle.rotation.y += d.rotSpeed * delta
++
++      // Fade and shrink
++      sparkle.material.opacity = 1 - progress
++      sparkle.scale.setScalar(1 - progress * 0.5)
++
++      // Remove when done
++      if (d.age >= d.maxAge) {
++        group.remove(sparkle)
++        sparkle.geometry.dispose()
++        sparkle.material.dispose()
++        sparkles.splice(i, 1)
++      }
++    }
++  }
++
    // Koi color variations
    const koiColors = [
      { body: 0xff6b35, spots: 0xffffff },  // Orange with white
      koi.state = {
        speed: 0.3 + Math.random() * 0.3,
--      turnRate: 0,  // Current turning rate
++      turnRate: 0,
        targetTurnRate: 0,
        turnTimer: Math.random() * 3,
--      panicTimer: 0,
++      flickerPhase: Math.random() * Math.PI * 2,
--      flickerPhase: Math.random() * Math.PI * 2
++      // Attraction state
++      attractedTo: null, // { x, z } of bread attracting this koi
++      // Capture state
++      captured: false,
++      beingCaptured: false,
++      captureProgress: 0,
++      respawnTimer: 0,
++      originalScale: 0.9
+     }
      group.add(koi.group)
      return { group: koiGroup, tail }
+   }
++  // Attract koi to nearby bread - replaces panic behavior
++  function attractToBread(breadBits) {
++    for (const koi of kois) {
++      if (koi.state.captured || koi.state.beingCaptured) continue
++
++      // Find nearest bread
++      let nearestBread = null
++      let nearestDist = 2.5 // Attraction radius
++
++      for (const bread of breadBits) {
++        const dist = Math.hypot(
++          koi.group.position.x - bread.x,
++          koi.group.position.z - bread.z
++        )
++        if (dist < nearestDist) {
++          nearestDist = dist
++          nearestBread = bread
++        }
++      }
++
++      koi.state.attractedTo = nearestBread
++    }
++  }
++
++  // Legacy panic trigger - keep for ripple effects but make koi scatter briefly
    function triggerPanic(x, z) {
++    // Now just a brief scatter, not sustained panic
      for (const koi of kois) {
++      if (koi.state.captured || koi.state.beingCaptured) continue
++
        const dist = Math.hypot(
          koi.group.position.x - x,
          koi.group.position.z - z
+       )
--      if (dist < 1.5) {
++      if (dist < 0.8) {
--        koi.state.panicTimer = 1 + Math.random() * 0.5
++        // Brief scatter only when bread lands very close
--
++        koi.state.attractedTo = null
--        // Turn away from the disturbance
++        // Turn slightly away then resume
          const awayAngle = Math.atan2(
            koi.group.position.x - x,
            koi.group.position.z - z
+         )
--        // Set a strong turn toward the away direction
          let turnNeeded = awayAngle - koi.group.rotation.y
          while (turnNeeded > Math.PI) turnNeeded -= Math.PI * 2
          while (turnNeeded < -Math.PI) turnNeeded += Math.PI * 2
--        koi.state.targetTurnRate = Math.sign(turnNeeded) * 3
++        koi.state.targetTurnRate = Math.sign(turnNeeded) * 2
++        koi.state.turnTimer = 0.3 // Brief scatter
+       }
+     }
+   }
++  // Get koi under a given position (for capture detection)
++  function getKoiUnderPosition(x, z, radius = 0.3) {
++    for (const koi of kois) {
++      if (koi.state.captured || koi.state.beingCaptured) continue
++
++      const dist = Math.hypot(
++        koi.group.position.x - x,
++        koi.group.position.z - z
++      )
++
++      if (dist < radius) {
++        return koi
++      }
++    }
++    return null
++  }
++
++  // Start capturing a koi
++  function startCapture(koi) {
++    if (!koi || koi.state.captured || koi.state.beingCaptured) return false
++    koi.state.beingCaptured = true
++    koi.state.captureProgress = 0
++    koi.state.attractedTo = null
++    return true
++  }
++
++  // Update capture progress - returns true if capture completes
++  function updateCapture(koi, delta) {
++    if (!koi || !koi.state.beingCaptured) return false
++
++    koi.state.captureProgress += delta / 0.8 // 0.8 seconds to capture
++
++    // Scale down and wiggle during capture
++    const scale = koi.state.originalScale * (1 - koi.state.captureProgress * 0.3)
++    koi.group.scale.setScalar(Math.max(scale, 0.4))
++
++    // Wiggle/struggle effect
++    koi.group.rotation.z = Math.sin(koi.state.captureProgress * 20) * 0.3
++
++    if (koi.state.captureProgress >= 1) {
++      completeCapture(koi)
++      return true
++    }
++    return false
++  }
++
++  // Cancel capture in progress
++  function cancelCapture(koi) {
++    if (!koi || !koi.state.beingCaptured) return
++    koi.state.beingCaptured = false
++    koi.state.captureProgress = 0
++    koi.group.scale.setScalar(koi.state.originalScale)
++    koi.group.rotation.z = 0
++  }
++
++  // Complete capture - hide koi and schedule respawn
++  function completeCapture(koi) {
++    // Spawn sparkles at koi position before hiding
++    const pos = koi.group.position
++    createCaptureSparkles(pos.x, pos.y, pos.z)
++
++    koi.state.captured = true
++    koi.state.beingCaptured = false
++    koi.state.captureProgress = 0
++    koi.group.visible = false
++
++    // Schedule respawn
++    koi.state.respawnTimer = 8 + Math.random() * 12 // 8-20 seconds
++
++    // Add to game state and play sound
++    gameState.addKoi(1)
++    playCapture()
++  }
++
++  // Respawn a captured koi
++  function respawnKoi(koi) {
++    koi.state.captured = false
++    koi.group.visible = true
++    koi.group.scale.setScalar(koi.state.originalScale)
++    koi.group.rotation.z = 0
++
++    // Random new position
++    const angle = Math.random() * Math.PI * 2
++    const dist = Math.random() * pondRadius * 0.6 + pondRadius * 0.1
++    koi.group.position.set(
++      Math.cos(angle) * dist,
++      -0.08,
++      Math.sin(angle) * dist
++    )
++    koi.group.rotation.y = Math.random() * Math.PI * 2
++  }
++
    function update(delta, elapsed) {
      for (const koi of kois) {
        const s = koi.state
        const pos = koi.group.position
--      // Update panic
++      // Handle respawn timer
--      const isPanicked = s.panicTimer > 0
++      if (s.captured) {
--      if (isPanicked) {
++        s.respawnTimer -= delta
--        s.panicTimer -= delta
++        if (s.respawnTimer <= 0) {
++          respawnKoi(koi)
++        }
++        continue
++      }
++
++      // Skip movement if being captured
++      if (s.beingCaptured) {
++        continue
+       }
        // Decide turning behavior
        s.turnTimer -= delta
--      if (s.turnTimer <= 0 && !isPanicked) {
++
--        // Occasionally change turn rate for natural wandering
++      // If attracted to bread, swim toward it
--        s.targetTurnRate = (Math.random() - 0.5) * 1.5
++      if (s.attractedTo) {
--        s.turnTimer = 1 + Math.random() * 3
++        const toBreakX = s.attractedTo.x - pos.x
++        const toBreadZ = s.attractedTo.z - pos.z
++        const distToBread = Math.hypot(toBreakX, toBreadZ)
++
++        if (distToBread < 0.15) {
++          // Very close to bread - slow down and circle
++          s.targetTurnRate = 0.3
++          s.speed = 0.1
++        } else {
++          // Swim toward bread
++          const toBreadAngle = Math.atan2(toBreakX, toBreadZ)
++          let turnNeeded = toBreadAngle - koi.group.rotation.y
++          while (turnNeeded > Math.PI) turnNeeded -= Math.PI * 2
++          while (turnNeeded < -Math.PI) turnNeeded += Math.PI * 2
++
++          s.targetTurnRate = Math.sign(turnNeeded) * Math.min(Math.abs(turnNeeded) * 2, 2)
++          s.speed = 0.4 + Math.min(distToBread * 0.2, 0.3) // Faster when far
++        }
++      } else {
++        // Natural wandering behavior
++        if (s.turnTimer <= 0) {
++          s.targetTurnRate = (Math.random() - 0.5) * 1.5
++          s.turnTimer = 1 + Math.random() * 3
++          s.speed = 0.3 + Math.random() * 0.3
++        }
+       }
        // Check if heading toward pond edge
        const distFromCenter = Math.hypot(pos.x, pos.z)
        if (distFromCenter > pondRadius * 0.75) {
--        // Calculate angle to center
          const toCenter = Math.atan2(-pos.x, -pos.z)
          let turnNeeded = toCenter - koi.group.rotation.y
          while (turnNeeded > Math.PI) turnNeeded -= Math.PI * 2
          while (turnNeeded < -Math.PI) turnNeeded += Math.PI * 2
--
--        // Steer back toward center
          s.targetTurnRate = Math.sign(turnNeeded) * 1.5
+       }
        // Apply rotation
        koi.group.rotation.y += s.turnRate * delta
--      // Move forward (in the direction the fish is facing, which is +Z in local space)
++      // Move forward
--      const speed = isPanicked ? s.speed * 2.5 : s.speed
--
--      // Get forward direction from rotation
        const forwardX = Math.sin(koi.group.rotation.y)
        const forwardZ = Math.cos(koi.group.rotation.y)
++      pos.x += forwardX * s.speed * delta
++      pos.z += forwardZ * s.speed * delta
--      pos.x += forwardX * speed * delta
++      // Tail wiggle
--      pos.z += forwardZ * speed * delta
++      const wiggleSpeed = s.attractedTo ? 14 : 10
--
++      const wiggleAmount = s.attractedTo ? 0.35 : 0.25
--      // Tail wiggle - faster when moving fast
--      const wiggleSpeed = isPanicked ? 18 : 10
--      const wiggleAmount = isPanicked ? 0.4 : 0.25
        koi.tail.rotation.y = Math.sin(elapsed * wiggleSpeed + s.flickerPhase) * wiggleAmount
        // Gentle vertical bob
          pos.z *= scale
+       }
+     }
++
++    // Update sparkle particles
++    updateSparkles(delta)
+   }
    return {
      group,
      update,
      triggerPanic,
--    getKois: () => kois.map(k => k.group)
++    attractToBread,
++    getKoiUnderPosition,
++    startCapture,
++    updateCapture,
++    cancelCapture,
++    getKois: () => kois.filter(k => !k.state.captured).map(k => k.group)
+   }
+ }

src/renderers/three/narwhal.jsmodified

  export function createDonny(scene, gradientMap) {
    const group = new THREE.Group()
--  // Color palette
++  // Store gradientMap for accessory creation
--  const bodyColor = 0x7a9eb8 // Dusty blue-grey
++  const storedGradientMap = gradientMap
--  const bellyColor = 0xc8d8e4 // Pale belly
++
--  const tuskColor = 0xf5f0e6 // Ivory
++  // Default colors
--  const monocleColor = 0xd4af37 // Gold
++  const defaultColors = {
++    body: 0x7a9eb8,
++    belly: 0xc8d8e4,
++    monocleRim: 0xd4af37,
++    monocleGlass: 0x88ccff
++  }
--  // Materials
++  // Materials (stored for outfit swapping)
    const bodyMaterial = new THREE.MeshToonMaterial({
--    color: bodyColor,
++    color: defaultColors.body,
      gradientMap: gradientMap
    })
    const bellyMaterial = new THREE.MeshToonMaterial({
--    color: bellyColor,
++    color: defaultColors.belly,
      gradientMap: gradientMap
    })
    const tuskMaterial = new THREE.MeshToonMaterial({
--    color: tuskColor,
++    color: 0xf5f0e6,
      gradientMap: gradientMap
    })
    const monocleMaterial = new THREE.MeshToonMaterial({
--    color: monocleColor,
++    color: defaultColors.monocleRim,
      gradientMap: gradientMap
    })
    const glassMaterial = new THREE.MeshBasicMaterial({
--    color: 0x88ccff,
++    color: defaultColors.monocleGlass,
      transparent: true,
      opacity: 0.3
    })
++  // Accessory tracking
++  const accessories = {
++    head: null
++  }
++
++  // Mount points
++  const mountPoints = {
++    head: new THREE.Vector3(1.0, 0.55, 0)
++  }
++
    // Main body - elongated oval
    const bodyGeom = new THREE.SphereGeometry(0.5, 8, 6)
    bodyGeom.scale(2.2, 0.7, 0.8)
    // Chain (simple dangling segments)
    const chainMaterial = new THREE.MeshToonMaterial({
--    color: monocleColor,
++    color: defaultColors.monocleRim,
      gradientMap: gradientMap
    })
    for (let i = 0; i < 4; i++) {
    // State
    const state = {
--    mode: 'waiting', // 'waiting', 'rumbling', 'emerging', 'surfaced', 'submerging'
++    mode: 'waiting', // 'waiting', 'rumbling', 'emerging', 'surfaced', 'submerging', 'shop_approaching', 'shop_ready', 'shop_departing'
      timer: 30 + Math.random() * 30, // First appearance in 30-60 seconds
      emergeX: 0,
      emergeZ: 0,
--    surfaceTime: 0
++    surfaceTime: 0,
++    // Shop state
++    shopMode: false,
++    shopCooldown: 0,
++    onShopReady: null
+   }
++  // Shop trigger thresholds
++  const SHOP_KOI_THRESHOLD = 5 // Lower threshold for first shop experience
++  const SHOP_COOLDOWN = 45 // seconds between shop approaches
++
    function startRumble(pond) {
      state.mode = 'rumbling'
      state.timer = 0
--    // Pick random spot in the pond
++    // Pick random spot in the pond, avoiding forbidden zones (dock, boat)
--    const angle = Math.random() * Math.PI * 2
++    let attempts = 0
--    const dist = Math.random() * pond.radius * 0.5 + pond.radius * 0.2
++    let angle, dist
--    state.emergeX = Math.cos(angle) * dist
++    do {
--    state.emergeZ = Math.sin(angle) * dist
++      angle = Math.random() * Math.PI * 2
++      dist = Math.random() * pond.radius * 0.5 + pond.radius * 0.2
++      state.emergeX = Math.cos(angle) * dist
++      state.emergeZ = Math.sin(angle) * dist
++      attempts++
++    } while (!pond.isValidEmergenceSpot(state.emergeX, state.emergeZ) && attempts < 20)
      group.position.x = state.emergeX
      group.position.z = state.emergeZ
      group.rotation.y = angle + Math.PI / 2 // Face outward-ish
+   }
++  function startShopApproach(pond, doug) {
++    state.mode = 'shop_approaching'
++    state.shopMode = true
++    state.timer = 0
++
++    // Emerge near Doug
++    const dougPos = doug.getPosition()
++    const approachAngle = Math.random() * Math.PI * 2
++    const approachDist = 1.5 // Close to Doug
++
++    state.emergeX = dougPos.x + Math.cos(approachAngle) * approachDist
++    state.emergeZ = dougPos.z + Math.sin(approachAngle) * approachDist
++
++    // Clamp to pond bounds
++    const distFromCenter = Math.hypot(state.emergeX, state.emergeZ)
++    if (distFromCenter > pond.radius * 0.85) {
++      const scale = (pond.radius * 0.85) / distFromCenter
++      state.emergeX *= scale
++      state.emergeZ *= scale
++    }
++
++    group.position.x = state.emergeX
++    group.position.z = state.emergeZ
++    group.visible = true
++    group.position.y = -2
++  }
++
    // Helper to smoothly interpolate angles
    function lerpAngle(from, to, t) {
      let diff = to - from
            group.rotation.z = 0
+         }
          break
++
++      case 'shop_approaching':
++        // Rise from water for shop
++        const shopEmergeProgress = Math.min(state.timer / 1.2, 1)
++        const shopEaseOut = 1 - Math.pow(1 - shopEmergeProgress, 3)
++        group.position.y = -2 + shopEaseOut * 2.25
++
++        // Face Doug
++        group.rotation.y = lerpAngle(group.rotation.y, angleToDoug, delta * 0.8)
++        group.rotation.z = 0.87 * shopEaseOut
++
++        if (shopEmergeProgress >= 1) {
++          state.mode = 'shop_ready'
++          state.timer = 0
++          // Trigger shop UI callback
++          if (state.onShopReady) {
++            state.onShopReady('donny')
++          }
++        }
++        break
++
++      case 'shop_ready':
++        // Bob gently while shop is open
++        group.position.y = 0.25 + Math.sin(elapsed * 2) * 0.06
++        group.rotation.y = lerpAngle(group.rotation.y, angleToDoug, delta * 0.3)
++        group.rotation.z = 0.87 + Math.sin(elapsed * 1.5) * 0.04
++
++        // Follow Doug while talking - swim toward him
++        if (doug) {
++          const dougPos = doug.getPosition()
++          const dx = dougPos.x - group.position.x
++          const dz = dougPos.z - group.position.z
++          const distToDoug = Math.hypot(dx, dz)
++          const minDist = 1.0 // Keep some distance from Doug
++
++          if (distToDoug > minDist) {
++            // Swim toward Doug - faster when farther away
++            const approachSpeed = Math.min(distToDoug * 0.5, 1.5) * delta
++            group.position.x += (dx / distToDoug) * approachSpeed
++            group.position.z += (dz / distToDoug) * approachSpeed
++
++            // Clamp to pond bounds
++            const distFromCenter = Math.hypot(group.position.x, group.position.z)
++            if (distFromCenter > pond.radius * 0.85) {
++              const scale = (pond.radius * 0.85) / distFromCenter
++              group.position.x *= scale
++              group.position.z *= scale
++            }
++          }
++        }
++
++        // Flipper animation
++        leftFlipper.rotation.z = 2.2 + Math.sin(elapsed * 3) * 0.15
++        rightFlipper.rotation.z = 2.2 + Math.sin(elapsed * 3 + 0.5) * 0.15
++
++        // Occasional ripples
++        if (Math.random() < delta * 0.5) {
++          pond.addRipple(
++            group.position.x + (Math.random() - 0.5) * 0.5,
++            group.position.z + (Math.random() - 0.5) * 0.5
++          )
++        }
++        // Stay in this state until dismissShop() is called
++        break
++
++      case 'shop_departing':
++        // Sink back down after shop closes
++        const shopSubmergeProgress = Math.min(state.timer / 1.2, 1)
++        const shopEaseIn = Math.pow(shopSubmergeProgress, 2)
++        group.position.y = 0.25 - shopEaseIn * 2.5
++        group.rotation.z = 0.87 - shopEaseIn * 1.1
++
++        if (Math.random() < delta * 4) {
++          pond.addRipple(
++            group.position.x + (Math.random() - 0.5) * 0.6,
++            group.position.z + (Math.random() - 0.5) * 0.6
++          )
++        }
++
++        if (shopSubmergeProgress >= 1) {
++          state.mode = 'waiting'
++          state.timer = 0
++          state.shopMode = false
++          state.shopCooldown = SHOP_COOLDOWN
++          group.visible = false
++          group.position.y = -3
++          group.rotation.x = 0
++          group.rotation.z = 0
++        }
++        break
++    }
++
++    // Decrement shop cooldown
++    if (state.shopCooldown > 0) {
++      state.shopCooldown -= delta
++    }
++  }
++
++  // Try to trigger shop approach (called from main loop)
++  function tryTriggerShop(koiCount, pond, doug) {
++    if (state.shopCooldown > 0) return false
++    if (koiCount < SHOP_KOI_THRESHOLD) return false
++
++    // If waiting, do full approach sequence
++    if (state.mode === 'waiting') {
++      startShopApproach(pond, doug)
++      return true
++    }
++
++    // If already surfaced, transition directly to shop mode
++    if (state.mode === 'surfaced') {
++      state.mode = 'shop_ready'
++      state.shopMode = true
++      state.timer = 0
++      if (state.onShopReady) {
++        state.onShopReady('donny')
++      }
++      return true
++    }
++
++    return false
++  }
++
++  // Dismiss shop and start departing
++  function dismissShop() {
++    if (state.mode === 'shop_ready') {
++      state.mode = 'shop_departing'
++      state.timer = 0
++    }
++  }
++
++  // Set callback for when shop is ready
++  function setShopReadyCallback(callback) {
++    state.onShopReady = callback
++  }
++
++  // Check if in shop mode
++  function isInShopMode() {
++    return state.shopMode
++  }
++
++  // Apply an outfit to Donny
++  function applyOutfit(outfit) {
++    if (!outfit) return
++
++    switch (outfit.type) {
++      case 'color_body':
++        if (outfit.colors) {
++          if (outfit.colors.body) bodyMaterial.color.setHex(outfit.colors.body)
++          if (outfit.colors.belly) bellyMaterial.color.setHex(outfit.colors.belly)
++        }
++        break
++
++      case 'accessory_face':
++        // Monocle color swap
++        if (outfit.colors) {
++          if (outfit.colors.rim) monocleMaterial.color.setHex(outfit.colors.rim)
++          if (outfit.colors.glass) glassMaterial.color.setHex(outfit.colors.glass)
++        }
++        break
++
++      case 'accessory_head':
++        // Remove existing head accessory
++        if (accessories.head) {
++          group.remove(accessories.head)
++          accessories.head = null
++        }
++        // Add new accessory
++        if (outfit.meshFactory) {
++          accessories.head = outfit.meshFactory(storedGradientMap)
++          accessories.head.position.copy(mountPoints.head)
++          group.add(accessories.head)
++        }
++        break
++    }
++  }
++
++  // Remove an outfit from Donny
++  function removeOutfit(outfit) {
++    if (!outfit) return
++
++    switch (outfit.type) {
++      case 'color_body':
++        bodyMaterial.color.setHex(defaultColors.body)
++        bellyMaterial.color.setHex(defaultColors.belly)
++        break
++
++      case 'accessory_face':
++        monocleMaterial.color.setHex(defaultColors.monocleRim)
++        glassMaterial.color.setHex(defaultColors.monocleGlass)
++        break
++
++      case 'accessory_head':
++        if (accessories.head) {
++          group.remove(accessories.head)
++          accessories.head = null
++        }
++        break
++    }
++  }
++
++  // Check if Donny can be tapped to open shop
++  function isTappable() {
++    // Tappable when visible and surfaced (not emerging/submerging)
++    return group.visible && (state.mode === 'surfaced' || state.mode === 'shop_ready')
++  }
++
++  // Manually trigger shop (for tap-to-shop feature)
++  function triggerShopFromTap(pond, doug) {
++    if (state.mode === 'surfaced') {
++      // Already surfaced - transition to shop mode
++      state.mode = 'shop_ready'
++      state.shopMode = true
++      state.timer = 0
++      if (state.onShopReady) {
++        state.onShopReady('donny')
++      }
++      return true
+     }
++    return false
+   }
    return {
      group,
--    update
++    update,
++    tryTriggerShop,
++    dismissShop,
++    setShopReadyCallback,
++    isInShopMode,
++    isTappable,
++    triggerShopFromTap,
++    applyOutfit,
++    removeOutfit
+   }
+ }

src/renderers/three/octopus.jsmodified

  export function createOllie(scene, gradientMap) {
    const group = new THREE.Group()
--  // Color palette - purple theme
++  // Store gradientMap for accessory creation
--  const bodyColor = 0x7b4b94 // Deep purple
++  const storedGradientMap = gradientMap
--  const bellyColor = 0xb89bc9 // Lighter lavender
++
--  const suckerColor = 0xd4a5c9 // Pink-ish
++  // Default colors - purple theme
--  const glassRimColor = 0xd4af37 // Gold
++  const defaultColors = {
++    body: 0x7b4b94,
++    belly: 0xb89bc9,
++    suckers: 0xd4a5c9,
++    magRim: 0xd4af37,
++    magGlass: 0x88ccff
++  }
--  // Materials
++  // Materials (stored for outfit swapping)
    const bodyMaterial = new THREE.MeshToonMaterial({
--    color: bodyColor,
++    color: defaultColors.body,
      gradientMap: gradientMap
    })
    const bellyMaterial = new THREE.MeshToonMaterial({
--    color: bellyColor,
++    color: defaultColors.belly,
      gradientMap: gradientMap
    })
    const suckerMaterial = new THREE.MeshToonMaterial({
--    color: suckerColor,
++    color: defaultColors.suckers,
      gradientMap: gradientMap
    })
    const glassRimMaterial = new THREE.MeshToonMaterial({
--    color: glassRimColor,
++    color: defaultColors.magRim,
      gradientMap: gradientMap
    })
    const glassMaterial = new THREE.MeshBasicMaterial({
--    color: 0x88ccff,
++    color: defaultColors.magGlass,
      transparent: true,
      opacity: 0.3
    })
++  // Accessory tracking
++  const accessories = {
++    head: null
++  }
++
++  // Mount points
++  const mountPoints = {
++    head: new THREE.Vector3(0, 0.95, 0)
++  }
++
    // Head/Mantle - bulbous dome
    const mantleGeom = new THREE.SphereGeometry(0.5, 10, 8)
    mantleGeom.scale(1.2, 1.4, 1.0)
      timer: 45 + Math.random() * 30, // First appearance in 45-75 seconds (after narwhal)
      emergeX: 0,
      emergeZ: 0,
--    surfaceTime: 0
++    surfaceTime: 0,
++    // Shop state
++    shopMode: false,
++    shopCooldown: 0,
++    onShopReady: null
+   }
++  // Shop trigger thresholds
++  const SHOP_KOI_THRESHOLD = 10 // Second shop unlocks after Donny
++  const SHOP_COOLDOWN = 45 // seconds between shop approaches
++
    function createTentacle(bodyMat, suckerMat, gradient) {
      // Build tentacle as a chain of segments, each one a child of the previous
      // This creates a smooth curve by rotating each joint
      state.mode = 'rumbling'
      state.timer = 0
--    // Pick random spot in outer zone of pond (70-90% radius)
++    // Pick random spot in outer zone of pond (70-90% radius), avoiding forbidden zones
--    const angle = Math.random() * Math.PI * 2
++    let attempts = 0
--    const dist = Math.random() * pond.radius * 0.2 + pond.radius * 0.7
++    let angle, dist
--    state.emergeX = Math.cos(angle) * dist
++    do {
--    state.emergeZ = Math.sin(angle) * dist
++      angle = Math.random() * Math.PI * 2
++      dist = Math.random() * pond.radius * 0.2 + pond.radius * 0.7
++      state.emergeX = Math.cos(angle) * dist
++      state.emergeZ = Math.sin(angle) * dist
++      attempts++
++    } while (!pond.isValidEmergenceSpot(state.emergeX, state.emergeZ) && attempts < 20)
      group.position.x = state.emergeX
      group.position.z = state.emergeZ
      group.rotation.y = angle + Math.PI / 2
+   }
++  function startShopApproach(pond, doug) {
++    state.mode = 'shop_approaching'
++    state.shopMode = true
++    state.timer = 0
++
++    // Emerge near Doug
++    const dougPos = doug.getPosition()
++    const approachAngle = Math.random() * Math.PI * 2
++    const approachDist = 1.5
++
++    state.emergeX = dougPos.x + Math.cos(approachAngle) * approachDist
++    state.emergeZ = dougPos.z + Math.sin(approachAngle) * approachDist
++
++    // Clamp to pond bounds
++    const distFromCenter = Math.hypot(state.emergeX, state.emergeZ)
++    if (distFromCenter > pond.radius * 0.85) {
++      const scale = (pond.radius * 0.85) / distFromCenter
++      state.emergeX *= scale
++      state.emergeZ *= scale
++    }
++
++    group.position.x = state.emergeX
++    group.position.z = state.emergeZ
++    group.visible = true
++    group.position.y = -2
++  }
++
    // Helper to smoothly interpolate angles
    function lerpAngle(from, to, t) {
      let diff = to - from
            group.rotation.z = 0
+         }
          break
++
++      case 'shop_approaching':
++        // Rise from water for shop
++        const shopEmergeProgress = Math.min(state.timer / 1.5, 1)
++        const shopEaseOut = 1 - Math.pow(1 - shopEmergeProgress, 3)
++        group.position.y = -2 + shopEaseOut * 2.2
++
++        // Face Doug
++        group.rotation.y = lerpAngle(group.rotation.y, angleToDoug, delta * 0.8)
++
++        // Animate tentacles during emergence
++        tentacles.forEach((t, i) => {
++          const baseAngle = (i / 8) * Math.PI * 2
++          const phase = i * (Math.PI / 4)
++          t.rotation.y = baseAngle + Math.sin(elapsed * 1.5 + phase) * 0.12
++          t.rotation.x = Math.sin(elapsed * 2 + phase) * 0.08
++        })
++
++        if (shopEmergeProgress >= 1) {
++          state.mode = 'shop_ready'
++          state.timer = 0
++          if (state.onShopReady) {
++            state.onShopReady('ollie')
++          }
++        }
++        break
++
++      case 'shop_ready':
++        // Bob gently while shop is open
++        group.position.y = 0.2 + Math.sin(elapsed * 2) * 0.05
++        group.rotation.y = lerpAngle(group.rotation.y, angleToDoug, delta * 0.4)
++        group.rotation.x = Math.sin(elapsed * 1.2) * 0.03
++        group.rotation.z = Math.cos(elapsed * 1.0) * 0.02
++
++        // Follow Doug while talking - Ollie is eager and curious!
++        if (doug) {
++          const dougPos = doug.getPosition()
++          const dx = dougPos.x - group.position.x
++          const dz = dougPos.z - group.position.z
++          const distToDoug = Math.hypot(dx, dz)
++          const minDist = 0.8 // Ollie gets closer (curious!)
++
++          if (distToDoug > minDist) {
++            // Swim toward Doug - faster when farther, Ollie is eager!
++            const approachSpeed = Math.min(distToDoug * 0.6, 1.8) * delta
++            group.position.x += (dx / distToDoug) * approachSpeed
++            group.position.z += (dz / distToDoug) * approachSpeed
++
++            // Clamp to pond bounds
++            const distFromCenter = Math.hypot(group.position.x, group.position.z)
++            if (distFromCenter > pond.radius * 0.85) {
++              const scale = (pond.radius * 0.85) / distFromCenter
++              group.position.x *= scale
++              group.position.z *= scale
++            }
++          }
++        }
++
++        // Tentacle animation
++        tentacles.forEach((t, i) => {
++          const baseAngle = (i / 8) * Math.PI * 2
++          const phase = i * (Math.PI / 4)
++          t.rotation.y = baseAngle + Math.sin(elapsed * 1.5 + phase) * 0.12
++          t.rotation.x = Math.sin(elapsed * 2 + phase) * 0.08
++        })
++
++        // Magnifying glass wobble
++        magGlassGroup.rotation.z = Math.sin(elapsed * 3) * 0.1
++        magGlassGroup.rotation.y = Math.sin(elapsed * 2) * 0.15
++
++        // Occasional ripples
++        if (Math.random() < delta * 0.4) {
++          pond.addRipple(
++            group.position.x + (Math.random() - 0.5) * 0.6,
++            group.position.z + (Math.random() - 0.5) * 0.6
++          )
++        }
++        break
++
++      case 'shop_departing':
++        const shopSubmergeProgress = Math.min(state.timer / 1.5, 1)
++        const shopEaseIn = Math.pow(shopSubmergeProgress, 2)
++        group.position.y = 0.2 - shopEaseIn * 2.5
++
++        // Tentacles curl as departing
++        tentacles.forEach((t, i) => {
++          const baseAngle = (i / 8) * Math.PI * 2
++          const phase = i * (Math.PI / 4)
++          t.rotation.y = baseAngle + Math.sin(elapsed * 2 + phase) * 0.05
++          t.rotation.x = shopEaseIn * 0.4 + Math.sin(elapsed * 2 + phase) * 0.05
++        })
++
++        if (Math.random() < delta * 5) {
++          pond.addRipple(
++            group.position.x + (Math.random() - 0.5) * 0.8,
++            group.position.z + (Math.random() - 0.5) * 0.8
++          )
++        }
++
++        if (shopSubmergeProgress >= 1) {
++          state.mode = 'waiting'
++          state.timer = 0
++          state.shopMode = false
++          state.shopCooldown = SHOP_COOLDOWN
++          group.visible = false
++          group.position.y = -3
++          group.rotation.x = 0
++          group.rotation.z = 0
++        }
++        break
++    }
++
++    // Decrement shop cooldown
++    if (state.shopCooldown > 0) {
++      state.shopCooldown -= delta
++    }
++  }
++
++  // Try to trigger shop approach
++  function tryTriggerShop(koiCount, pond, doug) {
++    if (state.shopCooldown > 0) return false
++    if (koiCount < SHOP_KOI_THRESHOLD) return false
++
++    // If waiting, do full approach sequence
++    if (state.mode === 'waiting') {
++      startShopApproach(pond, doug)
++      return true
++    }
++
++    // If already surfaced, transition directly to shop mode
++    if (state.mode === 'surfaced') {
++      state.mode = 'shop_ready'
++      state.shopMode = true
++      state.timer = 0
++      if (state.onShopReady) {
++        state.onShopReady('ollie')
++      }
++      return true
++    }
++
++    return false
++  }
++
++  // Dismiss shop and start departing
++  function dismissShop() {
++    if (state.mode === 'shop_ready') {
++      state.mode = 'shop_departing'
++      state.timer = 0
++    }
++  }
++
++  // Set callback for when shop is ready
++  function setShopReadyCallback(callback) {
++    state.onShopReady = callback
++  }
++
++  // Check if in shop mode
++  function isInShopMode() {
++    return state.shopMode
++  }
++
++  // Apply an outfit to Ollie
++  function applyOutfit(outfit) {
++    if (!outfit) return
++
++    switch (outfit.type) {
++      case 'color_body':
++        if (outfit.colors) {
++          if (outfit.colors.body) bodyMaterial.color.setHex(outfit.colors.body)
++          if (outfit.colors.belly) bellyMaterial.color.setHex(outfit.colors.belly)
++          if (outfit.colors.suckers) suckerMaterial.color.setHex(outfit.colors.suckers)
++        }
++        break
++
++      case 'accessory_held':
++        // Magnifying glass color swap
++        if (outfit.colors) {
++          if (outfit.colors.rim) glassRimMaterial.color.setHex(outfit.colors.rim)
++          if (outfit.colors.glass) glassMaterial.color.setHex(outfit.colors.glass)
++        }
++        break
++
++      case 'accessory_head':
++        // Remove existing head accessory
++        if (accessories.head) {
++          group.remove(accessories.head)
++          accessories.head = null
++        }
++        // Add new accessory
++        if (outfit.meshFactory) {
++          accessories.head = outfit.meshFactory(storedGradientMap)
++          accessories.head.position.copy(mountPoints.head)
++          group.add(accessories.head)
++        }
++        break
++    }
++  }
++
++  // Remove an outfit from Ollie
++  function removeOutfit(outfit) {
++    if (!outfit) return
++
++    switch (outfit.type) {
++      case 'color_body':
++        bodyMaterial.color.setHex(defaultColors.body)
++        bellyMaterial.color.setHex(defaultColors.belly)
++        suckerMaterial.color.setHex(defaultColors.suckers)
++        break
++
++      case 'accessory_held':
++        glassRimMaterial.color.setHex(defaultColors.magRim)
++        glassMaterial.color.setHex(defaultColors.magGlass)
++        break
++
++      case 'accessory_head':
++        if (accessories.head) {
++          group.remove(accessories.head)
++          accessories.head = null
++        }
++        break
++    }
++  }
++
++  // Check if Ollie can be tapped to open shop
++  function isTappable() {
++    // Tappable when visible and surfaced (not emerging/submerging)
++    return group.visible && (state.mode === 'surfaced' || state.mode === 'shop_ready')
++  }
++
++  // Manually trigger shop (for tap-to-shop feature)
++  function triggerShopFromTap(pond, doug) {
++    if (state.mode === 'surfaced') {
++      // Already surfaced - transition to shop mode
++      state.mode = 'shop_ready'
++      state.shopMode = true
++      state.timer = 0
++      if (state.onShopReady) {
++        state.onShopReady('ollie')
++      }
++      return true
+     }
++    return false
+   }
    return {
      group,
--    update
++    update,
++    tryTriggerShop,
++    dismissShop,
++    setShopReadyCallback,
++    isInShopMode,
++    isTappable,
++    triggerShopFromTap,
++    applyOutfit,
++    removeOutfit
+   }
+ }

src/renderers/three/pond.jsmodified

    // ============================================
    const boathouse = new THREE.Group()
--  const boathouseX = -4.2
++  const boathouseX = -3.3
--  const boathouseZ = 3.2
++  const boathouseZ = 3.8
    // Boathouse materials
    const boathouseWoodMaterial = new THREE.MeshToonMaterial({
    group.add(boathouse)
++  // ============================================
++  // ROWBOAT - floating by the dock
++  // ============================================
++
++  const rowboat = new THREE.Group()
++
++  const rowboatWoodMaterial = new THREE.MeshToonMaterial({
++    color: 0x6b4423, // Dark wood
++    gradientMap: gradientMap
++  })
++  const rowboatTrimMaterial = new THREE.MeshToonMaterial({
++    color: 0x8b5a2b, // Lighter trim
++    gradientMap: gradientMap
++  })
++
++  // Boat hull - elongated bowl shape using lathe geometry
++  const hullPoints = []
++  hullPoints.push(new THREE.Vector2(0, 0))
++  hullPoints.push(new THREE.Vector2(0.18, 0))
++  hullPoints.push(new THREE.Vector2(0.22, 0.03))
++  hullPoints.push(new THREE.Vector2(0.22, 0.1))
++  hullPoints.push(new THREE.Vector2(0.18, 0.14))
++  hullPoints.push(new THREE.Vector2(0, 0.14))
++
++  const hullGeom = new THREE.LatheGeometry(hullPoints, 8)
++  hullGeom.scale(1, 1, 2.2) // Stretch into boat shape
++  const hull = new THREE.Mesh(hullGeom, rowboatWoodMaterial)
++  hull.rotation.x = Math.PI // Flip right side up
++  hull.position.y = 0.14
++  rowboat.add(hull)
++
++  // Boat seats (thwarts)
++  const seatGeom = new THREE.BoxGeometry(0.32, 0.02, 0.08)
++  const seat1 = new THREE.Mesh(seatGeom, rowboatTrimMaterial)
++  seat1.position.set(0, 0.08, 0.15)
++  rowboat.add(seat1)
++  const seat2 = new THREE.Mesh(seatGeom, rowboatTrimMaterial)
++  seat2.position.set(0, 0.08, -0.15)
++  rowboat.add(seat2)
++
++  // Oars resting in boat
++  const oarMaterial = new THREE.MeshToonMaterial({
++    color: 0x9b7b4a,
++    gradientMap: gradientMap
++  })
++  const oarHandleGeom = new THREE.CylinderGeometry(0.012, 0.012, 0.5, 6)
++  const oarBladeGeom = new THREE.BoxGeometry(0.06, 0.01, 0.15)
++
++  // Left oar
++  const oar1 = new THREE.Group()
++  const oarHandle1 = new THREE.Mesh(oarHandleGeom, oarMaterial)
++  oarHandle1.rotation.z = Math.PI / 2
++  oar1.add(oarHandle1)
++  const oarBlade1 = new THREE.Mesh(oarBladeGeom, oarMaterial)
++  oarBlade1.position.x = 0.28
++  oar1.add(oarBlade1)
++  oar1.position.set(0.12, 0.1, 0)
++  oar1.rotation.y = 0.15
++  rowboat.add(oar1)
++
++  // Right oar
++  const oar2 = new THREE.Group()
++  const oarHandle2 = new THREE.Mesh(oarHandleGeom, oarMaterial)
++  oarHandle2.rotation.z = Math.PI / 2
++  oar2.add(oarHandle2)
++  const oarBlade2 = new THREE.Mesh(oarBladeGeom, oarMaterial)
++  oarBlade2.position.x = -0.28
++  oar2.add(oarBlade2)
++  oar2.position.set(-0.12, 0.1, 0)
++  oar2.rotation.y = -0.15
++  rowboat.add(oar2)
++
++  // Position rowboat by the dock (in the water)
++  // Place it at the pond edge near the dock - inside the water
++  const rowboatAngle = Math.atan2(boathouseZ, boathouseX) // Angle from center to boathouse
++  const rowboatDist = 2.7 // Closer to pond center
++  rowboat.position.set(
++    Math.cos(rowboatAngle) * rowboatDist,
++    0,
++    Math.sin(rowboatAngle) * rowboatDist
++  )
++  rowboat.rotation.y = rowboatAngle + Math.PI / 2 + 0.2 // Parallel to shore, slightly askew
++  rowboat.userData.baseY = 0
++  rowboat.userData.baseX = rowboat.position.x
++  rowboat.userData.baseZ = rowboat.position.z
++  rowboat.userData.phase = Math.random() * Math.PI * 2
++  rowboat.userData.lastRipple = 0
++
++  group.add(rowboat)
++
    // ============================================
    // TREES - scattered around the edges
    // ============================================
        createSmokeParticle()
+     }
++    // Animate rowboat - gentle bobbing and rocking
++    const boatPhase = rowboat.userData.phase
++    rowboat.position.y = rowboat.userData.baseY + Math.sin(elapsed * 1.2 + boatPhase) * 0.025
++    rowboat.rotation.x = Math.sin(elapsed * 0.8 + boatPhase) * 0.03
++    rowboat.rotation.z = Math.sin(elapsed * 1.0 + boatPhase + 1) * 0.025
++    // Slight drift/tug motion
++    rowboat.position.x = rowboat.userData.baseX + Math.sin(elapsed * 0.5 + boatPhase) * 0.015
++    rowboat.position.z = rowboat.userData.baseZ + Math.cos(elapsed * 0.4 + boatPhase) * 0.015
++
++    // Occasional ripples from rowboat
++    rowboat.userData.lastRipple += delta
++    if (rowboat.userData.lastRipple > 2.5 + Math.random() * 2) {
++      rowboat.userData.lastRipple = 0
++      addRipple(
++        rowboat.position.x + (Math.random() - 0.5) * 0.3,
++        rowboat.position.z + (Math.random() - 0.5) * 0.3
++      )
++    }
++
      // Update smoke particles
      for (let i = smokeParticles.length - 1; i >= 0; i--) {
        const smoke = smokeParticles[i]
    scene.add(group)
++  // Forbidden zones for creature emergence (dock and rowboat areas)
++  const forbiddenZones = [
++    { x: rowboat.position.x, z: rowboat.position.z, radius: 0.8 }, // Rowboat
++    { // Dock area - extends from boathouse toward pond
++      x: boathouseX + Math.cos(Math.PI / 4 + 0.3) * 1.5,
++      z: boathouseZ + Math.sin(Math.PI / 4 + 0.3) * 1.5,
++      radius: 1.2
++    }
++  ]
++
++  function isValidEmergenceSpot(x, z) {
++    for (const zone of forbiddenZones) {
++      const dx = x - zone.x
++      const dz = z - zone.z
++      const dist = Math.sqrt(dx * dx + dz * dz)
++      if (dist < zone.radius) {
++        return false
++      }
++    }
++    return true
++  }
++
++  // Add a new forbidden zone (for placed buildings)
++  function addForbiddenZone(x, z, zoneRadius) {
++    forbiddenZones.push({ x, z, radius: zoneRadius })
++  }
++
++  // Snap zones for building placement
++  // Each zone has: id, position, angle (rotation), type, allowed buildings, occupied status
++  const snapZones = [
++    // Water edge zones (for docks, fishing huts)
++    { id: 'water_n', x: 0, z: -4.3, angle: Math.PI, type: 'waterEdge', allowedBuildings: ['dock_wooden', 'fishing_hut', 'reeds'], occupied: false },
++    { id: 'water_ne', x: 3.0, z: -3.0, angle: Math.PI * 0.75, type: 'waterEdge', allowedBuildings: ['dock_wooden', 'fishing_hut', 'reeds'], occupied: false },
++    { id: 'water_e', x: 4.3, z: 0, angle: Math.PI * 0.5, type: 'waterEdge', allowedBuildings: ['dock_wooden', 'fishing_hut', 'reeds'], occupied: false },
++    { id: 'water_se', x: 3.0, z: 3.0, angle: Math.PI * 0.25, type: 'waterEdge', allowedBuildings: ['dock_wooden', 'fishing_hut', 'reeds'], occupied: false },
++    { id: 'water_s', x: 0, z: 4.3, angle: 0, type: 'waterEdge', allowedBuildings: ['dock_wooden', 'fishing_hut', 'reeds'], occupied: false },
++
++    // Shore zones (for lighthouse, fence, onion house) - further from water
++    { id: 'shore_n', x: 0, z: -5.5, angle: Math.PI, type: 'shore', allowedBuildings: ['lighthouse', 'fence', 'onion_house'], occupied: false },
++    { id: 'shore_ne', x: 4.0, z: -4.0, angle: Math.PI * 0.75, type: 'shore', allowedBuildings: ['lighthouse', 'fence', 'onion_house'], occupied: false },
++    { id: 'shore_e', x: 5.5, z: 0, angle: Math.PI * 0.5, type: 'shore', allowedBuildings: ['lighthouse', 'fence', 'onion_house'], occupied: false },
++    { id: 'shore_se', x: 4.0, z: 4.0, angle: Math.PI * 0.25, type: 'shore', allowedBuildings: ['lighthouse', 'fence', 'onion_house'], occupied: false },
++    { id: 'shore_s', x: 0, z: 5.5, angle: 0, type: 'shore', allowedBuildings: ['lighthouse', 'fence', 'onion_house'], occupied: false },
++
++    // In-water zones (for reeds)
++    { id: 'water_inner_n', x: 0, z: -2.5, angle: Math.PI, type: 'water', allowedBuildings: ['reeds'], occupied: false },
++    { id: 'water_inner_e', x: 2.5, z: 0, angle: Math.PI * 0.5, type: 'water', allowedBuildings: ['reeds'], occupied: false },
++    { id: 'water_inner_s', x: 0, z: 2.5, angle: 0, type: 'water', allowedBuildings: ['reeds'], occupied: false },
++    { id: 'water_inner_w', x: -2.5, z: 0, angle: -Math.PI * 0.5, type: 'water', allowedBuildings: ['reeds'], occupied: false }
++  ]
++
++  // Get available snap zones for a building type
++  function getAvailableZones(buildingType) {
++    return snapZones.filter(zone =>
++      !zone.occupied && zone.allowedBuildings.includes(buildingType)
++    )
++  }
++
++  // Get zone by ID
++  function getZone(zoneId) {
++    return snapZones.find(z => z.id === zoneId)
++  }
++
++  // Mark a zone as occupied
++  function occupyZone(zoneId) {
++    const zone = getZone(zoneId)
++    if (zone) {
++      zone.occupied = true
++    }
++  }
++
++  // Find nearest valid zone to a point
++  function findNearestZone(x, z, buildingType, snapDistance = 1.5) {
++    const available = getAvailableZones(buildingType)
++    let nearest = null
++    let nearestDist = snapDistance
++
++    for (const zone of available) {
++      const dx = x - zone.x
++      const dz = z - zone.z
++      const dist = Math.sqrt(dx * dx + dz * dz)
++      if (dist < nearestDist) {
++        nearestDist = dist
++        nearest = zone
++      }
++    }
++
++    return nearest
++  }
++
    return {
      group,
      water,
      radius,
      addRipple,
--    update
++    update,
++    isValidEmergenceSpot,
++    addForbiddenZone,
++    snapZones,
++    getAvailableZones,
++    getZone,
++    occupyZone,
++    findNearestZone
+   }
+ }

src/renderers/three/shop/dialogScripts.jsadded

++// Dialog scripts for Donny and Ollie
++// Context-aware greetings and personality-driven lines
++
++import gameState from '../gameState.js'
++import inventory from './inventory.js'
++
++// Track if this is first meeting
++const STORAGE_KEY_MET = 'dougk-met-characters'
++
++function getMetCharacters() {
++  try {
++    return JSON.parse(localStorage.getItem(STORAGE_KEY_MET) || '{}')
++  } catch {
++    return {}
++  }
++}
++
++function markCharacterMet(character) {
++  const met = getMetCharacters()
++  met[character] = true
++  localStorage.setItem(STORAGE_KEY_MET, JSON.stringify(met))
++}
++
++function hasMetCharacter(character) {
++  return getMetCharacters()[character] || false
++}
++
++// Donny - Distinguished, formal, slightly pompous but endearing
++const DONNY_FIRST_MEETING = [
++  "Ah, a fellow connoisseur of the finer things...",
++  "I am Donny. Distinguished purveyor of exquisite wares.",
++  "I have procured some rather exceptional items...",
++  "Care to take a look?"
++]
++
++const DONNY_GREETINGS = [
++  [
++    "Ah, we meet again, my discerning friend...",
++    "I have acquired some new curiosities.",
++    "Shall we browse?"
++  ],
++  [
++    "How fortuitous! I was just thinking of you.",
++    "My collection has grown quite splendidly...",
++    "Care to peruse?"
++  ],
++  [
++    "Ah yes, the distinguished duck keeper returns!",
++    "I trust your pond prospers?",
++    "Perhaps some new finery is in order..."
++  ],
++  [
++    "Splendid to see you again!",
++    "I've been polishing the merchandise...",
++    "Only the finest for my favorite customer."
++  ]
++]
++
++const DONNY_HIGH_KOI = [
++  [
++    "My word! That is quite the koi fortune!",
++    "A collector of your caliber deserves only the best.",
++    "Allow me to show you my premium selection..."
++  ],
++  [
++    "Impressive! Your koi-catching prowess is legendary.",
++    "With wealth like that, anything is possible...",
++    "Shall we see what catches your eye?"
++  ]
++]
++
++const DONNY_REPEAT_VISITOR = [
++  [
++    "Back so soon? Excellent taste, as always.",
++    "I've kept the good stuff in the back...",
++    "Just for you, of course."
++  ],
++  [
++    "Ah, my most loyal patron returns!",
++    "I do so enjoy our little exchanges.",
++    "What shall it be today?"
++  ]
++]
++
++// Ollie - Curious, excitable, slightly scatterbrained
++const OLLIE_FIRST_MEETING = [
++  "Ooooh! Hello hello hello!",
++  "I'm Ollie! I've been watching you through my glass...",
++  "You catch the fishies! So clever!",
++  "I found some treasures! Wanna see wanna see?"
++]
++
++const OLLIE_GREETINGS = [
++  [
++    "Oh oh oh! It's you again!",
++    "I found MORE things! So many things!",
++    "Look look look!"
++  ],
++  [
++    "Hiii! I was hoping you'd come back!",
++    "I've been organizing my collection...",
++    "Well, TRYING to organize it anyway..."
++  ],
++  [
++    "There you are! I've been looking everywhere!",
++    "Wait, no, I was looking at stuff with my magnifier.",
++    "BUT NOW YOU'RE HERE! Perfect timing!"
++  ],
++  [
++    "*excited tentacle wiggles*",
++    "Friend friend friend! Welcome back!",
++    "I have oddities! Curiosities! Thingamabobs!"
++  ]
++]
++
++const OLLIE_HIGH_KOI = [
++  [
++    "WOW! Look at all those fishies!",
++    "You're like... a koi WIZARD!",
++    "I have special special things for special fishers!"
++  ],
++  [
++    "So many koi! How do you DO that?!",
++    "I tried counting them but I lost track at... um...",
++    "Anyway! TREASURES! I have them!"
++  ]
++]
++
++const OLLIE_REPEAT_VISITOR = [
++  [
++    "You came back! You came BACK!",
++    "I was worried you forgot about me...",
++    "Just kidding! I was busy looking at a rock. Wanna see?"
++  ],
++  [
++    "FRIEND! *happy bubbles*",
++    "I reorganized everything! Again!",
++    "It's a LITTLE messier but also better somehow?"
++  ]
++]
++
++function pickRandom(array) {
++  return array[Math.floor(Math.random() * array.length)]
++}
++
++export function getDialogForCharacter(character) {
++  const koiCount = gameState.getKoi()
++  const hasMet = hasMetCharacter(character)
++  const ownedCount = inventory.ownedItems.length
++
++  // Mark as met for next time
++  if (!hasMet) {
++    markCharacterMet(character)
++  }
++
++  if (character === 'donny') {
++    // First meeting
++    if (!hasMet) {
++      return DONNY_FIRST_MEETING
++    }
++
++    // High koi count (50+)
++    if (koiCount >= 50 && Math.random() < 0.5) {
++      return pickRandom(DONNY_HIGH_KOI)
++    }
++
++    // Repeat visitor with purchases
++    if (ownedCount >= 3 && Math.random() < 0.4) {
++      return pickRandom(DONNY_REPEAT_VISITOR)
++    }
++
++    // Standard greeting
++    return pickRandom(DONNY_GREETINGS)
++  }
++
++  if (character === 'ollie') {
++    // First meeting
++    if (!hasMet) {
++      return OLLIE_FIRST_MEETING
++    }
++
++    // High koi count (50+)
++    if (koiCount >= 50 && Math.random() < 0.5) {
++      return pickRandom(OLLIE_HIGH_KOI)
++    }
++
++    // Repeat visitor
++    if (ownedCount >= 3 && Math.random() < 0.4) {
++      return pickRandom(OLLIE_REPEAT_VISITOR)
++    }
++
++    // Standard greeting
++    return pickRandom(OLLIE_GREETINGS)
++  }
++
++  return ["Hello!"]
++}
++
++// Quick return lines - when player taps to summon them back
++const DONNY_TAP_RETURN = [
++  [
++    "Ah, you're back for more, eh?",
++    "I knew you would be.",
++    "Let's see what catches your fancy..."
++  ],
++  [
++    "Changed your mind? Excellent judgment.",
++    "The best customers always return.",
++    "Now then, shall we?"
++  ],
++  [
++    "Back so soon? Marvelous!",
++    "I was just about to polish my finest wares.",
++    "Your timing is impeccable."
++  ],
++  [
++    "Couldn't stay away, could you?",
++    "I completely understand.",
++    "Quality is irresistible, after all."
++  ]
++]
++
++const OLLIE_TAP_RETURN = [
++  [
++    "You tapped me! You TAPPED me!",
++    "I love taps! They're like underwater high-fives!",
++    "Okay okay, let's look at stuff!"
++  ],
++  [
++    "OOH! Hello again!",
++    "Did you forget something? I forget stuff ALL the time!",
++    "Let's see what I have..."
++  ],
++  [
++    "Back for more shinies?",
++    "I KNEW you liked the shinies!",
++    "Everyone likes shinies!"
++  ],
++  [
++    "*surprised wiggle*",
++    "Oh hi! I was just counting my tentacles...",
++    "Still eight! Anyway, SHOPPING TIME!"
++  ]
++]
++
++export function getReturnDialog(character) {
++  if (character === 'donny') {
++    return pickRandom(DONNY_TAP_RETURN)
++  }
++  if (character === 'ollie') {
++    return pickRandom(OLLIE_TAP_RETURN)
++  }
++  return ["Welcome back!"]
++}
++
++// Farewell lines (for future use when closing shop)
++export const FAREWELLS = {
++  donny: [
++    "Until next time, my friend.",
++    "Do come again. I'll save the best for you.",
++    "Farewell! May your pond flourish.",
++    "A pleasure, as always."
++  ],
++  ollie: [
++    "Bye bye bye! Come back soon!",
++    "See you later! I'll find more stuff!",
++    "*waves all tentacles* BYEEE!",
++    "Don't be a stranger! I'll be here! Looking at things!"
++  ]
++}

src/renderers/three/shop/dialogUI.jsadded

++// Animal Crossing-style dialog system for dougk
++// Typewriter text effect with character portraits
++
++import { playDialogBlip } from '../sounds.js'
++
++let dialogOverlay = null
++let currentDialog = null
++let currentLineIndex = 0
++let currentCharIndex = 0
++let isTyping = false
++let typeInterval = null
++let onCompleteCallback = null
++
++const TYPE_SPEED = 35 // ms per character
++const FAST_TYPE_SPEED = 10 // when holding/clicking during type
++
++const STYLES = `
++  .dialog-overlay {
++    position: fixed;
++    bottom: 0;
++    left: 0;
++    right: 0;
++    display: flex;
++    justify-content: center;
++    padding: 20px;
++    z-index: 1500;
++    pointer-events: none;
++  }
++
++  .dialog-box {
++    background: linear-gradient(180deg, #2a2218 0%, #1a1510 100%);
++    border: 4px solid #8b6914;
++    border-radius: 16px;
++    padding: 16px 20px;
++    max-width: 600px;
++    width: 90%;
++    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
++    pointer-events: auto;
++    cursor: pointer;
++    position: relative;
++  }
++
++  .dialog-header {
++    display: flex;
++    align-items: center;
++    gap: 12px;
++    margin-bottom: 12px;
++  }
++
++  .dialog-portrait {
++    width: 48px;
++    height: 48px;
++    border-radius: 50%;
++    display: flex;
++    align-items: center;
++    justify-content: center;
++    font-size: 28px;
++    flex-shrink: 0;
++  }
++
++  .dialog-portrait.donny {
++    background: linear-gradient(135deg, #7a9eb8 0%, #5a7e98 100%);
++    border: 3px solid #d4af37;
++  }
++
++  .dialog-portrait.ollie {
++    background: linear-gradient(135deg, #7b4b94 0%, #5b2b74 100%);
++    border: 3px solid #d4af37;
++  }
++
++  .dialog-name {
++    font-family: 'Courier New', monospace;
++    font-size: 18px;
++    font-weight: bold;
++    color: #ffd700;
++    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
++  }
++
++  .dialog-text {
++    font-family: 'Courier New', monospace;
++    font-size: 16px;
++    color: #e8d8c8;
++    line-height: 1.5;
++    min-height: 48px;
++  }
++
++  .dialog-continue {
++    position: absolute;
++    bottom: 12px;
++    right: 16px;
++    color: #ffd700;
++    font-size: 14px;
++    opacity: 0;
++    transition: opacity 0.3s;
++    animation: bounce 0.6s ease-in-out infinite;
++  }
++
++  .dialog-continue.visible {
++    opacity: 1;
++  }
++
++  @keyframes bounce {
++    0%, 100% { transform: translateY(0); }
++    50% { transform: translateY(-4px); }
++  }
++
++  .dialog-box.shake {
++    animation: dialogShake 0.1s ease-in-out;
++  }
++
++  @keyframes dialogShake {
++    0%, 100% { transform: translateX(0); }
++    25% { transform: translateX(-2px); }
++    75% { transform: translateX(2px); }
++  }
++`
++
++const CHARACTER_INFO = {
++  donny: {
++    name: 'Donny',
++    emoji: '🦄',
++    portrait: 'donny'
++  },
++  ollie: {
++    name: 'Ollie',
++    emoji: '🐙',
++    portrait: 'ollie'
++  }
++}
++
++function injectStyles() {
++  if (document.getElementById('dialog-styles')) return
++  const style = document.createElement('style')
++  style.id = 'dialog-styles'
++  style.textContent = STYLES
++  document.head.appendChild(style)
++}
++
++function createDialogOverlay(character) {
++  injectStyles()
++
++  const charInfo = CHARACTER_INFO[character]
++
++  const overlay = document.createElement('div')
++  overlay.className = 'dialog-overlay'
++  overlay.innerHTML = `
++    <div class="dialog-box">
++      <div class="dialog-header">
++        <div class="dialog-portrait ${charInfo.portrait}">${charInfo.emoji}</div>
++        <div class="dialog-name">${charInfo.name}</div>
++      </div>
++      <div class="dialog-text"></div>
++      <div class="dialog-continue">▼</div>
++    </div>
++  `
++
++  const box = overlay.querySelector('.dialog-box')
++  box.addEventListener('click', handleAdvance)
++
++  // Also handle keyboard
++  document.addEventListener('keydown', handleKeyDown)
++
++  return overlay
++}
++
++function handleKeyDown(e) {
++  if (e.key === ' ' || e.key === 'Enter') {
++    e.preventDefault()
++    handleAdvance()
++  }
++}
++
++function handleAdvance() {
++  if (!currentDialog) return
++
++  if (isTyping) {
++    // Skip to end of current line
++    finishCurrentLine()
++  } else {
++    // Advance to next line
++    advanceDialog()
++  }
++}
++
++function finishCurrentLine() {
++  if (typeInterval) {
++    clearInterval(typeInterval)
++    typeInterval = null
++  }
++
++  const textEl = dialogOverlay.querySelector('.dialog-text')
++  textEl.textContent = currentDialog.lines[currentLineIndex]
++  isTyping = false
++
++  // Show continue indicator
++  const continueEl = dialogOverlay.querySelector('.dialog-continue')
++  continueEl.classList.add('visible')
++}
++
++function advanceDialog() {
++  currentLineIndex++
++
++  if (currentLineIndex >= currentDialog.lines.length) {
++    // Dialog complete - save callback before closing (closeDialog clears it)
++    const callback = onCompleteCallback
++    closeDialog()
++    if (callback) {
++      callback()
++    }
++    return
++  }
++
++  // Hide continue indicator
++  const continueEl = dialogOverlay.querySelector('.dialog-continue')
++  continueEl.classList.remove('visible')
++
++  // Start typing next line
++  startTypingLine()
++}
++
++function startTypingLine() {
++  const textEl = dialogOverlay.querySelector('.dialog-text')
++  const line = currentDialog.lines[currentLineIndex]
++
++  textEl.textContent = ''
++  currentCharIndex = 0
++  isTyping = true
++
++  typeInterval = setInterval(() => {
++    if (currentCharIndex < line.length) {
++      const char = line[currentCharIndex]
++      textEl.textContent += char
++      currentCharIndex++
++
++      // Play blip sound for letters (skip spaces/punctuation, play every 2 chars)
++      if (char.match(/[a-zA-Z]/) && currentCharIndex % 2 === 0) {
++        playDialogBlip()
++      }
++
++      // Add slight shake on punctuation for emphasis
++      if (['.', '!', '?', '...'].some(p => line.substring(0, currentCharIndex).endsWith(p))) {
++        const box = dialogOverlay.querySelector('.dialog-box')
++        box.classList.add('shake')
++        setTimeout(() => box.classList.remove('shake'), 100)
++      }
++    } else {
++      // Line complete
++      clearInterval(typeInterval)
++      typeInterval = null
++      isTyping = false
++
++      // Show continue indicator
++      const continueEl = dialogOverlay.querySelector('.dialog-continue')
++      continueEl.classList.add('visible')
++    }
++  }, TYPE_SPEED)
++}
++
++export function showDialog(character, lines, container, onComplete) {
++  if (dialogOverlay) {
++    closeDialog()
++  }
++
++  currentDialog = { character, lines }
++  currentLineIndex = 0
++  currentCharIndex = 0
++  onCompleteCallback = onComplete
++
++  dialogOverlay = createDialogOverlay(character)
++  container.appendChild(dialogOverlay)
++
++  // Start typing first line
++  startTypingLine()
++}
++
++export function closeDialog() {
++  if (typeInterval) {
++    clearInterval(typeInterval)
++    typeInterval = null
++  }
++
++  document.removeEventListener('keydown', handleKeyDown)
++
++  if (dialogOverlay) {
++    dialogOverlay.remove()
++    dialogOverlay = null
++  }
++
++  currentDialog = null
++  currentLineIndex = 0
++  currentCharIndex = 0
++  isTyping = false
++  onCompleteCallback = null
++}
++
++export function isDialogOpen() {
++  return dialogOverlay !== null
++}

src/renderers/three/shop/inventory.jsadded

++// Inventory persistence for dougk shop system
++// Tracks owned items, equipped outfits, and placed buildings
++
++import { getItem } from './items.js'
++
++const STORAGE_KEYS = {
++  OWNED: 'dougk-owned-items',
++  EQUIPPED: 'dougk-equipped',
++  BUILDINGS: 'dougk-buildings'
++}
++
++function loadJSON(key, defaultValue) {
++  try {
++    const data = localStorage.getItem(key)
++    return data ? JSON.parse(data) : defaultValue
++  } catch {
++    return defaultValue
++  }
++}
++
++function saveJSON(key, value) {
++  localStorage.setItem(key, JSON.stringify(value))
++}
++
++const inventory = {
++  // Owned items (array of item IDs)
++  ownedItems: loadJSON(STORAGE_KEYS.OWNED, []),
++
++  // Equipped outfits per character
++  equipped: loadJSON(STORAGE_KEYS.EQUIPPED, {
++    doug: [],
++    donny: [],
++    ollie: []
++  }),
++
++  // Placed buildings
++  buildings: loadJSON(STORAGE_KEYS.BUILDINGS, []),
++
++  // Check if an item is owned
++  owns(itemId) {
++    return this.ownedItems.includes(itemId)
++  },
++
++  // Purchase an item (add to owned)
++  purchase(itemId) {
++    if (!this.owns(itemId)) {
++      this.ownedItems.push(itemId)
++      this.save()
++      return true
++    }
++    return false
++  },
++
++  // Equip an outfit to a character
++  // Automatically unequips any other outfit of the same type
++  equip(character, itemId) {
++    if (!this.equipped[character]) {
++      this.equipped[character] = []
++    }
++
++    // Get the type of the item being equipped
++    const newItem = getItem(itemId)
++    if (!newItem) return
++
++    // Find and unequip any item of the same type
++    const sameTypeItems = this.equipped[character].filter(equippedId => {
++      const equippedItem = getItem(equippedId)
++      return equippedItem && equippedItem.type === newItem.type
++    })
++
++    // Remove items of the same type
++    for (const oldId of sameTypeItems) {
++      this.equipped[character] = this.equipped[character].filter(id => id !== oldId)
++    }
++
++    // Now equip the new item
++    if (!this.equipped[character].includes(itemId)) {
++      this.equipped[character].push(itemId)
++    }
++    this.save()
++
++    // Return the unequipped items so the caller can update visuals
++    return sameTypeItems
++  },
++
++  // Unequip an outfit from a character
++  unequip(character, itemId) {
++    if (this.equipped[character]) {
++      this.equipped[character] = this.equipped[character].filter(id => id !== itemId)
++      this.save()
++    }
++  },
++
++  // Check if an outfit is equipped on a character
++  isEquipped(character, itemId) {
++    return this.equipped[character]?.includes(itemId) || false
++  },
++
++  // Get all equipped items for a character
++  getEquipped(character) {
++    return this.equipped[character] || []
++  },
++
++  // Place a building
++  placeBuilding(buildingType, zoneId) {
++    this.buildings.push({ type: buildingType, zoneId })
++    this.save()
++  },
++
++  // Check if a zone is occupied
++  isZoneOccupied(zoneId) {
++    return this.buildings.some(b => b.zoneId === zoneId)
++  },
++
++  // Get all placed buildings
++  getBuildings() {
++    return [...this.buildings]
++  },
++
++  // Alias for getBuildings (used by PlacementManager)
++  getPlacedBuildings() {
++    return this.getBuildings()
++  },
++
++  // Remove a placed building by zone ID
++  removeBuilding(zoneId) {
++    const index = this.buildings.findIndex(b => b.zoneId === zoneId)
++    if (index !== -1) {
++      this.buildings.splice(index, 1)
++      this.save()
++      return true
++    }
++    return false
++  },
++
++  // Save all state
++  save() {
++    saveJSON(STORAGE_KEYS.OWNED, this.ownedItems)
++    saveJSON(STORAGE_KEYS.EQUIPPED, this.equipped)
++    saveJSON(STORAGE_KEYS.BUILDINGS, this.buildings)
++  },
++
++  // Clear all data (for testing)
++  reset() {
++    this.ownedItems = []
++    this.equipped = { doug: [], donny: [], ollie: [] }
++    this.buildings = []
++    this.save()
++  }
++}
++
++export default inventory

src/renderers/three/shop/items.jsadded

++// Item catalog for dougk shop
++// Defines all purchasable outfits and buildings
++
++import * as THREE from 'three'
++
++// Outfit types
++export const OUTFIT_TYPES = {
++  COLOR_BODY: 'color_body',
++  COLOR_ACCENT: 'color_accent',
++  ACCESSORY_HEAD: 'accessory_head',
++  ACCESSORY_FACE: 'accessory_face',
++  ACCESSORY_HELD: 'accessory_held'
++}
++
++// Character IDs
++export const CHARACTERS = {
++  DOUG: 'doug',
++  DONNY: 'donny',
++  OLLIE: 'ollie'
++}
++
++// Outfit definitions
++export const OUTFITS = {
++  // Doug outfits - starter tier (cheap)
++  doug_mint: {
++    id: 'doug_mint',
++    name: 'Mint Fresh',
++    character: CHARACTERS.DOUG,
++    type: OUTFIT_TYPES.COLOR_BODY,
++    price: 5,
++    colors: { body: 0x98fb98, highlight: 0xb0ffb0 }
++  },
++  doug_bubblegum: {
++    id: 'doug_bubblegum',
++    name: 'Bubblegum',
++    character: CHARACTERS.DOUG,
++    type: OUTFIT_TYPES.COLOR_BODY,
++    price: 5,
++    colors: { body: 0xffb6c1, highlight: 0xffd1dc }
++  },
++  // Doug outfits - mid tier
++  doug_golden: {
++    id: 'doug_golden',
++    name: 'Golden Glow',
++    character: CHARACTERS.DOUG,
++    type: OUTFIT_TYPES.COLOR_BODY,
++    price: 12,
++    colors: { body: 0xffd700, highlight: 0xffec8b }
++  },
++  doug_sunset: {
++    id: 'doug_sunset',
++    name: 'Sunset Orange',
++    character: CHARACTERS.DOUG,
++    type: OUTFIT_TYPES.COLOR_BODY,
++    price: 12,
++    colors: { body: 0xff6b35, highlight: 0xffa07a }
++  },
++  doug_tophat: {
++    id: 'doug_tophat',
++    name: 'Top Hat',
++    character: CHARACTERS.DOUG,
++    type: OUTFIT_TYPES.ACCESSORY_HEAD,
++    price: 25,
++    meshFactory: (gradientMap) => {
++      const group = new THREE.Group()
++      const material = new THREE.MeshToonMaterial({ color: 0x1a1a1a, gradientMap })
++
++      // Hat brim
++      const brimGeom = new THREE.CylinderGeometry(0.25, 0.25, 0.03, 12)
++      const brim = new THREE.Mesh(brimGeom, material)
++      group.add(brim)
++
++      // Hat top
++      const topGeom = new THREE.CylinderGeometry(0.15, 0.15, 0.25, 12)
++      const top = new THREE.Mesh(topGeom, material)
++      top.position.y = 0.14
++      group.add(top)
++
++      // Hat band
++      const bandMat = new THREE.MeshToonMaterial({ color: 0x8b0000, gradientMap })
++      const bandGeom = new THREE.CylinderGeometry(0.155, 0.155, 0.04, 12)
++      const band = new THREE.Mesh(bandGeom, bandMat)
++      band.position.y = 0.04
++      group.add(band)
++
++      return group
++    }
++  },
++  doug_shades: {
++    id: 'doug_shades',
++    name: 'Cool Shades',
++    character: CHARACTERS.DOUG,
++    type: OUTFIT_TYPES.ACCESSORY_FACE,
++    price: 20,
++    meshFactory: (gradientMap) => {
++      const group = new THREE.Group()
++      const frameMat = new THREE.MeshToonMaterial({ color: 0x1a1a1a, gradientMap })
++      const lensMat = new THREE.MeshBasicMaterial({ color: 0x222222, transparent: true, opacity: 0.7 })
++
++      // Left lens
++      const lensGeom = new THREE.CircleGeometry(0.08, 8)
++      const leftLens = new THREE.Mesh(lensGeom, lensMat)
++      leftLens.position.set(-0.1, 0, 0.01)
++      group.add(leftLens)
++
++      // Right lens
++      const rightLens = new THREE.Mesh(lensGeom, lensMat)
++      rightLens.position.set(0.1, 0, 0.01)
++      group.add(rightLens)
++
++      // Bridge
++      const bridgeGeom = new THREE.BoxGeometry(0.06, 0.02, 0.02)
++      const bridge = new THREE.Mesh(bridgeGeom, frameMat)
++      group.add(bridge)
++
++      // Frames
++      const frameGeom = new THREE.TorusGeometry(0.08, 0.01, 4, 12)
++      const leftFrame = new THREE.Mesh(frameGeom, frameMat)
++      leftFrame.position.set(-0.1, 0, 0)
++      group.add(leftFrame)
++
++      const rightFrame = new THREE.Mesh(frameGeom, frameMat)
++      rightFrame.position.set(0.1, 0, 0)
++      group.add(rightFrame)
++
++      return group
++    }
++  },
++
++  // Donny outfits - starter tier
++  donny_seafoam: {
++    id: 'donny_seafoam',
++    name: 'Seafoam',
++    character: CHARACTERS.DONNY,
++    type: OUTFIT_TYPES.COLOR_BODY,
++    price: 8,
++    colors: { body: 0x5f9ea0, belly: 0x98d8d8 }
++  },
++  // Donny outfits - mid tier
++  donny_royal: {
++    id: 'donny_royal',
++    name: 'Royal Purple',
++    character: CHARACTERS.DONNY,
++    type: OUTFIT_TYPES.COLOR_BODY,
++    price: 15,
++    colors: { body: 0x6b3fa0, belly: 0x9b7bc0 }
++  },
++  donny_arctic: {
++    id: 'donny_arctic',
++    name: 'Arctic White',
++    character: CHARACTERS.DONNY,
++    type: OUTFIT_TYPES.COLOR_BODY,
++    price: 18,
++    colors: { body: 0xe8e8e8, belly: 0xffffff }
++  },
++  donny_ruby_monocle: {
++    id: 'donny_ruby_monocle',
++    name: 'Ruby Monocle',
++    character: CHARACTERS.DONNY,
++    type: OUTFIT_TYPES.ACCESSORY_FACE,
++    price: 25,
++    colors: { rim: 0xb22222, glass: 0xff6666 }
++  },
++  donny_bowler: {
++    id: 'donny_bowler',
++    name: 'Bowler Hat',
++    character: CHARACTERS.DONNY,
++    type: OUTFIT_TYPES.ACCESSORY_HEAD,
++    price: 25,
++    meshFactory: (gradientMap) => {
++      const group = new THREE.Group()
++      const material = new THREE.MeshToonMaterial({ color: 0x2f2f2f, gradientMap })
++
++      // Hat dome
++      const domeGeom = new THREE.SphereGeometry(0.15, 12, 8, 0, Math.PI * 2, 0, Math.PI / 2)
++      const dome = new THREE.Mesh(domeGeom, material)
++      group.add(dome)
++
++      // Hat brim
++      const brimGeom = new THREE.CylinderGeometry(0.22, 0.22, 0.025, 12)
++      const brim = new THREE.Mesh(brimGeom, material)
++      brim.position.y = -0.01
++      group.add(brim)
++
++      return group
++    }
++  },
++
++  // Ollie outfits
++  ollie_coral: {
++    id: 'ollie_coral',
++    name: 'Coral Pink',
++    character: CHARACTERS.OLLIE,
++    type: OUTFIT_TYPES.COLOR_BODY,
++    price: 20,
++    colors: { body: 0xff7f7f, belly: 0xffb3b3, suckers: 0xffcccc }
++  },
++  ollie_deepsea: {
++    id: 'ollie_deepsea',
++    name: 'Deep Sea Blue',
++    character: CHARACTERS.OLLIE,
++    type: OUTFIT_TYPES.COLOR_BODY,
++    price: 20,
++    colors: { body: 0x1e3a5f, belly: 0x4a6fa5, suckers: 0x6b8cae }
++  },
++  ollie_golden_mag: {
++    id: 'ollie_golden_mag',
++    name: 'Golden Magnifier',
++    character: CHARACTERS.OLLIE,
++    type: OUTFIT_TYPES.ACCESSORY_HELD,
++    price: 30,
++    colors: { rim: 0xffd700, glass: 0xffffcc }
++  },
++  ollie_detective: {
++    id: 'ollie_detective',
++    name: 'Detective Cap',
++    character: CHARACTERS.OLLIE,
++    type: OUTFIT_TYPES.ACCESSORY_HEAD,
++    price: 25,
++    meshFactory: (gradientMap) => {
++      const group = new THREE.Group()
++      const material = new THREE.MeshToonMaterial({ color: 0x8b4513, gradientMap })
++
++      // Cap body
++      const capGeom = new THREE.SphereGeometry(0.18, 8, 6, 0, Math.PI * 2, 0, Math.PI / 2)
++      const cap = new THREE.Mesh(capGeom, material)
++      cap.scale.y = 0.5
++      group.add(cap)
++
++      // Front brim
++      const brimGeom = new THREE.CylinderGeometry(0.12, 0.15, 0.02, 8, 1, false, -Math.PI/3, Math.PI * 2/3)
++      const brim = new THREE.Mesh(brimGeom, material)
++      brim.position.set(0.12, -0.02, 0)
++      brim.rotation.z = -0.3
++      group.add(brim)
++
++      return group
++    }
++  }
++}
++
++// Building definitions
++export const BUILDINGS = {
++  dock_wooden: {
++    id: 'dock_wooden',
++    buildingType: 'dock_wooden',
++    name: 'Wooden Dock',
++    price: 40,
++    zoneType: 'waterEdge',
++    forbiddenRadius: 0.8
++  },
++  fishing_hut: {
++    id: 'fishing_hut',
++    buildingType: 'fishing_hut',
++    name: 'Fishing Hut',
++    price: 50,
++    zoneType: 'waterEdge',
++    forbiddenRadius: 0.9
++  },
++  lighthouse: {
++    id: 'lighthouse',
++    buildingType: 'lighthouse',
++    name: 'Mini Lighthouse',
++    price: 50,
++    zoneType: 'shore',
++    forbiddenRadius: 0.5
++  },
++  reeds: {
++    id: 'reeds',
++    buildingType: 'reeds',
++    name: 'Reed Cluster',
++    price: 25,
++    zoneType: 'water',
++    forbiddenRadius: 0.4
++  },
++  fence: {
++    id: 'fence',
++    buildingType: 'fence',
++    name: 'Fence Segment',
++    price: 25,
++    zoneType: 'shore',
++    forbiddenRadius: 0.3
++  },
++  onion_house: {
++    id: 'onion_house',
++    buildingType: 'onion_house',
++    name: 'Onion House',
++    price: 45,
++    zoneType: 'shore',
++    forbiddenRadius: 0.6
++  }
++}
++
++// Get all outfits for a character
++export function getOutfitsForCharacter(character) {
++  return Object.values(OUTFITS).filter(o => o.character === character)
++}
++
++// Get all buildings
++export function getAllBuildings() {
++  return Object.values(BUILDINGS)
++}
++
++// Get item by ID (outfit or building)
++export function getItem(itemId) {
++  return OUTFITS[itemId] || BUILDINGS[itemId] || null
++}

src/renderers/three/shop/shopUI.jsadded

++// Shop UI overlay for dougk
++// DOM-based shop interface that appears when Donny or Ollie approach
++
++import gameState from '../gameState.js'
++import inventory from './inventory.js'
++import { OUTFITS, BUILDINGS, CHARACTERS, getOutfitsForCharacter, getAllBuildings, getItem } from './items.js'
++import { playPurchase, playShopOpen, playShopClose } from '../sounds.js'
++
++let shopOverlay = null
++let currentTab = 'outfits'
++let currentCharacter = CHARACTERS.DOUG
++let currentShopkeeper = null
++let onCloseCallback = null
++let onPurchaseCallback = null
++
++const STYLES = `
++  .shop-overlay {
++    position: fixed;
++    top: 0;
++    left: 0;
++    right: 0;
++    bottom: 0;
++    background: rgba(0, 0, 0, 0.7);
++    display: flex;
++    justify-content: center;
++    align-items: center;
++    z-index: 2000;
++    font-family: 'Courier New', monospace;
++  }
++
++  .shop-container {
++    background: linear-gradient(135deg, #2a1f1a 0%, #3d2e26 100%);
++    border: 4px solid #8b6914;
++    border-radius: 16px;
++    padding: 20px;
++    max-width: 500px;
++    width: 90%;
++    max-height: 80vh;
++    overflow-y: auto;
++    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
++  }
++
++  .shop-header {
++    display: flex;
++    justify-content: space-between;
++    align-items: center;
++    margin-bottom: 16px;
++    padding-bottom: 12px;
++    border-bottom: 2px solid #8b6914;
++  }
++
++  .shop-title {
++    color: #ffd700;
++    font-size: 24px;
++    font-weight: bold;
++    margin: 0;
++  }
++
++  .shop-koi-count {
++    color: #ffd700;
++    font-size: 18px;
++    display: flex;
++    align-items: center;
++    gap: 6px;
++  }
++
++  .shop-close {
++    background: #8b0000;
++    color: white;
++    border: none;
++    border-radius: 50%;
++    width: 32px;
++    height: 32px;
++    font-size: 18px;
++    cursor: pointer;
++    display: flex;
++    align-items: center;
++    justify-content: center;
++  }
++
++  .shop-close:hover {
++    background: #a00000;
++  }
++
++  .shop-tabs {
++    display: flex;
++    gap: 8px;
++    margin-bottom: 16px;
++  }
++
++  .shop-tab {
++    flex: 1;
++    padding: 10px 16px;
++    background: #4a3828;
++    border: 2px solid #6b4423;
++    border-radius: 8px;
++    color: #c9a96e;
++    font-size: 14px;
++    font-weight: bold;
++    cursor: pointer;
++    transition: all 0.2s;
++  }
++
++  .shop-tab:hover {
++    background: #5a4838;
++  }
++
++  .shop-tab.active {
++    background: #8b6914;
++    border-color: #ffd700;
++    color: #fff;
++  }
++
++  .character-selector {
++    display: flex;
++    gap: 8px;
++    margin-bottom: 16px;
++  }
++
++  .character-btn {
++    flex: 1;
++    padding: 8px;
++    background: #3a2a1a;
++    border: 2px solid #5a4a3a;
++    border-radius: 6px;
++    color: #a89070;
++    font-size: 12px;
++    cursor: pointer;
++    transition: all 0.2s;
++  }
++
++  .character-btn:hover {
++    background: #4a3a2a;
++  }
++
++  .character-btn.active {
++    background: #6b5030;
++    border-color: #c9a96e;
++    color: #ffd700;
++  }
++
++  .item-grid {
++    display: grid;
++    grid-template-columns: repeat(2, 1fr);
++    gap: 12px;
++  }
++
++  .item-card {
++    background: #3a2a1a;
++    border: 2px solid #5a4a3a;
++    border-radius: 8px;
++    padding: 12px;
++    text-align: center;
++    transition: all 0.2s;
++  }
++
++  .item-card:hover {
++    border-color: #8b6914;
++  }
++
++  .item-card.owned {
++    background: #2a3a2a;
++    border-color: #4a8b4a;
++  }
++
++  .item-card.equipped {
++    border-color: #ffd700;
++    box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
++  }
++
++  .item-card.cant-afford {
++    opacity: 0.5;
++  }
++
++  .item-name {
++    color: #e8d8c8;
++    font-size: 14px;
++    font-weight: bold;
++    margin-bottom: 8px;
++  }
++
++  .item-price {
++    color: #ffd700;
++    font-size: 16px;
++    margin-bottom: 8px;
++    display: flex;
++    align-items: center;
++    justify-content: center;
++    gap: 4px;
++  }
++
++  .item-btn {
++    width: 100%;
++    padding: 8px 12px;
++    border: none;
++    border-radius: 6px;
++    font-size: 12px;
++    font-weight: bold;
++    cursor: pointer;
++    transition: all 0.2s;
++  }
++
++  .item-btn.buy {
++    background: #8b6914;
++    color: white;
++  }
++
++  .item-btn.buy:hover {
++    background: #a07a1a;
++  }
++
++  .item-btn.buy:disabled {
++    background: #4a4a4a;
++    cursor: not-allowed;
++  }
++
++  .item-btn.equip {
++    background: #4a8b4a;
++    color: white;
++  }
++
++  .item-btn.equip:hover {
++    background: #5a9b5a;
++  }
++
++  .item-btn.unequip {
++    background: #8b4a4a;
++    color: white;
++  }
++
++  .item-btn.unequip:hover {
++    background: #9b5a5a;
++  }
++
++  .empty-message {
++    color: #888;
++    text-align: center;
++    padding: 40px;
++    font-style: italic;
++  }
++`
++
++function injectStyles() {
++  if (document.getElementById('shop-styles')) return
++  const style = document.createElement('style')
++  style.id = 'shop-styles'
++  style.textContent = STYLES
++  document.head.appendChild(style)
++}
++
++function createShopOverlay() {
++  injectStyles()
++
++  const overlay = document.createElement('div')
++  overlay.className = 'shop-overlay'
++  overlay.innerHTML = `
++    <div class="shop-container">
++      <div class="shop-header">
++        <h2 class="shop-title">${getShopTitle()}</h2>
++        <div class="shop-koi-count">
++          <span style="font-size: 20px;">🐟</span>
++          <span id="shop-koi-count">${gameState.getKoi()}</span>
++        </div>
++        <button class="shop-close">&times;</button>
++      </div>
++
++      <div id="shop-content"></div>
++    </div>
++  `
++
++  // Event listeners
++  overlay.querySelector('.shop-close').addEventListener('click', closeShop)
++  overlay.addEventListener('click', (e) => {
++    if (e.target === overlay) closeShop()
++  })
++
++  return overlay
++}
++
++function getShopTitle() {
++  if (currentShopkeeper === 'donny') return "Donny's Fine Structures"
++  if (currentShopkeeper === 'ollie') return "Ollie's Outfit Oddities"
++  return 'Shop'
++}
++
++function updateTabStyles() {
++  shopOverlay.querySelectorAll('.shop-tab').forEach(tab => {
++    tab.classList.toggle('active', tab.dataset.tab === currentTab)
++  })
++}
++
++function updateShopContent() {
++  const content = shopOverlay.querySelector('#shop-content')
++
++  // Donny sells buildings, Ollie sells outfits
++  if (currentShopkeeper === 'donny') {
++    content.innerHTML = renderBuildingsTab()
++    attachBuildingListeners(content)
++  } else if (currentShopkeeper === 'ollie') {
++    content.innerHTML = renderOutfitsTab()
++    attachOutfitListeners(content)
++  }
++
++  // Update koi count
++  const koiCount = shopOverlay.querySelector('#shop-koi-count')
++  if (koiCount) koiCount.textContent = gameState.getKoi()
++}
++
++function renderOutfitsTab() {
++  const characterBtns = Object.values(CHARACTERS).map(char => `
++    <button class="character-btn ${currentCharacter === char ? 'active' : ''}" data-character="${char}">
++      ${char.charAt(0).toUpperCase() + char.slice(1)}
++    </button>
++  `).join('')
++
++  const outfits = getOutfitsForCharacter(currentCharacter)
++
++  if (outfits.length === 0) {
++    return `
++      <div class="character-selector">${characterBtns}</div>
++      <div class="empty-message">No outfits available for ${currentCharacter}</div>
++    `
++  }
++
++  const itemCards = outfits.map(outfit => {
++    const owned = inventory.owns(outfit.id)
++    const equipped = inventory.isEquipped(outfit.character, outfit.id)
++    const canAfford = gameState.getKoi() >= outfit.price
++
++    let btnClass, btnText
++    if (!owned) {
++      btnClass = 'buy'
++      btnText = canAfford ? 'Buy' : 'Need more 🐟'
++    } else if (equipped) {
++      btnClass = 'unequip'
++      btnText = 'Unequip'
++    } else {
++      btnClass = 'equip'
++      btnText = 'Equip'
++    }
++
++    const cardClasses = ['item-card']
++    if (owned) cardClasses.push('owned')
++    if (equipped) cardClasses.push('equipped')
++    if (!owned && !canAfford) cardClasses.push('cant-afford')
++
++    return `
++      <div class="${cardClasses.join(' ')}" data-item-id="${outfit.id}">
++        <div class="item-name">${outfit.name}</div>
++        ${!owned ? `<div class="item-price">🐟 ${outfit.price}</div>` : ''}
++        <button class="item-btn ${btnClass}" ${!owned && !canAfford ? 'disabled' : ''} data-action="${btnClass}" data-item-id="${outfit.id}">
++          ${btnText}
++        </button>
++      </div>
++    `
++  }).join('')
++
++  return `
++    <div class="character-selector">${characterBtns}</div>
++    <div class="item-grid">${itemCards}</div>
++  `
++}
++
++function renderBuildingsTab() {
++  const buildings = getAllBuildings()
++
++  const itemCards = buildings.map(building => {
++    const owned = inventory.owns(building.id)
++    const canAfford = gameState.getKoi() >= building.price
++
++    let btnClass, btnText
++    if (owned) {
++      btnClass = 'equip'
++      btnText = 'Place'
++    } else {
++      btnClass = 'buy'
++      btnText = canAfford ? 'Buy' : 'Need more 🐟'
++    }
++
++    const cardClasses = ['item-card']
++    if (owned) cardClasses.push('owned')
++    if (!owned && !canAfford) cardClasses.push('cant-afford')
++
++    return `
++      <div class="${cardClasses.join(' ')}" data-item-id="${building.id}">
++        <div class="item-name">${building.name}</div>
++        ${!owned ? `<div class="item-price">🐟 ${building.price}</div>` : ''}
++        <button class="item-btn ${btnClass}" ${!owned && !canAfford ? 'disabled' : ''} data-action="${btnClass}" data-item-id="${building.id}">
++          ${btnText}
++        </button>
++      </div>
++    `
++  }).join('')
++
++  return `<div class="item-grid">${itemCards}</div>`
++}
++
++function attachOutfitListeners(content) {
++  // Character selector
++  content.querySelectorAll('.character-btn').forEach(btn => {
++    btn.addEventListener('click', () => {
++      currentCharacter = btn.dataset.character
++      updateShopContent()
++    })
++  })
++
++  // Item buttons
++  content.querySelectorAll('.item-btn').forEach(btn => {
++    btn.addEventListener('click', () => {
++      const itemId = btn.dataset.itemId
++      const action = btn.dataset.action
++      const item = getItem(itemId)
++
++      if (action === 'buy') {
++        if (gameState.spendKoi(item.price)) {
++          inventory.purchase(itemId)
++          // Auto-equip after buying (this also unequips same-type items)
++          const unequippedIds = inventory.equip(item.character, itemId)
++          // Notify about unequipped items first
++          if (onPurchaseCallback && unequippedIds) {
++            for (const oldId of unequippedIds) {
++              const oldItem = getItem(oldId)
++              if (oldItem) onPurchaseCallback(oldItem, 'unequip')
++            }
++          }
++          if (onPurchaseCallback) onPurchaseCallback(item, 'equip')
++          playPurchase()
++          updateShopContent()
++        }
++      } else if (action === 'equip') {
++        // Equip returns any auto-unequipped items of the same type
++        const unequippedIds = inventory.equip(item.character, itemId)
++        // Notify about unequipped items first
++        if (onPurchaseCallback && unequippedIds) {
++          for (const oldId of unequippedIds) {
++            const oldItem = getItem(oldId)
++            if (oldItem) onPurchaseCallback(oldItem, 'unequip')
++          }
++        }
++        if (onPurchaseCallback) onPurchaseCallback(item, 'equip')
++        updateShopContent()
++      } else if (action === 'unequip') {
++        inventory.unequip(item.character, itemId)
++        if (onPurchaseCallback) onPurchaseCallback(item, 'unequip')
++        updateShopContent()
++      }
++    })
++  })
++}
++
++function attachBuildingListeners(content) {
++  content.querySelectorAll('.item-btn').forEach(btn => {
++    btn.addEventListener('click', () => {
++      const itemId = btn.dataset.itemId
++      const action = btn.dataset.action
++      const item = getItem(itemId)
++
++      if (action === 'buy') {
++        if (gameState.spendKoi(item.price)) {
++          inventory.purchase(itemId)
++          if (onPurchaseCallback) onPurchaseCallback(item)
++          playPurchase()
++          updateShopContent()
++        }
++      } else if (action === 'equip') {
++        // Building placement - close shop and enter placement mode
++        // Save callback before closeShop clears it
++        const callback = onPurchaseCallback
++        closeShop()
++        if (callback) callback(item, 'place')
++      }
++    })
++  })
++}
++
++export function openShop(shopkeeper, container, callbacks = {}) {
++  if (shopOverlay) return // Already open
++
++  currentShopkeeper = shopkeeper
++  onCloseCallback = callbacks.onClose
++  onPurchaseCallback = callbacks.onPurchase
++
++  // Set default tab based on shopkeeper specialty
++  // Donny sells buildings, Ollie sells outfits
++  currentTab = shopkeeper === 'donny' ? 'buildings' : 'outfits'
++
++  shopOverlay = createShopOverlay()
++  container.appendChild(shopOverlay)
++  updateShopContent()
++
++  // Listen for koi count changes
++  gameState.addListener(updateKoiDisplay)
++
++  playShopOpen()
++}
++
++function updateKoiDisplay(count) {
++  if (shopOverlay) {
++    const koiCount = shopOverlay.querySelector('#shop-koi-count')
++    if (koiCount) koiCount.textContent = count
++  }
++}
++
++export function closeShop() {
++  if (!shopOverlay) return
++
++  playShopClose()
++
++  gameState.removeListener(updateKoiDisplay)
++  shopOverlay.remove()
++  shopOverlay = null
++
++  if (onCloseCallback) {
++    onCloseCallback()
++    onCloseCallback = null
++  }
++
++  currentShopkeeper = null
++  onPurchaseCallback = null
++}
++
++export function isShopOpen() {
++  return shopOverlay !== null
++}

src/renderers/three/sounds.jsmodified

    gulp.start(now)
    gulp.stop(now + 0.15)
+ }
++
++// Koi capture sound - magical sparkle pop
++export function playCapture() {
++  const ctx = getContext()
++  if (ctx.state === 'suspended') ctx.resume()
++
++  const now = ctx.currentTime
++
++  const master = ctx.createGain()
++  master.gain.value = 0.3
++  master.connect(ctx.destination)
++
++  // Rising sparkle tones
++  const notes = [523, 659, 784, 1047] // C5, E5, G5, C6
++  notes.forEach((freq, i) => {
++    const osc = ctx.createOscillator()
++    osc.type = 'sine'
++    osc.frequency.value = freq
++
++    const env = ctx.createGain()
++    const startTime = now + i * 0.05
++    env.gain.setValueAtTime(0, startTime)
++    env.gain.linearRampToValueAtTime(0.15, startTime + 0.02)
++    env.gain.linearRampToValueAtTime(0, startTime + 0.15)
++
++    osc.connect(env)
++    env.connect(master)
++    osc.start(startTime)
++    osc.stop(startTime + 0.2)
++  })
++
++  // Soft pop at the end
++  const popOsc = ctx.createOscillator()
++  popOsc.type = 'sine'
++  popOsc.frequency.setValueAtTime(400, now + 0.15)
++  popOsc.frequency.linearRampToValueAtTime(200, now + 0.25)
++
++  const popEnv = ctx.createGain()
++  popEnv.gain.setValueAtTime(0, now + 0.15)
++  popEnv.gain.linearRampToValueAtTime(0.2, now + 0.17)
++  popEnv.gain.linearRampToValueAtTime(0, now + 0.3)
++
++  popOsc.connect(popEnv)
++  popEnv.connect(master)
++  popOsc.start(now + 0.15)
++  popOsc.stop(now + 0.35)
++}
++
++// Purchase/coin sound - satisfying cha-ching
++export function playPurchase() {
++  const ctx = getContext()
++  if (ctx.state === 'suspended') ctx.resume()
++
++  const now = ctx.currentTime
++
++  const master = ctx.createGain()
++  master.gain.value = 0.25
++  master.connect(ctx.destination)
++
++  // High bell tone
++  const bell1 = ctx.createOscillator()
++  bell1.type = 'sine'
++  bell1.frequency.value = 1200
++
++  const bell1Env = ctx.createGain()
++  bell1Env.gain.setValueAtTime(0.3, now)
++  bell1Env.gain.exponentialRampToValueAtTime(0.01, now + 0.3)
++
++  bell1.connect(bell1Env)
++  bell1Env.connect(master)
++  bell1.start(now)
++  bell1.stop(now + 0.35)
++
++  // Second bell tone (slightly delayed)
++  const bell2 = ctx.createOscillator()
++  bell2.type = 'sine'
++  bell2.frequency.value = 1600
++
++  const bell2Env = ctx.createGain()
++  bell2Env.gain.setValueAtTime(0, now)
++  bell2Env.gain.setValueAtTime(0.25, now + 0.08)
++  bell2Env.gain.exponentialRampToValueAtTime(0.01, now + 0.35)
++
++  bell2.connect(bell2Env)
++  bell2Env.connect(master)
++  bell2.start(now)
++  bell2.stop(now + 0.4)
++
++  // Metallic shimmer (noise burst)
++  const shimmerLength = 0.15
++  const shimmerBuffer = ctx.createBuffer(1, ctx.sampleRate * shimmerLength, ctx.sampleRate)
++  const shimmerData = shimmerBuffer.getChannelData(0)
++  for (let i = 0; i < shimmerData.length; i++) {
++    shimmerData[i] = (Math.random() * 2 - 1) * 0.3
++  }
++
++  const shimmer = ctx.createBufferSource()
++  shimmer.buffer = shimmerBuffer
++
++  const shimmerFilter = ctx.createBiquadFilter()
++  shimmerFilter.type = 'highpass'
++  shimmerFilter.frequency.value = 3000
++
++  const shimmerEnv = ctx.createGain()
++  shimmerEnv.gain.setValueAtTime(0.15, now)
++  shimmerEnv.gain.linearRampToValueAtTime(0, now + shimmerLength)
++
++  shimmer.connect(shimmerFilter)
++  shimmerFilter.connect(shimmerEnv)
++  shimmerEnv.connect(master)
++  shimmer.start(now)
++  shimmer.stop(now + shimmerLength)
++}
++
++// Shop open sound - friendly chime
++export function playShopOpen() {
++  const ctx = getContext()
++  if (ctx.state === 'suspended') ctx.resume()
++
++  const now = ctx.currentTime
++
++  const master = ctx.createGain()
++  master.gain.value = 0.2
++  master.connect(ctx.destination)
++
++  // Ascending arpeggio - warm and inviting
++  const notes = [392, 494, 587, 784] // G4, B4, D5, G5
++  notes.forEach((freq, i) => {
++    const osc = ctx.createOscillator()
++    osc.type = 'triangle'
++    osc.frequency.value = freq
++
++    const env = ctx.createGain()
++    const startTime = now + i * 0.08
++    env.gain.setValueAtTime(0, startTime)
++    env.gain.linearRampToValueAtTime(0.2, startTime + 0.03)
++    env.gain.exponentialRampToValueAtTime(0.01, startTime + 0.4)
++
++    osc.connect(env)
++    env.connect(master)
++    osc.start(startTime)
++    osc.stop(startTime + 0.45)
++  })
++}
++
++// Shop close sound - gentle descending tone
++export function playShopClose() {
++  const ctx = getContext()
++  if (ctx.state === 'suspended') ctx.resume()
++
++  const now = ctx.currentTime
++
++  const master = ctx.createGain()
++  master.gain.value = 0.15
++  master.connect(ctx.destination)
++
++  // Single soft descending tone
++  const osc = ctx.createOscillator()
++  osc.type = 'triangle'
++  osc.frequency.setValueAtTime(600, now)
++  osc.frequency.linearRampToValueAtTime(400, now + 0.2)
++
++  const env = ctx.createGain()
++  env.gain.setValueAtTime(0.2, now)
++  env.gain.linearRampToValueAtTime(0, now + 0.25)
++
++  osc.connect(env)
++  env.connect(master)
++  osc.start(now)
++  osc.stop(now + 0.3)
++}
++
++// Dialog blip sound - for typewriter text
++export function playDialogBlip() {
++  const ctx = getContext()
++  if (ctx.state === 'suspended') ctx.resume()
++
++  const now = ctx.currentTime
++
++  const osc = ctx.createOscillator()
++  osc.type = 'square'
++  osc.frequency.value = 440 + Math.random() * 60 // Slight variation
++
++  const env = ctx.createGain()
++  env.gain.setValueAtTime(0.08, now)
++  env.gain.linearRampToValueAtTime(0, now + 0.04)
++
++  const filter = ctx.createBiquadFilter()
++  filter.type = 'lowpass'
++  filter.frequency.value = 1000
++
++  osc.connect(filter)
++  filter.connect(env)
++  env.connect(ctx.destination)
++  osc.start(now)
++  osc.stop(now + 0.05)
++}
++
++// Placement confirm sound - solid thunk
++export function playPlaceBuilding() {
++  const ctx = getContext()
++  if (ctx.state === 'suspended') ctx.resume()
++
++  const now = ctx.currentTime
++
++  const master = ctx.createGain()
++  master.gain.value = 0.25
++  master.connect(ctx.destination)
++
++  // Low thump
++  const thump = ctx.createOscillator()
++  thump.type = 'sine'
++  thump.frequency.setValueAtTime(150, now)
++  thump.frequency.linearRampToValueAtTime(60, now + 0.1)
++
++  const thumpEnv = ctx.createGain()
++  thumpEnv.gain.setValueAtTime(0.4, now)
++  thumpEnv.gain.linearRampToValueAtTime(0, now + 0.15)
++
++  thump.connect(thumpEnv)
++  thumpEnv.connect(master)
++  thump.start(now)
++  thump.stop(now + 0.2)
++
++  // Wood knock overtone
++  const knock = ctx.createOscillator()
++  knock.type = 'triangle'
++  knock.frequency.setValueAtTime(300, now)
++  knock.frequency.linearRampToValueAtTime(200, now + 0.05)
++
++  const knockEnv = ctx.createGain()
++  knockEnv.gain.setValueAtTime(0.2, now)
++  knockEnv.gain.linearRampToValueAtTime(0, now + 0.08)
++
++  knock.connect(knockEnv)
++  knockEnv.connect(master)
++  knock.start(now)
++  knock.stop(now + 0.1)
++}