Merge branch 'develop' into 'master'

New frontend

See merge request studieverenigingvia/ict/centurion!1
master
Wilco Kruijer 5 years ago
commit 835a05fec1
  1. 2
      .gitignore
  2. 28
      frontend/package-lock.json
  3. 2
      frontend/package.json
  4. 44
      frontend/src/components/Feed.tsx
  5. 29
      frontend/src/components/FeedItem.tsx
  6. 2
      frontend/src/components/NextShot.tsx
  7. 2
      frontend/src/components/ShotsTaken.tsx
  8. 50
      frontend/src/css/feeditem.sass
  9. 2
      frontend/src/css/lobby.sass
  10. 22
      frontend/src/index.sass

2
.gitignore vendored

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

@ -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",

@ -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",

@ -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<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}>
// {feedItems.map(o =>
// <Row key={o.key} className="feed-item">
// <Col span={4}>Tijd</Col>
// <Col span={3} offset={5}>{o.title}</Col>
// <Col span={3}>Icoon</Col>
// <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>
<Col className="time-feed" span={24} md={16}>
<TransitionGroup className="feed-reverse">
{feedItems.map((item, i) =>
<CSSTransition timeout={500} classNames="fade" key={i}>
<FeedItem {...item}/>
</CSSTransition>
)}
</Timeline>
</TransitionGroup>
</Col>
);
};

@ -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;

@ -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}

@ -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}

@ -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

@ -10,7 +10,7 @@
.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)
.beer-flipped

@ -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
border-top: 1px solid lightgray
footer
padding: 0.25em 0.5em
height: 4.5em

Loading…
Cancel
Save