devvsakib · devvsakib · Oct 25, 2022 · Oct 24, 2022
diff --git a/memory-game-react/.gitignore b/memory-game-react/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/memory-game-react/README.md b/memory-game-react/README.md
@@ -0,0 +1 @@
+###memory-game-react-ts
diff --git a/memory-game-react/package-lock.json b/memory-game-react/package-lock.json
diff --git a/memory-game-react/package.json b/memory-game-react/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "memory-game-react-ts",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@apollo/client": "^3.6.9",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.11.58",
+    "@types/react": "^18.0.18",
+    "@types/react-dom": "^18.0.6",
+    "graphql": "^16.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "styled-components": "^5.3.5",
+    "typescript": "^4.8.3",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.26"
+  }
+}
diff --git a/memory-game-react/public/fonts/MISFITS_.TTF b/memory-game-react/public/fonts/MISFITS_.TTF
diff --git a/memory-game-react/public/fonts/get-schwifty.ttf b/memory-game-react/public/fonts/get-schwifty.ttf
diff --git a/memory-game-react/public/images/github.png b/memory-game-react/public/images/github.png
diff --git a/memory-game-react/public/images/linkedin.png b/memory-game-react/public/images/linkedin.png
diff --git a/memory-game-react/public/images/logo.gif b/memory-game-react/public/images/logo.gif
diff --git a/memory-game-react/public/images/stars.png b/memory-game-react/public/images/stars.png
diff --git a/memory-game-react/public/images/tag.jpeg b/memory-game-react/public/images/tag.jpeg
diff --git a/memory-game-react/public/images/twinkling.png b/memory-game-react/public/images/twinkling.png
diff --git a/memory-game-react/public/index.html b/memory-game-react/public/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+      @font-face {
+        font-family: CustomFont;
+        src: url('fonts/get-schwifty.ttf');
+    }
+
+      @font-face {
+        font-family: CustomFontTwo;
+        src: url('fonts/MISFITS_.TTF');
+      }
+    </style>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/memory-game/public/images/logo.gif" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="/memory-game/public/images/logo.gif" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Memory Game</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/memory-game-react/public/manifest.json b/memory-game-react/public/manifest.json
@@ -0,0 +1,8 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/memory-game-react/public/robots.txt b/memory-game-react/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/memory-game-react/src/App.css b/memory-game-react/src/App.css
@@ -0,0 +1,43 @@
+body {
+    background-image: linear-gradient(to left, #00b4cb, #e5d29f);
+}
+
+@keyframes move-twink-back {
+    from {background-position:0 0;}
+    to {background-position:-10000px 5000px;}
+}
+@-webkit-keyframes move-twink-back {
+    from {background-position:0 0;}
+    to {background-position:-10000px 5000px;}
+}
+@-moz-keyframes move-twink-back {
+    from {background-position:0 0;}
+    to {background-position:-10000px 5000px;}
+}
+@-ms-keyframes move-twink-back {
+    from {background-position:0 0;}
+    to {background-position:-10000px 5000px;}
+}
+.stars, .twinkling {
+  position:absolute;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+  width:100%;
+  height:100%;
+  display:block;
+}
+.stars {
+  background:#000 url(../public/images/stars.png) repeat top center;
+  z-index:0;
+}
+.twinkling{
+    background:transparent url(../public/images/twinkling.png) repeat top center;
+    z-index:0;
+    -moz-animation:move-twink-back 200s linear infinite;
+    -ms-animation:move-twink-back 200s linear infinite;
+    -o-animation:move-twink-back 200s linear infinite;
+    -webkit-animation:move-twink-back 200s linear infinite;
+    animation:move-twink-back 200s linear infinite;
+  }
diff --git a/memory-game-react/src/App.tsx b/memory-game-react/src/App.tsx
@@ -0,0 +1,75 @@
+import './App.css';
+import { Card } from './components/Card';
+import { Header } from './components/Header';
+import { Footer } from './components/Footer';
+import { useEffect, useRef, useState } from 'react';
+import { useQuery } from '@apollo/client';
+import INFO_CHARACTER from './querys';
+
+function App() { 
+
+  function Shuffle(params: any) {
+    var m = params.length, t, i;
+    while (m) {
+      i = Math.floor(Math.random() * m--);
+      t = params[m];
+      params[m] = params[i];
+      params[i] = t;
+    }
+    setResult(params);
+  }
+
+  const [characters, setCharacters] = useState<any>([]);
+  const [result, setResult] = useState<any>([]);
+
+  const { data } = useQuery(INFO_CHARACTER, { variables: { ListIds: [1, 2, 3, 4, 5, 14, 15, 20, 18, 17] } });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await data;
+      return result;
+    }
+
+    const char = fetchData()
+    char.then((res) => {
+      setCharacters(res.charactersByIds);
+    });
+  }, [data]);
+
+  useEffect(() => {
+    if (characters) {
+      Shuffle([...characters, ...characters]);
+    }
+  }, [characters]);
+
+  const [selected, setSelected] = useState(0);
+
+  const handleClick = (id: number) => {
+    console.log(id);
+    /** AJUSTAR ESTE BLOCO PARA PEGAR O ID DO COMPONENT CARD */
+    /*let newSelected = event.target.id;
+    setSelected(newSelected);
+
+    if (selected === newSelected) { //test if the same card is clicked twice
+      console.log('acertou');
+      console.log('newSelected: ' + newSelected);
+      console.log('selected: ' + selected);
+      setSelected(0);
+    } else if (selected !== newSelected && selected != 0) {
+      console.log('errou');
+      console.log('newSelected: ' + newSelected);
+      console.log('selected: ' + selected);
+      setSelected(0);
+    }*/
+  }
+
+  return (
+    <>
+      <Header />
+      <Card result={result} id={result.map.id} handleClick={handleClick} flipped={true}/>
+      <Footer />
+    </>
+  );
+}
+
+export default App;
diff --git a/memory-game-react/src/components/Card/index.tsx b/memory-game-react/src/components/Card/index.tsx
@@ -0,0 +1,39 @@
+import { useQuery } from "@apollo/client";
+import { useEffect, useState } from "react";
+import { Type } from "typescript";
+import INFO_CHARACTER from "../../querys";
+import { Item, List, Image, Container } from "../../styled";
+
+export interface CardProps {
+    id: number;
+    flipped?: boolean;
+    result: Array<Type>;
+    handleClick?: (id: number) => void;
+}
+/*CONTINUAR AQUI, PEGAR O ID A PARTIR DO RESULT*/
+export function Card ({ flipped = false, result, handleClick, id}: CardProps) {
+    const cardBackClassName = ['card-back'];
+    const cardFrontClassName = ['card-front'];
+
+    flipped && cardBackClassName.push('card-back__flip');
+    flipped && cardFrontClassName.push('card-front__flip');
+
+    const handleClickFunction = () => {
+        if (handleClick) {
+            handleClick(id);
+        }
+    }   
+
+    return (
+        <Container>
+        {result.map((character: any, index: any) => (
+            <List key={index}>
+              <Item>
+                <div className={cardBackClassName.join(' ')}><Image onClick={handleClickFunction} src="../images/tag.jpeg" alt={character.name} /></div>
+                <div className={cardFrontClassName.join(' ')}><Image onClick={handleClickFunction} src={character.image} alt={character.name} /></div>
+              </Item>
+            </List>
+          ))}
+        </Container>
+    );
+};
diff --git a/memory-game-react/src/components/Footer/index.tsx b/memory-game-react/src/components/Footer/index.tsx
@@ -0,0 +1,14 @@
+import { FooterPage } from '../../styled';
+
+export function Footer() {
+  return (
+    <FooterPage>
+      <ul>
+          <li>
+            <a href="https://github.com/kmlyteixeira"><img src="../images/github.png"></img></a>
+            <a href="https://www.linkedin.com/in/kemily-teixeira/"><img src="../images/linkedin.png"></img></a>
+          </li>
+        </ul>
+    </FooterPage>
+  );
+}
diff --git a/memory-game-react/src/components/Header/index.tsx b/memory-game-react/src/components/Header/index.tsx
@@ -0,0 +1,9 @@
+import { TitlePage, HeaderPage } from '../../styled';
+
+export function Header() {
+  return (
+    <HeaderPage>
+      <TitlePage>Memory Game</TitlePage>
+    </HeaderPage>
+  );
+}
diff --git a/memory-game-react/src/index.tsx b/memory-game-react/src/index.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import { ApolloProvider } from "@apollo/client";
+
+import client from "./services/index";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <ApolloProvider client={client}>
+      <App />
+    </ApolloProvider>
+  </React.StrictMode>,
+  document.getElementById("root")
+);
diff --git a/memory-game-react/src/querys/index.ts b/memory-game-react/src/querys/index.ts
@@ -0,0 +1,13 @@
+import { gql } from "@apollo/client";
+
+const INFO_CHARACTER = gql`
+    query Char ($ListIds: [ID!]!){
+        charactersByIds (ids: $ListIds) {
+            id
+            name
+            image
+        }
+    }
+`;
+
+export default INFO_CHARACTER;
diff --git a/memory-game-react/src/react-app-env.d.ts b/memory-game-react/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/memory-game-react/src/services/index.ts b/memory-game-react/src/services/index.ts
@@ -0,0 +1,8 @@
+import { ApolloClient, InMemoryCache } from "@apollo/client";
+
+const client = new ApolloClient({
+  uri: "https://rickandmortyapi.com/graphql",
+  cache: new InMemoryCache(),
+});
+
+export default client;