let blockHash = '000000000000000000029730547464f056f8b6e2e0a02eaf69c24389983a04f5';
let runicSymbol = '\u16E4'; 
let blockNumber = '767430';
let blinkingGroups = [];
let totalGroups = 5;
let symbolsPerGroup = 25;
let gridSize = 9;
let currentBlockHeight = 0;
let targetBlockHeight = 834908;
let fetchIntervalId;

function R(RunicNumber) {
  fill(255);
  textSize(9);
  textStyle(BOLD);
  textAlign(RIGHT, BOTTOM);
  text(RunicNumber, width - 68, height - 10);
  textStyle(NORMAL);
}

function setup() {
  createCanvas(400, 400);
  background(0);
  fill(255);
  textFont('sans-serif');

  let allPositions = [];
  for (let i = 0; i < gridSize * gridSize; i++) {
    allPositions.push(i);
  }
  shuffle(allPositions, true);

  for (let i = 0; i < totalGroups; i++) {
    blinkingGroups[i] = allPositions.slice(i * symbolsPerGroup, (i + 1) * symbolsPerGroup);
  }

  fetchBlockHeight();
  fetchIntervalId = setInterval(fetchBlockHeight, 120000);
}

async function fetchBlockHeight() {
  try {
    const response = await fetch('https://ordinals.com/r/blockheight');
    const data = await response.text();
    currentBlockHeight = parseInt(data, 10);

    if (currentBlockHeight >= targetBlockHeight) {
      clearInterval(fetchIntervalId);
    }
  } catch (error) {
    console.error("Failed to fetch block height:", error);
  }
}

function draw() {
  background(0);

  fill(255);
  textSize(13);
  textAlign(CENTER, CENTER);
  text(`Runic-Etcher ${runicSymbol}`, width / 2, 30);

  let symbolSize = currentBlockHeight >= targetBlockHeight ? 20 : 16;
  let symbolColor = currentBlockHeight >= targetBlockHeight ? color(255, 165, 0) : color(255);
  fill(symbolColor);
  textSize(symbolSize);
  text('▣ ▣ ▣', width / 2, 50);

  if (currentBlockHeight >= targetBlockHeight) {
    textSize(12);
    fill(255, 165, 0);
    text('⛏️', width / 2, 70);
  }

  let padding = width * 0.1;
  let symbolSpacing = (width - padding * 2) / gridSize;
  textSize(symbolSpacing * 0.3);
  let seed = int(unhex(blockHash.substring(blockHash.length - 8)));
  randomSeed(seed);

  let gridLeft = padding;
  let gridRight = width - padding;
  let gridTop = padding + 40;
  let gridBottom = height - padding;

  for (let i = 0; i < gridSize * gridSize; i++) {
    let x = i % gridSize;
    let y = floor(i / gridSize);
    let posX = padding + x * symbolSpacing + symbolSpacing / 2;
    let posY = padding + y * symbolSpacing + symbolSpacing / 2 + 40;

    if (posX > gridLeft && posX < gridRight && posY > gridTop && posY < gridBottom) {
      let isBlinkingNow = blinkingGroups[floor(frameCount / 30) % totalGroups].includes(i) && frameCount % 60 < 30;
      fill(isBlinkingNow ? 255 : noise(x, y) * 255, 100, 100);

      push();
      translate(posX, posY);
      rotate(random(TWO_PI));
      text(runicSymbol, 0, 0);
      pop();
    }
  }

  fill(255);
  textSize(9);
  textAlign(LEFT, BOTTOM);
  text(`Block ${blockNumber}`, width / 5.54, height - 10);

  if (currentBlockHeight >= targetBlockHeight) {
    let fehuSymbol = '\u16A0';
    textSize(20);
    textAlign(CENTER, BOTTOM);
    text(fehuSymbol, width / 1.96, height - 10);
  }

  R(RunicNumberFromHTML);
}