From 5796a2bc40dae47911b93f41b11374a785585777 Mon Sep 17 00:00:00 2001 From: prastut Date: Tue, 7 Aug 2018 23:11:44 +0530 Subject: [PATCH] WIP --- trenity/client/src/components/Emoji/index.js | 72 ++++++++++ trenity/client/src/components/Event/index.js | 30 +++++ .../src/components/EventsTimeline/index.js | 38 +----- .../client/src/components/Headings/index.js | 12 +- .../src/components/MatchNavBar/index.js | 53 -------- .../client/src/components/MatchTile/index.js | 24 ++-- trenity/client/src/components/Navbar/index.js | 26 +--- .../client/src/components/ScoreCard/index.js | 51 +++++++ .../src/components/SentimentBar/index.js | 52 ++++++++ .../src/components/TopicCard/SentimentBar.js | 65 --------- .../client/src/components/TopicCard/emoji.js | 87 ------------ .../client/src/components/TopicCard/index.js | 125 +++++++++--------- .../src/components/TrendingEntities/index.js | 61 ++------- .../src/components/TwitterUser/index.js | 26 ++-- trenity/client/src/helper.js | 109 +++++++-------- trenity/client/src/scenes/Home/index.js | 7 +- .../scenes/Match/SecondScreenExperience.js | 2 +- trenity/client/src/scenes/Match/index.js | 14 +- trenity/server/entityList.js | 20 +-- 19 files changed, 391 insertions(+), 483 deletions(-) create mode 100644 trenity/client/src/components/Emoji/index.js create mode 100644 trenity/client/src/components/Event/index.js delete mode 100644 trenity/client/src/components/MatchNavBar/index.js create mode 100644 trenity/client/src/components/ScoreCard/index.js create mode 100644 trenity/client/src/components/SentimentBar/index.js delete mode 100644 trenity/client/src/components/TopicCard/SentimentBar.js delete mode 100644 trenity/client/src/components/TopicCard/emoji.js diff --git a/trenity/client/src/components/Emoji/index.js b/trenity/client/src/components/Emoji/index.js new file mode 100644 index 0000000..f2ee5b2 --- /dev/null +++ b/trenity/client/src/components/Emoji/index.js @@ -0,0 +1,72 @@ +import React from "react"; +import { withStyles } from "@material-ui/core"; +import { TransitionGroup, CSSTransition } from "react-transition-group"; + +import { textToEmoji } from "../../helper"; + +const styles = { + root: { + position: "absolute", + right: "15%", + zIndex: "2", + transition: "all 0.3s ease" + }, + enter: { + opacity: "1 !important", + bottom: "calc(40% - 25px)" + }, + enterActive: { + opacity: "1 !important", + bottom: "calc(70% - 25px)" + }, + enterDone: { + bottom: "calc(150% - 25px)", + opacity: "0" + }, + exit: { + bottom: "calc(150% - 25px)", + opacity: "0" + }, + exitActive: { + bottom: "calc(150% - 25px)", + opacity: "0" + }, + hack: { + position: "absolute", + opacity: "0" + } +}; + +const Emoji = ({ classes, emoji }) => { + const emojiAnimation = { + enter: ["enter", classes.root, classes.enter].join(" "), + enterActive: ["enter-active", classes.root, classes.enterActive].join(" "), + enterDone: ["enter-done", classes.root, classes.enterDone].join(" "), + exit: ["exit", classes.root, classes.exit].join(" "), + exitActive: ["exit-active", classes.root, classes.exitActive].join(" "), + exitDone: ["exit-done", classes.exitActive].join(" ") + }; + return ( + + + {textToEmoji(emoji.split("-")[0])} + + + ); +}; + +export default withStyles(styles)(Emoji); diff --git a/trenity/client/src/components/Event/index.js b/trenity/client/src/components/Event/index.js new file mode 100644 index 0000000..7d8f256 --- /dev/null +++ b/trenity/client/src/components/Event/index.js @@ -0,0 +1,30 @@ +import React from "react"; +import moment from "moment"; +import { withStyles } from "@material-ui/core/styles"; +import { eventsToEmoji } from "../../helper"; + +const styles = { + root: { + textAlign: "center" + }, + emoji: { + fontSize: "1.5em", + margin: "0 0 5px 0" + }, + time: { + margin: 0 + } +}; + +const Event = ({ classes, eventObj }) => ( +
+
+ {eventsToEmoji(eventObj.event.toUpperCase())} +
+
+ {moment.utc(eventObj.timeStamp).format("m")}' +
+
+); + +export default withStyles(styles)(Event); diff --git a/trenity/client/src/components/EventsTimeline/index.js b/trenity/client/src/components/EventsTimeline/index.js index 78e53a5..e96c657 100644 --- a/trenity/client/src/components/EventsTimeline/index.js +++ b/trenity/client/src/components/EventsTimeline/index.js @@ -1,29 +1,8 @@ import React, { Component } from "react"; -import moment from "moment"; import { isEmpty } from "ramda"; -import { withStyles } from "@material-ui/core/styles"; import Swiper from "react-id-swiper"; -import { eventsToEmoji } from "../../helper"; - -const styles = { - root: { - display: "flex", - alignItems: "center", - overflowX: "scroll", - whiteSpace: "nowrap" - }, - eachEventContainer: { - textAlign: "center" - }, - eventEmoji: { - fontSize: "1.5em", - margin: "0 0 5px 0" - }, - eventTime: { - margin: 0 - } -}; +import Event from "../../components/Event"; const PARAMS = { slidesPerView: 4, @@ -36,7 +15,6 @@ const PARAMS = { class EventsTimeline extends Component { constructor(props) { super(props); - this.state = {}; this.eventsAnimation = null; } @@ -68,7 +46,6 @@ class EventsTimeline extends Component { }; render() { - const { classes, events } = this.props; return ( - {events.map(e => ( -
-
- {eventsToEmoji(e.event.toUpperCase())} -
-
- {moment.utc(e.timeStamp).format("m")}' -
+ {this.props.events.map(eventObj => ( +
+
))} @@ -92,4 +64,4 @@ class EventsTimeline extends Component { } } -export default withStyles(styles)(EventsTimeline); +export default EventsTimeline; diff --git a/trenity/client/src/components/Headings/index.js b/trenity/client/src/components/Headings/index.js index 750541c..e8fc026 100644 --- a/trenity/client/src/components/Headings/index.js +++ b/trenity/client/src/components/Headings/index.js @@ -1,4 +1,4 @@ -import React, { Component } from "react"; +import React from "react"; import { withStyles } from "@material-ui/core/styles"; const styles = { @@ -9,12 +9,8 @@ const styles = { } }; -class Headings extends Component { - render() { - const { classes, text } = this.props; - - return
{text}
; - } -} +const Headings = ({ classes, text }) => ( +
{text}
+); export default withStyles(styles)(Headings); diff --git a/trenity/client/src/components/MatchNavBar/index.js b/trenity/client/src/components/MatchNavBar/index.js deleted file mode 100644 index c7fcbe5..0000000 --- a/trenity/client/src/components/MatchNavBar/index.js +++ /dev/null @@ -1,53 +0,0 @@ -import React from "react"; -import Grid from "@material-ui/core/Grid"; -import { withStyles } from "@material-ui/core/styles"; - -const styles = { - root: { - height: "calc(100vh*0.10)", - display: "flex", - alignItems: "center", - width: "calc(100vw*0.8)", - maxWidth: "1000px", - margin: "0 auto" - }, - textRight: { - textAlign: "right" - }, - textCenter: { - textAlign: "center" - }, - scoreAndTimeContainer: { - display: "flex", - flexDirection: "column", - justifyContent: "center", - alignItems: "center" - }, - score: { - fontSize: "2em" - }, - timeInsideMatch: { - fontSize: "0.8em" - } -}; - -const MatchNavBar = ({ classes, teamOne, score, teamTwo, timeInsideMatch }) => ( - - - {teamOne} - - -
- 0 - 0 - - {timeInsideMatch.format("HH:mm:ss")} - -
- - - {teamTwo} - - -); - -export default withStyles(styles)(MatchNavBar); diff --git a/trenity/client/src/components/MatchTile/index.js b/trenity/client/src/components/MatchTile/index.js index 5cfab0a..f7af442 100644 --- a/trenity/client/src/components/MatchTile/index.js +++ b/trenity/client/src/components/MatchTile/index.js @@ -1,4 +1,4 @@ -import React, { Component } from "react"; +import React from "react"; import { withStyles } from "@material-ui/core/styles"; const styles = { @@ -13,19 +13,13 @@ const styles = { } }; -class MatchTile extends Component { - render() { - const { classes, image, index, handleClick } = this.props; - - return ( -
(handleClick ? handleClick(index) : null)} - > - -
- ); - } -} +const MatchTile = ({ classes, image, index, handleClick }) => ( +
(handleClick ? handleClick(index) : null)} + > + +
+); export default withStyles(styles)(MatchTile); diff --git a/trenity/client/src/components/Navbar/index.js b/trenity/client/src/components/Navbar/index.js index 700749a..fb312e1 100644 --- a/trenity/client/src/components/Navbar/index.js +++ b/trenity/client/src/components/Navbar/index.js @@ -1,35 +1,21 @@ -import React, { Component } from "react"; - -// import Typography from "@material-ui/core/Typography"; -// import ReactSwipe from "react-swipe"; -// import Grid from "@material-ui/core/Grid"; +import React from "react"; import { withStyles } from "@material-ui/core/styles"; const styles = { root: { width: "calc(100vw*0.8)", - maxWidth: "1000px", height: "calc(100vh*0.10)", - maxHeight: "60px", + maxWidth: "1000px", + maxHeight: "70px", margin: "0 auto", color: "white", display: "flex", alignItems: "center" - }, - brand: { - fontSize: "1.5em" } }; -class Navbar extends Component { - render() { - const { classes, text } = this.props; - return ( -
-
{text}
-
- ); - } -} +const Navbar = ({ classes, children }) => ( +
{children}
+); export default withStyles(styles)(Navbar); diff --git a/trenity/client/src/components/ScoreCard/index.js b/trenity/client/src/components/ScoreCard/index.js new file mode 100644 index 0000000..d837d85 --- /dev/null +++ b/trenity/client/src/components/ScoreCard/index.js @@ -0,0 +1,51 @@ +import React from "react"; +import { withStyles } from "@material-ui/core/styles"; + +const styles = { + root: { + display: "flex", + alignItems: "center", + width: "100%", + height: "100%" + }, + elements: { + flex: "1 0 33.33%" + }, + textRight: { + textAlign: "right" + }, + textCenter: { + textAlign: "center" + }, + scoreAndTimeContainer: { + display: "flex", + flexDirection: "column", + justifyContent: "center", + alignItems: "center" + }, + score: { + fontSize: "2em" + }, + timeInsideMatch: { + fontSize: "0.8em" + } +}; + +const ScoreCard = ({ classes, teamOne, score, teamTwo, timeInsideMatch }) => ( +
+
+ {teamOne} +
+
+ 0 - 0 + + {timeInsideMatch.format("HH:mm:ss")} + +
+
{teamTwo}
+
+); + +export default withStyles(styles)(ScoreCard); diff --git a/trenity/client/src/components/SentimentBar/index.js b/trenity/client/src/components/SentimentBar/index.js new file mode 100644 index 0000000..f13f77b --- /dev/null +++ b/trenity/client/src/components/SentimentBar/index.js @@ -0,0 +1,52 @@ +import React from "react"; +import { withStyles } from "@material-ui/core/styles"; +import { positiveSentimentToEmoji } from "../../helper"; + +const styles = { + root: { + display: "flex", + alignItems: "center", + position: "relative", + width: "100%" + }, + positive: { + background: "#00FFB6", + borderRadius: "5px", + flexGrow: "0", + flexShrink: "0", + flexBasis: "50%", + height: "10px" + }, + emoji: { + transition: "left 0.5s linear", + position: "absolute", + zIndex: 1, + left: 0, + fontSize: "1.5em" + }, + negative: { + height: "10px", + background: "#F15959", + borderRadius: "5px", + flexGrow: "0", + flexShrink: "0", + flexBasis: "50%" + } +}; + +const SentimentBar = ({ classes, positive, negative }) => ( +
+
+ + {positiveSentimentToEmoji(positive)} + +
+
+); + +export default withStyles(styles)(SentimentBar); diff --git a/trenity/client/src/components/TopicCard/SentimentBar.js b/trenity/client/src/components/TopicCard/SentimentBar.js deleted file mode 100644 index 25de23b..0000000 --- a/trenity/client/src/components/TopicCard/SentimentBar.js +++ /dev/null @@ -1,65 +0,0 @@ -import React, { PureComponent } from "react"; -import { withStyles } from "@material-ui/core/styles"; -import { positiveSentimentToEmoji } from "../../helper"; - -const styles = { - root: { - flex: "0 1 80%", - height: "30%", - display: "flex", - alignItems: "center", - position: "relative" - }, - positive: { - background: "#00FFB6", - borderRadius: "5px", - flexGrow: "0", - flexShrink: "0", - flexBasis: "50%", - height: "10px" - }, - emoji: { - transition: "left 0.5s linear", - position: "absolute", - zIndex: 1, - left: 0, - fontSize: "1.5em" - }, - negetive: { - height: "10px", - background: "#F15959", - borderRadius: "5px", - flexGrow: "0", - flexShrink: "0", - flexBasis: "50%" - } -}; - -class SentimentBar extends PureComponent { - render() { - const { classes, positive, negetive } = this.props; - - return ( -
-
- - {positiveSentimentToEmoji(positive)} - -
-
- ); - } -} - -export default withStyles(styles)(SentimentBar); diff --git a/trenity/client/src/components/TopicCard/emoji.js b/trenity/client/src/components/TopicCard/emoji.js deleted file mode 100644 index ef391aa..0000000 --- a/trenity/client/src/components/TopicCard/emoji.js +++ /dev/null @@ -1,87 +0,0 @@ -import React, { Component } from "react"; -import { withStyles } from "@material-ui/core"; -import { TransitionGroup, CSSTransition } from "react-transition-group"; - -import { textToEmoji } from "../../helper"; - -const styles = { - emoji: { - position: "absolute", - right: "15%", - zIndex: "2", - transition: "all 0.3s ease" - }, - emojiEnter: { - opacity: "1", - bottom: "calc(40% - 25px)" - }, - emojiEnterActive: { - opacity: "1", - bottom: "calc(70% - 25px)" - }, - emojiEnterDone: { - bottom: "calc(150% - 25px)", - opacity: "0" - }, - emojiExit: { - bottom: "calc(150% - 25px)", - opacity: "0" - }, - emojiExitActive: { - bottom: "calc(150% - 25px)", - opacity: "0" - }, - hack: { - position: "absolute" - } -}; - -class Emoji extends Component { - state = {}; - render() { - const { classes, emoji } = this.props; - - const emojiAnimation = { - enter: ["enter", classes.emoji, classes.emojiEnter].join(" "), - enterActive: [ - "enter-active", - classes.emoji, - classes.emojiEnterActive - ].join(" "), - enterDone: ["enter-done", classes.emoji, classes.emojiEnterDone].join( - " " - ), - exit: ["exit", classes.emoji, classes.emojiExit].join(" "), - exitActive: ["exit-active", classes.emoji, classes.emojiExitActive].join( - " " - ), - exitDone: ["exit-done", classes.emojiExitActive].join(" ") - }; - - return ( - - - - {textToEmoji(emoji.split("-")[0])} - - - - ); - } -} - -export default withStyles(styles)(Emoji); diff --git a/trenity/client/src/components/TopicCard/index.js b/trenity/client/src/components/TopicCard/index.js index 5af0086..afafee4 100644 --- a/trenity/client/src/components/TopicCard/index.js +++ b/trenity/client/src/components/TopicCard/index.js @@ -1,9 +1,6 @@ -import React, { PureComponent } from "react"; +import React from "react"; import { withStyles } from "@material-ui/core/styles"; -import Emoji from "./emoji"; -import SentimentBar from "./SentimentBar"; - const styles = { root: { position: "relative", @@ -17,6 +14,17 @@ const styles = { justifyContent: "center", alignItems: "center" }, + rootOnVideo: { + position: "relative", + height: "100%", + width: "100%", + backgroundImage: "linear-gradient(-180deg, #537895 0%, #09203F 100%)", + borderRadius: "5px", + boxShadow: "0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)", + display: "flex", + flexDirection: "column", + alignItems: "center" + }, selected: { background: "linear-gradient(0deg, rgba(75,78,94,1) 0%, rgba(75,78,94,1) 40%, rgba(112,114,133,1) 100%)" @@ -24,82 +32,67 @@ const styles = { centerText: { textAlign: "center" }, - circle: { - position: "absolute", - width: "6em", - height: "6em", - background: - "-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(82,113,255,1)), color-stop(1%, rgba(82,113,254,1)), color-stop(100%, rgba(87,117,251,1)))", - borderRadius: "100%" + + imageContainer: { + height: "auto", + width: "70%" + }, + imageContainerOnVideo: { + width: "30%", + height: "auto", + flex: "1 0 70%", + display: "flex", + alignItems: "center" }, image: { - width: "70%", + width: "100%", borderRadius: "100%", height: "auto", zIndex: "1" }, - onVideoEntity: { - flex: "0 1 100%", + sentimentBar: { + width: "80%", + flex: "1 0 30%", display: "flex", - justifyContent: "center", - alignItems: "center", - height: "70%" - }, - onVideoImage: { - width: "30%", - height: "auto", - borderRadius: "100%", - zIndex: 1 + alignItems: "center" } }; -class TopicCard extends PureComponent { - handleTopicCardClick = () => { - this.props.onEntityClick(this.props.entityKey); - }; - - render() { - const { - classes, - variant, - entityKey, - entityImage, - emoji, - sentiment, - selected - } = this.props; - - const selectedStyles = - selected === entityKey +const TopicCard = ({ + classes, + variant, + entityKey, + entityImage, + selected, + onEntityClick, + emojiComponent, + sentimentBarComponent +}) => { + const rootStyles = + variant === "onVideo" + ? classes.rootOnVideo + : selected === entityKey ? [classes.selected, classes.root].join(" ") : classes.root; - if (variant === "onVideo") { - return ( -
-
- {entityKey} -
- {emoji && } - -
- ); - } - return ( -
- {/*
*/} + const imageContainerStyles = + variant === "onVideo" + ? classes.imageContainerOnVideo + : classes.imageContainer; + + return ( +
onEntityClick(entityKey)}> + {/*
*/} +
{entityKey} - {emoji && }
- ); - } -} + {emojiComponent} + + {variant === "onVideo" && ( +
{sentimentBarComponent}
+ )} +
+ ); +}; export default withStyles(styles)(TopicCard); diff --git a/trenity/client/src/components/TrendingEntities/index.js b/trenity/client/src/components/TrendingEntities/index.js index c446d93..1fe85a0 100644 --- a/trenity/client/src/components/TrendingEntities/index.js +++ b/trenity/client/src/components/TrendingEntities/index.js @@ -1,11 +1,13 @@ import React, { PureComponent } from "react"; -import { toPairs, sort } from "ramda"; //Material Styles import { withStyles } from "@material-ui/core/styles"; +import { entitiesDictToSortedEntitiesArray } from "../../helper"; //UI ELements import TopicCard from "../../components/TopicCard"; +import Emoji from "../../components/Emoji"; +import SentimentBar from "../../components/SentimentBar"; const styles = { trendingContainer: { @@ -36,55 +38,13 @@ const styles = { }; class TrendingEntities extends PureComponent { - entitiesDictToSortedEntitiesArray = entitiesDict => { - const sortedEntitiesArray = sort( - (a, b) => b[1].difference - a[1].difference, - toPairs(entitiesDict) - ).map(i => { - const entity = i[0]; - const sentiment = i[1].sentiment; - - const refinedSentiment = {}; - - if (sentiment) { - if ("positive" in sentiment && "negative" in sentiment) { - refinedSentiment["positive"] = Math.round(sentiment.positive * 100); - refinedSentiment["negative"] = Math.round(sentiment.negative * 100); - } else { - if ("positive" in sentiment) { - refinedSentiment["positive"] = Math.round(sentiment.positive * 100); - refinedSentiment["negative"] = 0; - } - - if ("negative" in sentiment) { - refinedSentiment["negative"] = Math.round(sentiment.negative * 100); - refinedSentiment["positive"] = 0; - } - } - } else { - refinedSentiment["positive"] = 50; - refinedSentiment["negative"] = 50; - } - - const entityData = this.props.allEntities.find( - data => entity === data.entityName - ); - - return { - entity, - image: entityData.entityImageURL, - sentiment: refinedSentiment - }; - }); - return sortedEntitiesArray; - }; - render() { const { variant, classes, selected, trending, + allEntities, emojis, onSpecificEntityClick } = this.props; @@ -103,7 +63,7 @@ class TrendingEntities extends PureComponent { return (
- {this.entitiesDictToSortedEntitiesArray(trending.entities) + {entitiesDictToSortedEntitiesArray(trending.entities, allEntities) .slice(0, 6) .map(e => (
@@ -111,9 +71,16 @@ class TrendingEntities extends PureComponent { variant={variant === "onVideo" ? "onVideo" : "tile"} entityKey={e.entity} entityImage={e.image} - emoji={emojis[e.entity]} - sentiment={e.sentiment} selected={selected} + emojiComponent={ + emojis[e.entity] && + } + sentimentBarComponent={ + + } onEntityClick={onSpecificEntityClick} />
diff --git a/trenity/client/src/components/TwitterUser/index.js b/trenity/client/src/components/TwitterUser/index.js index 24c0363..d45c60f 100644 --- a/trenity/client/src/components/TwitterUser/index.js +++ b/trenity/client/src/components/TwitterUser/index.js @@ -2,7 +2,7 @@ import React, { Component } from "react"; import { withStyles } from "@material-ui/core/styles"; -import { textToEmoji, checkImageExists } from "../../helper"; +import { textToEmoji, checkImageExists, SAMPLE_DATA } from "../../helper"; const styles = { userContainer: { @@ -52,8 +52,14 @@ class TwitterUser extends Component { render() { const { classes, index, viewing, tweet, onUserClick } = this.props; + const viewingStyles = index === viewing ? classes.userSelected : classes.userFaded; + + const imageSrc = this.state.imageExists + ? tweet.image + : SAMPLE_DATA.dummyTweetImage; + return (
{textToEmoji(tweet.emotion)}
- {this.state.imageExists ? ( - twitter-user-profile - ) : ( - twitter-user-profile - )} + twitter-user-profile
); diff --git a/trenity/client/src/helper.js b/trenity/client/src/helper.js index f6e9c15..e60a319 100644 --- a/trenity/client/src/helper.js +++ b/trenity/client/src/helper.js @@ -1,5 +1,6 @@ import React from "react"; import axios from "axios"; +import { toPairs, sort } from "ramda"; export const textToEmoji = emotion => { switch (emotion) { @@ -112,57 +113,6 @@ export const eventsToEmoji = event => { } }; -const FRA = { - Nabil_Fekir: - "https://api.fifa.com/api/v1/picture/players/2018fwc/401458_sq-300_jpg?allowDefaultPicture=true", - Ousmane_Dembele: - "https://api.fifa.com/api/v1/picture/players/2018fwc/398680_sq-300_jpg?allowDefaultPicture=true", - Benjamin_Pavard: - "https://api.fifa.com/api/v1/picture/players/2018fwc/411471_sq-300_jpg?allowDefaultPicture=true", - Benjamin_Mendy: - "https://api.fifa.com/api/v1/picture/players/2018fwc/335995_sq-300_jpg?allowDefaultPicture=true", - Olivier_Giroud: - "https://api.fifa.com/api/v1/picture/players/2018fwc/358015_sq-300_jpg?allowDefaultPicture=true", - Djibril_Sidibe: - "https://api.fifa.com/api/v1/picture/players/2018fwc/398682_sq-300_jpg?allowDefaultPicture=true", - Blaise_Matuidi: - "https://api.fifa.com/api/v1/picture/players/2018fwc/358014_sq-300_jpg?allowDefaultPicture=true", - Paul_Pogba: - "https://api.fifa.com/api/v1/picture/players/2018fwc/367388_sq-300_jpg?allowDefaultPicture=true", - Ngolo_Kante: - "https://api.fifa.com/api/v1/picture/players/2018fwc/398681_sq-300_jpg?allowDefaultPicture=true", - Antoine_Griezmann: - "https://api.fifa.com/api/v1/picture/players/2018fwc/336435_sq-300_jpg?allowDefaultPicture=true", - Presnel_Kimpembe: - "https://api.fifa.com/api/v1/picture/players/2018fwc/401459_sq-300_jpg?allowDefaultPicture=true", - Steven_Nzonzi: - "https://api.fifa.com/api/v1/picture/players/2018fwc/319327_sq-300_jpg?allowDefaultPicture=true", - Lucas_Hernandez: - "https://api.fifa.com/api/v1/picture/players/2018fwc/411470_sq-300_jpg?allowDefaultPicture=true", - Steve_Mandanda: - "https://api.fifa.com/api/v1/picture/players/2018fwc/254133_sq-300_jpg?allowDefaultPicture=true", - Adil_Rami: - "https://api.fifa.com/api/v1/picture/players/2018fwc/299876_sq-300_jpg?allowDefaultPicture=true", - Hugo_Lloris: - "https://api.fifa.com/api/v1/picture/players/2018fwc/297105_sq-300_jpg?allowDefaultPicture=true", - Corentin_Tolisso: - "https://api.fifa.com/api/v1/picture/players/2018fwc/404566_sq-300_jpg?allowDefaultPicture=true", - Deschamps_Didier: - "https://api.fifa.com/api/v1/picture/players/2018fwc/48455_sq-300_jpg?allowDefaultPicture=true", - Florian_Thauvin: - "https://api.fifa.com/api/v1/picture/players/2018fwc/368965_sq-300_jpg?allowDefaultPicture=true", - Thomas_Lemar: - "https://api.fifa.com/api/v1/picture/players/2018fwc/402049_sq-300_jpg?allowDefaultPicture=true", - Samuel_Umtiti: - "https://api.fifa.com/api/v1/picture/players/2018fwc/368846_sq-300_jpg?allowDefaultPicture=true", - Raphael_Varane: - "https://api.fifa.com/api/v1/picture/players/2018fwc/359440_sq-300_jpg?allowDefaultPicture=true", - Alphonse_Areola: - "https://api.fifa.com/api/v1/picture/players/2018fwc/368840_sq-300_jpg?allowDefaultPicture=true", - Kylian_Mbappe: - "https://api.fifa.com/api/v1/picture/players/2018fwc/389867_sq-300_jpg?allowDefaultPicture=true" -}; - const tweets = [ { emotion: "joy", @@ -231,16 +181,59 @@ const tweets = [ } ]; -const getArrayOfEntities = entityObj => - Object.keys(entityObj).map(entity => { - return { entity, image: entityObj[entity] }; - }); +//Technical Debt +export const SAMPLE_DATA = { + tweets, + dummyTweetImage: + "http://www.razzlesnightclub.com/sites/default/files/default_images/default_testimonial.png" +}; + +//Technical Debt +export const entitiesDictToSortedEntitiesArray = ( + entitiesDict, + allEntities +) => { + const sortedEntitiesArray = sort( + (a, b) => b[1].difference - a[1].difference, + toPairs(entitiesDict) + ).map(i => { + const entity = i[0]; + const sentiment = i[1].sentiment; -export const sampleData = { - trendingEntities: getArrayOfEntities(FRA), - tweets + const refinedSentiment = {}; + + if (sentiment) { + if ("positive" in sentiment && "negative" in sentiment) { + refinedSentiment["positive"] = Math.round(sentiment.positive * 100); + refinedSentiment["negative"] = Math.round(sentiment.negative * 100); + } else { + if ("positive" in sentiment) { + refinedSentiment["positive"] = Math.round(sentiment.positive * 100); + refinedSentiment["negative"] = 0; + } + + if ("negative" in sentiment) { + refinedSentiment["negative"] = Math.round(sentiment.negative * 100); + refinedSentiment["positive"] = 0; + } + } + } else { + refinedSentiment["positive"] = 50; + refinedSentiment["negative"] = 50; + } + + const entityData = allEntities.find(data => entity === data.entityName); + + return { + entity, + image: entityData.entityImageURL, + sentiment: refinedSentiment + }; + }); + return sortedEntitiesArray; }; +//Technical Debt export const checkImageExists = async imageUrl => { return await axios .get(imageUrl) diff --git a/trenity/client/src/scenes/Home/index.js b/trenity/client/src/scenes/Home/index.js index f181dad..9f28192 100644 --- a/trenity/client/src/scenes/Home/index.js +++ b/trenity/client/src/scenes/Home/index.js @@ -28,6 +28,9 @@ const styles = { justifyContent: "center", fontSize: "0.8em", alignItems: "center" + }, + brand: { + fontSize: "1.5em" } }; @@ -61,7 +64,9 @@ class Home extends Component { return ( - + +
Trenity
+ diff --git a/trenity/client/src/scenes/Match/SecondScreenExperience.js b/trenity/client/src/scenes/Match/SecondScreenExperience.js index 8ec1363..f5e0f54 100644 --- a/trenity/client/src/scenes/Match/SecondScreenExperience.js +++ b/trenity/client/src/scenes/Match/SecondScreenExperience.js @@ -51,7 +51,7 @@ class SecondScreenExperience extends Component { return (
- {!isFullScreen &&
{navbar}
} + {!isFullScreen && navbar} {children} {!isFullScreen && ( diff --git a/trenity/client/src/scenes/Match/index.js b/trenity/client/src/scenes/Match/index.js index 50d34ff..39a6fbe 100644 --- a/trenity/client/src/scenes/Match/index.js +++ b/trenity/client/src/scenes/Match/index.js @@ -18,6 +18,8 @@ import ReactionFeed from "../../components/ReactionFeed"; //Assets import "../../assets/css/swiper.min.css"; +import Navbar from "../../components/Navbar/index"; +import ScoreCard from "../../components/ScoreCard"; // import video from "../../assets/video/sample_video.mp4"; class Match extends Component { @@ -328,11 +330,13 @@ class Match extends Component { render() { if (this.state.startSimulation) { const navbar = ( - + + + ); const events = ; diff --git a/trenity/server/entityList.js b/trenity/server/entityList.js index e8cee63..8cf5979 100644 --- a/trenity/server/entityList.js +++ b/trenity/server/entityList.js @@ -255,17 +255,17 @@ const MATCHES_LIST = [ teamOneId: "CRO", teamTwoId: "FRA", startTime: moment.utc("2018-07-15 15:18:30") - }, - { - key: "BELFRA_SEMI", - matchName: "Belgium vs France", - matchTileImage: - "https://i.ytimg.com/vi/D_hu6xpwn4Q/hqdefault.jpg?sqp=-oaymwEZCPYBEIoBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLCqRPhweDAYucAxelwQqhrTO1qJbQ", - isLive: false, - teamOneId: "BEL", - teamTwoId: "FRA", - startTime: moment.utc("2018-07-10 18:00:00") } + // { + // key: "BELFRA_SEMI", + // matchName: "Belgium vs France", + // matchTileImage: + // "https://i.ytimg.com/vi/D_hu6xpwn4Q/hqdefault.jpg?sqp=-oaymwEZCPYBEIoBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLCqRPhweDAYucAxelwQqhrTO1qJbQ", + // isLive: false, + // teamOneId: "BEL", + // teamTwoId: "FRA", + // startTime: moment.utc("2018-07-10 18:00:00") + // } ]; module.exports = {