From 81f76866cb5dff28bb2c4e6d3fde0eade6d34a9f Mon Sep 17 00:00:00 2001
From: Michydev <michyaraque@gmail.com>
Date: Thu, 6 Oct 2022 18:17:30 +0200
Subject: [PATCH] refactor: :zap: improve performance and solve some visual
 bugs

---
 next.config.js                                |  5 +-
 src/Components/CardGame/Description.tsx       | 73 +++++++++--------
 .../CardGame/Misc/RectangleElements.tsx       | 42 ++++++----
 src/Components/CardGame/Type.tsx              | 78 ++++++++++++-------
 src/utils/Svg.tsx                             | 62 +++++++++++++++
 src/utils/index.ts                            |  3 +
 src/utils/utils.tsx                           |  8 +-
 .../components/CardGeneratorForm.tsx          |  3 +-
 .../components/DownloadButton.tsx             |  2 +-
 .../CardGenerator/components/ImportCard.tsx   | 10 ++-
 .../CardGenerator/components/NameInput.tsx    |  7 +-
 .../CardGenerator/components/StatsInput.tsx   |  3 +-
 .../variants/InstagramPostCardVariant.tsx     |  7 +-
 .../variants/InstagramStoriesCardVariant.tsx  | 10 ++-
 src/views/Home/Tools.tsx                      | 11 +--
 15 files changed, 210 insertions(+), 114 deletions(-)
 create mode 100644 src/utils/Svg.tsx
 create mode 100644 src/utils/index.ts

diff --git a/next.config.js b/next.config.js
index ebab192..2c11417 100644
--- a/next.config.js
+++ b/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,
   };
-  
\ No newline at end of file
diff --git a/src/Components/CardGame/Description.tsx b/src/Components/CardGame/Description.tsx
index 1e15209..9eb2303 100644
--- a/src/Components/CardGame/Description.tsx
+++ b/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;
\ No newline at end of file
+export default Description;
diff --git a/src/Components/CardGame/Misc/RectangleElements.tsx b/src/Components/CardGame/Misc/RectangleElements.tsx
index d1f9324..c24606b 100644
--- a/src/Components/CardGame/Misc/RectangleElements.tsx
+++ b/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>;
diff --git a/src/Components/CardGame/Type.tsx b/src/Components/CardGame/Type.tsx
index 06aecb6..f6c6306 100644
--- a/src/Components/CardGame/Type.tsx
+++ b/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;
\ No newline at end of file
+  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;
diff --git a/src/utils/Svg.tsx b/src/utils/Svg.tsx
new file mode 100644
index 0000000..13d3159
--- /dev/null
+++ b/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(' ');
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..f7da441
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,3 @@
+export * from './Svg';
+export * from './index';
+export * from './utils';
diff --git a/src/utils/utils.tsx b/src/utils/utils.tsx
index 710cdc8..05e90c8 100644
--- a/src/utils/utils.tsx
+++ b/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`);
         });
 }
diff --git a/src/views/Generators/CardGenerator/components/CardGeneratorForm.tsx b/src/views/Generators/CardGenerator/components/CardGeneratorForm.tsx
index 7d801f7..2f098a5 100644
--- a/src/views/Generators/CardGenerator/components/CardGeneratorForm.tsx
+++ b/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}>
diff --git a/src/views/Generators/CardGenerator/components/DownloadButton.tsx b/src/views/Generators/CardGenerator/components/DownloadButton.tsx
index 33860a1..c3e6cfd 100644
--- a/src/views/Generators/CardGenerator/components/DownloadButton.tsx
+++ b/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';
 
diff --git a/src/views/Generators/CardGenerator/components/ImportCard.tsx b/src/views/Generators/CardGenerator/components/ImportCard.tsx
index bb7b7ec..7edee4c 100644
--- a/src/views/Generators/CardGenerator/components/ImportCard.tsx
+++ b/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>
+
     </>
 
   )
diff --git a/src/views/Generators/CardGenerator/components/NameInput.tsx b/src/views/Generators/CardGenerator/components/NameInput.tsx
index 4ce3a08..e463cbd 100644
--- a/src/views/Generators/CardGenerator/components/NameInput.tsx
+++ b/src/views/Generators/CardGenerator/components/NameInput.tsx
@@ -6,9 +6,9 @@ import CardContext from "../context/CardContext";
 const NameInput = () => {
 
     const { state, dispatch } = useContext(CardContext)
-    
+
     return (
-        <FormControl as={GridItem} colSpan={[6, 3]}>
+        <FormControl>
             <FormLabel
                 htmlFor="card_name"
                 fontSize="sm"
@@ -20,7 +20,7 @@ const NameInput = () => {
             >
                 Nombre de carta
             </FormLabel>
-            <InputGroup size='md'>
+            <InputGroup size='md' w="100%">
                 <Input
                     type="text"
                     name="first_name"
@@ -32,6 +32,7 @@ const NameInput = () => {
                     size="sm"
                     w="full"
                     rounded="md"
+                    pr="5.4rem"
                     value={state.cardName}
                     onChange={(e) => dispatch({ type: 'cardName', cardName: e.target.value.toUpperCase() })}
                 />
diff --git a/src/views/Generators/CardGenerator/components/StatsInput.tsx b/src/views/Generators/CardGenerator/components/StatsInput.tsx
index b8ebd1d..baa920c 100644
--- a/src/views/Generators/CardGenerator/components/StatsInput.tsx
+++ b/src/views/Generators/CardGenerator/components/StatsInput.tsx
@@ -13,7 +13,7 @@ import React, { useContext } from 'react'
 import CardContext from 'views/Generators/CardGenerator/context/CardContext';
 
 const InputMaker = ({ value, label, onChange }) => (
-    <FormControl as={GridItem} colSpan={[6, 3]}>
+    <FormControl>
         <FormLabel
             htmlFor="last_name"
             fontSize="sm"
@@ -22,6 +22,7 @@ const InputMaker = ({ value, label, onChange }) => (
             _dark={{
                 color: "gray.50",
             }}
+            mb={3}
         >
             {label}
         </FormLabel>
diff --git a/src/views/Generators/CardGenerator/variants/InstagramPostCardVariant.tsx b/src/views/Generators/CardGenerator/variants/InstagramPostCardVariant.tsx
index 2d87830..8e12c3b 100644
--- a/src/views/Generators/CardGenerator/variants/InstagramPostCardVariant.tsx
+++ b/src/views/Generators/CardGenerator/variants/InstagramPostCardVariant.tsx
@@ -3,12 +3,13 @@ import {
   Flex,
   Text
 } from '@chakra-ui/react'
-import SliderOpacity from 'Components/SliderOpacity';
 import React, { useContext, useState } from 'react'
-import { hexToRgb } from 'utils'
+
+import CardContext from '../context/CardContext'
 import CardView from '../components/CardView';
 import DownloadButton from '../components/DownloadButton';
-import CardContext from '../context/CardContext'
+import SliderOpacity from 'Components/SliderOpacity';
+import { hexToRgb } from 'utils'
 import { rarityArr } from '../Utils/RawData'
 
 const InstagramPostCardVariant = () => {
diff --git a/src/views/Generators/CardGenerator/variants/InstagramStoriesCardVariant.tsx b/src/views/Generators/CardGenerator/variants/InstagramStoriesCardVariant.tsx
index d83d8d7..3cd1de7 100644
--- a/src/views/Generators/CardGenerator/variants/InstagramStoriesCardVariant.tsx
+++ b/src/views/Generators/CardGenerator/variants/InstagramStoriesCardVariant.tsx
@@ -3,12 +3,13 @@ import {
   Flex,
   Text
 } from '@chakra-ui/react'
-import SliderOpacity from 'Components/SliderOpacity';
 import React, { useContext, useState } from 'react'
-import { hexToRgb } from 'utils'
+
+import CardContext from '../context/CardContext'
 import CardView from '../components/CardView';
 import DownloadButton from '../components/DownloadButton';
-import CardContext from '../context/CardContext'
+import SliderOpacity from 'Components/SliderOpacity';
+import { hexToRgb } from 'utils'
 import { rarityArr } from '../Utils/RawData'
 
 const InstagramCardVariant = () => {
@@ -50,9 +51,10 @@ const InstagramCardVariant = () => {
           justifyContent="center"
           alignItems="center"
           mx="auto"
-          id="instagram_stories"
+          userSelect="none"
         >
           <Box
+            id="instagram_stories"
             backgroundRepeat="no-repeat"
             backgroundSize="100%"
             position="absolute"
diff --git a/src/views/Home/Tools.tsx b/src/views/Home/Tools.tsx
index d4bb238..e677ab2 100644
--- a/src/views/Home/Tools.tsx
+++ b/src/views/Home/Tools.tsx
@@ -9,10 +9,10 @@ const Tools = () => {
 
         <CardBoxElement
           identifier="Generadores"
-          title="Cartas"
+          title="Cartas + Redes sociales"
           link="/generators/card"
           color="purple"
-          text="Beta V2"
+          text="Beta V3"
         />
 
         <CardBoxElement
@@ -31,13 +31,6 @@ const Tools = () => {
           text="Beta"
         />
 
-        <CardBoxElement
-          identifier="Generadores"
-          title="Post redes sociales"
-          color="red"
-          text="WIP"
-        />
-
         <CardBoxElement
           identifier="Generadores"
           title="Documento NDA"