attribute music to Deezer

web/components/Attribution.tsx

@@ -0,0 +1,11 @@
+import { Card } from "./Card";
+import wordMark from "../deezer_wordmark.png";
+
+export function Attribution() {
+    // If https://deezerbrand.com ever gets updated, this should be changed to follow those guidelines.
+    return (
+        <Card title="Music from" link="https://deezer.com" centred>
+            <img className="deezer_wordmark" src={wordMark} alt="Deezer" />
+        </Card>
+    );
+}

web/components/Card.tsx

@@ -9,6 +9,24 @@ type ImageDef = {
     alt: string;
 };
 
+type Flags = {
+    good?: boolean;
+    bad?: boolean;
+    active?: boolean;
+    padded?: boolean;
+    centred?: boolean;
+};
+
+type CardProps = {
+    title: ReactNode;
+    children?: ReactNode;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    image?: ImageDef;
+    icon?: IconDefinition;
+    link?: string;
+    progress?: number;
+} & Flags;
+
 export function Card({
     title,
     children,
@@ -17,31 +35,10 @@ export function Card({
     icon,
     link,
     progress,
-    good,
-    bad,
-    active,
-    extended,
-}: {
-    title: ReactNode;
-    children?: ReactNode;
-    onClick?: MouseEventHandler<HTMLDivElement>;
-    image?: ImageDef;
-    icon?: IconDefinition;
-    link?: string;
-    progress?: number;
-    good?: boolean;
-    bad?: boolean;
-    active?: boolean;
-    extended?: boolean;
-}) {
+    ...flags
+}: CardProps) {
     const inner = Inner({ icon, image, title, progress, sub: children });
-    const outerClass = classModifiers("card", {
-        good,
-        bad,
-        active,
-        extended,
-        button: link || onClick,
-    });
+    const outerClass = classModifiers("card", { button: link || onClick, ...flags });
     if (link && link.startsWith("/")) {
         return (
             <Link to={link} className={outerClass}>

web/components/Game.tsx

@@ -9,7 +9,7 @@ import { useState } from "react";
 export type GuessQuery = {
     query: string;
     id: number | null;
-}
+};
 
 export function Game() {
     const { gameId } = useParams();
@@ -25,9 +25,7 @@ export function Game() {
     }
     let game;
     if (data.won === null) {
-        game = (
-            <Guesses game={data} guessQuery={guess} setGuessQuery={setGuess} />
-        );
+        game = <Guesses game={data} guessQuery={guess} setGuessQuery={setGuess} />;
     } else {
         game = <GameOver game={data} />;
     }

web/components/GameOver.tsx

@@ -4,6 +4,7 @@ import { Scrollable } from "./Scrollable";
 import { TrackCard } from "./TrackCard";
 import { faCrown, faHeartCrack, faPlay } from "@fortawesome/free-solid-svg-icons";
 import { Card } from "./Card";
+import { Attribution } from "./Attribution";
 
 const COMMENTS = [
     "wow!!",
@@ -27,7 +28,11 @@ export function GameOver({ game }: { game: Game }) {
         const comment = COMMENTS[Math.min(guesses.length, COMMENTS.length) - 1];
         outcome = (
             <Card title={<>You won!&ensp;&bull;&ensp;{type}</>} icon={faCrown} good>
-                You took <b>{guesses.length} {guessPlural}</b> - {comment}
+                You took{" "}
+                <b>
+                    {guesses.length} {guessPlural}
+                </b>{" "}
+                - {comment}
             </Card>
         );
     } else {
@@ -42,6 +47,7 @@ export function GameOver({ game }: { game: Game }) {
             <div className="card_stack">
                 {outcome}
                 <TrackCard track={track} link />
+                <Attribution />
                 <Card title="New Game" icon={faPlay} link="/">
                     Click to play again
                 </Card>

web/components/Guess.tsx

@@ -67,9 +67,7 @@ export function NewGuess({
         <Card title={search} progress={fractionElapsed} active>
             <label htmlFor="new_guess" className="search_label">
                 <p>Start typing a song title or artist for suggestions.</p>
-                    {remainingTime && (
-                        <p>{(remainingTime / 1000).toFixed(2)}s remaining</p>
-                    )}
+                {remainingTime && <p>{(remainingTime / 1000).toFixed(2)}s remaining</p>}
             </label>
         </Card>
     );

web/components/Info.tsx

@@ -18,8 +18,8 @@ export function Info() {
     const daily = <GameType game={{ isDaily: true }} />;
     return (
         <Scrollable>
-            <div className="card_stack card_stack--centred">
-                <Card title="How to Play" extended>
+            <div className="card_stack">
+                <Card title="How to Play" padded centred>
                     <ol className="fa-ul">
                         <li>
                             <FontAwesomeIcon icon={faPlay} listItem />
@@ -52,7 +52,7 @@ export function Info() {
                         </li>
                     </ol>
                 </Card>
-                <Card title="About" extended>
+                <Card title="About" padded centred>
                     <p>
                         <b>Beatdrop</b> is a name-that-tune music guessing game inspired
                         by the now-discontinued Heardle.

web/components/Start.tsx

@@ -9,6 +9,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { Scrollable } from "./Scrollable";
 import { Card } from "./Card";
+import { Attribution } from "./Attribution";
 
 export function Start() {
     const { data, error } = useRecentGames();
@@ -28,6 +29,7 @@ export function Start() {
         buttons.push(<UnlimitedButton key="unlimited" />);
         buttons.push(<TimedButton key="timed" />);
     }
+    buttons.push(<Attribution />);
     return (
         <Scrollable>
             <div className="card_stack">{buttons}</div>

web/sass/card.sass

@@ -3,23 +3,6 @@
     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
@@ -86,12 +69,29 @@
     &.card--with-sub
         grid-template-areas: "thumb title" "thumb sub"
 
-.card--extended
+.card--padded
     padding: 2rem
 
     .card__title
         margin-bottom: 0.5rem
 
+.card--centred
+    place-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--button
     cursor: pointer
     transition: transform 100ms linear

web/sass/index.sass

@@ -27,3 +27,8 @@ main
 .title, .sub
     margin: 0
     text-align: center
+
+.deezer_wordmark
+    max-width: 100%
+    max-height: 2.5rem
+    margin-top: 0.5rem

web/types.d.ts

@@ -0,0 +1 @@
+declare module "*.png";