task stat selection UI updates

refactor allocation mode selection with selectList component & other UI tweaks

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",