Merge remote-tracking branch 'origin/master' into what-should-i-name-this-branch

This commit is contained in:
LetterN
2022-01-11 09:49:38 +08:00
84 changed files with 5101 additions and 3151 deletions
@@ -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"
+167 -15
View File
@@ -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);
}
+1
View File
@@ -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');