67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import { Card, Colors } from "@blueprintjs/core";
|
|
import { CSSProperties } from "react";
|
|
import { useDarkMode } from "../../ui/providers/dark-mode-provider";
|
|
import { RendererProps } from "../types";
|
|
import { BFRS } from "./constants";
|
|
|
|
// 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>) => {
|
|
/** Serialize tape from object format into linear array */
|
|
const serializeTapeObj = (tape: BFRS["tape"]) => {
|
|
const cellIdxs = Object.keys(tape).map((s) => parseInt(s, 10));
|
|
const maxCellIdx = Math.max(15, ...cellIdxs);
|
|
const linearTape = Array(maxCellIdx + 1).fill(0);
|
|
cellIdxs.forEach((i) => (linearTape[i] = tape[i] || 0));
|
|
return linearTape;
|
|
};
|
|
|
|
return (
|
|
<div style={styles.container}>
|
|
{serializeTapeObj(state?.tape || {}).map((num, i) => (
|
|
<Cell value={num} key={i} active={(state?.pointer || 0) === i} />
|
|
))}
|
|
</div>
|
|
);
|
|
};
|