Added new bp entities style (#49)

Co-authored-by: Bart <barthuijgen@users.noreply.github.com>
2024-11-28 09:33:51 +02:00 · 2021-03-17 12:29:26 +02:00 · 2021-03-17 12:29:26 +02:00 · f98ec515a6
commit f98ec515a6
parent 8dc22086f9
6 changed files with 141 additions and 90 deletions
--- a/apps/blueprints/src/components/Panel.tsx
+++ b/apps/blueprints/src/components/Panel.tsx
@ -14,7 +14,7 @@ const StyledPanel = styled(Box)`
    inset -2px 0 1px -1px #201815, inset 0 -3px 3px -3px #000, inset 0 -2px 2px -2px #000,
    inset 0 -1px 1px -1px #000, 0 0 2px 0 #201815, 0 0 4px 0 #201815;

-  h2 {
+  .title {
    font-weight: 900;
    color: #ffe6c0;
    line-height: 1.25;
@ -33,15 +33,6 @@ const StyledPanel = styled(Box)`
      -2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f,
      0 3px 3px -3px #8f8c8b, 0 2px 2px -2px #8f8c8b, 0 1px 1px -1px #8f8c8b;
  }
-
-  .panel-inset {
-    padding: 4px;
-    box-shadow: inset 0 0 3px 0 #000, 0 -2px 2px -1px #000, -2px 0 2px -2px #28221f,
-      -2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f,
-      0 3px 3px -3px #8f8c8b, 0 2px 2px -2px #8f8c8b, 0 1px 1px -1px #8f8c8b;
-    background-color: #242324;
-    margin-top: 12px;
-  }
 `;

 interface PanelProps extends Omit<BoxProps, "title" | "bottom"> {
@ -51,7 +42,7 @@ interface PanelProps extends Omit<BoxProps, "title" | "bottom"> {

 export const Panel: React.FC<PanelProps> = ({ title, bottom, children, className, ...props }) => (
  <StyledPanel className={clsx("panel", className)} {...props}>
-    {title && <h2>{title}</h2>}
+    {title && <h2 className="title">{title}</h2>}
    <div className="panel-content">{children}</div>
    {bottom && <div className="panel-inset">{bottom}</div>}
  </StyledPanel>
--- a/apps/blueprints/src/components/PanelInset.tsx
+++ b/apps/blueprints/src/components/PanelInset.tsx
@ -0,0 +1,33 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { Box, BoxProps } from "@chakra-ui/layout";
+
+interface PanelInsetProps extends BoxProps {
+  light?: boolean;
+}
+
+const StyledPanelInset = styled(Box)`
+  display: block;
+  padding: 4px;
+  box-shadow: inset 0 0 3px 0 #000, 0 -2px 2px -1px #000, -2px 0 2px -2px #28221f,
+    -2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f, 0 3px 3px -3px #8f8c8b,
+    0 2px 2px -2px #8f8c8b, 0 1px 1px -1px #8f8c8b;
+  background-color: #242324;
+
+  &.light {
+    height: 100%;
+    padding: 12px;
+    background: #414040;
+    box-shadow: inset 0 0 3px 0 #000, 0 -2px 2px -1px #000, -2px 0 2px -2px #28221f,
+      -2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f, 2px 0 2px -2px #28221f,
+      0 3px 3px -3px #8f8c8b, 0 2px 2px -2px #8f8c8b, 0 1px 1px -1px #8f8c8b;
+  }
+`;
+
+export const PanelInset: React.FC<PanelInsetProps> = ({ className, children, ...props }) => {
+  return (
+    <StyledPanelInset className={className} {...props}>
+      {children}
+    </StyledPanelInset>
+  );
+};
--- a/apps/blueprints/src/components/blueprint/Blueprint.tsx
+++ b/apps/blueprints/src/components/blueprint/Blueprint.tsx
@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import BBCode from "bbcode-to-react";
-import { Grid, Image, Box } from "@chakra-ui/react";
+import { Grid, Box } from "@chakra-ui/react";
 import { Blueprint as IBlueprint, BlueprintPage, BlueprintStringData } from "@factorio-sites/types";
 import { chakraResponsive, parseBlueprintStringClient } from "@factorio-sites/web-utils";
 import { Panel } from "../../components/Panel";
@ -34,12 +34,8 @@ const StyledBlueptintPage = styled(Grid)`
  }

  .panel {
-    &.image {
-      height: 579px;
-    }
    &.child-tree {
      overflow: hidden;
-      height: 579px;
      position: relative;
      .child-tree-wrapper {
        height: 483px;
@ -47,18 +43,6 @@ const StyledBlueptintPage = styled(Grid)`
      }
    }

-    &.tags {
-      text-align: left;
-
-      .tag {
-        display: inline-block;
-        margin: 3px;
-        padding: 0 3px;
-        background: #313131;
-        border-radius: 3px;
-      }
-    }
-
    .description {
      max-height: 600px;
    }
@ -97,10 +81,13 @@ export const BlueprintSubPage: React.FC<BlueprintProps> = ({
  }, []);

  return (
-    <StyledBlueptintPage templateColumns={chakraResponsive({ mobile: "1fr", desktop: "1fr 1fr" })}>
+    <StyledBlueptintPage
+      templateColumns={chakraResponsive({ mobile: "1fr", desktop: "1fr 1fr 1fr 1fr" })}
+    >
      <Panel
        className="image"
-        gridColumn="2"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "3 / span 2" })}
+        gridRow="1"
        title={
          <div className="title">
            <span>Image</span>
@ -133,8 +120,8 @@ export const BlueprintSubPage: React.FC<BlueprintProps> = ({

      <Panel
        className="description"
-        gridColumn="1"
-        gridRow="1"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "1 / span 2" })}
+        gridRow={chakraResponsive({ mobile: null, desktop: "1" })}
        title={
          <div className="title">
            <span className="text">{blueprint_page.title}</span>
@ -145,20 +132,28 @@ export const BlueprintSubPage: React.FC<BlueprintProps> = ({
        <StyledMarkdown>{blueprint_page.description_markdown}</StyledMarkdown>
      </Panel>

-      <Panel title="Info" gridColumn="1" gridRow="2">
+      <Panel
+        title="Info"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "1 / span 2" })}
+        gridRow={chakraResponsive({ mobile: null, desktop: "2" })}
+      >
        <BlueprintInfo blueprint_page={blueprint_page} />
      </Panel>

-      <Panel gridColumn="2" gridRow="2" title="Tags">
+      <Panel
+        title="Tags"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "3" })}
+        gridRow={chakraResponsive({ mobile: null, desktop: "2" })}
+      >
        <BlueprintTags blueprint_page={blueprint_page} />
      </Panel>

      <Panel
        className="entities"
-        gridColumn="1 / span 2"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "4" })}
        title={
          <span>
-            Entities for{" "}
+            Components for{" "}
            {data?.blueprint?.label ? BBCode.toReact(data.blueprint.label) : "blueprint"}
          </span>
        }
@ -166,7 +161,11 @@ export const BlueprintSubPage: React.FC<BlueprintProps> = ({
        {data && <BlueprintEntities data={data} />}
      </Panel>

-      <Panel className="bp-strings" gridColumn="1 / span 2" title="Blueprint data">
+      <Panel
+        title="Blueprint data"
+        className="bp-strings"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "1 / span 4" })}
+      >
        {string && data && <BlueprintData string={string} data={data} />}
      </Panel>
    </StyledBlueptintPage>
--- a/apps/blueprints/src/components/blueprint/BlueprintBook.tsx
+++ b/apps/blueprints/src/components/blueprint/BlueprintBook.tsx
@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import BBCode from "bbcode-to-react";
-import { Image, Box, Grid } from "@chakra-ui/react";
+import { Box, Grid } from "@chakra-ui/react";
 import styled from "@emotion/styled";
 import {
  BlueprintBook,
@ -45,15 +45,11 @@ const StyledBlueptintPage = styled(Grid)`
  }

  .panel {
-    &.image {
-      height: 579px;
-    }
    &.child-tree {
      overflow: hidden;
-      height: 579px;
      position: relative;
      .child-tree-wrapper {
-        height: 483px;
+        height: 480px;
        overflow: auto;
      }
    }
@ -142,7 +138,7 @@ export const BlueprintBookSubPage: React.FC<BlueprintBookSubPageProps> = ({
  return (
    <StyledBlueptintPage
      className="bp-book"
-      templateColumns={chakraResponsive({ mobile: "1fr", desktop: "1fr 1fr" })}
+      templateColumns={chakraResponsive({ mobile: "1fr", desktop: "1fr 1fr 1fr 1fr" })}
    >
      <Panel
        className="child-tree"
@ -152,8 +148,8 @@ export const BlueprintBookSubPage: React.FC<BlueprintBookSubPageProps> = ({
            <FavoriteButton is_favorite={favorite} blueprint_page_id={blueprint_page.id} />
          </div>
        }
-        gridColumn="1"
-        gridRow="1"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "1 / span 2" })}
+        gridRow={chakraResponsive({ mobile: "2", desktop: "1" })}
      >
        {bookChildTreeData && (
          <div className="child-tree-wrapper">
@ -168,7 +164,8 @@ export const BlueprintBookSubPage: React.FC<BlueprintBookSubPageProps> = ({

      <Panel
        className="image"
-        gridColumn="2"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "3 / span 2" })}
+        gridRow={chakraResponsive({ mobile: "1", desktop: "1" })}
        title={
          <div className="title">
            <span>Image</span>
@ -201,8 +198,8 @@ export const BlueprintBookSubPage: React.FC<BlueprintBookSubPageProps> = ({

      <Panel
        className="description"
-        gridColumn="1"
-        gridRow={"2 / span 2"}
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "1 / span 2" })}
+        gridRow={chakraResponsive({ mobile: null, desktop: "2 / span 2" })}
        title={
          <div className="title">
            <span className="text">Description </span>
@ -213,21 +210,29 @@ export const BlueprintBookSubPage: React.FC<BlueprintBookSubPageProps> = ({
        <StyledMarkdown>{blueprint_page.description_markdown}</StyledMarkdown>
      </Panel>

-      <Panel title="Info" gridColumn="2" gridRow="2">
+      <Panel
+        title="Info"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "3 / span 2" })}
+        gridRow={chakraResponsive({ mobile: null, desktop: "2" })}
+      >
        <BlueprintInfo blueprint_page={blueprint_page} />
      </Panel>

-      <Panel title="Tags" gridColumn="2" gridRow={"3"}>
+      <Panel
+        title="Tags"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: showEntities ? "3" : "3 / span 2" })}
+        gridRow={chakraResponsive({ mobile: null, desktop: "3" })}
+      >
        <BlueprintTags blueprint_page={blueprint_page} />
      </Panel>

      {showEntities && (
        <Panel
          className="entities"
-          gridColumn="1 / span 2"
+          gridColumn={chakraResponsive({ mobile: "1", desktop: "4" })}
          title={
            <span>
-              Entities for{" "}
+              Components for{" "}
              {selectedData?.blueprint?.label
                ? BBCode.toReact(selectedData.blueprint.label)
                : "blueprint"}
@ -240,7 +245,7 @@ export const BlueprintBookSubPage: React.FC<BlueprintBookSubPageProps> = ({

      <Panel
        className="bp-strings"
-        gridColumn="1 / span 2"
+        gridColumn={chakraResponsive({ mobile: "1", desktop: "1 / span 4" })}
        title={`data for ${selected.type.replace("_", " ")} "${selected.data.label}"`}
      >
        {selectedBlueprintString && (
--- a/apps/blueprints/src/components/blueprint/BlueprintEntities.tsx
+++ b/apps/blueprints/src/components/blueprint/BlueprintEntities.tsx
@ -1,13 +1,40 @@
 import { Box, Image } from "@chakra-ui/react";
-import { BlueprintStringData } from "@factorio-sites/types";
 import styled from "@emotion/styled";
+import { BlueprintStringData } from "@factorio-sites/types";
+import { PanelInset } from "../PanelInset";

 const StyledBox = styled(Box)`
-  td {
-    border: 1px solid #909090;
+  .entities {
+    display: inline-block;
  }
-  td:not(.no-padding) {
-    padding: 5px 10px;
+`;
+
+const StyledEntity = styled.span`
+  background: #313131;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 2px;
+  padding: 5px;
+  box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000, inset 0 10px 2px -8px #282828,
+    inset 0 -9px 2px -8px #000, 0 0 4px 0 #000;
+  position: relative;
+
+  &:hover {
+    box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000, inset 0 9px 2px -8px #fff,
+      inset 0 8px 4px -8px #000, inset 0 -8px 4px -8px #000, inset 0 -9px 2px -8px #432400,
+      0 0 4px 0 #000, inset 0 0 4px 2px #f9b44b;
+    background-color: #e39827;
+    filter: drop-shadow(0 0 2px #f9b44b);
+  }
+
+  .entity-total {
+    pointer-events: none;
+    font-weight: 600;
+    position: absolute;
+    right: 3px;
+    bottom: 0;
+    text-shadow: 1px 1px 2px #282828;
  }
 `;

@ -18,37 +45,32 @@ interface BlueprintEntitiesProps {
 export const BlueprintEntities: React.FC<BlueprintEntitiesProps> = ({ data }) => {
  return (
    <StyledBox>
-      <table>
-        <tbody>
-          {data?.blueprint?.entities &&
-            Object.entries(
-              data.blueprint.entities.reduce<Record<string, number>>((entities, entity) => {
-                if (entities[entity.name]) {
-                  entities[entity.name]++;
-                } else {
-                  entities[entity.name] = 1;
-                }
-                return entities;
-              }, {})
-            )
-              .sort((a, b) => b[1] - a[1])
-              .map(([entry_name, entry]) => (
-                <tr key={entry_name}>
-                  <td className="no-padding">
-                    <Image
-                      alt={entry_name.replace(/-/g, " ")}
-                      src={`https://factorioprints.com/icons/${entry_name}.png`}
-                      fallbackSrc="https://storage.googleapis.com/factorio-blueprints-assets/error-icon.png"
-                      width="32px"
-                      height="32px"
-                    />
-                  </td>
-                  <td>{entry_name}</td>
-                  <td>{entry}</td>
-                </tr>
-              ))}
-        </tbody>
-      </table>
+      <PanelInset className="entities">
+        {data?.blueprint?.entities &&
+          Object.entries(
+            data.blueprint.entities.reduce<Record<string, number>>((entities, entity) => {
+              if (entities[entity.name]) {
+                entities[entity.name]++;
+              } else {
+                entities[entity.name] = 1;
+              }
+              return entities;
+            }, {})
+          )
+            .sort((a, b) => b[1] - a[1])
+            .map(([entry_name, entry]) => (
+              <StyledEntity key={entry_name} className="entity" title={entry_name}>
+                <Image
+                  alt={entry_name.replace(/-/g, " ")}
+                  src={`https://factorioprints.com/icons/${entry_name}.png`}
+                  fallbackSrc="https://storage.googleapis.com/factorio-blueprints-assets/error-icon.png"
+                  width="32px"
+                  height="32px"
+                />
+                <span className="entity-total">{entry}</span>
+              </StyledEntity>
+            ))}
+      </PanelInset>
    </StyledBox>
  );
 };
--- a/libs/database/src/lib/data/blueprint.ts
+++ b/libs/database/src/lib/data/blueprint.ts
@ -58,6 +58,7 @@ export async function createBlueprint(
      tags: extraInfo.tags,
      game_version: `${blueprint.version}`,
      image_version: 1,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      data: blueprintDataToDbData(blueprint) as any,
      updated_at: extraInfo.updated_at ? new Date(extraInfo.updated_at * 1000) : new Date(),
      created_at: extraInfo.created_at ? new Date(extraInfo.created_at * 1000) : new Date(),