Initial layout

ASproson · Aug 4, 2024 · 0875b89 · 0875b89
1 parent 23077d2
commit 0875b89
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Final Fantasy Battle Screen :icon:</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,14 +1,64 @@
+export const characterList = [
+  {
+    name: 'AAAA',
+    hp: 30,
+  },
+  {
+    name: 'BBBB',
+    hp: 25,
+  },
+  {
+    name: 'CCCC',
+    hp: 28,
+  },
+  {
+    name: 'DDDD',
+    hp: 33,
+  },
+];
+
 function App() {
+  const characters = characterList.map(({ name, hp }, idx) => {
+    return <CharacterSheet key={idx} name={name} hp={hp} />;
+  });
+
   return (
-    <div className="h-screen flex justify-center items-center bg-black text-white">
-      <div className="max-w-6xl border-white border-2 rounded-lg min-w-[650px]">
+    <div className="h-screen flex justify-center items-center bg-black text-white p-4">
+      <div className="max-w-6xl border-white border-2 rounded-lg min-w-[525px] w-full h-full ml-2">
         <div className="flex justify-between">
-          <div>enemies</div>
-          <div>characters</div>
+          <div className="flex flex-col justify-center">
+            <div>enemy1</div>
+            <div>enemy2</div>
+            <div>enemy3</div>
+          </div>
+          <div className="flex flex-col justify-center">
+            <div>char1</div>
+            <div>char2</div>
+            <div>char3</div>
+            <div>char4</div>
+          </div>
         </div>
       </div>
+      <div className="flex items-end h-full">
+        <div className="h-full w-[125px] p-1 pt-2">{characters}</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>
+  );
+};