`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
    // Show panel
    document.getElementById('stats-panel').style.display = 'block'
 -  // Add close button listener
 -  document.getElementById('close-stats-btn').onclick = () => {
 -    document.getElementById('stats-panel').style.display = 'none'
 +  // FIX: Add both click AND touch listeners
 +  let closeBtn = document.getElementById('close-stats-btn')
++
 +  // Remove any existing listeners
 +  closeBtn.replaceWith(closeBtn.cloneNode(true))
 +  closeBtn = document.getElementById('close-stats-btn')
 -    // IMMEDIATELY transition to dusk after closing stats
 +  closeBtn.addEventListener('click', function () {
 +    document.getElementById('stats-panel').style.display = 'none'
      if (gamePhase === 'DAY') {
        gamePhase = 'DAY_TO_DUSK'
        phaseTimer = 0
+     }
 +  })
++
 +  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
 -  document.getElementById('continue-btn').onclick = closeUpgradeShop
 +  // FIX: Add both click AND touch listeners for mobile
 +  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
      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
 -  let totalFliesInNight = fliesSpawnedThisNight + flies.length;
 -  let currentMunchPercent = totalFliesInNight > 0 ?
 -    Math.floor((fliesMunched / totalFliesInNight) * 100) : 0;
 +    let totalFliesInNight = fliesSpawnedThisNight + flies.length
 +    let currentMunchPercent =
 +      totalFliesInNight > 0
 +        ? Math.floor((fliesMunched / totalFliesInNight) * 100)
 +        : 0
      // Calculate predicted dawn stamina
 -  let predictedStamina;
 +    let predictedStamina
      if (currentMunchPercent >= 50) {
 -    predictedStamina = 100;
 +      predictedStamina = 100
      } else {
 -    predictedStamina = Math.floor(20 + (currentMunchPercent * 2) * 0.8);
 +      predictedStamina = Math.floor(20 + currentMunchPercent * 2 * 0.8)
+     }
 -  timerText = `${timeLeft}s • ${flies.length} flies`;
 +    timerText = `${timeLeft}s • ${flies.length} flies`
      // Show special fly counts if any
 -  let goldenCount = flies.filter(f => f.type === 'golden').length;
 -  let mothCount = flies.filter(f => f.type === 'moth').length;
 -  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
 +    let queenCount = flies.filter(f => f.type === 'queen').length
      if (goldenCount > 0 || mothCount > 0 || queenCount > 0) {
 -    let specialCounts = [];
 -    if (queenCount > 0) specialCounts.push(`${queenCount}👑`);
 -    if (goldenCount > 0) specialCounts.push(`${goldenCount}✨`);
 -    if (mothCount > 0) specialCounts.push(`${mothCount}🦋`);
 -    timerText += ` (${specialCounts.join(' ')})`;
 +      let specialCounts = []
 +      if (queenCount > 0) specialCounts.push(`${queenCount}👑`)
 +      if (goldenCount > 0) specialCounts.push(`${goldenCount}✨`)
 +      if (mothCount > 0) specialCounts.push(`${mothCount}🦋`)
 +      timerText += ` (${specialCounts.join(' ')})`
+     }
      // Show munch progress
 -  document.getElementById('timer').innerHTML = timerText +
 -    `<br><small style="color: ${predictedStamina < 40 ? '#ff4444' : predictedStamina < 70 ? '#ffaa44' : '#44ff44'}">` +
 -    `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') {
      // 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
 -  let staminaPercent = (jumpStamina / 100) * 100; // Always out of 100
 -  document.getElementById('web-meter-fill').style.width = staminaPercent + '%';
 +    let staminaPercent = (jumpStamina / 100) * 100 // Always out of 100
 +    document.getElementById('web-meter-fill').style.width = staminaPercent + '%'
      // Color based on stamina level
      if (jumpStamina < 20) {
        // Exhausted - red flash
 -    let flash = sin(frameCount * 0.3) * 0.5 + 0.5;
 -    document.getElementById('web-meter-fill').style.background =
 -      `linear-gradient(90deg, rgb(255, ${50 + flash * 50}, ${50 + flash * 50}), rgb(200, ${30 + flash * 30}, ${30 + flash * 30}))`;
 +      let flash = sin(frameCount * 0.3) * 0.5 + 0.5
 +      document.getElementById(
 +        'web-meter-fill'
 +      ).style.background = `linear-gradient(90deg, rgb(255, ${
 +        50 + flash * 50
 +      }, ${50 + flash * 50}), rgb(200, ${30 + flash * 30}, ${30 + flash * 30}))`
      } else if (jumpStamina < 40) {
        // Very tired - orange-red
 -    document.getElementById('web-meter-fill').style.background = 'linear-gradient(90deg, #FF6B35, #FF4444)';
 +      document.getElementById('web-meter-fill').style.background =
 +        'linear-gradient(90deg, #FF6B35, #FF4444)'
      } else if (jumpStamina < 60) {
        // Tired - orange
 -    document.getElementById('web-meter-fill').style.background = 'linear-gradient(90deg, #FFA500, #FF8C00)';
 +      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)';
 +      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)';
 +      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();
 +      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.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