diff --git a/frontend/src/components/bitcraft/items.tsx b/frontend/src/components/bitcraft/items.tsx index 6ffc561..be5ae94 100644 --- a/frontend/src/components/bitcraft/items.tsx +++ b/frontend/src/components/bitcraft/items.tsx @@ -234,26 +234,30 @@ export const ItemListComponent: Component = (props) => { return ( - + -
- +
+
- + -
- typeof props.probability === 'number' && props.chances && fullNode.toggle() - } +
+ -
-

Weighted List

+
+

Weighted List

+
= (props) => { />
-
Weight
-
Items
+ +
Weight
+
Items
+ {(poss) => ( <> - -
{fixFloat(poss.probability, 3)}
- poss.items}/> + +
{fixFloat(poss.probability, 3)}
+ poss.items} /> )} diff --git a/frontend/src/components/details/buildingdesc-details.tsx b/frontend/src/components/details/buildingdesc-details.tsx index fd80ad3..f6598c0 100644 --- a/frontend/src/components/details/buildingdesc-details.tsx +++ b/frontend/src/components/details/buildingdesc-details.tsx @@ -40,28 +40,29 @@ type RecipePanelProps = { function RecipePanel(props: RecipePanelProps) { return ( - -
-
+ +
+
{props.getInputs(props.recipe)}
-
- -
-
- {props.getOutputs!(props.recipe)} + +
+ {props.getOutputs(props.recipe)}
-
+
- {pair =>
-
{pair[0]}
-
{pair[1]}
-
} + {([label, value]) => ( +
+
{label}
+
{value}
+
+ )}
+
- ) + ); } type RecipesPanelProps = { diff --git a/frontend/src/components/details/itemdesc-details.tsx b/frontend/src/components/details/itemdesc-details.tsx index 53b9aef..a7f7c7b 100644 --- a/frontend/src/components/details/itemdesc-details.tsx +++ b/frontend/src/components/details/itemdesc-details.tsx @@ -20,7 +20,7 @@ import { TravelerTaskDesc, TravelerTradeOrderDesc } from "~/bindings/ts"; -import {Accessor, Component, createSignal, For, JSX, Setter, Show} from "solid-js"; +import {Accessor, Component, createSignal, For, JSX, onCleanup, onMount, Setter, Show} from "solid-js"; import {BitCraftTables} from "~/lib/spacetime"; import {TbArrowBigDownLines as IconDown} from "solid-icons/tb"; import {Card, CardContent, CardHeader, CardTitle} from "~/components/ui/card"; @@ -156,37 +156,74 @@ type RecipePanelProps = { } function RecipePanel(props: RecipePanelProps) { + const [isOverflowing, setIsOverflowing] = createSignal(false); + let scrollRef: HTMLDivElement | undefined; + + onMount(() => { + const checkOverflow = () => { + if (!scrollRef) return; + setIsOverflowing(scrollRef.scrollWidth > scrollRef.clientWidth); + }; + + checkOverflow(); + window.addEventListener('resize', checkOverflow); + onCleanup(() => window.removeEventListener('resize', checkOverflow)); + }); + return ( - -
-
+ +
+
{props.getInputs(props.recipe)}
-
- -
-
- - {stack => expandStack(stack, props.maskedProbabilities, props.chances)} - - } + +
+ +
+ + + + + No Outputs
} + > + {(stack) => ( +
+ {expandStack(stack, props.maskedProbabilities, props.chances)} +
+ )} + +
+
+ + } > {props.getOutputs!(props.recipe)}
-
+
- {pair =>
-
{pair[0]}
-
{pair[1]}
-
} + {([label, value]) => ( +
+
{label}
+
{value}
+
+ )}
- ) + ); } type RecipesPanelProps = { @@ -219,7 +256,7 @@ function toolReqPair(req: ToolRequirement, toolData: Map) { return [ "Tool:", <> - Tier + Tier {tool.name} 1}> {"(Power >= "}{req.power}{")"} @@ -308,7 +345,7 @@ const RecipesPanel: Component = (props) => { "Building:", <> Tier + class="mx-1 self-center" /> {buildingData.get((r as CraftingRecipeDesc).buildingRequirement!.buildingType)?.name} ]] : []) @@ -440,8 +477,8 @@ function addTradeToMap( "travelerTrade_" + trade.id, [ trade.traveler.tag + " Trade", - inputs}/>, - () => outputs} showName={true}/>, + inputs} />, + () => outputs} showName={true} />, stats ] ); @@ -487,7 +524,7 @@ const RecipesCard: Component = (props) => { "travelerTask_" + task.id, [ (skill ? skill + " " : "") + "Traveler Task", - inputs}/>, + inputs} />, outputs, stats ] ) @@ -498,7 +535,7 @@ const RecipesCard: Component = (props) => { "conversion_" + conv.id, [ conv.name, - conv.inputItems}/>, + conv.inputItems} />, (conv.outputItem ? [conv.outputItem] : []) as ItemStack[], [ ["Time:", fixFloat(conv.timeCost)], @@ -514,10 +551,10 @@ const RecipesCard: Component = (props) => { const inputs = [ ...cons.consumedItemStacks.map((s: InputItemStack) => { - return {item: [s.itemType.tag, s.itemId], quantity: s.quantity} as ItemStackIconProps + return { item: [s.itemType.tag, s.itemId], quantity: s.quantity } as ItemStackIconProps }), ...cons.consumedCargoStacks.map((s: InputItemStack) => { - return {item: [s.itemType.tag, s.itemId], quantity: s.quantity} as ItemStackIconProps + return { item: [s.itemType.tag, s.itemId], quantity: s.quantity } as ItemStackIconProps }) ]} />; @@ -534,7 +571,7 @@ const RecipesCard: Component = (props) => { [ "Construct " + cons.name, inputs, - () => , + () => , stats ] ) @@ -544,10 +581,10 @@ const RecipesCard: Component = (props) => { const outputs = [ ...cons.outputItemStacks.map((s: ItemStack) => { - return {item: [s.itemType.tag, s.itemId], quantity: s.quantity} as ItemStackIconProps + return { item: [s.itemType.tag, s.itemId], quantity: s.quantity } as ItemStackIconProps }), ...(cons.outputCargoId - ? [{item: [ItemType.Cargo.tag, cons.outputCargoId], quantity: 1} as ItemStackIconProps] + ? [{ item: [ItemType.Cargo.tag, cons.outputCargoId], quantity: 1 } as ItemStackIconProps] : []) ]} />; @@ -562,7 +599,7 @@ const RecipesCard: Component = (props) => { "deconstruction_" + cons.id, [ "Deconstruct " + (building?.name ?? "unknown building"), - , + , () => outputs, stats ] @@ -591,13 +628,13 @@ const RecipesCard: Component = (props) => { } additionalAcquisitions.set( "itemList_" + res.id, - [name + " (item list)", , [res], []] + [name + " (item list)", , [res], []] ); }); const resourceDepletion = BitCraftTables.ResourceDesc.findByItemStacks(item.id, props.itemType); resourceDepletion()![1].forEach(res => { const name = "Deplete " + res.name; - const input = ; + const input = ; const outputs = collapseStacks(res.onDestroyYield); additionalAcquisitions.set("resourceDeplete_" + res.id, [name, input, outputs, []]); }); @@ -609,23 +646,23 @@ const RecipesCard: Component = (props) => { deconstructionData()![1].forEach(deconstruction => addDeconstructionToMap(deconstruction, additionalAcquisitions)); const usageOptions = recipeMaps.useRecipe.values().map(([n, v]) => { - return {label: n, value: "craft_" + v.id} + return { label: n, value: "craft_" + v.id } }).toArray(); usageOptions.push(...recipeMaps.useExtraction.values().map(([n, v]) => { - return {label: n, value: "extraction_" + v.id} + return { label: n, value: "extraction_" + v.id } }).toArray()) usageOptions.push(...additionalUses.entries().map((([n, v]) => { - return {label: v[0], value: n} + return { label: v[0], value: n } }))); const acquireOptions = recipeMaps.acquireRecipe.values().map(([n, v]) => { - return {label: n, value: "craft_" + v.id} + return { label: n, value: "craft_" + v.id } }).toArray(); acquireOptions.push(...recipeMaps.acquireExtraction.values().map(([n, v]) => { - return {label: n, value: "extraction_" + v.id} + return { label: n, value: "extraction_" + v.id } }).toArray()) acquireOptions.push(...additionalAcquisitions.entries().map(([n, v]) => { - return {label: v[0], value: n} + return { label: v[0], value: n } })); const [usageValue, setUsageValue] = createSignal
- + - + ) } \ No newline at end of file diff --git a/frontend/src/components/details/resourcedesc-details.tsx b/frontend/src/components/details/resourcedesc-details.tsx index 1961a76..c99a137 100644 --- a/frontend/src/components/details/resourcedesc-details.tsx +++ b/frontend/src/components/details/resourcedesc-details.tsx @@ -37,32 +37,39 @@ type RecipePanelProps = { function RecipePanel(props: RecipePanelProps) { return ( - -
-
+ +
+
{props.getInputs(props.recipe)}
-
- -
-
- - {stack => expandStack(stack, props.maskedProbabilities, props.chances)} + +
+ No Outputs
+ }> + {(stack) => ( +
+ {expandStack(stack, props.maskedProbabilities, props.chances)} +
+ )}
-
+
- {pair =>
-
{pair[0]}
-
{pair[1]}
-
} + {([label, value]) => ( +
+
{label}
+
{value}
+
+ )}
- ) + ); } + type RecipesPanelProps = { value: Accessor