Rename directory "engines" to "languages"

languages/brainfuck/renderer.tsx

@@ -0,0 +1,57 @@
+import { Card, Colors } from "@blueprintjs/core";
+import { CSSProperties } from "react";
+import { useDarkMode } from "../../ui/providers/dark-mode-provider";
+import { RendererProps } from "../types";
+import { BFRS, serializeTapeMap } from "./common";
+
+// Colors used as background of active cells
+const darkActiveBG = Colors.DARK_GRAY2;
+const lightActiveBG = Colors.LIGHT_GRAY3;
+
+const styles: { [k: string]: CSSProperties } = {
+  container: {
+    padding: 10,
+    height: "100%",
+    display: "flex",
+    flexWrap: "wrap",
+    alignContent: "flex-start",
+    overflowY: "auto",
+  },
+  cell: {
+    // Sizing
+    width: "12%",
+    height: "50px",
+    margin: "5px 0.25%",
+    // Center-align values
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  activeCell: {
+    background: "#CED9E0",
+    color: "#182026",
+  },
+};
+
+/** Component for displaying a single tape cell */
+const Cell = ({ value, active }: { value: number; active: boolean }) => {
+  const { isDark } = useDarkMode();
+  const cellStyle = { ...styles.cell };
+  const activeBg = isDark ? darkActiveBG : lightActiveBG;
+  if (active) {
+    cellStyle.backgroundColor = activeBg;
+    cellStyle.fontWeight = "bold";
+  }
+  return <Card style={cellStyle}>{value}</Card>;
+};
+
+/** Renderer for Brainfuck */
+export const Renderer = ({ state }: RendererProps<BFRS>) => {
+  return (
+    <div style={styles.container}>
+      {serializeTapeMap(state?.tape || {}).map((num, i) => (
+        <Cell value={num} key={i} active={(state?.pointer || 0) === i} />
+      ))}
+    </div>
+  );
+};