fix border radius on app icons (#38)

src/components/FeaturedGames.vue

@@ -13,39 +13,39 @@ setInterval(() => {
     class=" ease-in relative mx-auto lg:absolute flex-[0_0_auto] max-w-[310px] xxs:max-w-[460px] w-[469px] left-auto lg:top-[-40%] h-[535px] right-[0] bottom-0 "
   >
     <img
-      :class="`breath-long shadow-2xl z-50 h-[82px] w-[82px] xxs:h-[100px] xxs:w-[100px] absolute left-[22px] top-[6%] xxs:left-[66px] xxs:top-[4%] right-auto bottom-auto animate-hover-short ${shuffledFeaturedGames[0].classes}`"
+      class="breath-long shadow-2xl z-50 h-[82px] w-[82px] xxs:h-[100px] xxs:w-[100px] absolute left-[22px] top-[6%] xxs:left-[66px] xxs:top-[4%] right-auto bottom-auto animate-hover-short rounded-[22%]"
       :src="shuffledFeaturedGames[0].link" :alt="shuffledFeaturedGames[0].name" :title="shuffledFeaturedGames[0].name"
     >
     <img
-      :class="`breath-long shadow-2xl z-50 h-[100px] w-[100px] xxs:h-[144px] xxs:w-[144px] absolute left-auto top-0 right-[60px] xxs:right-[49px] bottom-auto animate-hover-medium ${shuffledFeaturedGames[1].classes}`"
+      class="breath-long shadow-2xl z-50 h-[100px] w-[100px] xxs:h-[144px] xxs:w-[144px] absolute left-auto top-0 right-[60px] xxs:right-[49px] bottom-auto animate-hover-medium rounded-[22%]"
       :src="shuffledFeaturedGames[1].link" :alt="shuffledFeaturedGames[1].name" :title="shuffledFeaturedGames[1].name"
     >
     <img
-      :class="`breath-long shadow-2xl z-50 h-[90px] w-[90px] xxs:h-[124px] xxs:w-[124x] absolute left-auto xxs:w-auto top-[28%] xxs:top-[32%] right-[-3%] bottom-0 animate-hover-long ${shuffledFeaturedGames[2].classes}`"
+      class="breath-long shadow-2xl z-50 h-[90px] w-[90px] xxs:h-[124px] xxs:w-[124x] absolute left-auto xxs:w-auto top-[28%] xxs:top-[32%] right-[-3%] bottom-0 animate-hover-long rounded-[22%]"
       :src="shuffledFeaturedGames[2].link" :alt="shuffledFeaturedGames[2].name" :title="shuffledFeaturedGames[2].name"
     >
     <img
-      :class="`breath-long shadow-2xl z-50 h-[125px] w-[125px] xxs:h-[182px] xxs:w-[182px] absolute left-[-2%] xxs:left-0 top-[27%] xxs:top-[31%] right-auto bottom-[29%] animate-hover-medium ${shuffledFeaturedGames[3].classes}`"
+      class="breath-long shadow-2xl z-50 h-[125px] w-[125px] xxs:h-[182px] xxs:w-[182px] absolute left-[-2%] xxs:left-0 top-[27%] xxs:top-[31%] right-auto bottom-[29%] animate-hover-medium rounded-[22%]"
       :src="shuffledFeaturedGames[3].link" :alt="shuffledFeaturedGames[3].name" :title="shuffledFeaturedGames[3].name"
     >
     <img
-      :class="`breath-long shadow-2xl z-50 h-[70px] w-[70px] xxs:h-[90px] xxs:w-[90px] absolute left-[8%] xxs:left-[15%] top-auto right-auto bottom-[31%] xxs:bottom-[10%] animate-hover-short ${shuffledFeaturedGames[4].classes}`"
+      class="breath-long shadow-2xl z-50 h-[70px] w-[70px] xxs:h-[90px] xxs:w-[90px] absolute left-[8%] xxs:left-[15%] top-auto right-auto bottom-[31%] xxs:bottom-[10%] animate-hover-short rounded-[22%]"
       :src="shuffledFeaturedGames[4].link" :alt="shuffledFeaturedGames[4].name" :title="shuffledFeaturedGames[4].name"
     >
     <img
-      :class="`breath-long shadow-2xl z-50 h-[85px] w-[85px] xxs:h-[110px] xxs:w-[110px] absolute left-[41%] xxs:left-[44%] top-auto right-auto bottom-[40%] xxs:bottom-[23%] animate-hover-long ${shuffledFeaturedGames[5].classes}`"
+      class="breath-long shadow-2xl z-50 h-[85px] w-[85px] xxs:h-[110px] xxs:w-[110px] absolute left-[41%] xxs:left-[44%] top-auto right-auto bottom-[40%] xxs:bottom-[23%] animate-hover-long rounded-[22%]"
       :src="shuffledFeaturedGames[5].link" :alt="shuffledFeaturedGames[5].name" :title="shuffledFeaturedGames[5].name"
     >
     <img
-      :class="`breath-long shadow-2xl z-50 h-[75px] w-[75px] xxs:h-[84px] xxs:w-[84px] absolute left-auto top-auto right-0 xxs:right-[6%] bottom-[34%] xxs:bottom-[8%] animate-hover-short ${shuffledFeaturedGames[6].classes}`"
+      class="breath-long shadow-2xl z-50 h-[75px] w-[75px] xxs:h-[84px] xxs:w-[84px] absolute left-auto top-auto right-0 xxs:right-[6%] bottom-[34%] xxs:bottom-[8%] animate-hover-short rounded-[22%]"
       :src="shuffledFeaturedGames[6].link" :alt="shuffledFeaturedGames[6].name" :title="shuffledFeaturedGames[6].name"
     >
     <img
-      :class="`breath-long shadow-2xl z-50 h-[100px] w-[100px] absolute left-[34%] xxs:left-[42%] top-auto right-0 bottom-[18%] xxs:bottom-0 animate-hover-medium ${shuffledFeaturedGames[7].classes}`"
+      class="breath-long shadow-2xl z-50 h-[100px] w-[100px] absolute left-[34%] xxs:left-[42%] top-auto right-0 bottom-[18%] xxs:bottom-0 animate-hover-medium rounded-[22%]"
       :src="shuffledFeaturedGames[7].link" :alt="shuffledFeaturedGames[7].name" :title="shuffledFeaturedGames[7].name"
     >
     <img
-      :class="`breath-long shadow-2xl z-50 h-[65px] w-[65px] xxs:h-[75px] xxs:w-[75px] absolute left-auto top-[25%] xxs:top-[35%] right-[34%] bottom-[33%] animate-hover-long ${shuffledFeaturedGames[8].classes}`"
+      class="breath-long shadow-2xl z-50 h-[65px] w-[65px] xxs:h-[75px] xxs:w-[75px] absolute left-auto top-[25%] xxs:top-[35%] right-[34%] bottom-[33%] animate-hover-long rounded-[22%]"
       :src="shuffledFeaturedGames[8].link" :alt="shuffledFeaturedGames[8].name" :title="shuffledFeaturedGames[8].name"
     >
   </div>

src/utils/statics.ts

@@ -2,47 +2,38 @@ const featuredGames = [
   {
     name: 'Genshin Impact',
     link: 'https://is4-ssl.mzstatic.com/image/thumb/Purple112/v4/19/65/ec/1965ec30-c2f0-60e8-53ef-796c9d918cd9/AppIcon-1x_U007emarketing-0-7-0-0-85-220.png/246x0w.webp',
-    classes: 'rounded-xl',
   },
   {
     name: 'Diablo Immortal',
     link: 'https://is5-ssl.mzstatic.com/image/thumb/Purple122/v4/27/b7/87/27b7872b-2cd4-be39-a931-8f7c114fbe41/AppIcon-1x_U007emarketing-0-10-0-85-220.png/246x0w.webp',
-    classes: 'rounded-xl',
   },
   {
     name: 'Lineage 2M',
     link: 'https://is3-ssl.mzstatic.com/image/thumb/Purple122/v4/f1/43/03/f1430319-f919-20ad-752a-84fb1ed98efb/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/246x0w.webp',
-    classes: 'rounded-xl',
   },
   {
     name: 'Shadow Fight Arena',
     link: 'https://is2-ssl.mzstatic.com/image/thumb/Purple112/v4/71/3a/70/713a70ae-e824-21e8-9a21-58f46bd075b7/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/246x0w.webp',
-    classes: 'rounded-xl',
   },
   {
     name: 'LoL: Wild Rift',
     link: 'https://is1-ssl.mzstatic.com/image/thumb/Purple122/v4/17/aa/85/17aa85d7-9b6a-2e3a-5ce8-48ca038034f3/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/246x0w.webp',
-    classes: 'rounded-xl',
   },
   {
     name: 'Honkai Impact 3rd',
     link: 'https://is3-ssl.mzstatic.com/image/thumb/Purple122/v4/e5/78/4c/e5784c43-a932-5718-41e5-31f88d652de3/AppIcon-1x_U007emarketing-0-9-0-0-85-220.png/460x0w.webp',
-    classes: 'rounded-xl',
   },
   {
     name: 'Wild Arena Survivors',
     link: 'https://is3-ssl.mzstatic.com/image/thumb/Purple112/v4/55/a1/b5/55a1b53b-a77b-fa63-48a2-bc580e318374/AppIcon-1x_U007emarketing-0-7-0-85-220.png/246x0w.webp',
-    classes: 'rounded-[21%]',
   },
   {
     name: 'Vainglory',
     link: 'https://is4-ssl.mzstatic.com/image/thumb/Purple122/v4/cb/77/36/cb773669-2223-ed03-1cfd-cdcc93c16f5e/AppIcon-1x_U007emarketing-0-9-0-85-220.png/246x0w.webp',
-    classes: 'rounded-xl',
   },
   {
     name: 'Rocket League Sideswipe',
     link: 'https://is5-ssl.mzstatic.com/image/thumb/Purple112/v4/31/44/7b/31447b8b-6489-354b-e0db-34c957d50019/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/246x0w.webp',
-    classes: 'rounded-xl',
   },
 ];