Untitled

rain
javascript
2 years ago
4.6 kB
Indexable
Never
import fs from "fs";
import fsPromises from "fs/promises";
import nodeHtmlToImage from "node-html-to-image";
import { TeamStatistics } from "../types/index.js";
import getTableAttributes from "./getTableAttributes.js";
import getUpcomingMatch from "./getUpcomingMatch.js";

async function generateTableImage(teamStatistics: TeamStatistics[]) {
  try {
    const upcomingMatch = await getUpcomingMatch();
    const imagePath = `./src/img/${upcomingMatch.id}.png`;
    let imageExist = false;

    await fsPromises
      .access(imagePath, fs.constants.F_OK)
      .then(() => (imageExist = true))
      .catch(() => {});

    if (imageExist) return imagePath;

    const tableAttribute = {
      firstCup: 1,
      secondCup: 2,
      thirdCup: 2,
      degradation: 3,
    };
    const positionAttributes = getTableAttributes(
      teamStatistics.length,
      tableAttribute
    );
    let teamAttributeStyle = "";
    let tableDataElement = "";

    positionAttributes.forEach((everyCup, index) => {
      let attributeColour: string;

      if (index === 0) attributeColour = "rgba(189, 155, 243, 0.836)";
      if (index === 1) attributeColour = "rgba(155, 243, 155, 0.836)";
      if (index === 2) attributeColour = "rgba(255, 246, 166, 0.836)";
      if (index === 3) attributeColour = "rgba(255, 166, 166, 0.836)";

      everyCup.forEach((position) => {
        teamAttributeStyle += ` tbody tr:nth-child(${position}) {
        background-color: ${attributeColour};
      }`;
      });
    });

    teamStatistics.forEach((team, index) => {
      tableDataElement += `<tr>
        <td>${index + 1}</td>
        <td>${team.name}</td>
        <td>${team.played}</td>
        <td>${team.win}</td>
        <td>${team.draw}</td>
        <td>${team.lose}</td>
        <td>${team.goalScored}</td>
        <td>${team.goalAgainst}</td>
        <td>${team.goalDifference}</td>
        <td>${team.pts}</td>
      </tr>`;
    });

    await nodeHtmlToImage({
      output: imagePath,
      html: `<!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>Rainft Standings</title>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
          <link
            href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap"
            rel="stylesheet"
          />
          <style>
            body {
              width: 1200px;
              height: 1080px;
              font-size: 24px;
              font-family: "Staatliches", cursive;
              letter-spacing: 2px;
            }
            div.table-container {
              display: flex;
              justify-content: center;
              align-items: center;
              background-size: cover;
              background-color: rgb(212, 212, 212);
              height: inherit;
            }
            table {
              padding: 15px;
              background-color: rgba(255, 255, 255, 0.836);
              border-radius: 8px;
            }
            th,
            td {
              padding: 8px 15px;
              text-align: center;
              width: 25px;
            }
            th:nth-child(2),
            td:nth-child(2) {
              text-align: left !important;
              width: 300px !important;
            }
            tr {
              border-radius: 8px;
            }
            ${teamAttributeStyle}
          </style>
        </head>
        <body>
          <div class="table-container">
            <table>
              <thead>
                <tr>
                  <th>#</th>
                  <th>Team</th>
                  <th>M</th>
                  <th>W</th>
                  <th>D</th>
                  <th>L</th>
                  <th>GS</th>
                  <th>GA</th>
                  <th>GD</th>
                  <th>Pts</th>
                </tr>
              </thead>
              <tbody>
                ${tableDataElement}
              </tbody>
            </table>
          </div>
        </body>
      </html>
      `,
    });
    console.log("The image was created successfully!");

    return imagePath;
  } catch (err) {
    console.log(err);
    return "";
  }
}

export default generateTableImage;