Soulstorm-wiki-frontend/src/classes/building/BuildingAddon.tsx

import React from "react";
import {
    Accordion,
    AccordionDetails,
    AccordionSummary,
    Grid2,
    Paper,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableRow
} from "@mui/material";
import {IAddonModifier, IBuilding, IBuildingAddon, IBuildingAddonShort} from "../../types/IBuilding";
import {WeaponHardpoint} from "../../types/IUnit";
import AvTimerOutlinedIcon from "@mui/icons-material/AvTimer";
import WeaponSlot from "../WeaponSlot";
import {ExpandMore} from "@mui/icons-material";
import {IconUrl} from "../../core/api";
import {IBuildingShort} from "../../types/IBuildingShort";
import {goToAddon} from "../../pages/BuildingPage";

interface IAddonModifiersProvidesTable{
    modifiers: IAddonModifier[],
}

function AddonModifiersProvidesTable (props: IAddonModifiersProvidesTable) {

    function getModName(mt: String){
        switch(mt) {
            case 'modifiers\\armour_modifier.lua':
                return 'Armor';
            case 'modifiers\\health_maximum_modifier.lua':
                return 'Health';
            case 'modifiers\\keen_sight_radius_modifier.lua':
                return 'Detect';
            case 'modifiers\\garrison_requisition_modifier.lua':
                return 'Requisition';
            default:
                return mt;
        }
    }

    function getModIcon(mt: String){
        switch(mt) {
            case 'modifiers\\armour_modifier.lua':
                return <img  style={{height: 20, verticalAlign: "top"}} src='/images/defence.png'/>;
            case 'modifiers\\health_maximum_modifier.lua':
                return <img style={{verticalAlign: "top"}} src='/images/Health_icon.webp'/>;
            case 'modifiers\\keen_sight_radius_modifier.lua':
                return <img style={{verticalAlign: "top"}} src='/images/DETECT_YES.webp'/>;
            case 'modifiers\\garrison_requisition_modifier.lua':
                return <img style={{verticalAlign: "top"}} src='/images/Resource_requisition.gif'/>;
            default:
                return mt;
        }
    }

    function getChangeDescription(ref: String) {
        switch(ref) {
            case 'type_modifierusagetype\\tp_mod_usage_addition.lua':
                return '+';
            case 'type_modifierusagetype\\tp_mod_usage_multiplication.lua':
                return 'x';
            case 'type_modifierusagetype\\tp_mod_usage_percentage.lua':
                return '%';
            case 'type_modifierusagetype\\tp_mod_usage_enable.lua':
                return ' enable ';
            default:
                return ref;
        }
    }

    let noWeaponMods = props.modifiers.filter(m => !m.reference.includes("default_weapon_modifier_hardpoint"))

    return (
        <TableContainer component={Paper}>
            <Table  size="small" aria-label="a dense table">
                {noWeaponMods.map(m =>
                    <TableRow
                        sx={{'&:last-child td, &:last-child th': {border: 0}}}
                    >
                        <TableCell component="th" scope="row">{getModName(m.reference)}</TableCell>
                        <TableCell component="th" scope="row">{getModIcon(m.reference)} {getChangeDescription(m.usageType)}{m.value}</TableCell>
                    </TableRow>
                )}
            </Table>
        </TableContainer>
    )
}

interface IAddonModifiersProvidesWeapons{
    modifiers: IAddonModifier[],
    replacedAddonModifiers: IAddonModifier[],
    weapons: WeaponHardpoint[]
}

function AddonModifiersProvidesWeapons (props: IAddonModifiersProvidesWeapons) {


    function getWeaponByAddonMod(ar: IAddonModifier){

        let hardpoint = Number(ar.reference.replace("modifiers\\default_weapon_modifier_hardpoint", "").replace(".lua", ""));
        let value = ar.value;

        //let prevAddonWeaponMod = props.replacedAddonModifiers.find(m => m.reference && m.reference.includes("modifiers\\default_weapon_modifier_hardpoint" + hardpoint))?.value ?? 0

        let weapon = props.weapons.find(w => w.hardpoint === hardpoint && w.hardpointOrder === 1 + value )?.weapon
        if (weapon != null){
            return <WeaponSlot unitWeapons={new Map().set(hardpoint, weapon)} hardpoint={hardpoint}/>;
        }else{
            return "Can't find weapon, replaced by addon:" + value + " - "
        }

    }

    let weaponMods =  props.modifiers.filter(m => m.reference.includes("default_weapon_modifier_hardpoint"))

    return (
        <div>
            {weaponMods.map(w => getWeaponByAddonMod(w))}
        </div>
    )
}


interface IBuildingAddonProps {
    addon: IBuildingAddon,
    building: IBuilding
}

function BuildingAddon(props: IBuildingAddonProps){

    const addon = props.addon
    const building = props.building


    const prevAddonModifiers: IAddonModifier[] = (function() {
        if (addon.addonRequirement && addon.addonRequirement.requireAddon !== null && !addon.addonRequirement.replaceWhenDone){
            return building.addons.find(a => a.id === addon.addonRequirement.requireAddon.id)?.addonModifiers ?? [];
        } else return [];
    })()

    function renderRequirementBuilding(requirementBuildings: IBuildingShort[], building: IBuilding) {
        return requirementBuildings.length > 0 && (
            <div>&nbsp; Buildings: <img style={{verticalAlign: "top", height: 25}}
                                        src={IconUrl + requirementBuildings[0].icon.replaceAll('\\', '/')}/>
                &nbsp;{" "}<a href={`/mod/${building.modId}/race/${building.race.id}/building/${requirementBuildings[0].id}`}>
                    {requirementBuildings[0].name}
                </a> or &nbsp;<img style={{verticalAlign: "top", height: 25}}
                                   src={IconUrl + requirementBuildings[1].icon.replaceAll('\\', '/')}/>
                &nbsp;{" "}<a href={`/mod/${building.modId}/race/${building.race.id}/building/${requirementBuildings[1].id}`}>
                    {requirementBuildings[1].name}</a></div>
        );
    }

    function renderRequirementGlobalAddons(rgas: IBuildingAddonShort[], building: IBuilding) {
        return  <div> {rgas.map(rga =>
            <span>&nbsp; Global addon: <img style={{verticalAlign: "top", height: 25}}
                                            src={IconUrl + rga.icon.replaceAll('\\', '/')}/>
                &nbsp;<a href={`/mod/${building.modId}/race/${building.race.id}/building/${rga.buildingId}#addon-${rga.id}`}>
                {rga.name}
                </a></span>
        )}</div>
    }


    return <div className='addon-accordion' id={"addon-" + addon.id} ><Accordion>
        <AccordionSummary
            expandIcon={<ExpandMore/>}
            aria-controls="panel1-content"
        >
                <span style={{fontSize: 20}}>
                {addon.icon && <img className="sergeantIcon" src={IconUrl + addon.icon.replaceAll('\\', '/')}/>}
                    &nbsp; {addon.name}
            </span>
        </AccordionSummary>
        <AccordionDetails>
            <Grid2 container spacing={2}>
                <Grid2 size={{xs: 12, md: 4}}>
                    <TableContainer component={Paper}>
                        <Table size="small" aria-label="a dense table">
                            <TableBody id="unit-stats-table">
                                <TableRow
                                    sx={{'&:last-child td, &:last-child th': {border: 0}}}
                                >
                                    <TableCell component="th" scope="row">Cost</TableCell>
                                    <TableCell component="th" scope="row">
                                        {addon.addonCostRequisition > 0 &&
                                            <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                             src="/images/Resource_requisition.gif"/>&nbsp;
                                                {addon.addonCostRequisition.toFixed(0)}</span>}
                                        {addon.addonCostPower > 0 && <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                                                      src="/images/Resource_power.gif"/>&nbsp;
                                            {addon.addonCostPower.toFixed(0)}</span>}
                                        {(addon.addonCostPopulation !== undefined && addon.addonCostPopulation > 0) &&
                                            <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                             src="/images/Resource_orksquadcap.gif"/>&nbsp;
                                                {addon.addonCostPopulation.toFixed(0)}</span>}
                                        {(addon.addonCostFaith !== undefined && addon.addonCostFaith > 0) &&
                                            <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                             src="/images/Resource_faith.gif"/>&nbsp;
                                                {addon.addonCostFaith}</span>}
                                        {(addon.addonCostSouls !== undefined && addon.addonCostSouls > 0) &&
                                            <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                             src="/images/Resource_souls.gif"/>&nbsp;
                                                {addon.addonCostSouls.toFixed(0)}</span>}
                                        {(addon.addonCostTime !== undefined && addon.addonCostTime > 0) &&
                                            <span>&nbsp;<AvTimerOutlinedIcon
                                                style={{verticalAlign: "top", fontSize: "18px"}}/>&nbsp;
                                                {addon.addonCostTime}s</span>}
                                    </TableCell>
                                </TableRow>

                            </TableBody>
                        </Table>
                    </TableContainer><br/>
                    <AddonModifiersProvidesTable modifiers={addon.addonModifiers}/>
                </Grid2>
                <Grid2 size={{xs: 12, md: 8}}>
                    <div style={{whiteSpace: "pre-wrap"}}>
                        {addon.description}
                    </div>
                </Grid2>
                {addon.addonModifiers !== null &&
                    <Grid2 size={{xs: 12, md: 12}}>
                        <AddonModifiersProvidesWeapons modifiers={addon.addonModifiers} replacedAddonModifiers={prevAddonModifiers} weapons={building.weapons}/>
                    </Grid2>}
                {addon.addonRequirement !== null &&
                    <Grid2 size={{xs: 12, md: 12}}>
                        <h4>Required: </h4>
                        {addon.addonRequirement.requiredTotalPop !== undefined && addon.addonRequirement.requiredTotalPop !== null &&
                            <div>&nbsp; Population: <img style={{verticalAlign: "top", height: 25}}
                                                         src="/images/Resource_orksquadcap.gif"/>&nbsp;
                                {addon.addonRequirement.requiredTotalPop}</div>
                        }
                        {addon.addonRequirement.requireAddon !== null &&
                            <div>&nbsp; Addon: <img style={{verticalAlign: "top", height: 25}}
                                                    src={IconUrl +  addon.addonRequirement.requireAddon.icon.replaceAll('\\', '/')}/>&nbsp;
                                <a href={"#addon-" + addon.addonRequirement.requireAddon.id} onClick={() => goToAddon(`#addon-` + addon.addonRequirement.requireAddon.id)}>{addon.addonRequirement.requireAddon.name}</a>
                                {addon.addonRequirement.replaceWhenDone && <i> (old provides replace)</i>}
                            </div>
                        }
                        {addon.addonRequirement.requirementBuildings.map(b =>
                            <div>&nbsp; Building: <img style={{verticalAlign: "top", height: 25}}
                                                       src={IconUrl + b.icon.replaceAll('\\', '/')}/>&nbsp;
                                <a href= {'/mod/'+ building.modId +'/race/'+ building.race.id +'/building/' + b.id + "/"}>{b.name}</a></div>)
                        }
                        {addon.addonRequirement.requirementBuildingsEither.length !== 0 &&
                            renderRequirementBuilding(addon.addonRequirement.requirementBuildingsEither, building)}
                        {addon.addonRequirement.requirementsGlobalAddons.length !== 0 &&
                            renderRequirementGlobalAddons(addon.addonRequirement.requirementsGlobalAddons, building)}
                    </Grid2>}
            </Grid2>
            <i className="rgdFrom">{addon.filename}</i>
        </AccordionDetails>
    </Accordion></div>
}


export default BuildingAddon;