From 6d1c1c4fe834f38374df183b0a46994a9cd945d9 Mon Sep 17 00:00:00 2001 From: Jan Schutte Date: Wed, 19 Feb 2020 18:07:02 +0100 Subject: [PATCH] New frontend --- .gitignore | 2 ++ frontend/package-lock.json | 28 +++++++++++++++ frontend/package.json | 2 ++ frontend/src/components/Feed.tsx | 44 ++++++----------------- frontend/src/components/FeedItem.tsx | 29 +++++++++++++++ frontend/src/components/NextShot.tsx | 2 +- frontend/src/components/ShotsTaken.tsx | 2 +- frontend/src/css/feeditem.sass | 50 ++++++++++++++++++++++++++ frontend/src/css/lobby.sass | 2 +- frontend/src/index.sass | 22 +++++------- 10 files changed, 134 insertions(+), 49 deletions(-) create mode 100644 frontend/src/components/FeedItem.tsx create mode 100644 frontend/src/css/feeditem.sass diff --git a/.gitignore b/.gitignore index 5a1b439..33d000d 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,5 @@ node_modules/ npm-debug.log* yarn-debug.log* yarn-error.log* + +*.m4a \ No newline at end of file diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 7d145cf..50ae676 100644 --- a/frontend/package-lock.json +++ b/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", diff --git a/frontend/package.json b/frontend/package.json index 9547f1f..f0eda4e 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/components/Feed.tsx b/frontend/src/components/Feed.tsx index d0d9206..3cda1bc 100644 --- a/frontend/src/components/Feed.tsx +++ b/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"; - -const images = { - shot, song, talk, time -}; - -interface Event extends TimestampEvent { - key: number -} +import FeedItem from "./FeedItem" +import { TransitionGroup, CSSTransition } from 'react-transition-group' const Feed = () => { - const [feedItems, setFeedItems] = useState([]); + const [feedItems, setFeedItems] = useState([]); useSocket("tick_event", async (tick: Tick) => { if (!tick.next) { @@ -35,31 +25,19 @@ const Feed = () => { } // @ts-ignore - // setFeedItems(newItems); + setFeedItems(newItems); } }); return ( - // - // {feedItems.map(o => - // - // Tijd - // {o.title} - // Icoon - // {o.body} - // - // )} - // - - - {feedItems.map(item => - - {/*dot={logo}>*/} - {item.text[0]} - {item.text[1]} - + + + {feedItems.map((item, i) => + + + )} - - + ); }; diff --git a/frontend/src/components/FeedItem.tsx b/frontend/src/components/FeedItem.tsx new file mode 100644 index 0000000..efcae16 --- /dev/null +++ b/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 ( +
+
+ {item.text[0]} +
+
+ +
+
+ {item.text[1]} +
+
+ ); +}; + +export default FeedItem; diff --git a/frontend/src/components/NextShot.tsx b/frontend/src/components/NextShot.tsx index 6e69fa7..bcc0b2d 100644 --- a/frontend/src/components/NextShot.tsx +++ b/frontend/src/components/NextShot.tsx @@ -33,7 +33,7 @@ const NextShot = () => { }); return ( - +

Tijd tot volgende shot:

{ return ( - +

Shots genomen: