JavaScript Match Continued

I have been continuing my work on my new Match game application this week. to recap its a simple match game made with a React and Redux frontend and a Ruby on Rails backend. It is also Kingdom hearts themed. This week I was able to starting configuring some of the visuals of the frontend. I finished creating the cards using photoshop I have a total of 9 different cards created for the game meaning I will have an 18 card board. After completing that I imported them into my react application with the code shown below.

import AxelCard from "./cards/AxelCard.png";
import KHCardBack from "./cards/KHCardBack.png";
import LarxeneCard from "./cards/LarxeneCardFront.png";
import LexaeusCard from "./cards/LexaeusCardFront.png";
import MarluxiaCard from "./cards/MarluxiaCardFront.png";
import NaminaCard from "./cards/NamineCard.png";
import RikuCard from "./cards/RikuCardFront.png";
import SoraCard from "./cards/SoraCardFront.png";
import VexenCard from "./cards/VexenCard Front.png";
import ZexionCard from "./cards/ZexionCardFront.png";

export default [
  AxelCard,
  KHCardBack,
  LarxeneCard,
  LexaeusCard,
  MarluxiaCard,
  NaminaCard,
  RikuCard,
  SoraCard,
  VexenCard,
  ZexionCard
];

After the images where imported into the application I began working on the JavaScript file and the CSS file that I would use to display them on the web page.

import "./App.css";
import Images from "./Images";
import { useState } from "react";

function App() {
  const [cards, setCards] = useState(initialState, [...Images]);
  return (
    <div>
      <div className='board'>
        <div className='card-outer'>
          <div className='card'>
            <div className='front'></div>
            <div className='back'></div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

body {
  background-color: #123;
  padding: 20px;
}

.board {
  width: 100vh;
  max-width: 100vw;
  display: grid;
  grid-gap: 10px;
  margin: auto;
  grid-template-columns: repeat(6, 1fr);
}

.card {
  background-color: #357;
  height: calc(100vh / 6);
  max-height: calc(100vw / 6);
}

Now that I can see the cards on the webpage its time to add click events to get them to flip whenever they are clicked. Unfortunately I began my new job this week and am working 6 days for the foreseeable future, so my coding time is a little limited. Never the less I will update this blog with my progress in the coming weeks. As always thanks for reading!!!