Black screen is gone

function setup() {
  createCanvas(windowWidth, windowHeight);
  noSmooth();

  createLevelButtons();

  hintButton = select('#hint-button');
  if (hintButton) {
    hintButton.elt.addEventListener('touchend', (event) => {
      event.stopPropagation();
      showHint();
    });
  }

  let savedLevel = localStorage.getItem('biggestTownDiamondHuntLevel');
  if (savedLevel) {
    currentLevel = parseInt(savedLevel);
    if (currentLevel < 1 || currentLevel > 9) {
      currentLevel = 1;
    }
  }

  resetGame(currentLevel);

  howToPlayModal = select('#how-to-play-modal');
  let closeButton = select('#close-how-to-play');

  if (closeButton) {
    closeButton.elt.addEventListener('touchend', (event) => {
      event.stopPropagation();
      closeHowToPlayModal();
    });
  }

  if (howToPlayModal) {
    howToPlayModal.elt.addEventListener('touchend', (event) => {
      if (event.target === howToPlayModal.elt) {
        closeHowToPlayModal();
      }
    });
  }

  showHowToPlayModal();
}

function draw() {
  if (currentLevel === 9) {
    background(0);
  } else {
    background(220);
  }

  textAlign(LEFT, TOP);
  textSize(32);
  fill(0);
  noStroke();
  text(`Level: ${currentLevel}`, 10, 10);
  if (currentLevel === 8) {
    text(`Fish Caught: ${fishCaughtCount}`, 10, 40);
  }

  if (currentLevel !== 8) {
    translate(camX, camY);
  }
  
  if (!panning && currentLevel === 9 && !diamondFound && !gameCompleted) {
    camX += driftVelocityX;
    camY += driftVelocityY;
    driftVelocityX *= 0.95;
    driftVelocityY *= 0.95;
    if (abs(driftVelocityX) < 0.1) driftVelocityX = 0;
    if (abs(driftVelocityY) < 0.1) driftVelocityY = 0;
    camX = constrain(camX, -(TOWN_WIDTH - width), 0);
  }

  checkAndGenerateNewBlocks();

  if (currentLevel === 9) {
    for (let nebula of nebulae) {
      fill(nebula.color);
      noStroke();
      ellipse(nebula.x, nebula.y, nebula.size, nebula.size);
    }

    for (let asteroid of asteroids) {
      fill(asteroid.color);
      stroke(asteroid.color.levels[0] + 50);
      strokeWeight(1);
      ellipse(asteroid.x, asteroid.y, asteroid.size, asteroid.size);
      asteroid.x += asteroid.speedX;
      asteroid.y += asteroid.speedY;
      if (asteroid.x > TOWN_WIDTH) asteroid.x = -asteroid.size;
      if (asteroid.x < -asteroid.size) asteroid.x = TOWN_WIDTH;
      let screenTop = -camY;
      let screenBottom = -camY + height;
      if (asteroid.y > screenBottom + height) asteroid.y = screenTop - height;
      if (asteroid.y < screenTop - height) asteroid.y = screenBottom + height;
    }

  } else if (currentLevel !== 8) {
    let visibleStartX = -camX;
    let visibleStartY = -camY;
    let visibleEndX = visibleStartX + width;
    let visibleEndY = visibleStartY + height;

    let buffer = BLOCK_SIZE * 2;
    visibleStartX -= buffer;
    visibleStartY -= buffer;
    visibleEndX += buffer;
    visibleEndY += buffer;

    let startDrawBlockX = floor(visibleStartX / BLOCK_SIZE);
    let startDrawBlockY = floor(visibleStartY / BLOCK_SIZE);
    let endDrawBlockX = ceil(visibleEndX / BLOCK_SIZE);
    let endDrawBlockY = ceil(visibleEndY / BLOCK_SIZE);

    stroke(100);
    strokeWeight(2);
    for (let bx = startDrawBlockX; bx < endDrawBlockX; bx++) {
      for (let by = startDrawBlockY; by < endDrawBlockY; by++) {
        if (bx >= 0 && bx < TOWN_WIDTH / BLOCK_SIZE) {
          let blockData = generatedBlocks.get(`${bx},${by}`);
          if (blockData) {
            let x = bx * BLOCK_SIZE;
            let y = by * BLOCK_SIZE;
            line(x, y, x + BLOCK_SIZE, y);
            line(x + BLOCK_SIZE, y, x + BLOCK_SIZE, y + BLOCK_SIZE);
            line(x, y + BLOCK_SIZE, x + BLOCK_SIZE, y + BLOCK_SIZE);
            line(x, y, x, y + BLOCK_SIZE);
          }
        }
      }
    }

    noStroke();

    for (let bx = startDrawBlockX; bx < endDrawBlockX; bx++) {
      for (let by = startDrawBlockY; by < endDrawBlockY; by++) {
        if (bx >= 0 && bx < TOWN_WIDTH / BLOCK_SIZE) {
          let blockData = generatedBlocks.get(`${bx},${by}`);
          if (blockData) {
            for (let person of blockData.people) {
              fill(person.color);
              rect(person.x, person.y, person.bodyW, person.bodyH);
              ellipse(person.x + person.bodyW / 2, person.y - person.headSize / 2, person.headSize, person.headSize);
            }
          }
        }
      }
    }

    for (let bx = startDrawBlockX; bx < endDrawBlockX; bx++) {
      for (let by = startDrawBlockY; by < endDrawBlockY; by++) {
        if (bx >= 0 && bx < TOWN_WIDTH / BLOCK_SIZE) {
          let blockData = generatedBlocks.get(`${bx},${by}`);
          if (blockData) {
            for (let building of blockData.buildings) {
              fill(building.color);
              rect(building.x, building.y, building.w, building.h);
            }
          }
        }
      }
    }
  }

  if (currentLevel === 6 && !diamondFound && chasingUFO) {
    let targetX = -camX + width / 2;
    let targetY = -camY + height / 2;
    let moveVec = createVector(targetX - chasingUFO.x, targetY - chasingUFO.y);
    moveVec.normalize().mult(chasingUFO.speed);
    chasingUFO.x += moveVec.x;
    chasingUFO.y += moveVec.y;
    chasingUFO.x += sin(frameCount * 0.05) * 5;
    chasingUFO.y += cos(frameCount * 0.04) * 5;
    drawUFO(chasingUFO.x, chasingUFO.y, chasingUFO.size, color(255, 0, 0, 180), color(255, 255, 0));
  }

  if (currentLevel === 6 && petUFO) {
    let targetX = -camX + width / 2;
    let targetY = -camY + height / 2;
    petUFO.x = lerp(petUFO.x, targetX, 0.05);
    petUFO.y = lerp(petUFO.y, targetY, 0.05);
    drawUFO(petUFO.x, petUFO.y, petUFO.size, petUFO.bodyColor, petUFO.lightColor);
  }

  if (!diamondFound) {
    if (currentLevel === 8) {
      fill(50, 150, 255);
      noStroke();
      rect(-camX, height / 2, width, height / 2);
      stroke(100);
      strokeWeight(4);
      line(width / 2 - 50, 0, width / 2 + 50, height / 2 - 100);
      fill(150);
      strokeWeight(2);
      rect(width / 2 - 60, -10, 20, 20);
      stroke(0);
      strokeWeight(1);
      line(width / 2 + 50, height / 2 - 100, diamondX, fishingBobberY + fishingBobberJiggleOffset);
      fill(255, 0, 0);
      noStroke();
      ellipse(diamondX, fishingBobberY + fishingBobberJiggleOffset, 10, 15);

      if (fishingRodActive) {
        let elapsed = millis() - fishingRodCastTime;
        if (elapsed > fishingCooldown && !fishingCatch) {
          fishingBobberJiggleOffset = sin(frameCount * 0.3) * 5;
        } else {
          fishingBobberJiggleOffset = 0;
        }
      }

      if (fishingCatch) {
        if (fishingCatch.y < height / 2 - 80) {
          fishingCatch.y = height / 2 - 80;
        } else {
          fishingCatch.y = lerp(fishingCatch.y, height / 2 - 80, 0.1);
        }
      }

      if (fishingCatch) {
        if (fishingCatch.type === 'fish') drawFish(fishingCatch.x, fishingCatch.y, fishingCatch.size);
        else if (fishingCatch.type === 'sushi') drawSushi(fishingCatch.x, fishingCatch.y, fishingCatch.size);
        else if (fishingCatch.type === 'diamond') {
          push();
          translate(fishingCatch.x, fishingCatch.y);
          rotate(frameCount * 0.1);
          fill(0, 255, 255, 200);
          noStroke();
          ellipse(0, 0, fishingCatch.size, fishingCatch.size);
          pop();
        }
      }
    } else if (currentLevel === 7) {
      if (diggingAnimationActive) {
        let elapsed = millis() - diggingStartTime;
        let alpha = map(elapsed, 0, diggingDuration, 200, 0);
        let digSize = map(elapsed, 0, diggingDuration, 10, diamondSize * 1.5);
        fill(139, 69, 19, alpha);
        noStroke();
        ellipse(diamondX, diamondY + diamondSize / 4, digSize, digSize / 2);

        if (elapsed > diggingDuration) {
          diggingAnimationActive = false;
          diamondFound = true;
          diamondOsc.start(0, 880, 0.5);
          diamondOsc.amp(0, 0.5, 0.2);
          diamondOsc.stop(0.7);

          setTimeout(() => {
            triggerLevel7Win();
          }, 2000);
        }
      } else {
        drawFootballDiamond(diamondX, diamondY, diamondSize);
      }
    } else if (currentLevel === 6) {
      drawUFO(diamondX, diamondY, diamondSize, color(0, 255, 255), color(255, 255, 0));
    } else if (currentLevel === 9) {
      fill(0, 255, 255);
      noStroke();
      ellipse(diamondX, diamondY, diamondSize, diamondSize);
    } else {
      fill(0, 255, 255);
      noStroke();
      ellipse(diamondX, diamondY, diamondSize, diamondSize);
    }
  } else {
    textAlign(CENTER, CENTER);
    textSize(64);
    fill(0);
    if (gameCompleted) {
      text("Game Over, You Won!", -camX + width / 2, -camY + height / 2);

      if (diamondRock) {
        if (currentLevel === 6) {
          drawUFO(diamondRock.x, diamondRock.y, diamondRock.size, color(0, 255, 255), color(255, 255, 0));
        } else if (currentLevel === 7) {
          drawFootballDiamond(diamondRock.x, diamondRock.y, diamondRock.size);
        } else if (currentLevel === 8) {
          drawSushi(diamondRock.x, diamondRock.y, diamondRock.size);
        } else if (currentLevel === 9) {
          push();
          translate(diamondRock.x, diamondRock.y);
          rotate(frameCount * 0.1);
          fill(0, 255, 255, 200);
          noStroke();
          ellipse(0, 0, diamondRock.size, diamondRock.size);
          pop();
        }
      }
    } else {
      text("You Found the Diamond!", -camX + width / 2, -camY + height / 2);
    }
  }

  if (gameCompleted) {
    for (let i = confetti.length - 1; i >= 0; i--) {
      confetti[i].update();
      confetti[i].display();
      if (confetti[i].isOffScreen()) {
        confetti.splice(i, 1);
      }
    }
  }

  if (postWinAnimationActive) {
    for (let i = grabbingPeople.length - 1; i >= 0; i--) {
      let person = grabbingPeople[i];

      if (person.state === 'movingToRock') {
        let moveVec = createVector(person.targetX - person.x, person.targetY - person.y);
        moveVec.normalize().mult(person.speed);
        person.x += moveVec.x;
        person.y += moveVec.y;

        let d = dist(person.x, person.y, person.targetX, person.targetY);
        if (d < person.speed * 2) {
          person.state = 'grabbing';
          if (diamondRock) {
            diamondRock.size *= 0.9;
            if (diamondRock.size < 5) diamondRock = undefined;
          }
          person.targetX = random(0, TOWN_WIDTH);
          person.targetY = -camY - height;
          person.speed = random(5, 10);
        }
      } else if (person.state === 'grabbing') {
        person.state = 'leaving';
      } else if (person.state === 'leaving') {
        let moveVec = createVector(person.targetX - person.x, person.targetY - person.y);
        moveVec.normalize().mult(person.speed);
        person.x += moveVec.x;
        person.y += moveVec.y;

        if (person.y < -camY - BLOCK_SIZE || person.y > -camY + height + BLOCK_SIZE ||
            person.x < -camX - BLOCK_SIZE || person.x > -camX + width + BLOCK_SIZE) {
          grabbingPeople.splice(i, 1);
        }
      }

      if (person) {
        fill(person.color);
        noStroke();
        rect(person.x, person.y, person.bodyW, person.bodyH);
        ellipse(person.x + person.bodyW / 2, person.y - person.headSize / 2, person.headSize, person.headSize);
      }
    }

    if (grabbingPeople.length === 0) {
      postWinAnimationActive = false;
    }
  }

  if (currentLevel === 7 && hintCircleActive) {
    let elapsed = millis() - hintCircleStartTime;
    let alpha = map(elapsed, 0, hintCircleDuration, 255, 0);
    let circleSize = map(elapsed, 0, hintCircleDuration, diamondSize + tapTolerance * 2, diamondSize + tapTolerance * 3);

    push();
    noFill();
    stroke(255, 0, 0, alpha);
    strokeWeight(3);
    ellipse(diamondX, diamondY, circleSize, circleSize);
    pop();

    if (elapsed > hintCircleDuration) {
      hintCircleActive = false;
      resetGame(currentLevel + 1);
    }
  }
}

function generateBlock(blockX, blockY) {
  let startX = blockX * BLOCK_SIZE;
  let startY = blockY * BLOCK_SIZE;

  if (currentLevel === 9) {
    for (let i = 0; i < random(1, 4); i++) {
      let size = random(BLOCK_SIZE * 0.2, BLOCK_SIZE * 0.8);
      let col = color(random(80, 150));
      asteroids.push({
        x: startX + random(BLOCK_SIZE - size),
        y: startY + random(BLOCK_SIZE - size),
        size: size,
        color: col,
        speedX: random(-0.5, 0.5),
        speedY: random(-0.5, 0.5),
        blockX, blockY
      });
    }

    if (random() < 0.2) {
      let size = random(BLOCK_SIZE * 1.5, BLOCK_SIZE * 3);
      let col = color(random(50, 150), random(50, 150), random(150, 255), random(50, 100));
      nebulae.push({
        x: startX + random(BLOCK_SIZE - size),
        y: startY + random(BLOCK_SIZE - size),
        size: size,
        color: col,
        blockX, blockY
      });
    }
  } else {
    let blockData = { buildings: [], people: [] };

    for (let i = 0; i < 3; i++) {
      if (random() > buildingDensityThreshold) {
        let w = random(BLOCK_SIZE * 0.4, BLOCK_SIZE * 0.8);
        let h = random(BLOCK_SIZE * 0.4, BLOCK_SIZE * 0.8);
        let col = color(random(100, 180), random(100, 180), random(100, 180));
        blockData.buildings.push({
          x: startX + random(BLOCK_SIZE - w),
          y: startY + random(BLOCK_SIZE - h),
          w, h, color: col,
          blockX, blockY
        });
      }
    }

    if (currentLevel >= 5) {
      for (let i = 0; i < 5; i++) {
        if (random() > personDensityThreshold) {
          let bodyW = random(10, 20);
          let bodyH = random(20, 35);
          let headSize = random(8, 12);
          let col = color(random(50, 150), random(50, 150), random(50, 150));
        blockData.people.push({
            x: startX + random(BLOCK_SIZE - bodyW),
            y: startY + random(BLOCK_SIZE - bodyH),
            bodyW, bodyH, headSize, color: col,
            blockX, blockY
          });
        }
      }
    }
    generatedBlocks.set(`${blockX},${blockY}`, blockData);
  }
}

function checkAndGenerateNewBlocks() {
  if (currentLevel === 8) {
    return;
  }

  let visibleStartX = -camX;
  let visibleStartY = -camY;
  let visibleEndX = visibleStartX + width;
  let visibleEndY = visibleStartY + height;

  let buffer = BLOCK_SIZE * 2;
  visibleStartX -= buffer;
  visibleStartY -= buffer;
  visibleEndX += buffer;
  visibleEndY += buffer;

  let startBlockX = floor(visibleStartX / BLOCK_SIZE);
  let startBlockY = floor(visibleStartY / BLOCK_SIZE);
  let endBlockX = ceil(visibleEndX / BLOCK_SIZE);
  let endBlockY = ceil(visibleEndY / BLOCK_SIZE);

  for (let bx = startBlockX; bx < endBlockX; bx++) {
    for (let by = startBlockY; by < endBlockY; by++) {
      if (bx >= 0 && bx < TOWN_WIDTH / BLOCK_SIZE) {
        if (currentLevel === 9) {
          if (!generatedSpaceBlocks.has(`${bx},${by}`)) {
            generateBlock(bx, by);
            generatedSpaceBlocks.add(`${bx},${by}`);
          }
        } else if (!generatedBlocks.has(`${bx},${by}`)) {
          generateBlock(bx, by);
        }
      }
    }
  }
}

function drawUFO(x, y, size, bodyColor, lightColor) {
  fill(bodyColor);
  noStroke();
  ellipse(x, y, size * 2, size * 0.75);
  ellipse(x, y - size * 0.3, size * 0.8, size * 0.5);
  fill(lightColor);
  ellipse(x, y - size * 0.3, size * 0.4, size * 0.2);
}

function touchStarted() {
  if (howToPlayModal.elt.style.display === 'flex') {
    return false;
  }

  if (!audioStarted) {
    userStartAudio();
    audioStarted = true;
  }

  if (!diamondFound && !gameCompleted && !(currentLevel === 7 && hintCircleActive)) {
    if (touches.length > 0) {
      let tapVirtualX = touches[0].x - camX;
      let tapVirtualY = touches[0].y - camY;

      if (currentLevel === 8) {
        if (fishingRodActive) {
          if (millis() - fishingRodCastTime > fishingCooldown) {
            let catchRoll = random();
            if (catchRoll < 0.05) {
              fishingCatch = { type: 'diamond', x: diamondX, y: fishingBobberY, size: diamondSize };
            } else if (catchRoll < 0.20) {
              fishingCatch = { type: 'sushi', x: diamondX, y: fishingBobberY, size: diamondSize };
            } else {
              fishingCatch = { type: 'fish', x: diamondX, y: fishingBobberY, size: diamondSize };
            }

            reelInOsc.start(0, 300, 0.2);
            reelInOsc.amp(0, 0.5, 0.2);
            reelInOsc.stop(0.7);

            fishingRodActive = false;
          }
        } else {
          if (fishingCatch) {
            let catchDist = dist(tapVirtualX, tapVirtualY, fishingCatch.x, fishingCatch.y);
            if (catchDist < fishingCatch.size / 2 + tapTolerance) {
              if (fishingCatch.type === 'fish' || fishingCatch.type === 'sushi') {
                fishCaughtCount++;
              } else if (fishingCatch.type === 'diamond') {
                triggerLevel8Win();
              }
              fishingCatch = undefined;
            }
          } else {
            fishingRodActive = true;
            fishingRodCastTime = millis();
            fishingCooldown = random(1000, 3000);
            fishingBobberY = height / 2 + 100;

            castOsc.start(0, 150, 0.2);
            castOsc.amp(0, 0.5, 0.2);
            castOsc.stop(0.7);
          }
        }
      } else {
        panning = true;
        prevTouchX = touches[0].x;
        prevTouchY = touches[0].y;

        let d = dist(tapVirtualX, tapVirtualY, diamondX, diamondY);

        if (currentLevel === 7) {
          if (d < diamondSize / 2 + tapTolerance && !diggingAnimationActive) {
            diggingAnimationActive = true;
            diggingStartTime = millis();
          }
        } else if (currentLevel === 6) {
          if (d < diamondSize / 2 + tapTolerance) {
            diamondFound = true;
            diamondOsc.start(0, 880, 0.5);
            diamondOsc.amp(0, 0.5, 0.2);
            diamondOsc.stop(0.7);

            chasingUFO = undefined;

            setTimeout(() => {
              resetGame(currentLevel + 1);
            }, 2000);
          }
        } else if (currentLevel === 9) {
          if (d < diamondSize / 2 + tapTolerance) {
            diamondFound = true;
            diamondOsc.start(0, 880, 0.5);
            diamondOsc.amp(0, 0.5, 0.2);
            diamondOsc.stop(0.7);
            
            setTimeout(() => {
              triggerLevel9Win();
            }, 2000);
          }
        } else {
          if (d < diamondSize / 2 + tapTolerance) {
            diamondFound = true;
            diamondOsc.start(0, 880, 0.5);
            diamondOsc.amp(0, 0.5, 0.2);
            diamondOsc.stop(0.7);

            setTimeout(() => {
              resetGame(currentLevel + 1);
            }, 2000);
          }
        }
      }
    }
  }
  return false;
}

function touchMoved() {
  if (howToPlayModal.elt.style.display === 'flex') {
    return false;
  }

  if (panning && !diamondFound && !gameCompleted && !diggingAnimationActive && currentLevel !== 8) {
    if (touches.length > 0) {
      let dx = touches[0].x - prevTouchX;
      let dy = touches[0].y - prevTouchY;

      camX += dx;
      camY += dy;

      camX = constrain(camX, -(TOWN_WIDTH - width), 0);

      prevTouchX = touches[0].x;
      prevTouchY = touches[0].y;

      if (currentLevel === 9) {
        lastPanDriftX = dx;
        lastPanDriftY = dy;
      }
    }
  }
  return false;
}

function triggerLevel8Win() {
  console.log("Triggering Level 8 Win!");
  currentLevel = 8;
  diamondFound = true;
  gameCompleted = true;

  for (let i = 0; i < 200; i++) {
    confetti.push(new ConfettiParticle(width / 2, height / 2));
  }

  diamondRock = {
    x: width / 2,
    y: height / 2 - 100,
    size: 250
  };

  setTimeout(() => {
    resetGame(currentLevel + 1);
  }, 2000);
}

class ConfettiParticle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector(random(-5, 5), random(-15, -5));
    this.acc = createVector(0, 0.5);
    this.color = color(random(255), random(255), random(255), random(150, 255));
    this.size = random(8, 16);
    this.rotation = random(TWO_PI);
    this.rotationSpeed = random(-0.1, 0.1);
  }

  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.rotation += this.rotationSpeed;
  }

  display() {
    push();
    translate(this.pos.x, this.pos.y);
    rotate(this.rotation);
    fill(this.color);
    noStroke();
    rect(0, 0, this.size, this.size / 2);
    pop();
  }

  isOffScreen() {
    return this.pos.y > -camY + height;
  }
}