Loading Deno 2.4.

loading.ts

import { bgRgb8, blue, red, rgb8, white, yellow } from "jsr:@std/fmt@1/colors";

// --- ASCII Art & Configuration ---

const logo = [
  "               ██████████████████               ",
  "           █████████████████████████            ",
  "         ███████               ████████         ",
  "       █████                       ██████       ",
  "     █████                            █████     ",
  "    ████           █████████            ████    ",
  "   ████         ███████████████          ████   ",
  "  ███         ███████    █████████        ████  ",
  " ███         ████████   ██████████████     ████ ",
  "████       ████████████████████████████     ███ ",
  "███       ██████████████████████████████     ███",
  "███       ██████████████████████████████     ███",
  "███      ███████████████████████████████     ███",
  "███     ███████████████████████████████      ███",
  "███     ██████████████████████████████       ███",
  "███     ████████████████████████████         ███",
  "████   ███████████████████                  ███ ",
  " ███   ██████████████████                  ████ ",
  "  ███  ██████████████████                 ████  ",
  "   ████ █████████████████                ████   ",
  "    ██████████████████████              ████    ",
  "     ███████████████████████          █████     ",
  "       ██████████████████████████████████       ",
  "         ██████████████████████████████         ",
  "            ████████████████████████            ",
  "                ████████████████              ",
].map((line) => white(line.padEnd(50))); // Make the logo white and pad to consistent width

const largeDenoText = [
  "   ██████╗  ███████╗ ███╗   ██╗  █████╗       █████╗     ██╗██╗",
  "   ██╔══██╗ ██╔════╝ ████╗  ██║ ██╔═══██╗    ██╔══██╗   ██║ ██║",
  "   ██║  ██║ █████╗   ██╔██╗ ██║ ██║   ██║    ╚█████╔╝  ███████║",
  "   ██║  ██║ ██╔══╝   ██║╚██╗██║ ██║   ██║    ██╔═══╝    ╚═══██║",
  "   ██████╔╝ ███████╗ ██║ ╚████║ ╚██████╔╝    ███████╗ ██╗   ██║",
  "   ╚═════╝  ╚══════╝ ╚═╝  ╚═══╝  ╚═════╝     ╚══════╝ ╚═╝   ╚═╝",
].map((line) => rgb8(line.padEnd(70), 45)); // Make the text teal and pad to consistent width

const loadingText = [
  "▌  ▞▀▖▞▀▖▛▀▖▜▘▙ ▌▞▀▖",
  "▌  ▌ ▌▙▄▌▌ ▌▐ ▌▌▌▌▄▖",
  "▌  ▌ ▌▌ ▌▌ ▌▐ ▌▝▌▌ ▌",
  "▀▀▘▝▀ ▘ ▘▀▀ ▀▘▘ ▘▝▀ ",
];

const completeText = [
  "▞▀▖▞▀▖▙▗▌▛▀▖▌  ▛▀▘▀▛▘▛▀▘",
  "▌  ▌ ▌▌▘▌▙▄▘▌  ▙▄  ▌ ▙▄ ",
  "▌ ▖▌ ▌▌ ▌▌  ▌  ▌   ▌ ▌  ",
  "▝▀ ▝▀ ▘ ▘▘  ▀▀▘▀▀▘ ▘ ▀▀▘",
];

// --- Helper Functions ---

const textEncoder = new TextEncoder();
const writeToStdout = (s: string) => Deno.stdout.write(textEncoder.encode(s));
const moveCursor = (x: number, y: number) => writeToStdout(`\x1b[${y};${x}H`);
const getLongestLine = (arr: string[]) =>
  arr.reduce((max, line) => line.length > max ? line.length : max, 0);

function drawStars(width: number, height: number, count: number) {
  const starColors = [white, red, yellow, blue, (s: string) => rgb8(s, 135)];
  for (let i = 0; i < count; i++) {
    const x = Math.floor(Math.random() * width) + 1;
    const y = Math.floor(Math.random() * height) + 1;
    const color = starColors[Math.floor(Math.random() * starColors.length)];
    moveCursor(x, y);
    writeToStdout(color("."));
  }
}

// --- Main Application ---

async function main() {
  console.clear();
  const { columns: termWidth, rows: termHeight } = Deno.consoleSize();
  drawStars(termWidth, termHeight, 100);

  let progress = 0;
  const totalProgress = 100;

  // --- Centering Calculations ---
  const logoWidth = 50; // Fixed width after padding
  const logoX = Math.floor((termWidth - logoWidth) / 2);
  const logoY = Math.floor(
    (termHeight - (logo.length + largeDenoText.length + 8)) / 2
  ) - 4; // Changed from -8 to -2 to move everything down and create more top padding

  const largeTextWidth = 70; // Fixed width after padding
  const largeTextX = Math.floor((termWidth - largeTextWidth) / 2);
  const largeTextY = logoY + logo.length + 4; // Increased margin from 2 to 4

  const loadingTextWidth = getLongestLine(loadingText); // Use helper function to get width
  const loadingTextX = Math.floor((termWidth - loadingTextWidth) / 2);
  const loadingTextY = largeTextY + largeDenoText.length + 3; // Increased margin from 1 to 3

  const progressBarWidth = 80; // Made wider for better pill shape
  const progressBarHeight = 5; // New: height of the progress bar
  const progressBarX = Math.floor((termWidth - progressBarWidth) / 2);
  const progressBarY = loadingTextY + loadingText.length + 2; // Adjust for multi-line loading text

  // --- Static Drawing ---
  logo.forEach((line, i) => {
    moveCursor(logoX, logoY + i);
    writeToStdout(line);
  });
  largeDenoText.forEach((line, i) => {
    moveCursor(largeTextX, largeTextY + i);
    writeToStdout(line);
  });
  // Display each line of the loading text properly
  loadingText.forEach((line, i) => {
    moveCursor(loadingTextX, loadingTextY + i);
    writeToStdout(white(line));
  });

  // --- Animation Loop ---
  let currentProgress = 0;
  const animationInterval = setInterval(() => {
    currentProgress++;

    // --- Progress Bar Drawing ---
    const filledWidth = Math.floor(
      (currentProgress / totalProgress) * (progressBarWidth - 4), // Adjusted back to 4 for rounded corners
    );
    const emptyWidth = progressBarWidth - 4 - filledWidth;

    // Pill-shaped progress bar with rounded corners
    const barTop = white(`╭${"─".repeat(progressBarWidth - 2)}╮`);
    const barUpperMiddle = `${white("│")} ${bgRgb8(" ".repeat(filledWidth), 45)}${
      " ".repeat(emptyWidth)
    } ${white("│")}`;
    const barMiddle = `${white("│")} ${bgRgb8(" ".repeat(filledWidth), 45)}${
      " ".repeat(emptyWidth)
    } ${white("│")}`;
    const barLowerMiddle = `${white("│")} ${bgRgb8(" ".repeat(filledWidth), 45)}${
      " ".repeat(emptyWidth)
    } ${white("│")}`;
    const barBottom = white(`╰${"─".repeat(progressBarWidth - 2)}╯`);

    // Draw all rows of the progress bar
    moveCursor(progressBarX, progressBarY);
    writeToStdout(barTop);
    moveCursor(progressBarX, progressBarY + 1);
    writeToStdout(barUpperMiddle);
    moveCursor(progressBarX, progressBarY + 2);
    writeToStdout(barMiddle);
    moveCursor(progressBarX, progressBarY + 3);
    writeToStdout(barLowerMiddle);
    moveCursor(progressBarX, progressBarY + 4);
    writeToStdout(barBottom);

    // Check completion condition
    const isComplete = currentProgress >= totalProgress;

    if (isComplete) {
      clearInterval(animationInterval);

      // Change LOADING... to COMPLETE - clear all loading text lines
      const completeTextWidth = getLongestLine(completeText);
      const completeTextX = Math.floor((termWidth - completeTextWidth) / 2);

      // Clear all lines used by the loading text
      for (let i = 0; i < loadingText.length; i++) {
        moveCursor(1, loadingTextY + i);
        writeToStdout("\x1b[K"); // Clear from cursor to end of line
      }

      // Display each line of the complete text properly
      completeText.forEach((line, i) => {
        moveCursor(completeTextX, loadingTextY + i);
        writeToStdout(white(line));
      });

      // Add a small delay to ensure the text is visible before exiting
      setTimeout(() => {
        moveCursor(1, termHeight);
        Deno.exit();
      }, 1000); // Wait 1 second before exiting
    }
  }, 30);

  Deno.addSignalListener("SIGINT", () => {
    clearInterval(animationInterval);
    console.clear();
    console.log("Animation stopped.");
    Deno.exit();
  });
}

main();