sectionize brick order in prep for proper layout of roof and floor

src/browser/App.tsx

@@ -1,30 +1,36 @@
-import { ChakraProvider, Container } from '@chakra-ui/react'
 import * as React from 'react'
+import { ChakraProvider, Container } from '@chakra-ui/react'
 import brickRegistry from './components/Brick/BrickRegistry'
 import ErrorBrick from './components/Brick/ErrorBrick'
 import theme from './theme'
 
 export default function App() {
- const brickOrder = [
- 'char',
- 'stats',
- 'gear',
- 'eff',
- 'fam',
- 'debug',
- ]
-
+ const brickOrder = {
+ roof: ['character', 'stats', 'gear'],
+ walls: ['effects', 'debug'],
+ floor: ['familiar'],
+ }
+ const handleBrick = (brickName: string) => {
+ const CurrBrick = brickRegistry[brickName]
+ if (CurrBrick === undefined) {
+ return <ErrorBrick name={brickName} />
+ }
+ return <CurrBrick />
+ }
  return (
  <ChakraProvider theme={theme}>
- <Container maxW="full" p="2px">
- {brickOrder.map((brickName) => {
- const CurrBrick = brickRegistry[brickName]
- if (CurrBrick === undefined) {
- return <ErrorBrick name={brickName} />
- }
- return <CurrBrick />
- })}
- </Container>
+ {['roof' as const, 'walls' as const, 'floor' as const].map(
+ (sectionName) => (
+ <Container
+ maxW="full"
+ id={`chit_${sectionName}`}
+ p="2px"
+ className="chit_chamber"
+ >
+ {brickOrder[sectionName].map(handleBrick)}
+ </Container>
+ )
+ )}
  </ChakraProvider>
  )
 }

src/browser/css/App.scss

@@ -28,6 +28,10 @@ $picker-bg: #f8f8f8;
  color: green;
 }
 
+.chit_chamber {
+ width: 100%;
+}
+
 .chit-brick {
  background-color: white;
  border-collapse: separate;