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 (
) } function ClockRenderer({occupied, max}) { return (
) } const resource_progress_renderers = { "eem": EEMRenderer, "clk": ClockRenderer, "idc": EEMRenderer, "tec": EEMRenderer } function EEMTipRender({occupied, max}) { return (

{`${occupied}/${max} EEM connectors used`}

); } function IDCTipRender({occupied, max}) { return (

{`${occupied}/${max} IDC connectors used`}

); } function TECTipRender({occupied, max}) { return (

{`${occupied}/${max} TEC connectors used`}

); } function ClockTipRender({occupied, max}) { return (

{`${occupied}/${max} clock connectors used`}

); } 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 ( (
)} rootClose >
) }