Abstracts into classes

src/App.tsx

@@ -1,25 +1,10 @@
-export const characterList = [
-  {
-    name: 'AAAA',
-    hp: 30,
-  },
-  {
-    name: 'BBBB',
-    hp: 25,
-  },
-  {
-    name: 'CCCC',
-    hp: 28,
-  },
-  {
-    name: 'DDDD',
-    hp: 33,
-  },
-];
+import { CharacterSheet } from './components/CharacterSheet';
+import { PlayerMenu } from './components/PlayerMenu';
+import { characterList } from './library/Characters';
 
 function App() {
-  const characters = characterList.map(({ name, hp }, idx) => {
-    return <CharacterSheet key={idx} name={name} hp={hp} />;
+  const characterSheetList = characterList.map(({ name, hp }) => {
+    return <CharacterSheet key={name} name={name} hp={hp} />;
   });
 
   return (
@@ -49,38 +34,11 @@ function App() {
         </div>
 
         <div className="flex items-end h-full">
-          <div className="h-full w-[75px] p-1 pt-2">{characters}</div>
+          <div className="h-full w-[75px] p-1 pt-2">{characterSheetList}</div>
         </div>
       </div>
     </div>
   );
 }
 
 export default App;
-
-interface Character {
-  name: string;
-  hp: number;
-}
-
-export const CharacterSheet = ({ name, hp }: Character) => {
-  return (
-    <div className="p-1 border-2 border-white rounded-lg">
-      <p className="uppercase font-bold">{name}</p>
-      <p className="uppercase font-bold">hp</p>
-      <p className="text-right">{hp}</p>
-    </div>
-  );
-};
-
-export const PlayerMenu = () => {
-  return (
-    <div className="flex flex-col justify-center flex-wrap font-bold text-lg uppercase p-4 h-full">
-      <p>Fight</p>
-      <p>Magic</p>
-      <p>Drink</p>
-      <p>Item</p>
-      <p>Run</p>
-    </div>
-  );
-};

src/components/CharacterSheet.tsx

@@ -0,0 +1,14 @@
+interface Character {
+  name: string;
+  hp: number;
+}
+
+export const CharacterSheet = ({ name, hp }: Character) => {
+  return (
+    <div className="p-1 border-2 border-white rounded-lg">
+      <p className="uppercase font-bold">{name}</p>
+      <p className="uppercase font-bold">hp</p>
+      <p className="text-right">{hp}</p>
+    </div>
+  );
+};

src/components/PlayerMenu.tsx

@@ -0,0 +1,11 @@
+export const PlayerMenu = () => {
+  return (
+    <div className="flex flex-col justify-center flex-wrap font-bold text-lg uppercase p-4 h-full">
+      <p>Fight</p>
+      <p>Magic</p>
+      <p>Drink</p>
+      <p>Item</p>
+      <p>Run</p>
+    </div>
+  );
+};

src/library/Characters.ts

@@ -0,0 +1,23 @@
+interface CharacterClass {
+  name: string;
+  hp: number;
+  img: string;
+  attack: number;
+  critChance: number;
+}
+class CharacterGenerator implements CharacterClass {
+  constructor(
+    public name: string,
+    public hp: number,
+    public img: string,
+    public attack: number,
+    public critChance: number
+  ) {}
+}
+
+export const characterList = [
+  new CharacterGenerator('AAAA', 30, '/images/AAAA.png', 10, 0.2),
+  new CharacterGenerator('BBBB', 25, '/images/BBBB.png', 12, 0.3),
+  new CharacterGenerator('CCCC', 28, '/images/CCCC.png', 8, 0.25),
+  new CharacterGenerator('DDDD', 33, '/images/DDDD.png', 15, 0.15),
+];