Merge remote-tracking branch 'origin/master' into what-should-i-name-this-branch
This commit is contained in:
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 437.4 434.4" style="enable-background:new 0 0 437.4 434.4" xml:space="preserve"><style>.st0{fill:none;stroke:#000;stroke-width:.57;stroke-miterlimit:10}</style><g id="Layer_1"><path class="st0" d="m41.18 306.18 84.43 84.43-19.53 20.8c-11.26 11.99-26.1 17.98-40.93 17.98-14.84 0-29.68-5.99-40.93-17.98-22.52-23.97-22.52-63.2 0-87.18l16.96-18.05zm310.48-156.3L139.65 375.65l-84.43-84.43L269.8 62.7c22.51-23.98 59.34-23.98 81.86 0 22.51 23.97 22.51 63.2 0 87.18z"/><path d="M426.11 88.46c-24.57-26.71-49.15-53.42-73.72-80.13a93.834 93.834 0 0 1-30.93-4.39c-6.96 7.41-6.96 19.53 0 26.94l79.36 84.52c6.96 7.41 18.34 7.41 25.29 0 6.96-7.41 6.96-19.53 0-26.94zM248.07 35.83c13.66 16.01 4.9 48.19-19.57 71.87-24.47 23.68-33.21 29.27-46.88 13.25-13.66-16.01-2.33-26.15 22.14-49.83 24.47-23.67 30.65-51.3 44.31-35.29z" style="stroke-width:.5;fill:none;stroke:#000;stroke-miterlimit:10"/><path class="st0" d="m139.93 375.93-.28-.28m-13.72 15.28-.32-.32"/><path transform="rotate(-45.001 211.427 209.932)" style="stroke:#000;stroke-width:18;stroke-miterlimit:10" d="M191.43-6.09h40v432.04h-40z"/></g></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 437.4 434.4" style="enable-background:new 0 0 437.4 434.4" xml:space="preserve"><style>.st0{fill:none;stroke:#000;stroke-width:.57;stroke-miterlimit:10}</style><g id="Layer_1"><path class="st0" d="m41.18 306.18 84.43 84.43-19.53 20.8c-11.26 11.99-26.1 17.98-40.93 17.98-14.84 0-29.68-5.99-40.93-17.98-22.52-23.97-22.52-63.2 0-87.18l16.96-18.05zm310.48-156.3L139.65 375.65l-84.43-84.43L269.8 62.7c22.51-23.98 59.34-23.98 81.86 0 22.51 23.97 22.51 63.2 0 87.18z"/><path d="M426.11 88.46c-24.57-26.71-49.15-53.42-73.72-80.13a93.834 93.834 0 0 1-30.93-4.39c-6.96 7.41-6.96 19.53 0 26.94l79.36 84.52c6.96 7.41 18.34 7.41 25.29 0 6.96-7.41 6.96-19.53 0-26.94zM248.07 35.83c13.66 16.01 4.9 48.19-19.57 71.87-24.47 23.68-33.21 29.27-46.88 13.25-13.66-16.01-2.33-26.15 22.14-49.83 24.47-23.67 30.65-51.3 44.31-35.29z" style="stroke-width:.5;fill:none;stroke:#000;stroke-miterlimit:10"/><path class="st0" d="m139.93 375.93-.28-.28m-13.72 15.28-.32-.32"/><path transform="rotate(-45.001 211.427 209.932)" style="stroke:#000;stroke-width:18;stroke-miterlimit:10" d="M191.43-6.09h40v432.04h-40z"/></g></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@@ -33,8 +33,8 @@ export const ChemDebugSynthesizer = (props, context) => {
|
||||
maxValue={beakerMaxVolume}
|
||||
step={1}
|
||||
stepPixelSize={2}
|
||||
onChange={(e, value) => act('amount', {
|
||||
amount: value,
|
||||
onChange={(e, value) => act('synth_amount', {
|
||||
synth_amount: value,
|
||||
})} />
|
||||
<Button
|
||||
icon="plus"
|
||||
|
||||
@@ -8,6 +8,9 @@ import { Window } from "../layouts";
|
||||
const ROWS = 5;
|
||||
const COLUMNS = 6;
|
||||
|
||||
const ROWS_LONG = 4;
|
||||
const COLUMNS_LONG = 11;
|
||||
|
||||
const BUTTON_DIMENSIONS = "50px";
|
||||
|
||||
type GridSpotKey = string;
|
||||
@@ -71,6 +74,14 @@ const ALTERNATE_ACTIONS: Record<string, AlternateAction> = {
|
||||
icon: "tshirt",
|
||||
text: "Adjust jumpsuit",
|
||||
},
|
||||
enable_helmet: {
|
||||
icon: "toggle-off",
|
||||
text: "Extend helmet",
|
||||
},
|
||||
disable_helmet: {
|
||||
icon: "toggle-on",
|
||||
text: "Retract helmet",
|
||||
},
|
||||
};
|
||||
|
||||
const SLOTS: Record<
|
||||
@@ -209,6 +220,142 @@ const SLOTS: Record<
|
||||
},
|
||||
};
|
||||
|
||||
const SLOTS_LONG: Record<
|
||||
string,
|
||||
{
|
||||
displayName: string;
|
||||
gridSpot: GridSpotKey;
|
||||
image?: string;
|
||||
additionalComponent?: JSX.Element;
|
||||
}
|
||||
> = {
|
||||
eyes: {
|
||||
displayName: "eyewear",
|
||||
gridSpot: getGridSpotKey([0, 0]),
|
||||
image: "inventory-glasses.png",
|
||||
},
|
||||
|
||||
head: {
|
||||
displayName: "headwear",
|
||||
gridSpot: getGridSpotKey([0, 1]),
|
||||
image: "inventory-head.png",
|
||||
},
|
||||
|
||||
neck: {
|
||||
displayName: "neckwear",
|
||||
gridSpot: getGridSpotKey([1, 0]),
|
||||
image: "inventory-neck.png",
|
||||
},
|
||||
|
||||
mask: {
|
||||
displayName: "mask",
|
||||
gridSpot: getGridSpotKey([1, 1]),
|
||||
image: "inventory-mask.png",
|
||||
},
|
||||
|
||||
corgi_collar: {
|
||||
displayName: "collar",
|
||||
gridSpot: getGridSpotKey([1, 1]),
|
||||
image: "inventory-collar.png",
|
||||
},
|
||||
|
||||
ears: {
|
||||
displayName: "earwear",
|
||||
gridSpot: getGridSpotKey([1, 2]),
|
||||
image: "inventory-ears.png",
|
||||
},
|
||||
|
||||
parrot_headset: {
|
||||
displayName: "headset",
|
||||
gridSpot: getGridSpotKey([1, 2]),
|
||||
image: "inventory-ears.png",
|
||||
},
|
||||
|
||||
jumpsuit: {
|
||||
displayName: "uniform",
|
||||
gridSpot: getGridSpotKey([2, 0]),
|
||||
image: "inventory-uniform.png",
|
||||
},
|
||||
|
||||
suit: {
|
||||
displayName: "suit",
|
||||
gridSpot: getGridSpotKey([2, 1]),
|
||||
image: "inventory-suit.png",
|
||||
},
|
||||
|
||||
gloves: {
|
||||
displayName: "gloves",
|
||||
gridSpot: getGridSpotKey([2, 2]),
|
||||
image: "inventory-gloves.png",
|
||||
},
|
||||
|
||||
handcuffs: {
|
||||
displayName: "handcuffs",
|
||||
gridSpot: getGridSpotKey([2, 8]),
|
||||
},
|
||||
|
||||
shoes: {
|
||||
displayName: "shoes",
|
||||
gridSpot: getGridSpotKey([3, 1]),
|
||||
image: "inventory-shoes.png",
|
||||
},
|
||||
|
||||
legcuffs: {
|
||||
displayName: "legcuffs",
|
||||
gridSpot: getGridSpotKey([3, 2]),
|
||||
},
|
||||
|
||||
suit_storage: {
|
||||
displayName: "suit storage item",
|
||||
gridSpot: getGridSpotKey([3, 3]),
|
||||
image: "inventory-suit_storage.png",
|
||||
},
|
||||
|
||||
id: {
|
||||
displayName: "ID",
|
||||
gridSpot: getGridSpotKey([3, 4]),
|
||||
image: "inventory-id.png",
|
||||
},
|
||||
|
||||
belt: {
|
||||
displayName: "belt",
|
||||
gridSpot: getGridSpotKey([3, 5]),
|
||||
image: "inventory-belt.png",
|
||||
},
|
||||
|
||||
back: {
|
||||
displayName: "backpack",
|
||||
gridSpot: getGridSpotKey([3, 6]),
|
||||
image: "inventory-back.png",
|
||||
},
|
||||
|
||||
right_hand: {
|
||||
displayName: "right hand",
|
||||
gridSpot: getGridSpotKey([3, 7]),
|
||||
image: "inventory-hand_r.png",
|
||||
additionalComponent: <CornerText align="left">R</CornerText>,
|
||||
},
|
||||
|
||||
left_hand: {
|
||||
displayName: "left hand",
|
||||
gridSpot: getGridSpotKey([3, 8]),
|
||||
image: "inventory-hand_l.png",
|
||||
additionalComponent: <CornerText align="right">L</CornerText>,
|
||||
},
|
||||
|
||||
left_pocket: {
|
||||
displayName: "left pocket",
|
||||
gridSpot: getGridSpotKey([3, 9]),
|
||||
image: "inventory-pocket.png",
|
||||
},
|
||||
|
||||
right_pocket: {
|
||||
displayName: "right pocket",
|
||||
gridSpot: getGridSpotKey([3, 10]),
|
||||
image: "inventory-pocket.png",
|
||||
},
|
||||
};
|
||||
|
||||
enum ObscuringLevel {
|
||||
Completely = 1,
|
||||
Hidden = 2,
|
||||
@@ -246,24 +393,35 @@ type StripMenuItem =
|
||||
type StripMenuData = {
|
||||
items: Record<keyof typeof SLOTS, StripMenuItem>;
|
||||
name: string;
|
||||
long_strip_menu: boolean;
|
||||
};
|
||||
|
||||
export const StripMenu = (props, context) => {
|
||||
const { act, data } = useBackend<StripMenuData>(context);
|
||||
|
||||
const gridSpots = new Map<GridSpotKey, string>();
|
||||
for (const key of Object.keys(data.items)) {
|
||||
gridSpots.set(SLOTS[key].gridSpot, key);
|
||||
if (data.long_strip_menu) {
|
||||
for (const key of Object.keys(data.items)) {
|
||||
gridSpots.set(SLOTS_LONG[key].gridSpot, key);
|
||||
}
|
||||
} else {
|
||||
for (const key of Object.keys(data.items)) {
|
||||
gridSpots.set(SLOTS[key].gridSpot, key);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Window title={`Stripping ${data.name}`} width={400} height={400}>
|
||||
<Window
|
||||
title={`Stripping ${data.name}`}
|
||||
width={data.long_strip_menu ? 620 : 400}
|
||||
height={data.long_strip_menu ? 300 : 400}>
|
||||
<Window.Content>
|
||||
<Stack fill vertical>
|
||||
{range(0, ROWS).map(row => (
|
||||
{range(0, data.long_strip_menu ? ROWS_LONG : ROWS).map(row => (
|
||||
<Stack.Item key={row}>
|
||||
<Stack fill>
|
||||
{range(0, COLUMNS).map(column => {
|
||||
{range(0, data.long_strip_menu ? COLUMNS_LONG
|
||||
: COLUMNS).map(column => {
|
||||
const key = getGridSpotKey([row, column]);
|
||||
const keyAtSpot = gridSpots.get(key);
|
||||
|
||||
@@ -290,7 +448,9 @@ export const StripMenu = (props, context) => {
|
||||
if (item === null) {
|
||||
tooltip = slot.displayName;
|
||||
} else if ("name" in item) {
|
||||
alternateAction = ALTERNATE_ACTIONS[item.alternate];
|
||||
if (item.alternate) {
|
||||
alternateAction = ALTERNATE_ACTIONS[item.alternate];
|
||||
}
|
||||
|
||||
content = (
|
||||
<Box
|
||||
@@ -364,17 +524,9 @@ export const StripMenu = (props, context) => {
|
||||
{slot.image && (
|
||||
<Box
|
||||
as="img"
|
||||
className="centered-image"
|
||||
src={resolveAsset(slot.image)}
|
||||
opacity={0.7}
|
||||
style={{
|
||||
position: "absolute",
|
||||
width: "32px",
|
||||
height: "32px",
|
||||
left: "50%",
|
||||
top: "50%",
|
||||
transform:
|
||||
"translateX(-50%) translateY(-50%) scale(0.8)",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
.centered-image {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%) scale(0.8);
|
||||
}
|
||||
@@ -11,6 +11,7 @@
|
||||
|
||||
// Atomic classes
|
||||
@include meta.load-css('./atomic/candystripe.scss');
|
||||
@include meta.load-css('./atomic/centered-image.scss');
|
||||
@include meta.load-css('./atomic/color.scss');
|
||||
@include meta.load-css('./atomic/debug-layout.scss');
|
||||
@include meta.load-css('./atomic/links.scss');
|
||||
|
||||
Reference in New Issue
Block a user