`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
 -  const bodyColor = 0xffdc50 // Warm yellow
 -  const bodyHighlight = 0xfff0a0 // Light yellow
 -  const beakColor = 0xff9020 // Bright orange
 -  const eyeWhite = 0xffffff
 -  const eyePupil = 0x191410
 +  // Store gradientMap for accessory creation
 +  const storedGradientMap = gradientMap
++
 +  // Default colors - vibrant Wind Waker yellows
 +  const defaultColors = {
 +    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) => {
 -    // Unlock audio on first interaction (required for mobile)
 +  // Mouse move - handle placement preview
 +  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)
 -      pond.addRipple(point.x, point.z)
 -      koiSchool.triggerPanic(point.x, point.z)
 +      captureState.clickPos = { x: point.x, z: point.z }
 +      captureState.isHolding = true
++
 +      // 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) {
 -        koi.state.panicTimer = 1 + Math.random() * 0.5
+-
 -        // Turn away from the disturbance
 +      if (dist < 0.8) {
 +        // Brief scatter only when bread lands very close
 +        koi.state.attractedTo = null
 +        // 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
 -      const isPanicked = s.panicTimer > 0
 -      if (isPanicked) {
 -        s.panicTimer -= delta
 +      // Handle respawn timer
 +      if (s.captured) {
 +        s.respawnTimer -= 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
 -        s.targetTurnRate = (Math.random() - 0.5) * 1.5
 -        s.turnTimer = 1 + Math.random() * 3
++
 +      // If attracted to bread, swim toward it
 +      if (s.attractedTo) {
 +        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)
 -      const speed = isPanicked ? s.speed * 2.5 : s.speed
+-
 -      // Get forward direction from rotation
 +      // Move forward
        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
 -      pos.z += forwardZ * speed * delta
+-
 -      // Tail wiggle - faster when moving fast
 -      const wiggleSpeed = isPanicked ? 18 : 10
 -      const wiggleAmount = isPanicked ? 0.4 : 0.25
 +      // Tail wiggle
 +      const wiggleSpeed = s.attractedTo ? 14 : 10
 +      const wiggleAmount = s.attractedTo ? 0.35 : 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
 -  const bodyColor = 0x7a9eb8 // Dusty blue-grey
 -  const bellyColor = 0xc8d8e4 // Pale belly
 -  const tuskColor = 0xf5f0e6 // Ivory
 -  const monocleColor = 0xd4af37 // Gold
 +  // Store gradientMap for accessory creation
 +  const storedGradientMap = gradientMap
++
 +  // Default colors
 +  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
 -    const angle = Math.random() * Math.PI * 2
 -    const dist = Math.random() * pond.radius * 0.5 + pond.radius * 0.2
 -    state.emergeX = Math.cos(angle) * dist
 -    state.emergeZ = Math.sin(angle) * dist
 +    // Pick random spot in the pond, avoiding forbidden zones (dock, boat)
 +    let attempts = 0
 +    let angle, dist
 +    do {
 +      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
 -  const bodyColor = 0x7b4b94 // Deep purple
 -  const bellyColor = 0xb89bc9 // Lighter lavender
 -  const suckerColor = 0xd4a5c9 // Pink-ish
 -  const glassRimColor = 0xd4af37 // Gold
 +  // Store gradientMap for accessory creation
 +  const storedGradientMap = gradientMap
++
 +  // Default colors - purple theme
 +  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)
 -    const angle = Math.random() * Math.PI * 2
 -    const dist = Math.random() * pond.radius * 0.2 + pond.radius * 0.7
 -    state.emergeX = Math.cos(angle) * dist
 -    state.emergeZ = Math.sin(angle) * dist
 +    // Pick random spot in outer zone of pond (70-90% radius), avoiding forbidden zones
 +    let attempts = 0
 +    let angle, dist
 +    do {
 +      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 boathouseZ = 3.2
 +  const boathouseX = -3.3
 +  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)
 +}