`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
++  // FIX: Add both click AND touch listeners
--  document.getElementById('close-stats-btn').onclick = () => {
++  let closeBtn = document.getElementById('close-stats-btn')
--    document.getElementById('stats-panel').style.display = 'none'
++
++  // 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
++  // 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
      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 totalFliesInNight = fliesSpawnedThisNight + flies.length
--  let currentMunchPercent = totalFliesInNight > 0 ?
++    let currentMunchPercent =
--    Math.floor((fliesMunched / totalFliesInNight) * 100) : 0;
++      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 goldenCount = flies.filter(f => f.type === 'golden').length
--  let mothCount = flies.filter(f => f.type === 'moth').length;
++    let mothCount = flies.filter(f => f.type === 'moth').length
--  let queenCount = flies.filter(f => f.type === 'queen').length;
++    let queenCount = flies.filter(f => f.type === 'queen').length
      if (goldenCount > 0 || mothCount > 0 || queenCount > 0) {
--    let specialCounts = [];
++      let specialCounts = []
--    if (queenCount > 0) specialCounts.push(`${queenCount}👑`);
++      if (queenCount > 0) specialCounts.push(`${queenCount}👑`)
--    if (goldenCount > 0) specialCounts.push(`${goldenCount}✨`);
++      if (goldenCount > 0) specialCounts.push(`${goldenCount}✨`)
--    if (mothCount > 0) specialCounts.push(`${mothCount}🦋`);
++      if (mothCount > 0) specialCounts.push(`${mothCount}🦋`)
--    timerText += ` (${specialCounts.join(' ')})`;
++      timerText += ` (${specialCounts.join(' ')})`
+     }
      // Show munch progress
--  document.getElementById('timer').innerHTML = timerText +
++    document.getElementById('timer').innerHTML =
--    `<br><small style="color: ${predictedStamina < 40 ? '#ff4444' : predictedStamina < 70 ? '#ffaa44' : '#44ff44'}">` +
++      timerText +
--    `Munched: ${currentMunchPercent}% → ${predictedStamina} dawn stamina</small>`;
++      `<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
++    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
      if (jumpStamina < 20) {
        // 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'
++      ).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();
++      push()
--    fill(255, 0, 0, 50 + sin(frameCount * 0.3) * 50);
++      fill(255, 0, 0, 50 + sin(frameCount * 0.3) * 50)
--    rect(0, 0, width, height);
++      rect(0, 0, width, height)
--
++
--    textAlign(CENTER);
++      textAlign(CENTER)
--    textSize(32);
++      textSize(32)
--    fill(255, 50, 50);
++      fill(255, 50, 50)
--    stroke(0);
++      stroke(0)
--    strokeWeight(3);
++      strokeWeight(3)
--    text('NO STAMINA - AVOID BIRDS!', width / 2, height / 2);
++      text('NO STAMINA - AVOID BIRDS!', width / 2, height / 2)
--    pop();
++      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