Merge pull request #3 from linuxunil/layout

Layout

Author: linuxunil

Diff for: src/App.jsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import GameCard from "./components/GameCard";
 import "./App.css";
-import { Navbar, Nav, NavDropdown, Row, Col, Container } from "react-bootstrap";
+import { Navbar, Nav, NavDropdown, Row, Col, Container, CardGroup } from "react-bootstrap";
 
 const defaultPokedex = [
   {
@@ -70,7 +70,7 @@ const defaultPokedex = [
 function App() {
   const [score, setScore] = useState(0);
   const [highScore, setHighScore] = useState(0);
-  const [pokedex, setPokedex] = useState(defaultPokedex);
+  const [pokedex,] = useState(defaultPokedex);
   const [selectedTokens, setSelected] = useState([]);
   const [pokemonToDisplay, setPokemonToDisply] = useState(defaultPokedex);
 
@@ -126,8 +126,9 @@ function App() {
 
   return (
     <>
-      <Navbar expand="lg" className="bg-body-tertiary" pb={4}>
-        <Container>
+      <Container fluid>
+        <Navbar expand="lg" className="bg-body-tertiary" pb={4} fixed="top">
+
           <Navbar.Brand href="#home">Pokemon Memorization</Navbar.Brand>
           <Navbar.Toggle aria-controls="basic-navbar-nav" />
           <Navbar.Collapse id="basic-navbar-nav">
@@ -146,12 +147,21 @@ function App() {
               </Row>
             </Col>
           </Navbar.Collapse>
-        </Container>
 
-      </Navbar>
-      <Container>
-        <Row className="justify-content-md-center pt-5">
-          {pokemonToDisplay.map((pokemon, index) => (
+
+        </Navbar >
+      </Container>
+      <Container fluid>
+        {/* TODO add two rows. */}
+        <Row>
+          {pokemonToDisplay.slice(0, (pokemonToDisplay.length / 2) - 1).map((pokemon, index) => (
+            <GameCard
+              key={index}
+              pokemon={pokemon}
+              handleClick={handleClick}
+            />
+          ))}
+          {pokemonToDisplay.slice((pokemonToDisplay.length / 2), pokemonToDisplay.length - 1).map((pokemon, index) => (
             <GameCard
               key={index}
               pokemon={pokemon}

Diff for: src/components/GameCard.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Card, Col, Placeholder } from "react-bootstrap";
+import { Image, Col, Placeholder } from "react-bootstrap";
 import axios from "../axios";
 
 //Display picture of pokemon
@@ -32,17 +32,19 @@ export default function GameCard(props) {
   }, [imageURL, props.pokemon.name]);
 
   return (
-    <Col md={"auto"}>
-      <Card style={{ width: "14rem", height: "15rem" }}
-        onClick={() => {
-          props.handleClick(name);
-        }}
-      >
-        <Card.Img variant="top" src={imageURL} />
-        <Card.Body>
-          <Card.Title>{name}</Card.Title>
-        </Card.Body>
-      </Card>
+    <Col xs={4} md={3}>
+      <Image src={imageURL} fluid onClick={() => { props.handleClick(name) }} />
+      <p>{name}</p>
     </Col>
+    // <Col key={props.index}>
+    //   <Card onClick={() => { props.handleClick(name); }} style={{
+    //     fontSize: "5vw"
+    //   }}>
+    //     <Card.Img variant="top" src={imageURL} />
+    //     <Card.Body>
+    //       <Card.Text>{name}</Card.Text>
+    //     </Card.Body >
+    //   </Card >
+    // </Col>
   );
 }