harambee-public
/
centurion
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

New frontend

Browse Source
master
Jan Schutte 5 years ago
parent 8482deb7e5
commit 6d1c1c4fe8
10 changed files with 134 additions and 49 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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. 20
      frontend/src/index.sass

2
.gitignore vendored
Unescape View File

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

28
frontend/package-lock.json generated
Unescape View File

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

2
frontend/package.json
Unescape View File

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

44
frontend/src/components/Feed.tsx
Unescape View File

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

29
frontend/src/components/FeedItem.tsx
Unescape View File

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

2
frontend/src/components/NextShot.tsx
Unescape View File

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

2
frontend/src/components/ShotsTaken.tsx
Unescape View File

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

50
frontend/src/css/feeditem.sass
Unescape View File

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

2
frontend/src/css/lobby.sass
Unescape View File

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

20
frontend/src/index.sass
Unescape View File

@ -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
@ -47,6 +44,5 @@ h1
footer
border-top: 1px solid lightgray
padding: 0.25em 0.5em
height: 4.5em

Write Preview
Loading…
Cancel
Save