feat: grid setup and data elements

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 },
     ],
   },
-}
+};

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);
+}

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([]);

memory-game/mg-frontend/src/styles/gameboard.css

@@ -0,0 +1,5 @@
+.gameboard {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 25px;
+}