feat(daily): add daily game

libs/data/src/lib/data.tsx

@@ -19,6 +19,7 @@ export enum ContentType {
   Puzzle = "puzzle",
   Suitcase = "suitcase",
   TicTacToe = "tictactoe",
+  Daily = "daily",
   Decission = "decission"
 }
 

libs/ui/src/index.ts

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

libs/ui/src/lib/daily/daily.scss

@@ -0,0 +1,59 @@
+.daily {
+  display: flex;
+  flex-direction: column;
+
+  .description {
+    flex: 1 100%;
+    text-align: center;
+    margin: 10px 0;
+  }
+
+  .items {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+
+    .ddcontainer:hover {
+      transition: background-color 0.5s ease;
+      font-weight: bold;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    .item p {
+      letter-spacing:0.1em;
+      cursor: grab;
+    }
+  }
+
+  .component_box {
+    background-size: contain;
+    height: 30vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  img {
+    height: auto;
+    text-align: center;
+    width: 60%;
+    margin: 0 auto 0;
+    justify-content: center;
+    display: flex;
+    max-height: 66vh;
+  }
+
+   .show {
+    margin-bottom: 5%;
+  }
+}
+
+@media (min-width: 600px) {
+  .daily .component_box {
+    height: 45vh;
+  }
+}

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

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

libs/ui/src/lib/daily/daily.tsx

@@ -0,0 +1,159 @@
+import React, { useState } from "react";
+import { DragDropContainer, DropTarget } from 'react-drag-drop-container';
+import shortid from 'shortid';
+import { makeStyles } from '@material-ui/core/styles';
+
+import Image from "../image/image";
+
+import './daily.scss';
+
+/* eslint-disable-next-line */
+export interface DailyProps {}
+
+const dailyItems = ["Waschen und Baden", "Frühstück", "Wanderungen machen", "Sprechstunde des Lagerarztes", 
+"Lagerruhe - Post- und Zeitungsausgabe", "Tagung des Lagerparlaments", "Gemeinsame Veranstaltungen", "Zeltruhe"];
+const schedule = ["6 Uhr", "8 Uhr", "8 ½ – 12 Uhr ", "8 ½ – 9 ½", "12 ½ – 14 ½ ",
+"18 – 19 Uhr", "19 ½ – 21 Uhr", "21 Uhr"]
+const description = "Um die einzelnen Tagespunkte in die richtige Reihenfolge zu bringen, ziehe sie einfach auf das Plakat. Klicke auf 'Tagesplan anzeigen!', um dir den originalen Tagesablauf anzusehen."
+
+export const Daily = (props: DailyProps) => {
+
+  const [result, setResult] = useState(false);
+
+  const handleClick = () => {
+    setResult(true);
+    //props.onCheckDaily();
+  };
+
+  const getItems = () => {
+    if (result) return;
+    return (
+      <div className="items">
+        {dailyItems.map((item, index) =>
+          <div key={index} className="item">
+            <DragDropContainer targetKey="box" dragData={{label: item}}>
+              <p>{item}</p>
+            </DragDropContainer>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  const showStatus = () => {
+    if (result) {
+      return <Image value='daily_result' />
+    }
+    return (
+      <>
+        <Box targetKey="box"/>
+        <button type='button' className='link-button show' onClick={() => handleClick()}>Tagesplan anzeigen!</button>
+      </>
+    )
+  }
+
+  return (
+    <div className="daily">
+      <div className="description">{description}</div>
+      {getItems()}
+      {showStatus()}
+    </div>
+  )
+}
+
+const Box = (props) => {
+  const useStyles = makeStyles(() => ({
+    box: {
+      background: 'url(./assets/daily.webp) no-repeat center center'
+      },
+  }));
+  const classes = useStyles();
+
+  const [boxItems, setBoxItems] = useState([]);
+
+  const handleDrop = (e) => {
+    const items = boxItems.slice();
+    items.push({label: e.dragData.label, uid: shortid.generate()});
+    setBoxItems(items)
+    e.containerElem.style.visibility="hidden";
+  };
+
+  const swap = (fromIndex, toIndex, dragData) => {
+    const items = boxItems.slice();
+    const item = {label: dragData.label, uid: shortid.generate()};
+    items.splice(toIndex, 0, item);
+    setBoxItems(items)
+  };
+
+  const kill = (uid) => {
+    const items = boxItems.slice();
+    const index = items.findIndex((item) => {
+      return item.uid === uid
+    });
+    if (index !== -1) {
+      items.splice(index, 1);
+    }
+    setBoxItems(items)
+  };
+
+  return (
+    <DropTarget
+      onHit={handleDrop}
+      targetKey={props.targetKey}
+      dropData={{name: props.name}}>
+      <DropTarget
+        onHit={handleDrop}
+        targetKey="boxItem"
+        dropData={{name: props.name}}>
+        <div className={`component_box ${classes.box}`}>
+          {boxItems.map((item, index) => {
+            return (
+              <BoxItem key={item.uid} uid={item.uid} kill={kill} index={index} swap={swap}>
+                {item.label}
+              </BoxItem>
+            )
+          })}
+        </div>
+      </DropTarget>
+    </DropTarget>
+  );
+}
+
+const BoxItem = (props) => {
+
+  const handleDrop = (e) => {
+    e.stopPropagation();
+    props.swap(e.dragData.index, props.index, e.dragData);
+    e.containerElem.style.visibility="hidden";
+  };
+
+  const deleteMe = () => {
+    props.kill(props.uid);
+  };
+
+  return (
+    <div className="box_item_component">
+      <DragDropContainer
+          targetKey="boxItem"
+          dragData={{label: props.children, index: props.index}}
+          onDrop={deleteMe}
+          disappearDraggedElement={true}
+          dragHandleClassName="grabber">
+          <DropTarget
+            onHit={handleDrop}
+            targetKey="boxItem">
+            <div className="outer">
+              <div className="item">
+                <span className="grabber">&#8759;</span>
+                {schedule[props.index]}
+                <span>&emsp;</span>
+                {props.children}
+              </div>
+            </div>
+        </DropTarget>
+      </DragDropContainer>
+    </div>
+  );
+}
+
+export default Daily;

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

@@ -8,6 +8,7 @@ import Smokingpit from '../smokingpit/smokingpit';
 import Puzzle from '../puzzle/puzzle';
 import Suitcase from '../suitcase/suitcase';
 import TicTacToe from '../tictactoe/tictactoe';
+import Daily from '../daily/daily';
 import Redirect from '../redirect/redirect';
 import Info from '../info/info';
 
@@ -59,6 +60,7 @@ export const Group = ({
       {content.type === ContentType.Puzzle && <Puzzle/>}
       {content.type === ContentType.Suitcase && <Suitcase/>}
       {content.type === ContentType.TicTacToe && <TicTacToe/>}
+      {content.type === ContentType.Daily && <Daily/>}
     </Fragment>
   }
 

package.json

@@ -93,6 +93,7 @@
     "react-drag-drop-container": "^6.1.1",
     "react-intersection-observer": "^8.26.2",
     "react-reveal": "^1.2.2",
+    "shortid": "^2.2.15",
     "standard-version": "^8.0.0",
     "ts-jest": "25.2.1",
     "ts-node": "~7.0.0",

yarn.lock

@@ -11894,7 +11894,7 @@ nan@^2.12.1:
   resolved "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
   integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
 
-nanoid@^2.1.11:
+nanoid@^2.1.0, nanoid@^2.1.11:
   version "2.1.11"
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
   integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
@@ -15150,6 +15150,13 @@ shellwords@^0.1.1:
   resolved "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
+shortid@^2.2.15:
+  version "2.2.15"
+  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
+  integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
+  dependencies:
+    nanoid "^2.1.0"
+
 side-channel@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"