feat: perk showcase.

cangzhang · Apr 14, 2020 · 0cce43a · 0cce43a
1 parent b0626d7
commit 0cce43a
Show file tree

Hide file tree

Showing 8 changed files with 172 additions and 94 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "champ-r",
-  "version": "0.9.0-pre.3",
+  "version": "0.9.0-pre.5",
   "license": "MIT",
   "description": "Get champion items for lol, Windows only.",
   "productName": "ChampR",

diff --git a/src/components/perk-showcase/index.js b/src/components/perk-showcase/index.js
@@ -2,16 +2,24 @@ import s from './style.module.scss';
 
 import React from 'react';
 import cn from 'classnames';
+import { Zap } from 'react-feather';
 
 import { MainStyleIds } from 'src/share/constants/runes';
 
-export default function PerkShowcase({ perk }) {
+export default function PerkShowcase({ perk, onApply }) {
   const { primaryStyleId, subStyleId, selectedPerkIds } = perk;
-  const pId = selectedPerkIds.find(i => MainStyleIds[primaryStyleId].includes(+i))
+  const pId = selectedPerkIds.find(i => MainStyleIds[primaryStyleId].includes(+i));
 
   return <div className={s.item}>
-    <div className={cn(s.primary, s[primaryStyleId])} />
-    <div className={cn(s[pId])} />
-    <div className={cn(s.sub, s[subStyleId])} />
+    <div className={s.info}>
+      <div className={cn(s.primary, s[primaryStyleId])} />
+      <div className={cn(s[pId], s.big)} />
+      <div className={cn(s.sub, s[subStyleId])} />
+    </div>
+
+    <div className={s.name}>{perk.alias} @ {perk.position}</div>
+    <div className={s.apply} onClick={onApply}>
+      <Zap color={`#21A453`} size={36}/>
+    </div>
   </div>;
 }
diff --git a/src/components/perk-showcase/style.module.scss b/src/components/perk-showcase/style.module.scss
@@ -1,16 +1,60 @@
 .item {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1ex 1em 1ex 2ex;
 
-  div {
-    height: 4em;
-    width: 4em;
+  &:hover {
+    background-color: #f6f6f6;
+
+    .name {
+      display: none;
+    }
+  }
+
+  .apply {
+    display: none;
+    height: 48px;
+    width: 48px;
+    border-radius: 10px;
+    //margin-right: 1em;
+    justify-content: center;
+    align-items: center;
+    background: #ffffff;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  &:hover {
+    .apply {
+      display: flex;
+    }
+  }
+
+  .info {
+    display: flex;
+    align-items: center;
+    width: max-content;
+  }
+
+  .info > div {
+    height: 48px;
+    width: 48px;
+    border-radius: 50%;
     background-size: contain;
     background-repeat: no-repeat;
 
+    &.big {
+      margin: 0 1ex;
+      background-color: #000000;
+    }
+
     &.sub,
     &.primary {
-      height: 2em;
-      width: 2em;
+      height: 24px;
+      width: 24px;
     }
 
     &.8000 {

diff --git a/src/modules/popup/index.js b/src/modules/popup/index.js
@@ -52,12 +52,11 @@ export default function Popup() {
     if (!champ)
       return;
 
-    console.log(champ);
     const lolqqInstance = new LolQQ();
     lolqqInstance.getChampionPerks(champ.key, champ.id)
       .then(perks => {
         setPerkList(perks);
-        console.log(perks);
+        // console.log(`perks`, perks);
       });
   }, [championId, championMap]);
 
@@ -69,25 +68,23 @@ export default function Popup() {
       ...perk,
       name: `${perk.alias} @ ${perk.position}`,
     });
-    console.log(`updated perk`, res);
+    console.info(`updated perk`, res);
   };
 
   const renderList = useCallback(() => {
     if (!championMap || !perks.length) {
-      return <div>loading...</div>;
+      return <div className={s.loading}>loading...</div>;
     }
 
     return perks
-      .map((i, $idx) =>
+      .map(i =>
         i.map((p, idx) =>
-          <div key={`${championId}-${idx}`}>
-            <PerkShowcase perk={p} key={`${$idx}-${idx}`} />
-
-            <p>{p.name}</p>
-            <p>{p.primaryStyleId}, {p.subStyleId}</p>
-            <p>{p.selectedPerkIds.join(`, `)}</p>
-            <button onClick={() => apply(p)}>apply</button>
-          </div>));
+          <PerkShowcase
+            key={`${championId}-${idx}`}
+            perk={p}
+            onApply={() => apply(p)}
+          />,
+        ));
   }, [championMap, perks, championId]);
 
   return <div className={s.list}>

diff --git a/src/modules/popup/style.module.scss b/src/modules/popup/style.module.scss
@@ -1,8 +1,17 @@
 .list {
   display: flex;
   flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+    'Helvetica Neue', sans-serif;
 }
 
 .item {
   display: flex;
 }
+
+.loading {
+  position: fixed;
+  top: 40vh;
+  left: 50vw;
+  transform: translate(-50%);
+}
diff --git a/src/service/data-source/lol-qq.js b/src/service/data-source/lol-qq.js
@@ -25,13 +25,13 @@ const makePerkData = (perk, champion, position) => {
   const { runes, winrate, showrate } = perk;
   const data = runes.reduce(({ primaryStyleId, subStyleId }, i) => {
     if (!primaryStyleId) {
-      primaryStyleId = getStyleId(i);
+      primaryStyleId = getStyleId(+i);
     }
 
     if (primaryStyleId && !subStyleId) {
-      const isStyleId = isDifferentStyleId(primaryStyleId, i);
+      const isStyleId = isDifferentStyleId(+primaryStyleId, +i);
       if (isStyleId) {
-        subStyleId = getStyleId(i);
+        subStyleId = getStyleId(+i);
       }
     }
 

diff --git a/src/service/utils.js b/src/service/utils.js
@@ -3,6 +3,7 @@ import _sortBy from 'lodash/sortBy';
 import cheerio from 'cheerio';
 import { CancelToken } from 'axios';
 
+import { flatRunes } from 'src/share/constants/runes';
 import http from './http';
 
 const RequestLocale = `en-US`;
@@ -147,7 +148,21 @@ export const parseJson = str => {
   }
 };
 
-export const getStyleId = i => i.replace(/\d{2}$/, `00`);
+export const getStyleId = i => {
+  let result = null;
+  for (const [mId, ids] of flatRunes) {
+    if (+i === +mId) {
+      result = +i;
+      break;
+    }
+
+    if (ids.includes(+i)) {
+      result = +mId;
+      break;
+    }
+  }
+  return result;
+};
 
 export const isDifferentStyleId = (a, b) => {
   if (!a || !b) {
@@ -156,8 +171,9 @@ export const isDifferentStyleId = (a, b) => {
 
   const idA = getStyleId(a);
   const idB = getStyleId(b);
-  const res = Math.abs(idA - idB);
-  return res >= 100 && res < 1000;
+  const notSame = idA !== idB;
+
+  return idA && idB && notSame;
 };
 
 export const strToPercent = str => (str / 100).toFixed(2);
diff --git a/src/share/constants/runes.js b/src/share/constants/runes.js
@@ -1,88 +1,88 @@
 export const Precision = {
   8000: [
-    '8005',
-    '8008',
-    '8021',
-    '8010',
-    '9101',
-    '9111',
-    '8009',
-    '9104',
-    '9105',
-    '9103',
-    '8014',
-    '8017',
-    '8299',
+    8005,
+    8008,
+    8021,
+    8010,
+    9101,
+    9111,
+    8009,
+    9104,
+    9105,
+    9103,
+    8014,
+    8017,
+    8299,
   ],
 };
 
 export const Domination = {
   8100: [
-    '8112',
-    '8124',
-    '8128',
-    '9923',
-    '8126',
-    '8139',
-    '8143',
-    '8136',
-    '8120',
-    '8138',
-    '8135',
-    '8134',
-    '8105',
-    '8106',
+    8112,
+    8124,
+    8128,
+    9923,
+    8126,
+    8139,
+    8143,
+    8136,
+    8120,
+    8138,
+    8135,
+    8134,
+    8105,
+    8106,
   ],
 };
 
 export const Sorcery = {
   8200: [
-    '8214',
-    '8229',
-    '8230',
-    '8224',
-    '8226',
-    '8275',
-    '8210',
-    '8234',
-    '8233',
-    '8237',
-    '8232',
-    '8236',
+    8214,
+    8229,
+    8230,
+    8224,
+    8226,
+    8275,
+    8210,
+    8234,
+    8233,
+    8237,
+    8232,
+    8236,
   ],
 };
 
 export const Whimsy = {
   8300: [
-    '8351',
-    '8360',
-    '8358',
-    '8306',
-    '8304',
-    '8313',
-    '8321',
-    '8316',
-    '8345',
-    '8347',
-    '8410',
-    '8352',
+    8351,
+    8360,
+    8358,
+    8306,
+    8304,
+    8313,
+    8321,
+    8316,
+    8345,
+    8347,
+    8410,
+    8352,
   ],
 };
 
 export const Resolve = {
   8400: [
-    '8437',
-    '8439',
-    '8465',
-    '8446',
-    '8463',
-    '8401',
-    '8429',
-    '8444',
-    '8473',
-    '8451',
-    '8453',
-    '8242',
+    8437,
+    8439,
+    8465,
+    8446,
+    8463,
+    8401,
+    8429,
+    8444,
+    8473,
+    8451,
+    8453,
+    8242,
   ],
 };
 
@@ -116,10 +116,14 @@ export const MainStyleIds = {
   ],
 };
 
-export default {
+const RuneMap = {
   ...Precision,
   ...Domination,
   ...Sorcery,
   ...Whimsy,
   ...Resolve,
 };
+
+export const flatRunes = Object.entries(RuneMap);
+
+export default RuneMap;