| import React from "react"; |
| import { Box, Paper } from "@mui/material"; |
|
|
| |
| const JsonView = ({ data, maxHeight = "500px" }) => ( |
| <Box |
| sx={{ |
| backgroundColor: "grey.900", |
| p: 2, |
| borderRadius: 1, |
| position: "relative", |
| }} |
| > |
| <Box |
| sx={{ |
| maxHeight, |
| overflow: "auto", |
| fontFamily: "monospace", |
| "&::-webkit-scrollbar": { |
| width: "8px", |
| height: "8px", |
| }, |
| "&::-webkit-scrollbar-track": { |
| backgroundColor: "grey.800", |
| borderRadius: "4px", |
| }, |
| "&::-webkit-scrollbar-thumb": { |
| backgroundColor: "grey.600", |
| borderRadius: "4px", |
| "&:hover": { |
| backgroundColor: "grey.500", |
| }, |
| }, |
| "& pre": { |
| margin: 0, |
| color: "success.light", |
| fontSize: "0.75rem", |
| whiteSpace: "pre-wrap", |
| wordBreak: "break-word", |
| }, |
| }} |
| > |
| <pre>{JSON.stringify(data, null, 2)}</pre> |
| </Box> |
| </Box> |
| ); |
|
|
| export const DebugConsole = ({ gameState, currentStory }) => { |
| return ( |
| <Paper variant="outlined" sx={{ height: "calc(100vh - 100px)" }}> |
| <JsonView data={{ gameState, currentStory }} maxHeight="100%" /> |
| </Paper> |
| ); |
| }; |
|
|
