`054467b`

touch support for store modals

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

SHA: 054467b8b1902307aa951669087b489bbcca7a03
Parents: 16abfe2
Tree: 438b375

2 changed files

Status	File	+	-
M	`css/styles.css`	19	0
M	`js/game.js`	252	174

css/styles.cssmodified

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+ }
++  /* Make buttons touch-friendly */
++  #upgrade-shop button,
++  #stats-panel button,
++  #game-over-screen button {
++    min-height: 44px;
++    min-width: 44px;
++    touch-action: manipulation;
++    -webkit-tap-highlight-color: transparent;
++    user-select: none;
++    cursor: pointer;
++  }
++
++  /* Prevent scroll/zoom issues on mobile */
++  #upgrade-shop,
++  #stats-panel {
++    touch-action: none;
++    -webkit-user-select: none;
++    user-select: none;
++  }

js/game.jsmodified

  let fliesMunchedLastNight = 0
  let birds = []
  let staminaRegenCooldown = 0
--let staminaBonus = 0;
++let staminaBonus = 0
  // PHASE 4B: Wind System
  let windActive = false
    let numObstacles = Math.floor((width * height) / 60000) // More obstacles
    numObstacles = constrain(numObstacles, 15, 25)
--// Create ant balloons
++  // Create ant balloons
--let numBalloons = Math.floor(random(15, 21))
++  let numBalloons = Math.floor(random(15, 21))
--for (let i = 0; i < numBalloons; i++) {
++  for (let i = 0; i < numBalloons; i++) {
--  let attempts = 0
++    let attempts = 0
--  let placed = false
++    let placed = false
--
++
--  while (!placed && attempts < 30) {
++    while (!placed && attempts < 30) {
--    // FIX: True random distribution with better spread
++      // FIX: True random distribution with better spread
--    let x, y
++      let x, y
--
++
--    // Use different strategies for better distribution
++      // Use different strategies for better distribution
--    let strategy = random()
++      let strategy = random()
--
++
--    if (strategy < 0.3) {
++      if (strategy < 0.3) {
--      // 30% - Truly random across upper area
++        // 30% - Truly random across upper area
--      x = random(80, width - 80)
++        x = random(80, width - 80)
--      y = random(60, height * 0.5)
--    } else if (strategy < 0.6) {
--      // 30% - Radial distribution from center
--      let angle = random(TWO_PI)
--      let radius = random(100, min(width, height) * 0.35)
--      x = width / 2 + cos(angle) * radius
--      y = height * 0.35 + sin(angle) * radius * 0.7  // Elliptical, flatter
--      x = constrain(x, 80, width - 80)
--      y = constrain(y, 60, height * 0.6)
--    } else if (strategy < 0.8) {
--      // 20% - Edge preference for variety
--      if (random() < 0.5) {
--        x = random() < 0.5 ? random(80, 150) : random(width - 150, width - 80)
          y = random(60, height * 0.5)
++      } else if (strategy < 0.6) {
++        // 30% - Radial distribution from center
++        let angle = random(TWO_PI)
++        let radius = random(100, min(width, height) * 0.35)
++        x = width / 2 + cos(angle) * radius
++        y = height * 0.35 + sin(angle) * radius * 0.7 // Elliptical, flatter
++        x = constrain(x, 80, width - 80)
++        y = constrain(y, 60, height * 0.6)
++      } else if (strategy < 0.8) {
++        // 20% - Edge preference for variety
++        if (random() < 0.5) {
++          x = random() < 0.5 ? random(80, 150) : random(width - 150, width - 80)
++          y = random(60, height * 0.5)
++        } else {
++          x = random(80, width - 80)
++          y = random(60, 120)
++        }
        } else {
--        x = random(80, width - 80)
++        // 20% - Poisson disk sampling attempt (avoid clusters)
--        y = random(60, 120)
++        let bestX = random(80, width - 80)
--      }
++        let bestY = random(60, height * 0.6)
--    } else {
++        let bestMinDist = 0
--      // 20% - Poisson disk sampling attempt (avoid clusters)
++
--      let bestX = random(80, width - 80)
++        // Try a few positions and pick the one furthest from existing balloons
--      let bestY = random(60, height * 0.6)
++        for (let j = 0; j < 5; j++) {
--      let bestMinDist = 0
++          let testX = random(80, width - 80)
--
++          let testY = random(60, height * 0.6)
--      // Try a few positions and pick the one furthest from existing balloons
++          let minDist = Infinity
--      for (let j = 0; j < 5; j++) {
++
--        let testX = random(80, width - 80)
++          for (let obstacle of obstacles) {
--        let testY = random(60, height * 0.6)
++            if (obstacle.type === 'balloon') {
--        let minDist = Infinity
++              let d = dist(testX, testY, obstacle.x, obstacle.y)
--
++              minDist = min(minDist, d)
--        for (let obstacle of obstacles) {
++            }
--          if (obstacle.type === 'balloon') {
++          }
--            let d = dist(testX, testY, obstacle.x, obstacle.y)
++
--            minDist = min(minDist, d)
++          if (minDist > bestMinDist) {
++            bestMinDist = minDist
++            bestX = testX
++            bestY = testY
+           }
+         }
--
++
--        if (minDist > bestMinDist) {
++        x = bestX
--          bestMinDist = minDist
++        y = bestY
--          bestX = testX
--          bestY = testY
--        }
+       }
--
--      x = bestX
--      y = bestY
--    }
--    let radius = random(35, 50) // Varied sizes for visual interest
++      let radius = random(35, 50) // Varied sizes for visual interest
--    let valid = true
++      let valid = true
--    // Check distance from other obstacles
++      // Check distance from other obstacles
--    for (let obstacle of obstacles) {
++      for (let obstacle of obstacles) {
--      if (
++        if (
--        dist(x, y, obstacle.x, obstacle.y) <
++          dist(x, y, obstacle.x, obstacle.y) <
--        radius + obstacle.radius + 40
++          radius + obstacle.radius + 40
--      ) {
++        ) {
--        valid = false
++          valid = false
--        break
++          break
++        }
+       }
--    }
--    // Check distance from home branch
++      // Check distance from home branch
--    if (valid && window.homeBranch) {
++      if (valid && window.homeBranch) {
--      let branchY = window.homeBranch.y
++        let branchY = window.homeBranch.y
--      if (Math.abs(y - branchY) < radius + 40) {
++        if (Math.abs(y - branchY) < radius + 40) {
--        valid = false
++          valid = false
++        }
+       }
--    }
--    if (valid) {
++      if (valid) {
--      obstacles.push(new Obstacle(x, y, radius, 'balloon'))
++        obstacles.push(new Obstacle(x, y, radius, 'balloon'))
--      placed = true
++        placed = true
++      }
++      attempts++
+     }
--    attempts++
+   }
--}
    // Create beetles
    let numBeetles = Math.floor(random(9, 15))
    // Show panel
    document.getElementById('stats-panel').style.display = 'block'
--  // Add close button listener
++  // FIX: Add both click AND touch listeners
--  document.getElementById('close-stats-btn').onclick = () => {
++  let closeBtn = document.getElementById('close-stats-btn')
++
++  // Remove any existing listeners
++  closeBtn.replaceWith(closeBtn.cloneNode(true))
++  closeBtn = document.getElementById('close-stats-btn')
++
++  closeBtn.addEventListener('click', function () {
      document.getElementById('stats-panel').style.display = 'none'
++    if (gamePhase === 'DAY') {
++      gamePhase = 'DAY_TO_DUSK'
++      phaseTimer = 0
++    }
++  })
--    // IMMEDIATELY transition to dusk after closing stats
++  closeBtn.addEventListener('touchend', function (e) {
++    e.preventDefault()
++    document.getElementById('stats-panel').style.display = 'none'
      if (gamePhase === 'DAY') {
        gamePhase = 'DAY_TO_DUSK'
        phaseTimer = 0
+     }
--  }
++  })
+ }
  // Make selectSkin global
--window.selectSkin = function (skinId) {
++window.selectSkin = function (skinId, event) {
++  // Prevent touch issues
++  if (event) {
++    event.preventDefault()
++    event.stopPropagation()
++  }
++
    if (unlockedSkins[skinId]) {
      currentSkin = skinId
      saveGame()
      nightsSurvived: nightsSurvived,
      currentNight: currentNight,
      playerPoints: playerPoints,
--    spentPoints: spentPoints,
++    spentPoints: spentPoints
+   }
    localStorage.setItem('cobGameSave', JSON.stringify(saveData))
  // ============================================
  function openUpgradeShop () {
--  if (currentNight <= 1) return // No shop on first night
++  if (currentNight <= 1) return
    shopOpen = true
    noLoop() // Pause the game
--  // Calculate points from flies caught this session
--  // playerPoints = totalFliesCaught
--
    // Update shop UI
    document.getElementById('upgrade-shop').style.display = 'block'
--  document.getElementById('available-points').textContent = playerPoints - spentPoints
++  document.getElementById('available-points').textContent =
++    playerPoints - spentPoints
    // Populate upgrade lists
    updateShopDisplay()
--  // Add continue button listener
++  // FIX: Add both click AND touch listeners for mobile
--  document.getElementById('continue-btn').onclick = closeUpgradeShop
++  let continueBtn = document.getElementById('continue-btn')
++
++  // Remove any existing listeners to prevent duplicates
++  continueBtn.replaceWith(continueBtn.cloneNode(true))
++  continueBtn = document.getElementById('continue-btn')
++
++  // Add both click and touch support
++  continueBtn.addEventListener('click', closeUpgradeShop)
++  continueBtn.addEventListener('touchend', function (e) {
++    e.preventDefault() // Prevent ghost clicks
++    closeUpgradeShop()
++  })
+ }
  function closeUpgradeShop () {
        }/${upgrade.maxLevel})
                              <br><small>${upgrade.description}</small>
                          </div>
--                        <button onclick="buyUpgrade('${key}')" ${buttonDisabled}
++                        <button ontouchend="buyUpgrade('${key}')" onclick="buyUpgrade('${key}')" ${buttonDisabled}
                                  style="padding: 5px 15px; background: ${
                                    canAfford && !maxed ? '#4CAF50' : '#666'
                                  };
        }/${upgrade.maxLevel})
                              <br><small>${upgrade.description}</small>
                          </div>
--                        <button onclick="buyUpgrade('${key}')" ${buttonDisabled}
++                        <button ontouchend="buyUpgrade('${key}')" onclick="buyUpgrade('${key}')" ${buttonDisabled}
                                  style="padding: 5px 15px; background: ${
                                    canAfford && !maxed ? '#FF69B4' : '#666'
                                  };
  // Make buyUpgrade global so onclick can access it
  window.buyUpgrade = function (upgradeKey) {
++  // Prevent any touch/click propagation issues
++  if (event) {
++    event.preventDefault()
++    event.stopPropagation()
++  }
++
    let upgrade = upgrades[upgradeKey]
    if (!upgrade) return
+   }
    // Check if can afford and not maxed
--  let availablePoints = playerPoints - spentPoints  // Calculate available points
++  let availablePoints = playerPoints - spentPoints // Calculate available points
    if (availablePoints >= upgrade.cost && upgrade.level < upgrade.maxLevel) {
--    spentPoints += upgrade.cost  // Track spent points
++    spentPoints += upgrade.cost // Track spent points
      upgrade.level++
      // Apply upgrade effects immediately
      applyUpgradeEffects()
      // Update display with available points
--    document.getElementById('available-points').textContent = playerPoints - spentPoints
++    document.getElementById('available-points').textContent =
++      playerPoints - spentPoints
      updateShopDisplay()
      // Show notification
      `<br><small ${staminaColor}>Dawn Stamina: ${potentialStamina}</small>`
    if (gamePhase === 'NIGHT') {
--  let timeLeft = Math.ceil((NIGHT_DURATION - phaseTimer) / 60);
++    let timeLeft = Math.ceil((NIGHT_DURATION - phaseTimer) / 60)
--
++
--  // Calculate current munch percentage
++    // Calculate current munch percentage
--  let totalFliesInNight = fliesSpawnedThisNight + flies.length;
++    let totalFliesInNight = fliesSpawnedThisNight + flies.length
--  let currentMunchPercent = totalFliesInNight > 0 ?
++    let currentMunchPercent =
--    Math.floor((fliesMunched / totalFliesInNight) * 100) : 0;
++      totalFliesInNight > 0
--
++        ? Math.floor((fliesMunched / totalFliesInNight) * 100)
--  // Calculate predicted dawn stamina
++        : 0
--  let predictedStamina;
++
--  if (currentMunchPercent >= 50) {
++    // Calculate predicted dawn stamina
--    predictedStamina = 100;
++    let predictedStamina
--  } else {
++    if (currentMunchPercent >= 50) {
--    predictedStamina = Math.floor(20 + (currentMunchPercent * 2) * 0.8);
++      predictedStamina = 100
--  }
++    } else {
--
++      predictedStamina = Math.floor(20 + currentMunchPercent * 2 * 0.8)
--  timerText = `${timeLeft}s • ${flies.length} flies`;
++    }
--
++
--  // Show special fly counts if any
++    timerText = `${timeLeft}s • ${flies.length} flies`
--  let goldenCount = flies.filter(f => f.type === 'golden').length;
++
--  let mothCount = flies.filter(f => f.type === 'moth').length;
++    // Show special fly counts if any
--  let queenCount = flies.filter(f => f.type === 'queen').length;
++    let goldenCount = flies.filter(f => f.type === 'golden').length
--
++    let mothCount = flies.filter(f => f.type === 'moth').length
--  if (goldenCount > 0 || mothCount > 0 || queenCount > 0) {
++    let queenCount = flies.filter(f => f.type === 'queen').length
--    let specialCounts = [];
++
--    if (queenCount > 0) specialCounts.push(`${queenCount}👑`);
++    if (goldenCount > 0 || mothCount > 0 || queenCount > 0) {
--    if (goldenCount > 0) specialCounts.push(`${goldenCount}✨`);
++      let specialCounts = []
--    if (mothCount > 0) specialCounts.push(`${mothCount}🦋`);
++      if (queenCount > 0) specialCounts.push(`${queenCount}👑`)
--    timerText += ` (${specialCounts.join(' ')})`;
++      if (goldenCount > 0) specialCounts.push(`${goldenCount}✨`)
--  }
++      if (mothCount > 0) specialCounts.push(`${mothCount}🦋`)
--   // Show munch progress
++      timerText += ` (${specialCounts.join(' ')})`
--  document.getElementById('timer').innerHTML = timerText +
++    }
--    `<br><small style="color: ${predictedStamina < 40 ? '#ff4444' : predictedStamina < 70 ? '#ffaa44' : '#44ff44'}">` +
++    // Show munch progress
--    `Munched: ${currentMunchPercent}% → ${predictedStamina} dawn stamina</small>`;
++    document.getElementById('timer').innerHTML =
++      timerText +
++      `<br><small style="color: ${
++        predictedStamina < 40
++          ? '#ff4444'
++          : predictedStamina < 70
++          ? '#ffaa44'
++          : '#44ff44'
++      }">` +
++      `Munched: ${currentMunchPercent}% → ${predictedStamina} dawn stamina</small>`
    } else if (gamePhase === 'DAWN') {
      let timeLeft = Math.ceil((DAWN_DURATION - phaseTimer) / 60)
      // PHASE 4: Show birds and exhaustion status
+   }
    // PHASE 4: Update meter based on phase
--if (gamePhase === 'DAWN') {
++  if (gamePhase === 'DAWN') {
--  // Show stamina instead of silk during dawn
++    // Show stamina instead of silk during dawn
--  document.getElementById('web-meter-label').textContent = 'STAMINA';
++    document.getElementById('web-meter-label').textContent = 'STAMINA'
--
++
--  // FIX: Always show percentage out of 100, not out of variable max
++    // FIX: Always show percentage out of 100, not out of variable max
--  let staminaPercent = (jumpStamina / 100) * 100; // Always out of 100
++    let staminaPercent = (jumpStamina / 100) * 100 // Always out of 100
--  document.getElementById('web-meter-fill').style.width = staminaPercent + '%';
++    document.getElementById('web-meter-fill').style.width = staminaPercent + '%'
--
++
--  // Color based on stamina level
++    // Color based on stamina level
--  if (jumpStamina < 20) {
++    if (jumpStamina < 20) {
--    // Exhausted - red flash
++      // Exhausted - red flash
--    let flash = sin(frameCount * 0.3) * 0.5 + 0.5;
++      let flash = sin(frameCount * 0.3) * 0.5 + 0.5
--    document.getElementById('web-meter-fill').style.background =
++      document.getElementById(
--      `linear-gradient(90deg, rgb(255, ${50 + flash * 50}, ${50 + flash * 50}), rgb(200, ${30 + flash * 30}, ${30 + flash * 30}))`;
++        'web-meter-fill'
--  } else if (jumpStamina < 40) {
++      ).style.background = `linear-gradient(90deg, rgb(255, ${
--    // Very tired - orange-red
++        50 + flash * 50
--    document.getElementById('web-meter-fill').style.background = 'linear-gradient(90deg, #FF6B35, #FF4444)';
++      }, ${50 + flash * 50}), rgb(200, ${30 + flash * 30}, ${30 + flash * 30}))`
--  } else if (jumpStamina < 60) {
++    } else if (jumpStamina < 40) {
--    // Tired - orange
++      // Very tired - orange-red
--    document.getElementById('web-meter-fill').style.background = 'linear-gradient(90deg, #FFA500, #FF8C00)';
++      document.getElementById('web-meter-fill').style.background =
--  } else if (jumpStamina < 80) {
++        'linear-gradient(90deg, #FF6B35, #FF4444)'
--    // OK - yellow-orange
++    } else if (jumpStamina < 60) {
--    document.getElementById('web-meter-fill').style.background = 'linear-gradient(90deg, #FFD700, #FFA500)';
++      // Tired - orange
++      document.getElementById('web-meter-fill').style.background =
++        'linear-gradient(90deg, #FFA500, #FF8C00)'
++    } else if (jumpStamina < 80) {
++      // OK - yellow-orange
++      document.getElementById('web-meter-fill').style.background =
++        'linear-gradient(90deg, #FFD700, #FFA500)'
++    } else {
++      // Good stamina - green-yellow
++      document.getElementById('web-meter-fill').style.background =
++        'linear-gradient(90deg, #90EE90, #FFD700)'
++    }
++
++    // Show critical warning overlay
++    if (jumpStamina <= 0 && !gameOver) {
++      push()
++      fill(255, 0, 0, 50 + sin(frameCount * 0.3) * 50)
++      rect(0, 0, width, height)
++
++      textAlign(CENTER)
++      textSize(32)
++      fill(255, 50, 50)
++      stroke(0)
++      strokeWeight(3)
++      text('NO STAMINA - AVOID BIRDS!', width / 2, height / 2)
++      pop()
++    }
    } else {
--    // Good stamina - green-yellow
--    document.getElementById('web-meter-fill').style.background = 'linear-gradient(90deg, #90EE90, #FFD700)';
--  }
--
--  // Show critical warning overlay
--  if (jumpStamina <= 0 && !gameOver) {
--    push();
--    fill(255, 0, 0, 50 + sin(frameCount * 0.3) * 50);
--    rect(0, 0, width, height);
--
--    textAlign(CENTER);
--    textSize(32);
--    fill(255, 50, 50);
--    stroke(0);
--    strokeWeight(3);
--    text('NO STAMINA - AVOID BIRDS!', width / 2, height / 2);
--    pop();
--  }
--} else {
      // Normal silk meter
      document.getElementById('web-meter-label').textContent = 'SILK'
      let meterPercent = (webSilk / maxWebSilk) * 100
+     `
    document.body.insertAdjacentHTML('beforeend', gameOverHTML)
++  // FIX: Add touch support to restart button
++  let restartBtn = document.getElementById('restart-btn')
++  restartBtn.addEventListener('click', restartGame)
++  restartBtn.addEventListener('touchend', function (e) {
++    e.preventDefault()
++    restartGame()
++  })
+ }
  // Add restart game function:
+ }
  function touchStarted () {
++  // FIX: Don't process game touches when modals are open
++  if (
++    shopOpen ||
++    document.getElementById('stats-panel').style.display === 'block'
++  ) {
++    return false
++  }
++
    if (touches.length > 0) {
      touchStartTime = millis()
      touchStartX = touches[0].x
+ }
  function touchMoved () {
++  if (
++    shopOpen ||
++    document.getElementById('stats-panel').style.display === 'block'
++  ) {
++    return false
++  }
    // Update web deployment target while holding
    if (
      touchHolding &&
+ }
  function touchEnded () {
++  if (
++    shopOpen ||
++    document.getElementById('stats-panel').style.display === 'block'
++  ) {
++    return false
++  }
    touchHolding = false
    touchProcessing = false