Add home page art

Oliveriver · Aug 5, 2024 · 2f869a6 · 2f869a6
1 parent e2ab6bf
commit 2f869a6
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 53 deletions.
diff --git a/client/public/landing-image-background.png b/client/public/landing-image-background.png
diff --git a/client/public/landing-image-foreground.png b/client/public/landing-image-foreground.png
diff --git a/client/src/components/SetupRoot.tsx b/client/src/components/SetupRoot.tsx
@@ -8,11 +8,18 @@ const SetupRoot = () => {
   const [option, setOption] = useState(SetupViewOption.None);
 
   return (
-    <>
+    <div
+      style={{
+        backgroundImage: 'url(landing-image-background.png)',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
       {option === SetupViewOption.None && <LandingPage setViewOption={setOption} />}
       {option === SetupViewOption.New && <NewGamePage setViewOption={setOption} />}
       {option === SetupViewOption.Join && <JoinGamePage setViewOption={setOption} />}
-    </>
+    </div>
   );
 };
 

diff --git a/client/src/components/pages/LandingPage.tsx b/client/src/components/pages/LandingPage.tsx
@@ -8,57 +8,64 @@ type LandingPageProps = {
 };
 
 const LandingPage = ({ setViewOption }: LandingPageProps) => (
-  <div
-    className="flex flex-col gap-6 w-full min-h-screen py-8 px-16"
-    style={{
-      // backgroundImage: TBA
-      backgroundRepeat: 'no-repeat',
-      backgroundSize: 'cover',
-      backgroundPosition: 'center',
-    }}
-  >
-    <div className="flex flex-col my-8">
-      <p className="text-[72px] font-bold">5D Diplomacy</p>
-      <p className="text-[36px] font-bold">With Multiverse Time Travel</p>
+  <div className="flex justify-center w-screen min-h-screen">
+    <div className="flex flex-col gap-6 py-8">
+      <div className="flex flex-col my-8">
+        <p className="text-[72px] font-bold">5D Diplomacy</p>
+        <p className="text-[36px] font-bold">With Multiverse Time Travel</p>
+      </div>
+      <div className="flex flex-row gap-4 mb-8">
+        <Button text="New Game" minWidth={184} onClick={() => setViewOption(SetupViewOption.New)} />
+        <Button
+          text="Join Game"
+          minWidth={184}
+          onClick={() => setViewOption(SetupViewOption.Join)}
+        />
+      </div>
+      <LinkGroup
+        heading="Created by"
+        links={[
+          {
+            text: 'Oliver Lugg',
+            href: 'https://www.youtube.com/@OliverLugg',
+          },
+        ]}
+      />
+      <LinkGroup
+        heading="Inspired by"
+        links={[
+          {
+            text: 'Diplomacy',
+            href: 'https://shop.hasbro.com/en-us/product/avalon-hill-diplomacy-cooperative-strategy-board-game-ages-12-and-up-2-7-players/09A402C7-4CA2-4E9D-9449-4592B2066011',
+          },
+          {
+            text: '5D Chess With Multiverse Time Travel',
+            href: 'https://www.5dchesswithmultiversetimetravel.com/',
+          },
+        ]}
+      />
+      <LinkGroup
+        heading="Assets"
+        links={[
+          {
+            text: 'Diplomacy map SVG - Martin Asal',
+            href: 'https://commons.wikimedia.org/wiki/File:Diplomacy.svg',
+          },
+          {
+            text: 'Title page art - Lady Razor',
+            href: 'https://www.thediplomats.net/ladyrazor',
+          },
+        ]}
+      />
+      <Link
+        text="Source code"
+        href="https://github.com/Oliveriver/5d-diplomacy-with-multiverse-time-travel"
+      />
     </div>
-    <div className="flex flex-row gap-4 mb-8">
-      <Button text="New Game" minWidth={184} onClick={() => setViewOption(SetupViewOption.New)} />
-      <Button text="Join Game" minWidth={184} onClick={() => setViewOption(SetupViewOption.Join)} />
-    </div>
-    <LinkGroup
-      heading="Created by"
-      links={[
-        {
-          text: 'Oliver Lugg',
-          href: 'https://www.youtube.com/@OliverLugg',
-        },
-      ]}
-    />
-    <LinkGroup
-      heading="Inspired by"
-      links={[
-        {
-          text: 'Diplomacy',
-          href: 'https://shop.hasbro.com/en-us/product/avalon-hill-diplomacy-cooperative-strategy-board-game-ages-12-and-up-2-7-players/09A402C7-4CA2-4E9D-9449-4592B2066011',
-        },
-        {
-          text: '5D Chess With Multiverse Time Travel',
-          href: 'https://www.5dchesswithmultiversetimetravel.com/',
-        },
-      ]}
-    />
-    <LinkGroup
-      heading="Assets"
-      links={[
-        {
-          text: 'Diplomacy map SVG - Martin Asal',
-          href: 'https://commons.wikimedia.org/wiki/File:Diplomacy.svg',
-        },
-      ]}
-    />
-    <Link
-      text="Source code"
-      href="https://github.com/Oliveriver/5d-diplomacy-with-multiverse-time-travel"
+    <img
+      alt="The Time Machinations"
+      src="./landing-image-foreground.png"
+      className="py-4 max-h-screen"
     />
   </div>
 );

diff --git a/client/src/components/user-interface/common/Select.tsx b/client/src/components/user-interface/common/Select.tsx
@@ -15,7 +15,7 @@ const Select = <T extends string | number | undefined>({
   setValue,
   selectedValue,
 }: SelectProps<T>) => (
-  <div className="w-64 pr-4 border-4 rounded-xl">
+  <div className="w-64 pr-4 bg-white border-4 rounded-xl">
     <select
       className="text-lg w-full bg-transparent p-4"
       style={{