EMFXD-1389: Improve Card Generator

next.config.js

@@ -7,7 +7,7 @@ module.exports = {
           headers: [
             {
               key: "Cache-Control",
-              value: "public,max-age=31536000,immutable",
+              value: "public,max-age=86400,immutable",
             },
           ],
         },
@@ -16,7 +16,7 @@ module.exports = {
           headers: [
             {
               key: "Cache-Control",
-              value: "public,max-age=31536000,immutable",
+              value: "public,max-age=86400,immutable",
             },
           ],
         },
@@ -43,4 +43,3 @@ module.exports = {
     trailingSlash: true,
     reactStrictMode: true,
   };
-

src/Components/CardGame/Description.tsx

@@ -3,45 +3,44 @@ import { Parser } from "html-to-react";
 const parser = new Parser();
 
 export const Description = ({ children, rich, fontFamily }) => {
-    if (rich) {
-        return (
-            <foreignObject
-                x="210"
-                y="750"
-                width="375"
-                height="220"
-                display="block"
-            >
-                <div
-                    className="text-container"
-                    style={{
-                        textAlign: "center",
-                        /* display: "table", */
-                        height: "100%",
-                        width: "100%",
-                        fontFamily: "serif",
-                        fontSize: 31,
-                        lineHeight: "initial"
-                    }}
-                >
-                    {parser.parse(
-                        `<div class="text" style="vertical-align: middle; height: 100%; font-family: ${fontFamily}">${children}</div>`
-                    )}
-                </div>
-            </foreignObject>
-        );
-    }
+  if (rich) {
     return (
-        <text
-            x="130"
-            y="826"
-            width="520"
-            height="230"
-            fontFamily="serif"
+      <foreignObject
+        x="210"
+        y="750"
+        width="375"
+        height="220"
+        display="block"
+      >
+        <div
+          className="text-container"
+          style={{
+            textAlign: "center",
+            height: "100%",
+            width: "100%",
+            fontFamily: "serif",
+            fontSize: 31,
+            lineHeight: "initial"
+          }}
         >
-            {children}
-        </text>
+          {parser.parse(
+            `<div class="text" style="vertical-align: middle; height: 100%; font-family: ${fontFamily}">${children}</div>`
+          )}
+        </div>
+      </foreignObject>
     );
+  }
+  return (
+    <text
+      x="130"
+      y="826"
+      width="520"
+      height="230"
+      fontFamily="serif"
+    >
+      {children}
+    </text>
+  );
 };
 
-export default Description;
+export default Description;

src/Components/CardGame/Misc/RectangleElements.tsx

@@ -1,20 +1,32 @@
+import { generatePath } from "utils/Svg";
+
+
 export const TopRectangle = () =>
-    <svg width="600" height="100" x="100" y="48">
-        <rect width="600" height="90" style={{
-            fill: "rgba(0,0,0, 0.5)"
-        }} />
-    </svg>;
+  <svg width="600" height="100" x="100" y="48">
+    <rect width="600" height="90" style={{
+      fill: "rgba(0,0,0, 0.5)"
+    }} />
+  </svg>;
 
 export const BottomRectangle = () =>
-    <svg width="581" height="327" x="99" y="725">
+  <svg width={581} height={327} x={99} y={726}>
 
-        {/* <defs>
-            <clipPath id="corner-path">
-                <path d="M -10 0 h560 a20,20 0 0 1 20,20 v400 a20,20 0 0 1 -20,20 h-530 a20,20 0 0 1 -20,-20 v-400 a20,20 0 0 1 20,-20 z" fill="none" stroke="#000000" strokeWidth="10" />
-            </clipPath>
-        </defs> */}
+    <defs>
+      <clipPath id="corner-path">
+        <path d={generatePath({
+          x: 0,
+          y: 0,
+          width: 580,
+          height: 327,
+          tr: 0,
+          br: 40,
+          bl: 40,
+          tl: 0
+        })} fill="none" stroke="#000000" strokeWidth="10" />
+      </clipPath>
+    </defs>
 
-        <rect width="581" height="327" clipPath={"url(#corner-path)"} style={{
-            fill: "rgba(0,0,0, 0.5)"
-        }} />
-    </svg>;
+    <rect width={581} height={327} clipPath={"url(#corner-path)"} style={{
+      fill: "rgba(0,0,0, 0.5)"
+    }} />
+  </svg>;

src/Components/CardGame/Type.tsx

@@ -1,29 +1,53 @@
-export const Type = ({ children, fontFamily }) =>
-    <svg width="585" height="140" x="111" y="937">
-        {children && <image
-            id="race"
-            type="MSBitmapLayer"
-            x="187"
-            y="58"
-            width="178"
-            height="65"
-            href="/images/parts/stats/placeholder.png"
-        />}
+export const Type = ({ children, fontFamily }) => {
 
-        <text
-            id="TypeText"
-            fill="#D8D8D8"
-            fontFamily="Inversionz Unboxed"
-            fontSize="40"
-            fontWeight="400"
-            letterSpacing="-6px"
-            dominantBaseline="middle"
-            textAnchor="middle"
-            x="273"
-            y="91"
-        >
-            {children}
-        </text>
-    </svg>;
+  const typeConfig = {
+    structure: {
+      size: '39px',
+      letterSpacing: '-9px'
+    },
+    vehicle: {
+      size: '38px',
+      letterSpacing: '-6px'
+    },
+    unit: {
+      x: 276,
+      size: '48px',
+      letterSpacing: '-6px'
+    },
+    tactic: {
+      size: '40px',
+      letterSpacing: '-6px'
+    },
+  }
 
-export default Type;
+  return (
+    <svg width={585} height={140} x={111} y={937}>
+      {children && <image
+        id="race"
+        type="MSBitmapLayer"
+        x={187}
+        y={58}
+        width={178}
+        height={65}
+        href="/images/parts/stats/placeholder.png"
+      />}
+
+      <text
+        id="TypeText"
+        fill="#D8D8D8"
+        fontFamily="Inversionz Unboxed"
+        fontSize={typeConfig[children.toLowerCase()]?.size}
+        fontWeight={400}
+        letterSpacing={typeConfig[children.toLowerCase()]?.letterSpacing}
+        dominantBaseline="middle"
+        textAnchor="middle"
+        x={typeConfig[children.toLowerCase()]?.x ?? 273}
+        y={91}
+      >
+        {children}
+      </text>
+    </svg>
+  )
+}
+
+export default Type;

src/utils/Svg.tsx

@@ -0,0 +1,62 @@
+export const arcParameter = (rx, ry, xAxisRotation, largeArcFlag, sweepFlag, x, y) => {
+  return [rx, ',', ry, ' ',
+    xAxisRotation, ' ',
+    largeArcFlag, ',',
+    sweepFlag, ' ',
+    x, ',', y].join('');
+};
+
+// I found this function here: http://jsfiddle.net/wcvrp0mq/
+export function generatePath({
+  x, y, width, height, tr, br, bl, tl }: {
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    tr: number,
+    br: number,
+    bl: number,
+    tl: number
+  }) {
+
+  let data: string[] = [];
+
+  // start point in top-middle of the rectangle
+  data.push('M' + (x + width / 2) + ',' + y);
+
+  // next we go to the right
+  data.push('H' + (x + width - tr));
+
+  if (tr > 0) {
+    data.push('A' + arcParameter(tr, tr, 0, 0, 1, (x + width), (y as number + tr)));
+  }
+
+  // next we go down
+  data.push('V' + (y + height - br));
+
+  if (br > 0) {
+    // now we draw the arc in the lower-right corner
+    data.push('A' + arcParameter(br, br, 0, 0, 1, (x + width - br), (y + height)));
+  }
+
+  // now we go to the left
+  data.push('H' + (x + bl));
+
+  if (bl > 0) {
+    // now we draw the arc in the lower-left corner
+    data.push('A' + arcParameter(bl, bl, 0, 0, 1, (x + 0), (y + height - bl)));
+  }
+
+  // next we go up
+  data.push('V' + (y as number + tl));
+
+  if (tl > 0) {
+    // now we draw the arc in the top-left corner
+    data.push('A' + arcParameter(tl, tl, 0, 0, 1, (x + tl), (y as number + 0)));
+  }
+
+  // and we close the path
+  data.push('Z');
+
+  return data.join(' ');
+};

src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './Svg';
+export * from './index';
+export * from './utils';

src/utils/utils.tsx

@@ -3,7 +3,7 @@ import * as htmlToImage from 'html-to-image';
 export const capitalize = (s: string | any[]) => s && s[0].toUpperCase() + s.slice(1);
 
 export const saveAs = (blob: any, fileName: string) => {
-    var elem = (window.document.createElement('a') as any);
+    let elem = (window.document.createElement('a') as any);
     elem.href = blob
     elem.download = fileName;
     elem.style = 'display:none;';
@@ -29,7 +29,7 @@ export const saveDocumentSize = ({ id, quality = 1 }: { id: string, quality: num
     })
         .then(function (dataUrl) {
             var base64str = dataUrl.substring(dataUrl.indexOf(',') + 1)
-            var decoded = atob(base64str);
+            var decoded = Buffer.from(base64str, 'base64');
             return (decoded.length / 1e+6).toFixed(2) + " MB";
         });
 }
@@ -40,10 +40,6 @@ export const onCapture = ({ id, name, quality = 1 }: { id: string, name: string,
         pixelRatio: quality
     })
         .then(function (dataUrl) {
-            var base64str = dataUrl.substring(dataUrl.indexOf(',') + 1)
-            var decoded = atob(base64str);
-            console.log("FileSize: " + decoded.length / 1e+6 + " MB");
-
             saveAs(dataUrl, `${name.toLowerCase()}.png`);
         });
 }

src/views/Generators/CardGenerator/components/CardGeneratorForm.tsx

@@ -1,5 +1,5 @@
 import { Box, Divider, Flex } from '@chakra-ui/react';
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import {
   NameInput,
   ImageUpload,
@@ -13,6 +13,7 @@ import {
 } from '.';
 
 const CardGeneratorForm = () => {
+
   return (
     <Flex direction="column" w={{ base: "100%", md: "auto" }}>
       <Box mt="0" height="auto" w="100%" bg="whiteAlpha.100" p="20px" borderRadius={8}>

src/views/Generators/CardGenerator/components/DownloadButton.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonProps, ChakraComponent, ChakraProps } from '@chakra-ui/react';
+import { Button, ButtonProps } from '@chakra-ui/react';
 import React from 'react'
 import { onCapture } from 'utils';
 

src/views/Generators/CardGenerator/components/ImportCard.tsx

@@ -1,4 +1,4 @@
-import { InputRightElement, Button, Badge, Box, Flex, ModalBody, ModalOverlay, ModalCloseButton, useDisclosure, ModalContent, Modal, Input, ModalHeader, ModalFooter, Text } from '@chakra-ui/react'
+import { InputRightElement, Button, Badge, Box, Flex, ModalBody, ModalOverlay, ModalCloseButton, useDisclosure, ModalContent, Modal, Input, ModalHeader, ModalFooter } from '@chakra-ui/react'
 import CardContext from 'views/Generators/CardGenerator/context/CardContext';
 import React, { useContext } from 'react'
 import { cardData } from 'views/Generators/CardGenerator/Utils/RawData';
@@ -141,10 +141,12 @@ const ImportCard = () => {
       </Modal>
 
       <InputRightElement width='4.8rem' mr={1}>
-        <Button h='1.5rem' size='sm' onClick={onOpen}>
-          Importar
-        </Button>
+
+          <Button h='1.5rem' size='sm' onClick={onOpen}>
+            Importar
+          </Button>
       </InputRightElement>
+
     </>
 
   )