web2019/static/js/shop/Resources.jsx

import {OverlayTrigger} from "react-bootstrap";
import React from "react";
import {v4 as uuidv4} from "uuid";

// #!render_count
import {useRenderCount} from "@uidotdev/usehooks";
import {useShopStore} from "./shop_store";
import {compareArraysLevelOne} from "./utils";


const resourcesWidthStyle = (occupied, max) => {
    return {
        width: `${Math.min(occupied * 100 / max, 100)}%`,
    }
};

function EEMRenderer({occupied, max}) {
    return (
        <div className="nbr-connectors" key={uuidv4()}>
            <div style={{...resourcesWidthStyle(occupied, max)}}></div>
        </div>
    )
}

function ClockRenderer({occupied, max}) {
    return (
        <div className="nbr-clocks" key={uuidv4()}>
            <div style={{...resourcesWidthStyle(occupied, max)}}></div>
        </div>
    )
}

const resource_progress_renderers = {
    "eem": EEMRenderer,
    "clk": ClockRenderer,
    "idc": EEMRenderer,
    "tec": EEMRenderer
}


function EEMTipRender({occupied, max}) {
    return (<p key={uuidv4()}>{`${occupied}/${max} EEM connectors used`}</p>);
}

function IDCTipRender({occupied, max}) {
    return (<p key={uuidv4()}>{`${occupied}/${max} IDC connectors used`}</p>);
}

function TECTipRender({occupied, max}) {
    return (<p key={uuidv4()}>{`${occupied}/${max} TEC connectors used`}</p>);
}

function ClockTipRender({occupied, max}) {
    return (<p key={uuidv4()}>{`${occupied}/${max} clock connectors used`}</p>);
}

const resource_tip = {
    "eem": EEMTipRender,
    "clk": ClockTipRender,
    "idc": IDCTipRender,
    "tec": TECTipRender
}

function RenderResources({resources, library}) {
    if (!resources) return null;
    let result = [];

    resources.forEach((value, _) => {
        if (library[value.name]) result.push(library[value.name](value));
    });

    return result;
}

export function Resources({crate_index, card_index}) {
    // #!render_count
    const renderCount = useRenderCount();

    const resources = useShopStore(state => state.crates[crate_index].items[card_index].counted_resources, compareArraysLevelOne);

    // #!render_count
    console.log("Resources renders: ", renderCount)
    return (
        <OverlayTrigger
            placement="top"
            trigger={['click', 'hover', 'focus']}
            overlay={({arrowProps, hasDoneInitialMeasure, show, ...props}) => (
                <div className="k-popup-connectors" {...props}>
                    <RenderResources
                        resources={resources}
                        library={resource_tip}
                    />
                </div>
            )}
            rootClose
        >
            <div className="progress-container">
                <RenderResources
                    resources={resources}
                    library={resource_progress_renderers}
                />
            </div>
        </OverlayTrigger>
    )
}