Add elf pages

src/components/v2-pre/ElfIcon.tsx

@@ -0,0 +1,20 @@
+import { assetsBucketBaseUrl } from '../../lib/consts'
+import ResizedImage from './ResizedImage'
+
+interface ElfIconProps {
+  icon: string
+}
+
+const ElfIcon = ({ icon }: ElfIconProps) => {
+  return (
+    <ResizedImage
+      src={`${assetsBucketBaseUrl}/raw/elfcardicons/${icon}.png`}
+      originalHeight={120}
+      originalWidth={140}
+      ratio={0.8}
+      alignItems="end"
+    />
+  )
+}
+
+export default ElfIcon

src/components/v2-pre/RarityBar.tsx

@@ -0,0 +1,29 @@
+import { Box, Flex } from 'theme-ui'
+import { assetsBucketBaseUrl } from '../../lib/consts'
+import { repeat } from '../../lib/utils'
+
+interface RarityBarProps {
+  rarity: number
+}
+
+const starSize = 16
+
+const RarityBar = ({ rarity }: RarityBarProps) => {
+  return (
+    <Flex sx={{ marginTop: -starSize / 2, justifyContent: 'center', width: '100%' }}>
+      {repeat(rarity, index => (
+        <Box
+          key={index}
+          sx={{
+            width: starSize,
+            height: starSize,
+            zIndex: 1,
+            background: `no-repeat 50% / 100% url(${assetsBucketBaseUrl}/raw-misc/StarBig.png)`
+          }}
+        />
+      ))}
+    </Flex>
+  )
+}
+
+export default RarityBar

src/components/v2-pre/ResizedImage.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable jsx-a11y/alt-text */
+import { Box, Flex, Image } from 'theme-ui'
+
+interface ResizedImageProps {
+  src: string | string[]
+  originalWidth: number
+  originalHeight: number
+  ratio?: number
+  alignItems?: string
+}
+
+const ResizedImage = ({ src, originalWidth, originalHeight, ratio = 1, alignItems = 'center' }: ResizedImageProps) => {
+  if (typeof src === 'string') {
+    src = [src]
+  }
+  const targetWidth = originalWidth * ratio
+  const targetHeight = originalHeight * ratio
+  return (
+    <Box sx={{ width: targetWidth, height: targetHeight, position: 'relative' }}>
+      <Box
+        sx={{
+          position: 'absolute',
+          left: (targetWidth - originalWidth) / 2,
+          top: (targetHeight - originalHeight) / 2
+        }}
+      >
+        {src.map((aSrc, index) => {
+          return (
+            <Flex
+              key={index}
+              sx={{
+                position: 'absolute',
+                width: originalWidth,
+                height: originalHeight,
+                alignItems: 'center',
+                justifyContent: 'center',
+                zIndex: 1,
+                transform: `scale(${ratio})`
+              }}
+            >
+              <Image src={aSrc} />
+            </Flex>
+          )
+        })}
+      </Box>
+    </Box>
+  )
+}
+
+export default ResizedImage

src/components/v2-pre/WeaponIcon.tsx

@@ -1,14 +1,12 @@
-import { Box, Flex } from 'theme-ui'
+import { Box } from 'theme-ui'
 import { assetsBucketBaseUrl } from '../../lib/consts'
-import { repeat } from '../../lib/utils'
+import RarityBar from './RarityBar'
 
 interface WeaponIconProps {
   icon: string
   rarity?: number
 }
 
-const starSize = 16
-
 const WeaponIcon = ({ icon: fileName, rarity }: WeaponIconProps) => {
   return (
     <Box sx={{ width: 112 }}>
@@ -22,20 +20,7 @@ const WeaponIcon = ({ icon: fileName, rarity }: WeaponIconProps) => {
           )}`
         }}
       />
-      {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>
-      )}
+      {rarity != null && <RarityBar rarity={rarity} />}
     </Box>
   )
 }