diff --git a/sports-matcher/src/react-components/Chat.js b/sports-matcher/src/react-components/Chat.js new file mode 100644 index 0000000..da3ac21 --- /dev/null +++ b/sports-matcher/src/react-components/Chat.js @@ -0,0 +1,18 @@ +/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */ + +import React from 'react'; +import './chats.css' + +class Chat extends React.Component { + render() { + return ( +
+
+ {this.props.message} +
+
+ ) + } +} + +export default Chat; \ No newline at end of file diff --git a/sports-matcher/src/react-components/ChatWindow.js b/sports-matcher/src/react-components/ChatWindow.js new file mode 100644 index 0000000..2db5275 --- /dev/null +++ b/sports-matcher/src/react-components/ChatWindow.js @@ -0,0 +1,77 @@ +/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */ + +import React from 'react'; +import './chats.css' +import Chat from './Chat' +import Contact from './Contact' + +class ChatWindow extends React.Component { + render() { + return ( +
+ + +
+ ) + } + test() { + alert("test") + } +} + +class UserList extends React.Component { + render() { + return ( +
+ + + +
+ ) + } +} + +class MessageList extends React.Component { + render() { + return ( +
+
+
+ Got time for tennis this week, Raiden? +
+
+
+
+ Foolish question. If I do not even have free time, How am I to pursue eternity and fulfill my promise to the people of Inazuma? +
+
+
+
+ Aiight, see you at 4 +
+
+
+
+ As you wish. +
+
+
+ ) + } +} +// class ChatWindow extends React.Component { +// render() { +// return ( +//
+// +// {/* */} +//
+// ) +// } +// } +class ChatInput extends React.Component { + render() { + return (

Placeholder

) + } +} +export default ChatWindow; \ No newline at end of file diff --git a/sports-matcher/src/react-components/Contact.js b/sports-matcher/src/react-components/Contact.js new file mode 100644 index 0000000..cda57ef --- /dev/null +++ b/sports-matcher/src/react-components/Contact.js @@ -0,0 +1,30 @@ +/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */ + +import React from 'react'; +import './chats.css'; + +class Contact extends React.Component { + constructor(props) { + super(props) + this.state = { + selected : this.props.selected + } + } + onClick() { + this.setState({selected : "true"}) + } + render() { + return ( +
+
+ this.onClick()} /> +
+
+
this.onClick()}>{this.props.name}
+
+
+ ) + } +} + +export default Contact; \ No newline at end of file diff --git a/sports-matcher/src/react-components/chats.css b/sports-matcher/src/react-components/chats.css new file mode 100644 index 0000000..b375bbf --- /dev/null +++ b/sports-matcher/src/react-components/chats.css @@ -0,0 +1,88 @@ +.chatcomponent > * { + display: inline-block; +} +.contact { + border-style: solid; + border-width: 1px; + border-bottom: 1px; + border-color:rgb(75, 75, 75); + + background-color: rgb(80, 80, 80); + height: 70px; + + user-select: none; +} +.contact.dark { + background-color: black; +} +.contactlist { + height: 500px; + width: 200px; + top: 0; + left: 0; + box-sizing: border-box; + border-radius: 2%; + background: rgb(48, 45, 45); + overflow-y: scroll; + overflow-x: hidden; + + text-align: center; +} +.messagelist { + height: 500px; + width: 800px; + background-color: rgb(80, 80, 80); + overflow-x: hidden; + overflow-y: scroll; +} +.messagelist > * { + display: block; +} +.profilepiccontainer { + height: 60px; + width: 60px; + margin-top: 10px; + margin-left: 10px; + margin-right: 10px; + float: left; +} +.profilepic { + border-radius: 50%; + height: 50px; + width: 50px; +} +.profilenamecontainer { + text-align: center; + padding: 7%; +} +.profilename { + color: white; +} +.chatbubble { + margin-top: 20px; + margin-left: 20px; + display: inline-block; + position: relative; + width: auto; + height: auto; + padding: 10px; + + border-radius: 10px; +} +.left { + background-color: rgba(0, 57, 163, 0.637); + margin-right: 35px; + color: white; + float: auto; +} +.right { + background-color: khaki; + color: black; + margin-right: 35px; + float: right; +} +.chatbubble-container { + width: 800px; + height: auto; + float: left; +} \ No newline at end of file