artemkorsakov_project-euler-stats/helpers/levelsBlock.ts

import { stringToNumber } from './parsers';
import { ProgressData, LevelData } from './types';
import { createSectionHeader } from './commonBlocks';

function createLevelTableRow(levelData: LevelData, progressData: ProgressData): HTMLElement {
    const row = document.createElement('tr');
    const cell1 = document.createElement('td');
    const cell2 = document.createElement('td');
    const cell3 = document.createElement('td');
    const cell4 = document.createElement('td');

    const rowLevel = stringToNumber(levelData.level);
    const needForLevel = rowLevel * 25;
    const remaining = Math.max(0, needForLevel - progressData.solved);

    const levelLink = document.createElement('a');
    levelLink.href = `https://projecteuler.net/level=${rowLevel}`;
    levelLink.textContent = levelData.level;

    cell1.appendChild(levelLink);
    cell2.textContent = needForLevel.toString();
    cell3.textContent = remaining.toString();
    cell4.textContent = levelData.members;

    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);
    row.appendChild(cell4);
    return row;
}

function createLevelsTable(progressData: ProgressData, levelDataArray: LevelData[], useShortFormat: boolean): HTMLElement {
    const table = document.createElement('table');
    const tableBody = document.createElement('tbody');

    const headerRow = document.createElement('tr');
    ['Level', 'Solve', 'Remaining', 'Members'].forEach(headerText => {
        const headerCell = document.createElement('th');
        headerCell.textContent = headerText;
        headerRow.appendChild(headerCell);
    });
    tableBody.appendChild(headerRow);

    if (useShortFormat) {
        levelDataArray.slice(0, 3).forEach(levelData => {
            tableBody.appendChild(createLevelTableRow(levelData, progressData));
        });
    } else {
        levelDataArray.forEach(levelData => {
            tableBody.appendChild(createLevelTableRow(levelData, progressData));
        });
	}

    table.appendChild(tableBody);
    return table;
}

function calculateTotalMembers(levelDataArray: LevelData[]): number {
    return levelDataArray.reduce((total, levelData) => {
        const membersCount = stringToNumber(levelData.members);
        return total + (isNaN(membersCount) ? 0 : membersCount);
    }, 0);
}

/**
 * Generates HTML for the levels table.
 * @param progressData - The progress data.
 * @param levelDataArray - The array of level data.
 * @returns The generated HTMLElement (levels table container).
 */
export function generateLevelsTableHTML(progressData: ProgressData, levelDataArray: LevelData[], useShortFormat: boolean): HTMLElement {
    const level = stringToNumber(progressData.level);

    const levelsContainer = document.createElement('div');

    // If there are no levels or the current level is higher than the last available level, display a message
    if (!levelDataArray.length || level >= levelDataArray.length) {
        levelsContainer.appendChild(createSectionHeader('No levels available'));
        return levelsContainer;
    }

    const slicedArray = levelDataArray.slice(level - 1);
    levelsContainer.appendChild(createSectionHeader('Level progress'));

    if (!useShortFormat) {
        levelsContainer.appendChild(createSectionHeader(`Current level: ${progressData.level}`, 'h4'));
        levelsContainer.appendChild(createSectionHeader(`Solved problems: ${progressData.solved}`, 'h5'));
        const allMembers = calculateTotalMembers(slicedArray);
        levelsContainer.appendChild(createSectionHeader(`Status: ${allMembers} members have made it this far.`, 'h5'));
    }

    levelsContainer.appendChild(createLevelsTable(progressData, slicedArray, useShortFormat));

    return levelsContainer;
}