99 lines
2.6 KiB
JavaScript
99 lines
2.6 KiB
JavaScript
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
|
|
}
|
|
|
|
|
|
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 ClockTipRender({occupied, max}) {
|
|
return (<p key={uuidv4()}>{`${occupied}/${max} clock connectors used`}</p>);
|
|
}
|
|
|
|
const resource_tip = {
|
|
"eem": EEMTipRender,
|
|
"clk": ClockTipRender,
|
|
"idc": IDCTipRender
|
|
}
|
|
|
|
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>
|
|
)
|
|
} |