`95a35f3`

rethink building placement

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

SHA: 95a35f358ec94109995dd5aba44526ebea34254c
Parents: adc7b26
Tree: 988a0b3

4 changed files

Status	File	+	-
M	`src/renderers/three/buildingPlacement.js`	262	80
M	`src/renderers/three/index.js`	1	0
M	`src/renderers/three/pond.js`	7	0
M	`src/renderers/three/shop/inventory.js`	33	2

src/renderers/three/buildingPlacement.jsmodified

  // Building placement system for dougk
--// Handles ghost preview, snap zones, and building instantiation
++// Constraint-based freeform placement with real-time validation
  import * as THREE from 'three'
  import { createBuilding, createGhostBuilding } from './buildings.js'
  import inventory from './shop/inventory.js'
  import { playPlaceBuilding } from './sounds.js'
++import { BUILDINGS } from './shop/items.js'
  // Placement states
  const STATE = {
    SELECTING: 'selecting'
+ }
++// Terrain types
++const TERRAIN = {
++  WATER: 'water',
++  WATER_EDGE: 'waterEdge',
++  SHORE: 'shore',
++  OUT_OF_BOUNDS: 'outOfBounds'
++}
++
++// Building terrain requirements
++const BUILDING_TERRAIN = {
++  dock_wooden: [TERRAIN.WATER_EDGE],
++  fishing_hut: [TERRAIN.WATER_EDGE],
++  lighthouse: [TERRAIN.SHORE],
++  reeds: [TERRAIN.WATER, TERRAIN.WATER_EDGE],
++  fence: [TERRAIN.SHORE],
++  onion_house: [TERRAIN.SHORE]
++}
++
++// Building collision radii (for overlap detection)
++const BUILDING_COLLISION_RADIUS = {
++  dock_wooden: 0.8,
++  fishing_hut: 0.7,
++  lighthouse: 0.5,
++  reeds: 0.3,
++  fence: 0.25,
++  onion_house: 0.5
++}
++
  export class PlacementManager {
    constructor(scene, pond, camera, gradientMap) {
      this.scene = scene
      this.state = STATE.INACTIVE
      this.currentBuildingType = null
      this.ghostMesh = null
--    this.hoveredZone = null
++    this.isValidPosition = false
++    this.currentPosition = new THREE.Vector3()
++    this.currentRotation = 0
      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)
++    // Pond geometry constants
++    this.pondCenter = new THREE.Vector2(0, 0)
++    this.pondRadius = 4.0  // Water radius
++
++    // Terrain zone boundaries (distance from center)
++    this.terrainBounds = {
++      waterInner: 3.2,      // Deep water
++      waterEdgeInner: 3.2,  // Water edge starts
++      waterEdgeOuter: 4.8,  // Water edge ends
++      shoreInner: 4.3,      // Shore starts
++      shoreOuter: 7.0,      // Shore ends (map bounds)
++      mapBounds: 8.0        // Absolute map edge
++    }
++
++    // Invisible ground plane for raycasting
      this.groundPlane = new THREE.Mesh(
        new THREE.PlaneGeometry(50, 50),
        new THREE.MeshBasicMaterial({ visible: false })
        onion_house: 0.6
+     }
++    // Placed building positions for collision detection
++    this.placedPositions = []
++
++    // Forbidden zones (rowboat, dock area, etc.)
++    this.forbiddenZones = []
++
      scene.add(this.placedBuildings)
      // Callbacks
      this.onPlacementCancel = null
+   }
++  // Get terrain type at a position
++  getTerrainType(x, z) {
++    const dx = x - this.pondCenter.x
++    const dz = z - this.pondCenter.y
++    const distance = Math.sqrt(dx * dx + dz * dz)
++
++    if (distance > this.terrainBounds.mapBounds) {
++      return TERRAIN.OUT_OF_BOUNDS
++    }
++
++    if (distance > this.terrainBounds.shoreOuter) {
++      return TERRAIN.OUT_OF_BOUNDS
++    }
++
++    if (distance >= this.terrainBounds.shoreInner) {
++      return TERRAIN.SHORE
++    }
++
++    if (distance >= this.terrainBounds.waterEdgeInner && distance <= this.terrainBounds.waterEdgeOuter) {
++      return TERRAIN.WATER_EDGE
++    }
++
++    if (distance < this.terrainBounds.waterInner) {
++      return TERRAIN.WATER
++    }
++
++    // Transition zone - allow water edge
++    return TERRAIN.WATER_EDGE
++  }
++
++  // Check if position collides with existing buildings
++  checkBuildingCollision(x, z, buildingType) {
++    const newRadius = BUILDING_COLLISION_RADIUS[buildingType] || 0.5
++
++    for (const placed of this.placedPositions) {
++      const dx = x - placed.x
++      const dz = z - placed.z
++      const distance = Math.sqrt(dx * dx + dz * dz)
++      const minDistance = newRadius + placed.radius
++
++      if (distance < minDistance) {
++        return true // Collision!
++      }
++    }
++
++    return false
++  }
++
++  // Check if position is in a forbidden zone
++  checkForbiddenZone(x, z) {
++    for (const zone of this.forbiddenZones) {
++      const dx = x - zone.x
++      const dz = z - zone.z
++      const distance = Math.sqrt(dx * dx + dz * dz)
++
++      if (distance < zone.radius) {
++        return true // In forbidden zone
++      }
++    }
++
++    return false
++  }
++
++  // Validate placement position
++  validatePosition(x, z, buildingType) {
++    // Check map bounds
++    const terrain = this.getTerrainType(x, z)
++    if (terrain === TERRAIN.OUT_OF_BOUNDS) {
++      return { valid: false, reason: 'out_of_bounds' }
++    }
++
++    // Check terrain requirements for building type
++    const allowedTerrain = BUILDING_TERRAIN[buildingType] || []
++    if (!allowedTerrain.includes(terrain)) {
++      return { valid: false, reason: 'wrong_terrain', terrain, required: allowedTerrain }
++    }
++
++    // Check collision with existing buildings
++    if (this.checkBuildingCollision(x, z, buildingType)) {
++      return { valid: false, reason: 'collision' }
++    }
++
++    // Check forbidden zones (rowboat area, etc.)
++    if (this.checkForbiddenZone(x, z)) {
++      return { valid: false, reason: 'forbidden_zone' }
++    }
++
++    return { valid: true, terrain }
++  }
++
++  // Calculate rotation angle to face pond center
++  calculateRotation(x, z) {
++    const dx = this.pondCenter.x - x
++    const dz = this.pondCenter.y - z
++    return Math.atan2(dx, dz)
++  }
++
    // Start placement mode for a building type
    startPlacement(buildingType, callbacks = {}) {
      if (this.state !== STATE.INACTIVE) {
      this.onPlacementComplete = callbacks.onComplete
      this.onPlacementCancel = callbacks.onCancel
--    // Create ghost mesh (starts as invalid/red, visible immediately)
++    // Create ghost mesh (starts as invalid/red)
      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.ghostMesh.position.set(0, 0, 0)
      this.scene.add(this.ghostMesh)
      this.state = STATE.SELECTING
--    this.hoveredZone = null
++    this.isValidPosition = false
      return true
+   }
      this.state = STATE.INACTIVE
      this.currentBuildingType = null
--    this.hoveredZone = null
++    this.isValidPosition = false
      if (this.onPlacementCancel) {
        this.onPlacementCancel()
      this.mouse.x = (event.clientX / containerWidth) * 2 - 1
      this.mouse.y = -(event.clientY / containerHeight) * 2 + 1
--    // Raycast to invisible ground plane (always hits)
++    // Raycast to invisible ground plane
      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
++      // Ghost always follows cursor
--      const nearestZone = this.pond.findNearestZone(
++      this.currentPosition.set(point.x, 0, point.z)
--        point.x,
++      this.ghostMesh.position.copy(this.currentPosition)
--        point.z,
--        this.currentBuildingType
--      )
--      if (nearestZone) {
++      // Calculate rotation to face pond center
--        // Snap to zone - show green
++      this.currentRotation = this.calculateRotation(point.x, point.z)
--        this.hoveredZone = nearestZone
++      this.ghostMesh.rotation.y = this.currentRotation
--        this.ghostMesh.position.set(nearestZone.x, 0, nearestZone.z)
++
--        this.ghostMesh.rotation.y = nearestZone.angle
++      // Validate position
--        this.updateGhostColor(true)
++      const validation = this.validatePosition(point.x, point.z, this.currentBuildingType)
--      } else {
++      this.isValidPosition = validation.valid
--        // No valid zone - follow cursor, show red
++
--        this.hoveredZone = null
++      // Update ghost color
--        this.ghostMesh.position.set(point.x, 0, point.z)
++      this.updateGhostColor(this.isValidPosition)
--        this.ghostMesh.rotation.y = 0
--        this.updateGhostColor(false)
--      }
        // Always visible during placement
        this.ghostMesh.visible = true
      // Update position one more time
      this.onMouseMove(event, containerWidth, containerHeight)
--    if (this.hoveredZone) {
++    if (this.isValidPosition) {
--      // Valid zone - confirm placement
++      // Valid position - confirm placement
--      this.confirmPlacement(this.hoveredZone)
++      this.confirmPlacement()
        return true
+     }
+   }
    // Confirm and place the building
--  confirmPlacement(zone) {
++  confirmPlacement() {
++    const x = this.currentPosition.x
++    const z = this.currentPosition.z
++    const rotation = this.currentRotation
++
      // Create the real building
      const building = createBuilding(this.currentBuildingType, this.gradientMap)
--    building.position.set(zone.x, 0, zone.z)
++    building.position.set(x, 0, z)
--    building.rotation.y = zone.angle
++    building.rotation.y = rotation
      building.userData.buildingType = this.currentBuildingType
--    building.userData.zoneId = zone.id
++    building.userData.placementId = `placed_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
      this.placedBuildings.add(building)
      // Play placement sound
      playPlaceBuilding()
--    // Mark zone as occupied
++    // Track placed position for collision detection
--    this.pond.occupyZone(zone.id)
++    const collisionRadius = BUILDING_COLLISION_RADIUS[this.currentBuildingType] || 0.5
++    this.placedPositions.push({
++      x, z,
++      radius: collisionRadius,
++      buildingType: this.currentBuildingType,
++      placementId: building.userData.placementId
++    })
      // Add forbidden zone for creature emergence
      const forbiddenRadius = this.buildingRadius[this.currentBuildingType] || 0.5
--    this.pond.addForbiddenZone(zone.x, zone.z, forbiddenRadius)
++    this.pond.addForbiddenZone(x, z, forbiddenRadius)
--    // Save to inventory
++    // Save to inventory (use coordinates as ID for freeform placement)
--    inventory.placeBuilding(this.currentBuildingType, zone.id)
++    const placementData = {
++      type: this.currentBuildingType,
++      x, z, rotation,
++      placementId: building.userData.placementId
++    }
++    inventory.placeBuildingFreeform(placementData)
      // Clean up ghost
      if (this.ghostMesh) {
      const buildingType = this.currentBuildingType
      this.state = STATE.INACTIVE
      this.currentBuildingType = null
--    this.hoveredZone = null
++    this.isValidPosition = false
      // Callback
      if (this.onPlacementComplete) {
--      this.onPlacementComplete(buildingType, zone)
++      this.onPlacementComplete(buildingType, { x, z, rotation })
+     }
      return building
+   }
++  // Initialize forbidden zones from pond
++  initForbiddenZones(zones) {
++    this.forbiddenZones = zones || []
++  }
++
++  // Add a forbidden zone
++  addForbiddenZone(x, z, radius) {
++    this.forbiddenZones.push({ x, z, radius })
++  }
++
    // Load saved buildings from inventory
    loadSavedBuildings() {
++    // Try new freeform format first
++    const savedFreeform = inventory.getPlacedBuildingsFreeform()
++
++    if (savedFreeform && savedFreeform.length > 0) {
++      for (const data of savedFreeform) {
++        this.loadBuilding(data.type, data.x, data.z, data.rotation, data.placementId)
++      }
++    } else {
++      // Fall back to old zone-based format for backwards compatibility
        const savedBuildings = inventory.getPlacedBuildings()
        for (const { type, zoneId } of savedBuildings) {
          const zone = this.pond.getZone(zoneId)
          if (zone && !zone.occupied) {
--        // Create and place building
++          this.loadBuilding(type, zone.x, zone.z, zone.angle, zoneId)
++          this.pond.occupyZone(zoneId)
++        }
++      }
++    }
++  }
++
++  // Load a single building
++  loadBuilding(type, x, z, rotation, placementId) {
      const building = createBuilding(type, this.gradientMap)
--        building.position.set(zone.x, 0, zone.z)
++    building.position.set(x, 0, z)
--        building.rotation.y = zone.angle
++    building.rotation.y = rotation
      building.userData.buildingType = type
--        building.userData.zoneId = zone.id
++    building.userData.placementId = placementId
      this.placedBuildings.add(building)
--        // Mark zone as occupied
++    // Track for collision detection
--        this.pond.occupyZone(zone.id)
++    const collisionRadius = BUILDING_COLLISION_RADIUS[type] || 0.5
++    this.placedPositions.push({
++      x, z,
++      radius: collisionRadius,
++      buildingType: type,
++      placementId
++    })
      // Add forbidden zone
      const forbiddenRadius = this.buildingRadius[type] || 0.5
--        this.pond.addForbiddenZone(zone.x, zone.z, forbiddenRadius)
++    this.pond.addForbiddenZone(x, z, forbiddenRadius)
--      }
--    }
+   }
    // Check if currently placing
      return this.placedBuildings
+   }
--  // Remove a placed building (for future use)
++  // Remove a placed building
--  removeBuilding(zoneId) {
++  removeBuilding(placementId) {
      const building = this.placedBuildings.children.find(
--      b => b.userData.zoneId === zoneId
++      b => b.userData.placementId === placementId
+     )
      if (building) {
+         }
        })
--      // Free up the zone
++      // Remove from collision tracking
--      const zone = this.pond.getZone(zoneId)
++      this.placedPositions = this.placedPositions.filter(
--      if (zone) {
++        p => p.placementId !== placementId
--        zone.occupied = false
++      )
--      }
        // Remove from inventory
--      inventory.removeBuilding(zoneId)
++      inventory.removeBuildingFreeform(placementId)
        return true
+     }
        if (building.userData.buildingType === 'lighthouse') {
          building.traverse((child) => {
            if (child.userData.isLightBeam) {
--            child.rotation.y = elapsed * 0.8 // Slow rotation
++            child.rotation.y = elapsed * 0.8
+           }
          })
+       }
              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
+           }
          building.traverse((child) => {
            if (child.userData.isSmokePuff) {
              const phase = child.userData.phase
--            const cycleTime = 3.0  // Seconds for full cycle
++            const cycleTime = 3.0
              const t = ((elapsed * 0.5 + phase * cycleTime) % cycleTime) / cycleTime
--            // Rise from 0 to 0.5 units
              child.position.y = t * 0.5
--
--            // Expand as it rises (scale from 1 to 2)
              const scale = 1 + t * 1.2
              child.scale.set(scale, scale, scale)
--            // Fade out as it rises
              if (child.material) {
                child.material.opacity = 0.6 * (1 - t * 0.8)
+             }
--            // Gentle horizontal drift
              child.position.x = Math.sin(elapsed * 0.8 + phase * 5) * 0.03
              child.position.z = Math.cos(elapsed * 0.6 + phase * 3) * 0.02
+           }
    dispose() {
      this.cancelPlacement()
--    // Clean up placed buildings
      while (this.placedBuildings.children.length > 0) {
        const building = this.placedBuildings.children[0]
        this.placedBuildings.remove(building)
      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()
+     }
++
++    this.placedPositions = []
++    this.forbiddenZones = []
+   }
+ }

src/renderers/three/index.jsmodified


   koiSchool = createKoiSchool(scene, toonGradient, pond.radius)
   ollie = createOllie(scene, toonGradient)
   placementManager = new PlacementManager(scene, pond, camera, toonGradient)
+  placementManager.initForbiddenZones(pond.getInitialForbiddenZones())
 
   // Post-processing
   composer = new EffectComposer(renderer)

src/renderers/three/pond.jsmodified

      forbiddenZones.push({ x, z, radius: zoneRadius })
    }
++  // Get initial forbidden zones (for building placement)
++  function getInitialForbiddenZones() {
++    // Return copy of initial zones (rowboat and dock area)
++    return forbiddenZones.slice(0, 2).map(z => ({ ...z }))
++  }
++
    // Snap zones for building placement
    // Each zone has: id, position, angle (rotation), type, allowed buildings, occupied status
    const snapZones = [
      update,
      isValidEmergenceSpot,
      addForbiddenZone,
++    getInitialForbiddenZones,
      snapZones,
      getAvailableZones,
      getZone,

src/renderers/three/shop/inventory.jsmodified

  const STORAGE_KEYS = {
    OWNED: 'dougk-owned-items',
    EQUIPPED: 'dougk-equipped',
--  BUILDINGS: 'dougk-buildings'
++  BUILDINGS: 'dougk-buildings',
++  BUILDINGS_FREEFORM: 'dougk-buildings-freeform'
+ }
  function loadJSON(key, defaultValue) {
      ollie: []
    }),
--  // Placed buildings
++  // Placed buildings (legacy zone-based format)
    buildings: loadJSON(STORAGE_KEYS.BUILDINGS, []),
++  // Placed buildings (new freeform format with coordinates)
++  buildingsFreeform: loadJSON(STORAGE_KEYS.BUILDINGS_FREEFORM, []),
++
    // Check if an item is owned
    owns(itemId) {
      return this.ownedItems.includes(itemId)
      return false
    },
++  // === Freeform placement methods (new system) ===
++
++  // Place a building with freeform coordinates
++  placeBuildingFreeform(data) {
++    // data: { type, x, z, rotation, placementId }
++    this.buildingsFreeform.push(data)
++    this.save()
++  },
++
++  // Get all freeform placed buildings
++  getPlacedBuildingsFreeform() {
++    return [...this.buildingsFreeform]
++  },
++
++  // Remove a freeform building by placement ID
++  removeBuildingFreeform(placementId) {
++    const index = this.buildingsFreeform.findIndex(b => b.placementId === placementId)
++    if (index !== -1) {
++      this.buildingsFreeform.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)
++    saveJSON(STORAGE_KEYS.BUILDINGS_FREEFORM, this.buildingsFreeform)
    },
    // Clear all data (for testing)
      this.ownedItems = []
      this.equipped = { doug: [], donny: [], ollie: [] }
      this.buildings = []
++    this.buildingsFreeform = []
      this.save()
+   }
+ }

`@@ -158,6 +158,7 @@` export function start(container) {
158	koiSchool = createKoiSchool(scene, toonGradient, pond.radius)	158	koiSchool = createKoiSchool(scene, toonGradient, pond.radius)
159	ollie = createOllie(scene, toonGradient)	159	ollie = createOllie(scene, toonGradient)
160	placementManager = new PlacementManager(scene, pond, camera, toonGradient)	160	placementManager = new PlacementManager(scene, pond, camera, toonGradient)
		161	+ placementManager.initForbiddenZones(pond.getInitialForbiddenZones())
161		162
162	// Post-processing	163	// Post-processing
163	composer = new EffectComposer(renderer)	164	composer = new EffectComposer(renderer)