feat(memory): add memory game

libs/ui/src/index.ts

@@ -1,3 +1,4 @@
+export * from './lib/memory/memory';
 export * from './lib/daily/daily';
 export * from './lib/tictactoe/tictactoe';
 export * from './lib/suitcase/suitcase';

libs/ui/src/lib/group/group.tsx

@@ -6,6 +6,7 @@ import Text from '../text/text';
 import Decission from '../decission/decission';
 import Smokingpit from '../smokingpit/smokingpit';
 import Puzzle from '../puzzle/puzzle';
+import Memory from '../memory/memory';
 import Suitcase from '../suitcase/suitcase';
 import TicTacToe from '../tictactoe/tictactoe';
 import Daily from '../daily/daily';
@@ -23,6 +24,7 @@ const ContentType  = {
   image: Image,
   smokingpit: Smokingpit,
   puzzle: Puzzle,
+  memory: Memory,
   suitcase: Suitcase,
   tictactoe: TicTacToe,
   daily: Daily,

libs/ui/src/lib/memory/memory.scss

@@ -0,0 +1,66 @@
+.memory {
+  display: flex;
+  flex-wrap: wrap;
+
+  .description {
+    width: 80%;
+    margin: 0 auto;
+    text-align: center;
+  }
+
+  .cards {
+    width: 600px;
+    margin: 0 auto;
+  }
+
+  .card {
+    width: 150px;
+    height: 150px;
+    display: inline-block;
+    transition: 0.6s;
+    transform-style: preserve-3d;
+    position: relative;
+    border: 1px solid rgba(0,0,0,.125);
+    border-radius: .25rem;
+    cursor: pointer;
+
+    &::after {
+      content: "";
+      background: linear-gradient(to right, #3f0041, #9f3f2f);
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      transform: rotateY(0) perspective(100px);
+      transition: .4s;
+      backface-visibility: hidden;
+    }
+  }
+
+  img {
+    width: 148px;
+    height: 148px;
+    position: absolute;
+    overflow: hidden;
+    object-position: center;
+    transform: rotateY(180deg) perspective(100px);
+    transition: .4s;
+    backface-visibility: hidden;
+  }
+
+  .grid-card-show {
+    &::after {
+      transform: rotateY(180deg) perspective(100px);
+    }
+
+    .grid-img {
+      transform: rotateY(0) perspective(100px);
+    }
+  }
+
+  .grid-card-finished {
+    opacity: .5;
+  }
+
+}

libs/ui/src/lib/memory/memory.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Memory from './memory';
+
+describe(' Memory', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Memory />);
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/ui/src/lib/memory/memory.tsx

@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from "react";
+
+import Image from "../image/image";
+
+import './memory.scss';
+
+/* eslint-disable-next-line */
+export interface MemoryProps {}
+
+const items = ['abfahrt','abmarsch','kochen','lagerstruktur','morgen','schlafen','tanzen','waschen'];
+
+export const Memory = (props: MemoryProps) => {
+
+  const [list, setList] = useState([]);
+  const [visibleItems, setVisibleItems] = useState([]);
+  const [finishedItems, setFinishedItems] = useState([]);
+  const [winner, setWinner] = useState(false);
+
+  const checkItems = (firstIndex, secondIndex) => {
+    if (
+      firstIndex !== secondIndex &&
+      list[firstIndex].name === list[secondIndex].name
+    ) {
+      setFinishedItems([...finishedItems, firstIndex, secondIndex]);
+    } else {
+      setTimeout(() => {
+        setVisibleItems([]);
+      }, 600);
+    }
+  };
+
+  useEffect(
+    () => {
+      setList(items
+        .concat(items).map((name, i) => ({
+          name,
+          id: i
+        }))
+        .sort(() => {
+          return 0.5 - Math.random();
+        }));
+    },
+    []
+  );
+
+  useEffect(
+    () => {
+      if (finishedItems.length > 0 && finishedItems.length === list.length) {
+        setWinner(true);
+      }
+    },
+    [finishedItems, list]
+  );
+
+  return (
+    <div>
+      <Grid
+        list={list}
+        visibleItems={visibleItems}
+        setVisibleItems={setVisibleItems}
+        finishedItems={finishedItems}
+        checkItems={checkItems}
+      />
+      {winner && (
+        <div>
+          You Win !
+          <br />
+        </div>
+      )}
+    </div>
+  );
+}
+
+const Grid = props => {
+  const {
+    list,
+    visibleItems,
+    setVisibleItems,
+    finishedItems,
+    checkItems
+  } = props;
+
+  return (
+    <div className="memory">
+      <p className="description">In diesem Aufdeck-Spiel geht es darum, gleiche Paare zu finden. Diese bestehen aus einer Zeichnung und dem dazu passenden Foto. Klicke einfach auf die Kärtchen, um zu sehen, was sich auf der Rückseite befindet. Zusammenpassende Paare bleiben aufgedeckt liegen.</p>
+      <div className="cards">
+        {list.map((item, index) => (
+          <Card
+            key={item.id}
+            className={`card ${
+              visibleItems.includes(index) ? "grid-card-show" : ""
+            } ${
+              finishedItems.includes(index)
+                ? "grid-card-show grid-card-finished"
+                : ""
+            }`}
+            onClick={() => {
+              if (!finishedItems.includes(index)) {
+                switch (visibleItems.length) {
+                  case 0:
+                    setVisibleItems([index]);
+                    break;
+                  case 1:
+                    if (visibleItems[0] !== index) {
+                      setVisibleItems(visibleItems.concat(index));
+                      checkItems(visibleItems[0], index);
+                    }
+                    break;
+                  case 2:
+                    setVisibleItems([index]);
+                    break;
+                  default:
+                    setVisibleItems([]);
+                }
+              }
+            }}
+            name={item.name}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+Grid.defaultProps = {
+  list: []
+};
+
+const Card = props => {
+  const { name, className, onClick } = props;
+  return (
+    <div className={`${className}`} onClick={onClick}>
+      <Image value={`memory_${name}`} />
+    </div>
+  );
+};
+
+export default Memory;