build: add shared folder to build config

greenpixels · Oct 2, 2023 · d8cec50 · d8cec50
1 parent a7cdf56
commit d8cec50
Show file tree

Hide file tree

Showing 13 changed files with 171 additions and 22 deletions.
diff --git a/client/src/components/AssetCardForm/AssetCardForm.stories.tsx b/client/src/components/AssetCardForm/AssetCardForm.stories.tsx
@@ -5,7 +5,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { AssetCardForm } from "./AssetCardForm";
-import { AssetCard } from "../../../../shared/types/AssetCard";
+import { AssetCard } from "@shared/types/AssetCard";
 import { useState } from "react";
 
 const meta: Meta<typeof AssetCardForm> = {

diff --git a/client/src/components/AssetCardForm/AssetCardForm.test.tsx b/client/src/components/AssetCardForm/AssetCardForm.test.tsx
@@ -18,7 +18,7 @@ import {
   beforeEach,
   MockedFunction,
 } from "vitest";
-import { AssetCard } from "../../../../shared/types/AssetCard";
+import { AssetCard } from "@shared/types/AssetCard";
 
 const getMockCard = (): AssetCard => {
   return {

diff --git a/client/src/components/AssetCardForm/AssetCardForm.tsx b/client/src/components/AssetCardForm/AssetCardForm.tsx
@@ -2,10 +2,9 @@
 
 import { Button, Card, Divider, Input, Radio, Select } from "antd";
 import TextArea from "antd/es/input/TextArea";
-import {
-  AssetCard,
-  AssetCardProperty,
-} from "../../../../shared/types/AssetCard";
+import { AssetCard, AssetCardProperty } from "@shared/types/AssetCard";
+import CaretUpOutlined from "@ant-design/icons/lib/icons/CaretUpOutlined";
+import CaretDownOutlined from "@ant-design/icons/lib/icons/CaretDownOutlined";
 
 export interface AssetCardFormProps {
   card: AssetCard;
@@ -171,6 +170,18 @@ function renderProperty(
       >
         Remove
       </Button>
+      <Radio.Group data-testid={"asset-card-form-move-property"}>
+        <Radio.Button
+          onClick={() => moveProperty("up", propertyIndex, card, setCard)}
+        >
+          <CaretUpOutlined />
+        </Radio.Button>
+        <Radio.Button
+          onClick={() => moveProperty("down", propertyIndex, card, setCard)}
+        >
+          <CaretDownOutlined />
+        </Radio.Button>
+      </Radio.Group>
       <Select
         data-testid={"asset-card-form-property-indents"}
         placeholder={"Indents"}
@@ -242,3 +253,22 @@ function editProperty(
   (cardProperty[key] as AssetCardProperty[typeof key]) = value;
   setCard(cardCopy);
 }
+
+function moveProperty(
+  direction: "up" | "down",
+  current: number,
+  card: AssetCard,
+  setCard: (card: AssetCard) => void
+) {
+  if (
+    (current === 0 && direction === "up") ||
+    (current === card.properties.length - 1 && direction === "down")
+  )
+    return;
+  const cardCopy = { ...card };
+  const properties = cardCopy.properties;
+  const element = properties[current];
+  properties.splice(current, 1);
+  properties.splice(current + (direction === "up" ? -1 : 1), 0, element);
+  setCard({ ...cardCopy, properties: [...properties] });
+}
diff --git a/client/src/components/AssetCardViewer/AssetCardViewer.stories.tsx b/client/src/components/AssetCardViewer/AssetCardViewer.stories.tsx
@@ -3,7 +3,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { AssetCardViewer } from "./AssetCardViewer";
-import { HawkMockAssetCard } from "./Mocks";
+import {
+  FletcherMockAssetCard,
+  HawkMockAssetCard,
+  IroncladMockAssetCard,
+} from "./Mocks";
 
 const meta: Meta<typeof AssetCardViewer> = {
   component: AssetCardViewer,
@@ -12,17 +16,31 @@ const meta: Meta<typeof AssetCardViewer> = {
 export default meta;
 type Story = StoryObj<typeof AssetCardViewer>;
 
-export const Default: Story = {
+export const Original: Story = {
   args: {
     card: HawkMockAssetCard,
     scale: 1,
+    isOriginal: true,
   },
 };
 
-export const Original: Story = {
+export const Hawk: Story = {
   args: {
     card: HawkMockAssetCard,
     scale: 1,
-    isOriginal: true,
+  },
+};
+
+export const Ironclad: Story = {
+  args: {
+    card: IroncladMockAssetCard,
+    scale: 1,
+  },
+};
+
+export const Fletcher: Story = {
+  args: {
+    card: FletcherMockAssetCard,
+    scale: 1,
   },
 };
diff --git a/client/src/components/AssetCardViewer/AssetCardViewer.tsx b/client/src/components/AssetCardViewer/AssetCardViewer.tsx
@@ -5,7 +5,7 @@ import { Alert, Button, Spin } from "antd";
 import { useInView } from "../../helpers/hooks/useInView";
 import { generatePngDataFromAssetCard } from "../../helpers/Converters";
 import OriginalContentWarning from "../OriginalContentWarning/OriginalContentWarning";
-import { AssetCard } from "../../../../shared/types/AssetCard";
+import { AssetCard } from "@shared/types/AssetCard";
 
 type AssetCardViewerProps = {
   card: AssetCard;

diff --git a/client/src/components/AssetCardViewer/CardTemplate.tsx b/client/src/components/AssetCardViewer/CardTemplate.tsx
@@ -1,6 +1,6 @@
 /** @format */
 
-import { AssetCard } from "../../../../shared/types/AssetCard";
+import { AssetCard } from "@shared/types/AssetCard";
 
 export function CardTemplate(card: AssetCard, width: number, height: number) {
   return (
@@ -13,7 +13,7 @@ export function CardTemplate(card: AssetCard, width: number, height: number) {
         display: "flex",
         flexDirection: "column",
         boxSizing: "border-box",
-        fontSize: "1.1em",
+        fontSize: "1.05em",
         fontFamily: "Georgia",
       }}
     >
@@ -55,7 +55,7 @@ export function CardTemplate(card: AssetCard, width: number, height: number) {
       <div
         style={{
           paddingLeft: "1em",
-          paddingRight: "1em",
+          paddingRight: "2em",
           display: "flex",
           flexDirection: "column",
           fontSize: "2em",
@@ -79,21 +79,24 @@ export function CardTemplate(card: AssetCard, width: number, height: number) {
             <div
               key={"property-" + index}
               style={{
+                position: "relative",
                 display: "flex",
+                marginBottom: "0.1em",
                 columnGap: "1em",
                 paddingLeft: property.indents * 2 + "em",
               }}
             >
               <span
                 style={{
-                  marginTop: "0.2em",
+                  position: "absolute",
+                  top: "0.2em",
                   fontSize: "0.66em",
                   scale: property.indents > 0 ? "50%" : "100%",
                 }}
               >
                 {property.is_upgradeable ? "⚪" : "⚫"}
               </span>
-              <span>
+              <span style={{ marginLeft: "1.5em" }}>
                 {property.title && <b>{property.title}: </b>}
                 {property.description}
               </span>

diff --git a/client/src/components/AssetCardViewer/Mocks.tsx b/client/src/components/AssetCardViewer/Mocks.tsx
@@ -1,6 +1,6 @@
 /** @format */
 
-import { AssetCard } from "../../../../shared/types/AssetCard";
+import { AssetCard } from "@shared/types/AssetCard";
 
 export const HawkMockAssetCard = {
   category: "companion",
@@ -33,3 +33,93 @@ export const HawkMockAssetCard = {
   title: "Hawk",
   custom_fields: [],
 } satisfies AssetCard;
+
+export const IroncladMockAssetCard = {
+  category: "combat talent",
+  description: "If you wear armor...",
+  has_name_field: false,
+  properties: [
+    {
+      description: "When you equip or adjust your armor, choose one.",
+      indents: 0,
+      is_upgradeable: false,
+      title: "",
+    },
+    {
+      description:
+        "When you Endure Harm in a fight, add +1 and take +1 momentum on a hit.",
+      indents: 1,
+      is_upgradeable: false,
+      title: "Lightly armored",
+    },
+    {
+      description:
+        "Mark encumbered. When you Endure Harm in a fight, add +2 and take +1 momentum on a hit.",
+      indents: 1,
+      is_upgradeable: false,
+      title: "Geared for war",
+    },
+    {
+      description: "When you Clash while you are geared for war, add +1.",
+      indents: 0,
+      is_upgradeable: true,
+      title: "",
+    },
+    {
+      description:
+        "When you Compel in a situation where strength of arms is a factor, add +2.",
+      indents: 0,
+      is_upgradeable: true,
+      title: "",
+    },
+  ],
+  health: 0,
+  title: "Ironclad",
+  custom_fields: ["LIGHTLY ARMORED", "GEARED FOR WAR"],
+} satisfies AssetCard;
+
+export const FletcherMockAssetCard = {
+  category: "combat talent",
+  description: "",
+  has_name_field: false,
+  properties: [
+    {
+      description:
+        "When you Secure an Advantage by crafting arrows of fine quality, add +1. Then, take +1 supply or +1 momentum on a hit.",
+      indents: 0,
+      is_upgradeable: false,
+      title: "",
+    },
+    {
+      description:
+        "When you Resupply by recovering or gathering arrows after a battle, add +2.",
+      indents: 0,
+      is_upgradeable: true,
+      title: "",
+    },
+    {
+      description:
+        "When you craft a single arrow designated for a specific foe, envision the process and materials, and roll +wits. On a strong hit, take both. On a weak hit, choose one.",
+      indents: 0,
+      is_upgradeable: true,
+      title: "",
+    },
+    {
+      description:
+        "When a shooter uses the arrow to Strike or Clash against this foe, reroll any dice (one time only).",
+      indents: 1,
+      is_upgradeable: false,
+      title: "Seeker",
+    },
+    {
+      description:
+        "When a shooter uses the arrow to inflict harm against this foe, inflict +1d6 harm (one time only).",
+      indents: 1,
+      is_upgradeable: false,
+      title: "Ravager",
+    },
+  ],
+  health: 0,
+  title: "Fletcher",
+  custom_fields: [],
+} satisfies AssetCard;
diff --git a/client/src/components/RessourceList/RessourceList.stories.tsx b/client/src/components/RessourceList/RessourceList.stories.tsx
@@ -3,7 +3,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { RessourceList, RessourceType } from "./RessourceList";
 import { HawkMockAssetCard } from "../AssetCardViewer/Mocks";
-import { RessourceMetadata } from "../../types/Metadata";
+import { RessourceMetadata } from "@shared/types/Metadata";
 
 const meta: Meta<typeof RessourceList> = {
   component: RessourceList,

diff --git a/client/src/components/RessourceList/RessourceList.tsx b/client/src/components/RessourceList/RessourceList.tsx
@@ -1,8 +1,8 @@
 /** @format */
 
 import Search from "antd/es/input/Search";
-import { AssetCard } from "../../types/AssetCard";
-import { RessourceMetadata } from "../../types/Metadata";
+import { AssetCard } from "@shared/types/AssetCard";
+import { RessourceMetadata } from "@shared/types/Metadata";
 import { AssetCardViewer } from "../AssetCardViewer/AssetCardViewer";
 import { Card, Empty, Tooltip } from "antd";
 import HeartOutlined from "@ant-design/icons/lib/icons/HeartOutlined";

diff --git a/client/src/helpers/Converters.tsx b/client/src/helpers/Converters.tsx
@@ -1,7 +1,7 @@
 /** @format */
 
 import ReactDOMServer from "react-dom/server";
-import { AssetCard } from "../types/AssetCard";
+import { AssetCard } from "@shared/types/AssetCard";
 import { CardTemplate } from "../components/AssetCardViewer/CardTemplate";
 
 export function convertJsxToHtmlString(jsx: JSX.Element) {

diff --git a/client/src/widgets/AssetCardEditor/AssetCardEditor.tsx b/client/src/widgets/AssetCardEditor/AssetCardEditor.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import { AssetCardViewer } from "../../components/AssetCardViewer/AssetCardViewer";
 import { AssetCardForm } from "../../components/AssetCardForm/AssetCardForm";
-import { AssetCard } from "../../../../shared/types/AssetCard";
+import { AssetCard } from "@shared/types/AssetCard";
 
 type AssetCardEditorProps = {
   initial?: AssetCard;

diff --git a/client/tsconfig.json b/client/tsconfig.json
@@ -5,6 +5,9 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "paths": {
+      "@shared/*": ["../shared/*"]
+    },
 
     /* Bundler mode */
     "moduleResolution": "bundler",

diff --git a/client/vite.config.ts b/client/vite.config.ts
@@ -12,6 +12,11 @@ export default defineConfig({
   define: {
     APP_VERSION: JSON.stringify(process.env.npm_package_version),
   },
+  resolve: {
+    alias: {
+      "@shared": "../shared", // Adjust the path as needed
+    },
+  },
   test: {
     environment: "happy-dom",
     coverage: {