Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor AssetDetailsCard and MaterialAnimator: improve progress calculation and enhance group positioning syntax

This commit is contained in:
Vishnu 2025-05-10 14:18:07 +05:30
parent c1d425b91d
commit db7800367d
2 changed files with 4 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/src/components/ui/simulation/AssetDetailsCard.tsx
View File

@ -1,6 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { import {
CartBagIcon,
ExpandIcon, ExpandIcon,
IndicationArrow, IndicationArrow,
SimulationStatusIcon, SimulationStatusIcon,
@ -107,7 +106,7 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
<div className="value-container"> <div className="value-container">
<div className="progress-bar"> <div className="progress-bar">
{[...Array(5)].map((_, i) => { {[...Array(5)].map((_, i) => {
const percentage = (count ?? 0 / totalCapacity) * 100; const percentage = (count! / totalCapacity) * 100;
const start = i * 20; const start = i * 20;
const end = (i + 1) * 20; const end = (i + 1) * 20;
// fill amount: 0 to 100 // fill amount: 0 to 100
@ -120,7 +119,7 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
fillPercent = ((percentage - start) / 20) * 100; fillPercent = ((percentage - start) / 20) * 100;
} }
return ( return (
<div key={i} className="block"> <div key={`block-${i}-${start}-${end}`} className="block">
<div <div
className="fill" className="fill"
style={ style={
@ -134,7 +133,7 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
})} })}
</div> </div>
<div className="value"> <div className="value">
{Math.round((count ?? 0 / totalCapacity) * 100).toString()}% {Math.round((count! / totalCapacity) * 100).toString()}%
</div> </div>
</div> </div>
</div> </div>

2
app/src/modules/simulation/storageUnit/instances/animator/MaterialAnimator.tsx
View File

@ -58,7 +58,7 @@ const MaterialAnimator = ({
}, [storageModel, storage.currentMaterials]); }, [storageModel, storage.currentMaterials]);
return ( return (
<group position={[0, -padding, 0]}> <group {...{ position: [0, -padding, 0] }}>
{hasLoad && {hasLoad &&
storage.currentMaterials.map((mat, index) => ( storage.currentMaterials.map((mat, index) => (
<MaterialModel <MaterialModel