From 46eaf1320eb0fc21fa4e89e63f37408978322a20 Mon Sep 17 00:00:00 2001
From: Artemis <me@arty.li>
Date: Fri, 2 Feb 2024 00:35:40 +0000
Subject: [PATCH] style info page

---
 web/components/Card.tsx |  3 ++
 web/components/Info.tsx | 78 ++++++++++++++++++++++++++++++-----------
 web/sass/card.sass      | 50 ++++++++++++++++++++++++--
 3 files changed, 108 insertions(+), 23 deletions(-)

diff --git a/web/components/Card.tsx b/web/components/Card.tsx
index a2c8081..1007f8f 100644
--- a/web/components/Card.tsx
+++ b/web/components/Card.tsx
@@ -19,6 +19,7 @@ export function Card({
     good,
     bad,
     active,
+    extended,
 }: {
     title: ReactNode;
     children?: ReactNode;
@@ -29,12 +30,14 @@ export function Card({
     good?: boolean;
     bad?: boolean;
     active?: boolean;
+    extended?: boolean;
 }) {
     const inner = Inner({ icon, image, title, sub: children });
     const outerClass = classModifiers("card", {
         good,
         bad,
         active,
+        extended,
         button: link || onClick,
     });
     if (link && link.startsWith("/")) {
diff --git a/web/components/Info.tsx b/web/components/Info.tsx
index 4777a47..7822a80 100644
--- a/web/components/Info.tsx
+++ b/web/components/Info.tsx
@@ -1,31 +1,67 @@
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { GameType } from "./GameType";
 import { Scrollable } from "./Scrollable";
+import { Card } from "./Card";
+import { faCrown, faForward, faLock, faMusic, faPlay, faRotateRight, faSearch } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export function Info() {
-    // TODO: style this page
+    const navigate = useNavigate();
     const daily = <GameType game={{ isDaily: true }} />;
     return (
         <Scrollable>
-            <h1>Help!</h1>
-            <p>
-                <b>Beatdrop</b> is a name-that-tune music guessing game inspired by the
-                now-discontinued Heardle.
-            </p>
-            <ol>
-                <li>Start a game - try {daily} for your first time.</li>
-                <li>Listen to the music. Does it ring a bell?</li>
-                <li>Start typing your guess, then pick a search result.</li>
-                <li>Incorrect guesses let you hear more of the track.</li>
-                <li>If you have no idea, you can skip your guess.</li>
-                <li>
-                    Use the buttons at the bottom of the page to jump backwards and
-                    forwards.
-                </li>
-                <li>Try to get the song before your guesses run out! Good luck!</li>
-            </ol>
-            <p>&copy; AM Vellacott 2024 &bull; Music from Deezer</p>
-            <Link to="/">Start playing!</Link>
+            <div className="card_stack card_stack--centred">
+                <Card title="How to Play" extended>
+                    <ol className="fa-ul">
+                        <li>
+                            <FontAwesomeIcon icon={faPlay} listItem />
+                            Start a game - try <b>{daily}</b> for your first time.
+                        </li>
+                        <li>
+                            <FontAwesomeIcon icon={faMusic} listItem />
+                            Listen to the music. Does it ring a bell?</li>
+                        <li>
+                            <FontAwesomeIcon icon={faSearch} listItem />
+                            Start typing your guess, then pick a search result.</li>
+                        <li>
+                            <FontAwesomeIcon icon={faLock} listItem />
+                            Incorrect guesses let you hear more of the track.</li>
+                        <li>
+                            <FontAwesomeIcon icon={faForward} listItem />
+                            If you have no idea, you can skip your guess.</li>
+                        <li>
+                            <FontAwesomeIcon icon={faRotateRight} listItem />
+                            Use the buttons at the bottom of the page to jump backwards
+                            and forwards.
+                        </li>
+                        <li>
+                            <FontAwesomeIcon icon={faCrown} listItem />
+                            Try to get the song before your guesses run out! Good luck!
+                        </li>
+                    </ol>
+                </Card>
+                <Card title="About" extended>
+                    <p>
+                        <b>Beatdrop</b> is a name-that-tune music guessing game inspired
+                        by the now-discontinued Heardle.
+                    </p>
+                    <p>
+                        Music metadata, album art and track audio are provided by{" "}
+                        <a href="https://deezer.com">Deezer</a>.
+                    </p>
+                    <p>
+                        Beatdrop is a personal project by AM Vellacott, and is not
+                        affiliated with Deezer, Spotify, Heardle, or any other music
+                        service.{" "}
+                    </p>
+                    <p>
+                        <a href="https://github.com/Artemis21/beatdrop">
+                            The source code is available on GitHub.
+                        </a>
+                    </p>
+                </Card>
+                <Card title="Start playing!" icon={faPlay} onClick={() => navigate(-1)} />
+            </div>
         </Scrollable>
     );
 }
diff --git a/web/sass/card.sass b/web/sass/card.sass
index 70dc094..056215d 100644
--- a/web/sass/card.sass
+++ b/web/sass/card.sass
@@ -3,6 +3,23 @@
     flex-direction: column
     gap: 1rem
 
+.card_stack--centred .card
+    align-items: center
+
+    // if there is no sub OR there is no thumb, centre the title
+    &:not(:has(.card__sub)), &:not(:has(.card__icon, .card__image))
+        .card__title
+            justify-self: center
+            text-align: center
+
+    // if there is only an icon and a title, centre them together
+    &:has(.card__icon):not(:has(.card__sub))
+        display: flex
+        justify-content: center
+
+        .card__icon
+            font-size: 2rem
+
 .card
     border: 0
     text-decoration: none
@@ -31,6 +48,19 @@
         &:has(.card__sub)
             grid-template-areas: "thumb title" "thumb sub"
 
+    // FIXME: no tag names
+    ol, p
+        &:first-child
+            margin-top: 0
+
+        &:last-child
+            margin-bottom: 0
+
+    ol, .fa-ul
+        display: flex
+        gap: 0.5rem
+        flex-direction: column
+
     // This becomes an inset border when .card--active is applied. It is defined
     // here to allow for transitions. We use a pseudo element to apply an inset
     // border rather than a standard outer border -- this reduces content shift
@@ -47,6 +77,22 @@
         transition: border-width 50ms linear
         pointer-events: none
 
+.card--with-sub
+    grid-template-areas: "title" "sub"
+
+.card--with-thumb
+    grid-template-columns: 5rem 1fr
+    grid-template-areas: "thumb title"
+
+    &.card--with-sub
+        grid-template-areas: "thumb title" "thumb sub"
+
+.card--extended
+    padding: 2rem
+
+    .card__title
+        margin-bottom: 0.5rem
+
 .card--button
     cursor: pointer
     transition: transform 100ms linear
@@ -73,9 +119,8 @@
 
 .card__icon
     grid-area: thumb
-    margin: auto
     font-size: 2.5rem
-    text-align: center
+    justify-self: center
 
 .card__image
     grid-area: thumb
@@ -102,3 +147,4 @@
 .card__sub
     grid-area: sub
     margin: 0
+    line-height: 1.5