chore: images now on cdn, logo reworked

.env.example → apps/website/.env.example

@@ -17,6 +17,9 @@ NUXT_SESSION_PASSWORD=""
 # WebSocket server with event messages
 NUXT_PUBLIC_WEBSOCKET_URL="ws://localhost:4200/api/websocket"
 
+# CDN or S3 bucket
+NUXT_PUBLIC_CDN_URL=""
+
 # Database
 DATABASE_URL=""
 

apps/website/app/components/MainLogo.vue

@@ -1,88 +1,71 @@
 <template>
   <ClientOnly>
-    <div v-if="$route.path === localePath('/')" class="logo" :style="{ backgroundImage: randomCharUrl }" />
-    <NuxtLink v-else :to="localePath('/')">
-      <div class="logo shake" :style="{ backgroundImage: randomCharUrl }" />
+    <div v-if="$route.path === localePath('/')" class="logo">
+      <img :src="randomCharImage" alt="" class="static-index">
+    </div>
+    <NuxtLink v-else :to="localePath('/')" class="logo">
+      <img :src="randomCharImage" alt="" class="static">
+      <img :src="randomCharAnimatedImage" alt="" class="animated">
     </NuxtLink>
   </ClientOnly>
 </template>
 
 <script setup lang="ts">
+const { public: publicEnv } = useRuntimeConfig()
 const localePath = useLocalePath()
 
 const characters = [
+  'shape',
+  'gentleman',
   'banana',
   'burger',
   'catchy',
-  'claw',
   'marshmallow',
-  'sharky',
   'twitchy',
   'wooly',
-  'woody',
   'pup',
 ]
 const randomChar = characters[Math.floor(Math.random() * characters.length)]
-const randomCharUrl = `url(/units/${randomChar}/128.png)`
+const randomCharImage = `${publicEnv.cdnUrl}/units/${randomChar}/128.png`
+const randomCharAnimatedImage = `${publicEnv.cdnUrl}/units/${randomChar}/idle.gif`
 </script>
 
 <style scoped>
-header {
-  padding: 0.5em 1em;
-  display: flex;
-  justify-content: space-between;
-  justify-items: center;
-  align-items: center;
+.logo {
+  width: 64px;
+  height: 64px;
+  margin-top: -22px;
+  transition: all 0.2s;
+  scale: 1.2;
 
-  @media (max-width: 768px) {
-    & {
-      padding: 0.5em 0.5em;
-    }
+  .static-index {
+    display: block;
+    width: 64px;
+    height: 64px;
   }
-}
-
-.left {
-  flex-grow: 1;
-  flex-basis: 0;
-  display: flex;
-  align-items: center;
 
-  a {
-    font-size: 0;
+  .static {
+    display: block;
+    width: 64px;
+    height: 64px;
   }
-}
 
-@keyframes skewRandom {
-  0% {
-    transform: skewX(0);
-  }
-  50% {
-    transform: skewX(-3deg);
-  }
-  75% {
-    transform: skewX(3deg);
+  .animated {
+    display: none;
+    width: 64px;
+    height: 64px;
   }
-  100% {
-    transform: skewX(0);
-  }
-}
 
-.logo {
-  width: 64px;
-  height: 64px;
-  margin-top: -14px;
-  transition: all 0.2s;
-  background-size: contain;
-  scale: 1.2;
+  &:hover {
+    scale: 1.3;
 
-  &:hover.shake {
-    animation-name: skewRandom;
-    animation-duration: 0.5s;
-    animation-iteration-count: infinite;
-    animation-timing-function: ease-in-out;
-    animation-direction: alternate-reverse;
-    transform-origin: 50% 50%;
-    scale: 1.1;
+    .static {
+      display: none;
+    }
+
+    .animated {
+      display: block;
+    }
   }
 }
 </style>

apps/website/app/components/MenuProfile.vue

@@ -5,7 +5,7 @@
       class="profile-avatar"
       @click="handleMenuClick"
     >
-      <img :src="user?.imageUrl ?? '/icons/twitch/112.png'" alt="">
+      <img :src="user?.imageUrl ?? defaultImage" alt="">
     </button>
     <a v-else class="twitch" href="/api/auth/twitch">Войти</a>
   </div>
@@ -14,10 +14,13 @@
 <script setup lang="ts">
 const { isFeedOpened } = useApp()
 const { loggedIn, user } = useUserSession()
+const { public: publicEnv } = useRuntimeConfig()
 
 function handleMenuClick() {
   isFeedOpened.value = !isFeedOpened.value
 }
+
+const defaultImage = `${publicEnv.cdnUrl}/icons/twitch/112.png`
 </script>
 
 <style scoped>

apps/website/app/pages/character/[id].vue

@@ -9,7 +9,7 @@
     </h2>
 
     <div class="unit-avatar">
-      <img :src="`/units/${character?.codename}/idle.gif`" alt="" class="game-canvas" width="256" height="256">
+      <img :src="`${publicEnv.cdnUrl}/units/${character?.codename}/idle.gif`" alt="" class="game-canvas" width="256" height="256">
     </div>
   </section>
 
@@ -146,7 +146,7 @@
       </p>
 
       <div v-for="post in posts" :key="post.id" class="post">
-        <img src="/units/twitchy/128.png" alt="" class="avatar">
+        <img :src="`${publicEnv.cdnUrl}/units/twitchy/128.png`" alt="" class="avatar">
         <div class="content">
           <div class="info">
             <div class="desc">
@@ -184,6 +184,7 @@ definePageMeta({
   },
 })
 
+const { public: publicEnv } = useRuntimeConfig()
 const localePath = useLocalePath()
 const route = useRoute()
 const { data: character } = await useFetch(`/api/character/${route.params.id}`)

apps/website/app/pages/character/index.vue

@@ -44,8 +44,8 @@
         class="cell"
       >
         <NuxtLink :to="localePath(`/character/${char.id}`)">
-          <img :src="`/units/${char.codename}/128.png`" alt="" class="avatar static">
-          <img :src="`/units/${char.codename}/idle.gif`" alt="" class="avatar animated">
+          <img :src="`${publicEnv.cdnUrl}/units/${char.codename}/128.png`" alt="" class="avatar static">
+          <img :src="`${publicEnv.cdnUrl}/units/${char.codename}/idle.gif`" alt="" class="avatar animated">
           <p class="nickname">
             {{ char.nickname }}
           </p>
@@ -77,6 +77,7 @@
 </template>
 
 <script setup lang="ts">
+const { public: publicEnv } = useRuntimeConfig()
 const localePath = useLocalePath()
 const { loggedIn, user } = useUserSession()
 const { data: profile } = await useFetch(`/api/profile/userName/${user.value?.userName}`)

apps/website/app/pages/coupon/index.vue

@@ -24,7 +24,7 @@
     <div class="block">
       <div v-for="coupon in coupons" :key="coupon.id" class="card">
         <div>
-          <img src="/units/twitchy/128.png" alt="" width="64" height="64">
+          <img :src="`${publicEnv.cdnUrl}/units/twitchy/128.png`" alt="" width="64" height="64">
           <div class="coupon">
             <img src="~/assets/img/icons/coupon/64.png" alt="" width="32" height="32">
           </div>
@@ -77,6 +77,7 @@
 </template>
 
 <script setup lang="ts">
+const { public: publicEnv } = useRuntimeConfig()
 const localePath = useLocalePath()
 const { data: coupons } = await useFetch('/api/coupon/latest')
 

apps/website/app/pages/p/[username].vue

@@ -29,7 +29,7 @@
     <h2>Профиль игрока <span class="profile-lvl">{{ pageProfile?.level }} уровня</span></h2>
 
     <div class="unit-avatar">
-      <img :src="`/units/${activeCharacter?.character.codename}/idle.gif`" alt="" class="game-canvas" width="256" height="256">
+      <img :src="`${publicEnv.cdnUrl}/units/${activeCharacter?.character.codename}/idle.gif`" alt="" class="game-canvas" width="256" height="256">
     </div>
 
     <div class="active-character">
@@ -112,8 +112,8 @@
     <div class="collection-block">
       <div v-for="char in pageProfile?.characterEditions" :key="char.id" class="cell" :class="{ active: char.id === activeCharacter?.id }">
         <NuxtLink :to="localePath(`/character/${char.character.id}`)">
-          <img :src="`/units/${char.character.codename}/128.png`" alt="" class="avatar static">
-          <img :src="`/units/${char.character.codename}/idle.gif`" alt="" class="avatar animated">
+          <img :src="`${publicEnv.cdnUrl}/units/${char.character.codename}/128.png`" alt="" class="avatar static">
+          <img :src="`${publicEnv.cdnUrl}/units/${char.character.codename}/idle.gif`" alt="" class="avatar animated">
           <p class="nickname">
             {{ char.character.nickname }}
           </p>
@@ -135,7 +135,7 @@
     <div class="collection-block">
       <div v-for="trophyEdition in trophies" :key="trophyEdition.id" class="cell" :data-rarity="trophyEdition.trophy.rarity">
         <NuxtLink :to="localePath(`/trophy/${trophyEdition.trophy.id}`)">
-          <img src="/trophies/default/64.png" alt="" width="64" height="64">
+          <img :src="`${publicEnv.cdnUrl}/trophies/default/64.png`" alt="" width="64" height="64">
           <div class="name">
             {{ trophyEdition.trophy.name }}
           </div>
@@ -177,6 +177,7 @@ definePageMeta({
   },
 })
 
+const { public: publicEnv } = useRuntimeConfig()
 const localePath = useLocalePath()
 const route = useRoute()
 const { data: pageProfile } = await useFetch(`/api/profile/userName/${route.params.username}`)

apps/website/app/pages/quest/[id].vue

@@ -20,7 +20,7 @@
           <p>Награда:</p>
           <div class="rewards">
             <div class="reward">
-              <img src="/trophies/default/64.png" alt="" width="28" height="28">
+              <img :src="`${publicEnv.cdnUrl}/trophies/default/64.png`" alt="" width="28" height="28">
               Трофей
             </div>
           </div>
@@ -52,7 +52,7 @@
     <div class="block">
       <div v-for="edition in quest?.editions" :key="edition.id" class="card">
         <div>
-          <img src="/units/twitchy/128.png" alt="" width="64" height="64">
+          <img :src="`${publicEnv.cdnUrl}/units/twitchy/128.png`" alt="" width="64" height="64">
         </div>
         <div>
           <NuxtLink :to="localePath(`/p/${edition.profile.userName}`)">
@@ -75,6 +75,7 @@ definePageMeta({
   },
 })
 
+const { public: publicEnv } = useRuntimeConfig()
 const localePath = useLocalePath()
 const route = useRoute()
 const { data: quest } = await useFetch(`/api/quest/${route.params.id}`)

apps/website/app/pages/quest/index.vue

@@ -15,7 +15,7 @@
             <p>Награда:</p>
             <div class="rewards">
               <div class="reward">
-                <img src="/trophies/default/64.png" alt="" width="28" height="28">
+                <img :src="`${publicEnv.cdnUrl}/trophies/default/64.png`" alt="" width="28" height="28">
                 Трофей
               </div>
             </div>
@@ -34,6 +34,7 @@
 </template>
 
 <script setup lang="ts">
+const { public: publicEnv } = useRuntimeConfig()
 const localePath = useLocalePath()
 const { user } = useUserSession()
 const { data: questsForProfile } = await useFetch(`/api/quest/profileId/${user.value?.id}`)

apps/website/app/pages/shop/index.vue

@@ -139,7 +139,7 @@
           </div>
 
           <div class="gentleman">
-            <img src="/units/gentleman/idle.gif" alt="" width="98" height="98">
+            <img :src="`${publicEnv.cdnUrl}/units/gentleman/idle.gif`" alt="" width="98" height="98">
             <div>Уникальный персонаж: Джентельмен</div>
           </div>
 
@@ -164,6 +164,10 @@
   </section>
 </template>
 
+<script setup lang="ts">
+const { public: publicEnv } = useRuntimeConfig()
+</script>
+
 <style scoped>
   .shop {
     max-width: 56em;

apps/website/app/pages/trophy/[id].vue

@@ -17,7 +17,7 @@
       </div>
       <div class="completion">
         <div class="trophy">
-          <img src="/trophies/default/64.png" alt="" width="64" height="64">
+          <img :src="`${publicEnv.cdnUrl}/trophies/default/64.png`" alt="" width="64" height="64">
         </div>
         <div>
           <p class="points">
@@ -40,7 +40,7 @@
     <div class="block">
       <div v-for="progress in latestProfiles" :key="progress.id" class="card">
         <div>
-          <img src="/units/twitchy/128.png" alt="" width="64" height="64">
+          <img :src="`${publicEnv.cdnUrl}/units/twitchy/128.png`" alt="" width="64" height="64">
         </div>
         <div>
           <NuxtLink :to="localePath(`/p/${progress.profile.userName}`)">
@@ -61,6 +61,7 @@ definePageMeta({
   },
 })
 
+const { public: publicEnv } = useRuntimeConfig()
 const localePath = useLocalePath()
 const route = useRoute()
 const { data: trophy } = await useFetch(`/api/trophy/${route.params.id}`)

apps/website/app/pages/trophy/index.vue

@@ -14,7 +14,7 @@
     <div class="trophies">
       <div v-for="trophy in readyTrophies" :key="trophy.id" class="cell" :data-rarity="trophy.rarity">
         <NuxtLink :to="localePath(`/trophy/${trophy.id}`)">
-          <img src="/trophies/default/64.png" alt="" width="64" height="64">
+          <img :src="`${publicEnv.cdnUrl}/trophies/default/64.png`" alt="" width="64" height="64">
           <div class="name">
             {{ trophy.name }}
           </div>
@@ -32,7 +32,7 @@
     <div class="trophies">
       <div v-for="trophy in inWorkTrophies" :key="trophy.id" class="cell" :data-rarity="trophy.rarity">
         <NuxtLink :to="localePath(`/trophy/${trophy.id}`)">
-          <img src="/trophies/default/64.png" alt="" width="64" height="64">
+          <img :src="`${publicEnv.cdnUrl}/trophies/default/64.png`" alt="" width="64" height="64">
           <div class="name">
             {{ trophy.name }}
           </div>
@@ -46,6 +46,7 @@
 </template>
 
 <script setup lang="ts">
+const { public: publicEnv } = useRuntimeConfig()
 const localePath = useLocalePath()
 const { data: trophies } = await useFetch('/api/trophy/')
 const readyTrophies = trophies.value?.filter((t) => t.isReady)

apps/website/nuxt.config.ts

@@ -34,6 +34,7 @@ export default defineNuxtConfig({
     public: {
       signInRedirectUrl: '', // NUXT_PUBLIC_SIGN_IN_REDIRECT_URL
       websocketUrl: '', // NUXT_PUBLIC_WEBSOCKET_URL
+      cdnUrl: '', // NUXT_PUBLIC_CDN_URL
     },
   },
   i18n: {