Merge pull request #5 from Gaohaoyang/develop

Develop

README.md

@@ -44,6 +44,10 @@ Donation methods:
 
 - Github Sponsors
   - https://github.com/sponsors/Gaohaoyang
+
+- <i>Interac</i> e-Transfer
+  - gaohaoyang126@outlook.com
+
 - Paypal
 
   - [PayPal Donation Link](https://www.paypal.com/donate/?business=NB2D3UXSQKDKU&no_recurring=0&item_name=Thanks+for+your+support%21+I+really+appreciate+it.+Have+a+great+day%21&currency_code=CAD)
@@ -58,4 +62,7 @@ Donation methods:
 
   <img src="https://cdn.jsdelivr.net/gh/Gaohaoyang/pics/pte/Alipay.png" width="250"/>
 
+- Buy Me a Coffee
+  - https://buymeacoffee.com/gaohaoyangh
+
 Enjoy it! :smile:

package.json

@@ -1,7 +1,7 @@
 {
   "name": "pte-crx",
   "private": true,
-  "version": "1.2.0",
+  "version": "1.2.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,7 +13,8 @@
     "clsx": "^2.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-draggable": "^4.4.6"
+    "react-draggable": "^4.4.6",
+    "react-icons": "^5.3.0"
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "2.0.0-beta.25",

src/ContentUI/index.tsx

@@ -4,6 +4,13 @@ import { PTEDataType } from '../type/PTEDataType'
 import ProgressBar from './ProgressBar'
 import clsx from 'clsx'
 import Draggable from 'react-draggable'
+import {
+  PiBookOpenUser,
+  PiHeadphones,
+  PiPenNib,
+  PiChatsCircle,
+} from 'react-icons/pi'
+import { VscGithubInverted } from 'react-icons/vsc'
 
 const ContentUI = () => {
   const [scoresComparison, setScoresComparison] = useState<
@@ -22,7 +29,13 @@ const ContentUI = () => {
     }[]
   >([])
   const [skillsProfile, setSkillsProfile] = useState<
-    Array<{ key: string; name: string; score: number; skills: string[] }>
+    Array<{
+      key: string
+      name: string
+      score: number
+      skills: string[]
+      support: Array<'Listening' | 'Reading' | 'Speaking' | 'Writing'>
+    }>
   >([])
   const [minimize, setMinimize] = useState(true)
   const [showContent, setShowContent] = useState(false)
@@ -154,11 +167,12 @@ const ContentUI = () => {
       name: string
       score: number
       skills: string[]
+      support: Array<'Listening' | 'Reading' | 'Speaking' | 'Writing'>
     }> = []
     for (const key in pteData.skillsProfile) {
       if (Object.prototype.hasOwnProperty.call(pteData.skillsProfile, key)) {
-        // @ts-expect-error this is a number
-        const element: number = pteData.skillsProfile[key]
+        const element: number =
+          pteData.skillsProfile[key as keyof typeof pteData.skillsProfile]
         let showName = key
         if (key === 'openResponseSpeakingWriting') {
           showName = 'Open Response Speaking and Writing'
@@ -182,8 +196,9 @@ const ContentUI = () => {
           key,
           name: showName,
           score: element,
-          // @ts-expect-error err
-          skills: skillsAnalysis[key],
+          skills: skillsAnalysis[key as keyof typeof skillsAnalysis].component,
+          support: skillsAnalysis[key as keyof typeof skillsAnalysis]
+            .support as Array<'Listening' | 'Reading' | 'Speaking' | 'Writing'>,
         })
       }
     }
@@ -216,7 +231,7 @@ const ContentUI = () => {
               'relative box-border flex flex-col overflow-auto rounded-xl bg-sky-50 text-sm text-slate-900 shadow-cyan-950/55 transition-all',
               minimize
                 ? 'h-6 w-6 overflow-hidden p-0'
-                : 'h-[576px] max-h-[71vh] w-[554px] p-4',
+                : 'h-[574px] max-h-[71vh] w-[564px] p-4',
               dragging ? 'scale-[1.02] shadow-2xl' : 'scale-100 shadow-md',
             )}
           >
@@ -248,15 +263,40 @@ const ContentUI = () => {
                 )}
               </div>
             </strong>
-            <div className="mt-1 text-base font-bold">Score</div>
+            <div className="mt-1 flex items-center justify-between text-base font-bold">
+              Score
+              <a href="https://github.com/Gaohaoyang/pte-crx" target="_blank">
+                <VscGithubInverted className="text-slate-300 transition-all duration-300 hover:scale-110 hover:cursor-pointer hover:text-slate-900" />
+              </a>
+            </div>
             <table className="mt-1 w-full border-collapse border-y-2 border-slate-400 text-center">
               <thead className="border-b border-slate-400">
                 <tr>
                   <th className="border-r border-slate-400"></th>
-                  <th className="px-2">Listening</th>
-                  <th className="px-2">Reading</th>
-                  <th className="px-2">Speaking</th>
-                  <th className="px-2">Writing</th>
+                  <th className="px-2">
+                    <div className="flex flex-col items-center justify-center">
+                      <div className="text-xs">Listening</div>
+                      <PiHeadphones className="text-slate-600" />
+                    </div>
+                  </th>
+                  <th className="px-2">
+                    <div className="flex flex-col items-center justify-center">
+                      <div className="text-xs">Reading</div>
+                      <PiBookOpenUser className="text-slate-600" />
+                    </div>
+                  </th>
+                  <th className="px-2">
+                    <div className="flex flex-col items-center justify-center">
+                      <div className="text-xs">Speaking</div>
+                      <PiChatsCircle className="text-slate-600" />
+                    </div>
+                  </th>
+                  <th className="px-2">
+                    <div className="flex flex-col items-center justify-center">
+                      <div className="text-xs">Writing</div>
+                      <PiPenNib className="text-slate-600" />
+                    </div>
+                  </th>
                   <th className="border-l border-slate-400 px-2">Total</th>
                 </tr>
               </thead>
@@ -325,8 +365,8 @@ const ContentUI = () => {
               {skillsProfile.map((skill) => (
                 <div key={skill.key} className="mb-3">
                   <div className="flex items-center justify-between">
-                    <div className="text-slate-700">{skill.name}</div>
-                    <div className="mb-[1px] ml-4 flex items-center justify-end">
+                    <div className="text-xs text-slate-700">{skill.name}</div>
+                    <div className="ml-1 flex items-center justify-end">
                       <div className="">{skill.skills.join(', ')}</div>
                       <div
                         className={clsx(
@@ -340,18 +380,36 @@ const ContentUI = () => {
                       >
                         {skill.score}
                       </div>
+                      <div className="flex w-8 items-center justify-end">
+                        {skill.support.map((support) => {
+                          switch (support) {
+                            case 'Listening':
+                              return <PiHeadphones className="text-slate-600" />
+                            case 'Reading':
+                              return (
+                                <PiBookOpenUser className="text-slate-600" />
+                              )
+                            case 'Speaking':
+                              return (
+                                <PiChatsCircle className="text-slate-600" />
+                              )
+                            case 'Writing':
+                              return <PiPenNib className="text-slate-600" />
+                          }
+                        })}
+                      </div>
                     </div>
                   </div>
                   <ProgressBar progress={skill.score} />
                 </div>
               ))}
-              <div className="text-right">
+              <div className="text-right text-xs">
                 <a
-                  className="w-full text-sm font-semibold text-sky-700 !no-underline opacity-10 transition-opacity hover:opacity-100"
+                  className="w-full font-semibold italic text-sky-700 !no-underline opacity-10 transition-opacity hover:opacity-100"
                   target="_blank"
                   href="https://gaohaoyang.github.io/pte-crx-page/?scrollTo=donation"
                 >
-                  Sponsor me for a cup of coffee!
+                  Developed by HyG. Buy me a coffee!
                 </a>{' '}
                 ☕
               </div>

src/ContentUI/scoreList.ts

@@ -157,12 +157,24 @@ const HIW = 'HIW'
 const WFD = 'WFD'
 
 export const skillsAnalysis = {
-  openResponseSpeakingWriting: [WE, DI, RTS],
-  reproducingSpokenWrittenLanguage: [WFD, RA, RS, SST],
-  writingExtended: [WE, SST, SWT],
-  writingShort: [WFD, FIBRW, FIBL],
-  speakingExtended: [DI, RTS],
-  speakingShort: [RA, RS, ASQ],
-  multipleSkillsComprehension: [FIBRW, SST, WFD, RA, RS, SWT, HIW],
-  singleSkillComprehension: [RO, FIBR, MCMRW, MCSR, MCML, MCSL, SMW],
+  openResponseSpeakingWriting: {
+    component: [WE, DI, RTS],
+    support: ['Speaking', 'Writing'],
+  },
+  reproducingSpokenWrittenLanguage: {
+    component: [WFD, RA, RS, SST],
+    support: ['Speaking', 'Writing'],
+  },
+  writingExtended: { component: [WE, SST, SWT], support: ['Writing'] },
+  writingShort: { component: [WFD, FIBRW, FIBL], support: ['Writing'] },
+  speakingExtended: { component: [DI, RTS], support: ['Speaking'] },
+  speakingShort: { component: [RA, RS, ASQ], support: ['Speaking'] },
+  multipleSkillsComprehension: {
+    component: [FIBRW, SST, WFD, RA, RS, SWT, HIW],
+    support: ['Listening', 'Reading'],
+  },
+  singleSkillComprehension: {
+    component: [RO, FIBR, MCMRW, MCSR, MCML, MCSL, SMW],
+    support: ['Listening', 'Reading'],
+  },
 }