added playingcards

pages/varianter/ee.tsx

@@ -0,0 +1,19 @@
+export { default } from '../../src/ee';
+import { data } from 'src/ee/data';
+import { CardData } from "src/ee/types";
+
+interface props {
+    req: any,
+    res: any,
+  }
+
+  export const getServerSideProps = async ({ req, res }:props) => {
+
+    const cardData: CardData[] = data;
+
+    return {
+      props: {
+        employeeCardData:cardData
+      },
+    };
+  };

src/ee/card.module.css

@@ -0,0 +1,219 @@
+
+.cardContainer {
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    min-height: calc(1920px/3);
+    min-width: calc(1080px/3);
+    cursor: pointer;
+}
+
+.cardFrontWrapper {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: calc(45px/3);
+    width: 100%;
+    height: 100%;
+    padding: .6rem;
+    background: var(--Secondary-1-D2, #282552);
+    color:#000;
+    font-family: Recoleta;
+    z-index: 3;
+    backface-visibility: hidden;
+    transition: transform 0.6s;
+}
+
+.image {
+    max-width: calc(1080px/3);
+    max-height:calc(900px/3);
+
+    min-width: calc(1080px/3);
+    min-height:calc(900px/3);
+    padding: 0rem .6rem 0rem .6rem;
+    object-fit:cover;
+    border-radius: calc(20px/3);
+}
+
+.levelBall {
+    position: absolute;
+    top: .2rem;
+    right: .2rem;
+    width: 3.5rem;
+    height: 3.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 3;
+    font-size: 1.4rem;
+    font-weight: 500;
+}
+
+.starSvg {
+    position: absolute;
+    width: 100%;
+    z-index: -1;
+}
+
+.contentWrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+}
+
+.headerWrapper {
+    position: relative;
+    width: 100%;
+    z-index: 2;
+    margin-top: -.4rem;
+
+}
+
+.headerWrapper::before {
+    content: "";
+    position: absolute;
+    top: -6px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('./utils/headerSvg.svg');
+    background-repeat: no-repeat;
+    background-size: 100%;
+    z-index: -1;
+}
+
+.header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    width: 100%;
+}
+
+.headerInfoLeft {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding-left: .5rem;
+    padding: .8rem 0 .8rem .8rem;
+}
+
+.headerInfoLeft h3 {
+    font-size: 20px;
+    font-weight: 500;
+}
+
+.headerInfoLeft p {
+    font-size: 12px;
+    font-weight: 400;
+
+}
+
+.headerInfoRight {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: .8rem .8rem .8rem 0;
+    gap:.3rem;
+}
+
+.skill {
+    margin: 0;
+}
+
+.iconImg {
+    width: 26px;
+    height: 26px;
+}
+
+.body { 
+    width: 100%;
+    height: 100%;
+}
+
+.body p {
+    font-size: 14px;
+    line-height: 2;
+    padding: .5rem;
+    text-align: left;
+}
+
+.footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    padding: .5rem;
+    margin: 0;
+
+}
+
+.footer p {
+    margin: 0;
+    padding: 0;
+    font-size: 14px;
+}
+
+.footer p:nth-child(1) {
+    font-weight: 600;
+    color: red;
+}
+
+.footer p:nth-child(1) span {
+    font-weight: 300;
+    color: black;
+}
+
+.footer p:nth-child(2) {
+    font-weight: 300;
+}
+
+.footerSvg {
+    width: 90%;
+    align-self: flex-end;
+}
+
+/* Card Back */
+
+.cardBackWrapper {
+    position: absolute;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    backface-visibility: hidden;
+    transition: transform 0.6s;
+
+}
+
+.cardBack {
+    height: calc(1920px/3);
+    width: calc(1080px/3);
+}
+
+.flipButton {
+    cursor:pointer;
+
+}
+
+.cardFrontWrapper {
+    transform: rotateY(0deg);
+}
+
+.cardBackWrapper {
+    transform: rotateY(180deg);
+}
+
+.flipped .cardFrontWrapper {
+    transform: rotateY(-180deg);
+}
+
+.flipped .cardBackWrapper {
+    transform: rotateY(0deg);
+}

src/ee/cardComponent.tsx

@@ -0,0 +1,99 @@
+import { CardData, employeeType, skillsMap, skillsTypes } from "./types";
+import styles from "./card.module.css";
+import developerSvg from "./utils/developerSvg.svg";
+import designerSvg from "./utils/designSvg.svg";
+import projectManagerSvg from "./utils/projectManagerSvg.svg";
+import footerSvg from "./utils/footerSvg.svg";
+import starSvg from "./utils/starSvg.svg";
+import cardBack from './utils/baksidacardBack.png';
+import { useState } from "react";
+
+export default function CardComponent({cardData}:{cardData:CardData}) {
+    const [isFlipped, setIsFlipped] = useState(false);
+
+    const getColors = () => {
+        let colors = {
+            mainColor: "",
+            headerSvgLink: ""
+        };
+
+        switch(cardData.stats.type) {
+            case employeeType.developer:
+                colors.mainColor = "#FFF3F2";
+                colors.headerSvgLink = developerSvg;
+                break;
+            case employeeType.designer:
+                colors.mainColor = "#CDF8F4";
+                colors.headerSvgLink = designerSvg;
+                break;
+            case employeeType.projectManager:
+                colors.mainColor = "#B7B4DE";
+                colors.headerSvgLink = projectManagerSvg;
+                break;
+        }
+
+        return colors;
+
+    }
+
+    const colors = getColors();
+
+    const flipCard = () => {
+        setIsFlipped(!isFlipped);
+    }
+
+
+    return (
+        <div className={`${styles.cardContainer} ${isFlipped ? styles.flipped : ''}`} onClick={flipCard}>
+
+                <div className={styles.cardFrontWrapper}>
+                    <div className={styles.levelBall}>
+                        <img className={styles.starSvg} src={starSvg} alt={'star'} />
+                        {cardData.stats.level}
+                    </div>
+                    <img className={styles.image} src={cardData.image} alt={cardData.name} />
+
+                    <div className={styles.contentWrapper} style={{backgroundColor: colors.mainColor}}>
+                        <div className={styles.headerWrapper}>
+                            <div className={styles.header} style={{ backgroundImage: `url(${colors.headerSvgLink})` }}>
+                                <div className={styles.headerInfoLeft}>
+                                    <h3>{cardData.name}</h3>
+                                    <p>{cardData.title}</p>
+                                </div>
+                                <div className={styles.headerInfoRight}>
+                                    {cardData.skills.map((skill) => {
+                                        const skillString:string = skillsTypes[`${skill}`]
+
+                                        //@ts-ignore
+                                        const icon = skillsMap[`${skillString}`];
+
+                                        return (
+                                            <p key={skill} className={styles.skill}><img className={styles.iconImg} src={icon} alt={skillString}/></p>
+                                        );
+
+                                    })}
+                                </div>
+                            </div>
+
+                        </div>
+
+                        <div className={styles.body}>
+                            <p>{cardData.description}</p>
+                        </div>
+
+                        <img className={styles.footerSvg} src={footerSvg} alt={'footer image'} />
+                        <div className={styles.footer}>
+                            <p><span>XP</span> {cardData.stats.exp}</p>
+                            <p>{cardData.traits.join('/')}</p>
+                        </div>
+
+                    </div>
+
+                </div>
+
+                <div className={styles.cardBackWrapper}>
+                    <img className={styles.cardBack} src={cardBack} alt={'backside of the card'} />
+                </div>
+        </div>
+    );
+}