New frontend

.gitignore

@@ -22,3 +22,5 @@ node_modules/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+*.m4a

frontend/package-lock.json

@@ -1610,6 +1610,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.3.tgz",
+      "integrity": "sha512-Hk8jiuT7iLOHrcjKP/ZVSyCNXK73wJAUz60xm0mVhiRujrdiI++j4duLiL282VGxwAgxetHQFfqA29LgEeSkFA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/socket.io-client": {
       "version": "1.4.32",
       "resolved": "https://registry.npmjs.org/@types/socket.io-client/-/socket.io-client-1.4.32.tgz",
@@ -4355,6 +4363,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.3.tgz",
+      "integrity": "sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "csstype": "^2.6.7"
+      }
+    },
     "dom-matches": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-matches/-/dom-matches-2.0.0.tgz",
@@ -12010,6 +12027,17 @@
         "resize-observer-polyfill": "^1.5.0"
       }
     },
+    "react-transition-group": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
+      "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",

frontend/package.json

@@ -10,11 +10,13 @@
     "@types/node": "^12.12.27",
     "@types/react": "^16.9.19",
     "@types/react-dom": "^16.9.5",
+    "@types/react-transition-group": "^4.2.3",
     "antd": "^3.26.9",
     "node-sass": "^4.13.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "3.3.1",
+    "react-transition-group": "^4.3.0",
     "socket.io-client": "^2.3.0",
     "sscaffold-css": "^0.1.0",
     "typescript": "^3.7.5",

frontend/src/components/Feed.tsx

@@ -1,22 +1,12 @@
 import React, {useState} from 'react';
 import {Col, Timeline} from "antd"
 import {Tick, TimestampEvent} from "../types/types";
-import shot from "../img/shot.png";
-import song from "../img/song.png";
-import talk from "../img/talk.png";
-import time from "../img/time.png";
 import {useSocket} from "use-socketio/lib";
-
+import FeedItem from "./FeedItem"
-const images = {
+import { TransitionGroup, CSSTransition } from 'react-transition-group'
-    shot, song, talk, time
-};
-
-interface Event extends TimestampEvent {
-    key: number
-}
 
 const Feed = () => {
-    const [feedItems, setFeedItems] = useState<Event[]>([]);
+    const [feedItems, setFeedItems] = useState<TimestampEvent[]>([]);
 
     useSocket("tick_event", async (tick: Tick) => {
         if (!tick.next) {
@@ -35,31 +25,19 @@ const Feed = () => {
             }
 
             // @ts-ignore
-            // setFeedItems(newItems);
+            setFeedItems(newItems);
         }
     });
 
     return (
-        // <Col className="feed" span={16}>
+        <Col className="time-feed" span={24} md={16}>
-        //     {feedItems.map(o =>
+            <TransitionGroup className="feed-reverse">
-        //         <Row key={o.key} className="feed-item">
+                {feedItems.map((item, i) =>
-        //             <Col span={4}>Tijd</Col>
+                    <CSSTransition timeout={500} classNames="fade" key={i}>
-        //             <Col span={3} offset={5}>{o.title}</Col>
+                        <FeedItem {...item}/>
-        //             <Col span={3}>Icoon</Col>
+                    </CSSTransition>
-        //             <Col span={3}>{o.body}</Col>
-        //         </Row>
-        //     )}
-        // </Col>
-        <Col className="time-feed" span={16}>
-            <Timeline mode="alternate" reverse={true}>
-                {feedItems.map(item =>
-                    <Timeline.Item>
-                        {/*dot={<img src={images[item.type]} alt="logo"/>}>*/}
-                        {item.text[0]} - {item.text[1]}
-                    </Timeline.Item>
                 )}
-
+            </TransitionGroup>
-            </Timeline>
         </Col>
     );
 };

frontend/src/components/FeedItem.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {TimestampEvent} from "../types/types";
+import '../css/feeditem.sass'
+import shot from "../img/shot.png";
+import song from "../img/song.png";
+import talk from "../img/talk.png";
+import time from "../img/time.png";
+
+const images = {
+    shot, song, talk, time
+};
+
+const FeedItem = (item: TimestampEvent) => {
+    return (
+        <div className="feed-item">
+            <div className="feed-item__title">
+                {item.text[0]}
+            </div>
+            <div className="feed-item__emoji">
+                <img src={images[item.type]}/>
+            </div>
+            <div className="feed-item__desc">
+                {item.text[1]}
+            </div>
+        </div>
+    );
+};
+
+export default FeedItem;

frontend/src/components/NextShot.tsx

@@ -33,7 +33,7 @@ const NextShot = () => {
     });
 
     return (
-        <Col className="sider" span={4}>
+        <Col className="sider" span={24} md={4}>
             <h1>Tijd tot volgende shot:</h1>
             <Progress type="circle"
                       percent={remainingPercentage}

frontend/src/components/ShotsTaken.tsx

@@ -18,7 +18,7 @@ const ShotsTaken = () => {
 
 
     return (
-        <Col className="sider" span={4}>
+        <Col className="sider" span={24} md={4}>
             <h1>Shots genomen:</h1>
             <Progress type="circle"
                       percent={taken}

frontend/src/css/feeditem.sass

@@ -0,0 +1,50 @@
+.feed-item
+    display: flex
+    border: 1px solid #efefef
+    border-radius: 4px
+    padding: 10px
+    margin: 10px
+    text-align: center
+    font-size: 18pt
+    font-weight: bold
+    color: rgba(0, 0, 0, 0.85);
+    box-shadow: 0px 0px 20px -8px rgba(48,75,163, 0.5)
+
+.feed-item__title
+    width: 45%
+
+.feed-item__desc
+    width: 45%
+
+.feed-item__emoji
+    width: 10%
+
+    img
+        width: 60%
+        max-width: 100%
+        max-height: 100%
+
+.feed-reverse
+    display: flex
+    flex-direction: column-reverse
+
+    
+// Animations
+.fade-enter
+  opacity: 0.01
+  max-height: 0
+
+.fade-enter.fade-enter-active 
+  opacity: 1
+  max-height: 1000px
+  transition: opacity 500ms ease-in, max-height 500ms ease-in
+
+.fade-leave
+  opacity: 1
+  max-height: 1000px
+
+.fade-leave.fade-leave-active 
+  opacity: 0.01;
+  max-height: 0
+  transition: opacity 300ms ease-in, max-height 300ms ease-in
+

frontend/src/css/lobby.sass

@@ -10,5 +10,5 @@
 
 .control 
     font-size: 1.3rem
-    margin-top: 10em
+    margin-top: 5em
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)

frontend/src/index.sass

@@ -10,7 +10,9 @@ $content-height: calc(100vh - #{$footer-height})
 
 body 
     font-family: 'SourceSansPro', sans-serif
-    background-color: #e5e5e5
+    background-color: white
+    height: 100%
+    overflow: hidden
 
 
 .feed 
@@ -19,23 +21,18 @@ body
     padding: 0.5em
 
 
-.feed-item 
-    background-color: whitesmoke
-    padding: 0.5em
-    margin-bottom: 1em
-    min-height: 5em
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)
-    border-radius: 2px
-
-
 .content 
     padding: 1rem
     height: $content-height
 
 
 .via-logo 
+    position: absolute
+    right: 0
+    bottom: 0
     width: auto
-    height: 4em
+    height: 7em
+    padding: 10px
 
 
 .sider 
@@ -46,7 +43,6 @@ h1
     min-height: 3em
 
 
-footer 
+footer
-    border-top: 1px solid lightgray
     padding: 0.25em 0.5em
     height: 4.5em