1
0
Fork 0
web2019/static/js/shop/Resources.jsx

105 lines
2.8 KiB
React
Raw Normal View History

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>
)
}