smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-27 06:40:42 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: grid setup and data elements

Browse source
This commit is contained in:
Mike 2024-07-13 13:17:27 -04:00
parent 438b1fcfe4
commit 85c989ce35
4 changed files with 29 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
memory-game/mg-frontend/.eslintrc.cjs
View file

@ -2,20 +2,21 @@ module.exports = {
root: true, root: true,
env: { browser: true, es2020: true }, env: { browser: true, es2020: true },
extends: [ extends: [
'eslint:recommended', "eslint:recommended",
'plugin:react/recommended', "plugin:react/recommended",
'plugin:react/jsx-runtime', "plugin:react/jsx-runtime",
'plugin:react-hooks/recommended', "plugin:react-hooks/recommended",
], ],
ignorePatterns: ['dist', '.eslintrc.cjs'], ignorePatterns: ["dist", ".eslintrc.cjs"],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, parserOptions: { ecmaVersion: "latest", sourceType: "module" },
settings: { react: { version: '18.2' } }, settings: { react: { version: "18.2" } },
plugins: ['react-refresh'], plugins: ["react-refresh"],
rules: { rules: {
'react/jsx-no-target-blank': 'off', "react/prop-types": "off",
'react-refresh/only-export-components': [ "react/jsx-no-target-blank": "off",
'warn', "react-refresh/only-export-components": [
"warn",
{ allowConstantExport: true }, { allowConstantExport: true },
], ],
}, },
} };

11
memory-game/mg-frontend/src/components/card.jsx
View file

@ -2,7 +2,11 @@ import "../styles/card.css";
export default function Card(props) { export default function Card(props) {
return ( return (
<div className="card"> <div
className="card"
onClick={(event) => onClick(event)}
data-cardName={props.title}
>
<div className="card-img"> <div className="card-img">
<Image src={props.imgSrc} alt={props.imgAlt} /> <Image src={props.imgSrc} alt={props.imgAlt} />
</div> </div>
@ -14,3 +18,8 @@ export default function Card(props) {
function Image(props) { function Image(props) {
return <img src={props.src} alt={props.alt} />; return <img src={props.src} alt={props.alt} />;
} }
function onClick(event) {
// implement something to handle the things ID
console.log(event.currentTarget.dataset.cardname);
}

1
memory-game/mg-frontend/src/components/gameboard.jsx
View file

@ -1,5 +1,6 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Card from "./card"; import Card from "./card";
import "../styles/gameboard.css";
export default function GameBoard(props) { export default function GameBoard(props) {
const [cards, setCards] = useState([]); const [cards, setCards] = useState([]);

5
memory-game/mg-frontend/src/styles/gameboard.css Normal file
View file

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