Add stigmata pages

src/components/v2-pre/StigmaFigureImage.tsx

@@ -0,0 +1,78 @@
+import { Box, Flex, Image } from 'theme-ui'
+import { assetsBucketBaseUrl } from '../../lib/consts'
+
+interface StigmaFigureImageProps {
+  stigma: {
+    name: string
+    image: string
+  }
+  size?: number
+}
+
+const StigmaFigureImage = ({ size = 720, stigma }: StigmaFigureImageProps) => {
+  const ratio = size / 720
+
+  return (
+    <Box sx={{ width: size, height: size, position: 'relative' }}>
+      <Box
+        sx={{
+          position: 'absolute',
+          left: (size - 720) / 2,
+          top: (size - 720) / 2
+        }}
+      >
+        <Flex
+          sx={{
+            position: 'absolute',
+            width: 720,
+            height: 720,
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 1,
+            transform: `scale(${ratio})`
+          }}
+        >
+          <Image src={getStigmaFigureImageSrc(stigma.image)} />
+        </Flex>
+        <Flex
+          sx={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: 720,
+            height: 720,
+            alignItems: 'center',
+            justifyContent: 'center',
+            transform: `scale(${ratio})`
+          }}
+        >
+          <Image src={getStigmaFigureTattooImageSrc(stigma.image)} />
+        </Flex>
+      </Box>
+    </Box>
+  )
+  return (
+    <Box
+      sx={{
+        transform: 'scale(1)',
+        width: 720,
+        height: 720,
+        background: `no-repeat 50% url(${getStigmaFigureImageSrc(
+          stigma.image
+        )}), no-repeat 50% url(${getStigmaFigureTattooImageSrc(stigma.image)})`
+      }}
+    />
+  )
+}
+
+export default StigmaFigureImage
+
+function getStigmaFigureImageSrc(image: string) {
+  const [set, type] = image.split('_')
+  return `${assetsBucketBaseUrl}/raw/stigmatafigures/${set}_${type}.png`
+}
+
+function getStigmaFigureTattooImageSrc(image: string) {
+  const [set] = image.split('_')
+  return `${assetsBucketBaseUrl}/raw/stigmatafigures/${set}_Tattoo.png`
+}

src/components/v2-pre/StigmaIcon.tsx

@@ -0,0 +1,59 @@
+import { Box, Flex } from 'theme-ui'
+import { assetsBucketBaseUrl } from '../../lib/consts'
+import { repeat } from '../../lib/utils'
+
+interface StigmaIconProps {
+  icon: string
+  rarity?: number
+}
+
+const starSize = 16
+
+const StigmaIcon = ({ icon: fileName, rarity }: StigmaIconProps) => {
+  return (
+    <Box sx={{ width: 112 }}>
+      <Box
+        sx={{
+          borderRadius: 4,
+          width: (128 / 8) * 7,
+          height: (112 / 8) * 7,
+          background: ` no-repeat 100% 100% /100% url(${assetsBucketBaseUrl}/raw/stigmataicons/${fileName}.png), ${getBackgroundByRarity(
+            rarity
+          )}`
+        }}
+      />
+      {rarity != null && (
+        <Flex sx={{ marginTop: -starSize / 2, justifyContent: 'center', width: '100%' }}>
+          {repeat(rarity, index => (
+            <Box
+              key={index}
+              sx={{
+                width: starSize,
+                height: starSize,
+                background: `no-repeat 50% / 100% url(${assetsBucketBaseUrl}/raw-misc/StarBig.png)`
+              }}
+            />
+          ))}
+        </Flex>
+      )}
+    </Box>
+  )
+}
+
+export default StigmaIcon
+
+function getBackgroundByRarity(rarity?: number) {
+  switch (rarity) {
+    case 6:
+      return 'linear-gradient(180deg, #e18434, #fbd977)'
+    case 5:
+      return 'linear-gradient(transparent, #c86de0),#7630a3'
+    case 4:
+    case 3:
+      return 'linear-gradient(transparent, #0ec1eb), #2368b1'
+    case 2:
+      return `linear-gradient(transparent, #52c389),#31756c`
+    default:
+      return 'transparent'
+  }
+}

src/components/v2-pre/StigmaTypeIcon.tsx

@@ -0,0 +1,34 @@
+import { Box } from 'theme-ui'
+import { assetsBucketBaseUrl } from '../../lib/consts'
+import { StigmaType } from '../../lib/v2-pre/data/types'
+
+interface StigmaTypeIconProps {
+  type: StigmaType
+}
+
+const StigmaTypeIcon = ({ type }: StigmaTypeIconProps) => {
+  return (
+    <Box
+      sx={{
+        borderRadius: 5,
+        width: 30,
+        height: 30,
+        background: `no-repeat 50% 50% / 24px url(${assetsBucketBaseUrl}/raw/weapontypeicons/${getStigmaTypeIcon(
+          type
+        )}.png), #5a8cb0`
+      }}
+    ></Box>
+  )
+}
+export default StigmaTypeIcon
+
+function getStigmaTypeIcon(type: StigmaType) {
+  switch (type) {
+    case 'top':
+      return 'Up'
+    case 'mid':
+      return 'Middle'
+    case 'bot':
+      return 'Down'
+  }
+}