From 85c989ce350de4dd55d33322ae8084f8203e5d50 Mon Sep 17 00:00:00 2001
From: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date: Sat, 13 Jul 2024 13:17:27 -0400
Subject: [PATCH] feat: grid setup and data elements

---
 memory-game/mg-frontend/.eslintrc.cjs         | 25 ++++++++++---------
 .../mg-frontend/src/components/card.jsx       | 11 +++++++-
 .../mg-frontend/src/components/gameboard.jsx  |  1 +
 .../mg-frontend/src/styles/gameboard.css      |  5 ++++
 4 files changed, 29 insertions(+), 13 deletions(-)
 create mode 100644 memory-game/mg-frontend/src/styles/gameboard.css

diff --git a/memory-game/mg-frontend/.eslintrc.cjs b/memory-game/mg-frontend/.eslintrc.cjs
index 3e212e1..d5a5d48 100644
--- a/memory-game/mg-frontend/.eslintrc.cjs
+++ b/memory-game/mg-frontend/.eslintrc.cjs
@@ -2,20 +2,21 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  settings: { react: { version: "18.2" } },
+  plugins: ["react-refresh"],
   rules: {
-    'react/jsx-no-target-blank': 'off',
-    'react-refresh/only-export-components': [
-      'warn',
+    "react/prop-types": "off",
+    "react/jsx-no-target-blank": "off",
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true },
     ],
   },
-}
+};
diff --git a/memory-game/mg-frontend/src/components/card.jsx b/memory-game/mg-frontend/src/components/card.jsx
index 519bbae..e277bc7 100644
--- a/memory-game/mg-frontend/src/components/card.jsx
+++ b/memory-game/mg-frontend/src/components/card.jsx
@@ -2,7 +2,11 @@ import "../styles/card.css";
 
 export default function Card(props) {
   return (
-    <div className="card">
+    <div
+      className="card"
+      onClick={(event) => onClick(event)}
+      data-cardName={props.title}
+    >
       <div className="card-img">
         <Image src={props.imgSrc} alt={props.imgAlt} />
       </div>
@@ -14,3 +18,8 @@ export default function Card(props) {
 function Image(props) {
   return <img src={props.src} alt={props.alt} />;
 }
+
+function onClick(event) {
+  // implement something to handle the things ID
+  console.log(event.currentTarget.dataset.cardname);
+}
diff --git a/memory-game/mg-frontend/src/components/gameboard.jsx b/memory-game/mg-frontend/src/components/gameboard.jsx
index 7cacee2..819db4d 100644
--- a/memory-game/mg-frontend/src/components/gameboard.jsx
+++ b/memory-game/mg-frontend/src/components/gameboard.jsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import Card from "./card";
+import "../styles/gameboard.css";
 
 export default function GameBoard(props) {
   const [cards, setCards] = useState([]);
diff --git a/memory-game/mg-frontend/src/styles/gameboard.css b/memory-game/mg-frontend/src/styles/gameboard.css
new file mode 100644
index 0000000..477ffab
--- /dev/null
+++ b/memory-game/mg-frontend/src/styles/gameboard.css
@@ -0,0 +1,5 @@
+.gameboard {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 25px;
+}