champ background

src/game/hud/InGameHUD.js

@@ -45,6 +45,7 @@ export default class InGameHUD {
             return {
               name: group.name,
               image: AssetManager.getAsset(group.image)?.path,
+              background: group.background,
               spells: group.spells
                 .map(SpellClass => ({
                   spellInstance: new SpellClass(null),
@@ -61,6 +62,7 @@ export default class InGameHUD {
                 }),
             };
           }),
+          backgroundPicker: null,
         };
       },
       methods: {
@@ -110,6 +112,12 @@ export default class InGameHUD {
           this.spellHover = null;
           // }, 250);
         },
+        mouseoverGroup(group, event) {
+          if (group.background) this.backgroundPicker = group.background;
+        },
+        mouseoutGroup() {
+          this.backgroundPicker = null;
+        },
         showPreview(spellProxy, show) {
           try {
             let s = Vue.toRaw(spellProxy.instance);
@@ -130,7 +138,7 @@ export default class InGameHUD {
           });
         },
       },
-      template: `
+      template: /*html*/ `
       <div>
         <div v-if="spellHover" class="spell-info" :style="'bottom:'+spellInfo.bottom+';left:'+spellInfo.left">
             <div class="header">
@@ -142,7 +150,7 @@ export default class InGameHUD {
             </div>
             <p class="body" v-html="spellHover.description"></p>
         </div>
-      
+
         <div v-if="avatar && spells && buffs" class="bottom-HUD">
             <div class="champion-avatar">
                 <img :src="avatar" alt="champion-avatar" :style="isDead ? 'filter: grayscale(100%)' : ''">
@@ -153,7 +161,7 @@ export default class InGameHUD {
                 <div class="spells">
                     <div v-for="(spell, index) of spells" :class="spell.small ? 'spell small' : 'spell'"
                         @click="changeSpell(index)"
-                        @mouseover="mouseover(spell, $event)" 
+                        @mouseover="mouseover(spell, $event)"
                         @mouseout="mouseout(spell, $event)">
                         <img :src="spell.image" alt="spell"
                             :style="(spell.disabled || spell.showCoolDown || !spell.canCast) ? 'filter: grayscale(100%)' : ''" />
@@ -189,19 +197,27 @@ export default class InGameHUD {
         </div>
 
         <div v-if="showSpellsPicker" class="spell-picker">
+            <img
+              alt="background"
+              class="background-picker"
+              :src="backgroundPicker"
+            />
             <button class="close-btn" @click="closeSpellPicker()">
               <i class="fa-solid fa-xmark"></i>
             </button>
             <p class="title">Chọn chiêu thức</p>
             <div class="list">
-              <div class="group" v-for="group of spellGroups">
+              <div
+                class="group"
+                v-for="group of spellGroups"
+                @mouseover="mouseoverGroup(group, $event)">
                 <div class="group-header">
                   <img v-if="group.image" :src="group.image" alt="spell" />
                   <p>{{group.name}}</p>
                 </div>
-                <div v-for="spell of group.spells" class="spell" 
+                <div v-for="spell of group.spells" class="spell"
                   @click="pick(spell, $event)"
-                  @mouseover="mouseover(spell, $event)" 
+                  @mouseover="mouseover(spell, $event)"
                   @mouseout="mouseout(spell, $event)">
                     <img :src="spell.image" alt="spell" />
                 </div>

src/game/preset.js

@@ -34,78 +34,93 @@ export const SpellGroups = [
   {
     name: 'Yasuo',
     image: 'champ_yasuo',
+    background: '/assets/images/champions/background/yasuo.png',
     spells: [AllSpells.Yasuo_Q, AllSpells.Yasuo_W, AllSpells.Yasuo_E, AllSpells.Yasuo_R],
   },
   {
     name: 'Shaco',
     image: 'champ_shaco',
+    background: '/assets/images/champions/background/shaco.png',
     spells: [AllSpells.Shaco_Q, AllSpells.Shaco_W, AllSpells.Shaco_E, AllSpells.Shaco_R],
   },
   {
     name: 'Ahri',
     image: 'champ_ahri',
+    background: '/assets/images/champions/background/ahri.png',
     spells: [AllSpells.Ahri_Q, AllSpells.Ahri_W, AllSpells.Ahri_E, AllSpells.Ahri_R],
   },
   {
     name: 'Lee Sin',
     image: 'champ_leesin',
+    background: '/assets/images/champions/background/leesin.png',
     spells: [AllSpells.LeeSin_Q, AllSpells.LeeSin_E, AllSpells.LeeSin_R],
   },
   {
     name: 'Blitzcrank',
     image: 'champ_blitzcrank',
+    background: '/assets/images/champions/background/blitzcrank.png',
     spells: [AllSpells.Blitzcrank_Q, AllSpells.Blitzcrank_W, AllSpells.Blitzcrank_R],
   },
   {
     name: 'Lux',
     image: 'champ_lux',
+    background: '/assets/images/champions/background/lux.png',
     spells: [AllSpells.Lux_Q, AllSpells.Lux_E, AllSpells.Lux_R],
   },
   {
     name: 'Ashe',
     image: 'champ_ashe',
+    background: '/assets/images/champions/background/ashe.png',
     spells: [AllSpells.Ashe_W, AllSpells.Ashe_R],
   },
   {
     name: "Cho'Gath",
     image: 'champ_chogath',
+    background: '/assets/images/champions/background/chogath.png',
     spells: [AllSpells.ChoGath_Q, AllSpells.ChoGath_W],
   },
   {
     name: 'Leblanc',
     image: 'champ_leblanc',
+    background: '/assets/images/champions/background/leblanc.png',
     spells: [AllSpells.Leblanc_W, AllSpells.Leblanc_E],
   },
   {
     name: 'Malphite',
     image: 'champ_malphite',
+    background: '/assets/images/champions/background/malphite.png',
     spells: [AllSpells.Malphite_R],
   },
   {
     name: 'Olaf',
     image: 'champ_olaf',
+    background: '/assets/images/champions/background/olaf.png',
     spells: [AllSpells.Olaf_Q],
   },
 
   {
     name: 'Teemo',
     image: 'champ_teemo',
+    background: '/assets/images/champions/background/teemo.png',
     spells: [AllSpells.Teemo_R],
   },
   {
     name: 'Veigar',
     image: 'champ_veigar',
+    background: '/assets/images/champions/background/veigar.png',
     spells: [AllSpells.Veigar_E],
   },
 
   {
     name: 'Zed',
     image: 'champ_zed',
+    background: '/assets/images/champions/background/zed.png',
     spells: [AllSpells.Zed_W],
   },
   {
     name: 'Graves',
     image: 'champ_graves',
+    background: '/assets/images/champions/background/graves.png',
     spells: [AllSpells.Graves_W],
   },
   {

styles/hud.css

@@ -361,4 +361,16 @@
 
 .spell-picker .group:hover .group-header p {
     color: #eee;
-}
+}
+
+.background-picker {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    filter: blur(3px);
+    opacity: 0.2;
+    object-fit: cover;
+}