add skills

Aero56 · Oct 26, 2023 · 76671e5 · 76671e5
1 parent d360c13
commit 76671e5
Show file tree

Hide file tree

Showing 25 changed files with 65 additions and 16 deletions.
diff --git a/src/assets/skills/agility.png b/src/assets/skills/agility.png
diff --git a/src/assets/skills/attack.png b/src/assets/skills/attack.png
diff --git a/src/assets/skills/construction.png b/src/assets/skills/construction.png
diff --git a/src/assets/skills/cooking.png b/src/assets/skills/cooking.png
diff --git a/src/assets/skills/crafting.png b/src/assets/skills/crafting.png
diff --git a/src/assets/skills/defence.png b/src/assets/skills/defence.png
diff --git a/src/assets/skills/farming.png b/src/assets/skills/farming.png
diff --git a/src/assets/skills/firemaking.png b/src/assets/skills/firemaking.png
diff --git a/src/assets/skills/fishing.png b/src/assets/skills/fishing.png
diff --git a/src/assets/skills/fletching.png b/src/assets/skills/fletching.png
diff --git a/src/assets/skills/herblore.png b/src/assets/skills/herblore.png
diff --git a/src/assets/skills/hitpoints.png b/src/assets/skills/hitpoints.png
diff --git a/src/assets/skills/hunter.png b/src/assets/skills/hunter.png
diff --git a/src/assets/skills/magic.png b/src/assets/skills/magic.png
diff --git a/src/assets/skills/mining.png b/src/assets/skills/mining.png
diff --git a/src/assets/skills/prayer.png b/src/assets/skills/prayer.png
diff --git a/src/assets/skills/ranged.png b/src/assets/skills/ranged.png
diff --git a/src/assets/skills/runecrafting.png b/src/assets/skills/runecrafting.png
diff --git a/src/assets/skills/slayer.png b/src/assets/skills/slayer.png
diff --git a/src/assets/skills/smithing.png b/src/assets/skills/smithing.png
diff --git a/src/assets/skills/strength.png b/src/assets/skills/strength.png
diff --git a/src/assets/skills/thieving.png b/src/assets/skills/thieving.png
diff --git a/src/assets/skills/woodcutting.png b/src/assets/skills/woodcutting.png
diff --git a/src/components/Stats.tsx b/src/components/Stats.tsx
@@ -0,0 +1,63 @@
+import { Skills } from '@/types/skills';
+import { Stats as StatsType } from '@/types/stats';
+
+interface StatsProps {
+  stats: StatsType;
+}
+
+const SKILLS: Array<keyof Skills> = [
+  'attack',
+  'hitpoints',
+  'mining',
+  'strength',
+  'agility',
+  'smithing',
+  'defence',
+  'herblore',
+  'fishing',
+  'ranged',
+  'thieving',
+  'cooking',
+  'prayer',
+  'crafting',
+  'firemaking',
+  'magic',
+  'fletching',
+  'woodcutting',
+  'runecrafting',
+  'slayer',
+  'farming',
+  'construction',
+  'hunter',
+];
+
+const Stats = ({ stats }: StatsProps) => {
+  return (
+    <div className="col-span-1 rounded-xl bg-black-pearl-900 sm:col-span-3">
+      <div className="flex items-center justify-between rounded-t-xl border-b-2 border-black-pearl-700 bg-black-pearl-800 p-4 font-semibold">
+        Stats
+        <div className="badge badge-primary">
+          {`Total: ${stats.skills.overall.level}`}
+        </div>
+      </div>
+      <div className="flex justify-center">
+        <div className="w-96 py-4 sm:p-4">
+          <div className="flex flex-wrap justify-center gap-2">
+            {SKILLS.map((skill) => (
+              <div className="flex w-1/4 rounded-xl border-2 border-black-pearl-700 bg-black-pearl-800 p-1">
+                <img
+                  src={`src/assets/skills/${skill}.png`}
+                  alt={`Skill icon of ${skill}`}
+                  className="ml-1 h-6 w-6 object-contain"
+                />
+                <p className="mx-auto">{stats.skills[skill]?.level ?? 1}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Stats;
diff --git a/src/pages/Player.tsx b/src/pages/Player.tsx
@@ -2,6 +2,7 @@ import { useParams } from 'react-router-dom';
 import { format } from 'date-fns';
 
 import usePlayerQuery from '@hooks/queries/usePlayerQuery';
+import Stats from '@components/Stats';
 
 const Player = () => {
   const { username = '' } = useParams();
@@ -21,29 +22,14 @@ const Player = () => {
       <div className="col-span-1 rounded-xl bg-black-pearl-900 p-4 sm:col-span-2">
         <p className="text-center text-xl font-bold">{username}</p>
         <div className="divider my-1" />
-        <p className="text-xs font-bold">ABOUT ME</p>
         <p className="text-xs font-bold">
           {'Member since: '}
           <span className="font-normal">
             {format(new Date(player.created_at), 'd MMM yyyy')}
           </span>
         </p>
       </div>
-      <div className="col-span-1 rounded-xl bg-black-pearl-900 sm:col-span-3">
-        <div className="rounded-t-xl border-b-2 border-black-pearl-700 bg-black-pearl-800 p-4 font-semibold">
-          Stats
-        </div>
-        <div className="p-4">
-          <div className="flex flex-col">
-            {player?.stats &&
-              Object.entries(player.stats.skills).map(([key, value]) => (
-                <p key={key}>
-                  {key}: {value.level}
-                </p>
-              ))}
-          </div>
-        </div>
-      </div>
+      {player.stats && <Stats stats={player.stats} />}
     </div>
   );
 };