fix player profile stats features

repeekgg · Oct 31, 2021 · 9b94471 · 9b94471
1 parent 99ed95a
commit 9b94471
Show file tree

Hide file tree

Showing 10 changed files with 380 additions and 298 deletions.
diff --git a/src/content/components/button.js b/src/content/components/button.js
@@ -0,0 +1,22 @@
+/** @jsx h */
+import { h } from 'dom-chef'
+
+export default ({ text, style = {}, ...props }) => (
+  <button
+    {...props}
+    style={{
+      background: '#484848',
+      border: 'none',
+      color: '#fff',
+      fontWeight: 'bold',
+      padding: '8px 16px',
+      borderRadius: 4,
+      textTransform: 'uppercase',
+      cursor: 'pointer',
+      ...style
+    }}
+    type="button"
+  >
+    {text}
+  </button>
+)
diff --git a/src/content/components/hr.js b/src/content/components/hr.js
@@ -1,4 +1,6 @@
 /** @jsx h */
 import { h } from 'dom-chef'
 
-export default () => <hr className="full-hr full-hr--md" />
+export default () => (
+  <div style={{ height: 1, background: '#303030', marginBottom: 32 }} />
+)
diff --git a/src/content/components/key-stat.js b/src/content/components/key-stat.js
@@ -2,8 +2,18 @@
 import { h } from 'dom-chef'
 
 export default ({ key, stat }) => (
-  <div className="key-stat well" style={{ height: '100%' }}>
-    <div className="key-stat__value text-gray">{stat}</div>
-    {key}
+  <div
+    style={{
+      flex: 1,
+      background: '#161616',
+      padding: 24,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }}
+  >
+    <div style={{ fontSize: 16, fontWeight: 'bold' }}>{stat}</div>
+    <div style={{ textTransform: 'uppercase' }}>{key}</div>
   </div>
 )
diff --git a/src/content/components/section-title.js b/src/content/components/section-title.js
@@ -2,5 +2,13 @@
 import { h } from 'dom-chef'
 
 export default ({ title }) => (
-  <h2 className="header-text-3 heading-border">{title}</h2>
+  <div
+    style={{
+      fontWeight: 'bold',
+      marginBottom: 16,
+      textTransform: 'uppercase'
+    }}
+  >
+    {title}
+  </div>
 )
diff --git a/src/content/features/add-player-profile-download-demo.js b/src/content/features/add-player-profile-download-demo.js
diff --git a/src/content/features/add-player-profile-extended-stats.js b/src/content/features/add-player-profile-extended-stats.js
@@ -17,15 +17,28 @@ import createHrElement from '../components/hr'
 const FEATURE_ATTRIBUTE = 'extended-stats'
 
 export default async parentElement => {
-  const profileElement = select('section.profile > div.profile', parentElement)
+  const playerProfileParasiteElement = select(
+    'parasite-player-profile-content',
+    parentElement
+  )
+
+  if (!playerProfileParasiteElement) {
+    return
+  }
+
+  const playerProfileElement = select(
+    '.sc-egCXko',
+    playerProfileParasiteElement.shadowRoot
+  )
 
   if (
-    !profileElement ||
-    hasFeatureAttribute(FEATURE_ATTRIBUTE, profileElement)
+    !playerProfileElement ||
+    playerProfileElement.children.length < 10 ||
+    hasFeatureAttribute(FEATURE_ATTRIBUTE, playerProfileElement)
   ) {
     return
   }
-  setFeatureAttribute(FEATURE_ATTRIBUTE, profileElement)
+  setFeatureAttribute(FEATURE_ATTRIBUTE, playerProfileElement)
 
   const nickname = getPlayerProfileNickname()
   const game = getPlayerProfileStatsGame()
@@ -47,67 +60,50 @@ export default async parentElement => {
   } = playerStats
 
   const statsElement = (
-    <section>
-      <div style={{ display: 'flex' }}>
-        <div style={{ flex: 2, 'margin-right': 15 }}>
+    <div style={{ marginBottom: 32 }}>
+      <div style={{ display: 'flex', gap: 16 }}>
+        <div style={{ flex: 2 }}>
           {createSectionTitleElement({ title: 'Last 20 Matches Statistics' })}
-          <div className="row flex flex-stretch">
-            <div className="col-lg-3 flex-column-stretch">
-              {createKeyStatElement({
-                key: 'Average Kills',
-                stat: averageKills
-              })}
-            </div>
-            <div className="col-lg-3 flex-column-stretch">
-              {createKeyStatElement({
-                key: 'Average Headshots %',
-                stat: averageHeadshots
-              })}
-            </div>
-            <div className="col-lg-3 flex-column-stretch">
-              {createKeyStatElement({
-                key: 'Average K/D',
-                stat: averageKDRatio
-              })}
-            </div>
-            <div className="col-lg-3 flex-column-stretch">
-              {createKeyStatElement({
-                key: 'Average K/R',
-                stat: averageKRRatio
-              })}
-            </div>
+          <div style={{ display: 'flex', gap: 16 }}>
+            {createKeyStatElement({
+              key: 'Average Kills',
+              stat: averageKills
+            })}
+            {createKeyStatElement({
+              key: 'Average Headshots %',
+              stat: averageHeadshots
+            })}
+            {createKeyStatElement({
+              key: 'Average K/D',
+              stat: averageKDRatio
+            })}
+            {createKeyStatElement({
+              key: 'Average K/R',
+              stat: averageKRRatio
+            })}
           </div>
           <div />
         </div>
-        <div style={{ flex: 1, 'margin-left': 15 }}>
+        <div style={{ flex: 1 }}>
           {createSectionTitleElement({ title: 'Other Statistics' })}
-          <div className="row flex flex-stretch">
-            <div className="col-lg-6 flex-column-stretch">
-              {createKeyStatElement({
-                key: 'AFK Times',
-                stat: afk
-              })}
-            </div>
-            <div className="col-lg-6 flex-column-stretch">
-              {createKeyStatElement({
-                key: 'Leave Times',
-                stat: leaver
-              })}
-            </div>
+          <div style={{ display: 'flex', gap: 16 }}>
+            {createKeyStatElement({
+              key: 'AFK Times',
+              stat: afk
+            })}
+            {createKeyStatElement({
+              key: 'Leave Times',
+              stat: leaver
+            })}
           </div>
         </div>
       </div>
-    </section>
+    </div>
   )
 
-  const mainStatisticsElements = select(
-    'h2[translate-once="MAIN-STATISTICS"]',
-    parentElement
-  ).parentElement
-
-  profileElement.insertBefore(statsElement, mainStatisticsElements.nextSibling)
+  const gamePreferencesElement = select('.sc-fCjnCc', playerProfileElement)
 
-  const HrElement = createHrElement()
+  playerProfileElement.insertBefore(statsElement, gamePreferencesElement)
 
-  profileElement.insertBefore(HrElement, statsElement)
+  playerProfileElement.insertBefore(createHrElement(), gamePreferencesElement)
 }