From 21044f1bd440f6fb681fe9f0d21565a00a99b9e1 Mon Sep 17 00:00:00 2001
From: LucianoMariotti <luciano.mariotti99@gmail.com>
Date: Fri, 2 Sep 2022 02:26:34 -0300
Subject: [PATCH 1/2] add GameCard Component

---
 .../components/studySession/GameCard.tsx      | 93 +++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 modules/shared/components/studySession/GameCard.tsx

diff --git a/modules/shared/components/studySession/GameCard.tsx b/modules/shared/components/studySession/GameCard.tsx
new file mode 100644
index 0000000..b2d3e15
--- /dev/null
+++ b/modules/shared/components/studySession/GameCard.tsx
@@ -0,0 +1,93 @@
+import React, { useState } from "react";
+import { Box, Text } from "@chakra-ui/react";
+import { motion } from "framer-motion";
+import Image from "next/image";
+import icon from "@/public/favicon.ico";
+
+interface CardSide {
+  image?: string;
+  text: string;
+}
+
+interface GameCardPops {
+  sideA: CardSide;
+  sideB: CardSide;
+}
+
+const rotateFront = {
+  transform: "perspective(500px) rotateY(180deg)",
+};
+const rotateBack = {
+  transform: "perspective(500px) rotateY(360deg)",
+};
+
+export const GameCard: React.FC<GameCardPops> = ({ sideA, sideB }) => {
+  const [flip, setFlip] = useState(false);
+  const MotionBox = motion(Box);
+
+  return (
+    <>
+      <Box>
+        <MotionBox
+          onClick={() => setFlip(!flip)}
+          borderRadius="10px"
+          width={{ base: "250px", md: "500px" }}
+          height="300px"
+          position="relative"
+          cursor="pointer"
+        >
+          <MotionBox
+            bg="white"
+            //
+            border="2px"
+            borderColor="gray.50"
+            position="absolute"
+            width="100%"
+            height="100%"
+            borderRadius="10px"
+            display="flex"
+            flexDirection="column"
+            justifyContent="center"
+            alignItems="center"
+            //
+            style={{
+              backfaceVisibility: "hidden",
+            }}
+            animate={{ rotateY: flip ? [0, 360] : [360, 0] }}
+            transition={{ duration: 1 }}
+          >
+            {sideA.image && <img src={sideA.image} width={150} height={150} />}
+            <Text mt={10} fontWeight={600}>
+              {sideA.text}
+            </Text>
+          </MotionBox>
+          <MotionBox
+            bg="white"
+            //
+            border="2px"
+            borderColor="gray.50"
+            position="absolute"
+            width="100%"
+            height="100%"
+            borderRadius="10px"
+            display="flex"
+            flexDirection="column"
+            justifyContent="center"
+            alignItems="center"
+            //
+            style={{
+              backfaceVisibility: "hidden",
+            }}
+            animate={{ rotateY: flip ? [180, 0] : [0, 180] }}
+            transition={{ duration: 1 }}
+          >
+            {sideB.image && <img src={sideB.image} width={150} height={150} />}
+            <Text mt={10} fontWeight={600}>
+              {sideB.text}
+            </Text>
+          </MotionBox>
+        </MotionBox>
+      </Box>
+    </>
+  );
+};

From f410b43f14832933d4b04a1b8b7001f2f1615ae8 Mon Sep 17 00:00:00 2001
From: LucianoMariotti <luciano.mariotti99@gmail.com>
Date: Fri, 2 Sep 2022 18:24:22 -0300
Subject: [PATCH 2/2] add gamecard component

---
 modules/shared/components/studySession/GameCard.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/modules/shared/components/studySession/GameCard.tsx b/modules/shared/components/studySession/GameCard.tsx
index b2d3e15..9476401 100644
--- a/modules/shared/components/studySession/GameCard.tsx
+++ b/modules/shared/components/studySession/GameCard.tsx
@@ -1,8 +1,6 @@
 import React, { useState } from "react";
 import { Box, Text } from "@chakra-ui/react";
 import { motion } from "framer-motion";
-import Image from "next/image";
-import icon from "@/public/favicon.ico";
 
 interface CardSide {
   image?: string;
@@ -14,13 +12,6 @@ interface GameCardPops {
   sideB: CardSide;
 }
 
-const rotateFront = {
-  transform: "perspective(500px) rotateY(180deg)",
-};
-const rotateBack = {
-  transform: "perspective(500px) rotateY(360deg)",
-};
-
 export const GameCard: React.FC<GameCardPops> = ({ sideA, sideB }) => {
   const [flip, setFlip] = useState(false);
   const MotionBox = motion(Box);