Button and popup stylings

- added a new font RDRCatalogueBold to be used as the button text font
- collapsed some paragraphs in the legendary animal popup to reduce the overall height.This ensures that when the popup height exceeds the map boundary, Leaflet will reposition it, which may cause the top of popup to be outside the visible screen area

assets/js/animals.js

@@ -68,7 +68,7 @@ class Animal {
           <span class="marker-content-wrapper">
             <p>${description}</p>
           </span>
-          <button class="btn btn-default full-popup-width" data-text="map.remove"></button>
+          <button class="btn btn-info remove-button full-popup-width" data-text="map.remove"></button>
           <small>Latitude: ${this.marker.x} / Longitude: ${this.marker.y} / Start: ${this.marker.start} / End: ${this.marker.end}</small>
     `;
     Language.translateDom(snippet);

assets/js/bounties.js

@@ -69,7 +69,7 @@ class Bounty {
           <p class="property" data-text="menu.${marker.type}.min" data-property="min"></p>
           <!-- <p class="property" data-text="menu.${marker.type}.config" data-property="config"></p> -->
         </span>
-        <button class="btn btn-default full-popup-width" data-text="map.remove"></button>
+        <button class="btn btn-info remove-button full-popup-width" data-text="map.remove"></button>
         <small>Latitude: ${bounty.x} / Longitude: ${bounty.y} / Type: ${marker.type} / Text: ${marker.text}</small>
     `;
     Language.translateDom(snippet);

assets/js/camps.js

@@ -59,7 +59,7 @@ class Camp {
       <span class="marker-content-wrapper">
         <p>${description}</p>
       </span>
-      <button class="btn btn-default full-popup-width" data-text="map.remove"></button>
+      <button class="btn btn-info remove-button full-popup-width" data-text="map.remove"></button>
       <small>Latitude: ${_marker.x} / Longitude: ${_marker.y}</small>
     `;
     Language.translateDom(popup);

assets/js/events.js

@@ -76,7 +76,7 @@ class CondorEgg {
     popup.classList.add('handover-wrapper-with-no-influence');
     popup.innerHTML = `
         <h1 data-text="map.${this.text}.name"></h1>
-        <button class="btn btn-default full-popup-width" data-text="map.remove"></button>
+        <button class="btn btn-info remove-button full-popup-width" data-text="map.remove"></button>
     `;
     Language.translateDom(popup);
     popup.querySelector('button').addEventListener('click', () => CondorEgg.condorEggOnMap = false);
@@ -213,7 +213,7 @@ class Salvage {
     popup.innerHTML = `
         <h1 data-text="map.${this.text}.name"></h1>
         ${type ? `<p data-text="map.salvage.${type}.desc"></p>` : ''}
-        <button class="btn btn-default full-popup-width" data-text="map.remove"></button>
+        <button class="btn btn-info remove-button full-popup-width" data-text="map.remove"></button>
     `;
     Language.translateDom(popup);
     popup.querySelector('button').addEventListener('click', () => Salvage.salvageOnMap = false);

assets/js/gfh.js

@@ -70,7 +70,7 @@ class GunForHire {
           <br>
           <p data-text="map.gfh.missions_header"></p>
           ${missionsEl.outerHTML}
-          <button class="btn btn-default full-popup-width" data-text="map.remove"></button>
+          <button class="btn btn-info remove-button full-popup-width" data-text="map.remove"></button>
           ${Settings.isDebugEnabled ? debugDisplayLatLng.outerHTML : ''}
     `;
     Language.translateDom(snippet);

assets/js/language.js

@@ -100,6 +100,8 @@ const Language = {
   setMenuLanguage: function () {
     'use strict';
 
+    document.documentElement.setAttribute('lang', Settings.language);
+
     if (Language.data[Settings.language] === undefined) {
       const xhr = new XMLHttpRequest();
       xhr.open(

assets/js/legendary.js

@@ -114,9 +114,35 @@ class Legendary {
     snippet.innerHTML = `
         <img class="legendary-animal-popup-image" src="assets/images/icons/game/animals/legendaries/${this.text}.svg" alt="Animal">
         <h1 data-text="${this.text}"></h1>
-        <p class="legendary-cooldown-timer" data-text="map.legendary_animal_cooldown_end_time"></p>
-        <p data-text="${Language.get(this.text + '.desc')}"></p>
-        <br><p data-text="map.legendary_animal.desc"></p>
+        <div class="accordion accordion-flush" id="legendary-accordion">
+          <div class="accordion-item">
+            <h2 class="accordion-header">
+              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#legendary-collapse-cooldown" aria-expanded="true" aria-controls="legendary-collapse-cooldown">Cooldown end</button>
+            </h2>
+            <div id="legendary-collapse-cooldown" class="accordion-collapse collapse show" data-bs-parent="#legendary-accordion">
+              <div class="accordion-body">
+              </div>
+            </div>
+          </div>
+          <div class="accordion-item">
+            <h2 class="accordion-header">
+              <button class="accordion-button" type="button" data-text="map.user_pins.placeholder_desc" data-bs-toggle="collapse" data-bs-target="#legendary-collapse-desc" aria-expanded="true" aria-controls="legendary-collapse-desc">Description</button>
+            </h2>
+            <div id="legendary-collapse-desc" class="accordion-collapse collapse" data-bs-parent="#legendary-accordion">
+              <div class="accordion-body" data-text="${Language.get(this.text + '.desc')}">
+              </div>
+            </div>
+          </div>
+          <div class="accordion-item">
+            <h2 class="accordion-header">
+              <button class="accordion-button collapsed" type="button" data-text="map.tips" data-bs-toggle="collapse" data-bs-target="#legendary-collapse-tips" aria-expanded="false" aria-controls="legendary-collapse-tips">Tips</button>
+            </h2>
+            <div id="legendary-collapse-tips" class="accordion-collapse collapse" data-bs-parent="#legendary-accordion">
+              <div class="accordion-body" data-text="map.legendary_animal.desc">
+              </div>
+            </div>
+          </div>
+        </div>
         <span class="legendary-properties">
           <p class="legendary-spawn-time" data-text="map.legendary.spawn_time_string"></p>
           <p class="legendary-preferred-weather" data-text="map.legendary.preferred_weather"></p>
@@ -128,7 +154,7 @@ class Legendary {
           <p class="legendary-sample-value" data-text="map.legendary.sample_value"></p>
         </span>
         <button type="button" class="btn btn-info remove-button remove-animal-category" data-text="map.remove.animal_category"></button>
-        <button type="button" class="btn btn-info remove-button reset-animal-timer" data-text="map.reset_animal_timer"></button>
+        <button type="button" class="btn btn-info remove-button reset-animal-timer ${this.isGreyedOut ? 'active' : ''}" data-text="map.reset_animal_timer" aria-pressed="${this.isGreyedOut ? 'true' : ''}"></button>
         <button type="button" class="btn btn-info remove-button remove-animal" data-text="map.remove"></button>
     `;
     Language.translateDom(snippet);
@@ -144,19 +170,16 @@ class Legendary {
       p.textContent = propertyText;
     });
 
+    const cooldownBtn = snippet.querySelector('#legendary-collapse-cooldown').closest('.accordion-item').querySelector('button');
     if (this.isGreyedOut) {
-      const cooldownTimer = snippet.querySelector('.legendary-cooldown-timer');
-      cooldownTimer.textContent = Language.get(cooldownTimer.getAttribute('data-text'))
-        .replace('{timer}', () => {
-          const timeMilliseconds = +localStorage.getItem(this.animalSpeciesKey);
-          return new Date(timeMilliseconds)
-            .toLocaleString(Settings.language, {
-              weekday: 'long', day: 'numeric', month: 'short', hour: 'numeric', minute: '2-digit',
-            });
-        });
+      cooldownBtn.textContent = Language.get('map.legendary_animal_cooldown_end_time').split(/[:：]/)[0];
+      snippet.querySelector('#legendary-collapse-cooldown .accordion-body').textContent = new Date(
+        +localStorage.getItem(this.animalSpeciesKey)
+      ).toLocaleString(Settings.language, { weekday: 'long', day: 'numeric', month: 'short', hour: 'numeric', minute: '2-digit' });
     }
 
-    snippet.querySelector('.legendary-cooldown-timer').style.display = this.isGreyedOut ? '' : 'none';
+    snippet.querySelector('#legendary-collapse-desc').classList.toggle('show', !this.isGreyedOut);
+    cooldownBtn.style.display = this.isGreyedOut ? '' : 'none';
     const btnRemoveAnimalCategory = snippet.querySelector('button.remove-animal-category');
     btnRemoveAnimalCategory.style.display = !this.isGreyedOut ? '' : 'none';
     btnRemoveAnimalCategory.addEventListener('click', () => this.isGreyedOut = true);
@@ -167,12 +190,14 @@ class Legendary {
 
     return snippet;
   }
+
   static toggleAnimalSpecies(animalSpecies) {
     Legendary.animals.forEach(animal => {
       if (animal.species === animalSpecies)
         animal.reinitMarker();
     });
   }
+
   static checkSpawnTime() {
     const animalSpeciesSet = new Set();
     Legendary.animals.forEach(animal => {
@@ -192,6 +217,7 @@ class Legendary {
       });
     }, 2000);
   }
+
   set isGreyedOut(state) {
     if (state)
       localStorage.setItem(this.animalSpeciesKey, Date.now() + 259200000); // 259200000 ms = 72 hours
@@ -200,6 +226,7 @@ class Legendary {
 
     Legendary.toggleAnimalSpecies(this.species);
   }
+
   get isGreyedOut() {
     return !!localStorage.getItem(this.animalSpeciesKey);
   }
@@ -222,6 +249,7 @@ class Legendary {
   get onMap() {
     return !!localStorage.getItem(`rdo.${this._shownKey}`);
   }
+
   static onCategoryToggle() {
     Legendary.animals.forEach(animal => animal.onMap = animal.onMap);
   }

assets/js/marker.js

@@ -53,7 +53,7 @@ class Marker {
         <p>${this.description}</p>
       </span>
       <p></p>
-      <button class="btn btn-default full-popup-width" data-text="map.remove"></button>
+      <button class="btn btn-info remove-button full-popup-width" data-text="map.remove"></button>
       <small>Text: ${this.text} / Latitude: ${this.lat} / Longitude: ${this.lng}</small>
     `;
 

assets/js/menu.js

@@ -79,7 +79,7 @@ class Menu {
     });
     createInputContainer({
       key: 'map_zoom_delta',
-      min: 0, max: 2, value: Settings.zoomDelta, defaultValue: 0.5,
+      min: 0.1, max: 2, value: Settings.zoomDelta, defaultValue: 0.5,
       step: 0.1, isFloat: true,
     });
     createInputContainer({
@@ -95,8 +95,7 @@ class Menu {
 
     const reset = document.getElementById('reset-map-zoom');
     reset.addEventListener('click', () => {
-      const zoomSettings = ['map_zoom_snap', 'map_zoom_delta', 'map_wheel_debounce_time', 'map_wheel_px_per_zoom_level'
-      ].map((key) =>
+      const zoomSettings = ['map_zoom_snap', 'map_zoom_delta', 'map_wheel_debounce_time', 'map_wheel_px_per_zoom_level'].map((key) =>
         key
           .replace(/^map_/, '')
           .split('_')

assets/js/nazar.js

@@ -44,6 +44,9 @@ class MadamNazar {
       return;
 
     MadamNazar.layer.clearLayers();
+
+    document.querySelector('.nazar-error').classList.toggle('hidden', MadamNazar.currentLocation !== -1);
+
     const cl = MadamNazar.possibleLocations[MadamNazar.currentLocation];
 
     const shadow = Settings.isShadowsEnabled ? `<img class="shadow" width="${35 * Settings.markerSize}" height="${16 * Settings.markerSize}" src="./assets/images/markers-shadow.png" alt="Shadow">` : '';
@@ -82,7 +85,7 @@ class MadamNazar {
           <p style="text-align: center;">
             ${Language.get('map.madam_nazar.desc').replace('{link}', '<a href="https://twitter.com/MadamNazarIO" target="_blank">@MadamNazarIO</a>')}
           </p>
-          <button class="btn btn-default reload-nazar" data-text="menu.madam_nazar_reload_position"></button>
+          <button class="btn btn-success reload-nazar" data-text="menu.madam_nazar_reload_position"></button>
     `;
     Language.translateDom(popup);
     const buttonEl = popup.querySelector('button');

assets/js/plants.js

@@ -57,7 +57,7 @@ class Plants {
           <span class="marker-content-wrapper">
             <p>${description}</p>
           </span>
-          <button class="btn btn-default full-popup-width" data-text="map.remove"></button>
+          <button class="btn btn-info remove-button full-popup-width" data-text="map.remove"></button>
           <small>Latitude: ${_marker.x} / Longitude: ${_marker.y}</small>
     `;
     Language.translateDom(popup);

assets/js/scripts.js

@@ -285,11 +285,17 @@ backToTop.addEventListener('click', () => {
   }
 });
 
-sideMenu.addEventListener('touchend', e => {
-  if (e.target.classList.contains('btn-light'))
-    e.target.style.setProperty('--bs-btn-hover-bg', 'transparent');
-  e.stopImmediatePropagation();
-});
+sideMenu.addEventListener('touchend', event => {
+  const target = event.target;
+  const btnClasses = ['btn-light', 'btn-default'];
+  if (target.classList.contains('btn-light')) {
+    target.style.setProperty('border', '3px solid transparent');
+  }
+  if (btnClasses.some(cls => target.classList.contains(cls))) {
+    target.style.setProperty('filter', 'brightness(1)');
+  }
+  event.stopImmediatePropagation();
+}, true);
 
 //TODO: re-implement this function
 document.getElementById('show-all-markers').addEventListener('change', function () {

assets/js/treasures.js

@@ -96,8 +96,7 @@ class Treasure {
     snippet.classList.add('handover-wrapper-with-no-influence');
     snippet.innerHTML = `
         <h1 data-text="${this.text}"></h1>
-        <button type="button" class="btn btn-info remove-button" data-text="map.remove">
-          </button>
+        <button type="button" class="btn btn-info remove-button treasure-button" data-text="map.remove"></button>
     `;
     Language.translateDom(snippet);
     snippet.querySelector('button').addEventListener('click', () => this.onMap = false);