style(perk list): updated style.

main.js

@@ -92,9 +92,9 @@ const createPopupWindow = async () => {
     show: false,
     frame: false,
     transparent: true,
-    width: isDev ? 800 : 400,
+    width: isDev ? 900 : 400,
     height: 600,
-    x: curDisplay.bounds.width - 400 - (isDev ? 0 : 200),
+    x: isDev ? curDisplay.bounds.width / 2 : curDisplay.bounds.width - 500,
     y: curDisplay.bounds.height / 2,
     webPreferences,
   });

src/app.js

@@ -82,8 +82,7 @@ const App = () => {
         }
 
         if (!championId) {
-          ipcRenderer.send(`hide-popup`);
-          return false;
+          throw new Error(`no active session.`)
         }
 
         console.log(`got champion id: `, championId);

src/components/perk-showcase/index.js

@@ -11,13 +11,19 @@ export default function PerkShowcase({ perk, onApply }) {
   const pId = selectedPerkIds.find(i => MainStyleIds[primaryStyleId].includes(+i));
 
   return <div className={s.item}>
-    <div className={s.info}>
+    <div className={s.preview}>
       <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.desc}>
+      <div>{perk.alias} @ {perk.position}</div>
+      <div className={s.detail}>
+        Pick count: {perk.pickCount} / Win ratio: {perk.wRate}%
+      </div>
+    </div>
+
     <div className={s.apply} onClick={onApply}>
       <Zap color={`#21A453`} size={36}/>
     </div>

src/components/perk-showcase/style.module.scss

@@ -6,21 +6,28 @@
 
   &:hover {
     background-color: #f6f6f6;
+  }
+
+  .desc {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 
-    .name {
-      display: none;
+    .detail {
+      font-size: 12px;
     }
   }
 
   .apply {
-    display: none;
     height: 48px;
     width: 48px;
     border-radius: 10px;
     //margin-right: 1em;
     justify-content: center;
     align-items: center;
     background: #ffffff;
+    -webkit-app-region: no-drag;
+    transition: all linear 0.2s;
 
     &:hover {
       cursor: pointer;
@@ -33,13 +40,13 @@
     }
   }
 
-  .info {
+  .preview {
     display: flex;
     align-items: center;
     width: max-content;
   }
 
-  .info > div {
+  .preview > div {
     height: 48px;
     width: 48px;
     border-radius: 50%;

src/modules/popup/index.js

@@ -51,7 +51,7 @@ export default function Popup() {
     lolqqInstance.getChampionPerks(champ.key, champ.id)
       .then(perks => {
         setPerkList(perks);
-        // console.log(`perks`, perks);
+        // console.log(perks)
       });
   }, [championId, championMap]);
 
@@ -71,14 +71,13 @@ export default function Popup() {
     }
 
     return perks
-      .map(i =>
-        i.map((p, idx) =>
-          <PerkShowcase
-            key={`${championId}-${idx}`}
-            perk={p}
-            onApply={() => apply(p)}
-          />,
-        ));
+      .map((p, idx) =>
+        <PerkShowcase
+          key={`${championId}-${idx}`}
+          perk={p}
+          onApply={() => apply(p)}
+        />,
+      );
   }, [championMap, perks, championId]);
 
   return <div className={s.list}>

src/modules/popup/style.module.scss

@@ -1,3 +1,8 @@
+body {
+  -webkit-user-select: none;
+  -webkit-app-region: drag;
+}
+
 .list {
   display: flex;
   flex-direction: column;

src/service/data-source/lol-qq.js

@@ -22,7 +22,7 @@ const API = {
 };
 
 const makePerkData = (perk, champion, position) => {
-  const { runes, winrate, showrate } = perk;
+  const { runes, winrate, igamecnt } = perk;
   const data = runes.reduce(({ primaryStyleId, subStyleId }, i) => {
     if (!primaryStyleId) {
       primaryStyleId = getStyleId(+i);
@@ -44,14 +44,14 @@ const makePerkData = (perk, champion, position) => {
     subStyleId: ``,
   });
 
-  const wRate = strToPercent(winrate);
-  const pRate = strToPercent(showrate);
-  data.name = `${champion}-${position}, win ${wRate}%, pick ${pRate}% [lol.qq.com]`;
+  const wRate = strToPercent(winrate, 1);
+
+  data.name = `${champion}-${position}, pick ${igamecnt} win ${wRate}% [lol.qq.com]`;
   data.selectedPerkIds = runes;
   data.alias = champion;
   data.position = position;
   data.wRate = wRate;
-  data.pRate = pRate;
+  data.pickCount = igamecnt;
   data.source = Sources.Lolqq;
 
   return data;
@@ -123,7 +123,7 @@ export default class LolQQ extends SourceProto {
       const { list: { championLane } } = parseCode(code);
 
       const perks = Object.values(championLane)
-        .map(l => {
+        .reduce((res, l) => {
           const perkDetail = parseJson(l.perkdetail);
           const position = l.lane;
           const pData = Object.values(perkDetail)
@@ -135,12 +135,14 @@ export default class LolQQ extends SourceProto {
               return result.concat(vals);
             }, []);
 
-          const byWinRate = _orderBy(pData, i => i.wincnt, [`desc`]);
-          const byPickRate = _orderBy(pData, i => i.igamecnt, [`desc`]);
-          return [...byWinRate.slice(0, 1), ...byPickRate.slice(0, 1)]
+          const sorted = _orderBy(pData, i => i.igamecnt, [`desc`]);
+          const pages = sorted
+            .slice(0, 2)
             .map(i => makePerkData(i, alias, position));
-        });
-      return perks;
+
+          return res.concat(pages)
+        }, []);
+      return _orderBy(perks, `pickCount`, [`desc`]);
     } catch (e) {
       throw new Error(e);
     }

src/service/utils.js

@@ -176,4 +176,4 @@ export const isDifferentStyleId = (a, b) => {
   return idA && idB && notSame;
 };
 
-export const strToPercent = str => (str / 100).toFixed(2);
+export const strToPercent = (str, decimal = 2) => (str / 100).toFixed(decimal);