Merge pull request #33 from fabd/feature/update-new-runewords

Feature/update new runewords
fabd · Apr 28, 2022 · 3665fca · 3665fca
2 parents 85a2cf7 + eb95883
commit 3665fca
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 32 deletions.
diff --git a/src/assets/sass/main.scss b/src/assets/sass/main.scss
@@ -273,16 +273,25 @@ object {
   // runeword title
   &-tdTitle {
     @apply p-0;
-  }
-  &-tdTitleSpan {
-    @apply inline-block px-[5px] py-[7px]; // increase the mouseover area
 
-    color: #74726c;
+    &Span {
+      @apply inline-block px-[5px] py-[7px]; // increase the mouseover area
 
-    font-size: 1rem;
+      color: #74726c;
 
-    &:hover {
-      color: #b9b6ac;
+      font-size: 1rem;
+
+      &:hover {
+        color: #b9b6ac;
+      }
+    }
+
+    // optional DII patch number to distinguish recent changes
+    &Patch {
+      @apply rounded-sm text-xs leading-1 ml-1;
+      padding: 2px 4px 2px;
+      background-color: #71B643;
+      color: #000;
     }
   }
 
@@ -321,7 +330,7 @@ object {
   }
 
   // additional info in the item type, shown below item types in smaller text
-  &-tdType em {
+  &-tdTypeClass {
     @apply block mt-1 text-[0.9em];
     color: #bd8547;
   }
@@ -379,20 +388,11 @@ object {
 .rw-Md {
   // the `ladder` tag shown next to Runeword names
   &-ladder {
-    background: #444444;
+    background-color: #444;
     color: #9f9f9f;
-    border-radius: 1rem;
-    font-variant: small-caps;
-    font-size: 0.8em;
-    padding: 0.2em 0.4em;
-    @apply ml-1;
-  }
-
-  // annotation under item type, eg. "(small shields)"
-  &-small {
-    @apply block;
-    font-size: 0.9em;
-    color: #666;
+    border-radius: 100%;
+    padding: 1px 5px;
+    @apply ml-1 leading-1 text-xs;
   }
 
   // required class under item type (Character Class)

diff --git a/src/components/RunewordsTable.vue b/src/components/RunewordsTable.vue
@@ -61,7 +61,8 @@
               @mouseleave="onLeaveRuneword()"
               @click="onEnterRuneword($event, item)"
             >{{ item.title }}</span>
-            <span v-if="item.ladder" class="rw-Md-ladder">L</span>
+            <span v-if="item.ladder" class="rw-Md-ladder" title="Ladder Only">L</span>
+            <span v-if="item.version" class="rw-Table-tdTitlePatch" title="Patch version">{{ item.version }}</span>
 
             <div
               v-if="pinnedRunewords.has(item.title)"
@@ -258,7 +259,11 @@ export default defineComponent({
           return typeHtml;
         })
         .join("&nbsp;/&nbsp;");
-      if (word.tinfos) cellHtml += `<br><em>${word.tinfos}</em>`;
+
+      if (word.tinfos) {
+        cellHtml += `<br><span class="rw-Table-tdTypeClass">${word.tinfos}</span>`;
+      }
+
       return cellHtml;
     },
 

diff --git a/src/data/runewords.ts b/src/data/runewords.ts
@@ -510,49 +510,56 @@ const runewords: TRuneword[] = [
     runes: ["Cham", "Shael", "Um"],
     level: 67,
     ttypes: ["Swords", "Claws", "Daggers"],
-    tinfos: "(Patch 2.4)",
+    ladder: true,
+    version: '2.4',
   },
   {
     title: "Pattern",
     runes: ["Tal", "Ort", "Thul"],
     level: 23,
     ttypes: ["Claws"],
-    tinfos: "(Patch 2.4)",
+    ladder: true,
+    version: '2.4',
   },
   {
     title: "Unbending Will",
     runes: ["Fal", "Io", "Ith", "Eld", "El", "Hel"],
     level: 41,
     ttypes: ["Swords"],
-    tinfos: "(Patch 2.4)",
+    ladder: true,
+    version: '2.4',
   },
   {
     title: "Wisdom",
     runes: ["Pul", "Ith", "Eld"],
     level: 45,
     ttypes: ["Helms"],
-    tinfos: "(Patch 2.4)",
+    ladder: true,
+    version: '2.4',
   },
   {
     title: "Obsession",
     runes: ["Zod", "Ist", "Lem", "Lum", "Io", "Nef"],
     level: 69,
     ttypes: ["Staves"],
-    tinfos: "(Patch 2.4)",
+    ladder: true,
+    version: '2.4',
   },
   {
     title: "Flickering Flame",
     runes: ["Nef", "Pul", "Vex"],
     level: 55,
     ttypes: ["Helms"],
-    tinfos: "(Patch 2.4)",
+    ladder: true,
+    version: '2.4',
   },
   {
     title: "Mist",
     runes: ["Cham", "Shael", "Gul", "Thul", "Ith"],
     level: 67,
     ttypes: ["Missile Weapons"],
-    tinfos: "(Patch 2.4)",
+    ladder: true,
+    version: '2.4',
   },
 ];
 

diff --git a/src/types/main.d.ts b/src/types/main.d.ts
@@ -68,8 +68,9 @@ type TRuneword = {
   runes: TRuneId[];
   level: number;
   ttypes: TItemTypeId[];
-  ladder?: boolean;
-  tinfos?: string;
+  ladder?: boolean; // display "ladder only" icon next to runeword name
+  tinfos?: string; // optional `(subtext)` shown in Item Type column
+  version?: string; // optional patch version eg `2.4` tag shown next to runeword name
 };
 
 type TRunewordMeta = {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -14,11 +14,26 @@ module.exports = {
       },
     },
 
+    // redeclare to remove the baked-in line-height, and add `md` alias
+    fontSize: {
+      xs: "0.75rem", // 12px
+      sm: "0.875rem", // 14px
+      base: "1rem",
+      lg: "1.125rem", // 18px
+
+      // alias for `text-base`
+      md: "1rem", // 16px
+    },
+
     extend: {
       fontSize: {
         // alias for `text-base`
         md: "1rem",
       },
+
+      lineHeight: {
+        1: 1, // alias for `leading-none`
+      },
     },
   },