Rename directory "engines" to "languages"
This commit is contained in:
Nilay Majorwar
100
languages/chef/renderer/bowl-dish-columns.tsx
Normal file
100
languages/chef/renderer/bowl-dish-columns.tsx
Normal file
@ -0,0 +1,100 @@
|
||||
import * as React from "react";
|
||||
import { MixingBowl, StackItem } from "../types";
|
||||
import { ItemTypeIcons } from "./utils";
|
||||
|
||||
const styles = {
|
||||
cellContainer: {
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
margin: "2px 0",
|
||||
},
|
||||
listContainer: {
|
||||
width: "80%",
|
||||
marginTop: 5,
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
},
|
||||
stackContainer: {
|
||||
overflowY: "auto" as "auto",
|
||||
},
|
||||
columnContainer: {
|
||||
height: "100%",
|
||||
textAlign: "center" as "center",
|
||||
margin: "0 10px",
|
||||
display: "flex",
|
||||
flexDirection: "column" as "column",
|
||||
},
|
||||
stackMarker: {
|
||||
height: "0.7em",
|
||||
borderRadius: 5,
|
||||
},
|
||||
stackHeader: {
|
||||
fontWeight: "bold",
|
||||
margin: "5px 0",
|
||||
},
|
||||
};
|
||||
|
||||
/** Displays a single item of a bowl or dish, along with type */
|
||||
const StackItemCell = ({ item }: { item: StackItem }) => {
|
||||
return (
|
||||
<div style={styles.cellContainer}>
|
||||
<span title={item.type}>{ItemTypeIcons[item.type]}</span>
|
||||
<span title={"Character: " + String.fromCharCode(item.value)}>
|
||||
{item.value.toString()}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/** Displays a list of bowl/dish items in reverse order */
|
||||
const StackItemList = ({ items }: { items: StackItem[] }) => {
|
||||
return (
|
||||
<div style={styles.listContainer}>
|
||||
{items.map((item, idx) => (
|
||||
<StackItemCell key={idx} item={item} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/** Displays a mixing bowl in a vertical strip */
|
||||
export const MixingBowlColumn = ({
|
||||
bowl,
|
||||
index,
|
||||
}: {
|
||||
bowl: MixingBowl;
|
||||
index: number;
|
||||
}) => {
|
||||
return (
|
||||
<div style={styles.columnContainer}>
|
||||
<div style={styles.stackHeader}>Bowl {index + 1}</div>
|
||||
<div style={styles.stackContainer}>
|
||||
<div
|
||||
style={{ ...styles.stackMarker, backgroundColor: "#137CBD" }}
|
||||
></div>
|
||||
<StackItemList items={bowl} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/** Displays a baking dish in a vertical strip */
|
||||
export const BakingDishColumn = ({
|
||||
dish,
|
||||
index,
|
||||
}: {
|
||||
dish: MixingBowl;
|
||||
index: number;
|
||||
}) => {
|
||||
return (
|
||||
<div style={styles.columnContainer}>
|
||||
<div style={styles.stackHeader}>Dish {index + 1}</div>
|
||||
<div style={styles.stackContainer}>
|
||||
<div
|
||||
style={{ ...styles.stackMarker, backgroundColor: "#0F9960" }}
|
||||
></div>
|
||||
<StackItemList items={dish} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
50
languages/chef/renderer/index.tsx
Normal file
50
languages/chef/renderer/index.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
import { Breadcrumbs } from "@blueprintjs/core";
|
||||
import * as React from "react";
|
||||
import { RendererProps } from "../../types";
|
||||
import { ChefRS } from "../types";
|
||||
import { KitchenDisplay } from "./kitchen-display";
|
||||
import { BorderColor } from "./utils";
|
||||
|
||||
const styles = {
|
||||
placeholderDiv: {
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
fontSize: "1.2em",
|
||||
},
|
||||
rootContainer: {
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column" as "column",
|
||||
},
|
||||
callStackContainer: {
|
||||
borderBottom: "1px solid " + BorderColor,
|
||||
padding: "5px 10px",
|
||||
},
|
||||
kitchenContainer: {
|
||||
flex: 1,
|
||||
minHeight: 0,
|
||||
},
|
||||
};
|
||||
|
||||
export const Renderer = ({ state }: RendererProps<ChefRS>) => {
|
||||
if (state == null)
|
||||
return (
|
||||
<div style={styles.placeholderDiv}>Run some code to see the kitchen!</div>
|
||||
);
|
||||
|
||||
const crumbs = state.stack.map((name) => ({ text: name }));
|
||||
|
||||
return (
|
||||
<div style={styles.rootContainer}>
|
||||
<div style={styles.callStackContainer}>
|
||||
<Breadcrumbs items={crumbs} />
|
||||
</div>
|
||||
<div style={styles.kitchenContainer}>
|
||||
<KitchenDisplay state={state.currentKitchen} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
56
languages/chef/renderer/ingredients-pane.tsx
Normal file
56
languages/chef/renderer/ingredients-pane.tsx
Normal file
@ -0,0 +1,56 @@
|
||||
import { IngredientBox, IngredientItem } from "../types";
|
||||
import { ItemTypeIcons } from "./utils";
|
||||
|
||||
const styles = {
|
||||
paneHeader: {
|
||||
fontSize: "1.1em",
|
||||
fontWeight: "bold",
|
||||
marginBottom: 15,
|
||||
},
|
||||
paneContainer: {
|
||||
height: "100%",
|
||||
padding: 10,
|
||||
},
|
||||
rowItemContainer: {
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
margin: "3px 0",
|
||||
},
|
||||
rowItemRight: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
},
|
||||
};
|
||||
|
||||
/** Displays a single ingredient item's name, type and value */
|
||||
const IngredientPaneRow = ({
|
||||
name,
|
||||
item,
|
||||
}: {
|
||||
name: string;
|
||||
item: IngredientItem;
|
||||
}) => {
|
||||
return (
|
||||
<div style={styles.rowItemContainer}>
|
||||
<span>{name}</span>
|
||||
<span title={item.type} style={styles.rowItemRight}>
|
||||
{item.value == null ? "-" : item.value.toString()}
|
||||
<span style={{ width: 10 }} />
|
||||
{ItemTypeIcons[item.type]}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/** Displays list of ingredients under an "Ingredients" header */
|
||||
export const IngredientsPane = ({ box }: { box: IngredientBox }) => {
|
||||
return (
|
||||
<div style={styles.paneContainer}>
|
||||
<div style={styles.paneHeader}>Ingredients</div>
|
||||
{Object.keys(box).map((name) => (
|
||||
<IngredientPaneRow key={name} name={name} item={box[name]} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
57
languages/chef/renderer/kitchen-display.tsx
Normal file
57
languages/chef/renderer/kitchen-display.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
import { Colors } from "@blueprintjs/core";
|
||||
import { ChefRS } from "../types";
|
||||
import { BakingDishColumn, MixingBowlColumn } from "./bowl-dish-columns";
|
||||
import { IngredientsPane } from "./ingredients-pane";
|
||||
import { BorderColor } from "./utils";
|
||||
|
||||
const styles = {
|
||||
ingredientsPane: {
|
||||
width: 200,
|
||||
flexShrink: 0,
|
||||
overflowY: "auto" as "auto",
|
||||
borderRight: "1px solid " + BorderColor,
|
||||
},
|
||||
stacksPane: {
|
||||
padding: 5,
|
||||
flexGrow: 1,
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
overflowX: "auto" as "auto",
|
||||
},
|
||||
stackColumn: {
|
||||
width: 125,
|
||||
flexShrink: 0,
|
||||
},
|
||||
};
|
||||
|
||||
export const KitchenDisplay = ({
|
||||
state,
|
||||
}: {
|
||||
state: ChefRS["currentKitchen"];
|
||||
}) => {
|
||||
return (
|
||||
<div style={{ display: "flex", height: "100%" }}>
|
||||
<div style={styles.ingredientsPane}>
|
||||
<IngredientsPane box={state!.ingredients} />
|
||||
</div>
|
||||
<div style={styles.stacksPane}>
|
||||
{Object.keys(state!.bowls).map((bowlId) => (
|
||||
<div key={bowlId} style={styles.stackColumn}>
|
||||
<MixingBowlColumn
|
||||
index={parseInt(bowlId, 10)}
|
||||
bowl={state!.bowls[bowlId as any]}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{Object.keys(state!.dishes).map((dishId) => (
|
||||
<div key={dishId} style={styles.stackColumn}>
|
||||
<BakingDishColumn
|
||||
index={parseInt(dishId, 10)}
|
||||
dish={state!.dishes[dishId as any]}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
12
languages/chef/renderer/utils.tsx
Normal file
12
languages/chef/renderer/utils.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import { Icon } from "@blueprintjs/core";
|
||||
import { Colors } from "@blueprintjs/core";
|
||||
|
||||
/** Common border color for dark and light, using transparency */
|
||||
export const BorderColor = Colors.GRAY3 + "55";
|
||||
|
||||
/** Map from item type to corresponding icon */
|
||||
export const ItemTypeIcons: { [k: string]: React.ReactNode } = {
|
||||
dry: <Icon icon="ring" size={12} color={Colors.RED3} />,
|
||||
liquid: <Icon icon="tint" size={12} color={Colors.BLUE3} />,
|
||||
unknown: <Icon icon="help" size={12} color={Colors.ORANGE3} />,
|
||||
};
|
||||
Reference in New Issue
Block a user