Add backend support for Hydra mount (#15482)

* chore: update time travelers shop to display seasonal backgrounds

* chore: update time travelers banner (note CSS borken rn)

* chore: fix borken CSS and update logic in shop

* chore: added isSubscribed function, not working

* chore: isSubscribed working but no bg for subscribers

* chore: logic and css updates

* chore: update habitica-images

* chore: add check for trinket

* chore: more time traveler shop logicking

* Add backend support for Hydra mount

- Add Dragon-Hydra to special mounts in stable.js
  - Configure as contributor level 7 reward with canFind: true
  - Add GIF format support for mount sprites
  - Enable admin panel granting capability

* Fix Vue template errors in timeTravelers component

* Fix duplicate template block in timeTravelers component

* add CSS for Hydra mount GIF sprites

Added CSS rules for Mount_Head_Dragon-Hydra and Mount_Body_Dragon-Hydra GIF sprites

* Remove the separate Hydra mount dimension declaration

---------

Co-authored-by: CuriousMagpie <eilatan@gmail.com>

website/client/src/assets/css/sprites.css

@@ -177,7 +177,7 @@
   height: 96px;
 }
 
-.Mount_Head_Gryphon-Gryphatrice, .Mount_Body_Gryphon-Gryphatrice {
+.Mount_Head_Gryphon-Gryphatrice, .Mount_Body_Gryphon-Gryphatrice, .Mount_Head_Dragon-Hydra, .Mount_Body_Dragon-Hydra {
   width: 135px;
   height: 135px;
 }
@@ -190,6 +190,14 @@
   background: url("https://habitica-assets.s3.amazonaws.com/mobileApp/images/BackerOnly-Mount-Body-Gryphatrice.gif") no-repeat;
 }
 
+.Mount_Head_Dragon-Hydra {
+  background: url("https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Dragon-Hydra.gif") no-repeat;
+}
+
+.Mount_Body_Dragon-Hydra {
+  background: url("https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Dragon-Hydra.gif") no-repeat;
+}
+
 .background_airship, .background_clocktower, .background_steamworks {
   width: 141px;
   height: 147px;

website/client/src/components/shops/timeTravelers/index.vue

@@ -154,7 +154,8 @@
           </template>
         </itemRows>
       </div>
-    </div><buyQuestModal
+    </div>
+    <buyQuestModal
       :item="selectedItemToBuy || {}"
       :price-type="selectedItemToBuy ? selectedItemToBuy.currency : ''"
       :with-pin="true"

website/common/script/content/constants/gifSprites.js

@@ -11,7 +11,9 @@ export default [
   'head_special_0',
   'head_special_1',
   'head_special_ks2019',
+  'Mount_Body_Dragon-Hydra',
   'Mount_Body_Gryphon-Gryphatrice',
+  'Mount_Head_Dragon-Hydra',
   'Mount_Head_Gryphon-Gryphatrice',
   'Pet_HatchingPotion_Cryptid',
   'Pet_HatchingPotion_Dessert',

website/common/script/content/stable.js

@@ -115,6 +115,7 @@ const canFindSpecial = {
     'Hippogriff-Hopeful': true,
 
     // Contributor/Backer pets
+    'Dragon-Hydra': true, // Contributor level 7
     'LionCub-Ethereal': false, // Backer tier 90
     'Jackalope-RoyalPurple': true, // subscription
     'Gryphon-Gryphatrice': false, // Pet once granted to kickstarter
@@ -152,6 +153,7 @@ const specialPets = {
 
 const specialMounts = {
   'BearCub-Polar': 'polarBear',
+  'Dragon-Hydra': 'hydra',
   'LionCub-Ethereal': 'etherealLion',
   'MantisShrimp-Base': 'mantisShrimp',
   'Turkey-Base': 'turkey',