Style tweaks

ASproson · Aug 16, 2024 · 891c84b · 891c84b
1 parent 48a4384
commit 891c84b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 26 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,39 +7,30 @@ function App() {
     return <CharacterSheet key={name} name={name} hp={hp} />;
   });
 
-  const characterSprites = characterList.map(({ name, img }) => {
-    return <Character key={name} name={name} src={img} />;
-  });
+  const characterSprites = characterList.map(({ name, img }) => (
+    <Character key={name} name={name} src={img} />
+  ));
 
-  const enemySprites = enemyList.map(({ name, img }) => {
-    return (
-      <div className="pl-10" key={name}>
-        <Character name={name} src={img} />
-      </div>
-    );
-  });
+  const enemySprites = enemyList.map(({ name, img }) => (
+    <Character key={name} name={name} src={img} />
+  ));
 
   return (
     <div className="h-screen flex justify-center items-center bg-black text-white p-4 uppercase">
-      <div className="max-w-6xl border-white border-2 rounded-lg min-w-[570px] w-full h-full max-h-[700px] ml-2 flex">
+      <div className="max-w-6xl border-white border-2 rounded-lg w-full h-full max-h-[600px] ml-2 flex">
         <div className="flex flex-col w-full">
           <div
-            className="h-[100px] bg-contain"
+            className="hidden sm:block sm:h-[100px] md:h-[150px] bg-contain"
             style={{
               backgroundImage: 'url(src/assets/bg-repeat.png)',
             }}
           ></div>
-          <div className="flex justify-between py-2 border-2 border-blue-500 min-h-[170px] h-3/5">
+          <div className="flex justify-between py-2 h-full">
             <SpriteRenderer>{enemySprites}</SpriteRenderer>
             <SpriteRenderer>{characterSprites}</SpriteRenderer>
           </div>
-          <div className="flex flex-1 justify-between border-2 border-red-500 ">
-            <div className="border-2 border-yellow-500 w-[40%] flex justify-center items-center">
-              <div className="text-4xl">IMP</div>
-            </div>
-            <div className="border-2 border-green-500 w-[60%]">
-              <PlayerMenu />
-            </div>
+          <div className="border-2 border-red-500">
+            <PlayerMenu />
           </div>
         </div>
 
@@ -70,9 +61,5 @@ interface SpriteRendererProps {
   children: React.ReactNode;
 }
 export const SpriteRenderer = ({ children }: SpriteRendererProps) => {
-  return (
-    <div className="flex flex-col justify-center space-y-3 border-2 border-red-500 pr-10">
-      {children}
-    </div>
-  );
+  return <div className="flex flex-col flex-wrap justify-center space-y-3 px-10">{children}</div>;
 };
diff --git a/src/components/PlayerMenu.tsx b/src/components/PlayerMenu.tsx
@@ -6,9 +6,14 @@ const BUTTONS = [
   { title: 'RUN' },
 ];
 
+/**
+ *
+ * @returns Menu buttons
+ * @todo onClicks pull button specific modal with actions to take
+ */
 export const PlayerMenu = () => {
   return (
-    <div className="flex flex-col items-start flex-wrap font-bold text-lg p-4 h-full">
+    <div className="flex justify-around font-bold space-x-6 text-lg p-4 h-full">
       {BUTTONS.map(({ title }) => (
         <button key={title} className="text-slate-400 hover:text-slate-100 transition ease-in-out">
           {title}