Материализовать пользовательский интерфейс шахматной доски

В предыдущих постах этой серии я писал о том, как использую CSS flex box и CSS grid layout для построения шахматной доски. Хотя мне очень понравился процесс стилизации моих компонентов и создания макета моей страницы своими руками, всегда есть возможность воспользоваться хорошо зарекомендовавшей себя и закаленной в боях библиотекой компонентов, чтобы облегчить себе жизнь.

Сегодня в экосистеме React доступно довольно много вариантов, когда речь идет о библиотеках компонентов, и React MUI, кажется, является очень распространенным выбором среди них. Вчера я обновил шахматную доску, чтобы больше полагаться на библиотеку. Результат здесь!

Ниже приведены несколько вещей, которые мне понравились после преобразования шахматной доски для использования компонентов MUI.

Панель приложений

Тег header заменен на AppBar MUI. AppBar , который фактически отображает тег header под капотом, имеет дочерний компонент Toolbar, который по умолчанию является контейнером flex, поэтому объем CSS, который мне приходится писать, значительно сокращается. Новый код заголовка выглядит так

<AppBar position='static'>
  <Toolbar sx={{
      bgcolor: "rgb(5, 5, 29)",
      justifyContent: "space-between",
  }}>
      <Button variant="contained" href={gitHubUrl}
          startIcon={<GitHubIcon />} target={"_blank"} rel="noreferrer noopener">
          <Typography variant="span" sx={{ display: { xs: 'none', sm: 'block' } }}>
              Source
          </Typography>
      </Button>
      <Box component={"div"}>
          <Typography variant="h4">
              {pieceColor === WHITE ? '♟' : '♙'}
          </Typography>
      </Box>
      <Button variant="contained" onClick={togglePieceColor}
          startIcon={<SwapVertIcon />}>
          <Typography variant="span" sx={{ display: { xs: 'none', sm: 'block' } }}>
              Switch Side
          </Typography>
      </Button>
  </Toolbar>
</AppBar>

Возможно, вы заметили, что в приведенный выше код JavaScript встроено приличное количество кода CSS. Это потому, что библиотека компонентов MUI является ярым сторонником подхода CSS-in-JS.

Некоторые другие компоненты MUI, которые также используются в приведенном выше коде, — это Box, Button, Typography и Icons.

Куча

Стек — это компонент макета, предоставляемый MUI. Под капотом это контейнер flex, который должен использоваться для отображения его элементов в одном направлении. Предоставляется реквизит direction, значение которого может быть любым из row (по умолчанию), row-reverse, column и column-reverse, что должно быть знакомо тем, кто раньше работал со свойством CSS flex-direction.

В версии шахматной доски на основе MUI я использую несколько экземпляров Stack в качестве контейнера для имен строк, имен столбцов и строк шахматной доски. Например, код компонента ColNames теперь выглядит так

<Stack direction="row" sx={{
    gridArea: (side === "top" ? "1 / 2 / span 1 / span 8" : "10 / 2 / span 1 / span 8"),
    alignItems: "center",
}}>
    {
        names.map((name) => 
            <Paper key={`${side} ${name}`} elevation={0} sx={{
                flex: "1 1 100%",
                textAlign: "center",
                bgcolor: "transparent",
                border: "none",
                textTransform: "uppercase",
                fontSize: { xs: "1em", sm: "1.5em" },

            }}>
                <strong>{name}</strong>
            </Paper>
        )
    }
</Stack>

Поскольку я не хотел менять раскладку сетки, установленную ранее (см. этот пост), я просто переместил свойство CSS grid-area из файла CSS в файл JavaScript и установил его через свойство sx (это MUI версия реквизита JSX styles).

Бумага

Бумага — безусловно, одна из моих любимых вещей в MUI. Это позволяет нам создать компонент пользовательского интерфейса, который выглядит как лист бумаги, лежащий на экране. Если вы хотите, чтобы бумага выглядела так, как будто ее поднимают с экрана, вы можете использовать свойство elevation. Чем выше значение, тем выше уровень компонента. Ниже приведен код для компонента Board.

<Paper sx={{
    display: "flex",
    flexDirection: "column-reverse",
    gridArea: "2 / 2 / span 8 / span 8",
}} elevation={4}>
    {
        board.map((row, rowIdx) => {
            return  (
                <Row key={rowKey(rowIdx)} row={row} rowIdx={rowIdx} />
            );
        })
    }
</Paper>

Еще одна интересная опора Paper — variant. По умолчанию значение реквизита равно contained . Другим значением, которое можно использовать, является outlined, что делает компонент показанным с очень тонкой и красивой рамкой. Ниже приведен код внешней доски, то есть компонента, который содержит шахматную доску, а также RowNames и ColNames.

<Paper sx={{
    display: "grid",
    gridTemplate: "repeat(10, min(9vw, 9vh)) / repeat(10, min(9vw, 9vh))",
    bgcolor: "rgba(0, 0, 0, 0.2)",
    border: "none",
}} variant="outlined">
    <ColNames side="top" />

    <RowNames side="left" />
    <Board board={pieceColor === WHITE ? WHITE_BOARD : BLACK_BOARD} />
    <RowNames side="right" />

    <ColNames side="bottom" />
</Paper>

Влияние elevation и variant="outlined" можно увидеть на снимке экрана ниже.

Наслаждаться!