cover.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TINYNOID cover art</title>
  <style>
    html, body {
      margin: 0;
      background: #050611;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <!--
    Store cover art. The canvas is the final PNG: ?format=wide renders
    1920x1080 (16:9) and ?format=square renders 1080x1080. Store guidelines
    allow no text besides the game title, so keep this page title-only.
  -->
  <canvas id="cover"></canvas>
  <script src="./pixel-font.js"></script>
  <script>
    const FORMATS = {
      wide: {
        width: 320,
        height: 180,
        pixel: 6,
        rows: ["SXSSSSSSSSSSSSSSXS", "R", "Y", "G", "C", "P"],
        gap: [[4, 15], [4, 16], [5, 14], [5, 15], [5, 16], [5, 17]],
        titleY: 92,
        titleScale: 6,
        paddle: [200, 160],
        ball: [252, 138],
        shards: [[266, 84, "C"], [276, 94, "P"], [290, 88, "C"], [262, 100, "P"]],
        stars: 54,
      },
      square: {
        width: 216,
        height: 216,
        pixel: 5,
        rows: ["XSSSSSSSSSSX", "R", "Y", "G", "C", "B", "P"],
        gap: [[5, 9], [5, 10], [6, 8], [6, 9], [6, 10], [6, 11]],
        titleY: 108,
        titleScale: 5,
        paddle: [104, 192],
        ball: [150, 166],
        shards: [[158, 94, "B"], [172, 100, "P"], [186, 92, "B"]],
        stars: 40,
      },
    };
    const VOID = "#050611";
    const OUTLINE = "#111329";
    const WHITE = "#f7f4ff";
    const RAIL_DARK = "#12345b";
    const RAIL_MID = "#287fc4";
    const RAIL_LIGHT = "#74ddff";
    const STAR_DIM = "#28366f";
    const STAR_BRIGHT = "#8da9ff";
    const TRAIL = ["#f7f4ff", "#74ddff", "#287fc4", "#12345b"];
    // Mirrors godot/scripts/brick_rules.gd: [core, shadow].
    const BRICKS = {
      W: ["#f7f4ff", "#8994b8"],
      O: ["#ff715b", "#9e3d28"],
      C: ["#45c7f2", "#23639b"],
      G: ["#7ed321", "#397818"],
      R: ["#e83d10", "#7d250f"],
      B: ["#1465d8", "#263d8f"],
      P: ["#f06ab5", "#8f356d"],
      Y: ["#ffa43d", "#9e5a24"],
      S: ["#b8c0c8", "#626b78"],
      X: ["#e6b422", "#8a6416"],
    };

    const format = FORMATS[
      new URLSearchParams(location.search).get("format") ?? "wide"
    ] ?? FORMATS.wide;
    const canvas = document.getElementById("cover");
    canvas.width = format.width * format.pixel;
    canvas.height = format.height * format.pixel;
    const context = canvas.getContext("2d");
    context.imageSmoothingEnabled = false;
    context.setTransform(format.pixel, 0, 0, format.pixel, 0, 0);

    function rect(x, y, width, height, color) {
      context.fillStyle = color;
      context.fillRect(x, y, width, height);
    }

    // Godot's Color.lightened(amount).
    function lightened(hex, amount) {
      const channels = [1, 3, 5].map((index) => {
        const value = parseInt(hex.slice(index, index + 2), 16);
        return Math.round(value + (255 - value) * amount);
      });
      return `#${channels.map((value) => value.toString(16).padStart(2, "0")).join("")}`;
    }

    function drawStars() {
      let seed = 7;
      const random = () => {
        seed = (seed * 1664525 + 1013904223) % 4294967296;
        return seed / 4294967296;
      };
      for (let index = 0; index < format.stars; index += 1) {
        const x = 14 + Math.floor(random() * (format.width - 28));
        const y = 14 + Math.floor(random() * (format.height - 18));
        rect(x, y, 1, 1, index % 4 === 0 ? STAR_BRIGHT : STAR_DIM);
      }
    }

    // Mirrors godot/scripts/retro_arena.gd rails.
    function drawRails() {
      const { width, height } = format;
      rect(4, 4, width - 8, 8, RAIL_DARK);
      rect(5, 5, width - 10, 2, RAIL_LIGHT);
      rect(5, 7, width - 10, 3, RAIL_MID);
      for (let x = 12; x < width - 12; x += 16) {
        rect(x, 9, 8, 2, RAIL_DARK);
      }
      for (const railX of [4, width - 12]) {
        rect(railX, 12, 8, height - 12, RAIL_DARK);
        for (let y = 12; y < height; y += 8) {
          rect(railX + 1, y, 6, 7, Math.floor(y / 8) % 2 === 0 ? RAIL_MID : RAIL_DARK);
          rect(railX + 1, y, 1, 7, RAIL_LIGHT);
          rect(railX + 2, y, 4, 1, RAIL_LIGHT);
        }
      }
    }

    // Mirrors godot/scripts/brick.gd with the cell's top-left at (x, y).
    function drawBrick(x, y, code) {
      const [core, shadow] = BRICKS[code];
      rect(x + 1, y + 1, 14, 8, OUTLINE);
      rect(x + 2, y + 2, 12, 6, core);
      rect(x + 3, y + 3, 10, 1, lightened(core, 0.38));
      rect(x + 3, y + 7, 10, 1, shadow);
      rect(x + 13, y + 4, 1, 3, shadow);
      if (code === "X") {
        rect(x + 5, y + 5, 6, 1, WHITE);
      } else if (code === "S") {
        rect(x + 3, y + 6, 1, 1, WHITE);
        rect(x + 5, y + 6, 1, 1, WHITE);
      }
    }

    function drawWall() {
      const columns = Math.floor((format.width - 24) / 16);
      const left = Math.floor((format.width - columns * 16) / 2);
      const gap = new Set(format.gap.map(([row, column]) => `${row}:${column}`));
      format.rows.forEach((pattern, row) => {
        for (let column = 0; column < columns; column += 1) {
          if (gap.has(`${row}:${column}`)) continue;
          const code = pattern.length === 1 ? pattern : pattern[column];
          drawBrick(left + column * 16, 16 + row * 10, code);
        }
      });
      for (const [x, y, code] of format.shards) {
        rect(x, y, 2, 2, BRICKS[code][0]);
        rect(x + 3, y + 3, 1, 1, BRICKS[code][1]);
      }
    }

    function drawTitle() {
      const scale = format.titleScale;
      const x = Math.floor((format.width - measure("TINYNOID", scale)) / 2);
      context.fillStyle = RAIL_MID;
      drawLine(context, "TINYNOID", format.titleY, scale, RAIL_MID, x + 3, 3);
      context.fillStyle = RAIL_LIGHT;
      drawLine(context, "TINYNOID", format.titleY, scale, RAIL_LIGHT, x, 0);
    }

    // Mirrors godot/scripts/paddle.gd, ball.gd, and ball_trail.gd.
    function drawPaddleAndBall() {
      const [paddleX, paddleY] = format.paddle;
      const half = 20;
      rect(paddleX - half, paddleY - 4, 40, 8, OUTLINE);
      rect(paddleX - half + 2, paddleY - 3, 36, 6, WHITE);
      rect(paddleX - half + 2, paddleY - 3, 36, 1, "#bff3ff");
      rect(paddleX - half, paddleY - 3, 4, 6, "#36bff2");
      rect(paddleX + half - 4, paddleY - 3, 4, 6, "#36bff2");
      rect(paddleX - half + 6, paddleY + 2, 28, 1, "#8994b8");

      const [ballX, ballY] = format.ball;
      TRAIL.forEach((color, index) => {
        const step = (index + 1) * 6;
        rect(ballX - step - 1, ballY + step - 1, 2, 2, color);
      });
      rect(ballX - 2, ballY - 3, 4, 6, "#18244f");
      rect(ballX - 3, ballY - 2, 6, 4, "#18244f");
      rect(ballX - 2, ballY - 2, 4, 4, WHITE);
      rect(ballX - 1, ballY - 2, 2, 1, RAIL_LIGHT);
    }

    rect(0, 0, format.width, format.height, VOID);
    drawStars();
    drawRails();
    drawWall();
    drawTitle();
    drawPaddleAndBall();
    document.body.dataset.ready = "true";
  </script>
</body>
</html>