task stat selection UI updates

refactor allocation mode selection with selectList component & other UI tweaks

website/client/src/components/groups/questDetailModal.vue

@@ -218,13 +218,19 @@
     flex-direction: row;
     flex-wrap: wrap;
     gap: 0.5rem;
-
-    // somehow the browser felt like setting this 398px instead
-    // now its fixed to 400 :)
-    width: 400px;
-
+    max-width: 400px;
+    width: 100%;
     margin-bottom: 1.5rem;
 
+    @media (max-width: 589px) {
+      max-width: 100%;
+      justify-content: center;
+    }
+
+    @media (max-width: 353px) {
+      gap: 0.25rem;
+    }
+
     .quest-col {
       ::v-deep {
         .item-wrapper {
@@ -251,6 +257,28 @@
     ::v-deep & {
       .modal-dialog {
         width: 448px !important;
+        max-width: calc(100vw - 20px);
+        margin: 0.5rem auto;
+        display: flex;
+
+        @media (max-width: 468px) {
+          width: 100% !important;
+        }
+
+        @media (max-width: 353px) {
+          width: 100% !important;
+          margin: 0.25rem auto;
+        }
+      }
+
+      .modal-content {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+
+        @media (max-width: 300px) {
+          border-radius: 0;
+        }
       }
     }
 

website/client/src/components/secondaryMenu.vue

@@ -12,6 +12,12 @@
   box-shadow: 0 1px 2px 0 rgba($black, 0.2);
   z-index: 9;
   height: 3rem;
+  flex-wrap: wrap;
+
+  @media (max-width: 683px) {
+    height: auto;
+    min-height: 3rem;
+  }
 }
 
 .nav-link {
@@ -23,6 +29,19 @@
   padding: 0.75rem;
 
   color: $gray-50;
+  white-space: nowrap;
+
+  @media (max-width: 683px) {
+    padding: 0.5rem;
+    font-size: 13px;
+    flex: 1 1 auto;
+    min-width: fit-content;
+  }
+
+  @media (max-width: 576px) {
+    padding: 0.5rem 0.4rem;
+    font-size: 12px;
+  }
 
   &.active {
     color: $purple-300;

website/client/src/components/shops/buyModal.vue

@@ -269,7 +269,13 @@
 
     .modal-dialog {
       width: 448px;
+      max-width: calc(100vw - 20px);
       box-sizing: border-box;
+      display: flex;
+
+      @media (max-width: 468px) {
+        width: 100%;
+      }
     }
 
     .badge-dialog {
@@ -346,7 +352,23 @@
 
     .content {
       text-align: center;
-      width: 448px;
+      width: 100%;
+      max-width: 448px;
+      margin: 0 auto;
+
+      @media (max-width: 468px) {
+        max-width: 100%;
+      }
+    }
+
+    .modal-content {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      @media (max-width: 300px) {
+        border-radius: 0;
+      }
     }
 
     .item-wrapper {
@@ -564,7 +586,7 @@
 
     .limitedTime {
       height: 32px;
-      width: 446px;
+      width: 100%;
       font-size: 0.75rem;
       margin: 24px 0 0 0;
       background-color: $purple-300;

website/client/src/components/shops/market/sellModal.vue

@@ -111,6 +111,22 @@
 
     .modal-dialog {
       width: 448px;
+      max-width: calc(100vw - 20px);
+      display: flex;
+
+      @media (max-width: 468px) {
+        width: 100%;
+      }
+    }
+
+    .modal-content {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      @media (max-width: 300px) {
+        border-radius: 0;
+      }
     }
 
     .modal-body {

website/client/src/components/shops/quests/buyQuestModal.vue

@@ -163,8 +163,33 @@
     }
 
     .modal-dialog {
-      margin-top: 8%;
       width: 448px !important;
+      max-width: calc(100vw - 20px);
+      display: flex;
+
+      @media (max-width: 468px) {
+        width: 100% !important;
+        margin: 3rem auto 0.5rem;
+      }
+
+      @media (max-width: 353px) {
+        margin: 2.5rem auto 0.25rem;
+      }
+    }
+
+    .badge-dialog {
+      left: -8px;
+      top: -8px;
+    }
+
+    .modal-content {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      @media (max-width: 300px) {
+        border-radius: 0;
+      }
     }
 
     .content {

website/client/src/components/tasks/taskModal.vue

@@ -382,6 +382,45 @@
             </div>
           </div>
         </div>
+        <div
+          v-if="showStatAssignment"
+          class="stat-assignment option mt-3"
+        >
+          <div class="form-group row">
+            <label
+              v-once
+              class="col-12 mb-1"
+            >{{ $t('assignedStat') }}</label>
+            <div class="col-12">
+              <div class="stat-dropdown-container">
+                <select-list
+                  :items="statOptions"
+                  :value="task.attribute"
+                  key-prop="key"
+                  active-key-prop="key"
+                  @select="task.attribute = $event.key"
+                >
+                  <template #item="{ item, button }">
+                    <div class="stat-option-content">
+                      <span
+                        class="stat-option-title"
+                        :class="item.key"
+                      >
+                        {{ $t(item.label) }}
+                      </span>
+                      <span
+                        v-if="!button"
+                        class="stat-option-description"
+                      >
+                        {{ $t(item.description) }}
+                      </span>
+                    </div>
+                  </template>
+                </select-list>
+              </div>
+            </div>
+          </div>
+        </div>
         <div
           v-if="task.type === 'habit' && !groupId"
           class="option mt-3"
@@ -911,6 +950,87 @@
   .streak-addon path {
     fill: $gray-200;
   }
+
+  .stat-dropdown-container {
+    .select-list {
+      .selectListItem {
+        margin-bottom: 0;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .selectListItem .dropdown-item {
+        padding: 8px 16px !important;
+        height: auto !important;
+        white-space: normal;
+        word-wrap: break-word;
+
+        &:hover,
+        &:focus {
+          background-color: rgba($purple-600, 0.25) !important;
+        }
+      }
+
+      .dropdown-toggle {
+        display: flex;
+        align-items: center;
+
+        .stat-option-content {
+          display: flex;
+          align-items: center;
+
+          .stat-option-title {
+            font-weight: normal;
+            color: $gray-50;
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+
+    .stat-option-content {
+      display: block;
+      width: 100%;
+
+      .stat-option-title {
+        display: block;
+        font-family: Roboto;
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 1.71;
+        text-transform: capitalize;
+        margin-bottom: 4px;
+
+        &.str {
+          color: $maroon-100;
+        }
+
+        &.int {
+          color: $blue-50;
+        }
+
+        &.con {
+          color: $yellow-5;
+        }
+
+        &.per {
+          color: $purple-300;
+        }
+      }
+
+      .stat-option-description {
+        display: block;
+        font-family: Roboto;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        color: $gray-100;
+        margin-bottom: 0;
+      }
+    }
+  }
 </style>
 
 <style lang="scss" scoped>
@@ -1023,7 +1143,6 @@
   .input-group-outer.disabled .input-group-text {
     color: $gray-200;
   }
-
 </style>
 
 <script>
@@ -1038,6 +1157,7 @@ import SelectMulti from './modal-controls/selectMulti';
 import selectDifficulty from '@/components/tasks/modal-controls/selectDifficulty';
 import selectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
 import lockableLabel from '@/components/tasks/modal-controls/lockableLabel';
+import selectList from '@/components/ui/selectList';
 
 import syncTask from '../../mixins/syncTask';
 
@@ -1061,6 +1181,7 @@ export default {
     selectTranslatedArray,
     toggleCheckbox,
     lockableLabel,
+    selectList,
   },
   directives: {
     markdown: markdownDirective,
@@ -1094,6 +1215,12 @@ export default {
         con: 'constitution',
         per: 'perception',
       },
+      statOptions: [
+        { key: 'str', label: 'strength', description: 'strTaskText' },
+        { key: 'int', label: 'intelligence', description: 'intTaskText' },
+        { key: 'con', label: 'constitution', description: 'conTaskText' },
+        { key: 'per', label: 'perception', description: 'perTaskText' },
+      ],
       calendarHighlights: { dates: [new Date()] },
     };
   },
@@ -1187,6 +1314,12 @@ export default {
     selectedTags () {
       return this.getTagsFor(this.task);
     },
+    showStatAssignment () {
+      return this.task.type !== 'reward'
+        && !this.groupId
+        && this.user.preferences.automaticAllocation === true
+        && this.user.preferences.allocationMode === 'taskbased';
+    },
   },
   watch: {
     task () {

website/client/src/components/ui/selectList.vue

@@ -12,7 +12,7 @@
       <template #button-content>
         <slot
           name="item"
-          :item="selected || placeholder"
+          :item="selectedItem || placeholder"
           :button="true"
         >
           <!-- Fallback content -->
@@ -134,6 +134,14 @@ export default {
       }),
     };
   },
+  computed: {
+    selectedItem () {
+      if (this.activeKeyProp) {
+        return this.items.find(item => item[this.activeKeyProp] === this.selected);
+      }
+      return this.items.find(item => item === this.selected);
+    },
+  },
   methods: {
     getKeyProp (item) {
       return this.keyProp ? item[this.keyProp] : item.key || item.identifier;

website/common/locales/en/character.json

@@ -87,16 +87,20 @@
   "allocatePerPop": "Add a Point to Perception",
   "allocateInt": "Points allocated to Intelligence:",
   "allocateIntPop": "Add a Point to Intelligence",
-  "noMoreAllocate": "Now that you've hit level 100, you won't gain any more Stat Points. You can continue leveling up, or start a new adventure at level 1 by using the <a href='/shops/market'>Orb of Rebirth</a>!",
+  "noMoreAllocate": "Now that you've hit level 100, you won't gain any more Stat Points. You can continue leveling up, or start a new adventure at level 1 by using the <a href='/shops/market'>Orb of Rebirth</a>.",
   "stats": "Stats",
   "strength": "Strength",
   "strText": "Strength increases the chance of random \"critical hits\" and the Gold, Experience, and drop chance boost from them. It also helps deal damage to boss monsters.",
+  "strTaskText": "Increases critical hit chance and damage when scoring tasks. Also increases damage dealt to bosses.",
   "constitution": "Constitution",
   "conText": "Constitution reduces the damage you take from negative Habits and missed Dailies.",
+  "conTaskText": "Reduces damage taken from missed Dailies and negative Habits. Does not reduce damage from bosses.",
   "perception": "Perception",
   "perText": "Perception increases how much Gold you earn, and once you've unlocked the Market, increases the chance of finding items when scoring tasks.",
+  "perTaskText": "Increases item drop chance, daily item drop cap, task streak bonuses, and Gold earned when completing tasks.",
   "intelligence": "Intelligence",
   "intText": "Intelligence increases how much Experience you earn, and once you've unlocked Classes, determines your maximum Mana available for class abilities.",
+  "intTaskText": "Increases Exp earned from tasks. Also increases your mana cap and mana regeneration rate.",
   "levelBonus": "Level Bonus",
   "allocatedPoints": "Allocated Points",
   "allocated": "Allocated",
@@ -117,11 +121,12 @@
   "levelPopover": "Each level earns you one Point to assign to a Stat of your choice. You can do so manually, or let the game decide for you using one of the Automatic Allocation options.",
   "unallocated": "Unallocated Stat Points",
   "autoAllocation": "Automatic Allocation",
+  "autoAllocate": "Auto Allocate",
   "autoAllocationPop": "Places Points into Stats according to your preferences, when you level up.",
-  "evenAllocation": "Distribute Stat Points evenly",
-  "evenAllocationPop": "Assigns the same number of Points to each Stat.",
-  "classAllocation": "Distribute Points based on Class",
-  "classAllocationPop": "Assigns more Points to the Stats important to your Class.",
+  "evenAllocation": "Distribute Evenly",
+  "evenAllocationPop": "Assigns the same number of points to each attribute.",
+  "classAllocation": "Distribute based on Class",
+  "classAllocationPop": "Assigns more points to the attributes important to your Class.",
   "taskAllocation": "Distribute Points based on task activity",
   "taskAllocationPop": "Assigns Points based on the Strength, Intelligence, Constitution, and Perception categories associated with the tasks you complete.",
   "distributePoints": "Distribute Unallocated Points",
@@ -190,6 +195,10 @@
   "mainHand": "Main-Hand",
   "offHand": "Off-Hand",
   "statPoints": "Stat Points",
-  "pts": "pts",
-  "customizations": "Customizations"
+  "pointsAvailable": "Points Available",
+  "allocationMethod": "Allocation Method",
+  "statAllocationInfo": "Each level earns you one point to assign to a Stat of your choice. You can do so manually, or let the game decide for you using one of the Automatic Allocation options.",
+  "pts": "PTS",
+  "customizations": "Customizations",
+  "assignedStat": "Assigned Stat"
 }

website/common/locales/en/npc.json

@@ -104,7 +104,6 @@
   "success": "Success!",
   "classGear": "Class Gear",
   "classGearText": "Congratulations on choosing a class! I've added your new basic weapon to your inventory. Take a look below to equip it!",
-  "autoAllocate": "Auto Allocate",
   "spells": "Skills",
   "skillsTitle": "<%= classStr %> Skills",
   "toDo": "To Do",