Merge pull request #89 from shammy642/add_header_component

added dark-mode compatible H1

frontend/src/components/H1.jsx

@@ -0,0 +1,7 @@
+export const H1 = ({ children }) => {
+    return (
+            <h1 data-testid="game-name" className="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">
+                { children }
+            </h1>
+    );
+}

frontend/src/pages/InGame.jsx

@@ -11,10 +11,17 @@ import { CountdownCircleTimer } from "react-countdown-circle-timer";
 import { Card } from "../components/Card";
 import { Header } from "../components/Header";
 import { Footer } from "../components/Footer";
+import { H1 } from "../components/H1";
 
-// in game page function
-export function InGame({ players, redirect, pokemon, setRedirect, remainingTime }) {
 
+// in game page function
+export function InGame({
+  players,
+  redirect,
+  pokemon,
+  setRedirect,
+  remainingTime,
+}) {
   const [input, setInput] = useState("");
   //const [buttonText, setButtonText] = useState("Guess");
   const [showCheck, setShowCheck] = useState(false);
@@ -38,18 +45,21 @@ export function InGame({ players, redirect, pokemon, setRedirect, remainingTime
 
   return (
     <div className="full-page">
-      <Header/>
+      <Header />
       <Card>
-        <h1 data-testid="guess-label">Poké Poké Guess Weight!</h1>
+        <H1>Poké Poké Guess Weight!</H1>
         <div className="players_list m-3">
           <ListPlayers players={players} />
         </div>
         <div className="flex justify-center">
           <img src={pokemon.pictureURL} />
         </div>
         <div className="guess m-3">
-          <h1 className="text-xl mb-2">Guess <b>{pokemon.name}</b>&apos;s weight!</h1>
 
+          <h1 className="text-xl mb-2">
+            Guess <b>{pokemon.name}</b>&apos;s weight!
+          </h1>
+
           <GuessForm input={input} setInput={setInput}></GuessForm>
           <br></br>
           {/* <Button handleClick={handleClick} buttonText={buttonText} /> */}
@@ -75,7 +85,7 @@ export function InGame({ players, redirect, pokemon, setRedirect, remainingTime
           </CountdownCircleTimer>
         </div>
       </Card>
-      <Footer/>
+      <Footer />
     </div>
   );
 }

frontend/src/pages/LandingHost.jsx

@@ -6,10 +6,13 @@ import { Button } from "../components/Button";
 import { useNavigate } from "react-router-dom";
 import { useState } from "react";
 import { UsernameForm } from "../components/UsernameForm";
-import { CardText } from "../components/CardText";
+import { 
+
+} from "../components/CardText";
 import { Card } from "../components/Card";
 import { Header } from "../components/Header";
 import { Footer } from "../components/Footer";
+import { H1 } from "../components/H1";
 
 
 // page function
@@ -21,12 +24,6 @@ export function LandingHost() {
   const [error, setError] = useState("");
 
 
-  //user cna type in the form
-  const handleInputChange = (e) => {
-    const value = e.target.value;
-    setInput(value);
-  };
-
   //click should redirect the user to the lobby
   const handleClick = (e) => {
     e.preventDefault();
@@ -46,10 +43,7 @@ export function LandingHost() {
     <div className="full-page">
       <Header/>
       <Card>
-        <h1 data-testid="game-name" className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-          Poké Poké Guess Weight!
-        </h1>
-
+        <H1>Poké Poké Guess Weight!</H1>
         <p>A quick-fire multiplayer game</p>
         <div className="m-6 border-2 rounded-lg px-8 py-5">
           <p className="mb-3">Rules :</p>

frontend/src/pages/LandingPlayer.jsx

@@ -8,6 +8,7 @@ import { CardText } from "../components/CardText"
 import { Card } from "../components/Card"
 import { Header } from "../components/Header";
 import { Footer } from "../components/Footer";
+import { H1 } from "../components/H1"
 
 
 // landing page when a user clicks on a link generated by the host to join a game
@@ -19,16 +20,8 @@ export function LandingPlayer() {
   const params = useParams()
   const navigate = useNavigate()
 
-
-  //user cna type in the form
-  const handleInputChange = (e) => {
-    const value = e.target.value;
-    setInput(value);
-  }
-
   //click should redirect the user to the lobby 
   const handleClick = (e) => {
-
     e.preventDefault();
 
     // Validate if the input is not empty
@@ -51,9 +44,8 @@ export function LandingPlayer() {
     <div className="full-page">
       <Header/>
       <Card>
-        <h1 data-testid="game-name" className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-          Poké Poké Guess Weight!
-        </h1>
+      <H1>Poké Poké Guess Weight!</H1> 
+
 
           <p>A quick-fire multiplayer game</p>
           <div className="m-6 border-2 rounded-lg px-8 py-5">
@@ -70,7 +62,6 @@ export function LandingPlayer() {
           input={input}
           error={error}
           setInput={setInput}
-          handleInputChange={handleInputChange}
           avatar={avatar}
           setAvatar={setAvatar}
         ></UsernameForm>

frontend/src/pages/LobbyHost.jsx

@@ -8,6 +8,7 @@ import { Card } from "../components/Card";
 import { Header } from "../components/Header";
 import { Footer } from "../components/Footer";
 import CopyToClipboardButton from "../components/CopyToClipboardButton";
+import { H1 } from "../components/H1";
 
 export function LobbyHost({ gameRoom, players }) {
   const navigate = useNavigate();
@@ -21,7 +22,9 @@ export function LobbyHost({ gameRoom, players }) {
     <div className="full-page">
       <Header/>
       <Card>
+        <H1>Poké Poké Guess Weight!</H1>
         <ListPlayers players={players} isLobby={true}/>
+
         <br />
         <Button handleClick={handleClick} buttonText="Start Game" />
         <p>Share your game link:</p>

frontend/src/pages/LobbyPlayer.jsx

@@ -6,6 +6,7 @@ import { Header } from "../components/Header";
 import { Footer } from "../components/Footer";
 import CopyToClipboardButton from "../components/CopyToClipboardButton";
 import { Card } from "../components/Card";
+import { H1 } from "../components/H1";
 
 
 export function LobbyPlayer({ gameRoom, players, redirect, setRedirect }) {
@@ -22,9 +23,7 @@ export function LobbyPlayer({ gameRoom, players, redirect, setRedirect }) {
     <div className="full-page">
       <Header/>
       <Card>
-        <h1 data-testid="game-name" className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-          Poké Poké Guess Weight!
-        </h1>
+      <H1>Poké Poké Guess Weight!</H1>
         <ListPlayers players = {players} isLobby={true} />
         <br/>
 

frontend/src/pages/RoundEnd.jsx

@@ -11,6 +11,7 @@ import { Card } from "../components/Card";
 import { Table } from "../components/Table";
 import { Header } from "../components/Header";
 import { Footer } from "../components/Footer";
+import { H1 } from "../components/H1";
 
 export function RoundEnd({
   gameState,
@@ -44,6 +45,7 @@ export function RoundEnd({
     <div className="full-page">
       <Header/>
       <Card>
+      <H1>Poké Poké Guess Weight!</H1>
         <div className="m-3">
           <h2 className="text-2xl">Scores</h2>
           {gameState && gameState.players && (

frontend/tests/pages/InGame.test.jsx

@@ -48,7 +48,7 @@ describe("InGame tests", () => {
     render(
         <InGame players={players} pokemon={mockPokemon} redirect={""} setRedirect={setRedirect} />
     );
-    const heading = screen.getByTestId("guess-label");
+    const heading = screen.getByTestId("game-name");
     expect(heading.textContent).toEqual("Poké Poké Guess Weight!");
   });
   test("given a list of players, they are visible", () => {